/* The Google Fonts request used to live here as @import — CSS must fully
   fetch before the browser even discovers an @import inside it, then fetch
   the font CSS, then the font files: three serial round trips before any
   text can render. It's now a parallel <link> in includes/header.php instead,
   fetched alongside this stylesheet rather than after it. Do not move it
   back here. */

/* ==========================================================================
   178 — One Seventy Eight
   Brand palette, editorial layout. Square corners throughout: --radius is 0.
   ========================================================================== */

@font-face {
  font-family: 'SackersGothic';
  src: url('../fonts/SackersGothicStd-Light.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Hijrnotes';
  src: url('../fonts/Hijrnotes.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #faf8f3;          /* warm white */
  --fg: #151412;          /* near black — chrome only: buttons, dividers, UI state, never text */
  --text-primary: #6d2b3d; /* brand burgundy — the site's primary text color */
  --primary: #6d2b3d;     /* burgundy */
  --primary-fg: #faf8f3;
  --card: #f2eee5;        /* cream */
  --secondary: #e3d8c7;   /* linen */
  --border: #aa9d8c;      /* taupe */
  --muted-fg: #8d8274;
  --destructive: #b3261e;
  --success: #2f6f4e;

  --font-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-brand: 'SackersGothic', var(--font-sans);
  --font-script: 'Hijrnotes', cursive;

  --header-h: 72px;
  --bar-h: 32px;
  --maxw: 1280px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--primary);
  color: #fff;
}

/* Branded scrollbars — burgundy thumb on a faint burgundy track, square to
   match the rest of the site (--radius is 0). Applied on every scroll surface
   and both axes: the page itself, the product image rails, the cart drawer. */
* {
  scrollbar-width: thin;                                  /* Firefox */
  scrollbar-color: var(--primary) rgba(109, 43, 61, 0.14);
}
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: rgba(109, 43, 61, 0.14);
}
*::-webkit-scrollbar-thumb {
  background: var(--primary);
  /* A transparent inset so the thumb reads as a bar within the track rather
     than filling it edge to edge. */
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:active {
  background: #58212f;
  background-clip: padding-box;
}
*::-webkit-scrollbar-corner {
  background: transparent;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

/* <picture> is only a wrapper for source selection — it must not generate a
   box, or a height:100% image inside it resolves against auto height and the
   art-directed heroes collapse to their natural aspect ratio. */
picture {
  display: contents;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

table {
  border-collapse: collapse;
}

hr {
  border: 0;
  border-top: 1px solid rgba(170, 157, 140, 0.4);
}

[hidden] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 1rem;
}

@media (min-width: 768px) {
  .container { padding-inline: 2rem; }
}

.container-narrow { max-width: 780px; }
.container-mid    { max-width: 1050px; }

.site-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-top: var(--header-h);
}

.section       { padding-block: 4rem; }
.section-lg    { padding-block: 3.5rem; }
@media (min-width: 768px) { .section-lg { padding-block: 6rem; } }
.text-center   { text-align: center; }
/* Visually hidden, but without pushing the element off-canvas: a negative
   offset is clipped in LTR yet becomes scrollable overflow in RTL, which
   would stretch the document to ~10,000px wide. Clipping in place avoids
   that entirely, in both directions. */
.skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link:focus {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0.75rem 1.25rem;
  overflow: visible;
  clip: auto;
  clip-path: none;
  background: var(--fg);
  color: var(--bg);
  z-index: 100;
}

/* Shared type helpers ------------------------------------------------------ */

.eyebrow {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--muted-fg);
}

.label-xs {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;
}

.muted { color: var(--muted-fg); }

.lede {
  font-size: 1.075rem;
  line-height: 1.7;
  color: rgba(109, 43, 61, 0.8);
}

.display {
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 6vw, 4rem);
  line-height: 1.05;
}

.underline-link {
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}
.underline-link:hover { color: var(--primary); }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  border: 1px solid transparent;
  background: var(--fg);
  color: var(--bg);
  transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}
.btn:hover { background: var(--primary); color: #fff; }
.btn:disabled,
.btn[aria-disabled='true'] {
  opacity: 0.45;
  cursor: not-allowed;
}
.btn:disabled:hover { background: var(--fg); }

.btn-block { width: 100%; }
.btn-lg    { padding-block: 1.25rem; }

.btn-light {
  background: var(--bg);
  color: var(--text-primary);
}
.btn-light:hover { background: var(--primary); color: #fff; }

.btn-outline {
  background: transparent;
  border-color: var(--fg);
  color: var(--text-primary);
}
.btn-outline:hover { background: var(--fg); color: var(--bg); }

.btn-quiet {
  background: none;
  color: var(--muted-fg);
  padding: 0.5rem 0;
  letter-spacing: 0.15em;
}
.btn-quiet:hover { background: none; color: var(--text-primary); }

.btn-link {
  background: none;
  color: var(--text-primary);
  padding: 0;
  border-bottom: 1px solid var(--fg);
  padding-bottom: 2px;
}
.btn-link:hover { background: none; color: var(--primary); border-color: var(--primary); }

/* --------------------------------------------------------------------------
   Announcement bar + header
   -------------------------------------------------------------------------- */

.announce {
  min-height: var(--bar-h);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: var(--primary-fg);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  padding: 0.4rem 1rem;
  text-align: center;
}
@media (max-width: 480px) {
  /* Longer copy needs a touch more room to stay legible at small widths —
     min-height above lets it wrap to two lines instead of clipping. */
  .announce { font-size: 0.62rem; letter-spacing: 0.1em; }
}

.site-header {
  position: fixed;
  top: var(--bar-h);
  left: 0;
  right: 0;
  z-index: 40;
  padding-block: 1rem;
  background: rgba(250, 248, 243, 0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(170, 157, 140, 0.2);
  box-shadow: 0 1px 2px rgba(21, 20, 18, 0.04);
  transition: background-color 0.5s, border-color 0.5s, box-shadow 0.5s, color 0.5s;
}

/* On the homepage the header drops its panel until the page scrolls. It sits
   over the cream page background rather than the hero image, so the text
   stays dark — a light treatment here would be invisible. */
.site-header.is-transparent {
  background: transparent;
  backdrop-filter: none;
  border-color: transparent;
  box-shadow: none;
}
.logo-light { display: none; }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.header-col {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}
.header-col.start  { justify-content: flex-start; gap: 0.1rem; }
.header-col.center { justify-content: center; }
.header-col.end    { justify-content: flex-end; gap: 0.25rem; }

/* Mobile header: bag moves to the floating button below, so Sign In / the
   account icon sits alone at the far right — desktop keeps the bag inline. */
@media (max-width: 1023px) {
  .header-col.end [data-open-cart] { display: none; }
}

/* Floating bag (mobile only) ------------------------------------------------
   Desktop keeps the bag in the header, so this stays hidden there. Sits just
   above the fixed Add-to-Bag bar on the product page specifically (that page
   sets data-page="product" on <body>), and fades out near the footer via a
   JS-toggled .is-hidden so it never sits on top of footer links. */
.bag-float { display: none; }
@media (max-width: 1023px) {
  .bag-float {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    inset-inline-end: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    z-index: 45;
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    background: var(--bg);
    border: 1px solid rgba(109, 43, 61, 0.35);
    box-shadow: 0 2px 12px rgba(21, 20, 18, 0.14);
    color: var(--text-primary);
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  body[data-page="product"] .bag-float {
    bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
  }
  .bag-float .bag-wrap { position: relative; display: inline-flex; }
  .bag-float.is-hidden { opacity: 0; transform: translateY(8px); pointer-events: none; }
}
.cart-drawer.is-open ~ .bag-float { display: none; }

.header-logo img { height: 2rem; width: auto; object-fit: contain; }

.nav-desktop {
  display: none;
  gap: 1rem;
  align-items: center;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 500;
}
.nav-desktop a { white-space: nowrap; transition: color 0.2s; }
.nav-desktop a:hover,
.nav-desktop a[aria-current='page'] { color: var(--primary); }

.header-action {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  transition: color 0.2s;
  flex-shrink: 0;
}

/* Icons must never be the thing that gives when the header runs out of room.
   As flex items they shrink by default, and the `max-width: 100%` in the reset
   lets them collapse all the way to zero — which is exactly what happened at
   narrow desktop widths, sooner in Arabic because its labels are wider. */
.header-action svg,
.bag-wrap,
.menu-toggle svg,
.lang-switch {
  flex-shrink: 0;
}
.header-action svg {
  max-width: none;
}
.header-action:hover { color: var(--primary); }
.header-action-text {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  white-space: nowrap;
}

.bag-wrap { position: relative; display: inline-flex; }
.bag-count {
  position: absolute;
  top: -6px;
  inset-inline-end: -9px;
  min-width: 1rem;
  height: 1rem;
  padding-inline: 3px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-toggle { display: inline-flex; padding: 0.5rem; margin-inline-start: -0.5rem; }

@media (min-width: 1024px) {
  .menu-toggle { display: none; }
  .nav-desktop { display: flex; }
  .header-logo.mobile-only { display: none; }
  .header-logo.desktop-only { display: inline-block; }
}

@media (min-width: 1200px) {
  .header-col.end { gap: 0.75rem; }
}
@media (max-width: 1023px) {
  .header-logo.desktop-only { display: none; }
}
@media (min-width: 1280px) {
  .nav-desktop { gap: 1.5rem; font-size: 0.8rem; letter-spacing: 0.18em; }
}

/* Mobile menu overlay ------------------------------------------------------ */

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  transform: translateY(-100%);
  transition: transform 0.5s ease-in-out;
  pointer-events: none;
}
.mobile-menu.is-open { transform: translateY(0); pointer-events: auto; }

.mobile-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  border-bottom: 1px solid rgba(170, 157, 140, 0.2);
}
.mobile-menu-head img { height: 2rem; object-fit: contain; }

.mobile-menu nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Centred when the list fits, scrolled from the top when it does not — with
     nine entries this overflows a short phone, and centring alone would put
     the last items permanently out of reach. */
  justify-content: safe center;
  gap: 1.5rem;
  padding-block: 2rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  font-family: var(--font-serif);
  font-size: 1.5rem;
}
.mobile-menu nav a:hover { color: var(--primary); }

/* --------------------------------------------------------------------------
   Cart drawer
   -------------------------------------------------------------------------- */

.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
}
.drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }

.cart-drawer {
  position: fixed;
  top: 0;
  inset-inline-end: 0;
  z-index: 51;
  height: 100dvh;
  width: 100%;
  max-width: 400px;
  background: var(--bg);
  box-shadow: -8px 0 40px rgba(21, 20, 18, 0.15);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.5s ease-in-out;
}
.cart-drawer.is-open { transform: translateX(0); }

.cart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  border-bottom: 1px solid rgba(170, 157, 140, 0.4);
}
.cart-head h2 { font-size: 1.25rem; }

.cart-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.cart-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--muted-fg);
  gap: 0.75rem;
}
.cart-empty svg { opacity: 0.2; }

.cart-line { display: flex; gap: 1rem; }
.cart-line .thumb {
  width: 6rem;
  height: 8rem;
  flex-shrink: 0;
  background: rgba(227, 216, 199, 0.5);
  overflow: hidden;
}
.cart-line .thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-line .info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-block: 0.25rem;
  min-width: 0;
}
.cart-line h3 { font-size: 1.05rem; line-height: 1.2; }
.cart-line .variant {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted-fg);
  margin-block: 0.35rem 0.2rem;
}

/* In-bag colour / size editing (no need to return to the product page). */
.cart-line-opts {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-block: 0.4rem 0.3rem;
  flex-wrap: wrap;
}
.cart-line-opts select {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  padding: 0.25rem 1.4rem 0.25rem 0.4rem;
  border: 1px solid rgba(170, 157, 140, 0.5);
  background: transparent;
  color: var(--fg);
  max-width: 8.5rem;
}
.cart-line-opts > span { color: var(--muted-fg); font-size: 0.75rem; }

/* Flags a bag line whose exact colour/size has since sold out. */
.cart-line-oos {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  color: var(--destructive);
  margin-block: 0.1rem 0.3rem;
}
.cart-line-oos svg { flex-shrink: 0; }
.cart-line-apply {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--fg);
}

.qty {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid rgba(170, 157, 140, 0.4);
  padding: 0.2rem 0.5rem;
  width: fit-content;
}
.qty button { padding: 0.25rem; display: inline-flex; transition: color 0.2s; }
.qty button:hover { color: var(--primary); }
.qty button:disabled { opacity: 0.3; cursor: not-allowed; }
.qty .value { min-width: 1.25rem; text-align: center; font-size: 0.9rem; }

.cart-foot {
  border-top: 1px solid rgba(170, 157, 140, 0.4);
  padding: 1.5rem;
  background: var(--card);
}
.cart-total {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 1rem;
}
.cart-total .amount { font-size: 1.25rem; }
.cart-note { font-size: 0.7rem; color: var(--muted-fg); margin-bottom: 1.5rem; }

