/* ============================================================
   ABRISHAM — shared design system for inner pages
   Palette (fixed): ivory #FAF8F5 · cream #F2EDE6 · sand #E8DCD1
                    camel #C4A583 · ink #2C2218
   Type (fixed):    the reader's own system UI face, in both scripts —
                    no webfont request, and Persian renders in the face
                    local readers use all day instead of a downloaded one.
   Signature:       the "thread" — a fine camel line that runs
                    through every heading, rule and hover state.
   ============================================================ */

:root {
  --ivory: #faf8f5;
  --cream: #f2ede6;
  --sand: #e8dcd1;
  --camel: #c4a583;
  --camel-text: #7a5a3a; /* camel darkened until it reads at small sizes */
  --ink: #2c2218;
  --ink-soft: #5c4f42;
  --thread: #c4a583;
  --error: #8e3b2f;
  --success: #4f5d3a;

  /* One stack for both scripts: Segoe UI, San Francisco, Roboto and friends
     all carry Arabic, so Persian needs no separate face or download. */
  --sys: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif;
  --display: var(--sys);
  --body: var(--sys);

  --container: 1200px;
  --radius: 15px; /* matches homepage collection cards */
  /* Rendered header height at every breakpoint. .siteHeader reserves it so the
     page doesn't jump when site.js fills the mount, and the homepage's
     .heroSection pads by it because .onHero is out of the flow. Both read it
     from here — they used to carry the number separately. */
  --header-h: 81px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* site.js already skips the entrance reveals when the reader asks for less
   motion; this covers everything CSS drives — the menu, the thread hovers,
   the card lift, and the smooth scrolling itself. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

body {
  background-color: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

main {
  flex: 1;
}

img {
  max-width: 100%;
}

a {
  color: inherit;
}

button {
  font-family: inherit;
}

::selection {
  background: var(--camel);
  color: var(--ivory);
}

:focus-visible {
  outline: 2px solid var(--camel-text);
  outline-offset: 3px;
}

/* the hidden attribute must always win, even over display:grid/flex rules */
[hidden] {
  display: none !important;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}

.skipLink {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--ivory);
  padding: 10px 18px;
  z-index: 300;
  font-size: 0.8rem;
  letter-spacing: 0.15em;
}
.skipLink:focus {
  left: 0;
}

/* ---------------- header ---------------- */

.siteHeader {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(242, 237, 230, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--sand);
  /* site.js fills this element on DOMContentLoaded; without a reserved height
     it collapses to the border and drops the page 80px when the header lands. */
  min-height: var(--header-h);
}

/* Homepage variant: the same header, laid over the hero photo instead of
   sitting on cream. .heroSection reserves 81px of padding for it. */
.siteHeader.onHero {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 41;
  background: none;
  backdrop-filter: none;
  border-bottom: none;
}
.siteHeader.onHero .brand,
.siteHeader.onHero .navLinks a,
.siteHeader.onHero .navLinks a[aria-current="page"],
.siteHeader.onHero .accountName,
.siteHeader.onHero .iconBtn {
  color: var(--ivory);
}
.siteHeader.onHero .navLinks a::after {
  background: var(--ivory);
}
.siteHeader.onHero .iconBtn:hover {
  background: rgba(250, 248, 245, 0.18);
}
.siteHeader.onHero .langToggle {
  color: var(--ivory);
  border-color: rgba(250, 248, 245, 0.5);
}
.siteHeader.onHero .langToggle:hover {
  background: rgba(250, 248, 245, 0.18);
  color: var(--ivory);
}

.siteHeader .bar {
  max-width: var(--container);
  margin: 0 auto;
  padding: 18px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.brand {
  font-family: var(--display);
  font-size: 1.5rem;
  letter-spacing: 5px;
  font-weight: 400;
  color: var(--ink);
  text-decoration: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.navLinks {
  display: flex;
  gap: 26px;
}

.navLinks a {
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-decoration: none;
  color: var(--ink);
  padding: 6px 0;
  position: relative;
}

/* the thread: grows in from the left on hover, stays for the active page */
.navLinks a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background: var(--camel-text);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease-out;
}
.navLinks a:hover::after,
.navLinks a[aria-current="page"]::after {
  transform: scaleX(1);
}
.navLinks a[aria-current="page"] {
  color: var(--camel-text);
}

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

.iconBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--ink);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  border-radius: 50%;
  transition: background-color 0.2s;
}
.iconBtn:hover {
  background: var(--sand);
}
.iconBtn svg {
  width: 21px;
  height: 21px;
  fill: currentColor;
}

