/* ==========================================================================
   THE AM - Reusable component atoms. Depends on tokens from main.css.
   ========================================================================== */

/* ---- Buttons ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 32px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform .2s var(--ease);
}
.btn:active { transform: scale(.98); }

.btn-primary {
  background: var(--gold-grad);
  color: var(--ink);
}
.btn-primary:hover { filter: brightness(1.08); }

.btn-outline-light {
  border-color: rgba(246, 244, 239, .35);
  color: var(--bone);
}
.btn-outline-light:hover {
  border-color: var(--gold-500);
  color: var(--gold-300);
}

.btn-outline-dark {
  border-color: rgba(10, 10, 11, .25);
  color: var(--ink);
}
.btn-outline-dark:hover {
  border-color: var(--gold-700);
  color: var(--gold-700);
}

.btn-ghost {
  min-height: auto;
  padding: 0;
  color: var(--gold-300);
  font-size: 12px;
  position: relative;
}
.btn-ghost::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: -4px;
  height: 1px;
  background: currentColor;
  transition: right var(--dur) var(--ease);
}
.btn-ghost:hover::after { right: 0; }

.btn-block { width: 100%; }
.btn-sm { min-height: 38px; padding: 0 20px; font-size: 12px; }

/* ---- Badges ---- */

.badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--radius);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.badge-sale { background: var(--ruby); color: var(--white); }
.badge-new { background: var(--gold-500); color: var(--ink); }
.badge-instock { background: transparent; color: var(--green); border: 1px solid var(--green); }
.badge-soldout { background: transparent; color: var(--grey-400); border: 1px solid var(--grey-400); }

/* ---- Nav underline sweep ---- */

.nav-link {
  position: relative;
  padding-bottom: 4px;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 1px;
  background: var(--gold-500);
  transition: right var(--dur) var(--ease);
}
.nav-link:hover::after,
.nav-link.is-active::after { right: 0; }

/* ---- Product card ---- */

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--ink-soft);
  /* ink-line (#1E1E22) on ink-soft (#121215) is a ~5% luminance step - on the page's
     own near-black background (#0A0A0B) that hairline all but disappears, and a
     black box-shadow (see the light-section note below) can't add separation against
     black either. A soft white-opacity border reads clearly against black without
     glowing or looking out of place next to the gold accents. */
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .09);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.section-on-light .product-card {
  background: var(--white);
  border-color: var(--grey-200);
}
/* A card floating on a near-identical off-white page background (--bone vs --white
   are only ~2% apart) read as flat with just a 1px border - a real shadow, stronger
   on hover with a slight lift, gives it the depth/separation a light section needs.
   The resting shadow needs to actually be visible without hovering (a 5%-opacity
   2px blur was imperceptible in practice - most shoppers scan a grid, they don't
   hover every card), while hover still steps up noticeably further. */
.product-card:hover {
  border-color: var(--gold-700);
  transform: translateY(-4px);
  /* A black shadow (--shadow-card) is invisible on a dark section's own near-black
     background - swap in a warm gold-tinted glow there instead, on-brand and
     actually visible; light sections keep the original black lift-shadow below. */
  box-shadow: 0 10px 30px rgba(212, 175, 55, .16);
}
.section-on-light .product-card:hover {
  box-shadow: var(--shadow-card);
}

.product-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: radial-gradient(circle at 50% 45%, rgba(212, 175, 55, .12), transparent 70%);
  overflow: hidden;
  /* Was display:grid + place-items:center with a 90%-sized <img> - but
     place-items:center gives the grid item (here, the <picture>) auto/
     content-based sizing rather than a definite height from the grid area,
     so a percentage height on the <img> inside it never resolved and fell
     back to the image's own intrinsic aspect ratio instead. That silently
     let portrait product photos (e.g. 981x1563) render far taller than this
     box and get clipped by overflow:hidden, while only square photos
     happened to look right. Padding + a 100%-filled, definitely-sized
     <picture>/<img> plus object-fit:contain sidesteps the indefinite-size
     issue entirely and centers correctly for any source aspect ratio. */
  padding: 5%;
  box-sizing: border-box;
}
.product-card__media picture {
  display: block;
  width: 100%;
  height: 100%;
}
.product-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .7s var(--ease);
}
.product-card:hover .product-card__media img { transform: scale(1.06); }

.product-card__badges {
  position: absolute;
  top: 12px; left: 12px;
  display: flex; flex-direction: column; gap: 6px;
  z-index: 2;
}

.product-card__actions {
  position: absolute;
  top: 12px; right: 12px;
  display: flex; flex-direction: column; gap: 8px;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  z-index: 2;
}
.product-card:hover .product-card__actions,
.product-card:focus-within .product-card__actions {
  opacity: 1;
  transform: translateX(0);
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  min-width: 44px; min-height: 44px;
  border-radius: 50%;
  background: rgba(10, 10, 11, .55);
  color: var(--bone);
  backdrop-filter: blur(4px);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.icon-btn:hover { background: var(--gold-500); color: var(--ink); }
.icon-btn .icon { width: 18px; height: 18px; }

.product-card__body {
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.product-card__brand {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-300);
}
.section-on-light .product-card__brand { color: var(--gold-700); }

.product-card__name {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
}

.product-card__price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 4px;
}
.product-card__price-current { font-weight: 600; color: var(--gold-300); }
.section-on-light .product-card__price-current { color: var(--gold-700); }
.product-card__price-original {
  text-decoration: line-through;
  color: var(--grey-400);
  font-size: 13px;
}

