/* ============================================================
   AXONIC — White & Black Theme
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=DM+Sans:wght@300;400;500;600&display=swap');

/* 1 · CSS Variables ---------------------------------------- */
:root {
  --page-bg:      #ffffff;
  --panel:        #ffffff;
  --panel-strong: #ffffff;
  --ink:          #0a0a0a;
  --muted:        #6b6b6b;
  --line:         #e8e8e8;
  --gold:         #1a1a1a;
  --gold-strong:  #0a0a0a;
  --forest:       #0a0a0a;
  --forest-soft:  #1a1a1a;
  --shadow:       0 2px 24px rgba(0,0,0,0.06);
}

body {
  background: #ffffff !important;
  color: #0a0a0a !important;
}

/* 2 · Typography tweaks ------------------------------------ */
.brandmark-inverse small,
.brandmark-inverse span {
  color: #ffffff !important;
}

.eyebrow { color: #888888 !important; }

/* 3 · Header ----------------------------------------------- */
.site-header {
  background: rgba(255,255,255,0.94) !important;
  border-bottom-color: #e8e8e8 !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

/* cart icon with badge overlay */
.cart-link {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
}
.cart-link span {
  position: absolute !important;
  top: -4px !important;
  right: -6px !important;
  min-width: 17px !important;
  height: 17px !important;
  padding: 0 4px !important;
  border-radius: 999px !important;
  background: #0a0a0a !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 17px !important;
  text-align: center !important;
  pointer-events: none !important;
}

.menu-button {
  background: #ffffff !important;
  border-color: #e8e8e8 !important;
  color: #0a0a0a !important;
}

.header-user-pill {
  border-color: #e8e8e8 !important;
  color: #6b6b6b !important;
}

/* mobile nav panel — dark drawer (overridden in mobile.css) */

/* 4 · Hero -------------------------------------------------- */
.hero-overlay {
  background:
    linear-gradient(90deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.2) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.6) 100%) !important;
}