.cartCount {
  position: absolute;
  top: 3px;
  right: 1px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--camel-text);
  color: var(--ivory);
  font-size: 0.62rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}
.cartCount[hidden] {
  display: none;
}

.accountName {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--camel-text);
  text-decoration: none;
  margin-right: 4px;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.accountName:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* mobile menu */
.menuToggle {
  display: none;
}

.mobilePanel {
  display: none;
}

@media (max-width: 860px) {
  .navLinks {
    display: none;
  }
  .brand {
    position: static;
    transform: none;
  }
  .menuToggle {
    display: inline-flex;
  }
  /* Collapsed with grid-template-rows rather than a max-height guess: the
     panel is always exactly as tall as its links, so adding a nav item can
     never silently clip it (the old max-height: 340px was four links from
     doing exactly that).
     visibility as well as height, because a height-clipped panel still hands
     its links to the keyboard and the screen reader — a closed menu used to
     be five invisible tab stops. It returns the instant the panel opens, and
     only leaves once the collapse has finished. */
  .mobilePanel {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows 0.35s ease, visibility 0s linear 0.35s;
    border-top: 0 solid transparent;
  }
  .mobilePanel.open {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows 0.35s ease, visibility 0s;
    border-top: 1px solid var(--sand);
  }
  .mobilePanelInner {
    overflow: hidden;
  }
  .mobilePanel a {
    display: block;
    padding: 15px 32px;
    text-decoration: none;
    font-size: 0.78rem;
    letter-spacing: 0.28em;
    color: var(--ink);
    border-bottom: 1px solid var(--sand);
    position: relative;
    transition: background-color 0.2s;
  }
  .mobilePanel a:last-child {
    border-bottom: none;
  }
  .mobilePanel a[aria-current="page"] {
    color: var(--camel-text);
  }

  /* the thread again, stood on its end: a camel bar grows down the leading
     edge on hover. Scaled, not sized, so the row never shifts. */
  .mobilePanel a::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 3px;
    background: var(--camel);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.25s ease-out;
  }
  .mobilePanel a:hover::before,
  .mobilePanel a:focus-visible::before,
  .mobilePanel a[aria-current="page"]::before {
    transform: scaleY(1);
  }
  .mobilePanel a:hover,
  .mobilePanel a:focus-visible {
    background: var(--sand);
  }

  /* Over the hero photo the panel needs its own ground, or the links open
     onto the picture and become unreadable. */
  .siteHeader.onHero .mobilePanel {
    background: rgba(44, 34, 24, 0.96);
  }
  .siteHeader.onHero .mobilePanel a,
  .siteHeader.onHero .mobilePanel a[aria-current="page"] {
    color: var(--ivory);
    border-bottom-color: rgba(250, 248, 245, 0.12);
  }
  /* --sand would vanish into the dark ground; wash the camel over it instead */
  .siteHeader.onHero .mobilePanel a:hover,
  .siteHeader.onHero .mobilePanel a:focus-visible {
    background: rgba(196, 165, 131, 0.28);
  }
  .siteHeader.onHero .mobilePanel.open {
    border-top-color: rgba(250, 248, 245, 0.2);
  }
}

/* ---------------- typographic kit ---------------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 0.68rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--camel-text);
  font-weight: 500;
}
.eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--thread);
  flex: none;
}

.pageHead {
  padding: 72px 0 56px;
}
.pageHead h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.1rem, 4.5vw, 3.4rem);
  line-height: 1.15;
  margin: 18px 0 14px;
  max-width: 15em;
}
.pageHead h1 em {
  font-style: italic;
  color: var(--camel-text);
}
.pageHead .lede {
  color: var(--ink-soft);
  max-width: 34em;
  font-size: 0.95rem;
}

/* ---------------- buttons ---------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 34px;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--ivory);
  transition:
    background-color 0.25s,
    border-color 0.25s,
    color 0.25s;
  touch-action: manipulation;
}
.btn:hover {
  background: var(--camel-text);
  border-color: var(--camel-text);
}
.btn:active {
  transform: translateY(1px);
}
.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.btnGhost {
  background: transparent;
  color: var(--ink);
}
.btnGhost:hover {
  background: var(--ink);
  color: var(--ivory);
}

.btnWide {
  width: 100%;
}

.btnSpinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(250, 248, 245, 0.35);
  border-top-color: var(--ivory);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: none;
}
.btn.loading .btnSpinner {
  display: inline-block;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.textLink {
  color: var(--camel-text);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.textLink:hover {
  color: var(--ink);
}

/* ---------------- forms ---------------- */