.icon-btn {
  display: inline-flex;
  padding: 0.5rem;
  border-radius: 999px;
  transition: background-color 0.2s, color 0.2s;
}
.icon-btn:hover { background: var(--secondary); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  margin-top: auto;
  background: var(--primary);
  color: var(--bg);
  padding: 3rem 0 1.5rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 2.25rem;
}
/* Tablet gets 2x2 rather than four squeezed columns. */
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 3rem; }
}
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}

.footer-brand { display: flex; flex-direction: column; gap: 0.55rem; }
.footer-brand img { height: 2.75rem; object-fit: contain; align-self: flex-start; }

.footer-col { display: flex; flex-direction: column; gap: 0.55rem; }
.footer-col h4,
.footer-brand h4 {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;
  color: rgba(242, 238, 229, 0.72);
  margin-bottom: 0.4rem;
}
/* A second heading stacked inside a column (Socials under the logo, Support
   under Legal) — replaces the inline margin-top these used to carry. */
.footer-sub { margin-top: 1.25rem; }
.footer-brand .footer-sub { margin-top: 1.5rem; }
.footer-col a { width: fit-content; transition: color 0.2s, opacity 0.2s; }
.footer-col a:hover { color: var(--secondary); }
.footer-social { display: flex; gap: 1rem; align-items: center; }
.footer-social a { color: rgba(242, 238, 229, 0.88); }
.footer-social a:hover { color: var(--bg); }

.footer-bottom {
  border-top: 1px solid rgba(242, 238, 229, 0.3);
  padding-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
  color: rgba(242, 238, 229, 0.75);
  text-align: center;
}
.footer-bottom a { text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom a:hover { color: var(--bg); }
@media (min-width: 768px) {
  .footer-bottom { flex-direction: row; text-align: start; }
}

/* Mobile only — desktop keeps its left-aligned column layout untouched. */
@media (max-width: 767px) {
  .footer-grid { justify-items: center; text-align: center; gap: 2.25rem; }
  .footer-brand { align-items: center; }
  .footer-brand img { align-self: center; }
  .footer-col { align-items: center; }
  .footer-social { justify-content: center; }
}

/* --------------------------------------------------------------------------
   Marquee
   -------------------------------------------------------------------------- */

@keyframes marquee-half {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.marquee {
  overflow: hidden;
  display: flex;
  align-items: center;
  position: relative;
}
.marquee-track {
  display: flex;
  width: max-content;
  white-space: nowrap;
  animation: marquee-half 26s linear infinite;
}
.marquee-group { display: flex; }
.marquee-group span {
  padding-inline: 1rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
}

.marquee-dark {
  height: 46px;
  background: #151412;
  color: #f7f3eb;
}
@media (min-width: 768px) {
  .marquee-dark { height: 60px; }
  .marquee-dark .marquee-group span { font-size: 0.875rem; }
}

/* Oversized serif strip under the "Long enough" panel. */
.marquee-serif {
  height: 100px;
  background: var(--bg);
  color: var(--primary);
  border-block: 1px solid rgba(170, 157, 140, 0.3);
}
.marquee-serif .marquee-track { animation-duration: 22s; }
.marquee-serif h2 {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 14vw, 4.25rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  margin-inline: 1rem;
  white-space: nowrap;
  flex-shrink: 0;
  /* Caps live here, not in the string, so the Arabic key (where the rule is a
     no-op) can hold normal-cased copy and still share this treatment. */
  text-transform: uppercase;
  /* Playfair defaults to figures that sit below cap height, which makes the
     "170" in an all-caps line look like a typo. */
  font-variant-numeric: lining-nums;
}
@media (min-width: 768px) {
  .marquee-serif { height: 160px; }
  .marquee-serif h2 { font-size: clamp(4.25rem, 7vw, 7.5rem); }
}

/* --------------------------------------------------------------------------
   Home
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  height: 90dvh;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--primary);
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0.8; }

.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #fff;
  padding-inline: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: fade-in-up 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.hero h1 {
  font-family: var(--font-brand);
  font-size: clamp(1.5rem, 7vw, 2.375rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.15;
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
}
.hero p {
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  max-width: 32rem;
  margin-bottom: 2.5rem;
}
@media (min-width: 768px) {
  .hero h1 { font-size: 3.5rem; letter-spacing: 0.06em; line-height: 1.1; }
  .hero p { font-size: 1.25rem; }
}
@media (min-width: 1024px) {
  .hero h1 { font-size: 4.5rem; }
}

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Drop 001 ------------------------------------------------------------------ */

/* Grid, not flex: mobile needs the title ahead of the image while desktop
   keeps title+price+etc. stacked in one column beside it — a spanning grid
   area does that without duplicating the title in the DOM. */
.split {
  display: grid;
  grid-template-areas: "title" "media" "body";
  row-gap: 1.5rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .split {
    grid-template-columns: 55% 45%;
    /* min-content on the title row is the actual fix — .split-media spans
       both rows and needs ~600px, and against the previous implicit "auto"
       tracks the grid was padding the title's row out to help supply that
       height, well beyond what the title text itself needed. Pinning it to
       min-content forces all of that slack into the body row instead. */
    grid-template-rows: min-content 1fr;
    grid-template-areas: "media title" "media body";
    column-gap: 2rem;
    row-gap: 0;
    align-items: stretch;
  }
}

.split-title { grid-area: title; width: 100%; }
.split-title h2 { font-size: clamp(2rem, 5vw, 3rem); margin-block: 1rem 0.5rem; }

.split-media {
  grid-area: media;
  width: 100%;
  position: relative;
  background: var(--card);
  height: 45vh;
  overflow: hidden;
}
.split-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* contain, not cover — cover was cropping the waistband/hem off on mobile. */
  object-fit: contain;
  transition: transform 0.4s ease;
}
@media (min-width: 768px) {
  .split-media { height: auto; min-height: 600px; }
  .split-media img { padding: 2rem; }
}
.split-media:hover img { transform: scale(1.01); }

.split-body {
  grid-area: body;
  width: 100%;
  display: flex;
  flex-direction: column;
  /* flex-start, not center: on mobile the cell is already exactly as tall
     as this content (nothing to center against), but on desktop this cell
     was being stretched by .split-media's row-spanning height — centered
     content there floated down into visible dead space below the title. */
  justify-content: flex-start;
  padding-block: 0;
}
/* Description sits right under the price, field-group (swatches) after it —
   same order at every width now, not just on mobile. */
.split-body .price { order: 1; font-size: 1.25rem; margin-bottom: 2.5rem; }
.split-body .blurb-text { order: 2; }
.split-body .field-group { order: 3; }
.split-body .btn { order: 4; }
@media (max-width: 1023px) {
  .split { row-gap: 1rem; }
  .split-body { padding-block: 0.5rem; }
  .split-body .price { margin-bottom: 1.25rem; }
  .split-body .blurb-text { margin-bottom: 1.5rem !important; }
  .split-body .field-group { margin-bottom: 1.5rem; }
}

/* Colour swatches ----------------------------------------------------------- */

.swatches { display: flex; gap: 1rem; }

.swatch {
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  border: 1px solid rgba(170, 157, 140, 0.4);
  position: relative;
  display: inline-flex;
  cursor: pointer;
  transition: border-color 0.3s;
}
.swatch::after {
  content: '';
  position: absolute;
  inset: -5px;
  border: 1px solid var(--fg);
  border-radius: 999px;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.25s, transform 0.25s;
}
.swatch.is-active::after { opacity: 1; transform: scale(1); }
.swatch-sm { width: 2.5rem; height: 2.5rem; }

/* "One fit. Three ways." ------------------------------------------------------ */

.three-ways-section { padding-block: 2.5rem 3rem; }
@media (min-width: 768px) { .three-ways-section { padding-block: 3rem 3.5rem; } }

.three-ways {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  align-items: center;
  position: relative;
}
.three-ways figure { width: 86vw; }
.three-ways .frame {
  width: 100%;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: rgba(227, 216, 199, 0.2);
  margin-bottom: 1rem;
}
.three-ways .frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease-out;
}
.three-ways figure:hover .frame img { transform: scale(1.02); }
.three-ways figcaption {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
}
@media (max-width: 1023.5px) {
  .three-ways figcaption {
    text-align: center !important;
  }
}
/* Taller than square on mobile/tablet so the seated shot doesn't crop off
   the trousers the way a 1:1 frame did — full-height treatment kicks in at
   1024px below, via .three-ways .wide's own rule. */
.three-ways .wide .frame { aspect-ratio: 4 / 5; }

@media (min-width: 768px) {
  .three-ways figure { width: 100%; }
}
@media (min-width: 1024px) {
  .three-ways { flex-direction: row; align-items: flex-start; gap: 3rem; }
  .three-ways figure { width: 33.333%; }
  .three-ways .offset { margin-top: 5rem; }
  .three-ways .wide {
    width: 40%;
    position: absolute;
    inset-inline-end: 0;
    top: 0;
    bottom: 0;
    padding-inline-start: 4rem;
    z-index: 2;
    display: flex;
    flex-direction: column;
  }
  /* Stretches to the full height of the beige/white pair beside it, rather
     than the short fixed-aspect crop it used to be. flex: 1 leaves the
     caption below its own natural height instead of the frame guessing one. */
  .three-ways .wide .frame { flex: 1; aspect-ratio: auto; margin-bottom: 1rem; }
  .three-ways figcaption { text-align: start; }
}

/* Shop grid ----------------------------------------------------------------- */

.shop-head { padding-block: 3rem 1.5rem; }
@media (min-width: 768px) { .shop-head { padding-block: 4rem 2rem; } }
.shop-head h1 { font-size: clamp(2.25rem, 6vw, 3.5rem); margin-block: 0.5rem 0.75rem; }
.shop-head .lede { max-width: 34rem; color: var(--muted-fg); }

.shop-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem 1.5rem;
}
@media (min-width: 560px) { .shop-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .shop-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .shop-grid { grid-template-columns: repeat(4, 1fr); } }

.shop-card { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.shop-card-media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: rgba(170, 157, 140, 0.12);
  margin-bottom: 0.9rem;
}
.shop-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.shop-card:hover .shop-card-media img { transform: scale(1.03); }
.shop-card-noimg { display: block; width: 100%; height: 100%; }
.shop-card-badge {
  position: absolute;
  top: 0.75rem;
  inset-inline-start: 0.75rem;
  padding: 0.3rem 0.6rem;
  background: var(--primary);
  color: var(--primary-fg);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.shop-card-badge-muted { background: var(--fg); }
.shop-card-body h2 {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  margin-bottom: 0.35rem;
}
.shop-card-swatches { display: inline-flex; gap: 0.3rem; margin-bottom: 0.4rem; }
.shop-card-swatches i {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.15);
}
.shop-card-body .price { font-size: 0.9rem; color: var(--muted-fg); }

/* Faceted filters: quick chips + active pills + sidebar ------------------ */

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.filter-chip-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text-primary);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}
.filter-chip-pill:hover { border-color: var(--fg); }
.filter-chip-pill.is-active { background: var(--fg); border-color: var(--fg); color: var(--bg); }

/* The removable "you searched for" row — every sidebar pick as its own pill
   with an ×, so a customer three filters deep can drop just one without
   opening the panel. Quick chips (In Stock / New) are not repeated here —
   they already show their own active state above. */
.active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(170, 157, 140, 0.3);
}
.active-filters-label { margin-inline-end: 0.15rem; }
.active-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.35rem 0.35rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--text-primary);
  font-size: 0.72rem;
  text-decoration: none;
  transition: border-color 0.2s, background-color 0.2s;
}
[dir="rtl"] .active-filter-pill { padding: 0.35rem 0.75rem 0.35rem 0.35rem; }
.active-filter-pill:hover { border-color: var(--destructive); color: var(--destructive); }
.active-filter-pill svg { flex: none; }
.active-filters-clear {
  margin-inline-start: 0.25rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--muted-fg);
}
.active-filters-clear:hover { color: var(--primary); }

.shop-layout {
  display: block;
  position: relative;
}
@media (min-width: 900px) {
  .shop-layout { display: grid; grid-template-columns: 260px 1fr; align-items: start; gap: 3rem; }
  /* Sticky, but no capped height / scrollbar of its own — it just scrolls
     with the page like the rest of the sidebar always has. */
  .shop-sidebar { position: sticky; top: calc(var(--header-h) + 1.5rem); }
}

