/* ============================================================
   VELLINORE — Mobile & Missing Styles Fix
   Adds CSS for previously unstyled components + mobile-only
   layout corrections. Desktop view is unaffected.
   ============================================================ */

/* ============================================================
   SIZE CHART MODAL (.modal / .modal-card)
   — classes existed in HTML but had zero CSS
   ============================================================ */
.modal {
  position: fixed; inset: 0; z-index: 120;
  display: none; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(34,28,18,.52);
  backdrop-filter: saturate(120%) blur(3px);
}
.modal.open { display: flex; }
.modal-card {
  position: relative;
  width: min(580px,100%); max-height: 92vh; overflow-y: auto;
  background: var(--cream);
  border: 1px solid var(--line);
  box-shadow: 0 40px 100px -40px rgba(40,32,20,.6);
  padding: 44px 42px 38px;
  animation: authIn .35s var(--ease) both;
}
.modal-card .modal-close {
  position: absolute; top: 16px; right: 18px;
  background: none; border: 0;
  font-size: 18px; line-height: 1;
  color: var(--ink-soft); cursor: pointer; transition: color .2s;
}
.modal-card .modal-close:hover { color: var(--ink); }
.modal-title {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(26px,2.6vw,36px); line-height: 1.05;
  color: var(--ink); margin: 10px 0 6px;
}
.modal-sub {
  font-family: var(--sans); font-size: 13px;
  color: var(--ink-soft); margin-bottom: 24px; letter-spacing: .04em;
}
.modal-note {
  margin-top: 26px; padding-top: 22px;
  border-top: 1px solid var(--line);
}
.modal-note h3 {
  font-family: var(--serif); font-weight: 500;
  font-size: 20px; color: var(--ink); margin-bottom: 10px;
}
.modal-note p {
  font-family: var(--sans); font-size: 14px;
  line-height: 1.65; color: var(--ink-soft); margin: 0;
}
@media (max-width: 560px) {
  .modal-card { padding: 32px 22px 28px; }
}

/* ============================================================
   FIT INDICATOR (.fit, .fit-scale, .fit-marks)
   — PDP component with zero CSS
   ============================================================ */
.fit {
  margin-top: 22px; padding-top: 20px;
  border-top: 1px solid var(--line);
}
.fit-top {
  display: flex; justify-content: space-between;
  align-items: baseline; margin-bottom: 13px;
}
.fit-top .k {
  font-family: var(--sans); font-size: 13px;
  letter-spacing: .04em; color: var(--ink);
}
.fit-top .v {
  font-family: var(--sans); font-size: 13px;
  color: var(--ink-soft); letter-spacing: .04em;
}
.fit-scale {
  position: relative; height: 3px;
  background: var(--line); border-radius: 2px; margin-bottom: 9px;
}
.fit-scale .dot {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--espresso);
  border: 2px solid var(--cream);
  box-shadow: 0 0 0 1.5px var(--espresso);
}
.fit-marks {
  display: flex; justify-content: space-between;
  font-family: var(--sans); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint);
}
.fit-marks .on { color: var(--ink); font-weight: 500; }
.fit-note {
  font-family: var(--sans); font-size: 12px;
  color: var(--ink-soft); margin-top: 11px; line-height: 1.55;
}

/* ============================================================
   VOICES / TESTIMONIALS (.voices, .voices-grid, .voice)
   — section with zero CSS
   ============================================================ */
