/* ===================================================================
   MAISON — shared stylesheet for every page.
   Base: Theme 3 (Luxe Glass, light).  Header: Theme 1 levels.
   Every value here maps to something classic Wix Editor can do —
   see wix-map.html for the element-by-element mapping.
   =================================================================== */
@import url("fonts.css");

:root{
  /* This site is light by design. Without this, Chrome's "Auto Dark Mode for Web
     Contents" force-inverts the whole page and the design is destroyed. Opting in
     explicitly is the only way to refuse it. */
  color-scheme: light;

  --bg:#f0eeea;
  --ink:#171620;
  --dim:#847f92;
  --line:rgba(23,22,32,.10);

  /* real glass — used SPARINGLY (nav, hero cards, trade panel).
     Never on product cards: 50 blurring nodes over animated blobs = jank.
     See Settings recipes\web_animation_smoothness_recipe.txt */
  --glass:rgba(255,255,255,.55);
  --glass-edge:rgba(255,255,255,.70);
  --glass-blur:blur(18px) saturate(150%);

  /* fake glass — translucent white, NO backdrop-filter. Cheap, safe at scale. */
  --card:rgba(255,255,255,.72);

  --gold:#9a7828;
  --violet:#5a4de0;
  --sage:#4e8a7a;

  --halo:0 8px 32px rgba(60,50,90,.07);
  --halo-lift:0 26px 56px rgba(60,50,90,.14);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-weight:300;
     overflow-x:hidden;position:relative;min-height:100vh}