/* product-card.php hardcodes btn-outline-dark on its "Add to Cart" button, which
   is meant for LIGHT backgrounds (color: var(--ink), near-black) - fine on a light
   section's white card, but on a dark section (Bestsellers, New Arrivals) the card
   itself is near-black, so the button text/icon were rendering essentially invisible
   (measured ~1:1 contrast). Flip it to the light-on-dark palette by default, since
   dark is this card's default context, and only use the dark-ink palette inside a
   light section - the same pattern the rest of this component already follows. */
.product-card .btn-outline-dark {
  border-color: rgba(246, 244, 239, .35);
  color: var(--bone);
}
.product-card .btn-outline-dark:hover {
  border-color: var(--gold-500);
  color: var(--gold-300);
}
.section-on-light .product-card .btn-outline-dark {
  border-color: rgba(10, 10, 11, .25);
  color: var(--ink);
}
.section-on-light .product-card .btn-outline-dark:hover {
  border-color: var(--gold-700);
  color: var(--gold-700);
}

/* ---- Icon base ---- */

.icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}
.icon-fill { fill: currentColor; stroke: none; }

/* ---- Forms ---- */

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}
.field label {
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--grey-400);
}
.section-on-light .field label { color: var(--grey-600); }

.field input,
.field select,
.field textarea {
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  background: var(--ink-soft);
  color: var(--bone);
}
.section-on-light .field input,
.section-on-light .field select,
.section-on-light .field textarea {
  background: var(--white);
  border-color: var(--grey-200);
  color: var(--ink);
}
.field textarea { min-height: 120px; padding-block: 12px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold-500); }
.field-error { font-size: 12px; color: var(--ruby); }

/* ---- Skeleton loaders (replace spinners everywhere) ---- */

.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--ink-line);
  border-radius: var(--radius);
}
.section-on-light .skeleton { background: var(--grey-200); }
.skeleton::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, .12), transparent);
  animation: skeleton-sweep 1.6s ease-in-out infinite;
}
@keyframes skeleton-sweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ---- Quantity stepper ---- */

.stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  height: 48px;
}
.section-on-light .stepper { border-color: var(--grey-200); }
.stepper button {
  width: 44px; height: 100%;
  display: grid; place-items: center;
  font-size: 16px;
}
.stepper input {
  width: 44px;
  height: 100%;
  text-align: center;
  border: none;
  background: transparent;
  -moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.stepper--sm { height: 36px; }
.stepper--sm button { width: 34px; font-size: 14px; }
.stepper--sm input { width: 32px; font-size: 13px; }

/* ==========================================================================
   Announcement bar
   ========================================================================== */

.announcement-bar {
  background: var(--carbon);
  color: var(--gold-300);
  text-align: center;
  height: var(--announcement-h);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 12px;
  letter-spacing: .05em;
}
.announcement-bar__track { position: relative; width: 100%; height: 100%; }
.announcement-bar__item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding-inline: var(--gutter);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  pointer-events: none;
}
.announcement-bar__item.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ==========================================================================
   Header / nav
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(10, 10, 11, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ink-line);
  transition: padding var(--dur) var(--ease);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--header-h);
  transition: height var(--dur) var(--ease);
}
.site-header.is-scrolled .site-header__inner { height: var(--header-h-scrolled); }

.site-header__logo img { height: 56px; width: auto; transition: height var(--dur) var(--ease); }
.site-header.is-scrolled .site-header__logo img { height: 44px; }

.site-header__menu-toggle { color: var(--bone); }

.site-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 32px);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.icon-btn--ghost {
  position: relative;
  background: transparent;
  color: var(--bone);
  width: 40px; height: 40px;
}
.icon-btn--ghost:hover { color: var(--gold-300); }
.icon-btn--ghost .icon { width: 20px; height: 20px; }
.icon-btn__count {
  position: absolute;
  top: 2px; right: 2px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--gold-500);
  color: var(--ink);
  font-size: 10px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.icon-btn--sm { width: 34px; height: 34px; background: transparent; color: var(--grey-400); }
.icon-btn--sm:hover { color: var(--ruby); }
.icon-btn--sm .icon { width: 16px; height: 16px; }