.field {
  margin-bottom: 26px;
}
.field label {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 8px;
  font-weight: 500;
}
.field label .req {
  color: var(--camel-text);
}
/* A consent tick reads as a sentence, not as a labelled field: lower-case,
   beside its box, and without the uppercase tracking the other labels carry. */
.checkField .checkLabel {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
  line-height: 1.6;
  cursor: pointer;
  margin-bottom: 0;
}
.checkField .checkLabel input[type="checkbox"] {
  width: auto;
  min-height: 0;
  margin-top: 4px;
  accent-color: var(--camel-text);
  flex: none;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  min-height: 48px;
  background: transparent;
  border: none;
  border-bottom: 1px solid #d4c5b2;
  font-family: var(--body);
  font-size: 1rem;
  color: var(--ink);
  padding: 8px 2px;
  border-radius: 0;
  transition: border-color 0.2s;
}
.field textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.6;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-bottom: 2px solid var(--camel-text);
}
.field input::placeholder,
.field textarea::placeholder {
  color: #a99b8a;
}
.field .hint {
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin-top: 7px;
}
.field .error,
.formError {
  font-size: 0.82rem;
  color: var(--error);
  margin-top: 7px;
}
.formError {
  margin: 0 0 18px;
}
.formError:empty {
  display: none;
}
.field.invalid input,
.field.invalid textarea {
  border-bottom-color: var(--error);
}

.pwWrap {
  position: relative;
}
.pwWrap input {
  padding-right: 64px;
}
.pwToggle {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  color: var(--camel-text);
  padding: 12px 4px;
}

.codeInput {
  font-family: var(--body);
  font-size: 1.9rem !important;
  letter-spacing: 0.55em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ---------------- offline banner ---------------- */

.offlineBanner {
  max-width: var(--container);
  margin: 20px auto 0;
  background: var(--sand);
  border-left: 2px solid var(--camel);
  padding: 14px 20px;
  font-size: 0.83rem;
  color: var(--ink-soft);
  line-height: 1.6;
}
.authLayout .offlineBanner {
  margin: 0;
}

/* ---------------- toast ---------------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 34px;
  transform: translate(-50%, 20px);
  background: var(--ink);
  color: var(--ivory);
  padding: 14px 26px;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.3s,
    transform 0.3s;
  max-width: min(92vw, 480px);
  text-align: center;
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---------------- footer ---------------- */

.siteFooter {
  background: var(--ink);
  color: var(--cream);
  margin-top: 96px;
}
.siteFooter .cols {
  max-width: var(--container);
  margin: 0 auto;
  padding: 64px 32px 48px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.4fr;
  gap: 48px;
}
.siteFooter .wordmark {
  font-family: var(--display);
  font-size: 1.4rem;
  letter-spacing: 6px;
  margin-bottom: 14px;
}
.siteFooter .tagline {
  font-size: 0.85rem;
  color: #b9ac9c;
  max-width: 26em;
  line-height: 1.7;
}
.siteFooter h4 {
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--camel);
  font-weight: 500;
  margin-bottom: 18px;
}
.siteFooter ul {
  list-style: none;
}
.siteFooter li {
  margin-bottom: 10px;
}
.siteFooter a {
  color: var(--cream);
  text-decoration: none;
  font-size: 0.85rem;
}
.siteFooter a:hover {
  color: var(--camel);
}
.siteFooter address {
  font-style: normal;
  font-size: 0.85rem;
  color: #b9ac9c;
  line-height: 1.9;
}
.siteFooter .legal {
  border-top: 1px solid rgba(196, 165, 131, 0.25);
  padding: 20px 32px;
  text-align: center;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: #b9ac9c;
}

@media (max-width: 900px) {
  .siteFooter .cols {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .siteFooter .cols {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

/* ---------------- shop ---------------- */

.filterRow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 28px;
  border-bottom: 1px solid var(--sand);
  padding-bottom: 2px;
  margin-bottom: 44px;
}
.filterBtn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 12px 2px;
  position: relative;
}
.filterBtn sup {
  font-size: 0.6rem;
  color: var(--camel-text);
  margin-left: 4px;
}
.filterBtn::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--camel-text);
  transform: scaleX(0);
  transition: transform 0.25s ease-out;
}
.filterBtn:hover {
  color: var(--ink);
}
.filterBtn.active {
  color: var(--ink);
}
.filterBtn.active::after {
  transform: scaleX(1);
}

.productGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px 28px;
  padding-bottom: 40px;
}
@media (max-width: 980px) {
  .productGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .productGrid {
    grid-template-columns: 1fr;
  }
}

.productCard {
  display: flex;
  flex-direction: column;
}
.productCard .frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 3 / 4;
  background: var(--sand);
}
.productCard .frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.productCard:hover .frame img {
  transform: scale(1.04);
}
.addBar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(44, 34, 24, 0.88);
  color: var(--ivory);
  border: none;
  cursor: pointer;
  min-height: 50px;
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  transform: translateY(100%);
  transition:
    transform 0.3s ease-out,
    background-color 0.2s;
}
.productCard:hover .addBar,
.productCard:focus-within .addBar {
  transform: translateY(0);
}
.addBar:hover {
  background: var(--ink);
}
/* touch devices: no hover — keep the bar visible */
@media (hover: none) {
  .addBar {
    transform: translateY(0);
    background: rgba(44, 34, 24, 0.75);
  }
}

.productMeta {
  padding: 16px 4px 0;
}
.productMeta .cat {
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--camel-text);
}
.productMeta h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.15rem;
  margin: 6px 0 4px;
}
.productMeta .price {
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.productMeta .desc {
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-top: 8px;
  line-height: 1.65;
}

/* The whole card is one link to shop.html?id=N. It carries no underline or
   link colour — the card itself is the affordance. */
.cardLink {
  display: block;
  color: inherit;
  text-decoration: none;
}
.cardLink:focus-visible {
  outline: 2px solid var(--camel-text);
  outline-offset: 4px;
  border-radius: var(--radius);
}
/* .addBar was a <button>; inside the card link it is a <span>, which needs
   the centring a button gave for free. */
.addBar {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 14px;
}

/* ============================================================
   PRODUCT PANEL — the detail overlay on the shop page
   ============================================================ */

.productOverlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.productOverlay[hidden] {
  display: none;
}
.overlayScrim {
  position: absolute;
  inset: 0;
  background: rgba(44, 34, 24, 0.55);
  backdrop-filter: blur(2px);
  animation: overlayFade 0.25s ease-out;
}
/* Locks the page behind the panel so a scroll gesture over the scrim moves
   the panel's own content, not the shop grid underneath it. */
body.noScroll {
  overflow: hidden;
}

.overlayPanel {
  position: relative;
  width: min(980px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--ivory);
  border-radius: var(--radius);
  box-shadow: 0 30px 80px rgba(44, 34, 24, 0.35);
  animation: overlayRise 0.3s ease-out;
}
.overlayPanel:focus {
  outline: none;
}
.overlayPanel:focus-visible {
  outline: 2px solid var(--camel-text);
  outline-offset: -2px;
}

@keyframes overlayFade {
  from { opacity: 0; }
}
@keyframes overlayRise {
  from { opacity: 0; transform: translateY(14px); }
}
@media (prefers-reduced-motion: reduce) {
  .overlayScrim,
  .overlayPanel {
    animation: none;
  }
}

.overlayClose {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--ink);
  background: rgba(250, 248, 245, 0.9);
  transition: background-color 0.2s;
}
.overlayClose svg {
  width: 20px;
  height: 20px;
}
.overlayClose:hover {
  background: var(--sand);
}
html[dir="rtl"] .overlayClose {
  right: auto;
  left: 14px;
}

.overlayGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  padding: 28px;
}
.overlayGallery .overlayFrame {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--sand);
}
.overlayFrame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.overlayThumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.overlayThumbs[hidden] {
  display: none;
}
.thumb {
  width: 62px;
  height: 78px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: var(--sand);
  opacity: 0.65;
  transition: opacity 0.2s, border-color 0.2s;
}
.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.thumb:hover,
.thumb.active {
  opacity: 1;
  border-color: var(--thread);
}

