:root{
    --bg:#FFFFFF;
    --bg-soft:#F5F5F1;
    --bg-mid:#EAEAE3;
    --fg:#0F0F0F;
    --fg-muted:rgba(15,15,15,.62);
    --fg-faint:rgba(15,15,15,.38);
    --line:#E2E2DC;
    --panel:#ECECE6;
    --panel-2:#E1E1D9;
    --accent:#B6965C;
    --accent-ink:#7A5F35;
    --accent-soft:rgba(182,150,92,.12);
    --display: "Bodoni Moda", Didot, Georgia, "Times New Roman", serif;
    --sans: "Montserrat", -apple-system, "Segoe UI", system-ui, Roboto, sans-serif;
    color-scheme: light;
  }

  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{background:var(--bg); color:var(--fg); font-family:var(--sans); -webkit-font-smoothing:antialiased; overflow-x:hidden;}
  img,svg,video{max-width:100%; display:block;}
  a{color:inherit;}
  button{font-family:inherit;}
  :focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
  .wrap{max-width:1240px; margin:0 auto; padding-inline:clamp(18px,4vw,48px);}
  .label{font-family:var(--sans); font-weight:600;}
  .display{font-family:var(--display);}
  .eyebrow{font-family:var(--sans); font-weight:600; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-muted);}

  /* ---------- announce ---------- */
  .announce{background:var(--fg); color:var(--bg); font-family:var(--sans); font-weight:500; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; overflow:hidden; white-space:nowrap; height:34px; display:flex; align-items:center;}
  .announce__track{display:inline-flex; gap:56px; padding-left:56px; animation:marquee 24s linear infinite;}
  .announce__track span{display:inline-flex; align-items:center; gap:10px;}
  .announce__track span::after{content:"·"; opacity:.5; margin-left:56px; color:var(--accent);}
  @keyframes marquee{from{transform:translateX(0);} to{transform:translateX(-50%);}}
  @media (prefers-reduced-motion: reduce){.announce__track{animation:none;}}

  /* ---------- header ---------- */
  header.site{position:sticky; top:0; z-index:40; background:var(--bg); border-bottom:1px solid var(--line);}
  .nav{display:flex; align-items:center; gap:26px; height:84px;}
  .logo{display:inline-flex; align-items:center; gap:9px; text-decoration:none; font-family:var(--display); font-weight:600; font-size:26px; letter-spacing:.04em; margin-right:auto;}
  .logo .sunmark{width:22px; height:22px; flex:none;}
  .logo .sunmark polygon{fill:none; stroke:var(--fg); stroke-width:1.3; stroke-linejoin:round;}
  .logo .sunmark circle{fill:none; stroke:var(--fg); stroke-width:1.3;}
  .logo .sunmark path{fill:none; stroke:var(--fg); stroke-width:1.3; stroke-linecap:round;}
  .nav__links{display:flex; gap:28px; font-family:var(--sans); font-weight:600; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;}
  .nav__links a{text-decoration:none; position:relative; padding-bottom:3px;}
  .nav__links a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--accent); transition:right .25s ease;}
  .nav__links a:hover::after{right:0;}
  .nav__right{display:flex; align-items:center; gap:18px; margin-left:auto;}
  .search-pill{display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:2px; padding:9px 16px; font-size:12.5px; color:var(--fg-faint); background:transparent; min-width:190px; font-family:var(--sans);}
  .icon-btn{background:none; border:none; color:var(--fg); cursor:pointer; position:relative; display:flex; align-items:center;}
  .cart-count{position:absolute; top:-7px; right:-9px; background:var(--accent); color:#fff; font-family:var(--sans); font-weight:700; font-size:9.5px; width:15px; height:15px; border-radius:50%; display:flex; align-items:center; justify-content:center;}
  .burger{display:none; background:none; border:none; color:var(--fg); cursor:pointer;}
  @media (max-width:900px){
    .nav__links{display:none;}
    .search-pill{display:none;}
    .burger{display:block;}
    .nav__links.mobile-open{display:flex; flex-direction:column; gap:18px; position:absolute; top:84px; left:0; right:0; background:var(--bg); border-bottom:1px solid var(--line); padding:22px clamp(18px,4vw,48px) 28px; z-index:39;}
  }

  /* ---------- hero ---------- */
  .hero{position:relative; height:280vh; background:var(--bg-soft);}
  .hero-sticky{position:sticky; top:84px; height:calc(100vh - 84px); overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; padding-bottom:8vh;}
  .hero-media{position:absolute; top:32%; left:50%; transform:translate(-50%,-50%); width:min(70vw,820px); aspect-ratio:16/9; z-index:0; pointer-events:none;}
  .hero-media img{
    width:100%; height:100%; object-fit:contain;
    filter:brightness(1.22) contrast(1.04) saturate(1.05);
    -webkit-mask-image:radial-gradient(closest-side, #000 12%, transparent 90%);
    mask-image:radial-gradient(closest-side, #000 12%, transparent 90%);
  }
  .hero-scrim{
    position:absolute; inset:0; z-index:1; pointer-events:none;
    background:radial-gradient(65% 55% at 50% 68%, var(--bg) 0%, color-mix(in srgb, var(--bg) 78%, transparent) 45%, transparent 75%);
  }
  .hero__inner{position:relative; z-index:2; max-width:620px; margin:0 auto; text-align:center;}
  .hero h1{font-family:var(--display); font-weight:600; font-size:clamp(38px,5.6vw,64px); line-height:1.06; letter-spacing:.005em; margin:18px 0 22px; text-wrap:balance;}
  .hero h1 .hl{font-style:italic; color:var(--accent-ink);}
  .hero p.lede{font-size:16px; line-height:1.7; color:var(--fg-muted); max-width:46ch; margin:0 auto 30px;}
  .cta-row{display:flex; gap:14px; flex-wrap:wrap; justify-content:center;}
  .btn{font-family:var(--sans); font-weight:600; font-size:12px; letter-spacing:.08em; text-transform:uppercase; padding:16px 30px; border:1px solid var(--fg); background:var(--fg); color:var(--bg); text-decoration:none; display:inline-flex; align-items:center; gap:10px; cursor:pointer; transition:opacity .2s ease;}
  .btn:hover{opacity:.8;}
  .btn--ghost{background:transparent; color:var(--fg); border-color:var(--fg);}
  .btn--ghost:hover{background:var(--fg); color:var(--bg); opacity:1;}
  .meta-line{font-family:var(--sans); font-weight:500; font-size:10.5px; letter-spacing:.06em; color:var(--fg-faint); text-transform:uppercase; margin-top:30px; display:flex; gap:20px; flex-wrap:wrap; justify-content:center;}
  @media (max-width:640px){.hero-media{width:92vw;}}

  /* ---------- destination strip ---------- */
  .destinations{border-block:1px solid var(--line); overflow:hidden;}
  .dest-track{display:flex; gap:8px; padding:16px 0; padding-left:24px; width:max-content; animation:destMarquee 32s linear infinite;}
  .destinations:hover .dest-track{animation-play-state:paused;}
  @keyframes destMarquee{from{transform:translateX(0);} to{transform:translateX(-50%);}}
  @media (prefers-reduced-motion: reduce){.dest-track{animation:none;}}
  .dest-tag{display:flex; align-items:center; gap:8px; padding:8px 16px 8px 12px; border:1px solid var(--line); font-family:var(--sans); font-weight:600; font-size:11px; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; white-space:nowrap; background:transparent;}
  .dest-tag .swatch{width:9px; height:9px; border-radius:50%; flex:none;}

  /* ---------- section head ---------- */
  .section{padding:96px 0; border-bottom:1px solid var(--line); background:var(--bg);}
  .section--mid{background:var(--bg-mid);}
  .section-banner{width:100%; margin-bottom:40px;}
  .section-banner img{width:100%; height:auto; display:block;}
  .section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:44px; flex-wrap:wrap;}
  .section-head h2{font-family:var(--display); font-weight:600; font-size:clamp(26px,3vw,38px); margin:10px 0 0; letter-spacing:.005em; text-wrap:balance;}
  .section-head p{margin:12px 0 0; color:var(--fg-muted); font-size:14px; max-width:46ch; line-height:1.6;}
  .section-head a{font-family:var(--sans); font-weight:600; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; border-bottom:1px solid var(--fg); white-space:nowrap;}

  /* ---------- product grid ---------- */
  .grid{display:grid; grid-template-columns:repeat(4,1fr); gap:28px;}
  .grid--3{grid-template-columns:repeat(3,1fr);}
  .card{background:var(--bg); display:flex; flex-direction:column;}
  .card__photo{position:relative; aspect-ratio:1/1; overflow:hidden; background:linear-gradient(155deg, var(--tint-a,var(--panel)) 0%, var(--tint-b,var(--panel-2)) 100%); display:block; text-decoration:none;}
  .card__photo svg{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:64%;}
  .card__photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:10%;}
  .badge{position:absolute; top:14px; left:14px; font-family:var(--sans); font-weight:700; font-size:10px; letter-spacing:.06em; padding:4px 9px; border:1px solid var(--accent-ink); color:var(--accent-ink); background:color-mix(in srgb, var(--bg) 82%, transparent); text-transform:uppercase; z-index:2;}
  .card__body{padding:18px 2px 0; display:flex; flex-direction:column; gap:6px;}
  .card__name{font-family:var(--display); font-weight:600; font-size:17px; letter-spacing:.01em; text-decoration:none; color:inherit; display:inline-block;}
  .card__name:hover{text-decoration:underline;}
  .card__price-row{display:flex; align-items:baseline; gap:9px; margin-top:2px; font-variant-numeric:tabular-nums;}
  .card__price-old{font-family:var(--sans); font-size:11.5px; color:var(--fg-faint); text-decoration:line-through;}
  .card__price-new{font-family:var(--sans); font-weight:700; font-size:15px; color:var(--fg);}
  .card__install{font-family:var(--sans); font-size:10.5px; color:var(--fg-faint);}
  @media (max-width:980px){.grid{grid-template-columns:repeat(2,1fr);} .grid--3{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:560px){.grid, .grid--3{grid-template-columns:1fr;}}

  /* ---------- foco diptych ---------- */
  .foco-diptych{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line);}
  .foco-card{padding:52px clamp(24px,4vw,56px); display:flex; flex-direction:column; gap:16px; position:relative; background:var(--bg);}
  .foco-card.night{background:var(--bg); color:var(--fg); border:2px solid var(--fg);}
  .foco-mode{display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); font-weight:600; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; opacity:.6;}
  .foco-card.night .foco-mode{background:var(--fg); color:var(--bg); opacity:1; padding:6px 12px; align-self:flex-start;}
  .foco-card h3{font-family:var(--display); font-weight:600; font-size:clamp(21px,2.4vw,27px); margin:0; letter-spacing:.01em;}
  .foco-card p.blurb{margin:0; font-size:14px; line-height:1.65; opacity:.78; max-width:38ch;}
  .foco-lens{width:132px; height:165px; margin:4px 0; object-fit:contain;}
  .foco-card .price-row{display:flex; align-items:baseline; gap:9px; font-variant-numeric:tabular-nums; margin-top:6px;}
  .foco-card .price-old{font-family:var(--sans); font-size:11.5px; opacity:.55; text-decoration:line-through;}
  .foco-card .price-new{font-family:var(--sans); font-weight:700; font-size:17px;}
  .foco-card .install{font-family:var(--sans); font-size:10.5px; opacity:.6;}
  .foco-card .foco-badge{position:absolute; top:26px; right:26px; font-family:var(--sans); font-weight:700; font-size:10px; letter-spacing:.06em; padding:4px 9px; border:1px solid var(--accent); color:var(--accent); text-transform:uppercase;}
  .foco-card.night .foco-badge{color:var(--accent); border-color:var(--accent);}
  .foco-card .foco-cta{align-self:flex-start; margin-top:8px; font-family:var(--sans); font-weight:600; font-size:11px; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:2px;}
  @media (max-width:760px){.foco-diptych{grid-template-columns:1fr;}}

  /* ---------- trust strip ---------- */
  .trust{padding:72px 0; border-bottom:1px solid var(--line); background:var(--bg-mid);}
  .trust__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:36px;}
  .trust__item{display:flex; flex-direction:column; gap:12px;}
  .trust__item svg{width:22px; height:22px; color:var(--accent-ink);}
  .trust__item h4{font-family:var(--sans); font-weight:700; font-size:11px; letter-spacing:.05em; text-transform:uppercase; margin:0;}
  .trust__item p{font-size:13.5px; color:var(--fg-muted); margin:0; line-height:1.6;}
  @media (max-width:900px){.trust__grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:560px){.trust__grid{grid-template-columns:1fr;}}

  /* ---------- whatsapp cta ---------- */
  .wa{padding:100px 0; text-align:center; background:var(--bg-soft); border-bottom:1px solid var(--line);}
  .wa h2{font-family:var(--display); font-weight:600; font-size:clamp(26px,3.4vw,38px); margin:14px 0 16px;}
  .wa p{color:var(--fg-muted); max-width:44ch; margin:0 auto 30px; line-height:1.65;}
  .wa-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}
  .wa-btn{display:inline-flex; align-items:center; gap:10px; background:var(--fg); color:var(--bg); padding:15px 28px; text-decoration:none; font-family:var(--sans); font-weight:700; font-size:12.5px; letter-spacing:.04em;}

  /* ---------- footer ---------- */
  footer{padding:76px 0 36px; background:var(--fg); color:var(--bg);}
  .foot__grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:40px; padding-bottom:54px; border-bottom:1px solid color-mix(in srgb, var(--bg) 18%, transparent);}
  .foot__brand p{font-size:13px; opacity:.7; max-width:32ch; line-height:1.65; margin:16px 0 22px;}
  .foot .logo{color:var(--bg);}
  .foot .logo .sunmark polygon, .foot .logo .sunmark circle, .foot .logo .sunmark path{stroke:var(--bg);}
  .social{display:flex; gap:12px;}
  .social a{width:33px; height:33px; border:1px solid color-mix(in srgb, var(--bg) 30%, transparent); display:flex; align-items:center; justify-content:center; text-decoration:none;}
  .foot__col h5{font-family:var(--sans); font-weight:700; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; opacity:.55; margin:0 0 18px;}
  .foot__col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px;}
  .foot__col a{font-size:14px; text-decoration:none; opacity:.88;}
  .foot__col a:hover{opacity:1; text-decoration:underline;}
  .seal{display:inline-flex; align-items:center; gap:8px; border:1px solid color-mix(in srgb, var(--bg) 30%, transparent); padding:8px 14px; font-family:var(--sans); font-weight:600; font-size:10px; letter-spacing:.05em; text-transform:uppercase; opacity:.85;}
  .foot__bottom{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; padding-top:26px; font-family:var(--sans); font-size:10.5px; opacity:.58;}

  /* ---------- add to cart ---------- */
  .add-btn{width:100%; margin-top:10px; padding:11px 16px; border:1px solid var(--fg); background:transparent; color:var(--fg); font-family:var(--sans); font-weight:600; font-size:11px; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; transition:background .18s ease, color .18s ease;}
  .add-btn:hover{background:var(--fg); color:var(--bg);}
  .add-btn[data-added]{background:var(--accent-ink); border-color:var(--accent-ink); color:#fff;}
  .foco-cta{background:none; border:none; padding-bottom:2px; cursor:pointer;}

  /* ---------- cart drawer ---------- */
  .cart-overlay{position:fixed; inset:0; background:rgba(15,15,15,.4); z-index:98; opacity:0; pointer-events:none; transition:opacity .25s ease;}
  .cart-overlay.open{opacity:1; pointer-events:auto;}
  .cart-drawer{position:fixed; top:0; right:0; bottom:0; width:min(420px,92vw); background:var(--bg); z-index:99; display:flex; flex-direction:column; transform:translateX(100%); transition:transform .3s ease; box-shadow:-8px 0 30px rgba(0,0,0,.12);}
  .cart-drawer.open{transform:translateX(0);}
  .cart-head{display:flex; align-items:center; justify-content:space-between; padding:22px 24px; border-bottom:1px solid var(--line);}
  .cart-head h3{font-family:var(--display); font-weight:600; font-size:19px; margin:0;}
  .cart-close{background:none; border:none; cursor:pointer; color:var(--fg); padding:4px;}
  .cart-items{flex:1; overflow-y:auto; padding:8px 24px;}
  .cart-empty{padding:40px 0; text-align:center; color:var(--fg-faint); font-size:13.5px;}
  .cart-item{display:flex; gap:14px; padding:18px 0; border-bottom:1px solid var(--line);}
  .cart-item__photo{width:64px; height:64px; flex:none; background:var(--panel);}
  .cart-item__photo svg{width:100%; height:100%;}
  .cart-item__body{flex:1; display:flex; flex-direction:column; gap:6px; min-width:0;}
  .cart-item__name{font-family:var(--display); font-weight:600; font-size:14.5px;}
  .cart-item__price{font-family:var(--sans); font-size:12.5px; color:var(--fg-muted); font-variant-numeric:tabular-nums;}
  .cart-item__row{display:flex; align-items:center; justify-content:space-between; margin-top:auto;}
  .qty-ctrl{display:flex; align-items:center; border:1px solid var(--line);}
  .qty-ctrl button{width:24px; height:24px; border:none; background:none; cursor:pointer; font-size:13px; color:var(--fg);}
  .qty-ctrl span{width:26px; text-align:center; font-size:12.5px; font-variant-numeric:tabular-nums;}
  .cart-item__remove{background:none; border:none; color:var(--fg-faint); font-size:11px; text-decoration:underline; cursor:pointer; padding:0;}
  .cart-foot{padding:20px 24px 26px; border-top:1px solid var(--line);}
  .cart-subtotal{display:flex; justify-content:space-between; font-family:var(--sans); font-weight:700; font-size:15px; margin-bottom:14px;}
  .cart-checkout-btn{width:100%; padding:16px; border:1px solid var(--fg); background:var(--fg); color:var(--bg); font-family:var(--sans); font-weight:600; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; cursor:pointer;}
  .cart-checkout-btn:disabled{opacity:.5; cursor:not-allowed;}
  .cart-note{font-size:11px; color:var(--fg-faint); margin-top:10px; line-height:1.5; text-align:center;}

  /* ---------- product page ---------- */
  .breadcrumb{padding:18px 0; font-family:var(--sans); font-size:12px; color:var(--fg-faint);}
  .breadcrumb a{color:var(--fg-muted); text-decoration:none;}
  .breadcrumb a:hover{text-decoration:underline;}
  .product-hero{padding:8px 0 90px; border-bottom:1px solid var(--line);}
  .product-hero__grid{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start;}
  .product-gallery-wrap{position:sticky; top:106px;}
  .product-gallery{aspect-ratio:1/1; overflow:hidden; background:var(--bg);}
  .product-gallery svg{width:100%; height:100%;}
  .product-gallery img{width:100%; height:100%; object-fit:contain; padding:6%;}
  .gallery-thumbs{display:flex; gap:10px; margin-top:14px; flex-wrap:wrap;}
  .gallery-thumb{width:72px; height:72px; padding:0; border:1px solid var(--line); background:var(--bg); cursor:pointer; overflow:hidden; opacity:.65; transition:opacity .18s ease, border-color .18s ease;}
  .gallery-thumb img{width:100%; height:100%; object-fit:contain; padding:8%; display:block;}
  .gallery-thumb:hover{opacity:1;}
  .gallery-thumb.active{opacity:1; border-color:var(--fg);}
  .product-info__eyebrow{margin-bottom:14px;}
  .product-info h1{font-family:var(--display); font-weight:600; font-size:clamp(30px,4vw,44px); margin:0 0 18px; letter-spacing:.005em; text-wrap:balance;}
  .product-price-row{display:flex; align-items:baseline; gap:12px; font-variant-numeric:tabular-nums;}
  .product-price-old{font-family:var(--sans); font-size:14px; color:var(--fg-faint); text-decoration:line-through;}
  .product-price-new{font-family:var(--sans); font-weight:700; font-size:28px;}
  .product-discount{font-family:var(--sans); font-weight:700; font-size:11px; padding:3px 8px; border:1px solid var(--accent-ink); color:var(--accent-ink); text-transform:uppercase;}
  .product-install{font-family:var(--sans); font-size:13px; color:var(--fg-muted); margin-top:6px;}
  .product-colors{margin:22px 0 6px;}
  .product-colors__label{font-family:var(--sans); font-weight:700; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-faint); margin-bottom:8px;}
  .color-chips{display:flex; gap:8px; flex-wrap:wrap;}
  .color-chip{padding:8px 16px; border:1px solid var(--line); font-size:12.5px; font-family:var(--sans); text-transform:uppercase; letter-spacing:.03em; background:var(--bg); cursor:pointer; transition:background .18s ease, color .18s ease, border-color .18s ease;}
  .color-chip.active{background:var(--fg); color:var(--bg); border-color:var(--fg);}
  .product-add-btn{width:100%; margin-top:26px; padding:17px; border:1px solid var(--fg); background:var(--fg); color:var(--bg); font-family:var(--sans); font-weight:600; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; transition:opacity .18s ease;}
  .product-add-btn:hover{opacity:.82;}
  .product-add-btn[data-added]{background:var(--accent-ink); border-color:var(--accent-ink);}
  .product-tagline{font-family:var(--display); font-weight:600; font-size:22px; margin:38px 0 12px; text-wrap:balance;}
  .product-desc{font-size:15px; line-height:1.75; color:var(--fg-muted); max-width:48ch;}
  .product-specs{list-style:none; padding:0; margin:26px 0 0; display:flex; flex-direction:column; gap:11px;}
  .product-specs li{font-size:13.5px; color:var(--fg-muted); padding-left:20px; position:relative; line-height:1.5;}
  .product-specs li::before{content:"—"; position:absolute; left:0; color:var(--accent-ink);}
  @media (max-width:860px){
    .product-hero__grid{grid-template-columns:1fr;}
    .product-gallery-wrap{position:relative; top:0;}
  }

  .hero--compact{height:190vh;}