/* Mobile full-screen nav drawer */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0, 0, 0, .6);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.mobile-nav.is-open { opacity: 1; }
.mobile-nav__panel {
  position: absolute;
  inset: 0 15% 0 0;
  background: var(--ink);
  padding: 24px;
  transform: translateX(-100%);
  transition: transform var(--dur) var(--ease);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.mobile-nav.is-open .mobile-nav__panel { transform: translateX(0); }
.mobile-nav__list { display: flex; flex-direction: column; gap: 4px; margin-top: 32px; }
.mobile-nav__list a {
  display: block;
  padding: 14px 4px;
  border-bottom: 1px solid var(--ink-line);
  font-family: var(--font-display);
  font-size: 20px;
}
.mobile-nav__footer {
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 13px;
  color: var(--grey-400);
}
.mobile-nav__footer a { display: flex; align-items: center; gap: 10px; }
.mobile-nav__footer .icon { width: 18px; height: 18px; }

/* ==========================================================================
   Search overlay
   ========================================================================== */

.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(10, 10, 11, .97);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.search-overlay.is-open { opacity: 1; }
.search-overlay__inner {
  width: 100%;
  max-width: 720px;
  padding: clamp(60px, 12vh, 140px) var(--gutter) 40px;
}
.search-overlay__close {
  position: absolute;
  top: 24px; right: var(--gutter);
  color: var(--bone);
}
.search-overlay__form { position: relative; }
.search-overlay__icon {
  position: absolute;
  left: 4px; top: 50%;
  transform: translateY(-50%);
  width: 24px; height: 24px;
  color: var(--gold-500);
}
.search-overlay__input {
  width: 100%;
  padding: 16px 8px 16px 40px;
  background: transparent;
  border-bottom: 1px solid var(--ink-line);
  color: var(--bone);
  font-family: var(--font-display);
  font-size: clamp(22px, 4vw, 32px);
}
.search-overlay__input:focus { border-bottom-color: var(--gold-500); }
.search-overlay__results { margin-top: 24px; max-height: 60vh; overflow-y: auto; }
.search-overlay__empty { color: var(--grey-400); padding: 16px 4px; }
.search-overlay__view-all { display: block; margin: 16px 4px; }

.search-result {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--ink-line);
}
.search-result img { width: 56px; height: 56px; object-fit: contain; background: var(--ink-soft); border-radius: var(--radius); }
.search-result__body { display: flex; flex-direction: column; gap: 2px; }
.search-result__brand { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-300); }
.search-result__name { font-family: var(--font-display); font-size: 16px; }
.search-result__price { font-size: 13px; color: var(--grey-400); }

/* ==========================================================================
   Drawers (cart, auth)
   ========================================================================== */

.drawer {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(0, 0, 0, .55);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.drawer.is-open { opacity: 1; }
.drawer__panel {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(440px, 100%);
  height: 100dvh;
  background: var(--ink-soft);
  color: var(--bone);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--dur) var(--ease);
}
.drawer.is-open .drawer__panel { transform: translateX(0); }

.drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--ink-line);
}
.drawer__title { margin: 0; font-size: 20px; }
.drawer__body { flex: 1; overflow-y: auto; padding: 20px 24px; }
.drawer__empty { color: var(--grey-400); text-align: center; padding: 60px 0; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.drawer__footer { padding: 20px 24px; border-top: 1px solid var(--ink-line); display: flex; flex-direction: column; gap: 10px; }
.drawer__subtotal { display: flex; justify-content: space-between; font-size: 16px; margin-bottom: 4px; }
.drawer__note { font-size: 12px; color: var(--grey-400); margin-bottom: 8px; }

.cart-line {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--ink-line);
}
.cart-line__media img { width: 64px; height: 64px; object-fit: contain; background: var(--ink); border-radius: var(--radius); }
.cart-line__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cart-line__name { font-family: var(--font-display); font-size: 15px; }
.cart-line__price { font-size: 13px; color: var(--gold-300); }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer { padding-block: var(--section-pad) 0; }
.site-footer__grid {
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--ink-line);
}
.site-footer__contact { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; font-size: 13px; color: var(--grey-400); }
.site-footer__contact li { display: flex; align-items: flex-start; gap: 10px; }
.site-footer__contact .icon { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
.site-footer__contact a:hover { color: var(--gold-300); }

.site-footer__col ul { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; font-size: 14px; color: var(--grey-400); }
.site-footer__col a:hover { color: var(--gold-300); }

.site-footer__clock { font-family: var(--font-display); font-size: 32px; color: var(--gold-300); margin: 8px 0; }
.site-footer__social { display: flex; gap: 12px; margin-top: 16px; }
.site-footer__social a {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--ink-line);
  border-radius: 50%;
  color: var(--bone);
}
.site-footer__social a:hover { border-color: var(--gold-500); color: var(--gold-300); }
.site-footer__social .icon { width: 16px; height: 16px; }

.site-footer__newsletter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 40px;
  border-bottom: 1px solid var(--ink-line);
}
.site-footer__newsletter h3 { margin: 4px 0 0; }
.site-footer__newsletter-form { display: flex; gap: 10px; flex: 1; max-width: 440px; min-width: 260px; }
.site-footer__newsletter-form input {
  flex: 1;
  min-height: 48px;
  padding: 0 16px;
  background: var(--ink);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  color: var(--bone);
}
.site-footer__newsletter-form input:focus { border-color: var(--gold-500); }

.site-footer__bottom {
  padding-block: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: var(--grey-400);
}

/* ==========================================================================
   WhatsApp float
   ========================================================================== */

.whatsapp-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 30;
  width: 56px; height: 56px;
  min-width: 44px; min-height: 44px;
  border-radius: 50%;
  background: #25D366;
  color: var(--white);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-lift);
  transition: transform .2s var(--ease);
}
.whatsapp-float:hover { transform: scale(1.08); }
.whatsapp-float .icon { width: 28px; height: 28px; }

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */

.breadcrumbs { padding-block: 20px; }
.breadcrumbs__list { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--grey-400); }
.breadcrumbs__list li:not(:last-child)::after { content: "/"; margin-left: 8px; color: var(--ink-line); }
.section-on-light .breadcrumbs__list li:not(:last-child)::after { color: var(--grey-200); }
.breadcrumbs__list a:hover { color: var(--gold-300); }
.breadcrumbs__list span[aria-current] { color: var(--bone); }
.section-on-light .breadcrumbs__list span[aria-current] { color: var(--ink); }

/* ==========================================================================
   Dialog-open state: lock body scroll
   ========================================================================== */
body.has-open-dialog { overflow: hidden; }

/* ==========================================================================
   Shop layout: filter sidebar + results grid
   ========================================================================== */

/* .shop-layout was a marker class with zero rules - the <section> carrying it
   also skips the base .section class (understandably, since .section's own
   padding-block is a huge clamp(64px, 9vw, 140px) sized for hero/marketing
   sections, way too much for a toolbar+grid utility page), but that left it
   with NO padding at all - filters/toolbar/product grid sat flush against the
   dark title bar above and the footer below. Matches the padding-block
   convention .account-layout/.auth-page already use for this exact kind of
   "content below a title bar" utility page. */
.shop-layout { padding-block: 40px 80px; }

.shop-layout__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
  align-items: start;
}

.shop-filters {
  background: var(--white);
}
.shop-filters__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.shop-filters__backdrop[hidden] { display: none; }

.filter-group { padding-block: 20px; border-bottom: 1px solid var(--grey-200); }
.filter-group:first-of-type { padding-top: 0; }
.filter-group__title { font-size: 13px; letter-spacing: .04em; margin-bottom: 14px; }

.filter-list { display: flex; flex-direction: column; gap: 12px; max-height: 220px; overflow-y: auto; padding-right: 4px; }
.filter-check { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.filter-check input { width: 16px; height: 16px; accent-color: var(--gold-700); flex-shrink: 0; }
.filter-check__count { margin-left: auto; font-size: 12px; color: var(--grey-400); }

.filter-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.filter-swatch {
  position: relative;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--swatch-color);
  border: 2px solid var(--white);
  outline: 1px solid var(--grey-200);
  cursor: pointer;
}
.filter-swatch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.filter-swatch.is-checked,
.filter-swatch:has(input:checked) { outline: 2px solid var(--gold-700); outline-offset: 2px; }

.price-slider { position: relative; height: 20px; margin-bottom: 16px; }
.price-slider__track {
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 3px;
  background: var(--grey-200);
  transform: translateY(-50%);
  border-radius: 2px;
}
.price-slider__fill {
  position: absolute;
  top: 0; bottom: 0;
  background: var(--gold-700);
  border-radius: 2px;
}
.price-slider__input {
  position: absolute;
  top: 0; left: 0; right: 0;
  width: 100%;
  height: 20px;
  margin: 0;
  background: transparent;
  appearance: none;
  pointer-events: none;
}
.price-slider__input::-webkit-slider-thumb {
  appearance: none;
  pointer-events: auto;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--gold-700);
  cursor: pointer;
  margin-top: 0;
}
.price-slider__input::-moz-range-thumb {
  pointer-events: auto;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--gold-700);
  cursor: pointer;
}
.price-slider__input::-webkit-slider-runnable-track { background: transparent; }
.price-slider__values { display: flex; align-items: center; gap: 8px; }
.price-slider__values input {
  width: 0;
  flex: 1;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  font-size: 13px;
}

.shop-filters__actions { padding-top: 20px; display: flex; flex-direction: column; gap: 14px; }

.shop-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.shop-toolbar__count { font-size: 14px; color: var(--grey-600); }
.shop-toolbar__controls { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.shop-toolbar__controls select {
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  font-size: 13px;
}
.shop-toolbar__view { display: flex; gap: 4px; }
.shop-toolbar__view .icon-btn--sm { color: var(--grey-400); background: var(--bone); }
.shop-toolbar__view .icon-btn--sm.is-active { color: var(--ink); background: var(--grey-200); }

.shop-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.shop-chips[hidden] { display: none; }
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--grey-200);
  border-radius: 999px;
  font-size: 12px;
  background: var(--white);
}
.filter-chip:hover { border-color: var(--ruby); color: var(--ruby); }
.filter-chip--clear { border-color: transparent; color: var(--gold-700); text-decoration: underline; }

#productGrid { min-height: 200px; transition: opacity .25s var(--ease); }
#productGrid.is-loading { opacity: .4; pointer-events: none; }
.product-grid--list { grid-template-columns: 1fr !important; }
.product-grid--list .product-card { flex-direction: row; }
.product-grid--list .product-card__media { width: 200px; flex-shrink: 0; aspect-ratio: 1/1; }
.product-grid--list .product-card__actions { top: 12px; }

.shop-empty { grid-column: 1 / -1; text-align: center; padding: 60px 20px; display: flex; flex-direction: column; align-items: center; gap: 20px; }

.pagination { display: flex; justify-content: center; gap: 6px; margin-top: 40px; }
.pagination__btn {
  min-width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  font-size: 13px;
}
.pagination__btn.is-active { background: var(--ink); color: var(--white); border-color: var(--ink); }
.pagination__btn:hover:not(.is-active) { border-color: var(--gold-700); }
.pagination__ellipsis { display: grid; place-items: center; width: 24px; color: var(--grey-400); }