.shop-sidebar-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--fg);
}
.shop-sidebar-title {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.shop-sidebar-clear {
  margin-inline-end: auto;
  margin-inline-start: 0.75rem;
  color: var(--muted-fg);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.shop-sidebar-clear:hover { color: var(--primary); }
.shop-sidebar-close { display: none; padding: 0.25rem; }

.filter-group .accordion,
.filter-group summary { font-size: 0.85rem; }
.filter-group + .filter-group { margin-top: 0; }
/* The sidebar head's own rule already separates it from the first group;
   the accordion's default border-bottom on every <details> still divides
   the rest, so nothing extra is needed between groups. */

/* A checkbox row shared by Category and Colour — real list rows (label,
   count, a highlight on hover) rather than a button grid, which is the
   pattern this many options actually reads best in. Size stays a compact
   button grid below: the standard treatment for a handful of short codes. */
.filter-list { padding-block: 0.5rem; }
.filter-check-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.4rem;
  margin-inline: -0.4rem;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.15s;
}
.filter-check-row:hover { background: var(--card); }
.filter-check-label { flex: 1; font-size: 0.82rem; }
.filter-check-count {
  font-size: 0.7rem;
  color: var(--muted-fg);
  font-variant-numeric: tabular-nums;
}

.filter-check-mark {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
  border: 1px solid var(--border);
  background: var(--bg);
  transition: background-color 0.15s, border-color 0.15s;
}
.filter-check-mark input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.filter-check-mark svg { color: var(--bg); opacity: 0; transition: opacity 0.1s; }
.filter-check-row:has(input:checked) .filter-check-mark { background: var(--fg); border-color: var(--fg); }
.filter-check-row:has(input:checked) .filter-check-mark svg { opacity: 1; }
.filter-check-row:has(input:focus-visible) .filter-check-mark { outline: 2px solid var(--primary); outline-offset: 2px; }

.filter-swatch-mark {
  position: relative;
  display: inline-flex;
  width: 1.4rem;
  height: 1.4rem;
  flex: none;
  border-radius: 999px;
  border: 1px solid rgba(170, 157, 140, 0.4);
  transition: box-shadow 0.2s;
}
.filter-swatch-mark input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  border-radius: 999px;
  cursor: pointer;
}
.filter-swatch-mark:has(input:checked) { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--fg); }
.filter-swatch-mark:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }

.filter-size-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; padding-block: 1rem; }
.filter-size-chip {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--border);
  background: var(--bg);
  cursor: pointer;
  font-size: 0.78rem;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}
.filter-size-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.filter-size-chip .range {
  direction: ltr;
  font-size: 0.6rem;
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.filter-size-chip:hover { border-color: var(--fg); }
.filter-size-chip:has(input:checked) { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.filter-size-chip:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }

.filter-price { padding-block: 1rem; }
.filter-price-row { display: flex; align-items: flex-end; gap: 0.6rem; margin-bottom: 0.75rem; }
.filter-price-field { flex: 1; display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.filter-price-field input {
  width: 100%;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border);
  background: var(--bg);
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--text-primary);
  transition: border-color 0.2s;
}
.filter-price-field input:hover { border-color: var(--fg); }
.filter-price-field input:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.filter-price-sep { padding-bottom: 0.65rem; color: var(--muted-fg); }
/* Compact, inline version of .btn — the hero-sized default (1rem/2rem
   padding, uppercase, wide tracking) is too heavy sitting under two small
   inputs in a 260px sidebar. */
.filter-price-apply {
  padding: 0.6rem 1rem;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
}

.filter-actions { margin-top: 1.5rem; }

.shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}
.shop-filter-toggle { display: inline-flex; align-items: center; gap: 0.4rem; }
@media (min-width: 900px) { .shop-filter-toggle { display: none; } }
.shop-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.1rem;
  height: 1.1rem;
  padding-inline: 0.25rem;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
}

.shop-empty {
  padding-block: 4rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

/* Below 900px the sidebar becomes an off-canvas drawer sharing the cart
   drawer's backdrop element/mechanics — see .drawer-backdrop above. */
@media (max-width: 899px) {
  .shop-sidebar {
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    z-index: 51;
    height: 100dvh;
    width: 100%;
    max-width: 360px;
    overflow-y: auto;
    background: var(--bg);
    box-shadow: 8px 0 40px rgba(21, 20, 18, 0.15);
    padding: 1.5rem;
    transform: translateX(-100%);
    transition: transform 0.5s ease-in-out;
  }
  .shop-sidebar.is-open { transform: translateX(0); }
  [dir="rtl"] .shop-sidebar { transform: translateX(100%); }
  [dir="rtl"] .shop-sidebar.is-open { transform: translateX(0); }
  .shop-sidebar-close { display: inline-flex; }
}

/* Homepage "more from the shop" strip reuses the card, tighter grid. Sized
   to content and centred, not stretched across fixed columns like the full
   /shop grid — a 2-3 product catalogue (the common case here) would
   otherwise hug the left edge instead of sitting centred under the heading. */
.home-shop-strip { padding-block: 1rem 3rem; }
.home-shop-strip .shop-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 280px));
  justify-content: center;
  gap: 1.5rem 1.25rem;
}

/* Footer "prices shown in" selector. */
.footer-currency {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-block: 1.25rem 0;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(250, 248, 243, 0.6);
}
.footer-currency select {
  background: transparent;
  border: 1px solid rgba(250, 248, 243, 0.3);
  color: rgba(250, 248, 243, 0.85);
  padding: 0.3rem 1.6rem 0.3rem 0.5rem;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}
.footer-currency select option { color: #151412; }
.footer-currency button {
  border: 1px solid rgba(250, 248, 243, 0.3);
  padding: 0.3rem 0.7rem;
  color: inherit;
}

/* Material -------------------------------------------------------------------- */

.material { border-block: 1px solid rgba(170, 157, 140, 0.3); }
/* Sits right below the purchase form, which already carries its own bottom
   spacing — only the top needed trimming to close the gap above the image. */
.material-section { padding-block: 1.5rem 3.5rem; }
@media (min-width: 768px) { .material-section { padding-block: 2rem 6rem; } }
.material-inner {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  align-items: center;
}
.material-media { width: 86vw; overflow: hidden; }
.material-media img { width: 100%; height: 100%; object-fit: cover; }
.material-body { width: 86vw; display: flex; flex-direction: column; justify-content: space-between; }
.material-body h2 { font-size: clamp(2rem, 5vw, 3.75rem); margin-block: 1rem 1.5rem; }

@media (min-width: 768px) {
  .material-media { width: 100%; aspect-ratio: 4 / 3; }
  .material-body { width: 100%; }
}
/* Tablet only: the packaging shot and the dry-clean copy read as one stacked
   block below 768px and one row again at 1024px — here specifically, on the
   width in between, they go side by side (image left, divider+copy right)
   instead of the taller full-width stack. */
@media (min-width: 768px) and (max-width: 1023px) {
  .dryclean-stack { flex-direction: row; align-items: center; gap: 2rem; }
  .dryclean-image { flex: 0 0 45%; max-width: none !important; }
  .dryclean-block { flex: 1; max-width: none; }
}
@media (min-width: 1024px) {
  .material-inner { flex-direction: row; align-items: flex-start; gap: 4rem; }
  .material-media { width: 55%; height: 650px; aspect-ratio: auto; }
  .material-body { width: 45%; height: 650px; padding-block: 1rem; }
}

.dryclean-block {
  border-top: 1px solid rgba(109, 43, 61, 0.2);
  padding-top: 1rem;
  /* max-width: 28rem; */
  text-align: end;
}
.dryclean-block h4 {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--primary);
  margin-bottom: 0.5rem;
}

/* "Long enough" split ---------------------------------------------------------- */

.longenough {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 60vh;
}
.longenough-panel {
  width: 100%;
  background: var(--primary);
  color: var(--primary-fg);
  padding: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.longenough-panel h2 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 0.95;
  margin-block: 1.5rem 2rem;
  max-width: 600px;
}
.longenough-panel p {
  opacity: 0.9;
  line-height: 1.6;
  margin-bottom: 2.5rem;
  max-width: 450px;
}
.longenough-media { width: 100%; height: 55vh; overflow: hidden; }
.longenough-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 50%; }

@media (min-width: 768px) {
  .longenough { flex-direction: row; height: 70vh; }
  /* Tablet only — more vertical room than the mobile default so LONG ENOUGH
     and the CTA aren't pressed against the panel's top/bottom edges. Desktop
     below resets padding uniformly, so this doesn't leak past 1024px. */
  .longenough-panel { width: 50%; padding-block: 5.5rem; padding-inline: 2rem; }
  .longenough-media { width: 50%; height: auto; }
}
@media (min-width: 1024px) {
  .longenough-panel { padding: 5.5rem; }
}

/* Newsletter ------------------------------------------------------------------- */

.newsletter { text-align: center; border-bottom: 1px solid rgba(170, 157, 140, 0.4); }
.newsletter h2 { font-size: clamp(2.25rem, 6vw, 3.75rem); margin-bottom: 1.5rem; }
.newsletter p { max-width: 28rem; margin: 0 auto 2.5rem; color: var(--muted-fg); }

.newsletter-form {
  max-width: 28rem;
  margin-inline: auto;
  display: flex;
}
.newsletter-form input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--fg);
  padding: 0.75rem 1rem;
  outline: none;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.75rem;
}
.newsletter-form button {
  border-bottom: 1px solid var(--fg);
  padding: 0.75rem 1rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.75rem;
  font-weight: 700;
  transition: color 0.2s;
}
.newsletter-form button:hover { color: var(--primary); }
.newsletter .form-note { margin-top: 1rem; font-size: 0.85rem; }

/* --------------------------------------------------------------------------
   Product page
   -------------------------------------------------------------------------- */

/* Colour + size choices are radio inputs parked at the top of the form, so
   the gallery can switch with a sibling selector and no JavaScript at all.
   position: fixed (not absolute) keeps them inside the viewport, so activating
   a swatch/size <label> doesn't make the browser scroll the now-focused radio
   into view — which read as the page jumping to the top on every pick. */
.pdp-state { position: fixed; top: 0; inset-inline-start: 0; opacity: 0; pointer-events: none; width: 0; height: 0; }

.pdp-gallery-desktop { display: none; }

/* Every colourway is rendered; the checked radio reveals exactly one. A
   styled product's own gallery per (style, colour) pair (migration 0048) is
   swapped into these SAME elements in place by assets/js/site.js rather than
   a second gallery being shown/hidden next to them. */
.g-color { display: none; }

#color-beige:checked ~ .pdp-layout .g-beige,
#color-white:checked ~ .pdp-layout .g-white,
#color-black:checked ~ .pdp-layout .g-black { display: block; }

#color-beige:checked ~ .pdp-layout .swatch-beige,
#color-white:checked ~ .pdp-layout .swatch-white,
#color-black:checked ~ .pdp-layout .swatch-black { border-color: var(--fg); }
#color-beige:checked ~ .pdp-layout .swatch-beige::after,
#color-white:checked ~ .pdp-layout .swatch-white::after,
#color-black:checked ~ .pdp-layout .swatch-black::after { opacity: 1; transform: scale(1); }

#color-beige:checked ~ .pdp-layout .cname-beige,
#color-white:checked ~ .pdp-layout .cname-white,
#color-black:checked ~ .pdp-layout .cname-black { display: block; }
.pdp-color-name span { display: none; }

/* Style (migration 0038, opt-in): its own name suffix on the H1 and its own
   description in the blurb, both generated per-code in pages/product.php's
   <style> block the same way colour's cname-X rules are — this is just the
   "hidden until the matching #style-X radio is checked" base state. */
.pdp-style-suffix,
.pdp-style-desc,
.pdp-title-override { display: none; }

/* Selected size drives the inseam hint and the button label. */
#size-S1:checked ~ .pdp-layout .hint-S1,
#size-S2:checked ~ .pdp-layout .hint-S2,
#size-S3:checked ~ .pdp-layout .hint-S3,
#size-S4:checked ~ .pdp-layout .hint-S4 { display: block; }
.size-hint span { display: none; }

#size-S1:checked ~ .pdp-layout .size-label-S1,
#size-S2:checked ~ .pdp-layout .size-label-S2,
#size-S3:checked ~ .pdp-layout .size-label-S3,
#size-S4:checked ~ .pdp-layout .size-label-S4 {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-fg);
}

.pdp-layout {
  display: flex;
  flex-direction: column;
}

.pdp-title-mobile { padding-block: 1.5rem 1rem; }
.pdp-title-mobile h1 { font-size: clamp(1.75rem, 6vw, 2.25rem); margin-block: .5rem 0; }

/* Mobile: full-bleed snapping gallery with paging dots. */
@media (max-width: 1023px) {
  /* Shown once above the gallery instead — see .pdp-title-mobile. */
  .pdp-panel > .eyebrow, .pdp-panel > h1, .pdp-panel > .pdp-category, .pdp-panel > .pdp-badge { display: none; }

  .pdp-gallery-mobile {
    position: relative;
    border-bottom: 1px solid rgba(170, 157, 140, 0.2);
  }
  .pdp-gallery-mobile .g-color { position: relative; }
  .pdp-gallery-mobile .rail {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    height: 65vh;
    scrollbar-width: none;
  }
  .pdp-gallery-mobile .rail::-webkit-scrollbar { display: none; }
  .pdp-gallery-mobile .slide {
    flex: 0 0 100%;
    height: 100%;
    scroll-snap-align: center;
    background: rgba(227, 216, 199, 0.1);
  }
  /* contain, not cover — the opening slide showing a cropped garment was the
     actual bug being fixed here; the whole product now shows on first paint. */
  .pdp-gallery-mobile .slide img { width: 100%; height: 100%; object-fit: contain; }
  .pdp-gallery-mobile .g-white .slide { background: rgba(227, 216, 199, 0.6); }
  .pdp-dots {
    position: absolute;
    bottom: 1rem;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
  }
  .pdp-dots i {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(21, 20, 18, 0.3);
    transition: all 0.3s;
  }
  .pdp-dots i.is-active { background: var(--fg); width: 16px; }
}