.voices {
  padding: clamp(80px,10vw,130px) 0;
  background: var(--cream);
  border-top: 1px solid var(--line-soft);
}
.voices .vhead {
  display: flex; justify-content: space-between;
  align-items: flex-end; gap: 24px;
  margin-bottom: clamp(40px,5vw,64px); flex-wrap: wrap;
}
.voices-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: clamp(24px,3.4vw,52px);
}
.voice { display: flex; flex-direction: column; }
.voice .qmark {
  font-family: var(--serif); font-size: 52px;
  line-height: .75; color: var(--gold);
  margin-bottom: 14px; user-select: none;
}
.voice blockquote {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(17px,1.5vw,21px); line-height: 1.58;
  color: var(--ink); flex: 1; margin: 0 0 22px;
}
.voice .who {
  display: flex; flex-direction: column; gap: 4px;
  border-top: 1px solid var(--line); padding-top: 16px;
}
.voice .who .nm {
  font-family: var(--sans); font-size: 14px;
  font-weight: 500; color: var(--ink); letter-spacing: .04em;
}
.voice .who .meta {
  font-family: var(--sans); font-size: 11.5px;
  color: var(--ink-faint); letter-spacing: .08em;
}
@media (max-width: 820px) {
  .voices-grid { grid-template-columns: 1fr; gap: 34px; max-width: 540px; }
  .voices .vhead { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   CIRCLE / INNERER KREIS (.circle, .lede, .join, .perks)
   — section with zero CSS
   ============================================================ */
.circle {
  background: var(--cream-2);
  padding: clamp(80px,10vw,130px) 0;
  border-top: 1px solid var(--line-soft);
}
.circle .wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px,7vw,108px);
  align-items: center;
}
.circle .lede { display: flex; flex-direction: column; gap: 18px; }
.circle .lede .e {
  font-family: var(--sans); font-size: 11px;
  letter-spacing: .26em; text-transform: uppercase; color: var(--gold-deep);
}
.circle .lede h2 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(30px,3.4vw,50px); line-height: 1.04;
}
.circle .lede p {
  font-family: var(--sans); font-size: 16px;
  line-height: 1.7; color: var(--ink-soft); max-width: 44ch;
}
.circle .join { display: flex; flex-direction: column; gap: 14px; }
.circle .join form {
  display: flex; border: 1px solid var(--line-dark); overflow: hidden;
}
.circle .join form input[type="email"] {
  flex: 1; min-width: 0; border: 0;
  background: var(--cream); font-family: var(--sans);
  font-size: 14px; padding: 14px 16px; color: var(--ink); outline: none;
}
.circle .join form input[type="email"]::placeholder { color: var(--ink-faint); }
.circle .join form button {
  background: var(--espresso); color: var(--cream); border: 0;
  font-family: var(--sans); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; padding: 0 22px; white-space: nowrap;
  cursor: pointer; transition: background .22s var(--ease);
}
.circle .join form button:hover { background: var(--ink); }
.circle .fine {
  font-family: var(--sans); font-size: 11px;
  color: var(--ink-faint); letter-spacing: .04em;
}
.circle .perks { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.circle .perks span {
  font-family: var(--sans); font-size: 10.5px;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-deep); border: 1px solid var(--gold); padding: 5px 12px;
}
@media (max-width: 820px) {
  .circle .wrap { grid-template-columns: 1fr; gap: 40px; }
}

/* ============================================================
   CRAFT / MATERIAL & VERANTWORTUNG
   (.craft, .craft-media, .craft-body, .prov, .eco)
   — section with zero CSS
   ============================================================ */
.craft {
  padding: clamp(80px,10vw,130px) 0;
  border-top: 1px solid var(--line-soft);
}
.craft .wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px,6vw,96px);
  align-items: center;
}
.craft-media {
  position: relative; aspect-ratio: 4/5;
  background: var(--cream-3); overflow: hidden;
}
.craft-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.craft:hover .craft-media img { transform: scale(1.04); }
.craft-body { display: flex; flex-direction: column; gap: 22px; }
.craft-body h2 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(30px,3.2vw,48px); line-height: 1.04;
}
.craft-body .intro {
  font-family: var(--sans); font-size: 16px;
  line-height: 1.72; color: var(--ink-soft); max-width: 48ch;
}
.prov { border-top: 1px solid var(--line); }
.prov-item {
  display: flex; gap: 18px;
  padding: 18px 0; border-bottom: 1px solid var(--line);
  align-items: flex-start;
}
.prov-item .n {
  font-family: var(--serif); font-style: italic;
  font-size: 20px; color: var(--gold-deep);
  line-height: 1; flex: none; width: 28px;
}
.prov-item .t {
  font-family: var(--sans); font-size: 13px;
  font-weight: 500; color: var(--ink); margin-bottom: 3px;
}
.prov-item .d {
  font-family: var(--sans); font-size: 13px;
  color: var(--ink-soft); line-height: 1.55;
}
.eco { display: flex; gap: 10px; flex-wrap: wrap; }
.eco span {
  font-family: var(--sans); font-size: 10.5px;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-deep); border: 1px solid var(--gold); padding: 5px 12px;
}
@media (max-width: 820px) {
  .craft .wrap { grid-template-columns: 1fr; gap: 36px; }
  .craft-media { order: -1; }
}

/* ============================================================
   MOBILE NAV — section headers
   ============================================================ */
.mnav-sec {
  font-family: var(--sans); font-size: 10px;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--gold-deep); padding: 20px 0 8px;
  border-top: 1px solid var(--line-soft);
  display: block;
}
.mnav-sec:first-of-type { border-top: 0; padding-top: 6px; }

/* ============================================================
   CHECKOUT LAYOUT — was missing mobile breakpoint entirely
   ============================================================ */