.overlayDetail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 24px;
}
.overlayDetail .cat {
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--camel-text);
}
.overlayDetail h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.7rem;
  line-height: 1.25;
  margin: 8px 0 10px;
}
.overlayDetail .price {
  font-size: 1rem;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.overlayDetail .desc {
  font-size: 0.9rem;
  color: var(--ink-soft);
  line-height: 1.7;
  margin-top: 14px;
}

.sizePick {
  width: 100%;
  margin-top: 26px;
}
.sizePick[hidden] {
  display: none;
}
.sizeLabel {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--camel-text);
  margin-bottom: 10px;
}
.sizeChips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sizeChip {
  min-width: 52px;
  min-height: 44px; /* stays a comfortable tap target on a phone */
  padding: 0 12px;
  border: 1px solid var(--sand);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: var(--ink);
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}
.sizeChip:hover:not(:disabled) {
  border-color: var(--thread);
}
.sizeChip.active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--ivory);
}
/* Shown, struck through, and out of the tab order: the customer can see the
   size exists and that this piece isn't made in it. */
.sizeChip:disabled {
  cursor: not-allowed;
  color: #9a8d80;
  border-style: dashed;
  border-color: var(--sand);
  text-decoration: line-through;
}

.sizeGuide {
  margin-top: 16px;
  font-size: 0.82rem;
  color: var(--ink-soft);
  width: 100%;
}
.sizeGuide[hidden] {
  display: none;
}
.sizeGuideBox summary {
  cursor: pointer;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--camel-text);
  padding: 8px 0;
}
.sizeGuideBox summary:focus-visible {
  outline: 2px solid var(--camel-text);
  outline-offset: 2px;
}
.guideNote {
  font-size: 0.76rem;
  line-height: 1.6;
  margin: 8px 0;
}
/* The table is wider than a phone: it scrolls inside its own box rather than
   pushing the panel sideways. */
.guideScroll {
  overflow-x: auto;
  margin: 10px 0;
}
.sizeTable {
  border-collapse: collapse;
  width: 100%;
  min-width: 380px;
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
}
.sizeTable th,
.sizeTable td {
  border: 1px solid var(--sand);
  padding: 6px 8px;
  text-align: center;
  white-space: nowrap;
}
.sizeTable thead th {
  background: var(--cream);
  font-weight: 600;
  letter-spacing: 0.06em;
}
.sizeTable tbody th {
  background: var(--cream);
  font-weight: 600;
}

.overlayAdd {
  margin-top: 26px;
}
.overlayAdd:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.sizeHint {
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin-top: 10px;
  min-height: 1.2em; /* reserved, so the button doesn't jump when it clears */
}

@media (max-width: 800px) {
  .productOverlay {
    padding: 0;
  }
  .overlayPanel {
    width: 100%;
    max-height: 100vh;
    height: 100%;
    border-radius: 0;
  }
  .overlayGrid {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 20px;
  }
  .overlayDetail {
    padding-top: 0;
  }
  .overlayGallery .overlayFrame {
    aspect-ratio: 4 / 5;
  }
}

/* staggered entrance — disabled when the user prefers reduced motion */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.6s ease-out,
    transform 0.6s ease-out;
  transition-delay: var(--d, 0s);
}
.reveal.in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  html {
    scroll-behavior: auto;
  }
  .productCard .frame img,
  .addBar {
    transition: none;
  }
}

/* ---------------- cart ---------------- */

.cartLayout {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 48px;
  align-items: start;
  padding-bottom: 40px;
}
@media (max-width: 900px) {
  .cartLayout {
    grid-template-columns: 1fr;
  }
}

.cartLines {
  border-top: 1px solid var(--sand);
}
.cartLine {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  gap: 22px;
  padding: 24px 0;
  border-bottom: 1px solid var(--sand);
  align-items: center;
}
.cartLine img {
  width: 92px;
  height: 118px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}
.cartLine .lineName {
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 400;
}
.cartLine .lineCat {
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--camel-text);
}
/* A piece made in one colour shows it as a fact, not a choice. */
.colorOnly {
  font-size: 0.85rem;
  padding: 6px 0;
}
/* Only present on sized pieces; one-size items never render it. */
.cartLine .lineSize {
  font-size: 0.78rem;
  color: var(--ink);
  margin-top: 4px;
}
/* An old bag line for a piece that has since gained colours */
.cartLine .lineWarn {
  color: var(--error);
  font-size: 0.8rem;
  margin: 4px 0;
}
.cartLine .lineEach {
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.lineRight {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
.lineTotal {
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}
.stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid #d4c5b2;
}
.stepper button {
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.05rem;
  color: var(--ink);
  transition: background-color 0.15s;
}
.stepper button:hover {
  background: var(--sand);
}
.stepper .qty {
  min-width: 36px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
}
.removeLine {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 6px 0;
}
.removeLine:hover {
  color: var(--error);
}

.summary {
  background: var(--sand);
  border-radius: var(--radius);
  padding: 36px 32px;
  position: sticky;
  top: 100px;
}
.summary h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.5rem;
  margin-bottom: 24px;
}
/* The recap of the bag inside the summary. Quieter than the totals under it —
   it is there to be checked, not read — and it sits above them behind a rule
   so the eye still lands on the money first. */
