/* Zaviya Wear — shared commerce layer (header, footer, buttons, cards, forms).
   Scroll-craft "design floor" (type/spacing/contrast) borrowed, not its scrub engine —
   see skills/storefront-design "Two design modes". */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { max-width: 100%; overflow-x: hidden; }
body {
  margin: 0;
  background: var(--sc-canvas);
  color: var(--sc-ink);
  font-family: var(--sc-font-text);
  font-size: 15px;
  line-height: 1.55;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -48px; z-index: 100;
  background: var(--sc-accent-ink); color: #fff; padding: 10px 16px; border-radius: var(--radius-sm);
  transition: top .2s ease;
}
.skip-link:focus { top: 12px; }

/* ---------- layout shell ---------- */
.wrap { max-width: 1180px; margin-inline: auto; padding-inline: var(--gutter); }
.site-header {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--sc-canvas) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-block: 14px;
}
.brand-mark {
  font-family: var(--sc-font-display); font-size: 20px; letter-spacing: .2em;
  text-decoration: none; color: var(--sc-ink); white-space: nowrap; flex: none;
}
.site-nav { display: flex; gap: 22px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.site-nav a { text-decoration: none; color: var(--sc-ink-soft); padding: 4px 0; border-bottom: 2px solid transparent; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--sc-ink); border-color: var(--sc-accent); }
.nav-toggle { display: none; }
.header-actions { display: flex; align-items: center; gap: 14px; }
.wa-pill {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  background: var(--sc-accent); color: var(--sc-accent-ink); border-radius: 999px; padding: 9px 16px;
  font-size: 13px; font-weight: 700; letter-spacing: .02em;
}
.wa-pill svg { width: 16px; height: 16px; }
.wa-pill:hover { background: color-mix(in srgb, var(--sc-accent) 85%, black); }

@media (max-width: 780px) {
  .site-nav { display: none; }
}
@media (max-width: 480px) {
  .wrap { padding-inline: var(--gutter); }
  .brand-mark { font-size: 15px; letter-spacing: .12em; }
  .wa-pill { padding: 8px 12px; font-size: 11.5px; gap: 6px; }
  .wa-pill svg { width: 13px; height: 13px; }
}

.site-footer {
  border-top: 1px solid var(--line); margin-top: 64px; padding-block: 40px 28px;
  color: var(--sc-ink-soft); font-size: 13px;
}
.site-footer .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px; }
.site-footer h4 { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--sc-ink); margin: 0 0 10px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--sc-ink); }
.site-footer .fine { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 12px; }

/* ---------- buttons & chips ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: var(--radius-sm); padding: 12px 18px; font-weight: 600;
  font-size: 14px; cursor: pointer; text-decoration: none; letter-spacing: .01em;
  transition: transform .15s ease, background .2s ease;
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--sc-accent); color: var(--sc-accent-ink); font-weight: 700; }
.btn-primary:hover { background: color-mix(in srgb, var(--sc-accent) 85%, black); }
.btn-primary:disabled { background: var(--line); color: var(--sc-ink-soft); cursor: not-allowed; }
.btn-ghost { background: transparent; border: 1.5px solid var(--line); color: var(--sc-ink); }
.btn-ghost:hover { border-color: var(--sc-accent-ink); }
.btn-block { width: 100%; }
@media (max-width: 480px) {
  /* The product page's WhatsApp CTA is a full-width button in normal document flow, so —
     unlike the hero, which we can pin clear of the fixed chat launcher with bottom padding —
     its vertical position varies with content length per product. Reserve a fixed right-hand
     gutter equal to the launcher's footprint (60px circle + 18px offset) so the button can
     never sit under it at ANY scroll position, on ANY of the 20 catalogue items. */
  #wa-cta.btn-block { width: calc(100% - 78px); }
}
.btn svg { width: 16px; height: 16px; }

