/* =========================================================================
   PHILIPPINE MARKETPLACE THEME
   Sitewide header, footer and reusable decorative components. Loaded on
   every page (base.html). Token colors come from order.css's :root.
   ========================================================================= */

/* ---- Header ------------------------------------------------------------- */
.site-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 30;
}
.site-header__inner {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--space-6);
  height: 72px;
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: var(--space-5);
}

/* A second row under the main header: the shop-by-category links,
   always visible (never collapsed behind the hamburger) and wraps
   instead of overflowing, so it works at any width or category count. */
.site-categories {
  border-top: 1px solid var(--color-border);
  border-bottom: 2px solid var(--color-gold);
  background: var(--color-surface-alt);
}
.site-categories__inner {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 10px var(--space-6);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px var(--space-5);
}
.site-categories a {
  position: relative;
  display: inline-block;
  color: var(--color-text);
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  padding-bottom: 4px;
  transition: color 150ms ease;
}
.site-categories a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--color-primary);
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms ease;
}
.site-categories a:hover { color: var(--color-primary); text-decoration: none; }
.site-categories a:hover::after { transform: scaleX(1); }
.site-categories a[aria-current="page"] { color: var(--color-primary); }
.site-categories a[aria-current="page"]::after { transform: scaleX(1); }

.brand { display: flex; align-items: center; gap: 12px; color: inherit; }
.brand:hover { text-decoration: none; }
.brand__mark {
  width: 56px; height: 56px;
  display: grid; place-items: center; flex: 0 0 auto;
  background: transparent; border-radius: 0;
  transition: transform 180ms ease;
}
.brand:hover .brand__mark { transform: scale(1.08) rotate(-2deg); }
.brand__mark img { width: 100%; height: 100%; object-fit: contain; }
.brand__mark-placeholder {
  width: 100%; height: 100%; border-radius: 50%;
  background: transparent; color: var(--color-primary);
  display: grid; place-items: center;
}
.brand__text { display: flex; flex-direction: column; line-height: 1.2; }
.brand__text strong {
  font-family: var(--font-souvenir);
  font-size: 22px; font-weight: 700; color: var(--color-text);
  letter-spacing: 0.01em;
}
.brand__text small { color: var(--color-primary); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

.site-nav-center { display: flex; align-items: center; gap: var(--space-4); white-space: nowrap; }
.site-nav-center a {
  color: var(--color-text);
  font-weight: 600;
  font-size: 14px;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: color 150ms ease, border-color 150ms ease;
}
.site-nav-center a:hover { color: var(--color-primary); border-color: var(--color-primary); text-decoration: none; }

/* .nav-step is also used on the FAQ page's "How to Order" section
   (templates/policy.html) - keep it even though the nav dropdown that
   originally hosted it is gone. */
.nav-step { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.nav-step > div { min-width: 0; flex: 1; }
.nav-step__num {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  background: var(--color-primary); color: #fff; font-size: 11.5px; font-weight: 700;
  display: grid; place-items: center;
}
.nav-step strong { display: block; font-size: 13px; color: var(--color-text); }
.nav-step p { margin: 2px 0 0; font-size: 12px; color: var(--color-text-muted); line-height: 1.4; }

.site-search {
  display: flex;
  align-items: center;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0 4px 0 14px;
  height: 42px;
  min-width: 0;
  max-width: 420px;
  margin-left: auto;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.site-search:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); }
.site-search input {
  border: none; background: transparent; outline: none;
  font: inherit; font-size: 13.5px; width: 100%; padding: 0;
  color: var(--color-text);
}
.site-search button {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  border: none; background: var(--color-primary); color: #fff;
  display: grid; place-items: center; cursor: pointer;
}

.site-header__actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); }
/* Sign in / Register specifically: taller than the shared .btn--sm
   used elsewhere in the app, with Sign in's border tinted gold. Scoped
   to the header so no other .btn--sm usage is affected. */
