/* ============================================================
   6style — Home / Shop / Product  (static implementation)
   Design tokens inlined from the 6style design system, plus the
   interaction + component CSS that the .dc.html prototype relied on.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Tenor+Sans&family=Cormorant+Garamond:wght@400;500;600&family=Sacramento&display=swap");

/* ---------- Colour tokens ---------- */
:root {
  --khaki: #d4d2c7;
  --white: #ffffff;
  --pale-oat: #e5e0dc;
  --peach-cream: #e1d8ce;
  --grey-brown: #695644;
  --noir: #22201f;
  --obsidian: #2a2c34;

  --sand-50: #faf8f5;  --sand-100: #f3efea; --sand-200: #e8e2db;
  --sand-300: #d8d0c6; --sand-400: #b9ae9f; --sand-500: #8f8270;
  --sand-600: #695644; --sand-700: #4c3f31; --sand-800: #2f2823;
  --sand-900: #22201f;

  --surface-page: var(--white);
  --surface-muted: var(--pale-oat);
  --surface-warm: var(--peach-cream);
  --surface-brand: var(--khaki);
  --surface-card: var(--white);
  --surface-inverse: var(--noir);
  --surface-ink: var(--obsidian);

  --text-primary: var(--noir);
  --text-secondary: var(--grey-brown);
  --text-muted: #8f8270;
  --text-inverse: var(--white);
  --text-on-brand: var(--noir);

  --border-subtle: #e2dcd4;
  --border-default: #d3cabf;
  --border-strong: #b9ae9f;
  --border-ink: var(--noir);

  --focus-ring: #695644;
  --success: #5c6b4f;
  --error: #9c4a3c;
  --sale: #9c4a3c;

  /* ---------- Typography ---------- */
  --font-heading: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Tenor Sans", "Optima", "Avenir Next", sans-serif;
  --font-mono: "SFMono-Regular", ui-monospace, Menlo, monospace;

  /* ---------- Radii / shadow / motion ---------- */
  --radius-none: 0px; --radius-sm: 2px; --radius-md: 4px;
  --radius-lg: 8px; --radius-pill: 999px;
  --shadow-xs: 0 1px 2px rgba(34,32,31,0.05);
  --shadow-sm: 0 2px 8px rgba(34,32,31,0.06);
  --shadow-md: 0 8px 24px rgba(34,32,31,0.08);
  --shadow-lg: 0 18px 48px rgba(34,32,31,0.12);
  --ease-out: cubic-bezier(0.16,1,0.3,1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--white);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 { margin: 0; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
.sx-eyebrow {
  font-family: var(--font-heading); font-weight: 500; font-size: 12px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-secondary);
}

/* ---------- Minimal Bootstrap-like grid (matches bootstrap-grid usage) ---- */
.row { display: flex; flex-wrap: wrap; margin-right: -12px; margin-left: -12px; }
.row.no-gutters { margin-right: 0; margin-left: 0; }
.row.no-gutters > [class*="col-"] { padding-right: 0; padding-left: 0; }
.align-items-center { align-items: center; }
[class*="col-"] { position: relative; width: 100%; padding-right: 12px; padding-left: 12px; }
.col-6  { flex: 0 0 50%; max-width: 50%; }
@media (min-width: 768px) {
  .col-md-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
  .col-md-3 { flex: 0 0 25%; max-width: 25%; }
  .col-md-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .col-md-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }
  .col-md-6 { flex: 0 0 50%; max-width: 50%; }
  .col-md-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
}

/* ---------- Nav underline animation ---------- */
.sx-nav-link { position: relative; }
.sx-nav-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left center;
  transition: transform 220ms var(--ease-out);
}
.sx-nav-link:hover::after, .sx-nav-link.is-active::after { transform: scaleX(1); }