.pdp-main {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: flex-start;
  padding-block: 2rem;
}

@media (min-width: 1024px) {
  .pdp-title-mobile { display: none; }
  .pdp-main { flex-direction: row; gap: 3rem; padding-block: 3rem; }
  .pdp-gallery-mobile { display: none; }

  .pdp-gallery-desktop {
    display: block;
    width: 60%;
    height: calc(100vh - 140px);
    position: sticky;
    top: 100px;
  }
  /* The ID selectors here outrank the generic .g-color rule above, which is
     why the reveal has to be restated rather than inherited. */
  #color-beige:checked ~ .pdp-layout .pdp-gallery-desktop .g-beige,
  #color-white:checked ~ .pdp-layout .pdp-gallery-desktop .g-white,
  #color-black:checked ~ .pdp-layout .pdp-gallery-desktop .g-black {
    display: flex;
    gap: 1.5rem;
    height: 100%;
  }
  .pdp-thumbs {
    width: 12%;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow-y: auto;
    padding-inline-end: 0.5rem;
    padding-bottom: 2rem;
    scrollbar-width: none;
  }
  .pdp-thumbs::-webkit-scrollbar { display: none; }
  .pdp-thumbs button {
    flex-shrink: 0;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border: 1px solid transparent;
    opacity: 0.6;
    transition: opacity 0.2s, border-color 0.2s;
  }
  .pdp-thumbs button:hover { opacity: 1; }
  .pdp-thumbs button.is-active { opacity: 1; border-color: var(--fg); }
  .pdp-thumbs img { width: 100%; height: 100%; object-fit: cover; }

  .pdp-stage {
    width: 88%;
    height: 100%;
    overflow: hidden;
    background: rgba(227, 216, 199, 0.1);
  }
  .pdp-stage img {
    width: 100%;
    height: 100%;
    /* The box's own height comes from the viewport (.pdp-gallery-desktop's
       calc(100vh - 140px)), not from any photo — "contain" only grows an
       image to fill the *width*, so whatever's left over at the bottom read
       as a gap under it, for nearly any photo, at nearly any window height.
       "cover" fills the box completely on every photo/window size instead;
       the trade-off is it can crop the very top or bottom of a full-length
       shot on an unusually short or tall window, which object-position
       biases toward keeping the top (the garment's waist/fit) in frame. */
    object-fit: cover;
    object-position: top;
  }
  .g-white .pdp-stage { background: rgba(227, 216, 199, 0.6); }

  .pdp-panel { width: 40%; }
}

.pdp-panel {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.pdp-panel h1 { font-size: clamp(2rem, 5vw, 3rem); margin-block: 1rem; }
.pdp-panel .price { font-size: 1.25rem; margin-bottom: 1.5rem; }

/* Category breadcrumb and merchandising badge — plain type, no pill/chip
   background, matching the rest of the site's small-label language. */
.pdp-category { margin-top: 0.35rem; }
.pdp-category a {
  font-size: 0.75rem;
  color: var(--muted-fg);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pdp-category a:hover { color: var(--fg); }
.pdp-badge {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--primary);
  margin-top: 0.5rem;
}
.pdp-preorder-note {
  font-size: 0.8rem;
  color: var(--muted-fg);
  text-align: center;
  margin-top: 0.75rem;
}
.pdp-panel .blurb {
  font-size: 0.9rem;
  line-height: 1.7;
  color: rgba(109, 43, 61, 0.8);
  max-width: 24rem;
  margin-bottom: 2.5rem;
}

.pdp-color-name {
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  text-decoration: underline;
  text-underline-offset: 4px;
  margin-bottom: 0.5rem;
}

.field-group { margin-bottom: 2.5rem; }
.field-group .group-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 1rem;
}

.size-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.size-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-block: 1rem;
  border: 1px solid var(--border);
  background: var(--card);
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}
.size-label:hover { border-color: var(--fg); }
.size-label .id { font-family: var(--font-serif); font-size: 1.125rem; font-weight: 700; }
.size-label .range {
  /* A Latin measurement range; forcing LTR stops RTL reordering it into
     "CM 175-170". */
  direction: ltr;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-top: 0.25rem;
  opacity: 0.8;
}

/* Out of stock for the colour/style currently picked — greyed out and
   unclickable (the underlying radio carries the real `disabled`). */
.size-label.is-oos {
  opacity: 0.4;
  cursor: not-allowed;
  background: transparent;
}
.size-label.is-oos:hover { border-color: var(--border); }
.size-label .oos-tag {
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 0.3rem;
}

/* Style choice (migration 0038) — same button-grid language as Size, but each
   card carries a small photo of that style so the choice reads as a look, not
   just a name. */
.style-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.style-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.5rem;
  border: 1px solid var(--border);
  background: var(--card);
  cursor: pointer;
  font-weight: 500;
  text-align: center;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}
.style-label:hover { border-color: var(--fg); }
.style-thumb {
  width: 100%;
  aspect-ratio: 3 / 4;
  background-size: cover;
  background-position: top center;
  background-color: rgba(227, 216, 199, 0.3);
}
.style-name { font-size: 0.75rem; line-height: 1.3; }

.pdp-style-suffix { font-weight: 400; }

.size-hint {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted-fg);
  text-align: center;
  margin-top: 1rem;
}
.size-hint b { color: var(--text-primary); }

.dryclean-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  border: 1px solid rgba(109, 43, 61, 0.3);
  background: var(--card);
  padding: 1rem 1.25rem;
  margin-bottom: 2rem;
}
.dryclean-card img { width: 3.5rem; height: 3.5rem; flex-shrink: 0; object-fit: contain; }
.dryclean-card .t {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--primary);
  margin-bottom: 0.25rem;
}
.dryclean-card p { font-size: 0.75rem; line-height: 1.6; color: var(--muted-fg); }

/* Designed for Proportion — a recurring spec marker, not a card: a rule,
   a tracked label, and a plain list with a typographic dash instead of an
   icon set, so it reads as product spec rather than a promo block. */
.proportion-marker {
  border-block: 1px solid rgba(170, 157, 140, 0.4);
  padding-block: 1.5rem;
  margin-bottom: 2rem;
}
.proportion-marker .label-xs { color: var(--primary); margin-bottom: 1rem; }
.proportion-marker ul {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0;
  padding-inline-start: 0;
  list-style: none;
}
.proportion-marker li {
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(109, 43, 61, 0.75);
  padding-inline-start: 1.1rem;
  list-style: none;
  position: relative;
}
.proportion-marker li::before {
  content: '•';
  position: absolute;
  inset-inline-start: 0;
  color: var(--primary);
}

.pdp-cta-desktop { display: none; }
@media (min-width: 1024px) {
  .pdp-cta-desktop { display: flex; margin-bottom: 3rem; }
  .pdp-cta-mobile { display: none; }
}

.pdp-cta-mobile {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 39;
  padding: 1rem;
  background: rgba(250, 248, 243, 0.95);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(170, 157, 140, 0.4);
  box-shadow: 0 -10px 20px rgba(0, 0, 0, 0.03);
}

/* Editorial blocks below the buy panel */
.editorial { border-top: 1px solid rgba(170, 157, 140, 0.4); }
.band {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-block: 3rem;
}
.band-media { width: 86vw; margin-inline: auto; aspect-ratio: 4 / 3; overflow: hidden; background: rgba(227, 216, 199, 0.1); }
.band-media img { width: 100%; height: 100%; object-fit: cover; }
.band-body {
  width: 86vw;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 3rem;
}
.band-body .inner { max-width: 28rem; text-align: center; }
.band-body h2 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 1.5rem; line-height: 1.15; }
.band-cream { background: var(--card); }
.band-burgundy { background: var(--primary); color: var(--primary-fg); }
.band-burgundy .muted { color: rgba(250, 248, 243, 0.9); }

@media (min-width: 768px) {
  .band { flex-direction: row; padding-block: 0; }
  .band-reverse { flex-direction: row-reverse; }
  .band-media { width: 50%; margin: 0; aspect-ratio: auto; min-height: 600px; }
  .band-body { width: 50%; margin: 0; padding: 3rem; }
  .band-body .inner { text-align: start; }
}
@media (min-width: 1024px) {
  .band-body { padding: 6rem; }
}

.wide-figure {
  width: 86vw;
  margin-inline: auto;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: rgba(227, 216, 199, 0.1);
}
.wide-figure img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 768px) {
  .wide-figure { width: 100%; aspect-ratio: 21 / 9; }
}

/* --------------------------------------------------------------------------
   Accordion (native details/summary)
   -------------------------------------------------------------------------- */

.accordion { width: 100%; }
.accordion details { border-bottom: 1px solid rgba(170, 157, 140, 0.4); }
.accordion summary {
  list-style: none;
  cursor: pointer;
  padding-block: 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  transition: color 0.2s;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary:hover { color: var(--primary); }
.accordion summary::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.25s;
  flex-shrink: 0;
}
.accordion details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.accordion .content {
  padding-bottom: 1.5rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: rgba(109, 43, 61, 0.7);
}
.accordion .content p + p { margin-top: 0.5rem; }
.accordion .content a { color: var(--text-primary); text-decoration: underline; text-underline-offset: 4px; }
.accordion .content ul {
  margin: 0;
  padding-inline-start: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.accordion .content li { padding-inline-start: 1.1rem; position: relative; }
.accordion .content li::before {
  content: '•';
  position: absolute;
  inset-inline-start: 0;
  color: var(--primary);
}
.accordion .content ul + a { display: inline-block; margin-top: 0.75rem; }

.faq-group { margin-bottom: 3rem; }
.faq-group > h2 {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted-fg);
  border-bottom: 1px solid rgba(170, 157, 140, 0.4);
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
}

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

.field { display: flex; flex-direction: column; gap: 0.5rem; }

.field label,
.form-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;
}

/* Match by exclusion rather than listing types: an <input> with no type
   attribute defaults to text but is NOT matched by input[type="text"], which
   silently left every typeless field on the checkout, account and admin forms
   unstyled. :where() keeps this at element-level specificity so component
   rules further up (.newsletter-form input, .password-wrap input) still win. */
.input,
input:where(:not([type='checkbox'], [type='radio'], [type='range'], [type='submit'],
                 [type='button'], [type='reset'], [type='file'], [type='image'],
                 [type='hidden'], [type='color'])),
select,
textarea {
  width: 100%;
  background-color: rgba(227, 216, 199, 0.18);
  border: 1px solid rgba(170, 157, 140, 0.4);
  padding: 0.75rem;
  font-size: 0.9rem;
  outline: none;
  border-radius: 0;
  transition: border-color 0.2s;
}
/* Every select on the site had its native arrow stripped and nothing put back,
   so dropdowns read as plain text inputs. The caret is painted on the select
   itself rather than on a wrapper, which keeps it functional — clicking it
   opens the native menu — with no markup or JS. */
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%236d2b3d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 0.7rem auto;
  padding-inline-end: 2rem;
}
[dir="rtl"] select { background-position: left 0.75rem center; }
/* ...but a select inside an explicitly LTR wrapper (the phone + dialling-code
   pair, which is dir="ltr" on purpose) still reads left-to-right, so its caret
   belongs on the right where its own text ends — otherwise it lands on top of
   the "JO" in "JO +962". */
[dir="rtl"] [dir="ltr"] select { background-position: right 0.75rem center; }
textarea { resize: vertical; }

.input:focus,
input:focus,
select:focus,
textarea:focus { border-color: var(--primary); }

.field-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 768px) {
  .field-row { grid-template-columns: repeat(2, 1fr); }
}

.password-wrap { position: relative; }
.password-wrap input { padding-inline-end: 2.75rem; }
.password-wrap .toggle {
  position: absolute;
  inset-inline-end: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted-fg);
  display: inline-flex;
}
.password-wrap .toggle:hover { color: var(--text-primary); }

.form-error {
  font-size: 0.85rem;
  color: var(--destructive);
}
.form-success { font-size: 0.9rem; color: var(--primary); }
.form-note { font-size: 0.75rem; color: var(--muted-fg); }

.alert {
  border: 1px solid rgba(170, 157, 140, 0.5);
  padding: 0.875rem 1rem;
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
}
.alert-error { border-color: rgba(179, 38, 30, 0.4); background: rgba(179, 38, 30, 0.05); color: var(--destructive); }
.alert-success { border-color: rgba(109, 43, 61, 0.4); background: rgba(109, 43, 61, 0.05); color: var(--primary); }

.auth-page {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5rem 1rem;
}
.auth-card { width: 100%; max-width: 28rem; }
.auth-card.wide { max-width: 34rem; }
.auth-card h1 { font-size: clamp(2.25rem, 5vw, 3rem); text-align: center; margin-bottom: 2.5rem; }
.auth-card .kicker {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--muted-fg);
  text-align: center;
  margin-bottom: 0.75rem;
}
.auth-form { display: flex; flex-direction: column; gap: 1.25rem; }
.auth-foot {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(170, 157, 140, 0.4);
  text-align: center;
}

/* Height slider ------------------------------------------------------------- */