@media (max-width: 760px) {
  .co-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .co-summary-inner {
    position: static;
  }
}

/* ============================================================
   FOOTER SERVICE ROW (data-trustrow)
   The service strip at the very top of the footer
   ============================================================ */
body[data-trustrow="off"] .footer-service { display: none; }

/* New In nav entry visibility (data-merch) */
body[data-merch="off"] [data-merch-nav] { display: none; }

/* ============================================================
   HEADER STYLE (data-headerstyle)
   compact = smaller height, tighter spacing
   ============================================================ */
body[data-headerstyle="compact"] {
  --header-h: 62px;
}
body[data-headerstyle="compact"] .brand-logo,
body[data-headerstyle="compact"] .site-header.solid .brand-logo,
body[data-headerstyle="compact"] .site-header:not(.transparent) .brand-logo {
  height: 26px;
}
body[data-headerstyle="compact"] .nav-link {
  font-size: 10px; letter-spacing: .14em;
}
body[data-headerstyle="compact"] .nav-left { gap: 20px; }
body[data-headerstyle="compact"] .nav-right { gap: 16px; }

/* ============================================================
   HEADER BORDER (data-headerborder)
   off = no bottom rule when header is solid
   ============================================================ */
body[data-headerborder="off"] .site-header,
body[data-headerborder="off"] .site-header.solid,
body[data-headerborder="off"] .site-header:not(.transparent) {
  border-bottom-color: transparent;
}

/* ============================================================
   SECTION SPACING (data-spacing)
   tight = compact sections, generous = airy
   ============================================================ */
body[data-spacing="tight"] .section { padding: 48px 0; }
body[data-spacing="tight"] .section-head { margin-bottom: 24px; }
body[data-spacing="tight"] .doc-hero { padding: 60px 0 44px; }
body[data-spacing="generous"] .section { padding: 130px 0; }
body[data-spacing="generous"] .section-head { margin-bottom: 56px; }
body[data-spacing="generous"] .doc-hero { padding: 120px 0 90px; }

/* ============================================================
   FOOTER STYLE (data-footer)
   minimal = hide newsletter signup column
   ============================================================ */
body[data-footer="minimal"] .footer-news { display: none; }
body[data-footer="minimal"] .footer-top {
  grid-template-columns: repeat(3, 1fr);
}

/* ============================================================
   BREADCRUMBS (data-breadcrumbs)
   off = hide breadcrumb trails on all pages
   ============================================================ */
body[data-breadcrumbs="off"] .breadcrumb { display: none !important; }

/* ============================================================
   VAT TEXT (data-vat)
   off = hide "inkl. MwSt." labels
   ============================================================ */
body[data-vat="off"] .tax,
body[data-vat="off"] .pcard .tax,
body[data-vat="off"] .pdp-tax,
body[data-vat="off"] .co-vat { display: none; }
   editorial = show editorial image column (default)
   minimal   = text-only, no image panel
   ============================================================ */
body[data-mega="minimal"] .mm-img,
body[data-mega="minimal"] .mm-img-wrap,
body[data-mega="minimal"] .mm-ed,
body[data-mega="minimal"] .mm-editorial { display: none !important; }
body[data-mega="minimal"] .mm-cols { grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); }
body[data-mega="minimal"] .mm-panel { padding: 28px 32px; }
   Default (warm-cream) = existing var(--cream-3), no rule needed.
   All other options override only the bg; real photos still sit on top.
   Targets: product cards, PDP stage + thumbs, Quick View, look cards.
   ============================================================ */

