/* ============================================================
   Dermáge Aesthetics — Store / pickup-order styles
   Reuses the global design tokens defined in mockup.css
   (--ink, --cream, --gold, --gold-dark, --radius, shadows,
    --serif, --sans). Self-contained: only .store-* / .cart-* /
    .checkout-* / .product-* / .cart-count selectors.
   ============================================================ */

/* ---- Header cart link + badge (global) ----
   Styled to match the adjacent Instagram icon: a bare 20px icon, same color,
   vertically centered in .nav__cta (no button/circle). */
/* Keep the header Instagram + cart icons identical size and vertically aligned. */
.nav__ig, .nav__cart { display: inline-flex; align-items: center; }
.nav__ig svg, .nav__cart svg { width: 20px; height: 20px; display: block; }
.nav__cart {
  position: relative;
  color: var(--ink);
  transition: color .2s ease;
}
.nav__cart:hover { color: var(--gold-dark); }
.cart-count {
  position: absolute;
  top: -8px; right: -10px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--gold-dark);
  color: #fff;
  font: 600 11px/18px var(--sans, sans-serif);
  text-align: center;
  transform: scale(0);
  transition: transform .18s cubic-bezier(.34,1.56,.64,1);
}
.cart-count.is-visible { transform: scale(1); }

/* ---- Home before/after slider: match the portrait photo so the WHOLE
   image shows (the default .slider-wrap is 4/3 landscape and crops it). ---- */
#skin-comparison-slider { aspect-ratio: 3 / 4; max-width: 520px; margin-left: auto; margin-right: auto; }

/* ---- Shop layout ---- */
.store { padding: 64px 0 96px; }
.store .container { max-width: 1180px; }

.brand-section { margin-top: 64px; }
.brand-section:first-of-type { margin-top: 8px; }
.brand-section__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 18px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--cream-deep);
}
.brand-section__name {
  font-family: var(--serif, serif);
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--ink);
  margin: 0;
}
.brand-section__count {
  font: 500 .8rem/1 var(--sans, sans-serif);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-dark);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 22px;
}

.product-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--cream-deep);
  border-radius: var(--radius, 16px);
  padding: 26px 24px 22px;
  box-shadow: var(--shadow-sm);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: var(--gold);
}
.product-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 190px;
  margin: -26px -24px 18px;        /* bleed to card edges */
  border-radius: var(--radius, 16px) var(--radius, 16px) 0 0;
  background: var(--cream);
  overflow: hidden;
}
.product-card__media img { width: 100%; height: 100%; object-fit: contain; padding: 16px; }
.product-card__media.is-empty { background: linear-gradient(135deg, var(--cream), var(--cream-deep)); }
.product-card__ph {
  font-family: var(--serif, serif);
  font-size: 2.4rem;
  color: var(--gold);
  opacity: .55;
}
.product-card__brand {
  font: 600 .68rem/1 var(--sans, sans-serif);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 12px;
}
.product-card__name {
  font-family: var(--serif, serif);
  font-size: 1.16rem;
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 4px;
}
.product-card__size {
  font: 400 .86rem/1.2 var(--sans, sans-serif);
  color: #8a8178;
  margin-bottom: 18px;
}
.product-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
}
.product-card__price {
  font-family: var(--serif, serif);
  font-size: 1.32rem;
  color: var(--ink);
}
.product-card__add {
  border: 0;
  cursor: pointer;
  background: var(--ink);
  color: #fff;
  font: 600 .82rem/1 var(--sans, sans-serif);
  letter-spacing: .03em;
  padding: 12px 18px;
  border-radius: 999px;
  transition: background .2s ease, transform .12s ease;
  white-space: nowrap;
}
.product-card__add:hover { background: var(--gold-dark); }
.product-card__add:active { transform: scale(.96); }
.product-card__add.is-added { background: var(--gold); color: var(--ink); }