.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: rgba(170, 157, 140, 0.5);
  outline: none;
  cursor: pointer;
  border: 0;
  padding: 0;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--primary);
  cursor: pointer;
  border: 2px solid var(--bg);
}
.slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--primary);
  cursor: pointer;
  border: 2px solid var(--bg);
}

.range-scale {
  display: flex;
  justify-content: space-between;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--muted-fg);
  margin-top: 0.5rem;
}

.ruler {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  height: 12px;
  margin-bottom: 0.5rem;
  position: relative;
}
.ruler::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(109, 43, 61, 0.4);
}
.ruler i {
  width: 1px;
  height: 6px;
  background: rgba(109, 43, 61, 0.4);
  position: relative;
  z-index: 1;
}
.ruler i.major { height: 12px; background: var(--primary); }

/* --------------------------------------------------------------------------
   Size & Fit page
   -------------------------------------------------------------------------- */

.sf-hero { display: flex; flex-direction: column; width: 100%; }
.sf-hero .panel {
  width: 100%;
  background: var(--card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 1.5rem;
  order: 1;
}
.sf-hero .panel h1 { font-size: clamp(2.75rem, 7vw, 3.75rem); margin-block: 1rem 1.5rem; }
.sf-hero .panel p { max-width: 24rem; margin-bottom: 3rem; line-height: 1.7; color: rgba(109, 43, 61, 0.8); }
.sf-hero .shot { width: 100%; aspect-ratio: 3 / 4; background: rgba(227, 216, 199, 0.2); }
.sf-hero .shot img { width: 100%; height: 100%; object-fit: cover; }
.sf-hero .shot-a { order: 3; }
.sf-hero .shot-a img { filter: grayscale(20%); }
.sf-hero .shot-b { order: 2; }

@media (min-width: 768px) {
  .sf-hero { flex-direction: row; align-items: stretch; min-height: 70vh; }
  .sf-hero .shot { width: 33.333%; aspect-ratio: auto; height: 70vh; }
  .sf-hero .shot-a { order: 1; }
  /* Explicit height, matching .shot, rather than relying on stretch alone —
     the panel is its own nested flex container and wasn't taking the full
     row height from that alone. */
  .sf-hero .panel { width: 34%; height: 70vh; order: 2; padding: 3rem; }
  .sf-hero .shot-b { order: 3; }
}

/* Tablet only. The desktop h1/p sizes assume a wide laptop column — at the
   narrower 34%-width tablet column the same sizes wrapped "Find your" and
   the paragraph onto extra lines, and that overflow (with height: 70vh and
   centered content) pushed SIZE & FIT up behind the fixed header. Scaling
   everything down here is what brings it back on-screen, not a separate
   visibility fix. */
@media (min-width: 768px) and (max-width: 1023px) {
  .sf-hero .panel { padding: 2rem 1rem; }
  .sf-hero .panel .eyebrow { margin-bottom: 0.25rem; }
  .sf-hero .panel h1 { font-size: 2rem; line-height: 1.1; margin-block: 0.75rem 1rem; }
  .sf-hero .panel p {
    max-width: 14rem;
    font-size: 0.78rem;
    line-height: 1.5;
    margin-bottom: 1.5rem;
  }
  .sf-hero .panel .underline-link { font-size: 0.58rem; letter-spacing: 0.14em; white-space: nowrap; }
}

.match-card {
  border: 1px solid rgba(170, 157, 140, 0.4);
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.match-card .size-out { font-family: var(--font-serif); font-size: 3.75rem; margin-bottom: 0.5rem; }
.match-card .range-out {
  font-size: 0.875rem;
  letter-spacing: 0.18em;
  color: var(--muted-fg);
  margin-bottom: 2rem;
}
.match-card .explain { font-size: 0.9rem; line-height: 1.7; color: rgba(109, 43, 61, 0.8); }

.measure-table {
  width: 100%;
  min-width: 640px;
  text-align: start;
}
.table-scroll { overflow-x: auto; padding-bottom: 1rem; }
.measure-table thead tr {
  border-bottom: 1px solid var(--fg);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted-fg);
}
/* th defaults to center + bold in every browser's UA stylesheet, td defaults
   to left — left unset, that mismatch is exactly what put the header labels
   out of step with their column's values. table-layout: fixed above keeps
   header and body columns numerically identical widths at every viewport. */
.measure-table th,
.measure-table td { text-align: start; }
.measure-table th { padding-block: 1rem; padding-inline-end: 1rem; font-weight: 400; }
.measure-table td { padding-block: 1rem; padding-inline-end: 1rem; font-size: 0.9rem; font-weight: 500; }
.measure-table tbody tr { border-bottom: 1px solid rgba(170, 157, 140, 0.4); transition: background-color 0.2s; }
.measure-table tbody tr.is-match { background: var(--card); }
.measure-table td:first-child { font-family: var(--font-serif); font-size: 1rem; }
.measure-table td:nth-child(2) { color: var(--muted-fg); }

.how-measure-section { padding-block: 2.5rem 3rem; }
@media (min-width: 768px) { .how-measure-section { padding-block: 3rem 3.5rem; } }

.finder-section,
.measurements-section { padding-block: 2.5rem 3rem; }
@media (min-width: 768px) {
  .finder-section,
  .measurements-section { padding-block: 3rem 3.5rem; }
}

.how-measure {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  align-items: center;
}
.how-measure .media { width: 90vw; }
.how-measure .media img { width: 100%; height: auto; object-fit: contain; }
.how-measure .body { width: 100%; display: flex; flex-direction: column; gap: 2rem; }
.how-measure h2 { color: #6d2b3d; }
.how-measure h3 {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #6d2b3d;
  border-inline-start: 2px solid var(--primary);
  padding-inline-start: 0.75rem;
  margin-bottom: 0.5rem;
}
.how-measure .body p { font-size: 0.875rem; line-height: 1.7; color: rgba(109, 43, 61, 0.85); padding-inline-start: 0.75rem; }
@media (min-width: 768px) {
  .how-measure { flex-direction: row; gap: 4rem; }
  .how-measure .media { width: 48%; }
  .how-measure .body { width: 52%; }
}

/* Sizing FAQ — burgundy text scoped to this instance only; the shared
   .accordion component is reused elsewhere (main FAQ, product page) and
   must keep its default color there. */
.sizing-faq h2,
.sizing-faq .accordion summary { color: #6d2b3d; }
.sizing-faq .accordion .content { color: rgba(109, 43, 61, 0.85); }

/* Proportion (homepage) -------------------------------------------------------
   One unified section: the headline sits above a feature pairing — a photo
   with a burgundy quote card overlapping its lower edge, and a supporting
   copy column beside it. The card's overlap comes from a negative margin
   pulling it up over the image rather than absolute positioning, so it
   reflows safely at any width without a sizing context to manage. */

.proportion-section { background: var(--card); padding-block: 4rem; }

.proportion-title { font-size: clamp(1.75rem, 4vw, 2.25rem); line-height: 1.2; margin-bottom: 1.5rem; }

.proportion-feature {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  align-items: flex-start;
}

.proportion-visual { width: 100%; }
.proportion-image { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: rgba(227, 216, 199, 0.3); }
.proportion-image img { width: 100%; height: 100%; object-fit: cover; }
.proportion-card {
  position: relative;
  z-index: 1;
  background: var(--primary);
  color: var(--primary-fg);
  max-width: 20rem;
  padding: 1.75rem 2rem;
  margin-top: -3rem;
  margin-inline-start: 1.5rem;
}
.proportion-card p { font-family: var(--font-serif); font-size: 1.15rem; line-height: 1.5; }

.proportion-copy { width: 100%; }
.proportion-copy .eyebrow { margin-bottom: 1.25rem; }
.proportion-pull {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 3vw, 1.625rem);
  line-height: 1.45;
  border-inline-start: 2px solid var(--primary);
  padding-inline-start: 1.25rem;
  margin-bottom: 1.5rem;
}
.proportion-support {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(109, 43, 61, 0.75);
  padding-inline-start: 1.25rem;
  max-width: 30rem;
}

@media (min-width: 768px) {
  .proportion-card { max-width: 22rem; margin-top: -3.5rem; margin-inline-start: 2rem; padding: 2rem 2.25rem; }
}
@media (min-width: 1024px) {
  .proportion-section { padding-block: 6rem; }
  .proportion-title { font-size: 2.5rem; }
  .proportion-feature { flex-direction: row; align-items: center; gap: 4rem; }
  .proportion-visual { width: 58%; }
  .proportion-copy { width: 42%; }
}

/* --------------------------------------------------------------------------
   Our story
   -------------------------------------------------------------------------- */

.story-hero { display: flex; flex-direction: column; width: 100%; min-height: 85vh; }
.story-hero .media { width: 100%; height: 50vh; }
.story-hero .media img { width: 100%; height: 100%; object-fit: cover; object-position: 40%; }
.story-hero .body {
  width: 100%;
  background: var(--card);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.story-hero h1 { font-size: clamp(2.75rem, 6vw, 4.5rem); line-height: 1.1; margin-block: 1.5rem 2rem; }
.story-hero p { margin-bottom: 3rem; max-width: 28rem; }
@media (min-width: 768px) {
  .story-hero { flex-direction: row; }
  .story-hero .media { width: 50%; height: auto; }
  .story-hero .body { width: 50%; padding: 4rem; }
}
@media (min-width: 1024px) {
  .story-hero .body { padding: 6rem; }
}

.statement {
  background: var(--primary);
  color: var(--primary-fg);
  text-align: center;
  padding-block: 5rem;
}
.statement h2 { font-size: clamp(1.75rem, 4vw, 3rem); line-height: 1.2; margin-bottom: 1.5rem; }
.statement p { opacity: 0.9; max-width: 42rem; margin-inline: auto; line-height: 1.7; }

.founder { display: flex; flex-direction: column; gap: 3rem; align-items: center; }
.founder .body { width: 100%; order: 2; }
.founder .body h2 { font-size: clamp(2.25rem, 5vw, 3.75rem); margin-block: 1.5rem 2rem; }
.founder .body .prose { display: flex; flex-direction: column; gap: 1.5rem; line-height: 1.7; color: rgba(109, 43, 61, 0.8); }
.founder .portrait { width: 100%; order: 1; aspect-ratio: 4 / 5; background: rgba(227, 216, 199, 0.2); overflow: hidden; }
.founder .portrait img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
@media (min-width: 768px) {
  .founder { flex-direction: row; gap: 4rem; }
  .founder .body { width: 45%; order: 1; }
  .founder .portrait { width: 55%; order: 2; }
}

.story-pair { display: flex; flex-direction: column; gap: 2rem; align-items: flex-start; }
.story-pair .col { width: 100%; display: flex; flex-direction: column; }
.story-pair .frame { aspect-ratio: 3 / 4; overflow: hidden; background: rgba(227, 216, 199, 0.2); margin-bottom: 2rem; }
.story-pair .frame img { width: 100%; height: 100%; object-fit: cover; }
.story-pair h3 { font-size: 1.75rem; margin-bottom: 1rem; }
.story-pair p { color: rgba(109, 43, 61, 0.7); line-height: 1.7; }
@media (min-width: 768px) {
  .story-pair { flex-direction: row; gap: 4rem; }
  .story-pair .col { width: 50%; }
  .story-pair .col-a { align-items: flex-end; }
  .story-pair .col-a > * { width: 85%; }
  .story-pair .col-b { margin-top: 12rem; }
  .story-pair .col-b > * { width: 90%; }
  .story-pair .col-b .frame { aspect-ratio: 1 / 1; }
}

.steps {
  background: var(--primary);
  color: var(--primary-fg);
  padding-block: 6rem;
}
.steps-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; }
@media (min-width: 768px) {
  .steps-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
}
.steps .step { border-top: 1px solid rgba(250, 248, 243, 0.3); padding-top: 1.5rem; }
.steps .num { font-family: var(--font-serif); font-size: 3rem; opacity: 0.5; display: block; margin-bottom: 1.5rem; }
.steps h3 {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: 1rem;
}
.steps p { opacity: 0.8; font-size: 0.875rem; line-height: 1.7; }

/* Separates a burgundy section from the burgundy footer (Our Story) so the two
   don't read as one continuous block. Uses the site's own warm white. */
.section-break { background: var(--bg); height: 3rem; }
@media (min-width: 768px) { .section-break { height: 4rem; } }

/* --------------------------------------------------------------------------
   Checkout
   -------------------------------------------------------------------------- */

.checkout-layout { display: flex; flex-direction: column; }

/* The form is the grid container so Order Summary can sit as a real grid
   item before the page heading on mobile/tablet — named areas place it
   back in its own side column at 1024px+ regardless of this order, so this
   doesn't touch the desktop layout at all. */
.checkout-form {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "summary" "head" "contact" "delivery" "payment" "notice" "submit" "consent";
  row-gap: 0;
}
.checkout-head     { grid-area: head; }
.checkout-contact  { grid-area: contact; }
.checkout-delivery { grid-area: delivery; }
.checkout-summary  { grid-area: summary; margin-bottom: 2rem; }
.checkout-payment  { grid-area: payment; }
.checkout-notice   { grid-area: notice; margin-block-end: 2rem; }
.checkout-submit   { grid-area: submit; }
.checkout-consent  { grid-area: consent; margin-top: 1rem; }
.checkout-consent a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 1024px) {
  .checkout-form {
    grid-template-columns: 1fr 400px;
    column-gap: 6rem;
    grid-template-areas:
      "head     summary"
      "contact  summary"
      "delivery summary"
      "payment  summary"
      "notice   summary"
      "submit   summary"
      "consent  summary";
  }
  .checkout-summary { margin-bottom: 0; }
}

.checkout-form h1 { font-size: clamp(1.875rem, 4vw, 2.5rem); margin-bottom: 0.75rem; }
.checkout-step {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  border-bottom: 1px solid rgba(170, 157, 140, 0.4);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}
.checkout-section { margin-bottom: 2rem; display: flex; flex-direction: column; gap: 1rem; }

.pay-options { border: 1px solid rgba(170, 157, 140, 0.4); }
.pay-option + .pay-option { border-top: 1px solid rgba(170, 157, 140, 0.4); }
.pay-option > label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
.radio-dot {
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.2s;
}
.radio-dot::after {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--primary);
  opacity: 0;
  transition: opacity 0.2s;
}
.pay-detail { padding: 0 1rem 1.25rem 2.75rem; font-size: 0.875rem; display: none; }
.pay-detail p + p { margin-top: 0.75rem; }