@media (min-width: 1024px) {
  .shop-layout__inner { grid-template-columns: 260px 1fr; }
  .shop-filters { position: sticky; top: calc(var(--header-h) + 24px); max-height: calc(100dvh - var(--header-h) - 48px); overflow-y: auto; }
  .shop-filters__header { display: none; }
}

@media (max-width: 1023.98px) {
  .shop-filters {
    position: fixed;
    inset: 0 20% 0 auto;
    z-index: 90;
    padding: 24px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform var(--dur) var(--ease);
  }
  .shop-filters.is-open { transform: translateX(0); }
  .shop-filters__backdrop {
    position: fixed; inset: 0; z-index: 85;
    background: rgba(0, 0, 0, .5);
  }
}
@media (max-width: 479.98px) {
  .shop-filters { inset: 0; }
}

/* ==========================================================================
   Quick view modal
   ========================================================================== */

.drawer--modal { display: grid; place-items: center; }
.drawer--modal .quick-view__panel {
  position: relative;
  inset: auto;
  width: min(880px, 92vw);
  max-height: 88vh;
  transform: scale(.96);
  opacity: 0;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
  border-radius: var(--radius);
}
.drawer--modal.is-open .quick-view__panel { transform: scale(1); opacity: 1; }

.quick-view { display: grid; grid-template-columns: 1fr; gap: 24px; }
.quick-view__media img { width: 100%; aspect-ratio: 1/1; object-fit: contain; background: radial-gradient(circle at 50% 45%, rgba(212,175,55,.1), transparent 70%); }
.quick-view__thumbs { display: flex; gap: 8px; margin-top: 12px; }
.quick-view__thumbs img { width: 56px; height: 56px; object-fit: contain; border: 1px solid var(--ink-line); border-radius: var(--radius); cursor: pointer; }

@media (min-width: 768px) {
  .quick-view { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   Product detail page
   ========================================================================== */

.product-detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  padding-top: 32px;
}

.product-gallery { display: flex; gap: 16px; }
.product-gallery__thumbs { display: flex; flex-direction: column; gap: 10px; width: 72px; flex-shrink: 0; }
.product-gallery__thumb {
  border: 2px solid transparent;
  border-radius: var(--radius);
  overflow: hidden;
  opacity: .6;
  transition: opacity .2s var(--ease), border-color .2s var(--ease);
}
.product-gallery__thumb img { width: 72px; height: 72px; object-fit: contain; background: var(--bone); }
.product-gallery__thumb.is-active,
.product-gallery__thumb:hover { opacity: 1; border-color: var(--gold-700); }

.product-gallery__main { position: relative; flex: 1; overflow: hidden; border-radius: var(--radius); background: radial-gradient(circle at 50% 45%, rgba(212,175,55,.08), transparent 70%), var(--bone); }
.product-gallery__track { display: flex; transition: transform .4s var(--ease); }
.product-gallery__slide { flex: 0 0 100%; aspect-ratio: 1/1; display: grid; place-items: center; }
.product-gallery__slide img { width: 80%; height: 80%; object-fit: contain; }

.gallery-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.85);
  border-radius: 50%;
  color: var(--ink);
}
.gallery-nav--prev { left: 10px; }
.gallery-nav--next { right: 10px; }
.product-gallery__dots { position: absolute; bottom: 14px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; }
.product-gallery__dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(10,10,11,.25); }
.product-gallery__dot.is-active { background: var(--gold-700); width: 18px; border-radius: 3px; transition: all .2s var(--ease); }
.product-gallery__zoom-hint { position: absolute; top: 14px; right: 14px; background: rgba(255,255,255,.85); color: var(--ink); }

.delivery-estimate { padding: 16px; background: var(--bone); border-radius: var(--radius); margin-bottom: 24px; }
.delivery-estimate label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.delivery-estimate .icon { width: 16px; height: 16px; }
.delivery-estimate select { width: 100%; min-height: 42px; padding: 0 12px; border: 1px solid var(--grey-200); border-radius: var(--radius); background: var(--white); font-size: 13px; }

.trust-strip--compact { display: flex; flex-wrap: wrap; gap: 20px; font-size: 12px; color: var(--grey-600); }
.trust-strip--compact > div { display: flex; align-items: center; gap: 8px; }
.trust-strip--compact .icon { width: 18px; height: 18px; color: var(--gold-700); }