.site-header__actions .btn--sm {
  height: 43px;
  padding: 0 20px;
  font-size: 14px;
}
.site-header__actions .btn--ghost {
  background: var(--color-surface);
  border-color: rgba(245, 181, 27, 0.45);
}
.cart-link {
  position: relative;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
.cart-link:hover { color: var(--color-primary); border-color: var(--color-primary); text-decoration: none; }
.cart-link__badge {
  position: absolute; top: -6px; right: -6px;
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px;
  background: var(--color-flag-red); color: #fff;
  font-size: 10.5px; font-weight: 700;
  display: grid; place-items: center;
  border: 2px solid var(--color-surface);
}

/* ---- Cart modal / sign-in prompt ------------------------------------------ */
.cart-modal__items { display: flex; flex-direction: column; gap: var(--space-3); max-height: 50vh; overflow-y: auto; }
.cart-modal__row {
  display: grid;
  grid-template-columns: auto 56px 1fr auto auto auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}
.cart-modal__row:last-child { border-bottom: none; }
.cart-modal__thumb {
  width: 56px; height: 56px; border-radius: var(--radius-sm);
  background: var(--color-surface-alt); overflow: hidden;
  display: grid; place-items: center; font-size: 10px; color: var(--color-text-muted);
}
.cart-modal__thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-modal__qty { width: 56px; padding: 6px; text-align: center; }
.cart-modal__footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); margin-top: var(--space-4); padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
@media (max-width: 560px) {
  .cart-modal__row { grid-template-columns: auto 48px 1fr; row-gap: 6px; }
  .cart-modal__row > *:nth-child(4),
  .cart-modal__row > *:nth-child(5),
  .cart-modal__row > *:nth-child(6) { grid-column: 2 / -1; }
}

.site-nav__user { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--color-text); white-space: nowrap; }
.site-nav__user-icon {
  display: none;
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--color-border);
  align-items: center; justify-content: center;
  flex: 0 0 auto;
}

.site-header__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 36px; height: 36px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  cursor: pointer;
}
.site-header__burger span { display: block; width: 16px; height: 2px; margin: 0 auto; background: var(--color-text); }

/* ---- Buttons: rounded-corner system, not pills ------------------------- */
.btn { border-radius: var(--radius-md); }
.btn--primary { background: var(--color-primary); }
.btn--primary:hover { background: var(--color-primary-hover); }

/* ---- Footer ---------------------------------------------------------------
   Deep navy, two rows (identity / social / links, then motto / copyright)
   split by thin gold rules. Heritage decoration (woven edge, leaves, gold
   arc) is CSS/inline SVG, clipped by the footer so it can never widen the
   page, and kept off the text column. An admin-uploaded background
   (footer_background_url) replaces the CSS decoration when set. */
.site-footer {
  --ft-navy: #10243a;
  --ft-text: #f8fafc;
  --ft-muted: #b8c5d3;
  --ft-gold: #c9a45c;
  --ft-green: #0b8f78;
  --ft-rule: rgba(201, 164, 92, 0.45);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: block;
  padding: 0;
  border-top: none;
  background-color: var(--ft-navy);
  color: var(--ft-muted);
  font-size: 14px;
}
.site-footer--photo {
  background-image: var(--footer-bg-image);
  background-size: cover;
  background-position: center;
}
.site-footer--photo .site-footer__deco { display: none; }

.site-footer__deco { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.site-footer__weave {
  position: absolute; top: 0; bottom: 0; left: 0; width: 150px;
  opacity: 0.8;
  background-image:
    linear-gradient(45deg, rgba(201, 164, 92, 0.16) 25%, transparent 25%, transparent 75%, rgba(201, 164, 92, 0.16) 75%),
    linear-gradient(45deg, rgba(201, 164, 92, 0.16) 25%, transparent 25%, transparent 75%, rgba(201, 164, 92, 0.16) 75%),
    linear-gradient(-45deg, transparent 46%, rgba(184, 197, 211, 0.12) 46%, rgba(184, 197, 211, 0.12) 54%, transparent 54%);
  background-size: 22px 22px, 22px 22px, 11px 11px;
  background-position: 0 0, 11px 11px, 0 0;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 0%, transparent 100%);
}
.site-footer__leaves {
  position: absolute; right: -12px; top: -8px;
  width: 190px; height: auto;
  color: var(--ft-green); opacity: 0.32;
}
.site-footer__arc {
  position: absolute; right: -130px; bottom: -150px;
  width: 220px; height: 220px; border-radius: 50%;
  border: 2px solid var(--ft-gold); opacity: 0.6;
}

.site-footer__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(var(--space-4), 6vw, 84px);
}

