/* SnazzyEyes CMS conversion overlay styles.
   Builds on the mockup's styles.css (palette, buttons, cards, breakpoints):
   header search + Etsy CTA (replacing the removed Account/Cart controls),
   catalog grids, product detail, inner-page heroes, search, guide, 404.
   No new palette: every color references the source tokens. */

/* ---------- header: search + Etsy CTA (no account, no cart) ---------- */
.head-search{display:flex; align-items:center; background:var(--cream);
  border:1.5px solid var(--line); border-radius:var(--r-pill); padding:2px 4px 2px 14px}
.head-search input{border:0; background:none; font-family:var(--f-body); font-weight:700;
  font-size:.88rem; color:var(--ink); width:clamp(120px,14vw,200px); padding:8px 0; outline:none}
.head-search input::placeholder{color:var(--muted)}
.head-search:focus-within{border-color:var(--gold-deep)}
.head-search__go{background:var(--gold); border:0; border-radius:999px; width:34px; height:34px;
  display:grid; place-items:center; color:var(--ink); flex:none}
.head-search__go:hover{background:var(--gold-deep)}
.head-search__go .ico{width:18px; height:18px}
.btn--etsy{padding:12px 18px; font-size:.88rem; white-space:nowrap}
.nav__etsy-mobile{display:none}
/* the 7-item nav wraps to two lines per item on mid desktops; keep the wraps
   centered and give the row breathing room so items never read as one word.
   flex:none on the brand stops the outer flex row from shrinking it under its
   wordmark (which made the nav overlap the SNAZZYEYES mark). */
@media(min-width:861px){
  .brand{flex:none}
}
.nav{gap:clamp(14px,1.5vw,22px)}
.nav a{text-align:center; line-height:1.2}
/* 861-1250px: not enough room for a text search box AND the Etsy button;
   collapse search to its icon (submits to /search), hide the brand tagline,
   and compress the nav + CTA. Full search box returns at >=1320px. */
@media(min-width:861px) and (max-width:1319px){
  .nav a{font-size:.84rem}
  .brand__tag{display:none}
  .head-search input{display:none}
  .head-search{padding:2px; border:0; background:none}
  .btn--etsy{padding:10px 12px; font-size:.8rem}
  .nav{gap:clamp(10px,1.1vw,16px)}
}
/* the narrowest pre-burger band needs every pixel */
@media(min-width:861px) and (max-width:935px){
  .brand__mascot{width:54px; height:54px}
  .brand__name{font-size:1.5rem}
  .nav a{font-size:.78rem}
  .nav{gap:8px}
  .btn--etsy{padding:9px 10px; font-size:.74rem}
  .head__actions{gap:8px}
}

/* ---------- shared: breadcrumbs, chips, page hero ---------- */
.sz-crumbs{font-size:.82rem; font-weight:700; color:var(--muted)}
.sz-crumbs a{color:var(--red)}
.sz-crumbs a:hover{text-decoration:underline}
.sz-crumbs span[aria-hidden]{margin-inline:6px}
.sz-crumbs--pdp{padding:14px 0 0}
.sz-page-hero{background:var(--cream); padding:clamp(22px,3.5vw,44px) 0 clamp(20px,3vw,36px);
  text-align:center}
.sz-page-hero .sz-crumbs{margin-bottom:10px}
.sz-page-hero__title{display:flex; align-items:center; justify-content:center; gap:12px;
  color:var(--red); font-weight:600; font-size:clamp(26px,3vw,38px); font-family:var(--f-disp)}
.sz-page-hero__lede{max-width:64ch; margin:10px auto 0; font-weight:700; color:var(--muted);
  font-size:clamp(.92rem,1.15vw,1.02rem); line-height:1.55}
.sz-chip{display:inline-flex; align-items:center; gap:5px; background:#fff;
  border:1.5px solid var(--line); border-radius:var(--r-pill); padding:6px 13px;
  font-size:.8rem; font-weight:800; color:var(--ink); transition:border-color .15s, background .15s}