.chip-select {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; padding: 7px 10px; border-radius: 999px;
  border: 1.5px solid var(--line); background: var(--sc-surface); color: var(--sc-ink);
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.chip-select[aria-pressed="true"] { border-color: var(--sc-accent-ink); background: var(--sc-accent-ink); color: #fff; }
.chip-select:disabled { color: var(--sc-ink-soft); border-color: var(--line); background: color-mix(in srgb, var(--sc-surface) 60%, var(--sc-canvas)); text-decoration: line-through; cursor: not-allowed; }

/* ---------- product grid / cards ---------- */
.toolbar {
  display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: space-between;
  padding-block: 18px; border-bottom: 1px solid var(--line); margin-bottom: 22px;
}
.filters { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.filters select, .sort select {
  border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--sc-surface);
  color: var(--sc-ink); padding: 8px 10px; font: inherit; font-size: 13px; max-width: 100%;
}
@media (max-width: 480px) {
  .filters select, .sort select { flex: 1 1 45%; min-width: 0; }
}
.results-count { font-size: 13px; color: var(--sc-ink-soft); }

.product-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px 16px;
}
@media (max-width: 480px) {
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
}
.product-card {
  background: var(--sc-surface); border: 1px solid var(--line); border-radius: var(--radius-md);
  overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-card);
}
.product-card .thumb { position: relative; aspect-ratio: 1; background: var(--sc-canvas); overflow: hidden; }
.product-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-card .off {
  position: absolute; top: 10px; left: 10px; background: var(--rose); color: #fff;
  font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 4px;
}
.product-card .body { padding: 12px 13px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.product-card .cat { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--sc-ink-soft); }
.product-card h3 { font-size: 14.5px; font-weight: 600; margin: 0; line-height: 1.3; }
.product-card .local { font-size: 12.5px; color: var(--sc-ink-soft); direction: rtl; }
.product-card .price { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 14.5px; }
.product-card .price s { color: var(--sc-ink-soft); font-weight: 400; font-size: 12.5px; margin-left: 6px; }
.product-card .sizes { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.size-tag { font-size: 11px; border: 1px solid var(--line); border-radius: 4px; padding: 2px 6px; color: var(--sc-ink-soft); }
.product-card .cta { margin-top: auto; padding-top: 8px; display: flex; gap: 8px; }
.product-card .cta .btn { flex: 1; padding: 9px 10px; font-size: 12.5px; }
.empty-state { padding: 60px 20px; text-align: center; color: var(--sc-ink-soft); }

/* ---------- product page ---------- */
.pdp { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 44px; padding-block: 30px 60px; }
.gallery-main { aspect-ratio: 1; border-radius: var(--radius-md); overflow: hidden; background: var(--sc-surface); border: 1px solid var(--line); }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs { display: flex; gap: 8px; margin-top: 10px; }
.gallery-thumbs button { width: 64px; height: 64px; border-radius: 8px; overflow: hidden; border: 1.5px solid var(--line); padding: 0; cursor: pointer; background: var(--sc-surface); }
.gallery-thumbs button[aria-current="true"] { border-color: var(--sc-accent-ink); }
.gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.pdp-info .eyebrow { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--sc-ink-soft); }
.pdp-info h1 { font-family: var(--sc-font-display); font-weight: 400; font-size: clamp(26px, 3.4vw, 38px); line-height: 1.15; margin: 6px 0 4px; text-wrap: balance; }
/* dir=rtl only sets the INTERNAL reading direction; without width:fit-content the block
   still spans the full (wide, desktop) column, so rtl's default right-alignment strands
   the Urdu name at the far right edge, away from the English h1 above it. Shrink the box
   to its content so it sits directly under the title, reading right-to-left within itself. */
.pdp-info .local-name { direction: rtl; width: fit-content; font-size: 15px; color: var(--sc-ink-soft); margin: 2px 0 14px; }
.pdp-info .price-row { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.pdp-info .price-row s { color: var(--sc-ink-soft); font-weight: 400; font-size: 16px; }
.pdp-info .off-tag { background: var(--rose); color: #fff; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 3px; }
.option-group { margin-bottom: 18px; }
.option-group > span { display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--sc-ink-soft); margin-bottom: 8px; }
.option-row { display: flex; flex-wrap: wrap; gap: 8px; }
.specs-list { list-style: none; margin: 22px 0; padding: 0; border-top: 1px solid var(--line); }
.specs-list li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.specs-list li span:first-child { color: var(--sc-ink-soft); }
.pdp-desc { font-size: 14px; color: var(--sc-ink-soft); margin-bottom: 18px; }
.policy-links { display: flex; gap: 16px; font-size: 12.5px; margin-top: 18px; }
.policy-links a { text-decoration: underline; text-underline-offset: 3px; color: var(--sc-ink-soft); }
.related-heading { font-family: var(--sc-font-display); font-weight: 400; font-size: 22px; margin: 0 0 16px; }
@media (max-width: 780px) { .pdp { grid-template-columns: 1fr; gap: 22px; } }

/* ---------- editorial (size guide etc) ---------- */
.editorial { padding-block: 40px 60px; max-width: 800px; }
.editorial h1 { font-family: var(--sc-font-display); font-weight: 400; font-size: clamp(28px, 4vw, 42px); margin-bottom: 6px; }
.editorial .lede { color: var(--sc-ink-soft); font-size: 15px; margin-bottom: 30px; }
.editorial table { width: 100%; border-collapse: collapse; margin: 18px 0 30px; font-size: 13.5px; }
.editorial th, .editorial td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); }
.editorial th { color: var(--sc-ink-soft); font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: .06em; }
.editorial h2 { font-family: var(--sc-font-display); font-weight: 400; font-size: 22px; margin-top: 36px; }

[lang="ur"], [dir="rtl"] { direction: rtl; }