/* In-context PayPal / card buttons (assets/js/site.js). max-width keeps the
   PayPal-hosted button row from stretching the full checkout column. */
.paypal-btns { margin-top: 0.9rem; max-width: 24rem; }
.paypal-btns[hidden] { display: none; }
.paypal-btns-status { margin-top: 0.6rem; }
.paypal-btns-status.is-error { color: #9d2f2f; }

/* One trio of rules per payment method. EVERY method rendered in
   pages/checkout.php needs a line in each group here — a method missing from
   this list still submits (its label toggles the radio) but shows no selected
   state or details, so it reads as "won't select". */
#pay-cliq:checked ~ .pay-options .pay-cliq .pay-detail,
#pay-cod:checked ~ .pay-options .pay-cod .pay-detail,
#pay-bank:checked ~ .pay-options .pay-bank .pay-detail,
#pay-paypal:checked ~ .pay-options .pay-paypal .pay-detail { display: block; }
#pay-cliq:checked ~ .pay-options .pay-cliq .radio-dot,
#pay-cod:checked ~ .pay-options .pay-cod .radio-dot,
#pay-bank:checked ~ .pay-options .pay-bank .radio-dot,
#pay-paypal:checked ~ .pay-options .pay-paypal .radio-dot { border-color: var(--primary); }
#pay-cliq:checked ~ .pay-options .pay-cliq .radio-dot::after,
#pay-cod:checked ~ .pay-options .pay-cod .radio-dot::after,
#pay-bank:checked ~ .pay-options .pay-bank .radio-dot::after,
#pay-paypal:checked ~ .pay-options .pay-paypal .radio-dot::after { opacity: 1; }

/* A hidden option must not leave the border of the row above it behind. */
.pay-option[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Bank transfer details (confirmation screen)
   -------------------------------------------------------------------------- */

.bank-card {
  border: 1px solid rgba(170, 157, 140, 0.4);
  background: rgba(227, 216, 199, 0.18);
  padding: 1.25rem;
  margin-block: 1.5rem;
  text-align: start;
}
.bank-card h3 {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;
  margin-bottom: 1rem;
}
.bank-row {
  display: flex;
  align-items: baseline;
  gap: 0.35rem 0.75rem;
  padding-block: 0.5rem;
  font-size: 0.875rem;
}
.bank-row + .bank-row { border-top: 1px solid rgba(170, 157, 140, 0.25); }
.bank-row .k { color: var(--muted-fg); flex: 0 0 auto; min-width: 8.5rem; }
/* No wrapping on this row: the IBAN is long enough to push the Copy button
   onto a line of its own, which orphans it from the value it copies. The
   value shrinks and breaks internally instead. */
.bank-row .v {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  flex: 1 1 auto;
  min-width: 0;
}
@media (max-width: 480px) {
  .bank-row { display: block; }
  .bank-row .k { display: block; margin-bottom: 0.15rem; }
}

.cliq-row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.cliq-row .alias { font-weight: 600; letter-spacing: 0.03em; }
.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--muted-fg);
}
.copy-btn:hover { color: var(--primary); }

.notice {
  background: rgba(227, 216, 199, 0.18);
  border: 1px solid rgba(170, 157, 140, 0.3);
  padding: 1rem;
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--muted-fg);
}
.notice .t {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}
.notice a { color: var(--text-primary); text-decoration: underline; text-underline-offset: 4px; }

/* The IMPORTANT NOTE shown before ordering and repeated on the confirmation
   screen (includes/important_note.php). Burgundy heading and edge so it is
   the one block a customer cannot skim past — emphasis by brand colour, not
   by warning-yellow, so it still reads as premium rather than as an error. */
.notice-important {
  background: rgba(109, 43, 61, 0.05);
  border: 1px solid rgba(109, 43, 61, 0.22);
  border-inline-start: 3px solid var(--primary);
  padding: 1.15rem 1.25rem;
  color: var(--text-primary);
}
.notice-important .t {
  color: var(--primary);
  font-size: 0.72rem;
  margin-bottom: 0.6rem;
}
.notice-important a {
  /* Its own line under the policy text — inline it would butt straight up
     against the last word, since the markup is generated without whitespace. */
  display: block;
  width: fit-content;
  margin-top: 0.7rem;
  color: var(--primary);
  font-weight: 500;
}
/* The checkout override paints every .notice cream; this block wants its own
   burgundy tint, so it has to win on specificity inside .checkout-layout. */
.checkout-layout .notice.notice-important { background: rgba(109, 43, 61, 0.05); }

/* --------------------------------------------------------------------------
   Phone + dialling code pair (includes/phone.php)
   -------------------------------------------------------------------------- */

.phone-field {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  width: 100%;
}
.phone-field .phone-dial {
  flex: 0 0 auto;
  width: 7.75rem;
  min-width: 0;
  font-variant-numeric: tabular-nums;
}
.phone-field .phone-number {
  flex: 1 1 auto;
  min-width: 0;   /* without this a flex item refuses to shrink below its
                     intrinsic width and the pair overflows on narrow phones */
}
@media (max-width: 420px) {
  .phone-field { gap: 0.35rem; }
  .phone-field .phone-dial {
    width: 6.75rem;
    font-size: 0.85rem;
    padding-inline-start: 0.5rem;
    padding-inline-end: 1.6rem;
    background-position: right 0.45rem center;
  }
}

/* Checkout: fields/cards match the header's cream (var(--bg)) instead of the
   slightly deeper linen tint they had, and grey supporting text becomes
   brand burgundy — scoped to .checkout-layout so My Account's own .notice,
   sign-in forms, etc. keep their existing colors untouched. */
.checkout-layout .summary-card,
.checkout-layout .notice,
.checkout-layout input,
.checkout-layout select,
.checkout-layout textarea,
.checkout-layout .input {
  background-color: var(--bg);
}
.checkout-layout .muted,
.checkout-layout .form-note,
.checkout-layout .notice { color: #6d2b3d; }

.summary-card {
  background: rgba(227, 216, 199, 0.18);
  border: 1px solid rgba(170, 157, 140, 0.2);
  padding: 1.5rem;
}
@media (min-width: 1024px) {
  .summary-card { padding: 2rem; position: sticky; top: 8rem; }
}
.summary-card h2 { font-size: 1.5rem; margin-bottom: 1.5rem; }
.summary-lines { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 2rem; }
.summary-line { display: flex; gap: 1rem; }
.summary-line .thumb { width: 4rem; height: 5rem; flex-shrink: 0; background: rgba(227, 216, 199, 0.3); overflow: hidden; }
.summary-line .thumb img { width: 100%; height: 100%; object-fit: cover; }
.summary-line .info { flex: 1; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.summary-line .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; }
.summary-line h3 { font-family: var(--font-serif); font-size: 1rem; line-height: 1.2; }
.summary-line .variant {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--muted-fg);
  margin-top: 0.25rem;
}

/* In-summary line editing on the checkout page. */
.summary-line-edit {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.4rem;
  flex-wrap: wrap;
}
.summary-line-edit select {
  font-size: 0.7rem;
  padding: 0.2rem 1.3rem 0.2rem 0.4rem;
  border: 1px solid rgba(170, 157, 140, 0.5);
  background: transparent;
  color: var(--fg);
  max-width: 8rem;
}
.summary-line-qty {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.4rem;
}
.summary-line-qty .qty { padding: 0.1rem 0.4rem; }
.summary-line-qty .qty .value { font-size: 0.8rem; min-width: 1rem; }
.ck-line-apply,
.ck-line-remove {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted-fg);
  padding: 0.25rem 0.5rem;
  border: 1px solid rgba(170, 157, 140, 0.5);
}
.ck-line-remove { border: 0; text-decoration: underline; padding-inline: 0; }

.totals {
  border-top: 1px solid rgba(170, 157, 140, 0.4);
  padding-top: 1.5rem;
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 0.9rem;
}
.totals .row { display: flex; justify-content: space-between; }
.totals .free-note {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--primary);
}
.grand-total {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-top: 1px solid rgba(170, 157, 140, 0.4);
  padding-top: 1.5rem;
}
.grand-total .amount { font-family: var(--font-serif); font-size: 1.5rem; }

.confirm-panel {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
}
.confirm-card {
  max-width: 28rem;
  width: 100%;
  background: var(--card);
  padding: 3rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.confirm-card h1 { font-size: 1.875rem; margin-block: 1.5rem 1rem; }
.confirm-card .tick { color: var(--primary); }
.confirm-card .cliq-box {
  font-size: 0.875rem;
  color: var(--muted-fg);
  border: 1px solid rgba(170, 157, 140, 0.4);
  padding: 1rem;
  margin-bottom: 1.5rem;
  line-height: 1.7;
}
.confirm-card .cliq-box b { color: var(--text-primary); }

/* Jordan delivery promise — sized to be read, not skimmed past. */
.confirm-delivery {
  font-size: 1rem;
  font-weight: 500;
  color: var(--primary);
  margin-bottom: 1.5rem;
}
/* The card centres everything; the important note is a block of policy copy
   and has to read left-aligned (start-aligned) like it does at checkout. */
/* International bank transfer. This is the one thing on the screen the
   customer still has to act on, so it is set at reading size in the brand
   burgundy — not as the muted aside .cliq-box is. */
.confirm-card .bank-notice {
  width: 100%;
  text-align: start;
  border-inline-start: 3px solid var(--primary);
  padding: 1.25rem 1.25rem 1.25rem 1.25rem;
  padding-inline-start: 1.25rem;
  margin-bottom: 1.5rem;
  background: rgba(109, 43, 61, 0.05);
}
.confirm-card .bank-lead {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--primary);
  margin-bottom: 0.75rem;
}
.confirm-card .bank-body {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--text-primary);
}
.confirm-card .bank-body + .bank-body { margin-top: 0.75rem; }
.confirm-card .bank-card { width: 100%; }
/* The copy button sits at the end of each row, and never wraps under the
   value on a phone — it is how the IBAN gets copied. */
.bank-row .copy-btn { flex: 0 0 auto; margin-inline-start: auto; }

.confirm-card .confirm-note {
  width: 100%;
  text-align: start;
  margin-bottom: 1.75rem;
}
.confirm-upsell {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(170, 157, 140, 0.4);
  width: 100%;
}

/* --------------------------------------------------------------------------
   Account
   -------------------------------------------------------------------------- */

.account-layout { display: flex; flex-direction: column; gap: 2.5rem; }
@media (min-width: 768px) {
  .account-layout { flex-direction: row; gap: 5rem; }
  .account-nav { width: 14rem; flex-shrink: 0; }
}

.account-head-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.account-settings-toggle { display: none; }
.account-nav-head { display: none; }
.account-nav-backdrop { display: none; }

.account-nav .items {
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  border-bottom: 1px solid rgba(170, 157, 140, 0.4);
  padding-bottom: 0.75rem;
  scrollbar-width: none;
}
.account-nav .items::-webkit-scrollbar { display: none; }
.account-nav a {
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.625rem 0.75rem;
  color: var(--muted-fg);
  transition: color 0.2s, background-color 0.2s;
}
.account-nav a:hover { color: var(--text-primary); }
.account-nav a.is-active { color: var(--primary); }

/* Sign Out: a real burgundy button everywhere (mobile drawer, tablet/desktop
   sidebar alike) — not just a muted text link. */
.account-signout-form { margin-top: 1.5rem; }
.account-signout {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--primary);
  color: var(--primary-fg);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.875rem 1.5rem;
  transition: opacity 0.2s;
}
.account-signout:hover { opacity: 0.85; }

@media (min-width: 768px) {
  .account-nav .items { flex-direction: column; border-bottom: 0; padding-bottom: 0; overflow: visible; }
  .account-nav a { border-inline-start: 2px solid transparent; }
  .account-nav a.is-active {
    border-inline-start-color: var(--primary);
    background: rgba(227, 216, 199, 0.18);
  }
}

/* Mobile only: the horizontal tab strip becomes a gear-triggered slide-in
   drawer instead — tablet/desktop keep the vertical sidebar above as-is. */
