/* AHT base: page frame, header, drawer, footer, Home, ordinary pages. Reads only tokens.css.
   Uses logical properties (inline-start/end) so the Urdu right-to-left layout needs no second sheet. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-ui); font-size: 1rem; line-height: 1.5; color: var(--aht-ink); background: var(--aht-paper); }
/* Short pages (404, empty cart): the footer still sits at the bottom of the screen. */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.admin-bar { min-height: calc(100dvh - 32px); }
@media (max-width: 782px) { .admin-bar { min-height: calc(100dvh - 46px); } }
.site-main { flex: 1 0 auto; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--aht-focus); outline-offset: 2px; }
[hidden] { display: none !important; }

/* Urdu: Nastaliq for the Urdu letters only (the font file is the Arabic subset), so prices and Roman-Urdu product
   names keep the UI font. Only Urdu pages draw Urdu letters, so English pages never download it.
   Nastaliq's letters stack tall and hang low, so lines need more room. */
@font-face { font-family: "Noto Nastaliq Urdu"; src: url("../fonts/noto-nastaliq-urdu-arabic.woff2") format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+FB50-FDFF, U+FE70-FEFC; }
:root[lang^="ur"] body { font-family: var(--font-urdu); line-height: 2; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.grow { flex: 1; }
.skip-link { position: absolute; inset-inline-start: var(--space-2); top: -100px; z-index: 20; background: var(--aht-ink); color: #fff; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); }
.skip-link:focus { top: var(--space-2); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--tap); padding: 0 var(--space-5); border: 0; border-radius: var(--radius-pill); font-weight: 700; text-decoration: none; cursor: pointer; }
.btn svg { width: 22px; height: 22px; flex: none; }
/* Every button is the accent. The fill is twice the button's width and tiles seamlessly: on hover Gold's light streak sweeps across once and ends where it began; a solid colour just darkens. */
.btn, .woocommerce-product-search button, .nav-all, .wa-float, .entry .wp-block-button__link { background: var(--aht-red-sheen) 100% 0 / 200% 100%; background-color: var(--aht-red); color: var(--aht-on-red); transition: background-color 0.15s; }
:is(.btn, .woocommerce-product-search button, .nav-all, .wa-float, .entry .wp-block-button__link):hover { animation: aht-sheen 0.8s ease-in-out; background-color: var(--aht-red-dark); color: var(--aht-on-red); }
@media (prefers-reduced-motion: reduce) { :is(.btn, .woocommerce-product-search button, .nav-all, .wa-float, .entry .wp-block-button__link):hover { animation: none; } }
/* One full tile (two button widths) to the right, so the last frame matches the resting one and nothing jumps back. */
@keyframes aht-sheen { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.btn-big { width: 100%; min-height: 56px; font-size: var(--text-md); margin-block: var(--space-4); }

/* Offer strip */
/* Offer strip: a thin black announcement bar, apart from the shop's own colour. The line runs right to left
   without end (left to right in Urdu) and stops while the pointer is on it. */
.offer { overflow: hidden; height: 30px; background: var(--aht-ink); color: #fff; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.03em; line-height: 30px; }
.offer-run { display: flex; justify-content: center; color: inherit; text-decoration: none; white-space: nowrap; }
.offer-group { flex: none; display: flex; }
.offer-item { position: relative; padding-inline: 2.5em; unicode-bidi: plaintext; }
.offer-item::after { content: "✦"; position: absolute; right: 0; transform: translateX(50%); font-size: 0.8em; opacity: 0.5; }
.offer:not(.is-moving) .offer-item::after { content: none; }
.offer.is-moving .offer-run { justify-content: flex-start; width: max-content; animation: aht-offer var(--offer-time, 30s) linear infinite; }
.offer.is-moving:is(:hover, :focus-within) .offer-run { animation-play-state: paused; }
[dir="rtl"] .offer.is-moving .offer-run { animation-direction: reverse; }
@keyframes aht-offer { to { transform: translateX(-50%); } }

/* Header */
.site-header { position: sticky; top: 0; z-index: 10; background: var(--aht-paper); border-bottom: 1px solid var(--aht-line); }
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 0; } }
.bar { display: flex; align-items: center; gap: var(--space-1); height: var(--header-h); }
.logo { display: block; text-decoration: none; }
.logo img { height: 36px; width: auto; }
.logo-text { font-weight: 800; font-size: var(--text-lg); }
.icon-btn { position: relative; display: grid; place-items: center; width: var(--tap); height: var(--tap); padding: 0; border: 0; background: none; color: inherit; cursor: pointer; text-decoration: none; border-radius: var(--radius-pill); }
.icon-btn svg { width: 24px; height: 24px; }
.icon-btn:hover { color: var(--aht-red-text); }
.icon-btn .count { position: absolute; top: 4px; inset-inline-end: 2px; min-width: 20px; height: 20px; padding-inline: 5px; border-radius: var(--radius-pill); background: var(--aht-red-fill); color: var(--aht-on-red); font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; }
/* Header cart: a gold ring with a gold cart inside; it fills gold on hover. The cart count is black so it stands off the gold. */
.cart-link svg { box-sizing: content-box; width: 22px; height: 22px; padding: 7.5px; border: 1.5px solid var(--aht-red-text); border-radius: 50%; color: var(--aht-red-text); transition: background-color 0.2s, color 0.2s; }
.cart-link:hover svg { background-color: var(--aht-red); color: var(--aht-on-red); }
.cart-link .count { background: var(--aht-ink); color: #fff; }
/* Menu links: a dark gold sits under the text and shows on hover (and on the current page), swept the same way. */
.nav-row .menu a { background: var(--aht-red-text-sheen) 100% 0 / 200% 100%; -webkit-background-clip: text; background-clip: text; }
.nav-row .menu a:hover, .nav-row .menu .current-menu-item > a { color: transparent; }
.nav-row .menu a:hover { animation: aht-sheen 0.8s ease-in-out; }
@media (prefers-reduced-motion: reduce) { .nav-row .menu a:hover { animation: none; } .cart-link svg { transition: none; } }
.search-row { padding-block: var(--space-3); border-top: 1px solid var(--aht-line); }
/* Language switch: a toggle with a sliding knob and the current language's name in the track.
   Light track and a gold knob in both languages: English has the knob on the left, Urdu on the right. Same width either way, so nothing shifts. */
.lang-switch { position: relative; flex: none; display: flex; align-items: center; width: 84px; height: 30px; padding-inline: 30px 8px; border-radius: var(--radius-pill); background: #e6e6e2; box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.14); color: var(--aht-ink-soft); font-size: var(--text-xs); font-weight: 700; line-height: 1; text-decoration: none; transition: padding 0.2s; }
.lang-switch::after { content: ""; position: absolute; inset: -7px 0; }
.lang-name { flex: 1; text-align: center; }
.lang-name[lang="ur"] { font-size: 1.2em; }
.lang-knob { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--aht-red-fill); background-color: var(--aht-red); box-shadow: 0 1px 3px rgb(0 0 0 / 0.25), 0 2px 6px rgb(0 0 0 / 0.08); transition: left 0.2s ease; }
.lang-switch.is-ur { padding-inline: 8px 30px; }
.lang-switch.is-ur .lang-knob { left: calc(100% - 27px); }
.lang-switch:hover { color: var(--aht-ink); }
@media (prefers-reduced-motion: reduce) { .lang-switch, .lang-knob { transition: none; } }
/* Small phones: narrower icon buttons, so the logo keeps its size. */
@media (max-width: 399px) { .bar > .icon-btn { width: 40px; } }

/* Search form (WooCommerce product search) */
.woocommerce-product-search { display: flex; gap: var(--space-2); }
.woocommerce-product-search .search-field { flex: 1; min-width: 0; height: var(--tap); padding: 0 var(--space-4); border: 2px solid var(--aht-line); border-radius: var(--radius-pill); background: var(--aht-paper); font-size: 1rem; }
/* The header stays left to right in Urdu; words typed in Urdu still run right to left in the box. */
.site-header .search-field { unicode-bidi: plaintext; }
.woocommerce-product-search .search-field:focus { border-color: var(--aht-ink); outline: none; }
.woocommerce-product-search button { height: var(--tap); padding: 0 var(--space-5); border: 0; border-radius: var(--radius-pill); font-weight: 700; cursor: pointer; }

/* Wide screens: search always open, menu bar under the logo */
.bar-search, .nav-row { display: none; }
@media (min-width: 1024px) {
  .menu-btn, .search-btn, .search-row, .bar .grow { display: none; }
  .bar { gap: var(--space-5); height: 80px; }
  .logo img { height: 48px; }
  .bar-search { display: block; flex: 1; max-width: 640px; margin-inline: var(--space-5) auto; }
  .bar-search .search-field { background: var(--aht-ground); border-color: var(--aht-ground); }
  .nav-row { display: block; border-top: 1px solid var(--aht-line); }
  .nav-bar { display: flex; align-items: center; gap: var(--space-6); height: 52px; }
  .nav-all { display: inline-flex; align-items: center; gap: var(--space-2); height: 40px; padding: 0 var(--space-4); border: 0; border-radius: var(--radius-pill); font-weight: 700; cursor: pointer; }
  .nav-all svg { width: 20px; height: 20px; }
  .nav-row .menu { display: flex; gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
  .nav-row .menu a { display: block; padding-block: var(--space-3); font-weight: 600; text-decoration: none; }
  .nav-row .menu .current-menu-item > a { box-shadow: inset 0 -3px 0 var(--aht-red-text); }
}

/* Drawer */
/* Always the left edge: the header keeps its English layout in Urdu, so the menu button that opens it is on the left there too.
   The drawer's own text still runs right to left. */
.drawer { margin: 0; left: 0; right: auto; width: min(320px, 86vw); max-width: none; height: 100%; max-height: none; padding: 0 0 var(--space-5); border: 0; background: var(--aht-paper); color: var(--aht-ink); overflow-y: auto; }
/* Open, it stacks as a column so the WhatsApp button sits at the bottom (closed, the dialog's own display:none stays). */
.drawer[open] { display: flex; flex-direction: column; }
.drawer::backdrop { background: rgb(0 0 0 / 0.45); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); padding-inline: var(--space-4) var(--space-2); border-bottom: 1px solid var(--aht-line); }
.drawer-title { font-weight: 800; font-size: var(--text-md); }
.drawer .menu { list-style: none; margin: 0; padding: 0; }
.drawer .menu a { display: flex; align-items: center; min-height: 52px; padding-inline: var(--space-4); border-bottom: 1px solid var(--aht-line); font-size: var(--text-md); font-weight: 600; text-decoration: none; }
.drawer .menu .current-menu-item > a { color: var(--aht-red-text); }
/* Hover: the same text sweep as the menu bar, and a faint accent wash on the row. */
.drawer .menu li { transition: background-color 0.15s; }
.drawer .menu li:hover { background-color: color-mix(in srgb, var(--aht-red) 8%, transparent); }
.drawer .menu a { background: var(--aht-red-text-sheen) 100% 0 / 200% 100%; -webkit-background-clip: text; background-clip: text; }
.drawer .menu a:hover { color: transparent; animation: aht-sheen 0.8s ease-in-out; }
@media (prefers-reduced-motion: reduce) { .drawer .menu a:hover { animation: none; } }
.drawer-label { margin: var(--space-5) var(--space-4) var(--space-1); font-size: var(--text-xs); font-weight: 700; color: var(--aht-ink-soft); text-transform: uppercase; letter-spacing: 0.04em; }
.drawer-cats a { font-weight: 500; }
.drawer .drawer-cats { margin-bottom: var(--space-5); }
.drawer-wa { margin: auto var(--space-4) 0; display: flex; flex-shrink: 0; }

/* Section titles */
/* Three levels: the hero, one lead section (Best sellers) with a big title and a red bar, quiet sections with a small one. */
.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin: var(--space-6) 0 var(--space-3); font-size: var(--text-md); line-height: 1.25; }
.section-title.is-lead { display: block; margin-top: var(--space-8); font-size: var(--text-xl); letter-spacing: -0.01em; }
.section-title.is-lead::before { content: ""; display: block; width: 40px; height: 4px; margin-bottom: var(--space-2); border-radius: 2px; background: var(--aht-red-fill); }
.section-title a { flex: none; font-size: var(--text-sm); font-weight: 600; color: var(--aht-red-text); text-decoration: none; }
.section-title a:hover { text-decoration: underline; }
@media (min-width: 1024px) {
  .section-title { margin: var(--space-7) 0 var(--space-4); font-size: var(--text-lg); }
  .section-title.is-lead { margin: var(--space-8) 0 var(--space-5); font-size: clamp(2rem, 2.8vw, 2.5rem); }
  .section-title.is-lead::before { width: 48px; }
}

/* Home order on phones: products come before the wholesale band. */
.home { display: flex; flex-direction: column; }
.home > .later { order: 2; }

/* Full-width colour bands (Best sellers, New arrivals): the colour runs to the screen edges, the content stays in the wrap. */
.band { margin-top: var(--space-7); padding-block: var(--space-5) var(--space-6); box-shadow: 0 0 0 100vmax var(--band); clip-path: inset(0 -100vmax); background: var(--band); }
.band + .band { margin-top: 0; }
.band > .section-title:first-child { margin-top: 0; }
/* A tint of the main colour (champagne on Gold), a shade deeper than the blush band that follows it, so the two read as separate bands. */
.band-cream { --band: var(--aht-tint); }
/* A whisper of the main colour, so it follows the owner's colour choice. */
.band-blush { --band: color-mix(in srgb, var(--aht-red) 6%, #fff); }
@media (min-width: 1024px) {
  .band { margin-top: var(--space-8); padding-block: var(--space-7); }
}

/* Home hero: picture on top and words under it on phones; words over the picture's quiet side on wide screens.
   Urdu mirrors the picture so the words still sit on its quiet side. */
.hero { margin-top: var(--space-4); border-radius: var(--radius-md); background: var(--aht-hero-ground); color: var(--aht-ink); overflow: hidden; }
.hero-pic { width: 100%; aspect-ratio: 15 / 8; object-fit: cover; user-select: none; -webkit-user-drag: none; }
/* Phones: only the picture's busy end (its right side; Urdu mirrors it), so the subject isn't small beside empty space. */
@media (max-width: 599px) { .hero-pic { aspect-ratio: 1; object-position: 100% 50%; } }
[dir="rtl"] .hero-pic { transform: scaleX(-1); }
.hero-text { padding: var(--space-5) var(--space-4); }
/* Title case comes from CSS, so whatever headline the owner types shows the same way (Urdu has no capitals and is unaffected). */
.hero-title { margin: 0; font-size: 2rem; line-height: 1.1; letter-spacing: -0.01em; text-transform: capitalize; }
.hero-title .accent { font-style: normal; background: var(--aht-red-text-fill); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-line { margin: var(--space-3) 0 var(--space-5); color: var(--aht-ink-soft); font-size: var(--text-md); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.hero-actions .btn { flex: 1 1 140px; min-height: 52px; }
/* Hero WhatsApp: a gold outline beside the filled Shop now, so there is one clear first choice. */
.hero-actions .btn-wa, .hero-actions .btn-wa:hover { background: none; color: var(--aht-ink); box-shadow: inset 0 0 0 2px var(--aht-red); animation: none; }
.hero-actions .btn-wa svg { color: var(--aht-red-text); }
.hero-actions .btn-wa:hover { background-color: rgb(255 255 255 / 0.6); }
@media (min-width: 900px) {
  /* The picture fills the whole panel (its left side must be light and plain: no fade over it); the words sit in the top row and the facts strip in the bottom one. */
  .hero.has-pic { position: relative; display: grid; grid-template-rows: 1fr auto; }
  .hero.has-pic > * { grid-column: 1; grid-row: 1; }
  .hero.has-pic .hero-pic { grid-row: 1 / -1; }
  .hero.has-pic .facts { grid-row: 2; position: relative; z-index: 2; background: rgb(255 250 240 / 0.88); }
  .hero.has-pic .hero-pic { min-height: 440px; max-height: 620px; aspect-ratio: auto; height: 100%; }
  .hero-text { align-self: center; max-width: 560px; padding: var(--space-7); }
  .hero.has-pic .hero-text { position: relative; z-index: 2; }
  .hero-title { font-size: clamp(2.5rem, 4.2vw, 4rem); }
  .hero-line { margin-top: var(--space-4); font-size: 1.25rem; margin-bottom: var(--space-6); }
  .hero-actions .btn { flex: none; min-width: 168px; }
}

/* Offer banners: swipe or arrows, dots show where you are */
.banners { position: relative; margin-top: var(--space-7); }
.banner-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--radius-md); }
.banner-track::-webkit-scrollbar { display: none; }
.banner { flex: 0 0 100%; scroll-snap-align: start; }
.banner img { width: 100%; aspect-ratio: 1434 / 766; object-fit: cover; background: var(--aht-ground); }
.dots { display: flex; justify-content: center; gap: 6px; margin-top: var(--space-2); }
.dots i { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--aht-line); transition: width 0.2s; }
.dots i.on { width: 20px; background: var(--aht-red-fill); }
.banner-nav { position: absolute; z-index: 2; top: 50%; display: grid; place-items: center; width: 40px; height: 40px; margin-top: -20px; padding: 0; border: 0; border-radius: 50%; background: rgb(255 255 255 / 0.92); color: var(--aht-ink); box-shadow: var(--shadow); cursor: pointer; transition: opacity 0.2s; }
.banner-nav svg { width: 22px; height: 22px; }
.banner-nav.prev { inset-inline-start: var(--space-2); }
.banner-nav.next { inset-inline-end: var(--space-2); }
.banner-nav:hover { background: var(--aht-red-fill); color: var(--aht-on-red); }
.banner-nav:disabled { opacity: 0; pointer-events: none; }
/* The chevron points right: flip it for "previous" in English and for "next" in Urdu. */
.banner-nav.prev svg, [dir="rtl"] .banner-nav.next svg { transform: scaleX(-1); }
[dir="rtl"] .banner-nav.prev svg { transform: none; }
/* The banner arrows sit on the picture, above the dots. */
.banners .banner-nav { top: calc(50% - 12px); }
/* Swiping rows: arrows level with the pictures, only when there is more to see. */
.scroller { position: relative; }
.scroller .scroll-nav { display: none; }
.scroller.can-scroll .scroll-nav { display: grid; }
.scroller ul.products ~ .scroll-nav { top: 32%; }
.scroller .cats ~ .scroll-nav { top: 38px; }
.scroller .scroll-nav.prev { inset-inline-start: calc(-1 * var(--space-2)); }
.scroller .scroll-nav.next { inset-inline-end: calc(-1 * var(--space-2)); }
@media (min-width: 1024px) {
  .banners { margin-top: var(--space-8); }
  .banners .dots { position: absolute; inset-inline: 0; bottom: var(--space-3); margin: 0; }
  .banners .dots i { background: rgb(255 255 255 / 0.7); box-shadow: 0 0 0 1px rgb(0 0 0 / 0.08); }
  .banners .dots i.on { background: var(--aht-red-fill); }
  .banner-nav { width: var(--tap); height: var(--tap); margin-top: calc(var(--tap) / -2); }
  .banner-nav svg { width: 24px; height: 24px; }
  .banners .banner-nav { top: 50%; }
  .banners .banner-nav.prev { inset-inline-start: var(--space-3); }
  .banners .banner-nav.next { inset-inline-end: var(--space-3); }
}

/* Delivery and payment facts: the hero's bottom edge, read in a glance */
.facts { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; margin: 0; padding: var(--space-3) var(--space-1); list-style: none; border-top: 1px solid rgb(138 101 20 / 0.2); }
.facts li { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding: 0 var(--space-2); font-size: var(--text-xs); line-height: 1.3; text-align: center; color: var(--aht-ink-soft); }
.facts li + li { border-inline-start: 1px solid rgb(138 101 20 / 0.2); }
.facts svg { width: 22px; height: 22px; flex: none; color: var(--aht-red-text); }
.facts b { display: block; color: var(--aht-ink); }
@media (min-width: 720px) {
  /* Each fact takes its own width and the spare room is shared equally, so short and long ones sit evenly. */
  .facts { display: flex; padding: var(--space-4) 0; }
  .facts li { flex: 1 1 auto; }
  .facts li { flex-direction: row; justify-content: center; gap: var(--space-3); font-size: var(--text-sm); text-align: start; }
  .facts svg { width: 26px; height: 26px; }
}

/* Wholesale band */
.wholesale { display: grid; margin-top: var(--space-8); border: 1px solid color-mix(in srgb, var(--aht-red) 30%, #fff); border-radius: var(--radius-md); background: var(--aht-tint-ground); color: var(--aht-ink); overflow: hidden; }
.wholesale-body { padding: var(--space-5); }
.wholesale-title { margin: 0 0 var(--space-2); font-size: var(--text-lg); line-height: 1.2; }
.wholesale-body p { max-width: 46ch; margin: 0 0 var(--space-4); color: var(--aht-ink-soft); }
.wholesale-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* WhatsApp channel: a gold outline beside the filled button, like the hero's. */
.wholesale-actions .btn-channel, .wholesale-actions .btn-channel:hover { background: none; color: var(--aht-ink); box-shadow: inset 0 0 0 2px var(--aht-red); animation: none; }
.wholesale-actions .btn-channel svg { color: var(--aht-red-text); }
.wholesale-actions .btn-channel:hover { background-color: rgb(255 255 255 / 0.6); }
/* The picture fades into the band on the text's side: its foot on phones, its right edge on wide screens.
   The subject sits left with the table low, so crops keep that corner. Urdu mirrors it, like the hero. */
.wholesale-pic { order: -1; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; object-position: 0 75%; mask-image: linear-gradient(to bottom, #000 70%, transparent); }
[dir="rtl"] .wholesale-pic { transform: scaleX(-1); }
@media (min-width: 900px) {
  .wholesale.has-pic { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 320px; }
  .wholesale-body { align-self: center; padding: var(--space-7); }
  .wholesale-title { font-size: var(--text-xl); }
  /* Height 0 + min-height 100%: the text sets the band's height, the picture only fills it. */
  .wholesale-pic { height: 0; min-height: 100%; aspect-ratio: auto; mask-image: linear-gradient(to right, #000 75%, transparent); }
  /* No picture: text on one side, button on the other. */
  .wholesale:not(.has-pic) .wholesale-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-6); }
  .wholesale:not(.has-pic) .wholesale-body > :not(.btn, .wholesale-actions) { grid-column: 1; }
  .wholesale:not(.has-pic) .wholesale-body > :is(.btn, .wholesale-actions) { grid-column: 2; grid-row: 1 / span 2; }
  .wholesale:not(.has-pic) .wholesale-body p { margin-bottom: 0; }
}

/* Round categories */
.cats { display: flex; gap: var(--space-4); margin: 0; padding: 0 0 var(--space-2); list-style: none; overflow-x: auto; scrollbar-width: none; }
.cats::-webkit-scrollbar { display: none; }
.cats li { flex: none; }
.cat { display: block; width: 76px; text-align: center; font-size: var(--text-xs); font-weight: 600; line-height: 1.3; text-decoration: none; }
.cat-pic { display: block; width: 76px; height: 76px; margin-bottom: var(--space-2); padding: 10px; border-radius: 50%; background: color-mix(in srgb, var(--aht-red) 6%, #fff); box-shadow: inset 0 0 0 1px var(--aht-red); overflow: hidden; transition: box-shadow 0.15s, background-color 0.15s; }
/* The ring is drawn inside the circle: the row scrolls sideways, so anything outside it is cut off. */
@media (hover: hover) {
  .cat:hover .cat-pic { background: color-mix(in srgb, var(--aht-red) 12%, #fff); box-shadow: inset 0 0 0 2px var(--aht-red); }
  .cat:hover .cat-name { color: var(--aht-red-text); }
}
/* Home: the categories sit centred between the hero and the champagne Best sellers band, with equal room above and below. */
.cats-block { padding-block: var(--space-2) var(--space-1); }
@media (min-width: 1024px) {
  .cats-block { padding-block: var(--space-4) var(--space-2); }
  .cats-block .section-title { justify-content: center; margin-bottom: var(--space-5); font-size: var(--text-xl); }
}
.cat-pic img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; mix-blend-mode: multiply; }
@media (min-width: 720px) {
  .cats { justify-content: space-between; }
  .cat, .cat-pic { width: 96px; }
  .cat-pic { height: 96px; }
}
@media (min-width: 1280px) {
  .cats { gap: var(--space-5); }
  .cat { width: 128px; font-size: var(--text-sm); }
  .cat-pic { width: 128px; height: 128px; padding: 14px; }
}

/* Ordinary pages */
.page-wrap { padding-block: var(--space-4) var(--space-6); }
.page-title { margin: var(--space-4) 0 var(--space-4); font-size: var(--text-xl); line-height: 1.2; }
.entry { max-width: 720px; }
.entry > :first-child { margin-top: 0; }
.entry h2 { font-size: var(--text-lg); margin: var(--space-6) 0 var(--space-2); }
.entry h3 { font-size: var(--text-md); margin: var(--space-5) 0 var(--space-2); }
.entry a { color: var(--aht-red-text); }
.entry .wp-block-button__link { min-height: var(--tap); display: inline-flex; align-items: center; padding: 0 var(--space-5); border-radius: var(--radius-pill); font-weight: 700; text-decoration: none; }
.woocommerce-cart .entry, .woocommerce-checkout .entry, .woocommerce-account .entry { max-width: none; }

/* Blog: the list of posts, then one post. Older posts carry their own design, so .post-own only sets their width. */
.post-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
.post-card a { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--aht-line); border-radius: var(--radius-md); background: var(--aht-paper); text-decoration: none; }
.post-card a:hover { box-shadow: var(--shadow); }
.post-card-pic { position: relative; flex: none; display: flex; align-items: center; justify-content: center; overflow: hidden; aspect-ratio: 16 / 9; background: var(--aht-tint-ground); }
.post-card-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.post-card-pic .post-card-logo { position: static; width: 40%; height: auto; object-fit: contain; }
.post-card .post-date { margin: var(--space-5) var(--space-4) 0; }
.post-card-title { margin: var(--space-2) var(--space-4) 0; font-size: var(--text-md); font-weight: 700; line-height: 1.35; }
.post-card-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin: var(--space-3) var(--space-4) var(--space-5); color: var(--aht-ink-soft); font-size: var(--text-sm); }
.post-date { margin: 0 0 var(--space-4); color: var(--aht-ink-soft); font-size: var(--text-xs); }
/* Their stylesheets also set p { color } for the whole page, which would turn these footer lines dark on black. */
.footer-name, .footer-wholesale { color: #fff; }
.post-own, .post-plain { max-width: 880px; margin-inline: auto; }
.post-plain { max-width: 720px; }
/* A wide table scrolls by itself on a phone instead of the whole page. */
.post-own table { display: block; max-width: 100%; overflow-x: auto; }
.post-pic { width: 100%; margin-bottom: var(--space-5); border-radius: var(--radius-md); }
.post-back { margin: 0 0 var(--space-4); font-size: var(--text-sm); font-weight: 600; }
.post-back a { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--tap); color: var(--aht-ink); text-decoration: none; }
.post-back svg { width: 18px; height: 18px; transform: scaleX(-1); }
[dir="rtl"] .post-back svg { transform: none; }
.pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-6); }
.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: var(--tap); min-height: var(--tap); padding-inline: var(--space-3); border-radius: var(--radius-pill); text-decoration: none; }
.pagination .page-numbers.current { background: var(--aht-red); color: var(--aht-on-red); font-weight: 700; }
.home-text { margin-top: var(--space-6); }

/* Contact: built from Home's parts. The hero holds the map where Home has its picture (on top on phones, beside
   the words on wide screens), with the hours and delivery facts along its bottom; a cream band of help cards
   with ringed icons like the round categories; the gold panel of the wholesale band for email. */
.contact-hero .eyebrow { margin: 0 0 var(--space-2); font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--aht-red-text); }
.contact-hero .hero-line { margin-bottom: var(--space-4); }
/* The number never breaks; on a narrow phone Directions moves to its own row instead. */
.contact-hero .hero-actions .btn { white-space: nowrap; }
.contact-map { aspect-ratio: 4 / 3; background: var(--aht-ground); }
.contact-map iframe { display: block; width: 100%; height: 100%; border: 0; filter: saturate(0.75) sepia(0.12); }
.contact-address { display: flex; gap: var(--space-2); margin: 0 0 var(--space-5); font-style: normal; font-weight: 600; line-height: 1.5; }
.contact-address svg { width: 22px; height: 22px; flex: none; margin-top: 1px; color: var(--aht-red-text); }
.contact-help { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.contact-help-card { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-3); align-items: start; padding: var(--space-4); border-radius: var(--radius-md); background: var(--aht-paper); box-shadow: var(--shadow); }
.contact-help-card .contact-ico { grid-row: span 2; }
.contact-help-card h3 { margin: var(--space-1) 0; font-size: var(--text-md); line-height: 1.3; }
.contact-help-card p { margin: 0; color: var(--aht-ink-soft); font-size: var(--text-sm); line-height: 1.6; }
.contact-help-card .btn { grid-column: 1 / -1; margin-top: var(--space-4); }
.contact-ico { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: color-mix(in srgb, var(--aht-red) 6%, #fff); box-shadow: inset 0 0 0 1px var(--aht-red); color: var(--aht-red-text); }
.contact-ico svg { width: 24px; height: 24px; }
.contact-email { margin-top: var(--space-7); }
.contact-email p a { color: var(--aht-ink); font-weight: 700; text-decoration-color: var(--aht-red); text-underline-offset: 3px; overflow-wrap: anywhere; }
@media (min-width: 720px) {
  .contact-help { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
  .contact-help-card { display: flex; flex-direction: column; padding: var(--space-5); }
  .contact-help-card .contact-ico { width: 56px; height: 56px; margin-bottom: var(--space-3); }
  .contact-help-card .contact-ico svg { width: 28px; height: 28px; }
  .contact-help-card p { margin-bottom: var(--space-4); }
  .contact-help-card .btn { margin-top: auto; align-self: stretch; }
}
@media (min-width: 900px) {
  .contact-hero.has-map { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  .contact-hero.has-map .hero-text { grid-column: 1; grid-row: 1; }
  .contact-hero.has-map .contact-map { grid-column: 2; grid-row: 1; aspect-ratio: auto; min-height: 420px; margin: var(--space-5); margin-inline-start: 0; border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 0 0 6px rgb(255 255 255 / 0.7), var(--shadow); }
  .contact-hero .facts { grid-column: 1 / -1; }
  .contact-hero .hero-title { font-size: clamp(2.5rem, 3.6vw, 3.5rem); }
  .contact-email { margin-top: var(--space-8); }
}

/* About: Home's hero with a picture or a collage of category photos, promise cards on the cream band,
   the mission on the blush band, round categories, the wholesale band, the shop's details. */
.about { display: flex; flex-direction: column; padding-bottom: var(--space-6); }
.about-eyebrow { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.12em; line-height: 1.2; text-transform: uppercase; color: var(--aht-red-text); }
.about-eyebrow::before { content: ""; width: 28px; height: 3px; border-radius: 2px; background: var(--aht-red-fill); }
.about-hero-grid { display: flex; flex-direction: column; }
/* The page title is the eyebrow (the h1), so the headline is a paragraph: give it Home's heading weight. */
.about-hero .hero-title { font-weight: 700; }
/* Phones: the picture comes first, as on Home. */
.about-hero-pic, .about-collage { order: -1; }
/* The picture fades into the hero on the text's side: its foot on phones, its inner edge on wide screens.
   Urdu flips the fade, not the picture, because a shop photo may carry a sign. */
.about-hero-pic { width: 100%; aspect-ratio: 6 / 5; object-fit: cover; mask-image: linear-gradient(to bottom, #000 80%, transparent); }
.about-collage { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); margin: 0; padding: var(--space-4) var(--space-4) 0; list-style: none; }
.about-collage li { aspect-ratio: 1; border-radius: var(--radius-md); background: var(--aht-paper); box-shadow: var(--shadow); overflow: hidden; }
.about-collage img { width: 100%; height: 100%; padding: 8%; object-fit: contain; mix-blend-mode: multiply; }
.about-promises { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.about-promises li { padding: var(--space-5); border-radius: var(--radius-md); background: var(--aht-paper); box-shadow: var(--shadow); }
.about-ico { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: var(--space-3); border-radius: 50%; background: var(--aht-tint); color: var(--aht-red-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--aht-red) 35%, #fff); }
.about-ico svg { width: 26px; height: 26px; }
.about-promises h3 { margin: 0 0 var(--space-1); font-size: var(--text-md); }
.about-promises p { margin: 0; color: var(--aht-ink-soft); line-height: 1.6; }
/* Phones: icon beside the words, so the three cards stay short. */
@media (max-width: 719px) {
  .about-promises li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-3); padding: var(--space-4); }
  .about-promises .about-ico { grid-row: span 2; width: 44px; height: 44px; margin: 0; }
  .about-promises .about-ico svg { width: 22px; height: 22px; }
}
.about-mission { text-align: center; }
.about-mission .about-eyebrow { justify-content: center; }
.about-mission-text { max-width: 30ch; margin: 0 auto; font-size: 1.5rem; font-weight: 800; line-height: 1.3; letter-spacing: -0.01em; }
.about-mission-text .accent { font-style: normal; background: var(--aht-red-text-fill); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Four categories always fit one line, so no sideways scroll: the circles shrink with the screen. */
.about-cats { margin-top: var(--space-5); }
.about-cats .cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); overflow: visible; }
.about-cats .cat { width: auto; }
.about-cats .cat-pic { width: 100%; height: auto; max-width: 76px; aspect-ratio: 1; margin-inline: auto; }
.about-visit-list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--aht-line); border-radius: var(--radius-md); }
.about-visit-list li { display: flex; gap: var(--space-3); padding: var(--space-4); }
.about-visit-list li + li { border-top: 1px solid var(--aht-line); }
.about-visit-list svg { flex: none; width: 24px; height: 24px; color: var(--aht-red-text); }
.about-visit-list b { display: block; font-size: var(--text-xs); letter-spacing: 0.04em; text-transform: uppercase; color: var(--aht-ink-soft); }
.about-visit-list a { font-weight: 600; }
.about-map { display: block; margin-top: var(--space-1); color: var(--aht-red-text); }
@media (min-width: 720px) {
  .about-promises { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
  .about-mission-text { font-size: 2rem; }
  .about-cats .cats { grid-template-columns: repeat(4, 128px); justify-content: center; gap: var(--space-7); }
  .about-cats .cat-pic { max-width: none; }
  .about-cats .section-title { justify-content: center; }
  .about-visit-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .about-visit-list li + li { border-top: 0; border-inline-start: 1px solid var(--aht-line); }
}
@media (min-width: 900px) {
  /* Words on the left, picture or collage on the right; the facts strip runs along the bottom. */
  .about-hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; }
  .about-hero-pic, .about-collage { order: 0; }
  .about-hero .hero-text { max-width: none; }
  .about-hero-pic { height: 100%; min-height: 440px; aspect-ratio: auto; mask-image: linear-gradient(to left, #000 75%, transparent); }
  [dir="rtl"] .about-hero-pic { mask-image: linear-gradient(to right, #000 75%, transparent); }
  .about-collage { grid-template-columns: 1fr 1fr; gap: var(--space-4); padding: var(--space-7) var(--space-7) var(--space-7) 0; }
  /* The second column sits lower, so the four photos read as a set rather than a table. */
  .about-collage li:nth-child(even) { transform: translateY(var(--space-5)); }
}
@media (min-width: 1024px) {
  .about-cats { margin-top: var(--space-7); }
  .about-mission-text { font-size: clamp(2rem, 3vw, 2.75rem); }
}

/* Not found */
.not-found .woocommerce-product-search { max-width: 480px; margin-block: var(--space-4); }

/* Footer */
.site-footer { margin-top: var(--space-7); padding-block: var(--space-6) var(--space-5); background: var(--aht-ink); color: #fff; font-size: var(--text-sm); }
.site-footer a { color: #fff; }
/* The footer stays left to right in Urdu; each Urdu line still reads right to left. */
.site-footer :is(p, span, li > a) { unicode-bidi: plaintext; }
.footer-grid { display: grid; gap: var(--space-5); }
.footer-name { margin: 0; font-weight: 800; font-size: var(--text-md); }
.footer-tagline { margin: var(--space-1) 0 0; color: #c9c9c9; }
.footer-details, .footer-links, .footer-social { list-style: none; margin: 0; padding: 0; }
.footer-details li { display: flex; gap: var(--space-3); margin-bottom: var(--space-3); }
.footer-details svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.footer-links li { margin-bottom: var(--space-2); }
.footer-links a { display: inline-block; padding-block: var(--space-1); }
.footer-hours { display: block; }
.footer-hours + .footer-hours { margin-top: var(--space-1); }
.footer-social { min-width: 0; }
.footer-social a { display: flex; align-items: center; gap: var(--space-3); min-height: var(--tap); overflow-wrap: anywhere; }
.footer-social svg { width: 36px; height: 36px; flex: none; padding: 8px; border-radius: 50%; background: #2a2a2a; transition: background-color 0.15s; }
.footer-social a:hover svg { background: var(--aht-red-fill); color: var(--aht-on-red); }
.footer-wholesale { margin: 0; }
.footer-copy { margin: var(--space-5) 0 0; padding-top: var(--space-4); border-top: 1px solid #3a3a3a; color: #c9c9c9; font-size: var(--text-xs); }
@media (min-width: 720px) {
  .footer-grid { grid-template-columns: 1.2fr 0.7fr 1.3fr 1.3fr; }
}

/* Floating WhatsApp: red, so it stands out on white pages and on the black footer alike. */
.wa-float { position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: 9; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; box-shadow: var(--shadow); }
.wa-float svg { width: 30px; height: 30px; }
button.wa-float { padding: 0; border: 0; cursor: pointer; }
/* The two choices above the floating button, when the owner has set a channel. */
.wa-menu { position: fixed; right: var(--space-4); bottom: calc(var(--space-4) + 58px + var(--space-2)); z-index: 9; width: min(280px, calc(100vw - 2 * var(--space-4))); padding: var(--space-2); border: 1px solid var(--aht-line); border-radius: var(--radius-md); background: var(--aht-paper); box-shadow: var(--shadow); }
/* Pointer down to the middle of the 58px button. */
.wa-menu::after { content: ""; position: absolute; right: 22px; bottom: -8px; width: 14px; height: 14px; border-right: 1px solid var(--aht-line); border-bottom: 1px solid var(--aht-line); border-bottom-right-radius: 3px; background: var(--aht-paper); transform: rotate(45deg); }
.wa-menu a { display: flex; align-items: center; gap: var(--space-3); min-height: var(--tap); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); color: var(--aht-ink); font-weight: 600; text-decoration: none; }
.wa-menu a:hover { background: var(--aht-ground); }
.wa-menu svg { width: 22px; height: 22px; flex: none; color: var(--aht-red-text); }
/* QR code: on a light ground so phones can read it on the black footer. */
.footer-qr { display: none; }
@media (min-width: 900px) {
  .footer-qr { display: block; width: 120px; margin: var(--space-4) 0 0; color: #c9c9c9; font-size: var(--text-xs); text-align: center; }
  .footer-qr img { display: block; width: 120px; height: auto; margin-bottom: var(--space-1); padding: var(--space-2); border-radius: var(--radius-sm); background: #fff; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Nastaliq reads larger than the Latin face at the same size, so Urdu headings step down about 12%.
   Token sizes are redefined on the heading itself; fixed sizes get their own values. Product names (English) stay as they are. */
:root[lang^="ur"] :is(h1, h2, h3, .section-title, .wholesale-title):not(.product_title, .woocommerce-loop-product__title) { --text-md: 1rem; --text-lg: 1.2rem; --text-xl: 1.55rem; }
:root[lang^="ur"] .hero-title { font-size: 1.75rem; }
:root[lang^="ur"] .about-mission-text { font-size: 1.3rem; font-weight: 700; line-height: 2; }
/* Nastaliq is tall and joins its letters: tight English line-heights make lines collide, letter-spacing breaks the joins. */
/* !important: one language-wide rule instead of an override beside every label, here and in shop.css. */
:root[lang^="ur"] body * { letter-spacing: normal !important; }
:root[lang^="ur"] :is(.about-eyebrow, .contact-hero .eyebrow) { font-size: var(--text-sm); }
:root[lang^="ur"] .hero-title { line-height: 1.6; }
@media (min-width: 720px) { :root[lang^="ur"] .about-mission-text { font-size: 1.75rem; } }
@media (min-width: 900px) {
  :root[lang^="ur"] .hero-title { font-size: clamp(2.2rem, 3.7vw, 3.5rem); }
  :root[lang^="ur"] .contact-hero .hero-title { font-size: clamp(2.2rem, 3.2vw, 3.1rem); }
}
@media (min-width: 1024px) { :root[lang^="ur"] .section-title.is-lead { font-size: clamp(1.75rem, 2.5vw, 2.2rem); } }
@media (min-width: 1280px) { :root[lang^="ur"] :is(h1, h2, h3, .section-title, .wholesale-title):not(.product_title, .woocommerce-loop-product__title) { --text-lg: 1.45rem; --text-xl: 1.75rem; } }