/* ---- Tabs ---- */
.product-tabs__list { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--grey-200); margin-bottom: 32px; }
.product-tabs__tab {
  padding: 14px 18px;
  font-size: 13px;
  letter-spacing: .03em;
  white-space: nowrap;
  color: var(--grey-400);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.product-tabs__tab.is-active { color: var(--ink); border-bottom-color: var(--gold-700); }
.product-tabs__panel { max-width: 760px; line-height: 1.8; }
.product-tabs__panel[hidden] { display: none; }

.spec-table { width: 100%; border-collapse: collapse; }
.spec-table tr { border-bottom: 1px solid var(--grey-200); }
.spec-table th, .spec-table td { text-align: left; padding: 12px 16px 12px 0; font-size: 14px; }
.spec-table th { color: var(--grey-600); font-weight: 500; width: 40%; }

/* ==========================================================================
   CMS page body (pages/page.php) - the global reset zeroes p/ul/ol margins
   and strips list-style, so raw admin-authored HTML needs its own prose
   spacing here rather than relying on browser defaults.
   ========================================================================== */

.cms-body { font-size: 15px; line-height: 1.7; color: var(--grey-600); }
.cms-body h2 { font-size: clamp(22px, 2.6vw, 28px); margin-top: 1.4em; }
.cms-body h3 { font-size: 19px; margin-top: 1.2em; }
.cms-body p { margin: 0 0 1em; }
.cms-body ul, .cms-body ol { margin: 0 0 1em; padding-left: 1.4em; list-style: disc; }
.cms-body ol { list-style: decimal; }
.cms-body li { margin-bottom: .4em; }
.cms-body a { color: var(--gold-700); text-decoration: underline; }
.cms-body strong { color: var(--ink); }

.review { padding-block: 20px; border-bottom: 1px solid var(--grey-200); }
.review:first-child { padding-top: 0; }

/* ---- Sticky mobile add-to-cart bar ---- */
.sticky-add-to-cart {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  background: var(--white);
  border-top: 1px solid var(--grey-200);
  box-shadow: 0 -8px 24px rgba(0,0,0,.08);
}
.sticky-add-to-cart .btn { flex: 1; max-width: 220px; }

/* ---- Lightbox (gallery zoom) ---- */
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,.92);
  display: grid; place-items: center;
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.lightbox.is-open { opacity: 1; }
.lightbox img { max-width: 92vw; max-height: 88vh; object-fit: contain; }
.lightbox__close { position: absolute; top: 20px; right: 20px; color: var(--white); background: rgba(255,255,255,.1); }

@media (min-width: 768px) {
  .product-detail { grid-template-columns: 1.1fr 1fr; gap: var(--gutter); }
}

/* ==========================================================================
   Homepage: hero slider
   ========================================================================== */

.hero-slider { position: relative; height: clamp(480px, 80vh, 820px); overflow: hidden; background: var(--ink); }
.hero-slider__slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.1s var(--ease);
  pointer-events: none;
}
.hero-slider__slide.is-active { opacity: 1; pointer-events: auto; }
.hero-slider__slide img {
  width: 100%; height: 100%; object-fit: cover;
  animation: ken-burns 9s var(--ease) forwards;
}
@keyframes ken-burns {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slider__slide img { animation: none; }
}
.hero-slider__overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,10,11,.75) 0%, rgba(10,10,11,.25) 45%, rgba(10,10,11,.55) 100%); }
.hero-slider__content {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding-inline: var(--gutter);
  color: var(--bone);
  max-width: 720px;
  margin-inline: auto;
}
.hero-slider__content h1 { color: var(--white); }
.hero-slider__dots { position: absolute; bottom: 28px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; z-index: 2; }
.hero-slider__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.4); }
.hero-slider__dot.is-active { background: var(--gold-500); width: 24px; border-radius: 4px; transition: all .3s var(--ease); }

/* ---- Trust strip ---- */
.trust-strip-section { padding-block: 28px; }
.trust-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(20px, 4vw, 56px); text-align: center; }
.trust-strip > div { display: flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--grey-400); }
.trust-strip .icon { width: 20px; height: 20px; color: var(--gold-500); }

/* ---- Brand strip ---- */
.brand-strip-section { padding-block: 32px; border-top: 1px solid var(--ink-line); border-bottom: 1px solid var(--ink-line); }
.brand-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(20px, 4vw, 48px); }
.brand-strip__item {
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--grey-400);
  letter-spacing: .02em;
  transition: color var(--dur) var(--ease);
}
.brand-strip__item:hover { color: var(--gold-300); }

/* ---- Explore Collections tile grid ---- */
.collection-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.collection-tile {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  border-radius: var(--radius);
  display: block;
}
.collection-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.collection-tile:hover img { transform: scale(1.08); }
.collection-tile__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(10,10,11,.8) 0%, rgba(10,10,11,.05) 55%);
  transition: background var(--dur) var(--ease);
}
.collection-tile:hover .collection-tile__overlay { background: linear-gradient(0deg, rgba(107,78,8,.75) 0%, rgba(10,10,11,.1) 60%); }
.collection-tile__label {
  position: absolute; left: 18px; bottom: 18px;
  color: var(--white);
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: .01em;
}

/* ---- Editorial split banner ---- */
.editorial-banner { display: grid; grid-template-columns: 1fr; }
.editorial-banner__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }
.editorial-banner__content { padding: clamp(40px, 6vw, 80px) var(--gutter); display: flex; flex-direction: column; justify-content: center; }
.editorial-banner__content .lede { margin-bottom: 28px; }

/* ---- Bestseller tabs ---- */
.bestseller-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 40px; }
.bestseller-tabs__tab {
  padding: 10px 22px;
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--grey-400);
  transition: all var(--dur) var(--ease);
}
.bestseller-tabs__tab.is-active,
.bestseller-tabs__tab:hover { border-color: var(--gold-500); color: var(--gold-300); }
#bestsellerGrid { transition: opacity .25s var(--ease); }
#bestsellerGrid.is-loading { opacity: .4; }