.sumItems {
  list-style: none;
  margin: 0 0 4px;
  padding: 0 0 12px;
  border-bottom: 1px solid #d4c5b2;
}
.sumItem {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 0.82rem;
  color: var(--ink-soft);
  padding: 5px 0;
}
.sumItem .amount {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* The size is the detail this recap exists for, so it is the one part of the
   line that is not dimmed. */
.sumItemSize {
  color: var(--ink);
}

.sumRow {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  color: var(--ink-soft);
  padding: 9px 0;
}
.sumRow.total {
  border-top: 1px solid #d4c5b2;
  margin-top: 12px;
  padding-top: 18px;
  color: var(--ink);
  font-size: 1.05rem;
}
.sumRow .amount {
  font-variant-numeric: tabular-nums;
}
/* The discount code box. The input takes the room that is left so the Apply
   button keeps its natural width at every container size — a code is 12
   characters and should never wrap. */
.couponApply {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin: 2px 0 4px;
}
.couponApply input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #d4c5b2;
  background: transparent;
  font-family: inherit;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  color: var(--ink);
}
.couponApply input:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}
.summary .btn {
  margin-top: 24px;
}
/* After .summary .btn on purpose: the two selectors have the same specificity,
   so the later one wins, and this button must not carry the standing 24px that
   spaces the Place-order button off the total. */
.couponApply .btn {
  flex: 0 0 auto;
  margin-top: 0;
  padding-inline: 18px;
}
.summary .note {
  font-size: 0.75rem;
  color: var(--ink-soft);
  margin-top: 14px;
  text-align: center;
}

.emptyState {
  text-align: center;
  padding: 90px 20px 40px;
}
.emptyState .mark {
  font-family: var(--display);
  font-size: 3rem;
  color: var(--camel);
  line-height: 1;
}
.emptyState h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.7rem;
  margin: 18px 0 10px;
}
.emptyState p {
  color: var(--ink-soft);
  margin-bottom: 28px;
}

/* ---------------- auth (split page) ---------------- */

.authLayout {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  min-height: calc(100dvh - 81px);
}
@media (max-width: 900px) {
  .authLayout {
    grid-template-columns: 1fr;
  }
  .authAside {
    display: none;
  }
}

.authAside {
  background: var(--ink);
  color: var(--cream);
  padding: 72px 60px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
/* the word for silk, woven into the wall — sized so the whole word shows */
.authAside .silkWord {
  position: absolute;
  inset-inline-end: 36px;
  bottom: 44px;
  font-family: var(--display);
  font-size: clamp(3.2rem, 6.5vw, 5.4rem);
  color: rgba(196, 165, 131, 0.2);
  line-height: 1;
  user-select: none;
  pointer-events: none;
}
.authAside .eyebrow {
  color: var(--camel);
}
.authAside .eyebrow::before {
  background: var(--camel);
}
.authAside h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.9rem, 3vw, 2.7rem);
  line-height: 1.25;
  margin-top: 20px;
  max-width: 11em;
}
.authAside h2 em {
  color: var(--camel);
}
.authAside .asideFoot {
  font-size: 0.8rem;
  color: #b9ac9c;
  line-height: 1.8;
  max-width: 30em;
  position: relative;
}