.site-footer__top {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: 22px 0;
}
.site-footer__company { flex: 0 0 auto; min-width: 0; }
.site-footer__company strong {
  display: block; color: var(--ft-text);
  font-family: var(--font-sans);
  font-size: 16px; font-weight: 700; letter-spacing: 0.005em; line-height: 1.35;
  white-space: nowrap;
}
.site-footer__address {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 6px; max-width: 310px;
  font-size: 13px; line-height: 1.5; color: var(--ft-muted);
}
.site-footer__address svg { flex: 0 0 auto; margin-top: 1px; color: var(--ft-gold); }

.site-footer__vrule { flex: 0 0 1px; align-self: stretch; min-height: 56px; background: var(--ft-rule); }

.site-footer__social { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.site-footer__social a {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--ft-rule);
  background: rgba(255, 255, 255, 0.03);
  color: var(--ft-text);
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
.site-footer__social a:hover {
  background: rgba(201, 164, 92, 0.14); border-color: var(--ft-gold); color: var(--ft-gold);
  text-decoration: none;
}

.site-footer__links {
  display: flex; flex-wrap: wrap; align-items: center;
  flex-wrap: nowrap; column-gap: 30px; row-gap: 8px;
  margin-left: auto; padding-right: clamp(0px, 4vw, 90px);
}
.site-footer__links a {
  position: relative;
  color: var(--ft-text); font-size: 13.5px; font-weight: 500; white-space: nowrap;
  transition: color 150ms ease;
}
.site-footer__links a + a::before {
  content: "";
  position: absolute; left: -17px; top: 50%;
  width: 4px; height: 4px; margin-top: -2px; border-radius: 50%;
  background: var(--ft-gold); opacity: 0.85;
}
.site-footer__links a:hover { color: var(--ft-gold); text-decoration: none; }

.site-footer__bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
  padding: 14px 0 16px;
  border-top: 1px solid var(--ft-rule);
}
.site-footer__motto {
  display: flex; align-items: center; gap: 14px; margin: 0;
  color: var(--ft-gold);
  font-size: 11.5px; font-weight: 500; line-height: 1.55;
  letter-spacing: 0.2em; text-transform: uppercase;
}
.site-footer__motto-rule { flex: 0 0 auto; width: 30px; height: 1px; background: var(--ft-gold); }
.site-footer__copy { margin: 0; font-size: 12.5px; color: var(--ft-muted); }

.site-footer a:focus-visible { outline: 2px solid var(--ft-gold); outline-offset: 3px; }

/* Tablet / small laptop: links get their own line under identity + social. */
@media (max-width: 1240px) {
  .site-footer__top { flex-wrap: wrap; row-gap: var(--space-4); }
  .site-footer__links { flex-basis: 100%; flex-wrap: wrap; margin-left: 0; padding-right: 0; }
  .site-footer__company strong { white-space: normal; }
  .site-footer__leaves { width: 140px; opacity: 0.22; }
}
/* Phone: stacked, links as a two-column list with full-size tap targets. */
@media (max-width: 640px) {
  .site-footer__top { flex-direction: column; align-items: flex-start; gap: var(--space-4); padding: var(--space-5) 0 var(--space-4); }
  .site-footer__vrule, .site-footer__weave, .site-footer__arc { display: none; }
  .site-footer__leaves { width: 110px; opacity: 0.18; }
  .site-footer__company { padding-right: 70px; }
  .site-footer__social a { width: 44px; height: 44px; }
  .site-footer__links {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-4); row-gap: 0; width: 100%;
  }
  .site-footer__links a { display: flex; align-items: center; min-height: 44px; white-space: normal; }
  .site-footer__links a + a::before { display: none; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) 0; }
}

/* ---- Landing page (home) ---------------------------------------------
   Just the hero and a simple value-props strip. Prefixed lp- to keep it
   scoped to home.html; the hero uses the same negative-margin full-bleed
   breakout as the header/footer. */
body.home-page .site-main { padding: 0; }

.lp-wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--space-6); }

.lp-fade-up { opacity: 0; transform: translateY(18px); animation: lpFadeUp 0.8s ease forwards; }
@keyframes lpFadeUp { to { opacity: 1; transform: translateY(0); } }