/* ---------- ambient light: 3 drifting blobs, transform-only ---------- */
.amb{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.amb i{position:absolute;border-radius:50%;filter:blur(110px);opacity:.42;
       will-change:transform}
.amb i:nth-child(1){width:620px;height:620px;top:-160px;left:-120px;background:#c9bcff;
    animation:float1 24s ease-in-out infinite}
.amb i:nth-child(2){width:520px;height:520px;top:38%;right:-140px;background:#f0d9a0;
    animation:float2 30s ease-in-out infinite}
.amb i:nth-child(3){width:480px;height:480px;bottom:-140px;left:32%;background:#a8dcd0;
    animation:float1 27s ease-in-out infinite reverse}
@keyframes float1{50%{transform:translate(90px,70px) scale(1.12)}}
@keyframes float2{50%{transform:translate(-80px,-60px) scale(1.08)}}
.wrap{position:relative;z-index:1}

/* ---------- placeholder image block ---------- */
.ph{position:relative;background:
      repeating-linear-gradient(45deg,rgba(23,22,32,.05) 0 12px,rgba(23,22,32,.02) 12px 24px);
    display:grid;place-items:center;overflow:hidden}
.ph::after{content:attr(data-label);font:400 10px/1.6 var(--body);letter-spacing:.16em;
    text-transform:uppercase;color:#9d99a9;text-align:center;padding:0 14px}

.glass{background:var(--glass);border:1px solid var(--glass-edge);box-shadow:var(--halo);
    backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}

/* ===================================================================
   HEADER — floating glass pill, with an animated highlight that slides
   to the current page. Levels from:
   Settings recipes\light_glass_navbar_recipe.txt  (Variant B)
   =================================================================== */
header.site{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:60;
    display:flex;align-items:center;gap:34px;padding:11px 12px 11px 26px;
    border-radius:100px;
    /* ORIGINAL header levels, per user. The point is that you can SEE the page
       through it, softly blurred — 'sense of light' legible behind the bar.
       Opaque top → sheer bottom keeps the nav text readable without ever
       becoming a solid chip. No border: a border re-creates the "bar". */
    background:linear-gradient(rgba(255,255,255,.62), rgba(255,255,255,.20));
    border:0;
    box-shadow:0 6px 24px rgba(60,50,90,.06);       /* violet halo, never black */
    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px)}
header.site .logo{font-family:var(--display);font-size:22px;letter-spacing:.36em;
    text-decoration:none;color:var(--ink);padding-right:4px}

/* the track the highlight slides along */
.navwrap{position:relative;display:flex;align-items:center}
.navwrap a{position:relative;z-index:1;color:var(--ink);text-decoration:none;opacity:.72;
    padding:11px 20px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
    transition:opacity .3s,color .3s;white-space:nowrap}
.navwrap a:hover{opacity:1}
.navwrap a.on{opacity:1}

/* the moving pill — transform + width only, never `left` */
.hl{position:absolute;top:0;left:0;height:100%;border-radius:100px;
    background:rgba(23,22,32,.07);z-index:0;opacity:0;
    transition:transform .45s cubic-bezier(.16,1,.3,1),
               width .45s cubic-bezier(.16,1,.3,1),
               opacity .3s}

header.site .cta{padding:11px 20px;border-radius:100px;background:var(--ink);color:#f6f5f2;
    font-size:11px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
    transition:background .35s;white-space:nowrap}
header.site .cta:hover{background:var(--violet)}

.menu-btn{display:none;background:none;border:0;font:inherit;color:var(--ink);cursor:pointer;
    font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:11px 16px}

/* ---------- typography ---------- */
h1,h2,h3,.dsp{font-family:var(--display);font-weight:400;letter-spacing:.01em;line-height:1.06}
h1{font-size:clamp(44px,7vw,110px);line-height:1.02}
h2{font-size:clamp(34px,4.4vw,60px)}
h3{font-size:clamp(24px,2.6vw,34px)}
em.acc{font-style:normal;color:var(--gold)}
.grad{background:linear-gradient(100deg,var(--gold),var(--violet) 60%,var(--sage));
    -webkit-background-clip:text;background-clip:text;color:transparent}
p{line-height:1.9}

.kicker{display:inline-block;padding:8px 17px;border-radius:100px;font-size:10px;
    letter-spacing:.3em;text-transform:uppercase;color:var(--gold);
    background:rgba(255,255,255,.55);border:1px solid rgba(154,120,40,.25)}
.eyebrow{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}

/* ---------- buttons ---------- */
.btn{display:inline-block;padding:16px 34px;border-radius:100px;font-family:var(--body);
    font-weight:400;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
    text-decoration:none;transition:.4s;cursor:pointer;border:1px solid transparent;
    text-align:center}
.btn.solid{background:var(--ink);color:#f6f5f2}
.btn.solid:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(23,22,32,.22)}
.btn.ghost{color:var(--ink);border-color:rgba(23,22,32,.18);background:rgba(255,255,255,.5)}
.btn.ghost:hover{border-color:var(--ink)}
.btn.wide{width:100%}
.btn[disabled]{opacity:.4;pointer-events:none}

/* ---------- layout ---------- */
.page{max-width:1360px;margin:0 auto;padding:0 40px}
section{padding:110px 0}
.page-head{padding:170px 0 60px}
.page-head .eyebrow{margin-bottom:16px;display:block}
.page-head p{color:var(--dim);max-width:56ch;margin-top:20px;font-size:15px}
.sec-head{text-align:center;margin-bottom:60px}
.sec-head h2{margin-top:14px}
.sec-head p{color:var(--dim);max-width:54ch;margin:18px auto 0;font-size:15px}

/* ---------- scroll reveal ---------- */
.rv{opacity:0;transform:translateY(34px);
    transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .amb i{animation:none}
}

/* ---------- product card (NO backdrop-filter — see note at top) ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:24px}
.pcard{background:var(--card);border:1px solid var(--glass-edge);border-radius:22px;
    overflow:hidden;padding:13px;position:relative;text-decoration:none;color:var(--ink);
    display:block;box-shadow:var(--halo);
    transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s}
.pcard:hover{transform:translateY(-7px);box-shadow:var(--halo-lift)}
.pcard .imgwrap{border-radius:14px;overflow:hidden;position:relative}
.pcard .ph{aspect-ratio:4/5;transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.pcard:hover .ph{transform:scale(1.06)}
.pcard .tag{position:absolute;top:11px;left:11px;padding:6px 12px;border-radius:100px;
    font-size:9px;letter-spacing:.16em;text-transform:uppercase;
    background:rgba(255,255,255,.85);color:var(--gold)}
.pcard .meta{padding:18px 9px 4px;display:flex;justify-content:space-between;
    align-items:flex-start;gap:12px}
.pcard .name{font-family:var(--display);font-size:25px;line-height:1.1;letter-spacing:.02em}
.pcard .cat{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
    margin-top:8px}
.pcard .price{font-size:16px;text-align:right;white-space:nowrap}
.pcard .trade{display:block;font-size:10px;color:var(--gold);letter-spacing:.08em;
    margin-top:5px;text-transform:uppercase}
.pcard .sku{padding:0 9px 8px;font-size:10px;color:#a9a5b3;letter-spacing:.1em}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--line);margin-top:100px;padding:70px 40px 40px}
footer.site .cols{max-width:1360px;margin:0 auto;display:grid;
    grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
footer.site .logo{font-family:var(--display);font-size:26px;letter-spacing:.4em}
footer.site p{color:var(--dim);font-size:13px;margin-top:16px;max-width:34ch;line-height:1.85}
footer.site h4{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink);
    margin-bottom:16px;font-weight:400}
footer.site ul{list-style:none;display:grid;gap:10px}
footer.site ul a{color:var(--dim);text-decoration:none;font-size:13px;transition:color .3s}
footer.site ul a:hover{color:var(--gold)}
footer.site .base{max-width:1360px;margin:50px auto 0;padding-top:26px;
    border-top:1px solid var(--line);display:flex;justify-content:space-between;
    font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);
    flex-wrap:wrap;gap:14px}

/* ---------- wix note badge ---------- */
.wixnote{position:fixed;bottom:16px;right:16px;z-index:99;max-width:330px;border-radius:16px;
    background:rgba(255,255,255,.92);border:1px solid var(--glass-edge);padding:15px 17px;
    font-size:11px;line-height:1.7;color:var(--dim);backdrop-filter:blur(12px);
    box-shadow:var(--halo)}
.wixnote b{color:var(--gold);display:block;margin-bottom:7px;letter-spacing:.18em;
    text-transform:uppercase;font-size:10px}
.wixnote code{color:var(--ink);font-family:var(--body)}
.wixnote a{color:var(--ink);float:right}

@media(max-width:900px){
  header.site{top:12px;width:calc(100% - 24px);justify-content:space-between;
      padding:10px 10px 10px 20px;gap:10px}
  .navwrap{display:none}
  /* the OPEN mobile menu is the one place that must stay near-opaque — you have to
     read a list of links over whatever is behind it. A 3px blur can't carry that. */
  .navwrap.open{display:flex;position:absolute;top:calc(100% + 10px);left:0;right:0;
      flex-direction:column;align-items:stretch;padding:14px;gap:4px;border-radius:24px;
      background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.7);
      box-shadow:0 8px 30px rgba(60,50,90,.12);
      backdrop-filter:blur(14px) saturate(140%);
      -webkit-backdrop-filter:blur(14px) saturate(140%)}
  .navwrap.open a{padding:14px 18px;border-radius:14px}
  .navwrap.open .hl{display:none}   /* sliding makes no sense in a stacked menu */
  .menu-btn{display:block}
  .page{padding:0 20px}
  section{padding:70px 0}
  .page-head{padding:130px 0 40px}
  footer.site .cols{grid-template-columns:1fr;gap:34px}
  .wixnote{display:none}
}