a.sz-chip:hover{border-color:var(--red); color:var(--red)}
.sz-chip.is-active{background:var(--red); border-color:var(--red); color:#fff}
.sz-chip--fact{background:var(--cream); border-color:transparent; color:var(--ink)}
.sz-chip__n{font-weight:700; opacity:.75}

/* ---------- catalog grids ---------- */
.sz-catalog{padding:clamp(20px,3vw,38px) 0 clamp(30px,4vw,56px)}
.sz-catalog__intro{max-width:70ch; font-weight:700; color:var(--muted); margin-bottom:14px}
.sz-catalog__count{font-size:.84rem; font-weight:800; color:var(--muted); margin:12px 0 14px}
.sz-strength{display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:6px}
.sz-strength__lab{font-weight:800; font-size:.84rem; color:var(--ink)}
.sz-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:clamp(12px,1.6vw,22px)}
.sz-pcard{background:#fff; border-radius:var(--r-card); padding:9px 9px 12px;
  box-shadow:var(--sh-soft)}
.sz-pcard:hover{box-shadow:var(--sh-card)}
.sz-pcard__img{aspect-ratio:4/3}
.sz-pcard__title{font-size:.88rem; font-weight:600; line-height:1.3; margin-top:7px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height:2.6em}
.sz-pcard__chip{font-size:.72rem; font-weight:800; color:var(--muted); margin-top:3px}
.sz-pcard__price{margin-top:4px}
.sz-favgrid .sz-pcard{padding:7px 7px 10px}
.sz-empty{background:var(--card-warm); border-radius:var(--r-panel); padding:clamp(22px,3vw,36px);
  text-align:center; font-weight:700; color:var(--muted)}
.sz-empty .btn{margin-top:14px}

/* ---------- department cards (real photos over the bundle-card shell) ----- */
.sz-dept-card .card__img{aspect-ratio:4/3}

/* ---------- product detail ---------- */
.sz-pdp{padding:clamp(16px,2.4vw,30px) 0 clamp(28px,3.5vw,50px)}
.sz-pdp__grid{display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(18px,3vw,44px);
  align-items:start}
.sz-pdp__main{border-radius:var(--r-panel); overflow:hidden; background:#f4f1ec;
  box-shadow:var(--sh-card)}
.sz-pdp__main img{width:100%; height:auto; display:block}
.sz-pdp__main--empty{padding:40px; text-align:center; font-weight:700; color:var(--muted)}
.sz-pdp__thumbs{display:grid; grid-template-columns:repeat(auto-fill,minmax(72px,1fr));
  gap:8px; margin-top:10px}
