@charset "utf-8";
/* CSS Document */


  :root{
    --bg:#ffffff;
    --bg-alt:#f7f3ee;
    --bg-warm:#efe7dc;
    --ink:#1f1a14;
    --ink-soft:#5b5147;
    --rule:#e6ddd0;
    --maple:#c9a072;
    --maple-deep:#a47742;
    --walnut:#4a2f1f;
    --accent:#8a5a2b;
    --price:#1f1a14;
    --success:#3f6b3a;
    --shadow:0 1px 2px rgba(31,26,20,.04), 0 12px 28px rgba(31,26,20,.06);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
 /*  body{
    font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background:var(--bg);
    color:var(--ink);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit;text-decoration:none}
  button{font-family:inherit;cursor:pointer;border:none;background:none}*/
  img{max-width:100%;display:block}

  /* ============ ANNOUNCEMENT BAR ============ */
  .announce{
    background:var(--walnut);
    color:#f1e6d6;
    text-align:center;
    font-size:12px;
    letter-spacing:.12em;
    text-transform:uppercase;
    padding:10px 16px;
    font-weight:400;
  }

  /* ============ HEADER ============ */
  .header{
    border-bottom:1px solid var(--rule);
    background:var(--bg);
    position:sticky;top:0;z-index:50;
  }
  .header-inner{
    max-width:1280px;margin:0 auto;
    padding:18px 32px;
    display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  }
  .nav{display:flex;gap:32px;font-size:14px;font-weight:400;letter-spacing:.02em}
  .nav a{position:relative;padding:4px 0;transition:color .2s}
  .nav a:hover{color:var(--accent)}
  .nav a::after{
    content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
    background:var(--accent);transform:scaleX(0);transition:transform .25s ease;transform-origin:left;
  }
  .nav a:hover::after{transform:scaleX(1)}
  .logo{
    font-family:'Cormorant Garamond', serif;
    font-size:26px;letter-spacing:.18em;font-weight:500;text-align:center;
  }
  .logo span{color:var(--accent)}
  .header-right{display:flex;justify-content:flex-end;gap:22px;align-items:center;font-size:14px}
  .header-right .icon{display:inline-flex;align-items:center;gap:6px;color:var(--ink-soft);transition:color .2s}
  .header-right .icon:hover{color:var(--ink)}

  /* ============ BREADCRUMB ============ */
  .breadcrumb{
    max-width:1280px;margin:0 auto;
    padding:18px 32px 0;
    font-size:13px;color:var(--ink-soft);letter-spacing:.02em;
  }
  .breadcrumb a:hover{color:var(--accent)}
  .breadcrumb .sep{margin:0 8px;opacity:.5}
  .breadcrumb strong{color:var(--ink);font-weight:500}

  /* ============ PRODUCT LAYOUT ============ */
  .product{
    max-width:1280px;margin:0 auto;
    padding:32px 32px 80px;
    display:grid;grid-template-columns:1.15fr 1fr;gap:64px;
  }

  /* Gallery */
  .gallery{display:flex;flex-direction:column;gap:14px;position:sticky;top:88px;align-self:start}
  .main-image{
    background:var(--bg-alt);
    border-radius:2px;
    overflow:hidden;
    aspect-ratio:4/5;
    position:relative;
  }
  .main-image img{width:100%;height:100%;object-fit:cover;transition:opacity .35s ease}
  .badge{
    position:absolute;top:18px;left:18px;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(8px);
    color:var(--walnut);
    font-size:11px;letter-spacing:.18em;text-transform:uppercase;
    padding:8px 14px;font-weight:500;
  }
  .thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  .thumb{
    aspect-ratio:4/5;background:var(--bg-alt);overflow:hidden;cursor:pointer;
    border:1px solid transparent;transition:border-color .2s, transform .2s;
    border-radius:2px;
  }
  .thumb img{width:100%;height:100%;object-fit:cover}
  .thumb.active{border-color:var(--accent)}
  .thumb:hover{transform:translateY(-2px)}

  /* Details */
  .details{padding-top:8px}
  .eyebrow{
    font-size:12px;letter-spacing:.22em;text-transform:uppercase;
    color:var(--accent);font-weight:500;margin-bottom:14px;
  }
  h1{
    font-family:'Cormorant Garamond', serif;
    font-size:42px;line-height:1.1;font-weight:500;
    letter-spacing:-.005em;margin-bottom:18px;
  }
  .rating{
    display:flex;align-items:center;gap:10px;
    font-size:13px;color:var(--ink-soft);margin-bottom:22px;
  }
  .stars{color:var(--maple-deep);letter-spacing:2px;font-size:14px}
  .price-row{
    display:flex;align-items:baseline;gap:14px;
    padding:18px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
    margin-bottom:26px;
  }
  .price{font-family:'Cormorant Garamond', serif;font-size:34px;font-weight:500;color:var(--price)}
  .price-meta{font-size:13px;color:var(--ink-soft)}

  .lead{
    font-size:15.5px;line-height:1.7;color:var(--ink-soft);margin-bottom:1px;
  }
  .lead strong{color:var(--ink);font-weight:500}

  /* Personalisation */
  .perso{
    background:var(--bg-alt);
    border:1px solid var(--rule);
    padding:22px 22px 24px;
    margin-bottom:26px;
    position:relative;
  }
  .perso::before{
    content:"";position:absolute;top:0;left:0;width:3px;height:100%;
    background:var(--walnut);
  }
  .perso-label{
    display:flex;align-items:center;gap:8px;
    font-size:12px;letter-spacing:.18em;text-transform:uppercase;
    color:var(--walnut);font-weight:600;margin-bottom:6px;
  }
  .perso-label::before{
    content:"";width:14px;height:1px;background:var(--walnut);
  }
  .perso h3{
    font-family:'Cormorant Garamond', serif;
    font-size:22px;font-weight:500;margin-bottom:6px;
  }
  .perso p{font-size:13.5px;color:var(--ink-soft);margin-bottom:14px}
  .perso input{
    width:100%;padding:12px 14px;font-family:inherit;font-size:14px;
    background:#fff;border:1px solid var(--rule);
    transition:border-color .2s;
  }
  .perso input:focus{outline:none;border-color:var(--accent)}
  .perso .hint{
    display:flex;justify-content:space-between;
    font-size:12px;color:var(--ink-soft);margin-top:6px;
  }
  .perso-preview{
    margin-top:14px;padding:18px;background:#fff;border:1px dashed var(--rule);
    text-align:center;
    font-family:'Cormorant Garamond', serif;font-size:24px;
    color:var(--walnut);letter-spacing:.04em;min-height:60px;
    display:flex;align-items:center;justify-content:center;
  }
  .perso-preview .placeholder{color:#bfb3a3;font-style:italic;font-size:18px}

  /* Quantity + CTA */
  .actions{display:grid;grid-template-columns:auto 1fr;gap:12px;margin-bottom:18px}
  .qty{
    display:flex;align-items:center;border:1px solid var(--rule);
    height:54px;
  }
  .qty button{
    width:42px;height:100%;font-size:18px;color:var(--ink-soft);
    transition:background .15s, color .15s;
  }
  .qty button:hover{background:var(--bg-alt);color:var(--ink)}
  .qty input{
    width:48px;text-align:center;border:none;font-family:inherit;font-size:15px;
    background:transparent;
  }
  .qty input:focus{outline:none}

  .cta{
    height:54px;
    background:var(--ink);color:#fff;
    font-size:13px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;
    transition:background .25s, transform .15s;
    position:relative;overflow:hidden;
  }
  .cta:hover{background:var(--walnut)}
  .cta:active{transform:scale(.99)}

  .cta-secondary{
    width:100%;height:50px;
    border:1px solid var(--ink);background:transparent;
    font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
    transition:background .2s, color .2s;margin-bottom:32px;
  }
  .cta-secondary:hover{background:var(--ink);color:#fff}

  /* Trust bar */
  .trust{
    display:grid;grid-template-columns:repeat(2,1fr);gap:14px 22px;
    padding:22px 0;border-top:1px solid var(--rule);
	margin: 20px;
    font-size:13px;color:var(--ink-soft);
  }
  .trust div{display:flex;align-items:flex-start;gap:10px;line-height:1.45}
  .trust svg{flex-shrink:0;margin-top:2px;color:var(--accent)}

  /* ============ ACCORDION ============ */
  .accordion{border-top:1px solid var(--rule);margin-top:8px}
  details{border-bottom:1px solid var(--rule)}
  summary{
    list-style:none;cursor:pointer;
    padding:20px 0;display:flex;justify-content:space-between;align-items:center;
    font-size:14px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;
  }
  summary::-webkit-details-marker{display:none}
  summary .plus{
    width:14px;height:14px;position:relative;
    transition:transform .3s ease;
  }
  summary .plus::before,summary .plus::after{
    content:"";position:absolute;background:var(--ink);
    top:50%;left:0;width:100%;height:1px;transform:translateY(-50%);
  }
  summary .plus::after{transform:translateY(-50%) rotate(90deg);transition:transform .3s ease}
  details[open] summary .plus::after{transform:translateY(-50%) rotate(0deg)}
  details[open] summary{padding-bottom:8px}
  .acc-body{padding:0 0 22px;font-size:14px;color:var(--ink-soft);line-height:1.7}
  .acc-body table{width:100%;border-collapse:collapse;margin-top:6px}
  .acc-body td{padding:10px 0;border-bottom:1px solid var(--rule);font-size:13.5px}
  .acc-body td:first-child{color:var(--ink);width:42%;font-weight:500}

  /* ============ FEATURE STRIP ============ */
  .features{
    background:var(--bg-warm);
    padding:64px 32px;margin-top:40px;
  }
  .features-inner{
    max-width:1280px;margin:0 auto;
    display:grid;grid-template-columns:repeat(6,1fr);gap:24px;
  }
  .feature{text-align:center}
  .feature-icon{
    width:48px;height:48px;margin:0 auto 12px;
    color:var(--walnut);
  }
  .feature p{font-size:12.5px;color:var(--ink);line-height:1.4;letter-spacing:.04em}
  .feature p strong{display:block;font-weight:600;font-size:13px;margin-bottom:2px}

  /* ============ STORY SECTION ============ */
  .story{
    max-width:1280px;margin:0 auto;
    padding:96px 32px;
    display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;
  }
  .story-text .eyebrow{margin-bottom:16px}
  .story-text h2{
    font-family:'Cormorant Garamond', serif;
    font-size:40px;font-weight:500;line-height:1.15;letter-spacing:-.005em;margin-bottom:22px;
  }
  .story-text p{font-size:15px;color:var(--ink-soft);line-height:1.75;margin-bottom:16px}
  .story-text .signature{
    margin-top:24px;font-family:'Cormorant Garamond', serif;
    font-size:20px;color:var(--ink);font-style:italic;
  }
  .story-text .signature small{
    display:block;font-family:'Inter',sans-serif;
    font-size:12px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--ink-soft);font-style:normal;margin-top:4px;
  }
  .story-image{
    aspect-ratio:4/5;background:var(--bg-alt);overflow:hidden;
  }
  .story-image img{width:100%;height:100%;object-fit:cover}

  /* ============ RELATED ============ */
  .related{
    background:var(--bg-alt);
    padding:80px 32px 96px;
  }
  .related-inner{max-width:1280px;margin:0 auto}
  .related h2{
    font-family:'Cormorant Garamond', serif;
    font-size:34px;font-weight:500;text-align:center;margin-bottom:48px;
  }
  .related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
  .rel-card{cursor:pointer;transition:transform .3s ease}
  .rel-card:hover{transform:translateY(-4px)}
  .rel-img{aspect-ratio:4/5;overflow:hidden;background:#fff;margin-bottom:16px}
  .rel-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
  .rel-card:hover .rel-img img{transform:scale(1.04)}
  .rel-name{
    font-family:'Cormorant Garamond', serif;
    font-size:20px;font-weight:500;margin-bottom:4px;
  }
  .rel-price{font-size:14px;color:var(--ink-soft)}

  /* ============ FOOTER ============ */
  .footer{
    background:var(--walnut);
    color:#e8dcc9;
    padding:64px 32px 32px;
  }
  .footer-inner{max-width:1280px;margin:0 auto}
  .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px}
  .footer h4{
    font-family:'Cormorant Garamond', serif;
    font-size:18px;font-weight:500;margin-bottom:18px;color:#fff;letter-spacing:.04em;
  }
  .footer .brand{
    font-family:'Cormorant Garamond', serif;
    font-size:24px;letter-spacing:.18em;margin-bottom:16px;color:#fff;
  }
  .footer p,.footer a{font-size:13.5px;line-height:1.85;color:#c9b89a}
  .footer a:hover{color:#fff}
  .footer ul{list-style:none}
  .footer-bottom{
    border-top:1px solid rgba(255,255,255,.1);
    padding-top:24px;
    display:flex;justify-content:space-between;align-items:center;
    font-size:12px;color:#a89478;letter-spacing:.04em;
  }
  .pay-icons{display:flex;gap:10px;align-items:center}
  .pay-pill{
    background:#fff;color:var(--walnut);
    font-size:10px;font-weight:600;padding:5px 9px;border-radius:3px;letter-spacing:.04em;
  }

  /* ============ RESPONSIVE ============ */
  @media (max-width: 980px){
    .product{grid-template-columns:1fr;gap:40px;padding:24px 20px 60px}
    .gallery{position:static}
    .header-inner{grid-template-columns:auto 1fr auto;padding:16px 20px}
    .nav{display:none}
    .breadcrumb{padding:16px 20px 0}
    h1{font-size:32px}
    .features-inner{grid-template-columns:repeat(3,1fr);gap:32px 16px}
    .story{grid-template-columns:1fr;gap:40px;padding:64px 20px}
    .story-text h2{font-size:32px}
    .related-grid{grid-template-columns:1fr;gap:28px}
    .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
    .footer-bottom{flex-direction:column;gap:14px;text-align:center}
  }
  @media (max-width: 520px){
    .features-inner{grid-template-columns:repeat(2,1fr)}
    .footer-grid{grid-template-columns:1fr}
    .actions{grid-template-columns:1fr;}
    .qty{justify-self:start}
  }

  /* Subtle entrance */
  @keyframes rise {from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)}}
  .details > *{animation:rise .6s ease both}
  .details > *:nth-child(1){animation-delay:.05s}
  .details > *:nth-child(2){animation-delay:.1s}
  .details > *:nth-child(3){animation-delay:.15s}
  .details > *:nth-child(4){animation-delay:.2s}
  .details > *:nth-child(5){animation-delay:.25s}
  .details > *:nth-child(6){animation-delay:.3s}