@media (max-width: 767px) {
  .account-settings-toggle {
    display: inline-flex;
    padding: 0.5rem;
    margin: -0.5rem 0 0;
    color: var(--text-primary);
    flex-shrink: 0;
  }

  .account-nav {
    position: fixed;
    top: 0;
    bottom: 0;
    inset-inline-end: 0;
    width: 85vw;
    max-width: 22rem;
    background: var(--bg);
    z-index: 70;
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    box-shadow: -8px 0 40px rgba(21, 20, 18, 0.15);
  }
  [dir="rtl"] .account-nav { transform: translateX(-100%); }
  .account-nav.is-open { transform: translateX(0); }

  .account-nav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(170, 157, 140, 0.3);
  }

  .account-nav .items {
    flex-direction: column;
    border-bottom: 0;
    padding-bottom: 0;
    overflow: visible;
    gap: 0.25rem;
  }
  .account-nav a { padding: 0.75rem 0.5rem; border-inline-start: 2px solid transparent; }
  .account-nav a.is-active {
    border-inline-start-color: var(--primary);
    background: rgba(227, 216, 199, 0.18);
  }

  .account-signout-form { margin-top: auto; padding-top: 1.5rem; }

  .account-nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 65;
    background: rgba(21, 20, 18, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }
  .account-nav-backdrop.is-open { opacity: 1; pointer-events: auto; }
}

.account-body { flex: 1; min-width: 0; }
.account-body h2.section-title { font-size: clamp(1.5rem, 3vw, 1.875rem); margin-bottom: 2rem; }

.stack { display: flex; flex-direction: column; gap: 2.5rem; }
.stack-sm { display: flex; flex-direction: column; gap: 1rem; }

.mini-head {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted-fg);
  border-bottom: 1px solid rgba(170, 157, 140, 0.4);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}
.mini-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.mini-row .headline { font-family: var(--font-serif); font-size: 1.25rem; }

.order-list { border-block: 1px solid rgba(170, 157, 140, 0.4); }
.order-list > details + details { border-top: 1px solid rgba(170, 157, 140, 0.4); }
.order-list summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.25rem;
}
.order-list summary::-webkit-details-marker { display: none; }
.order-list summary h3 { font-size: 1.125rem; }
.order-list summary .meta {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--muted-fg);
  margin-top: 0.25rem;
}
.order-list summary .right { display: flex; align-items: center; gap: 1rem; }
.order-list summary .right .chev {
  width: 8px; height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.25s;
}
.order-list details[open] summary .right .chev { transform: rotate(-135deg); }

.order-detail { padding-bottom: 2rem; display: flex; flex-direction: column; gap: 1.5rem; font-size: 0.875rem; }
.order-detail .cols { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) {
  .order-detail .cols { grid-template-columns: repeat(2, 1fr); }
}
.order-detail h4 {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted-fg);
  margin-bottom: 0.5rem;
}
.order-detail .lines { display: flex; flex-direction: column; gap: 0.375rem; }
.order-detail .money {
  padding-top: 0.75rem;
  margin-top: 0.75rem;
  border-top: 1px solid rgba(170, 157, 140, 0.4);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.order-detail .money .row { display: flex; justify-content: space-between; }
.order-detail .money .row.grand { font-weight: 600; }

.exchange-box { border: 1px solid rgba(109, 43, 61, 0.4); padding: 1rem; }
.exchange-box .t {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 0.25rem;
}

.size-chips { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.size-chip {
  border: 1px solid rgba(170, 157, 140, 0.6);
  padding: 0.625rem 1.25rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}
.size-chip:hover { border-color: var(--fg); }
.size-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.size-chip:has(input:checked) { border-color: var(--primary); background: var(--primary); color: #fff; }
.size-chip .rng { text-transform: none; opacity: 0.7; }

.address-card {
  border: 1px solid rgba(170, 157, 140, 0.4);
  padding: 1.5rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.address-card .tag {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--primary);
  display: block;
  margin-bottom: 0.5rem;
}
.address-card .actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-end;
  flex-shrink: 0;
}
.address-card .body { font-size: 0.875rem; line-height: 1.7; }

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  font-size: 0.875rem;
}
.checkbox-row input { width: auto; accent-color: var(--primary); }

.policy-list { display: flex; flex-direction: column; gap: 0.75rem; color: var(--muted-fg); list-style: none; padding: 0; }
.policy-list b, .policy-list strong { color: var(--text-primary); font-weight: 600; }
.policy-list a { color: var(--text-primary); text-decoration: underline; text-underline-offset: 4px; }

/* --------------------------------------------------------------------------
   Returns page
   -------------------------------------------------------------------------- */

.policy-section { margin-bottom: 5rem; }
.policy-section > h2 {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  border-bottom: 1px solid var(--fg);
  padding-bottom: 0.75rem;
  margin-bottom: 2.5rem;
}
.policy-block + .policy-block {
  border-top: 1px solid rgba(170, 157, 140, 0.4);
  padding-top: 2.5rem;
  margin-top: 3rem;
}
.policy-block h3 { font-size: 1.5rem; margin-bottom: 0.75rem; }
.policy-block p { color: var(--muted-fg); line-height: 1.7; }
.policy-block b { color: var(--text-primary); font-weight: 500; }
.policy-block a { color: var(--text-primary); text-decoration: underline; text-underline-offset: 4px; }

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.contact-page { display: flex; flex-direction: column; width: 100%; min-height: calc(100vh - var(--header-h)); }
.contact-media { display: none; }
.contact-body {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5rem 1.5rem;
}
.contact-body h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); margin-bottom: 1.5rem; }
.contact-body > p { color: var(--muted-fg); margin-bottom: 4rem; font-size: 1.075rem; max-width: 28rem; }
.contact-list { display: flex; flex-direction: column; gap: 3rem; }
.contact-item { display: flex; align-items: center; gap: 1.5rem; }
.contact-item .ring {
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.2s, color 0.2s;
}
.contact-item:hover .ring { border-color: var(--primary); color: var(--primary); }
.contact-item h3 {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: 0.25rem;
}
.contact-item p { color: var(--muted-fg); font-size: 0.875rem; transition: color 0.2s; }
.contact-item:hover p { color: var(--text-primary); }
.contact-studio { margin-top: 6rem; padding-top: 2rem; border-top: 1px solid rgba(170, 157, 140, 0.4); }

@media (min-width: 768px) {
  .contact-page { flex-direction: row; }
  .contact-media { display: block; width: 50%; position: relative; background: var(--secondary); }
  .contact-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .contact-body { width: 50%; padding: 4rem; }
}
@media (min-width: 1024px) {
  .contact-body { padding: 6rem; }
}

/* --------------------------------------------------------------------------
   Admin orders
   -------------------------------------------------------------------------- */

.admin-wrap { padding-block: 2rem; }
.admin-wrap h1 { font-family: var(--font-sans); font-size: 1.5rem; font-weight: 700; margin-bottom: 1.5rem; }

.admin-table-wrap { border: 1px solid var(--border); background: var(--card); overflow-x: auto; }
.admin-table { width: 100%; text-align: start; font-size: 0.875rem; min-width: 820px; }
.admin-table thead { background: rgba(227, 216, 199, 0.35); }
.admin-table th { padding: 1rem; font-weight: 600; font-family: var(--font-sans); }
.admin-table td { padding: 1rem; }
.admin-table tbody tr { border-top: 1px solid var(--border); }
.admin-table tbody tr:hover { background: rgba(227, 216, 199, 0.15); }
.admin-table .mono { font-family: ui-monospace, Menlo, monospace; }
.pill {
  display: inline-flex;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  background: var(--secondary);
  font-size: 0.72rem;
  font-weight: 500;
}

.slip {
  background: #fff;
  color: #000;
  padding: 2rem;
  border: 1px solid var(--border);
  font-family: var(--font-sans);
}
@media (min-width: 768px) { .slip { padding: 3rem; } }
.slip-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  border-bottom: 2px solid #000;
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
}
.slip-head h1 { font-family: var(--font-serif); font-size: 1.875rem; font-weight: 700; margin-bottom: 0.25rem; }
.slip-head .sub { font-size: 0.875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; }
.slip-head .right { text-align: end; }
.slip-head .no { font-family: ui-monospace, Menlo, monospace; font-size: 1.25rem; font-weight: 700; }
.slip-cols { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-bottom: 2rem; }
@media (min-width: 768px) { .slip-cols { grid-template-columns: repeat(2, 1fr); } }
.slip h3 {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  border-bottom: 1px solid #d4d4d4;
  padding-bottom: 0.25rem;
  margin-bottom: 0.75rem;
}
.slip .name { font-weight: 700; font-size: 1.125rem; }
.slip .box { margin-top: 0.5rem; font-size: 0.875rem; padding: 0.5rem; background: #f3f3f3; }
.slip .box.note { border-inline-start: 4px solid #000; }
.slip table { width: 100%; margin-bottom: 2rem; }
.slip table th { text-align: start; padding-block: 0.5rem; border-bottom: 1px solid #d4d4d4; font-size: 0.875rem; }
.slip table td { padding-block: 0.75rem; border-bottom: 1px solid #eee; }
.slip .totals-box { width: 100%; margin-inline-start: auto; }
@media (min-width: 768px) { .slip .totals-box { width: 50%; } }
.slip .totals-box .row { display: flex; justify-content: space-between; padding-block: 0.5rem; font-size: 0.875rem; }
.slip .totals-box .row.sep { border-bottom: 1px solid #d4d4d4; }
.slip .totals-box .row.grand { padding-block: 1rem; font-size: 1.25rem; font-weight: 700; }
.slip-foot { margin-top: 3rem; text-align: center; font-size: 0.72rem; color: #737373; text-transform: uppercase; letter-spacing: 0.18em; }

@media print {
  .announce, .site-header, .site-footer, .no-print, .cart-drawer, .drawer-backdrop { display: none !important; }
  .site-main { padding-top: 0; }
  .slip { border: 0; padding: 0; font-size: 12pt; }
  body { background: #fff; }
}

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */

.notfound {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 1rem;
}
.notfound .code {
  font-family: var(--font-brand);
  font-size: clamp(4rem, 18vw, 9rem);
  letter-spacing: 0.08em;
  color: var(--primary);
  line-height: 1;
  margin-bottom: 1.5rem;
}
.notfound h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin-bottom: 1rem; }
.notfound p { color: var(--muted-fg); max-width: 26rem; margin-bottom: 2.5rem; }

/* --------------------------------------------------------------------------
   Motion preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .marquee-track { animation: none !important; }
}

/* ==========================================================================
   Right-to-left
   The layout is built on logical properties, so this section only handles
   what direction-awareness cannot reach: raw transforms, typefaces with no
   Arabic cut, and Latin letter-spacing that breaks joined script.
   ========================================================================== */

[dir="rtl"] {
  line-height: 1.7;
}

/* Playfair and Sackers Gothic have no Arabic coverage — name a real Arabic
   face rather than letting the browser synthesise one. */
[dir="rtl"] body,
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6,
[dir="rtl"] .headline,
[dir="rtl"] .display,
[dir="rtl"] .hero h1,
[dir="rtl"] .marquee-serif h2,
[dir="rtl"] .notfound .code {
  font-family: "Noto Kufi Arabic", "Segoe UI", Tahoma, sans-serif;
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] .headline,
[dir="rtl"] .display,
[dir="rtl"] .hero h1 {
  letter-spacing: 0;
  line-height: 1.35;
}

/* Wide Latin tracking looks broken on joined Arabic script. */
[dir="rtl"] .eyebrow,
[dir="rtl"] .label-xs,
[dir="rtl"] .btn,
[dir="rtl"] .announce,
[dir="rtl"] .nav-desktop,
[dir="rtl"] .header-action-text,
[dir="rtl"] .footer-col h4,
[dir="rtl"] .checkout-step,
[dir="rtl"] .mini-head,
[dir="rtl"] .account-nav a,
[dir="rtl"] .accordion summary,
[dir="rtl"] .size-label .range,
[dir="rtl"] .cart-line .variant,
[dir="rtl"] .summary-line .variant,
[dir="rtl"] .field label,
[dir="rtl"] .form-label,
[dir="rtl"] .pdp-color-name,
[dir="rtl"] .three-ways figcaption,
[dir="rtl"] .size-chip,
[dir="rtl"] .steps h3,
[dir="rtl"] .how-measure h3,
[dir="rtl"] .policy-section > h2,
[dir="rtl"] .faq-group > h2,
[dir="rtl"] .lang-switch,
[dir="rtl"] .timeline .stage-label,
[dir="rtl"] .track-banner .t,
[dir="rtl"] .track-meta h4,
[dir="rtl"] .status-editor h2,
[dir="rtl"] .hero p {
  letter-spacing: 0;
}

/* The bag is anchored to the inline end, but a translate is a raw axis and
   has to be mirrored by hand. */
[dir="rtl"] .cart-drawer { transform: translateX(-100%); }
[dir="rtl"] .cart-drawer.is-open { transform: translateX(0); }

/* Arrow glyphs carry their own direction. */
[dir="rtl"] .flip-x { transform: scaleX(-1); }

/* Scroll the marquee the other way so text reads into the motion.
   In RTL the flex track sits with its RIGHT edge flush against the container
   and its duplicate half overflows to the LEFT, so the travel has to be
   positive: 0 -> +50% drags that off-screen copy rightward into view, and
   because the two halves are identical the loop point is invisible.
   (Going negative instead pushes the track a whole group-width off-screen
   left, which blanks the strip for most of the cycle.) */
@keyframes marquee-half-rtl {
  from { transform: translateX(0); }
  to   { transform: translateX(50%); }
}
[dir="rtl"] .marquee-track { animation-name: marquee-half-rtl; }

/* Measurement figures stay aligned to the inline start for scanning. */
[dir="rtl"] .measure-table td,
[dir="rtl"] .measure-table th { text-align: start; }

/* Language switcher ------------------------------------------------------- */

.lang-switch {
  /* Hidden on mobile: the header row cannot hold a hamburger, a centred logo,
     two action icons AND a language switch at 360-390px — it was overlapping the
     logo. The switch lives in the mobile menu at those sizes instead. */
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 2.1rem;
  padding: 0.3rem 0.5rem;
  margin-inline-end: 0.25rem;
  border: 1px solid rgba(170, 157, 140, 0.55);
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s;
}
.lang-switch:hover { color: var(--primary); border-color: var(--primary); }

/* The switch shows the *other* language's native name, so on an LTR (English)
   page it can be showing Arabic — letter-spacing breaks Arabic letter
   joining regardless of the page's own dir, so key this off the link's own
   lang attribute rather than [dir="rtl"]. */
.lang-switch[lang="ar"],
.lang-switch-sm[lang="ar"] {
  letter-spacing: 0;
}

@media (min-width: 1024px) {
  .lang-switch { display: inline-flex; }
}

/* Compact language switch beside the hamburger, sized smaller than
   .lang-switch because at 320-390px the row also has to hold a centred
   logo and two action icons. */
.lang-switch-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 2.1rem;
  padding: 0.3rem 0.4rem;
  margin-inline-start: 0.35rem;
  border: 1px solid rgba(170, 157, 140, 0.55);
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  transition: color 0.2s, border-color 0.2s;
}
.lang-switch-sm:hover { color: var(--primary); border-color: var(--primary); }

@media (min-width: 1024px) {
  .lang-switch-sm { display: none; }
}

/* Language switch inside the mobile menu, set apart from the page links. */

/* ==========================================================================
   Google sign-in
   ========================================================================== */

.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.875rem 1.5rem;
  background: #fff;
  color: #3c4043;
  border: 1px solid var(--border);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  transition: background-color 0.2s, border-color 0.2s;
}
.btn-google:hover { background: #f6f6f6; border-color: var(--fg); }
.btn-google svg { flex-shrink: 0; }

.auth-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--muted-fg);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}
[dir="rtl"] .auth-divider { letter-spacing: 0; }
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(170, 157, 140, 0.4);
}

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

.track-hero { text-align: center; padding-block: 4rem 2rem; }
.track-hero h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 1rem; }
.track-hero p { color: var(--muted-fg); max-width: 34rem; margin-inline: auto; }

.track-form {
  max-width: 30rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.track-card {
  border: 1px solid rgba(170, 157, 140, 0.4);
  background: var(--bg);
  max-width: 46rem;
  margin-inline: auto;
}
.track-card-head {
  padding: 1.5rem;
  border-bottom: 1px solid rgba(170, 157, 140, 0.4);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: flex-start;
  background: var(--card);
}
.track-card-head h2 { font-size: 1.5rem; }
.track-code {
  /* A Latin identifier: RTL would render 178-ABC123 as ABC123-178. */
  direction: ltr;
  unicode-bidi: isolate;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.track-body { padding: 1.5rem; }
@media (min-width: 768px) {
  .track-card-head, .track-body { padding: 2rem; }
}

.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li {
  position: relative;
  padding-inline-start: 2.75rem;
  padding-bottom: 2rem;
}
.timeline li:last-child { padding-bottom: 0; }

/* Rail connecting the stage dots. */
.timeline li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0.6rem;
  top: 1.6rem;
  bottom: -0.4rem;
  width: 2px;
  background: rgba(170, 157, 140, 0.35);
}
.timeline li:last-child::before { display: none; }
.timeline li.done::before { background: var(--primary); }

.timeline .dot {
  position: absolute;
  inset-inline-start: 0;
  top: 0.15rem;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  border: 2px solid rgba(170, 157, 140, 0.6);
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.timeline li.done .dot { background: var(--primary); border-color: var(--primary); color: #fff; }
.timeline li.upcoming .dot svg { display: none; }
.timeline li.current .dot svg { display: none; }
.timeline li.current .dot {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(109, 43, 61, 0.15);
}
.timeline li.current .dot::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--primary);
}

.timeline .stage-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--muted-fg);
}
.timeline li.done .stage-label { color: var(--text-primary); }
.timeline li.current .stage-label { color: var(--primary); }
.timeline .stage-desc { font-size: 0.875rem; color: var(--muted-fg); margin-top: 0.35rem; }
.timeline .stage-at { font-size: 0.72rem; color: var(--muted-fg); margin-top: 0.35rem; }