/* ---- Testimonials ---- */
.testimonial-slider { position: relative; max-width: 720px; margin-inline: auto; text-align: center; min-height: 220px; }
.testimonial { position: absolute; inset: 0; opacity: 0; transition: opacity .5s var(--ease); }
.testimonial.is-active { position: relative; opacity: 1; }
.testimonial .icon { width: 28px; height: 28px; color: var(--gold-500); margin-inline: auto 16px; }
.testimonial__quote { font-family: var(--font-display); font-size: clamp(19px, 2.4vw, 26px); line-height: 1.5; color: var(--bone); margin-bottom: 20px; }
.testimonial__author { font-size: 13px; color: var(--grey-400); letter-spacing: .04em; text-transform: uppercase; }
.testimonial-slider__dots { display: flex; justify-content: center; gap: 8px; margin-top: 32px; }
.testimonial-slider__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-line); }
.testimonial-slider__dot.is-active { background: var(--gold-500); }

/* ---- Journal cards ---- */
.journal-card { display: block; }
.journal-card img { width: 100%; aspect-ratio: 5/3.2; object-fit: cover; border-radius: var(--radius); margin-bottom: 4px; }
.journal-card h3 { margin: 6px 0 10px; font-size: 21px; }
.journal-card .lede { font-size: 14px; }

@media (min-width: 768px) {
  .collection-grid { grid-template-columns: repeat(4, 1fr); }
  .editorial-banner { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .hero-slider__content { max-width: 820px; }
}

/* ==========================================================================
   Cart page
   ========================================================================== */

.cart-page { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; }
.cart-page__items { display: flex; flex-direction: column; }
.cart-page__row {
  display: grid;
  grid-template-columns: 90px 1fr auto auto auto;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--grey-200);
}
.cart-page__media img { width: 90px; height: 90px; object-fit: contain; background: var(--bone); border-radius: var(--radius); }
.cart-page__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cart-page__name { font-family: var(--font-display); font-size: 17px; }
.cart-page__price { font-size: 13px; color: var(--gold-700); }
.cart-page__line-total { font-weight: 600; white-space: nowrap; }

.cart-page__summary,
.checkout-summary {
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  padding: 28px;
}

.coupon-form { display: flex; gap: 8px; }
.coupon-form input {
  flex: 1;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  font-size: 13px;
}

.cart-summary-line { display: flex; justify-content: space-between; align-items: center; padding-block: 8px; font-size: 14px; }
.cart-summary-line--total { font-size: 18px; }
.cart-summary-line--total strong { color: var(--gold-700); }

@media (min-width: 900px) {
  .cart-page { grid-template-columns: 1fr 340px; }
}

/* ==========================================================================
   Checkout
   ========================================================================== */

.checkout-layout { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; }

.checkout-step { border: 1px solid var(--grey-200); border-radius: var(--radius); margin-bottom: 16px; overflow: hidden; }
.checkout-step__header {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 20px 24px;
  text-align: left;
  background: var(--white);
}
.checkout-step__number {
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--bone);
  color: var(--grey-600);
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
}
.checkout-step.is-open .checkout-step__number { background: var(--gold-grad); color: var(--ink); }
.checkout-step__title { font-family: var(--font-display); font-size: 18px; }
.checkout-step__body { display: none; padding: 0 24px 28px; }
.checkout-step.is-open .checkout-step__body { display: block; }

.field-grid { display: grid; grid-template-columns: 1fr; gap: 0 20px; }
.field-grid .field { margin-bottom: 18px; }

.payment-methods { display: flex; flex-direction: column; gap: 12px; }
.payment-method {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  padding: 16px 18px;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  cursor: pointer;
}
.payment-method:has(input:checked) { border-color: var(--gold-700); background: rgba(212, 175, 55, .05); }
.payment-method input { grid-row: 1 / 3; accent-color: var(--gold-700); width: 18px; height: 18px; margin-top: 2px; }
.payment-method__label { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.payment-method__label .icon { width: 18px; height: 18px; color: var(--gold-700); }
.payment-method__desc { font-size: 12px; color: var(--grey-400); grid-column: 2; }

.shipping-method__option {
  display: flex;
  justify-content: space-between;
  padding: 16px 18px;
  border: 1px solid var(--gold-700);
  border-radius: var(--radius);
  background: rgba(212, 175, 55, .05);
  font-size: 14px;
  margin-bottom: 20px;
}

.checkout-summary__items { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.checkout-summary__item { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.checkout-summary__item-media { position: relative; flex-shrink: 0; }
.checkout-summary__item-media img { width: 56px; height: 56px; object-fit: contain; background: var(--bone); border-radius: var(--radius); }
.checkout-summary__item-qty {
  position: absolute; top: -6px; right: -6px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--white);
  font-size: 10px;
  display: grid; place-items: center;
}
.checkout-summary__item-name { flex: 1; }

@media (min-width: 900px) {
  .checkout-layout { grid-template-columns: 1fr 380px; }
  .field-grid { grid-template-columns: 1fr 1fr; }
  .checkout-summary { position: sticky; top: calc(var(--header-h) + 24px); }
}

/* ==========================================================================
   Order tracking timeline
   ========================================================================== */

.order-timeline { display: flex; flex-wrap: wrap; gap: 0; }
.order-timeline__step {
  flex: 1;
  min-width: 90px;
  text-align: center;
  position: relative;
  padding-top: 24px;
  color: var(--grey-400);
}
.order-timeline__step::before {
  content: "";
  position: absolute; top: 8px; left: -50%; right: 50%;
  height: 2px;
  background: var(--grey-200);
}
.order-timeline__step:first-child::before { display: none; }
.order-timeline__dot {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--grey-200);
  border: 2px solid var(--white);
}
.order-timeline__step.is-done { color: var(--ink); }
.order-timeline__step.is-done .order-timeline__dot { background: var(--gold-700); }
.order-timeline__step.is-done::before { background: var(--gold-700); }
.order-timeline__step.is-current .order-timeline__dot { box-shadow: 0 0 0 4px rgba(212, 175, 55, .25); }
.order-timeline__label { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; display: block; margin-top: 8px; }

/* ==========================================================================
   Auth pages (login / register / forgot / reset password)
   ========================================================================== */

.auth-page { padding-block: 56px 80px; }
.auth-page__inner { display: flex; justify-content: center; }
.auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  padding: 36px 28px;
}
@media (min-width: 640px) {
  .auth-card { padding: 44px 40px; }
}