.authMain {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 32px;
}
.authCard {
  width: 100%;
  max-width: 430px;
}
.authCard h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 2rem;
  margin: 16px 0 8px;
}
.authCard .sub {
  color: var(--ink-soft);
  font-size: 0.9rem;
  margin-bottom: 36px;
}
.authCard form {
  margin-top: 8px;
}
.authSwap {
  margin-top: 28px;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.authStep[hidden] {
  display: none;
}
.stepNote {
  background: var(--sand);
  border-left: 2px solid var(--camel);
  padding: 14px 18px;
  font-size: 0.83rem;
  color: var(--ink-soft);
  margin-bottom: 26px;
  line-height: 1.6;
}

/* ---------------- account ---------------- */

.orderCard {
  border: 1px solid var(--sand);
  border-radius: var(--radius);
  padding: 26px 28px;
  margin-bottom: 22px;
  background: var(--ivory);
}
.orderTop {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  align-items: baseline;
  margin-bottom: 14px;
}
.orderTop .oid {
  font-family: var(--display);
  font-size: 1.15rem;
}
.orderTop .odate {
  font-size: 0.78rem;
  color: var(--ink-soft);
  letter-spacing: 0.08em;
}
.statusPill {
  margin-left: auto;
  font-size: 0.62rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--camel);
  color: var(--camel-text);
}
.statusPill.shipped {
  background: var(--camel);
  color: var(--ivory);
  border-color: var(--camel);
}
.statusPill.delivered {
  background: var(--ink);
  color: var(--ivory);
  border-color: var(--ink);
}
.statusPill.cancelled {
  border-color: var(--error);
  color: var(--error);
}
/* payment states: waiting reads as unfinished business, paid as settled */
.statusPill.awaiting_payment {
  border-color: var(--camel);
  color: var(--camel-text);
}
/* Outlined, not filled: the money has arrived but the piece has not moved yet.
   Filling this the same as .shipped made the two indistinguishable. */
.statusPill.paid,
.statusPill.preparing {
  border-color: var(--camel);
  color: var(--camel-text);
}
.statusPill.placed {
  border-color: var(--sand);
  color: var(--ink-soft);
}
.statusPill.payment_failed {
  border-color: var(--error);
  color: var(--error);
}

/* ---- the paid → preparing → shipped → delivered track ---- */

.orderJourney {
  display: flex;
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}
.orderJourney li {
  flex: 1;
  position: relative;
  padding-top: 21px;
  text-align: center;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
/* The rule joining each step to the one before it. */
.orderJourney li::before {
  content: "";
  position: absolute;
  top: 5px;
  left: -50%;
  width: 100%;
  height: 1px;
  background: var(--sand);
}
.orderJourney li:first-child::before {
  display: none;
}
.orderJourney .dot {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1px solid var(--sand);
  background: var(--ivory);
}
.orderJourney li.done,
.orderJourney li.now {
  color: var(--ink);
}
.orderJourney li.done .dot,
.orderJourney li.now .dot,
.orderJourney li.done::before,
.orderJourney li.now::before {
  border-color: var(--camel);
  background: var(--camel);
}
/* A quiet halo marks where the order actually is right now. */
.orderJourney li.now .dot {
  box-shadow: 0 0 0 4px rgba(196, 165, 131, 0.28);
}
/* In Persian the track runs the other way, so the joining rule does too. */
html[dir="rtl"] .orderJourney li::before {
  left: auto;
  right: -50%;
}

/* Said instead of the track when an order never got paid or was called off. */
.orderNote {
  margin: 0 0 18px;
  font-size: 0.8rem;
  color: var(--ink-soft);
  letter-spacing: 0.06em;
}
.orderReceipt {
  margin: 14px 0 0;
  font-size: 0.72rem;
  color: var(--ink-soft);
  letter-spacing: 0.08em;
}
.orderItems {
  font-size: 0.88rem;
  color: var(--ink-soft);
  border-top: 1px solid var(--sand);
  padding-top: 12px;
}
.orderItems .row {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
}
.orderItems .amount {
  font-variant-numeric: tabular-nums;
}
.orderTotal {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--sand);
  margin-top: 10px;
  padding-top: 12px;
  font-weight: 500;
}

/* ---------------- about ---------------- */

.storySplit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  margin: 40px 0 90px;
}
@media (max-width: 860px) {
  .storySplit {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}
.storySplit .photo {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
.storySplit .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.storySplit h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  line-height: 1.25;
  margin: 16px 0 20px;
}
.storySplit h2 em {
  color: var(--camel-text);
}
.storySplit p {
  color: var(--ink-soft);
  margin-bottom: 16px;
  max-width: 34em;
}

.silkBanner {
  background: var(--sand);
  text-align: center;
  padding: 84px 24px;
  margin: 0 0 90px;
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
}
.silkBanner .fa {
  font-family: var(--display);
  font-size: clamp(3rem, 8vw, 5.5rem);
  color: var(--camel-text);
  line-height: 1.3;
}
.silkBanner .translit {
  font-size: 0.72rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 14px;
}
.silkBanner .meaning {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--ink);
  margin-top: 6px;
}