.track-banner {
  border: 1px solid rgba(109, 43, 61, 0.4);
  background: rgba(109, 43, 61, 0.05);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}
.track-banner .t {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--primary);
  margin-bottom: 0.25rem;
}

.track-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(170, 157, 140, 0.4);
  font-size: 0.875rem;
}
@media (min-width: 640px) {
  .track-meta { grid-template-columns: repeat(2, 1fr); }
}
.track-meta h4 {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted-fg);
  margin-bottom: 0.5rem;
}
.track-meta p { color: var(--muted-fg); line-height: 1.7; }

/* Owner status editor ------------------------------------------------------ */

.status-editor {
  border: 1px solid var(--border);
  background: var(--card);
  padding: 1.5rem;
  margin-bottom: 2rem;
}
.status-editor h2 {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 1rem;
}

.event-log { list-style: none; padding: 0; margin: 0; font-size: 0.85rem; }
.event-log li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.5rem;
  border-bottom: 1px solid rgba(170, 157, 140, 0.3);
}
.event-log li:last-child { border-bottom: 0; }
.event-log .when { color: var(--muted-fg); white-space: nowrap; }

/* ---- Storefront popup ------------------------------------------------------ */
.site-popup {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.site-popup-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(21, 20, 18, 0.55);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.site-popup-card {
  position: relative;
  background: var(--bg);
  max-width: 26rem;
  width: 100%;
  padding: 2.5rem 2rem 2rem;
  text-align: center;
  transform: translateY(12px);
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.site-popup.is-open .site-popup-backdrop { opacity: 1; }
.site-popup.is-open .site-popup-card { transform: translateY(0); opacity: 1; }
.site-popup-card h3 {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
}
.site-popup-card p {
  color: var(--muted-fg);
  margin-bottom: 1.5rem;
  line-height: 1.6;
}
.site-popup-close {
  position: absolute;
  top: 0.75rem;
  inset-inline-end: 0.75rem;
  background: none;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  color: var(--text-primary);
}

/* An optional banner image — flush with the card's top edge, breaking out of
   its own padding, with the close button sitting on top of it instead of
   beside the headline. */
.site-popup-image {
  margin: -2.5rem -2rem 1.5rem;
  overflow: hidden;
}
.site-popup-image img { display: block; width: 100%; max-height: 16rem; object-fit: cover; }
.site-popup-card.has-image .site-popup-close {
  background: rgba(21, 20, 18, 0.45);
  border-radius: 999px;
  color: #fff;
}

/* ---- Product image viewer (lightbox) --------------------------------------- */
.lightbox-trigger { cursor: zoom-in; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(21, 20, 18, 0.95);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.lightbox.is-open { opacity: 1; }

.lightbox-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: none;
}
.lightbox-img {
  max-width: 92vw;
  max-height: 88vh;
  width: auto;
  height: auto;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  cursor: zoom-in;
  transform-origin: center center;
  transition: transform 0.15s ease;
  will-change: transform;
}
.lightbox-stage.is-gesturing .lightbox-img { transition: none; }
.lightbox-stage.is-zoomed .lightbox-img { cursor: grab; }
.lightbox-stage.is-panning .lightbox-img { cursor: grabbing; }

.lightbox-close,
.lightbox-nav {
  position: absolute;
  background: none;
  border: none;
  color: var(--primary-fg);
  cursor: pointer;
  padding: 0.75rem;
  z-index: 1;
  transition: opacity 0.15s ease;
}
.lightbox-close:hover,
.lightbox-nav:hover { opacity: 0.7; }
.lightbox-close { top: 0.5rem; inset-inline-end: 0.5rem; }
.lightbox-prev { inset-inline-start: 0; top: 50%; transform: translateY(-50%); }
.lightbox-next { inset-inline-end: 0; top: 50%; transform: translateY(-50%); }
.lightbox-nav[hidden] { display: none; }
[dir="rtl"] .lightbox-prev svg,
[dir="rtl"] .lightbox-next svg { transform: scaleX(-1); }

@media (min-width: 768px) {
  .lightbox-close { top: 1.5rem; inset-inline-end: 1.5rem; }
  .lightbox-prev { inset-inline-start: 1rem; }
  .lightbox-next { inset-inline-end: 1rem; }
}

/* ---- Admin order-confirmation landing (pages/confirm-order.php) ----------
   Reached from the shop's own new-order email, so it borrows the storefront
   chrome but is intentionally plain: one card, one outcome, no navigation. */
.confirm-card {
  max-width: 34rem;
  margin-inline: auto;
  padding: 2rem;
  border: 1px solid var(--line, #e0dad0);
  border-radius: 4px;
  text-align: center;
}
.confirm-card--ok   { border-color: #b7cbb4; }
.confirm-card--warn { border-color: #d9c9a6; }
.confirm-card__head { margin: 0 0 1rem; font-size: 1.35rem; }
.confirm-card__ref {
  margin: 0 0 .35rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  align-items: center;
}
.confirm-card__ref-label {
  font-size: .6875rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .65;
}
.confirm-card__ref .mono {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 1.25rem;
  letter-spacing: .1em;
}
.confirm-card__status { margin: 0 0 1.25rem; font-size: .9375rem; }
.confirm-card__body   { margin: 0; opacity: .8; line-height: 1.65; }

/* Approximate local-currency line under the JOD total (spec §15). Deliberately
   quiet: the JOD figure above it is what the customer is actually charged. */
.currency-hint {
  margin: .5rem 0 0;
  text-align: center;
  font-size: .8125rem;
  opacity: .7;
}

/* ---- Account details: view-first with an Edit button ---------------------- */
.account-section-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
.account-section-head .section-title { margin-bottom: 0; }
.account-edit-btn {
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  color: var(--muted-fg);
}
.account-edit-btn:hover { color: var(--text-primary); }
.account-form-actions {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}
/* Locked fields read as "not editable yet", not as "broken/greyed out". */
[data-account-form].is-locked input:disabled,
[data-account-form].is-locked select:disabled,
[data-account-form].is-locked textarea:disabled {
  opacity: 1;
  -webkit-text-fill-color: var(--fg);
  color: var(--fg);
  background: var(--card);
  border-color: var(--border);
  cursor: default;
}
[data-account-form].is-locked .phone-field { opacity: 1; }

/* ---- Currency picker: header / mobile menu / account / footer ------------ */
.currency-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}
.currency-switch label {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-fg);
  white-space: nowrap;
}
.currency-switch select {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  text-transform: none;
  color: var(--text-primary);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 0.3rem 1.5rem 0.3rem 0.55rem;
  cursor: pointer;
  transition: border-color 0.2s;
}
.currency-switch select:hover { border-color: var(--primary); }
.currency-switch select option { color: #151412; }

/* Header — desktop only, aligned with the language switch. */
.header-currency { display: none; }
@media (min-width: 1024px) { .header-currency { display: inline-flex; } }
.header-currency select {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-color: rgba(170, 157, 140, 0.55);
}

/* Mobile menu — a bordered footer row, only while the menu layout is in use. */
.mobile-menu-currency {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin: 0;
  padding: 1.25rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(170, 157, 140, 0.2);
}
.mobile-menu-currency select { flex: 0 1 auto; min-width: 10rem; }
@media (min-width: 1024px) { .mobile-menu-currency { display: none; } }

/* Account page. */
.account-currency { margin-bottom: 2rem; }

/* Footer — a tidy inline row, sitting in the last column under Legal/Support. */
.footer-currency {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.25rem;
  text-transform: none;
  letter-spacing: normal;
  font-size: 1rem;
}
.footer-currency label {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(250, 248, 243, 0.55);
}
.footer-currency select {
  background: transparent;
  border: 1px solid rgba(250, 248, 243, 0.28);
  color: rgba(250, 248, 243, 0.9);
  border-radius: 2px;
  padding: 0.35rem 1.5rem 0.35rem 0.6rem;
  font-size: 0.78rem;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
  transition: border-color 0.2s;
}
.footer-currency select:hover { border-color: rgba(250, 248, 243, 0.6); }
.footer-currency select option { color: #151412; }