/* ---- Cart page ---- */
.cart-wrap { display: grid; grid-template-columns: 1fr; gap: 32px; max-width: 760px; margin: 0 auto; }
.cart-empty { text-align: center; padding: 40px 0 8px; }
.cart-empty p { color: #8a8178; }

.cart-line {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--cream-deep);
}
.cart-line__name { font-family: var(--serif, serif); font-size: 1.08rem; color: var(--ink); }
.cart-line__meta { font: 400 .82rem/1.4 var(--sans, sans-serif); color: #8a8178; }
.qty {
  display: inline-flex; align-items: center;
  border: 1px solid var(--cream-deep); border-radius: 999px; overflow: hidden;
}
.qty button {
  width: 34px; height: 34px; border: 0; background: #fff; cursor: pointer;
  font-size: 1.1rem; color: var(--ink); line-height: 1;
}
.qty button:hover { background: var(--cream); }
.qty span { min-width: 30px; text-align: center; font-weight: 600; font-family: var(--sans, sans-serif); }
.cart-line__price { font-family: var(--serif, serif); font-size: 1.08rem; min-width: 72px; text-align: right; }
.cart-line__remove {
  background: none; border: 0; cursor: pointer; color: #b9b0a6; font-size: .8rem;
  text-decoration: underline; padding: 0; margin-top: 4px;
}
.cart-line__remove:hover { color: var(--gold-dark); }

.cart-summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 0 4px; font-family: var(--serif, serif); font-size: 1.4rem; color: var(--ink);
}
.cart-note { font: 400 .85rem/1.5 var(--sans, sans-serif); color: #8a8178; margin-top: 6px; }

/* ---- Checkout form ---- */
.checkout {
  background: var(--cream);
  border: 1px solid var(--cream-deep);
  border-radius: var(--radius-lg, 28px);
  padding: 38px 34px;
  margin-top: 8px;
}
.checkout h3 { font-family: var(--serif, serif); margin: 0 0 6px; }
.checkout__pickup {
  background: #fff; border-radius: var(--radius, 16px); padding: 16px 18px;
  margin: 18px 0 26px; border: 1px solid var(--cream-deep);
  font: 400 .9rem/1.5 var(--sans, sans-serif); color: var(--ink);
}
.checkout__pickup strong { color: var(--gold-dark); }
.field { margin-bottom: 18px; }
.field label {
  display: block; font: 600 .8rem/1 var(--sans, sans-serif);
  letter-spacing: .04em; color: var(--ink); margin-bottom: 7px;
}
.field input, .field textarea, .field select {
  width: 100%; box-sizing: border-box;
  border: 1px solid #e3d9cc; border-radius: var(--radius-sm, 8px);
  padding: 13px 14px; font: 400 1rem/1.3 var(--sans, sans-serif);
  background: #fff; color: var(--ink); transition: border-color .18s ease, box-shadow .18s ease;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 0; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-light);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.checkout__submit { width: 100%; margin-top: 8px; }
.checkout__err {
  display: none; background: #fbeaea; color: #9c3b32; border-radius: var(--radius-sm, 8px);
  padding: 12px 14px; margin-bottom: 16px; font: 500 .9rem/1.4 var(--sans, sans-serif);
}

/* ---- Confirmation ---- */
.order-confirm { text-align: center; max-width: 620px; margin: 0 auto; padding: 24px 0; }
.order-confirm__check {
  width: 64px; height: 64px; border-radius: 50%; background: var(--gold-light);
  color: var(--gold-dark); display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.order-confirm__check svg { width: 32px; height: 32px; }
.order-confirm h2 { font-family: var(--serif, serif); margin: 0 0 10px; }
.order-confirm__id {
  display: inline-block; margin: 6px 0 18px; padding: 6px 14px; border-radius: 999px;
  background: var(--cream-deep); font: 600 .9rem/1 var(--sans, sans-serif); letter-spacing: .06em; color: var(--ink);
}

/* ---- Floating cart (fixed, follows the visitor) ---- */
.floating-cart {
  position: fixed;
  bottom: 24px; left: 24px;          /* bottom-LEFT so it never collides with the
                                         scroll "Book Now" badge (.sticky-badge, bottom-right) */
  z-index: 95;
  display: flex; align-items: center; gap: 11px;
  padding: 12px 20px 12px 15px;
  background: var(--ink, #2A2421);
  color: #fff; text-decoration: none;
  border-radius: 999px;
  box-shadow: 0 14px 36px rgba(42, 36, 33, .30);
  visibility: hidden; opacity: 0; pointer-events: none;
  transform: translateY(22px) scale(.96);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), opacity .22s ease, background .2s ease, visibility .22s;
}
.floating-cart.is-visible { visibility: visible; opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
.floating-cart:hover { background: var(--gold-dark, #A68A63); }
.floating-cart__icon { display: flex; }
.floating-cart__icon svg { width: 23px; height: 23px; }
.floating-cart__text { display: flex; flex-direction: column; gap: 2px; }
.floating-cart__count { font: 600 13.5px/1.1 var(--sans, sans-serif); }
.floating-cart__total { font: 500 12px/1.1 var(--sans, sans-serif); color: var(--gold, #C5A880); }
.floating-cart.bump { animation: fc-bump .42s ease; }
@keyframes fc-bump { 0% { transform: scale(1); } 32% { transform: scale(1.13); } 100% { transform: scale(1); } }
@media (max-width: 560px) { .floating-cart { bottom: 16px; left: 16px; } }

/* ---- Product description + zoomable image ---- */
.product-card__desc {
  font: 400 .9rem/1.5 var(--sans, sans-serif);
  color: #6b635b;
  margin: 0 0 18px;
}
.zoom-btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  background: none; border: 0; padding: 0; margin: 0;
  cursor: zoom-in;
}
.product-card__media:hover img { transform: scale(1.03); }
.product-card__media img { transition: transform .3s ease; }

/* ---- Product lightbox (namespaced so it doesn't clash with the site's
   existing .lightbox used by the gallery) ---- */
.store-lightbox {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 28px;
  background: rgba(42, 36, 33, .88);
  opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility .22s ease;
}
.store-lightbox.is-open { opacity: 1; visibility: visible; }
.store-lightbox img {
  max-width: min(92vw, 720px); max-height: 80vh; object-fit: contain;
  background: #fff; border-radius: 14px; padding: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,.4);
}
.store-lightbox__cap { color: #fff; font: 500 .95rem/1.4 var(--sans, sans-serif); letter-spacing: .02em; }
.store-lightbox__close {
  position: absolute; top: 20px; right: 24px;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.12); color: #fff; border: 0; cursor: pointer;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.store-lightbox__close svg { display: block; }
.store-lightbox__close:hover { background: rgba(255,255,255,.24); }

@media (max-width: 560px) {
  .field-row { grid-template-columns: 1fr; }
  .cart-line { grid-template-columns: 1fr auto; }
  .cart-line__price { grid-column: 2; }
}

/* ---- "Find Your Ideal Treatment" widget — mobile fixes ----
   The concern buttons used flex:1 1 180px with default min-width:auto, so on
   phones they wouldn't shrink (content ran off-screen) and sat one-per-row at
   260px (too wide). Lay them out 2-up (full width on tiny screens) and allow
   shrink. Scoped to #goals-widget; also covers the JS-injected later steps. */
@media (max-width: 600px) {
  #goals-widget .widget-box { padding: 26px 16px; }
  #goals-widget .widget-concerns { gap: 12px; }
  #goals-widget .concern-tab {
    flex: 1 1 calc(50% - 6px);
    max-width: none;
    min-width: 0;                 /* let flex items shrink below content width */
    padding: 18px 10px;
  }
  #goals-widget .concern-tab span { font-size: .8rem; letter-spacing: .02em; }
  #goals-widget .recommendation-panel { padding: 22px 16px; }
  #goals-widget .rec-content { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 380px) {
  #goals-widget .concern-tab { flex-basis: 100%; }
}

/* ---- Mobile nav menu — keep it inside the *visible* viewport ----
   The theme caps the open menu at calc(100vh - 80px). On phones 100vh ignores
   the browser toolbar, so with a submenu expanded the menu overran the screen
   and the bottom links fell off-viewport / unreachable. dvh tracks the real
   visible height; the menu then scrolls internally instead of overflowing. */
@media (max-width: 1024px) {
  .nav__menu {
    max-height: calc(100vh - 80px);    /* fallback for older browsers */
    max-height: calc(100dvh - 80px);
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}

/* ---- Lightbox: stop mobile double-tap-to-zoom ----
   Accidental double taps (e.g. while navigating between images) triggered the
   browser's pinch/zoom. `manipulation` keeps scroll/pinch but disables the
   double-tap zoom gesture. Covers the theme gallery lightbox + product lightbox. */
.lightbox, .lightbox *, .store-lightbox, .store-lightbox * { touch-action: manipulation; }

/* ---- Mobile submenu: stop the off-screen-left shift ----
   On touch, tapping a .has-sub triggers :hover, which re-applied the desktop
   `transform: translateX(-50%)` and pushed the open submenu off the left edge.
   Neutralize the transform/left for both the hover and tapped (.is-active)
   states at mobile widths (same specificity, later in the cascade → wins). */
@media (max-width: 1024px) {
  .nav__menu .has-sub:hover .nav__sub,
  .nav__menu .has-sub.is-active .nav__sub {
    transform: none;
    left: auto;
  }
}

/* ---- Touch devices have no :hover — reveal hover-only content ----
   On phones/tablets these elements were invisible until a hover that never
   comes. Show them by default on no-hover devices. */
@media (hover: none) {
  /* Category gallery tiles (Skin / Laser / Hair Restoration): show the labels. */
  .gallery:not(.gallery--lightbox) a span { opacity: 1; }
  /* Instagram cards: surface the play/view affordance without the heavy dark
     overlay so the photo/video stays visible. */
  .instagram-card__overlay {
    opacity: 1;
    background: rgba(42, 36, 33, 0.14);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ---- Home "Our Core Treatments": added Scalp Health (NouvaDerm — main
   seller, featured full-width) + Laser Hair Removal cards. store.css loads
   after mockup.css, so these override the base card spans by cascade order. */
.bento-card--scalp       { grid-column: span 6; grid-row: span 1; }
.bento-card--laserhair   { grid-column: span 2; grid-row: span 1; }
.bento-card--laser       { grid-column: span 3; grid-row: span 2; }  /* large — bigger than microneedling */
.bento-card--microneedling { grid-column: span 2; grid-row: span 1; } /* small */
@media (max-width: 900px) {
  .bento-card--scalp { grid-column: span 4; }
  .bento-card--laser { grid-column: span 2; }   /* stays 2x2 (large) at tablet */
}
@media (max-width: 600px) {
  .bento-card--scalp,
  .bento-card--laserhair,
  .bento-card--microneedling,
  .bento-card--laser { grid-column: span 1; grid-row: span 1; }
}

/* ---- Service pages: tighten the big gap around "The Menu" ----
   The default .section padding is up to 130px, leaving a large void between the
   intro picture/description and "The Menu". Reduce the intro's bottom padding
   and the menu's top padding. Scoped via :has() so only these blocks change. */
@supports selector(:has(*)) {
  .section:has(.split__media) { padding-bottom: clamp(28px, 4vw, 52px); }
  .section:has(.treatment-grid),
  .section:has(.menu-item)    { padding-top: clamp(28px, 4vw, 52px); }
}

/* ---- Header logo: never distort or vanish ----
   The global img{max-width:100%} rule let the nav grid squeeze the logo's
   WIDTH while .nav__logo img kept its HEIGHT fixed at 42px — squashing the
   logo at mid-width screens and collapsing it to zero when the row ran out of
   room. Lock its aspect ratio, and relieve the crowded 1025–1320px band
   (desktop nav still shown, but little space) so everything fits. */
.nav__logo img { max-width: none; }
@media (min-width: 1025px) and (max-width: 1320px) {
  .nav { padding: 0 20px; gap: 14px; }
  .nav__menu { gap: 16px; }
  .nav__menu a { font-size: 0.82rem; }
  .nav__cta { gap: 14px; }
  .nav__cta .btn--sm { padding: 11px 18px; }
  .nav__logo img { height: 36px; }
}

/* ---- Out-of-stock product cards ---- */
.product-card.is-oos .product-card__media { position: relative; }
.product-card.is-oos .product-card__media img,
.product-card.is-oos .product-card__ph { opacity: .45; }
.product-card.is-oos .product-card__media::after {
  content: "Out of Stock";
  position: absolute; top: 12px; left: 12px;
  background: var(--ink, #2A2421); color: #fff;
  font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
}
.product-card__add:disabled {
  opacity: .45; cursor: not-allowed;
}

/* Rich-text product descriptions (limited HTML from the admin editor) */
.product-card__desc p { margin: 0 0 6px; }
.product-card__desc p:last-child { margin-bottom: 0; }
.product-card__desc ul, .product-card__desc ol { margin: 4px 0 6px; padding-left: 18px; text-align: left; }

/* Cart summary: subtotal/tax sub-rows above the total */
.cart-summary--sub { font-size: .92rem; color: var(--muted, #6b635b); font-weight: 400; border-top: 0; padding-top: 2px; padding-bottom: 2px; }
.cart-summary--sub + .cart-summary:not(.cart-summary--sub) { margin-top: 6px; }

/* Cart line thumbnails (click to zoom via the shared lightbox) */
.cart-line { grid-template-columns: auto 1fr auto auto; }
.cart-line__img {
  width: 64px; height: 64px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--cream-deep); border-radius: 10px;
  padding: 5px; cursor: zoom-in; overflow: hidden; transition: border-color .15s, box-shadow .15s;
}
.cart-line__img:hover { border-color: var(--gold, #C5A880); box-shadow: 0 2px 10px rgba(42,36,33,.10); }
.cart-line__img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cart-line__img--empty { background: var(--cream, #FAF7F2); cursor: default; }
@media (max-width: 640px) {
  .cart-line { grid-template-columns: auto 1fr auto; }
  .cart-line__img { width: 52px; height: 52px; }
  .cart-line__price { grid-column: 3; }
}

/* Gallery lightbox buttons: SVG icons (font-glyph offset fix) */
.lightbox__btn svg { display: block; }