/* ---- Hero: full-bleed, photo shown whole (not cropped). A left-to-right
   dark-green gradient sits behind the caption for contrast against busy
   photos, fading to fully transparent by ~80% so the right side of the
   image (the crafts themselves) stays bright and unobscured. ---- */
.lp-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-left: calc(50% - var(--page-w, 100vw) / 2);
  margin-right: calc(50% - var(--page-w, 100vw) / 2);
  min-height: 60vh;
  display: flex;
  align-items: flex-end;
  background: var(--color-navy-deep);
}
.lp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(7, 33, 25, 0.82) 0%,
    rgba(7, 33, 25, 0.68) 26%,
    rgba(7, 33, 25, 0.44) 44%,
    rgba(7, 33, 25, 0.16) 62%,
    rgba(7, 33, 25, 0) 80%
  );
}
.lp-hero__bg {
  position: absolute; inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.lp-hero__content { position: relative; z-index: 2; max-width: 580px; padding: 0 var(--space-6) var(--space-7); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3); }
.lp-hero__title {
  font-family: var(--font-souvenir); font-weight: 800; color: #fff;
  font-size: clamp(28px, 4.5vw, 52px); line-height: 1.12; margin: 0 0 var(--space-4); max-width: 13ch;
  transform-origin: left center;
  transition: color 250ms ease, transform 250ms ease;
}
.lp-hero__title:hover { color: var(--color-gold); transform: scale(1.03); }
.lp-hero__lead {
  color: #fffdf7; font-size: clamp(14px, 1.3vw, 16px); max-width: 480px; line-height: 1.7; margin: 0 0 var(--space-5);
  transition: color 250ms ease, transform 250ms ease;
}
.lp-hero__lead:hover { color: #fff; transform: translateX(4px); }
.lp-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.lp-hero__cta:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.3); }
.lp-hero__cta-arrow { display: inline-block; transition: transform 250ms ease; }
.lp-hero__cta:hover .lp-hero__cta-arrow { transform: translateX(5px); }
@media (max-width: 760px) {
  /* The caption spans closer to the image's full width on narrow
     screens, so the fade needs to stay stronger for longer. */
  .lp-hero::before {
    background: linear-gradient(
      90deg,
      rgba(7, 33, 25, 0.86) 0%,
      rgba(7, 33, 25, 0.78) 50%,
      rgba(7, 33, 25, 0.5) 72%,
      rgba(7, 33, 25, 0.15) 92%,
      rgba(7, 33, 25, 0) 100%
    );
  }
}

.btn--ghost-light { background: rgba(255, 255, 255, 0.08); color: #fff; border: 1px solid rgba(255, 255, 255, 0.55); }
.btn--ghost-light:hover { background: rgba(255, 255, 255, 0.18); }

/* ---- Value props strip ---- */
.lp-values {
  position: relative;
  overflow: hidden;
  background: var(--color-surface-alt) url("../images/ph/wave-band.svg") center / cover no-repeat;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.lp-values__grid {
  position: relative; z-index: 1;
  padding: var(--space-6) var(--space-5);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-6) var(--space-7);
}
.lp-value { display: flex; align-items: center; gap: 12px; }
.lp-value__icon {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  background: var(--color-surface); border: 1px solid var(--color-border);
  display: grid; place-items: center; color: var(--color-primary);
}
.lp-value strong { display: block; font-size: 13.5px; }
.lp-value span:not(.lp-value__icon) { display: block; font-size: 12px; color: var(--color-text-muted); }

/* ---- Landing responsive ---- */
@media (max-width: 900px) {
  /* Bottom-aligned content in a viewport-tall hero pushed the caption
     (and the CTA button) below the fold and under the fixed footer on
     phones. Let the hero size itself to its content instead, flowing
     from the top, so everything stays visible without scrolling. */
  .lp-hero { min-height: 0; align-items: flex-start; }
  .lp-hero__content { padding-top: var(--space-6); }
}
@media (max-width: 560px) {
  .lp-wrap, .lp-hero__content { padding-left: var(--space-4); padding-right: var(--space-4); }
}

@media (max-width: 1080px) {
  .site-nav-center { display: none; }
  .site-header__burger { display: flex; }
  body.nav-open .site-nav-center {
    display: flex;
    position: absolute;
    top: 72px; left: 0; right: 0;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-4) var(--space-5);
    gap: var(--space-3);
  }
  .site-header__inner { grid-template-columns: auto auto 1fr; }
}
@media (max-width: 760px) {
  .site-header__inner {
    height: 64px;
    padding: 0 var(--space-3);
    gap: var(--space-2);
    grid-template-columns: auto auto 1fr;
  }
  .site-header__actions .btn--sm { height: auto; padding: 6px 10px; font-size: 12.5px; }
  .site-categories__inner { padding: 8px var(--space-3); gap: 4px var(--space-4); }
}
@media (max-width: 420px) {
  .site-header__inner { gap: 6px; }
  .brand { gap: 6px; }
  .brand__mark { width: 32px; height: 32px; }
  .brand__text small { display: none; }
  .brand__text { max-width: 128px; min-width: 0; }
  .brand__text strong {
    font-size: 14px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; display: block;
  }
  .site-header__burger { width: 32px; height: 32px; }
  .cart-link { width: 32px; height: 32px; }
  .site-header__actions { gap: 6px; }
  .site-header__actions .btn { white-space: nowrap; height: auto; padding: 6px 8px; font-size: 12px; }

  /* Signed in: collapse name + role badge to a single icon; the account
     page is one tap away and "Sign out" still needs to fit beside it. */
  .site-nav__user-icon { display: inline-flex; }
  .site-nav__user-name,
  .site-nav__user .pill--role { display: none; }
}