.valuesRow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-bottom: 90px;
}
@media (max-width: 800px) {
  .valuesRow {
    grid-template-columns: 1fr;
  }
}
.valuesRow article h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.3rem;
  margin: 14px 0 10px;
}
.valuesRow article p {
  color: var(--ink-soft);
  font-size: 0.9rem;
}
.valuesRow .num {
  font-family: var(--display);
  font-style: italic;
  color: var(--camel);
  font-size: 1.6rem;
}

/* ---------------- contact ---------------- */

.contactLayout {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 56px;
  align-items: start;
  padding-bottom: 40px;
}
@media (max-width: 860px) {
  .contactLayout {
    grid-template-columns: 1fr;
  }
}
.contactAside {
  background: var(--sand);
  border-radius: var(--radius);
  padding: 44px 40px;
}
.contactAside h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.6rem;
  margin: 14px 0 26px;
}
.contactAside dl {
  font-size: 0.9rem;
}
.contactAside dt {
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--camel-text);
  margin: 22px 0 6px;
}
.contactAside dd {
  color: var(--ink-soft);
  line-height: 1.8;
}
.contactAside a {
  color: var(--ink);
}

.formSuccess {
  border: 1px solid var(--camel);
  border-radius: var(--radius);
  padding: 44px 40px;
  text-align: center;
}
.formSuccess .mark {
  font-family: var(--display);
  font-size: 2.6rem;
  color: var(--camel-text);
  line-height: 1;
}
.formSuccess h2 {
  font-family: var(--display);
  font-weight: 400;
  margin: 14px 0 8px;
}
.formSuccess p {
  color: var(--ink-soft);
  font-size: 0.9rem;
}

/* ---------------- language toggle + Farsi (RTL) mode ---------------- */

.langToggle {
  border: 1px solid var(--sand);
  background: none;
  color: var(--camel-text);
  font-family: var(--body);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1;
  padding: 8px 11px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.langToggle:hover {
  background: var(--sand);
  color: var(--ink);
}

/* Farsi type needs no font swap: the system stack in :root already carries
   Arabic script. Only the spacing has to change. */
/* Arabic-script letters join — tracking would tear the words apart */
html[lang="fa"] *:not(.brand):not(.wordmark):not(.translit):not(.amount):not(.price) {
  letter-spacing: normal;
}
html[lang="fa"] body {
  line-height: 1.9;
}

/* Owner's call: the three homepage feature cards keep their words in
   English only; the Persian homepage shows just photo and icon. */
html[lang="fa"] .features :is(h3, p) {
  display: none;
}
/* Owner asked for the Persian headline a touch heavier than the hairline
   English one. */
html[lang="fa"] .hero h2 {
  font-weight: 400;
}

/* flip the few physically-anchored details */
/* in RTL, off-left space becomes scrollable — park the skip link off-right instead */
html[dir="rtl"] .skipLink {
  left: auto;
  right: -9999px;
}
html[dir="rtl"] .skipLink:focus {
  right: 0;
}

html[dir="rtl"] .pwWrap input {
  padding-right: 0;
  padding-left: 64px;
}
html[dir="rtl"] .pwToggle {
  right: auto;
  left: 0;
}
html[dir="rtl"] .offlineBanner,
html[dir="rtl"] .stepNote {
  border-left: none;
  border-right: 2px solid var(--camel);
}
html[dir="rtl"] .filterBtn sup {
  margin-left: 0;
  margin-right: 4px;
}
html[dir="rtl"] .accountName {
  margin-right: 0;
  margin-left: 4px;
}

/* The sub-category row sits under the group row and reads as secondary. */
.filterRow.subRow {
  margin-top: -6px;
  padding-bottom: 6px;
}
.filterRow.subRow .filterBtn {
  font-size: 0.66rem;
  opacity: 0.9;
}
.filterRow.subRow[hidden] {
  display: none;
}
/* A group nothing has been filed under yet. Still shown and still clickable —
   it lands on the "nothing here yet" state, which is the honest answer while
   the catalogue is being filled in — but it doesn't compete with the groups
   that actually have stock. */
.filterBtn.empty {
  opacity: 0.5;
}
.filterBtn.empty.active {
  opacity: 1;
}