/* ==========================================================================
   Account area (dashboard, orders, addresses, profile, ...)
   ========================================================================== */

.account-layout { padding-block: 40px 80px; }
.account-layout__inner { display: flex; flex-direction: column; gap: 32px; }
.account-content { min-width: 0; }
.account-form { max-width: 520px; }

.account-nav {
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  padding: 24px;
  align-self: start;
}
.account-nav__greeting { padding-bottom: 18px; margin-bottom: 10px; border-bottom: 1px solid var(--grey-200); }
.account-nav__list { display: flex; flex-direction: column; gap: 2px; }
.account-nav__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 10px;
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--grey-600);
  border-radius: var(--radius);
  transition: background .15s ease, color .15s ease;
}
.account-nav__link .icon { width: 16px; height: 16px; flex-shrink: 0; }
.account-nav__link:hover { background: var(--bone); color: var(--ink); }
.account-nav__link.is-active { background: var(--ink); color: var(--gold-300); }
.account-nav__link--logout { color: var(--ruby); margin-top: 8px; border-top: 1px solid var(--grey-200); padding-top: 14px; border-radius: 0; }
.account-nav__link--logout:hover { background: var(--ruby-100); color: var(--ruby); }

.account-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 8px; }
.account-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  padding: 22px 12px;
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  color: var(--ink);
  transition: border-color .15s ease;
}
.account-stat:hover { border-color: var(--gold-500); }
.account-stat .icon { width: 22px; height: 22px; color: var(--gold-700); }
.account-stat strong { font-size: 22px; font-family: var(--font-display); }
.account-stat span { font-size: 12px; color: var(--grey-600); }

.order-list { display: flex; flex-direction: column; gap: 10px; }
.order-list__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  color: var(--ink);
}
.order-list__row:hover { border-color: var(--gold-500); }
.order-list__row > div { display: flex; flex-direction: column; gap: 2px; }

.account-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.account-table th, .account-table td { text-align: left; padding: 12px 14px; font-size: 13px; border-bottom: 1px solid var(--grey-200); }
.account-table th { color: var(--grey-600); font-weight: 500; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }

.order-status {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  border: 1px solid currentColor;
}
.order-status--pending { color: var(--gold-700); }
.order-status--progress { color: #3B6FA8; }
.order-status--success { color: var(--green); }
.order-status--danger { color: var(--ruby); }

.account-two-col { display: grid; grid-template-columns: 1fr; gap: 24px; }

.address-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 20px; }
.address-card { background: var(--white); border: 1px solid var(--grey-200); border-radius: var(--radius); padding: 18px; }
.address-form {
  max-width: 640px;
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 28px;
}

.compare-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.compare-table th, .compare-table td { text-align: center; padding: 14px; border-bottom: 1px solid var(--grey-200); font-size: 13px; }
.compare-table tbody th { text-align: left; color: var(--grey-600); font-size: 12px; }
.compare-table thead th { vertical-align: top; }
.compare-table__product { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.compare-table__product img { width: 100px; height: 100px; object-fit: contain; background: var(--bone); border-radius: var(--radius); }
.compare-table__product a { font-size: 13px; color: var(--ink); }
.compare-table__product .icon-btn { align-self: flex-end; }

@media (min-width: 900px) {
  .account-layout__inner { flex-direction: row; align-items: flex-start; }
  .account-nav { width: 260px; flex-shrink: 0; position: sticky; top: calc(var(--header-h) + 24px); }
  .account-content { flex: 1; }
  .account-two-col { grid-template-columns: 1fr 1fr; }
  .address-grid { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   Print stylesheet (order invoice) - "download PDF" is the browser's own
   print-to-PDF, triggered from account/order-detail.php's Print button.
   ========================================================================== */

@media print {
  .announcement-bar, .site-header, .site-footer, .whatsapp-float,
  .account-nav, .no-print { display: none !important; }
  .account-layout__inner { display: block; }
  .invoice-print-area { padding: 0; }
  .invoice-header { display: flex !important; align-items: center; gap: 16px; margin-bottom: 24px; }
  .invoice-header img { width: 90px; height: auto; }
  body { background: var(--white); color: var(--ink); }
  .account-table, .compare-table { min-width: 0; }
}