/* ---- Policy pages (Terms, Privacy, FAQ) ----------------------------------- */
.policy-body { color: var(--color-text); }
.policy-body p { line-height: 1.6; }
.policy-body p + p { margin-top: var(--space-3); }

#how-to-order .nav-step { display: flex; gap: 12px; margin-bottom: 12px; }

/* ---- Home: product discovery rows ----------------------------------------
   Five products per group; arrows page through groups. On narrow screens
   the same five sit in a horizontally scrollable row. */
.dc { padding: var(--space-6) 0 var(--space-7); }
.dc-row + .dc-row { margin-top: var(--space-6); }
.dc-row__head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3);
  padding-bottom: var(--space-3); margin-bottom: var(--space-4);
  border-bottom: 2px solid var(--color-border);
  position: relative;
}
.dc-row__head::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 64px; height: 2px; background: var(--color-gold);
}
.dc-row__head h2 {
  font-family: var(--font-souvenir); font-size: clamp(18px, 2vw, 22px);
  color: var(--color-navy-deep); letter-spacing: 0.02em; text-transform: uppercase;
}
.dc-row__more { flex: 0 0 auto; color: var(--color-primary); font-weight: 700; font-size: 14px; white-space: nowrap; }
.dc-row__more:hover { color: var(--color-primary-hover); }
.dc-row__body { position: relative; }
.dc-row__track { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-4); }
.dc-row__nav {
  position: absolute; top: 38%; z-index: 2; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text);
  box-shadow: var(--shadow-md);
  transition: opacity 150ms ease, color 150ms ease, border-color 150ms ease;
}
.dc-row__nav:hover:not(:disabled) { color: var(--color-primary); border-color: var(--color-primary); }
.dc-row__nav:disabled { opacity: 0; pointer-events: none; }
.dc-row__nav--prev { left: -22px; }
.dc-row__nav--next { right: -22px; }
.dc-row__status { margin: var(--space-2) 0 0; text-align: right; }