.sx-mega-link { position: relative; display: inline-block; align-self: flex-start; }
.sx-mega-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left center;
  transition: transform 220ms var(--ease-out);
}
.sx-mega-link:hover::after { transform: scaleX(1); }
.sx-mega-link:hover { color: var(--noir) !important; }

.sx-foot-link:hover { color: var(--noir) !important; }
.sx-icon-btn:hover { color: var(--text-secondary) !important; }

/* ---------- Product card hover ---------- */
.sx-pcard .sx-pimg2 { opacity: 0; transition: opacity 400ms var(--ease-out); }
.sx-pcard:hover .sx-pimg2 { opacity: 1; }
.sx-pcard .sx-psize {
  opacity: 0; transform: translateY(6px);
  transition: opacity 240ms ease, transform 240ms var(--ease-out);
}
.sx-pcard:hover .sx-psize { opacity: 1; transform: translateY(0); }
.sx-pcard:hover .sx-pname { text-decoration: underline; text-underline-offset: 3px; }

.sx-filter-drop:hover { color: var(--noir) !important; }
.sx-cat-chip:hover { color: var(--noir) !important; }
.sx-page-btn:hover { color: var(--noir) !important; }

.sx-rcard img { transition: transform 600ms var(--ease-out); }
.sx-rcard:hover img { transform: scale(1.04); }
.sx-rcard:hover .sx-pname { text-decoration: underline; text-underline-offset: 3px; }

.sx-acc-btn:hover { opacity: 0.68; }
.sx-mini-add:hover { background: var(--sand-700) !important; }

.sx-save-btn svg { transition: fill 180ms ease, stroke 180ms ease; }
.sx-save-btn:hover svg { fill: var(--noir) !important; stroke: var(--noir) !important; }

.sx-size-chip { position: relative; }
.sx-size-chip::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left center;
  transition: transform 220ms var(--ease-out);
}
.sx-size-chip:hover::after, .sx-size-chip.is-active::after { transform: scaleX(1); }

.sx-enquiry-send { transition: background 180ms ease; }
.sx-enquiry-send:hover { background: var(--sand-700) !important; }

/* ---------- Button component (recreates DS Button) ---------- */
.sx-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-size: 13px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
  border: none; border-radius: var(--radius-sm);
  transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}
.sx-btn--lg { height: 56px; padding: 0 28px; font-size: 13px; }
.sx-btn--full { width: 100%; }
.sx-btn--primary { background: var(--noir); color: var(--white); }
.sx-btn--primary:hover { background: var(--sand-700); }
.sx-btn--secondary {
  background: var(--white); color: var(--noir);
  box-shadow: inset 0 0 0 0.5px var(--noir);
}
.sx-btn--secondary:hover { background: var(--sand-50); }

/* ---------- Hover dropdown menus (currency / sort) ---------- */
.sx-hovergroup .sx-hovermenu {
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 200ms ease, transform 200ms var(--ease-out), visibility 200ms;
}
.sx-hovergroup:hover .sx-hovermenu { opacity: 1; visibility: visible; transform: translateY(0); }
.sx-hovergroup .sx-caret { transition: transform 200ms var(--ease-out); }
.sx-hovergroup:hover .sx-caret { transform: rotate(180deg); }

/* ---------- View switching ---------- */
.sx-view { display: none; }
.sx-view.is-active { display: block; }

/* ---------- Product detail gallery hover ---------- */
.sx-gtile img { transition: transform 700ms var(--ease-out); }

/* ---------- Responsive fallbacks ---------- */
@media (max-width: 767px) {
  .sx-topnav { display: none !important; }
  .sx-pd-wrap { flex-direction: column !important; gap: 24px !important; }
  .sx-pd-info { position: static !important; flex: 1 1 auto !important; }
  .sx-pd-gallery { flex: 1 1 auto !important; }
  .sx-grid-5 { grid-template-columns: repeat(2, 1fr) !important; }
  .sx-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .sx-rewards-cards { display: none !important; }
}