.hero-content { color: #ffffff !important; }

.hero-content .eyebrow,
.statement-panel-dark .eyebrow { color: rgba(255,255,255,0.58) !important; }

.hero-kicker     { color: rgba(255,255,255,0.7) !important; }
.hero-description{ color: rgba(255,255,255,0.82) !important; }

.hero-dots button        { background: rgba(255,255,255,0.38) !important; }
.hero-dots button.active { background: #ffffff !important; }

/* 5 · Primary button --------------------------------------- */
.primary-button {
  background: #0a0a0a !important;
  color:      #ffffff !important;
  border-color: #0a0a0a !important;
}
.primary-button:hover {
  background: #2c2c2c !important;
  border-color: #2c2c2c !important;
}

/* inline coupon apply button */
.inline-button {
  background: #0a0a0a !important;
  color: #ffffff !important;
  border-color: #0a0a0a !important;
}
.inline-button:hover {
  background: #2c2c2c !important;
  border-color: #2c2c2c !important;
}

/* ghost button stays white text when on dark bg hero */
.ghost-button       { border-color: rgba(255,255,255,0.42) !important; color: #ffffff !important; }
.ghost-button:hover { border-color: #ffffff !important; }

/* product card add-to-bag button */
.product-card-button {
  background: #ffffff !important;
  color: #0a0a0a !important;
  border-color: #e0e0e0 !important;
}
.product-card-button:hover {
  background: #0a0a0a !important;
  color: #ffffff !important;
  border-color: #0a0a0a !important;
}

.text-button { color: #0a0a0a !important; }

/* filter chips */
.filter-chip {
  background: #ffffff !important;
  border-color: #e0e0e0 !important;
  color: #0a0a0a !important;
}
.filter-chip.active {
  background: #0a0a0a !important;
  border-color: #0a0a0a !important;
  color: #ffffff !important;
}

/* choice row (size / color selectors) */
.choice-row button {
  background: #ffffff !important;
  border-color: #e0e0e0 !important;
  color: #0a0a0a !important;
}
.choice-row button.active {
  background: #0a0a0a !important;
  border-color: #0a0a0a !important;
  color: #ffffff !important;
}

/* auth toggle */
.auth-toggle button {
  background: transparent !important;
  border-color: #e0e0e0 !important;
  color: #0a0a0a !important;
}
.auth-toggle button.active {
  background: #0a0a0a !important;
  border-color: #0a0a0a !important;
  color: #ffffff !important;
}

/* filter option pills */
.filter-option-list button {
  background: #ffffff !important;
  border-color: #e0e0e0 !important;
}
.filter-option-list button.active {
  background: #0a0a0a !important;
  border-color: #0a0a0a !important;
  color: #ffffff !important;
}

.filter-toggle-button {
  background: #ffffff !important;
  border-color: #e0e0e0 !important;
  color: #0a0a0a !important;
}

/* quantity buttons */
.quantity-selector button {
  background: #ffffff !important;
  border-color: #e0e0e0 !important;
  color: #0a0a0a !important;
}

/* 6 · Product card ----------------------------------------- */
.product-badge {
  background: #0a0a0a !important;
  color: #ffffff !important;
}

.product-price-row span,
.detail-price-row span { color: #a0a0a0 !important; }

/* 7 · Category cards --------------------------------------- */
.category-card-copy {
  background: rgba(0,0,0,0.65) !important;
}
.category-card-copy p { color: rgba(255,255,255,0.7) !important; }

/* 8 · Value & icon cards ----------------------------------- */
.value-card span:first-child {
  background: #f0f0f0 !important;
  color: #0a0a0a !important;
}

/* 9 · Warm cream background overrides --------------------- */
.auth-card-meta,
.product-specs div,
.product-care-panel,
.dashboard-quick-links a {
  background: #f6f6f6 !important;
  border-color: #e8e8e8 !important;
}

.active-filter-strip span {
  background: #f4f4f4 !important;
  border-color: #e0e0e0 !important;
  color: #0a0a0a !important;
}

/* shop page panels */
.shop-hero-panel,
.shop-filters-shell {
  background: #ffffff !important;
  border-color: #e8e8e8 !important;
}

/* shop count banner (count badge inside) */
.shop-count-banner > div {
  background: #0a0a0a !important;
}
.shop-count-label { color: rgba(255,255,255,0.5) !important; }

/* 10 · Statement panel dark -------------------------------- */
.statement-panel-dark {
  background: #000000 !important;
  color: #ffffff !important;
}
.statement-panel-dark .eyebrow { color: rgba(255,255,255,0.5) !important; }
.statement-panel-dark p { color: rgba(255,255,255,0.7) !important; }

/* 11 · Thumbnail active ------------------------------------ */
.thumbnail-row button.active { border-color: #0a0a0a !important; }

/* 12 · Auth page ------------------------------------------- */
.auth-layout {
  background: radial-gradient(circle at 0 0, rgba(0,0,0,0.04), transparent 42%),
              linear-gradient(#fffff5, #f9f9f9) !important;
}

.auth-copy-panel {
  background: #000000 !important;
  color: #ffffff !important;
}
.auth-copy-panel:after {
  background: radial-gradient(circle, rgba(255,255,255,0.06), transparent 70%) !important;
}
.auth-copy-panel .lead-copy,
.auth-copy-panel p,
.auth-copy-panel li { color: rgba(255,255,255,0.62) !important; }

.auth-feature-list span {
  background: rgba(255,255,255,0.1) !important;
  color: #ffffff !important;
}

.auth-link-row a         { color: #0a0a0a !important; }
.auth-status-banner      { background: #f5f5f5 !important; border-color: #e8e8e8 !important; }
.auth-status-banner strong { color: #0a0a0a !important; }

.admin-credential-box {
  background: #f5f5f5 !important;
  border-color: #e8e8e8 !important;
}
.admin-credential-box code { color: #0a0a0a !important; }

.demo-panel { background: #f5f5f5 !important; }

/* 13 · User Dashboard -------------------------------------- */
.dashboard-sidebar {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

.dashboard-sidebar-brand .eyebrow,
.dashboard-sidebar-card .eyebrow   { color: rgba(255,255,255,0.45) !important; }
.dashboard-sidebar-brand p,
.dashboard-sidebar-card p           { color: rgba(255,255,255,0.58) !important; }

.dashboard-sidebar-nav button {
  color: #ffffff !important;
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.08) !important;
}
.dashboard-sidebar-nav button.active {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #ffffff !important;
}

.dashboard-sidebar-card {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

.dashboard-panel-hero {
  background: #ffffff !important;
}
.dashboard-dark-button {
  background: #ffffff !important;
  border-color: #e8e8e8 !important;
  color: #0a0a0a !important;
}

/* 14 · Forms ----------------------------------------------- */
.newsletter-form input {
  border-color: rgba(255,255,255,0.16) !important;
  background: rgba(255,255,255,0.07) !important;
  color: #ffffff !important;
}
.newsletter-form input::placeholder { color: rgba(255,255,255,0.38) !important; }

/* 15 · Cart & checkout ------------------------------------- */
.cart-item { border-color: #e8e8e8 !important; }

.cart-summary,
.checkout-summary {
  background: #ffffff !important;
  border-color: #e8e8e8 !important;
}

.checkout-total-row,
.checkout-summary-item { border-top-color: #e8e8e8 !important; }

.cart-checkout-link { justify-content: center; }

/* 16 · Footer ---------------------------------------------- */
.site-footer {
  background: #000000 !important;
  color: #ffffff !important;
}

.footer-title { color: rgba(255,255,255,0.42) !important; }

.footer-copy,
.footer-contact-list li,
.footer-newsletter p,
.footer-grid p,
.footer-grid li { color: rgba(255,255,255,0.5) !important; }

.footer-brand   { color: #ffffff !important; }
.footer-legal   { color: rgba(255,255,255,0.5) !important; border-top-color: rgba(255,255,255,0.08) !important; }
.footer-legal a { color: rgba(255,255,255,0.5) !important; }

.footer-grid    { border-top-color: rgba(255,255,255,0.08) !important; }
.footer-newsletter { border-bottom-color: rgba(255,255,255,0.08) !important; }

/* 17 · Alt surface ----------------------------------------- */
.alt-surface {
  background: #f6f6f6 !important;
  margin-top: 0;
}

/* 18 · Misc utility ---------------------------------------- */
.danger-text { color: #cc0000 !important; }
.form-success { color: #1a7a4a !important; }
.form-error   { color: #cc0000 !important; }

.product-stock-copy { color: #888888 !important; }

/* checkout/order timeline line */
.checkout-summary-item,
.checkout-total-row,
.order-timeline-entry { border-top-color: #e8e8e8 !important; }

/* faq */
.faq-item { border-color: #e8e8e8 !important; }

/* store panels */
.store-panel,
.empty-panel { border-color: #e8e8e8 !important; }

/* 19 · Coupon UI (already in white palette) ---------------- */
.coupon-store-box {
  background: #f8f8f8 !important;
  border-color: #e8e8e8 !important;
}
.coupon-store-input-row input {
  background: #ffffff !important;
  border-color: #e0e0e0 !important;
  color: #0a0a0a !important;
}
.coupon-store-field label { color: #0a0a0a !important; }
.coupon-store-active {
  background: rgba(0,0,0,0.04) !important;
  border-color: #e0e0e0 !important;
}
.coupon-store-active strong { color: #0a0a0a !important; }
.coupon-store-active span   { color: #2a7a50 !important; }
.coupon-summary-row strong  { color: #1a7a4a !important; }

/* ============================================================
   20 · HIDE NEWSLETTER SECTION
   ============================================================ */
.newsletter-panel { display: none !important; }
.footer-newsletter { display: none !important; }

/* ============================================================
   21 · PREMIUM FONTS
   ============================================================ */

/* Headings → Playfair Display */
h1, h2, h3,
.brandmark span,
.brandmark div span,
.shop-meta-count strong,
.stat-card strong,
.dashboard-stat-card strong,
.product-price-row strong,
.detail-price-row strong,
.cart-item strong,
.cart-summary strong,
.auth-status-banner strong,
.admin-credential-box strong,
.dashboard-panel strong {
  font-family: 'Playfair Display', Georgia, serif !important;
}

/* Body / UI → DM Sans */
body,
p, li, label, input, textarea, select, button,
.eyebrow, .hero-kicker, .product-category,
.product-card-link, .filter-chip, .choice-row button,
.auth-toggle button, .text-link, .site-nav a,
.header-actions a, .cart-checkout-link,
.primary-button, .ghost-button, .text-button,
.filter-option-list button, .filter-toggle-button,
.filter-result-copy, .footer-title, .footer-list a,
.footer-legal, .shop-count-label,
.breadcrumb, .selector-group p,
.product-specs span {
  font-family: 'DM Sans', 'Inter', system-ui, sans-serif !important;
}

/* Brandmark: keep Playfair for logo name */
.brandmark { font-family: 'Playfair Display', Georgia, serif !important; }

/* ============================================================
   22 · HERO — simplified
   ============================================================ */
.hero-banner,
.hero-content        { min-height: 64vh !important; }
.hero-content        { padding: 72px 0 28px !important; justify-content: center !important; }
.hero-metrics        { display: none !important; }
.hero-storyline      { display: none !important; }
.hero-dots           { display: none !important; }
.hero-kicker         { display: none !important; }
.hero-content .eyebrow { font-size: .68rem !important; margin-bottom: 12px !important; }
.hero-content h1     { font-size: clamp(2.4rem, 5vw, 5rem) !important; line-height: 1 !important; }
.hero-description    { font-size: .96rem !important; max-width: 420px !important; margin-top: 14px !important; color: rgba(255,255,255,.78) !important; }
.hero-actions        { margin-top: 24px !important; gap: 10px !important; }
.hero-actions .ghost-button { display: none !important; }

/* ============================================================
   23 · SHOP — professional sidebar layout
   ============================================================ */

/* ── global shop resets ─────────────────────────────────── */
.shop-hero-panel {
  display: block !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid #e8e8e8 !important;
  border-radius: 0 !important;
  padding: 28px 0 20px !important;
  margin-bottom: 0 !important;
  box-shadow: none !important;
}
.shop-hero-panel h1 {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: clamp(1.8rem, 3vw, 2.8rem) !important;
  letter-spacing: -.03em !important;
  line-height: 1.05 !important;
}
.shop-hero-summary { gap: 6px !important; }
.shop-hero-summary span {
  font-size: .78rem !important;
  letter-spacing: .1em !important;
  color: #888 !important;
  background: #f4f4f4 !important;
  border: 1px solid #e8e8e8 !important;
  border-radius: 999px !important;
  padding: 5px 12px !important;
}

/* hide the old banner / count block inside hero */
.shop-count-banner { display: none !important; }

/* ── shop filters shell (sidebar) ──────────────────────── */
.shop-filters-shell {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
  box-shadow: none !important;
}

/* sidebar heading */
.shop-sidebar-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-bottom: 14px !important;
  margin-bottom: 20px !important;
  border-bottom: 1.5px solid #0a0a0a !important;
}
.shop-sidebar-header > *:first-child {
  font-family: 'DM Sans', sans-serif !important;
  font-size: .7rem !important;
  font-weight: 700 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: #0a0a0a !important;
}
.filter-toggle-button {
  font-size: .75rem !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  border: 1px solid #e0e0e0 !important;
  background: #fff !important;
  color: #666 !important;
  cursor: pointer !important;
  transition: all .15s !important;
}
.filter-toggle-button:hover {
  border-color: #0a0a0a !important;
  color: #0a0a0a !important;
}

/* filter search row */
.filter-search-row {
  margin-bottom: 20px !important;
}
.filter-search-row input {
  width: 100% !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  font-size: .85rem !important;
  background: #fafafa !important;
  color: #0a0a0a !important;
  outline: none !important;
}
.filter-search-row input:focus { border-color: #0a0a0a !important; background: #fff !important; }

/* ── filter panel groups ────────────────────────────────── */
.filter-panel {
  gap: 0 !important;
  border: none !important;
  padding: 0 !important;
}
.filter-panel.is-open { display: grid !important; }

.filter-group {
  padding: 16px 0 !important;
  border-bottom: 1px solid #f0f0f0 !important;
  gap: 12px !important;
}
.filter-group:last-child { border-bottom: none !important; }

.filter-group > span {
  font-size: .7rem !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: #0a0a0a !important;
}

.filter-option-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}
.filter-option-list button {
  font-size: .78rem !important;
  font-weight: 500 !important;
  padding: 7px 13px !important;
  border-radius: 6px !important;
  border: 1px solid #e0e0e0 !important;
  background: #fafafa !important;
  color: #444 !important;
  cursor: pointer !important;
  transition: all .15s !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.filter-option-list button:hover { border-color: #0a0a0a !important; color: #0a0a0a !important; background: #fff !important; }
.filter-option-list button.active { background: #0a0a0a !important; border-color: #0a0a0a !important; color: #fff !important; }

/* filter range / input fields */
.filter-field { gap: 8px !important; }
.filter-field > span {
  font-size: .7rem !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: #0a0a0a !important;
}
.filter-field > input,
.filter-field select {
  width: 100% !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 10px !important;
  padding: 9px 12px !important;
  font-size: .84rem !important;
  background: #fafafa !important;
  color: #0a0a0a !important;
  outline: none !important;
}
.filter-field > input:focus,
.filter-field select:focus { border-color: #0a0a0a !important; background: #fff !important; }

/* ── filter chips bar (category) ───────────────────────── */
.filter-bar {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 16px 0 !important;
  border-bottom: 1px solid #e8e8e8 !important;
  margin-bottom: 20px !important;
}
.filter-chip {
  font-size: .75rem !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  padding: 8px 16px !important;
  border-radius: 6px !important;
  border: 1px solid #e0e0e0 !important;
  background: #fafafa !important;
  color: #555 !important;
  cursor: pointer !important;
  transition: all .15s !important;
}
.filter-chip:hover     { border-color: #0a0a0a !important; color: #0a0a0a !important; background: #fff !important; }
.filter-chip.active    { background: #0a0a0a !important; border-color: #0a0a0a !important; color: #fff !important; }

/* ── shop meta bar (count + sort) ──────────────────────── */
.shop-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 0 16px !important;
  border-bottom: 1px solid #e8e8e8 !important;
  margin-bottom: 24px !important;
}
.shop-meta-count strong {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 1.5rem !important;
  line-height: 1.1 !important;
  color: #0a0a0a !important;
}
.shop-meta-count span { font-size: .72rem !important; color: #888 !important; letter-spacing: .06em !important; text-transform: uppercase !important; }

/* sort select styling */
.shop-meta select {
  appearance: none !important;
  -webkit-appearance: none !important;
  padding: 8px 34px 8px 14px !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
  font-size: .82rem !important;
  font-weight: 500 !important;
  color: #0a0a0a !important;
  background: #fafafa url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center !important;
  background-size: 12px !important;
  cursor: pointer !important;
  outline: none !important;
}
.shop-meta select:focus { border-color: #0a0a0a !important; background-color: #fff !important; }

/* ── active filter strip ────────────────────────────────── */
.active-filter-strip { gap: 8px !important; margin-bottom: 18px !important; }
.active-filter-strip span {
  font-size: .74rem !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  background: #0a0a0a !important;
  color: #fff !important;
  border: 1px solid #0a0a0a !important;
  cursor: pointer !important;
}

/* ── product grid ───────────────────────────────────────── */
.shop-product-grid {
  gap: 32px 20px !important;
}

/* ── DESKTOP — sidebar grid layout ─────────────────────── */
@media (min-width: 900px) {
  .shop-page {
    display: grid !important;
    grid-template-columns: 232px minmax(0, 1fr) !important;
    column-gap: 48px !important;
    align-items: start !important;
    row-gap: 0 !important;
  }

  /* everything defaults to right column */
  .shop-page > * { grid-column: 2 !important; }

  /* hero: full width, row 1 — use higher specificity to override > * */
  .shop-page > .shop-hero-panel {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    margin-bottom: 32px !important;
  }

  /* sidebar: column 1, span all content rows, sticky — higher specificity */
  .shop-page > .shop-filters-shell {
    grid-column: 1 !important;
    grid-row: 2 / span 20 !important;
    position: sticky !important;
    top: 96px !important;
    max-height: calc(100vh - 112px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin !important;
    scrollbar-color: #e0e0e0 transparent !important;
    padding-right: 20px !important;
    border-right: 1px solid #e8e8e8 !important;
  }
  .shop-filters-shell::-webkit-scrollbar { width: 4px; }
  .shop-filters-shell::-webkit-scrollbar-track { background: transparent; }
  .shop-filters-shell::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }

  /* always show filter panel in sidebar */
  .shop-filters-shell .filter-panel {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  /* hide toggle (filter always visible in sidebar) */
  .filter-toggle-button { display: none !important; }

  /* filter chips go in right column naturally (auto-placed) */
  .shop-page > .filter-bar { grid-column: 2 !important; }

  /* product grid: 3 cols */
  .shop-product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
}

/* ── MOBILE ─────────────────────────────────────────────── */
@media (max-width: 899px) {
  .shop-filters-shell {
    border-top: 1px solid #e8e8e8 !important;
    border-bottom: 1px solid #e8e8e8 !important;
    padding: 16px 0 !important;
    margin-bottom: 20px !important;
  }
  .filter-panel { gap: 16px !important; }
  .shop-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px 12px !important;
  }
}

/* ============================================================
   24 · PRODUCT CARDS — dark border, compact, professional
   ============================================================ */

.product-card {
  border: 1.5px solid #0a0a0a !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  overflow: hidden !important;
  transition: box-shadow 0.18s, transform 0.18s !important;
  box-shadow: none !important;
}
.product-card:hover {
  box-shadow: 4px 4px 0 #0a0a0a !important;
  transform: translate(-2px, -2px) !important;
}

/* image area — tighter aspect ratio */
.product-image-link {
  aspect-ratio: 3/4 !important;
}

/* compact copy block */
.product-copy {
  padding: 10px 12px 12px !important;
  border-top: 1px solid #0a0a0a !important;
}

.product-category {
  font-size: 0.62rem !important;
  letter-spacing: 0.18em !important;
  color: #888 !important;
  margin-bottom: 4px !important;
}

.product-card-link {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: #0a0a0a !important;
  letter-spacing: 0.01em !important;
  line-height: 1.3 !important;
}

.product-price-row {
  margin: 6px 0 10px !important;
  gap: 8px !important;
}
.product-price-row strong {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  color: #0a0a0a !important;
}
.product-price-row span {
  font-size: 0.78rem !important;
  color: #aaa !important;
}

/* card CTA button */
.product-card-button {
  width: 100% !important;
  padding: 8px 12px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border: 1.5px solid #0a0a0a !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  color: #0a0a0a !important;
  transition: background 0.15s, color 0.15s !important;
}
.product-card-button:hover {
  background: #0a0a0a !important;
  color: #ffffff !important;
}

/* badge */
.product-badge {
  background: #0a0a0a !important;
  color: #ffffff !important;
  border-radius: 0 !important;
  font-size: 0.6rem !important;
  letter-spacing: 0.16em !important;
  padding: 4px 8px !important;
  top: 10px !important;
  left: 10px !important;
}

/* ============================================================
   25 · PRODUCT DETAIL PAGE — professional layout
   ============================================================ */

.product-page { padding-top: 40px !important; }

@media (min-width: 900px) {
  .product-layout {
    flex-direction: row !important;
    align-items: start !important;
    gap: 56px !important;
  }
  .gallery-panel { flex: 0 0 52% !important; }
  .product-panel { flex: 1 1 0 !important; }
}

/* main image */
.product-hero-image {
  border: 1.5px solid #0a0a0a !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: 100% !important;
  object-fit: cover !important;
}

/* product title */
.product-panel h1 {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: clamp(1.6rem, 3vw, 2.4rem) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  color: #0a0a0a !important;
  margin-bottom: 4px !important;
}

.detail-price-row {
  margin: 14px 0 !important;
  gap: 10px !important;
  align-items: baseline !important;
}
.detail-price-row strong {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: #0a0a0a !important;
}
.detail-price-row span {
  font-size: 1rem !important;
  color: #aaa !important;
}

/* selector groups (size, color) */
.selector-group {
  margin-top: 20px !important;
  padding-top: 20px !important;
  border-top: 1px solid #e8e8e8 !important;
}
.selector-group p {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #0a0a0a !important;
  margin-bottom: 10px !important;
}

/* size / choice buttons */
.choice-row button {
  border: 1.5px solid #0a0a0a !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  color: #0a0a0a !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
  min-width: 44px !important;
  transition: background 0.14s, color 0.14s !important;
}
.choice-row button:hover,
.choice-row button.active,
.choice-row button[aria-pressed="true"] {
  background: #0a0a0a !important;
  color: #ffffff !important;
}
.choice-row button:disabled {
  border-color: #e0e0e0 !important;
  color: #ccc !important;
  background: #fafafa !important;
  text-decoration: line-through !important;
  cursor: not-allowed !important;
}

/* add to cart button in detail */
.detail-actions .primary-button,
.detail-actions button[type="submit"],
.detail-actions .add-to-cart-button {
  border-radius: 0 !important;
  background: #0a0a0a !important;
  color: #ffffff !important;
  border: 1.5px solid #0a0a0a !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 14px 28px !important;
  flex: 1 !important;
  transition: background 0.15s, color 0.15s !important;
}
.detail-actions .primary-button:hover,
.detail-actions button[type="submit"]:hover {
  background: #ffffff !important;
  color: #0a0a0a !important;
}

/* description / specs */
.product-description {
  color: #444 !important;
  font-size: 0.9rem !important;
  line-height: 1.7 !important;
  margin-top: 20px !important;
  padding-top: 20px !important;
  border-top: 1px solid #e8e8e8 !important;
}
.product-specs {
  border-top: 1px solid #e8e8e8 !important;
  padding-top: 16px !important;
  margin-top: 16px !important;
  gap: 8px !important;
}
.product-specs span {
  font-size: 0.78rem !important;
  color: #666 !important;
}

/* ============================================================
   26 · ORDER CARD ACCORDION
   ============================================================ */

/* header becomes a click target */
.order-card-header {
  cursor: pointer !important;
  padding: 18px 0 !important;
  border-bottom: 1px solid #e8e8e8 !important;
  transition: background 0.12s !important;
  position: relative !important;
}
.order-card-header:hover { background: #fafafa !important; }

/* chevron icon */
.order-accordion-chevron {
  display: flex !important;
  align-items: center !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
  color: #0a0a0a !important;
  transition: transform 0.2s ease !important;
}

/* order card: clean bordered box */
.order-card {
  border: 1.5px solid #0a0a0a !important;
  border-radius: 0 !important;
  padding: 0 20px !important;
  background: #ffffff !important;
  gap: 0 !important;
}

/* body sections get padding when visible */
.order-card-items,
.order-card-grid,
.order-card-total,
.order-timeline {
  padding: 16px 0 !important;
  border-top: 1px solid #e8e8e8 !important;
}

/* status text in header — capitalize and bold */
.order-card-header h2,
.order-card-header h3,
.order-card-header > *:first-child {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  text-transform: capitalize !important;
  color: #0a0a0a !important;
}

/* order total in header */
.order-card-header > *:last-child:not(.order-accordion-chevron) {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  color: #0a0a0a !important;
}

/* ============================================================
   27 · HOME PAGE PRODUCT GRID — 50% smaller cards
   ============================================================ */

/* desktop: 6 columns = 50% of the 3-col default */
@media (min-width: 1024px) {
  .product-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

/* tablet */
@media (min-width: 600px) and (max-width: 1023px) {
  .product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}

/* mobile */
@media (max-width: 599px) {
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
}

/* all cards keep full border — gap handles spacing, no missing sides */
.product-grid .product-card {
  border: 1.5px solid #0a0a0a !important;
}

/* ============================================================
   28 · ORDER CARD — compact size
   ============================================================ */
.order-card {
  padding: 0 16px !important;
}
.order-card-header {
  padding: 12px 0 !important;
}
.order-card-items,
.order-card-grid,
.order-card-total,
.order-timeline {
  padding: 12px 0 !important;
}
.orders-stack {
  gap: 10px !important;
}
/* order number label above header */
.order-card > *:first-child:not(.order-card-header) {
  font-size: 0.65rem !important;
  letter-spacing: 0.14em !important;
  color: #888 !important;
  padding-top: 10px !important;
  padding-bottom: 0 !important;
}

/* ============================================================
   29 · PROFILE DROPDOWN
   ============================================================ */

#profile-trigger {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #0a0a0a;
  color: #ffffff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
  flex-shrink: 0;
}
#profile-trigger:hover { background: #333; }

#profile-dropdown-panel {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 160px;
  background: #ffffff;
  border: 1.5px solid #0a0a0a;
  border-radius: 0;
  box-shadow: 4px 4px 0 #0a0a0a;
  z-index: 1000;
  flex-direction: column;
  overflow: hidden;
}
#profile-dropdown-panel.open { display: flex; }

.pd-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #0a0a0a;
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px solid #e8e8e8;
  transition: background 0.12s;
  text-align: left;
  width: 100%;
}
.pd-item:last-child { border-bottom: none; }
.pd-item:hover { background: #f4f4f4; }
.pd-item-danger { color: #c00; }
.pd-item-danger:hover { background: #fff5f5; }


/* ── HIDE: contact-person card ─────────────────────────────── */
.store-contact-card { display: none !important; }