/* shared frame selector list */
body[data-imgbg="near-white"] .pcard .frame,
body[data-imgbg="near-white"] .pdp-stage,
body[data-imgbg="near-white"] .pdp-thumb,
body[data-imgbg="near-white"] .qv-figure,
body[data-imgbg="near-white"] .look-card .frame { background: #F5F3EE; }

body[data-imgbg="white"] .pcard .frame,
body[data-imgbg="white"] .pdp-stage,
body[data-imgbg="white"] .pdp-thumb,
body[data-imgbg="white"] .qv-figure,
body[data-imgbg="white"] .look-card .frame { background: #FFFFFF; }

body[data-imgbg="grey"] .pcard .frame,
body[data-imgbg="grey"] .pdp-stage,
body[data-imgbg="grey"] .pdp-thumb,
body[data-imgbg="grey"] .qv-figure,
body[data-imgbg="grey"] .look-card .frame { background: #EBEBEB; }

body[data-imgbg="gradient"] .pcard .frame,
body[data-imgbg="gradient"] .pdp-stage,
body[data-imgbg="gradient"] .pdp-thumb,
body[data-imgbg="gradient"] .qv-figure,
body[data-imgbg="gradient"] .look-card .frame {
  background: linear-gradient(170deg, var(--cream-2) 0%, var(--cream-3) 100%);
}

body[data-imgbg="texture"] .pcard .frame,
body[data-imgbg="texture"] .pdp-stage,
body[data-imgbg="texture"] .pdp-thumb,
body[data-imgbg="texture"] .qv-figure,
body[data-imgbg="texture"] .look-card .frame {
  background-color: var(--cream-3);
  background-image: repeating-linear-gradient(45deg, rgba(162,130,63,.12) 0 2px, transparent 2px 14px);
}

body[data-imgbg="dark"] .pcard .frame,
body[data-imgbg="dark"] .pdp-stage,
body[data-imgbg="dark"] .pdp-thumb,
body[data-imgbg="dark"] .qv-figure,
body[data-imgbg="dark"] .look-card .frame { background: var(--espresso); }

/* ============================================================
   LIGHTBOX BACKGROUND VARIANTS — body[data-lb-bg]
   Changes the fullscreen zoom overlay background + flips UI
   element colours so controls stay readable on light bgs.
   ============================================================ */

/* backgrounds */
body[data-lb-bg="soft-dark"] .lightbox { background: rgba(34,28,18,.70); }
body[data-lb-bg="cream"]     .lightbox { background: var(--cream); }
body[data-lb-bg="grey"]      .lightbox { background: #F0EEEA; }
body[data-lb-bg="white"]     .lightbox { background: #FFFFFF; }

/* light backgrounds — flip all UI elements to dark ink */
body[data-lb-bg="cream"] .lightbox .lb-close,
body[data-lb-bg="grey"]  .lightbox .lb-close,
body[data-lb-bg="white"] .lightbox .lb-close {
  color: var(--ink); opacity: .7;
}
body[data-lb-bg="cream"] .lightbox .lb-close:hover,
body[data-lb-bg="grey"]  .lightbox .lb-close:hover,
body[data-lb-bg="white"] .lightbox .lb-close:hover { opacity: 1; }

body[data-lb-bg="cream"] .lightbox .lb-nav,
body[data-lb-bg="grey"]  .lightbox .lb-nav,
body[data-lb-bg="white"] .lightbox .lb-nav {
  background: rgba(40,33,20,.07);
  border-color: rgba(40,33,20,.18);
  color: var(--ink);
}
body[data-lb-bg="cream"] .lightbox .lb-nav:hover,
body[data-lb-bg="grey"]  .lightbox .lb-nav:hover,
body[data-lb-bg="white"] .lightbox .lb-nav:hover {
  background: rgba(40,33,20,.13);
}

body[data-lb-bg="cream"] .lightbox .lb-zoom,
body[data-lb-bg="grey"]  .lightbox .lb-zoom,
body[data-lb-bg="white"] .lightbox .lb-zoom {
  background: rgba(40,33,20,.06);
  border-color: rgba(40,33,20,.14);
}
body[data-lb-bg="cream"] .lightbox .lb-zbtn,
body[data-lb-bg="grey"]  .lightbox .lb-zbtn,
body[data-lb-bg="white"] .lightbox .lb-zbtn { color: var(--ink); }
body[data-lb-bg="cream"] .lightbox .lb-zval,
body[data-lb-bg="grey"]  .lightbox .lb-zval,
body[data-lb-bg="white"] .lightbox .lb-zval { color: var(--ink-soft); }

/* rail on light bgs */
body[data-lb-bg="white"] .lightbox .lb-rail,
body[data-lb-bg="grey"]  .lightbox .lb-rail {
  background: rgba(0,0,0,.04);
  border-top-color: rgba(0,0,0,.08);
}
body[data-lb-bg="cream"] .lightbox .lb-rail {
  background: var(--cream-2);
  border-top-color: var(--line);
}

/* active thumbnail outline */
body[data-lb-bg="cream"] .lightbox .lb-thumb.active,
body[data-lb-bg="grey"]  .lightbox .lb-thumb.active,
body[data-lb-bg="white"] .lightbox .lb-thumb.active {
  outline-color: var(--espresso);
}

/* ============================================================
   SHOPPABLE LOOK — hotspot tips not shown on touch devices
   ============================================================ */
@media (hover: none) {
  .sl-hotspot { width: 40px; height: 40px; }
  .sl-hotspot .dot { width: 18px; height: 18px; }
  .sl-hotspot:active .sl-tip,
  .sl-hotspot:focus-visible .sl-tip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: none;
  }
}