.sz-pdp__thumb{border:2px solid transparent; border-radius:var(--r-sm); overflow:hidden;
  padding:0; background:#f4f1ec; cursor:pointer}
.sz-pdp__thumb img{width:100%; height:100%; aspect-ratio:1/1; object-fit:cover; display:block}
.sz-pdp__thumb.is-active,.sz-pdp__thumb:hover{border-color:var(--red)}
.sz-pdp__thumb:focus-visible{outline:3px solid var(--gold-deep); outline-offset:1px}
.sz-pdp__video{margin-top:12px; background:var(--card-warm); border-radius:var(--r-sm);
  padding:10px 14px; font-weight:800}
.sz-pdp__video summary{cursor:pointer; display:flex; align-items:center; gap:8px}
.sz-pdp__video video{width:100%; height:auto; margin-top:10px; border-radius:var(--r-sm)}
.sz-pdp__title{font-size:clamp(20px,2.1vw,28px); font-weight:600; line-height:1.18;
  color:var(--ink)}
.sz-pdp__chips{display:flex; flex-wrap:wrap; gap:7px; margin-top:10px}
.sz-pdp__price{font-family:var(--f-disp); font-weight:600; color:var(--red);
  font-size:1.25rem; margin-top:14px}
.sz-pdp__h2{font-size:1rem; font-weight:600; font-family:var(--f-disp); color:var(--ink);
  margin-bottom:8px}
.sz-pdp__options,.sz-pdp__personalization{margin-top:20px; background:var(--card-warm);
  border-radius:var(--r-card); padding:14px 16px}
.sz-pdp__options .field{margin-top:8px}
.sz-pdp__options .field label{font-size:.8rem; font-weight:800; display:block; margin-bottom:4px}
.sz-pdp__options .field select{width:100%; font-family:var(--f-body); font-weight:700;
  font-size:.9rem; padding:9px 10px; border-radius:10px; border:1.5px solid var(--line);
  background:#fff; color:var(--ink)}
.sz-pdp__qs{margin:0; padding-left:20px; font-weight:700; font-size:.92rem; line-height:1.7}
.sz-pdp__qmax{color:var(--muted); font-weight:700; font-size:.8rem}
.sz-pdp__fineprint{font-size:.76rem; font-weight:700; color:var(--muted); margin-top:10px;
  line-height:1.5}
.sz-pdp__cta{margin-top:22px}
.sz-pdp__cta .btn{margin-top:8px}
.sz-pdp__buy .ico{width:1.1em; height:1.1em; margin-right:4px}
.sz-pdp__disclosure{font-size:.8rem; font-weight:800; color:var(--ink); margin-top:12px;
  line-height:1.5; display:flex; gap:7px; align-items:flex-start}
.sz-pdp__disclosure .ico{flex:none; margin-top:2px; color:var(--red)}
.sz-pdp__fallback{font-size:.78rem; font-weight:700; color:var(--muted); margin-top:8px}
.sz-pdp__fallback a{color:var(--red); text-decoration:underline}
.sz-pdp__desc{margin-top:26px}
.sz-pdp__desc p{font-size:.92rem; line-height:1.65; margin-top:8px}
.sz-related{padding:clamp(10px,2vw,20px) 0 clamp(34px,4vw,60px)}

/* ---------- prose pages (about, guide) ---------- */
.sz-prose-sec,.sz-guide{padding:clamp(22px,3vw,42px) 0 clamp(34px,4.5vw,64px)}
.sz-prose{max-width:76ch}
.sz-prose h2{font-family:var(--f-disp); font-weight:600; color:var(--red);
  font-size:clamp(19px,1.9vw,24px); margin-top:26px}
.sz-prose p,.sz-prose li{font-size:.98rem; line-height:1.7; margin-top:10px}
.sz-prose ul,.sz-prose ol{padding-left:22px; font-weight:700}
.sz-guide__note,.sz-guide__outro{font-weight:700; color:var(--muted)}
.sz-guide__intro{font-weight:700}

/* ---------- search ---------- */
.sz-search__form{display:flex; gap:10px; max-width:560px; margin:0 auto 8px}
.sz-search__form input{flex:1; font-family:var(--f-body); font-weight:700; font-size:1rem;
  padding:12px 16px; border-radius:var(--r-pill); border:2px solid var(--line); outline:none}
.sz-search__form input:focus{border-color:var(--gold-deep)}
.sz-search .sz-catalog__count{text-align:center}

/* ---------- 404 ---------- */
.sz-404{padding-bottom:clamp(40px,6vw,80px)}
.sz-404__cta{justify-content:center; margin-top:18px; display:flex; gap:12px; flex-wrap:wrap}

/* ---------- footer Etsy link ---------- */
.foot__etsy{margin-top:12px}
.foot__etsy a{display:inline-flex; align-items:center; gap:7px; font-weight:800;
  color:var(--gold); font-size:.9rem}
.foot__etsy a:hover{text-decoration:underline}
.foot__credit{display:block; margin-top:6px; font-size:.78rem; opacity:.8}

/* ---------- admin-only item edit affordance (admin chrome, never public) -- */
.sz-admin-item-label{font-size:.75rem; font-weight:700; text-align:center;
  background:var(--cream); padding:4px 6px}

/* ---------- responsive ---------- */
@media(max-width:1024px){
  .sz-pdp__grid{grid-template-columns:1fr}
}
@media(max-width:860px){
  .head-search input{display:none}
  .head-search{padding:2px; border:0; background:none}
  .nav__etsy-mobile{display:flex; align-items:center; gap:8px; margin-top:10px;
    font-weight:800; color:var(--red) !important; font-size:1.05rem; padding:10px 4px}
}
@media(max-width:640px){
  .btn--etsy{display:none}
  .sz-grid{grid-template-columns:repeat(2,1fr); gap:10px}
  .sz-pcard__title{font-size:.8rem}
  .sz-page-hero__title{font-size:clamp(22px,6.4vw,28px)}
  .sz-page-hero__title .burst{display:none}
  .sz-search__form{flex-direction:column}
  .sz-pdp__thumbs{grid-template-columns:repeat(auto-fill,minmax(58px,1fr))}
  .sz-strength{gap:6px}
  .sz-chip{padding:5px 10px; font-size:.74rem}
}
@media(max-width:400px){
  .sz-grid{grid-template-columns:1fr}
}

/* inline field hint (e.g. "up to 15 letters") - small, muted, non-blocking */
.field__hint{ font-weight:400; font-size:.82em; opacity:.7; margin-left:.35em; }

/* ---- Bulk / custom / question modal (global, opened by [data-open-contact]) ---- */
.sz-hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; pointer-events:none; }
body.sz-modal-open{ overflow:hidden; }
.sz-modal[hidden]{ display:none; }
.sz-modal{ position:fixed; inset:0; z-index:1000; display:flex; align-items:flex-start; justify-content:center; padding:5vh 16px; overflow-y:auto; }
.sz-modal__scrim{ position:fixed; inset:0; background:rgba(20,10,10,.55); backdrop-filter:blur(2px); }
.sz-modal__dialog{ position:relative; z-index:1; width:100%; max-width:560px; background:#fff; border-radius:18px;
  box-shadow:0 24px 60px rgba(0,0,0,.28); padding:28px 26px 22px; margin:auto; }
.sz-modal__close{ position:absolute; top:12px; right:12px; width:38px; height:38px; border:0; border-radius:50%;
  background:#f2efe9; color:#7a1e1e; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.sz-modal__close:hover{ background:#e7e2da; }
.sz-modal__title{ margin:0 0 6px; font-size:1.5rem; line-height:1.15; }
.sz-modal__lead{ margin:0 0 16px; color:#5b5652; font-size:.95rem; line-height:1.45; }
.sz-modal__row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.sz-modal__form .field{ margin-bottom:12px; }
.sz-modal__form label{ display:block; font-weight:600; font-size:.85rem; margin-bottom:5px; }
.sz-modal__form input, .sz-modal__form select, .sz-modal__form textarea{ width:100%; box-sizing:border-box;
  padding:10px 12px; border:1.5px solid #e0d9cf; border-radius:10px; font:inherit; background:#fff; }
.sz-modal__form input:focus, .sz-modal__form select:focus, .sz-modal__form textarea:focus{ outline:2px solid #d33; outline-offset:1px; border-color:#d33; }
.sz-modal__form textarea{ resize:vertical; }
.sz-modal__note{ margin:12px 0 0; font-size:.8rem; color:#6b6560; display:flex; gap:6px; align-items:flex-start; line-height:1.4; }
.sz-modal__note .ico{ flex:0 0 auto; width:16px; height:16px; }
.sz-modal .form-msg{ margin:10px 0 0; font-size:.9rem; }
.sz-modal .form-msg.ok{ color:#1a7a34; font-weight:600; }
.sz-modal .form-msg.err{ color:#b3261e; font-weight:600; }
@media (max-width:520px){ .sz-modal__row{ grid-template-columns:1fr; } .sz-modal__dialog{ padding:24px 18px 18px; } }

/* header trigger for the bulk/custom modal (desktop button; mobile uses the drawer entry) */
.sz-custom-cta{ display:inline-flex; align-items:center; gap:6px; background:#fff; color:#c0281f;
  border:1.6px solid #e6b4ae; white-space:nowrap; }
.sz-custom-cta:hover{ background:#fdeeec; border-color:#c0281f; }
.sz-custom-cta .ico{ width:16px; height:16px; }
@media(max-width:860px){ .sz-custom-cta{ display:none; } }

/* ---- Preview panel fixes (equal-height cards + working frame-color recolor) ---- */
/* right form box matches the left glasses card height and its content fills it */
.preview__grid{ align-items: stretch; }
.preview__form{ align-content: space-between; }
.preview__card{ justify-content: flex-start; }
/* the glasses image sits in a taller frame so the two columns balance */
.preview__card .engraving--live{ aspect-ratio: auto; height: 100%; min-height: 230px; }
.preview__card .engraving--live img{ height: 100%; }

/* frame-color recolor: a tint layer over the glasses, blended so a BLACK frame
   takes the chosen colour while the white card stays white (set by main.js). */
.engraving{ isolation: isolate; }
.engraving__tint{ position:absolute; inset:0; mix-blend-mode:lighten; background:transparent;
  pointer-events:none; transition: background .18s ease; z-index:1; }
.engraving svg{ z-index:2; }