.dc-card {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden;
  transition: box-shadow 160ms ease, transform 160ms ease, border-color 160ms ease;
}
.dc-card:hover { text-decoration: none; border-color: rgba(8, 127, 109, 0.4); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.dc-card:focus-visible { outline: 3px solid var(--color-gold); outline-offset: 2px; }
.dc-card__media {
  aspect-ratio: 1 / 1; background: #fbf8f1; display: grid; place-items: center; overflow: hidden;
}
.dc-card__media img { width: 100%; height: 100%; object-fit: cover; }
.dc-card__monogram {
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--color-gold); color: var(--color-gold); font-family: var(--font-souvenir); font-size: 26px;
}
.dc-card__body { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 12px; }
.dc-card__code { font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; color: var(--color-text-muted); }
.dc-card__name {
  font-size: 14px; font-weight: 600; line-height: 1.35; min-height: 2.7em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dc-card__price { color: var(--color-primary); font-weight: 800; font-size: 15px; }
.dc-card__price small { color: var(--color-text-muted); font-weight: 500; font-size: 12px; }

@media (max-width: 1100px) {
  .dc-row__nav--prev { left: -12px; }
  .dc-row__nav--next { right: -12px; }
}
@media (max-width: 860px) {
  .dc-row__track {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(150px, 40%);
    overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
  }
  .dc-card { scroll-snap-align: start; }
  .dc-row__nav { top: 34%; }
  .dc-row__nav--prev { left: 4px; }
  .dc-row__nav--next { right: 4px; }
}
@media (max-width: 480px) {
  .dc-row__track { grid-auto-columns: minmax(140px, 46%); gap: var(--space-3); }
}

/* ---- Avatar + header profile menu ----------------------------------------- */
.avatar {
  --avatar-size: 32px;
  width: var(--avatar-size); height: var(--avatar-size); flex: 0 0 auto;
  border-radius: 50%; overflow: hidden;
  display: inline-grid; place-items: center;
  background: var(--color-primary-soft, #e3f2ef); color: var(--color-primary);
  border: 1px solid rgba(8, 127, 109, 0.25);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar svg { width: 62%; height: 62%; }
.avatar--md { --avatar-size: 44px; }
.avatar--lg { --avatar-size: 96px; border-width: 2px; }

.profile-menu { position: relative; }
.profile-menu__toggle {
  display: inline-flex; align-items: center; gap: 8px;
  height: 43px; padding: 0 10px 0 5px;
  border: 1px solid rgba(245, 181, 27, 0.45); border-radius: 999px;
  background: var(--color-surface); color: var(--color-text);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.profile-menu__toggle:hover, .profile-menu__toggle[aria-expanded="true"] {
  border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft, rgba(8, 127, 109, 0.12));
}
.profile-menu__name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-menu__chevron { color: var(--color-text-muted); transition: transform 150ms ease; }
.profile-menu__toggle[aria-expanded="true"] .profile-menu__chevron { transform: rotate(180deg); }

.profile-menu__dropdown {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 45;
  width: 260px; padding: 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: 0 16px 36px rgba(16, 36, 58, 0.16);
}
.profile-menu__head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 10px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--color-border);
}
.profile-menu__head > div { min-width: 0; display: grid; }
.profile-menu__head strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-menu__head span { font-size: 12px; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-menu__dropdown [role="menuitem"] {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 42px; padding: 0 10px; border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--color-text); font: inherit; font-size: 14px; font-weight: 500;
  text-align: left; cursor: pointer;
}
.profile-menu__dropdown [role="menuitem"] svg { color: var(--color-text-muted); flex: 0 0 auto; }
.profile-menu__dropdown [role="menuitem"]:hover,
.profile-menu__dropdown [role="menuitem"]:focus-visible {
  background: var(--color-surface-alt); color: var(--color-primary); text-decoration: none; outline: none;
}
.profile-menu__dropdown [role="menuitem"]:hover svg,
.profile-menu__dropdown [role="menuitem"]:focus-visible svg { color: var(--color-primary); }
.profile-menu__dropdown hr { border: 0; border-top: 1px solid var(--color-border); margin: 4px 0; }
.profile-menu__logout { color: #b42318 !important; }
.profile-menu__logout svg { color: #b42318 !important; }

/* ---- Discovery: tap targets, colour dots, phone arrows below the row ------- */
.dc-row__more { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
.dc-card__swatches { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.dc-card__swatches span { width: 14px; height: 14px; border-radius: 50%; background: var(--swatch, #e6dec8); border: 1px solid rgba(16, 36, 58, 0.18); }
.dc-card__swatches small { font-size: 11px; color: var(--color-text-muted); }
@media (max-width: 860px) {
  /* Arrows sit under the cards (never on top of them), with the range text. */
  .dc-row__body { padding-bottom: 56px; }
  .dc-row__nav { top: auto; bottom: 0; transform: none; }
  .dc-row__nav--prev { left: auto; right: 56px; }
  .dc-row__nav--next { right: 0; }
  .dc-row__nav:disabled { opacity: 0.35; pointer-events: none; }
  .dc-row__status { margin: -44px 0 0; height: 44px; line-height: 44px; text-align: left; }
}

.cart-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; border: 1px solid rgba(16, 36, 58, 0.2); }