/*
  Public storefront styles, ported from prototype/storefront.html with the hardcoded colours
  replaced by the tokens in tokens.css. Layout, spacing and sizing are unchanged.

  RTL is handled by the `dir` attribute on <html> plus logical properties
  (margin-inline, padding-inline, inset-inline) rather than a second stylesheet - which is what
  requirements 3 means by "dir=rtl swaps automatically via CSS".
*/

* { box-sizing: border-box; }

html, body {
    margin: 0;
    min-height: 100%;
}

a { color: var(--dk-accent); text-decoration: none; }

button { font-family: inherit; }

::-webkit-scrollbar { display: none; }

body {
    min-height: 100vh;
    background: var(--dk-page);
    color: var(--dk-ink);
    font-family: var(--dk-font-body);
    display: flex;
    flex-direction: column;
}

.container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 40px;
}

main { flex: 1; }

/* ---- Top bar ---- */

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--dk-hairline);
}

.topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 10px;
    padding: 16px 40px;
    max-width: 1180px;
    margin: 0 auto;
    gap: 20px;
}

.brand-row { display: flex; align-items: center; gap: 22px; }

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--dk-ink);
}

.brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    overflow: hidden;
    flex: none;
    background: #F3EFE6;
}

.brand-mark img { width: 100%; height: 100%; object-fit: cover; }

/*
  The wordmark stays in Latin script in both languages by design (requirements 5), so it keeps
  the Latin display font even when the page is Arabic.
*/
.logo-text {
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    font-size: 19px;
    letter-spacing: -.01em;
}

.nav-links { display: flex; align-items: center; gap: 26px; }

.navlink {
    font-weight: 700;
    font-size: 14.5px;
    color: var(--dk-text-muted);
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px 2px;
    position: relative;
}

.navlink.active { color: var(--dk-ink); }

.navlink .underline {
    position: absolute;
    inset-inline: 2px;
    bottom: -3px;
    height: 3px;
    border-radius: 3px;
    background: var(--dk-accent);
    transform: scaleX(0);
    transition: transform .2s ease;
}

.navlink.active .underline { transform: scaleX(1); }

/* The account link's person icon is for phones only (see the 520px block). */
.navlink-account { display: inline-flex; align-items: center; }
.navlink-icon { display: none; }

.lang-toggle {
    background: none;
    border: 2px solid var(--dk-border);
    border-radius: var(--dk-radius-pill);
    padding: 6px 14px;
    font-weight: 800;
    font-size: 13px;
    color: var(--dk-ink);
    cursor: pointer;
    /* A link since ADR-0064, styled as the button it was. */
    display: inline-block;
    text-decoration: none;
    line-height: normal;
}

/* Instagram and TikTok: round icons the height of the language button. */
.social-links { display: flex; align-items: center; gap: 6px; }

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 2px solid var(--dk-border);
    border-radius: var(--dk-radius-pill);
    color: var(--dk-ink);
}

/* WhatsApp, floating in the corner of every page. inset-inline-end puts it bottom-left on the
   Arabic page; the safe-area term keeps it clear of a phone's home bar. */
.wa-float {
    position: fixed;
    inset-inline-end: 20px;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
    transition: transform .15s ease;
}

.wa-float:hover { transform: scale(1.06); }
.wa-float:focus-visible { outline: 3px solid var(--dk-accent); outline-offset: 3px; }

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

@keyframes riseIn {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeItem {
    from { opacity: 0; transform: translateY(12px) scale(.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes floatSlow {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(-6px, 10px) rotate(3deg); }
}

@keyframes floatSlow2 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(8px, -8px) rotate(-4deg); }
}

/* Backwards, not both: once it has risen, the page keeps no transform. A transform left on it,
   even translateY(0), makes it the box a position: fixed child is placed in, and the page holds
   the product page's Add to cart bar (ADR-0106). Its resting state is already what the
   animation ends on. */
.screen { animation: riseIn .38s cubic-bezier(.22, .7, .32, 1) backwards; }
.fade-item { opacity: 0; animation: fadeItem .45s cubic-bezier(.22, .7, .32, 1) both; }

.tap { transition: transform .15s ease, box-shadow .18s ease, background-color .15s ease; }
.tap:active { transform: scale(.95); }

.card { transition: transform .2s ease, box-shadow .2s ease; cursor: pointer; }
.card:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(43, 42, 40, .14); }
.card:active { transform: translateY(-1px) scale(.985); }

.chip { transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .15s ease, box-shadow .2s ease; }
.chip:hover { transform: translateY(-2px); }
.chip:active { transform: scale(.94); }

.tile { transition: transform .2s ease, box-shadow .2s ease; cursor: pointer; }
.tile:hover { transform: translateY(-4px) scale(1.02); }
.tile:active { transform: scale(.95); }

.cta { transition: transform .15s ease, box-shadow .2s ease, filter .15s ease; }
.cta:hover { filter: brightness(1.06); transform: translateY(-2px); }
.cta:active { transform: scale(.97); }

.blob-a { animation: floatSlow 8s ease-in-out infinite; }
.blob-b { animation: floatSlow2 9s ease-in-out infinite; }

/* Not in the prototype; costs nothing and matters to anyone who has asked for less motion. */
@media (prefers-reduced-motion: reduce) {
    .screen, .fade-item, .tap, .card, .chip, .tile, .cta, .blob-a, .blob-b, .subtile, .group-tile-go {
        animation: none;
        transition: none;
    }
    .fade-item { opacity: 1; }
}

a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--dk-accent);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ---- Hero ---- */

.hero { display: flex; align-items: center; gap: 48px; padding: 56px 0 60px; }
.hero-copy { flex: 1 1 420px; min-width: 280px; }
.hero-art { flex: 1 1 360px; min-width: 260px; position: relative; height: 320px; }

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--dk-warning-bg);
    color: var(--dk-warning-fg);
    border-radius: var(--dk-radius-pill);
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 800;
}

.hero-title {
    font-family: var(--dk-font-display);
    font-weight: 700;
    font-size: 46px;
    line-height: 1.08;
    margin: 14px 0 16px;
}

.hero-desc { font-size: 15px; line-height: 1.65; color: var(--dk-text-muted); max-width: 480px; }

.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }

.btn-accent {
    background: var(--dk-accent);
    color: #fff;
    border: none;
    border-radius: var(--dk-radius-pill);
    padding: 13px 26px;
    font-weight: 800;
    font-size: 14px;
    box-shadow: 0 10px 22px var(--dk-accent-shadow);
}

.btn-outline {
    background: var(--dk-surface);
    color: var(--dk-ink);
    border: 2px solid var(--dk-border);
    border-radius: var(--dk-radius-pill);
    padding: 11px 24px;
    font-weight: 800;
    font-size: 14px;
}

/* ---- Sections ---- */

.section { padding: 10px 0 34px; }

.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.section-title { font-family: var(--dk-font-display); font-weight: 700; font-size: 24px; }

.section-link { font-weight: 800; font-size: 13.5px; }

.grid-products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 24px;
}

.row-scroll {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 10px;
    scrollbar-width: thin;
    scrollbar-color: rgba(43, 42, 40, .22) transparent;
}

/* Deliberately re-enabled for these rows only - the global rule above hides scrollbars. */
.row-scroll::-webkit-scrollbar { display: block; height: 6px; }
.row-scroll::-webkit-scrollbar-track { background: transparent; }
.row-scroll::-webkit-scrollbar-thumb { background: rgba(43, 42, 40, .22); border-radius: 3px; }
.row-scroll::-webkit-scrollbar-thumb:hover { background: rgba(43, 42, 40, .34); }

.row-scroll > * { flex: 0 0 auto; }

/* ---- Tiles ---- */

.tile {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 150px;
    height: 110px;
    border-radius: 18px;
    padding: 14px;
    color: #fff;
    font-weight: 800;
    font-size: 15px;
    text-decoration: none;
}

/* ---- Home: each group with its items (ADR-0021) ----
   A card per group: the design's coloured tile across the top, picking the whole group, and
   every item beneath it as a smaller box tinted with the same colour. The tint is mixed from
   the card's --tile, so the colour is set once, in the markup; the plain values before each
   color-mix() are for a browser without it. */

.group-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
    align-items: start;
}

.group-card {
    background: var(--dk-surface);
    border-radius: 20px;
    box-shadow: var(--dk-shadow-card);
    overflow: hidden;
}

.group-card .group-tile {
    width: auto;
    height: auto;
    min-height: 92px;
    border-radius: 0;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    background: var(--tile);
    font-size: 16px;
    line-height: 1.3;
    transition: filter .18s ease;
}

/* Inside a card the tile's own lift would slide it out from under the card's rounded top. */
.group-card .group-tile:hover { transform: none; filter: brightness(1.07); }
.group-card .group-tile:active { transform: none; filter: brightness(.96); }

.group-tile-go {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .24);
    transition: transform .18s ease;
}

.group-tile:hover .group-tile-go { transform: translateX(3px); }

/* A type or age tile with a photo of what is in it: the photo fills the tile, and a shade at
   the foot keeps the name readable on any picture. */
.group-card .group-tile.has-photo { position: relative; min-height: 150px; overflow: hidden; }
.group-tile .tile-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.group-tile.has-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0) 65%);
}
.group-tile.has-photo > span { position: relative; z-index: 1; }

/* ---- Shop: a row of cards per category ---- */

/* A row far off screen is not drawn (ADR-0102): twenty rows of cards, each card a strip of
   photos, were more than an iPhone's in-app browser could hold at once. The height stands in
   for an undrawn row until it has been drawn once. */
.shop-row { margin-bottom: 28px; content-visibility: auto; contain-intrinsic-size: auto 490px; }
.shop-row-head { padding-top: 0; margin-bottom: 12px; }
.shop-row-title { font-family: var(--dk-font-display); font-weight: 700; font-size: 20px; margin: 0; }
[dir="rtl"] .group-tile-go svg { transform: rotate(180deg); }
[dir="rtl"] .group-tile:hover .group-tile-go { transform: translateX(-3px); }

.subtiles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 16px 16px;
}

.subtile {
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border-radius: 12px;
    border: 1.5px solid #ECE8DF;
    border-color: color-mix(in srgb, var(--tile) 26%, #fff);
    background: #F7F5F0;
    background: color-mix(in srgb, var(--tile) 10%, #fff);
    color: var(--dk-ink);
    color: color-mix(in srgb, var(--tile) 62%, #000);
    font-weight: 800;
    font-size: 12.5px;
    line-height: 1.25;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .15s ease;
}

.subtile:hover {
    background: var(--tile);
    border-color: var(--tile);
    color: #fff;
    transform: translateY(-2px);
}

.subtile:active { transform: scale(.95); }

/* ---- Product cards ---- */

.pcard {
    display: block;
    width: 230px;
    background: var(--dk-surface);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--dk-shadow-card);
    color: inherit;
}

.grid-products .pcard { width: auto; }

/* A product's photo is shown whole. LC Waikiki's are 3:4 portraits, so the frame is 3:4 too, and
   contain puts any other shape on the grey they are shot on rather than cutting it. A fixed 200px
   frame with cover showed only the middle two thirds of each photo. */
.pcard-art { position: relative; aspect-ratio: 3 / 4; background: var(--dk-photo); }
.pcard-art img { display: block; width: 100%; height: 100%; object-fit: contain; }

.pcard-badge {
    position: absolute;
    top: 10px;
    inset-inline-start: 10px;
    background: var(--dk-accent);
    color: #fff;
    border-radius: var(--dk-radius-pill);
    padding: 4px 10px;
    font-size: 11.5px;
    font-weight: 800;

    /* A number runs left-to-right in both languages. Without this the badge inherits the
       page's RTL direction, and because a leading hyphen is bidi-neutral the browser moves
       it to the other end: "-20%" is written in the markup and "20%-" appears on screen. */
    direction: ltr;
}

.pcard-points {
    position: absolute;
    top: 10px;
    inset-inline-end: 10px;
    background: rgba(255, 255, 255, .92);
    color: var(--dk-gold);
    border-radius: var(--dk-radius-pill);
    padding: 4px 10px;
    font-size: 11.5px;
    font-weight: 800;
}

/* A card with several photos swipes through them in place (ADR-0060). Plain scroll-snap, like
   the promo banner, so it works with no script; card-photos.js moves the dots and shows the
   arrows to a mouse. */
.pcard-photos {
    position: absolute;
    inset: 0;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.pcard-photos::-webkit-scrollbar { display: none; }
.pcard-photo { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; -webkit-user-drag: none; }
/* A photo not fetched yet shows the grey frame, not its alt text (ADR-0102). */
.pcard-photo[data-src] { visibility: hidden; }

.pcard-dots {
    position: absolute;
    bottom: 10px;
    inset-inline: 0;
    display: flex;
    justify-content: center;
    gap: 5px;
    pointer-events: none;
}

.pcard-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .7);
    box-shadow: 0 0 2px rgba(0, 0, 0, .35);
    transition: width .2s, background-color .2s;
}

.pcard-dot.active { width: 14px; border-radius: 3px; background: var(--dk-accent); }

.pcard-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: rgba(255, 255, 255, .92);
    color: var(--dk-ink);
    box-shadow: var(--dk-shadow-card);
    opacity: 0;
    transition: opacity .15s;
}

.pcard-prev { inset-inline-start: 8px; }
.pcard-next { inset-inline-end: 8px; }
[dir=rtl] .pcard-arrow svg { transform: scaleX(-1); }

/* Only where there is a mouse to hover with, and once the script is there to work them. On a
   phone there are none, so a tap anywhere on the photo still opens the product. */
@media (hover: hover) and (pointer: fine) {
    .pcard-arrow:not([hidden]) { display: flex; }
    .pcard:hover .pcard-arrow { opacity: 1; }
}

.pcard-body { padding: 14px 16px 16px; }
.pcard-name { font-weight: 800; font-size: 14.5px; line-height: 1.35; }
.pcard-sub { font-size: 12px; color: var(--dk-text-faint); margin-top: 3px; }
.pcard-sizes { font-size: 12px; font-weight: 700; color: var(--dk-text-muted); margin-top: 3px; }

.pcard-price { display: flex; align-items: baseline; gap: 8px; margin-top: 9px; }
.pcard-price strong { font-size: 16px; }
.pcard-price s { font-size: 12.5px; color: var(--dk-text-faint); }

/* ---- Browse ---- */

.filter-row { margin-bottom: 18px; }

.filter-label {
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--dk-text-faint);
    margin-bottom: 8px;
}

.chip {
    display: inline-flex;
    align-items: center;
    border: 2px solid var(--dk-border);
    background: var(--dk-surface);
    color: var(--dk-ink);
    border-radius: var(--dk-radius-pill);
    padding: 9px 17px;
    font-size: 13.5px;
    font-weight: 800;
    white-space: nowrap;
}

.chip.active {
    background: var(--dk-accent);
    border-color: var(--dk-accent);
    color: #fff;
    box-shadow: 0 6px 14px var(--dk-accent-shadow);
}

.chip-sub { padding: 7px 14px; font-size: 12.5px; }

/*
  The filter panel (ADR-0021): every group, with every item in it beneath its heading. A
  column beside the products on a desktop, sticky so it stays in reach down a long list; on a
  phone it folds behind the Filters button (see the 860px block below).
*/
.shop-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
    padding-bottom: 60px;
}

.shop-results { min-width: 0; }

.filters {
    position: sticky;
    top: 90px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    background: var(--dk-surface);
    border-radius: 18px;
    box-shadow: var(--dk-shadow-card);
    padding: 20px 18px 6px;
}

.filter-section { margin-bottom: 18px; }
.filter-section + .filter-section { border-top: 1px solid var(--dk-hairline); padding-top: 16px; }
.filter-section .filter-label { margin: 0 0 10px; }

.filter-group { margin-top: 14px; }

.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* The panel is narrow, so a long name such as "2–3 Years (24–36 Months)" may wrap rather
   than push the chip past the edge. */
.filters .chip { white-space: normal; }

/* A group's heading is a link too: it picks everything in the group. */
.filter-group-name {
    display: inline-block;
    margin-bottom: 8px;
    padding: 3px 0;
    color: var(--dk-ink);
    font-weight: 800;
    font-size: 13.5px;
    border-radius: var(--dk-radius-pill);
}

.filter-group-name:hover { color: var(--dk-accent); }

/* The whole group is the choice. */
.filter-group-name.active {
    background: var(--dk-accent);
    color: #fff;
    padding: 3px 12px;
}

/* One of its items is. */
.filter-group-name.open { color: var(--dk-accent); }

/* On a desktop the panel is always open, so the button and its checkbox are not needed. */
.filters-toggle-input { position: absolute; opacity: 0; pointer-events: none; }
.filters-toggle { display: none; }

.filters-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--dk-radius-pill);
    background: var(--dk-accent);
    color: #fff;
    font-size: 11.5px;
}

/* What is chosen, above the results, each chip removing its own filter. */
.active-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
}

.chip-remove { gap: 6px; border-color: var(--dk-accent); color: var(--dk-accent); }
.chip-remove span { font-size: 15px; line-height: 1; }

.clear-filters { font-weight: 800; font-size: 13px; margin-inline-start: 4px; }

/* The list's order (ADR-0100): in the open on a phone, not behind the Filters button. */
.sort-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.sort-label { font-size: 13px; font-weight: 800; color: var(--dk-text-muted); margin-inline-end: 2px; }

.sort-direction { gap: 6px; margin-inline-start: 4px; }

/* A category's grid by age: each age group under its own heading. */
.shop-age { margin-bottom: 28px; }
.shop-age-title { margin-bottom: 12px; }

.empty-state {
    padding: 48px 0;
    text-align: center;
    color: var(--dk-text-muted);
    font-size: 15px;
}

/* A long category a page at a time (ADR-0095): previous, where you are, next - centred under the
   grid, and wrapping on a narrow phone rather than running off it. Logical order, so Arabic reads
   right to left without a rule of its own. */
.pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px 16px;
    padding: 28px 0 8px;
}
.pager-link { text-decoration: none; }
.pager-where { font-weight: 800; color: var(--dk-text-muted); font-size: 14px; }

/* ---- Product detail ---- */

.product-flex { display: flex; gap: 56px; align-items: flex-start; padding: 28px 0 60px; }
.product-flex .pimg { flex: 1 1 440px; min-width: 280px; }
.product-flex .pinfo { flex: 1 1 380px; min-width: 280px; }

.pimg-frame {
    width: 100%;
    /* Whole, as on the cards: 3:4 like the photos, up to a height that leaves the price in
       sight, with any other shape on the photos' own grey. */
    aspect-ratio: 3 / 4;
    max-height: 640px;
    border-radius: var(--dk-radius-lg);
    overflow: hidden;
    background: var(--dk-photo);
}

.pimg-frame img { width: 100%; height: 100%; object-fit: contain; }

.pdetail-title { font-family: var(--dk-font-display); font-weight: 700; font-size: 32px; margin: 10px 0 8px; }
.pdetail-sub { font-size: 13.5px; color: var(--dk-text-faint); }
.pdetail-price { display: flex; align-items: baseline; gap: 10px; margin: 16px 0 10px; }
.pdetail-price strong { font-size: 28px; font-family: var(--dk-font-display); }
.pdetail-price s { font-size: 15px; color: var(--dk-text-faint); }
/* pre-line: an imported description is a paragraph, a line per feature and the care
   instructions (ADR-0027), and run together they would be one long sentence. */
.pdetail-desc { font-size: 14.5px; line-height: 1.7; color: var(--dk-text-muted); margin: 14px 0 22px; white-space: pre-line; }

.size-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }

.sizechip {
    border: 2px solid var(--dk-border);
    background: var(--dk-surface);
    border-radius: 12px;
    padding: 9px 16px;
    font-weight: 800;
    font-size: 13.5px;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .15s ease;
}

.sizechip:hover { transform: translateY(-2px); }
.sizechip:has(input:checked) { background: var(--dk-ink); border-color: var(--dk-ink); color: #fff; }
.sizechip input { position: absolute; opacity: 0; pointer-events: none; }

.points-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #FAF2E3;
    color: var(--dk-gold);
    border-radius: var(--dk-radius-pill);
    padding: 9px 16px;
    font-weight: 800;
    font-size: 13px;
    margin-top: 18px;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-size: 13.5px;
    color: var(--dk-text-muted);
    margin-top: 22px;
}

/* The arrow points the other way in RTL - `dir` alone cannot flip a glyph. */
[dir="rtl"] .back-link svg { transform: rotate(180deg); }

/* ---- Sale band ---- */

.sale-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    background: linear-gradient(120deg, var(--dk-accent), var(--dk-gold));
    color: #fff;
    border-radius: var(--dk-radius-lg);
    padding: 26px 30px;
    margin: 12px 0 34px;
}

/* ---- The promo banner (ADR-0042, ADR-0044) ----
   One slide at a time in a row that snaps, so a phone swipes it with no script. Each photo or
   video is shown whole, never cropped: a promo usually has words on it.

   The banner takes the shape of the slide showing, at any screen width: a wide photo makes a
   wide banner, a square one a square banner, up to a height cap so a tall one does not fill
   the page. promo-carousel.js sets the row's height to the slide in view. Past the cap, the
   space either side is filled by the same photo blown up and blurred, not grey bars. */

.promo-frame { position: relative; }

.promo-track {
    --promo-max-height: min(72vh, 620px);

    display: flex;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    border-radius: var(--dk-radius-lg);
    background: var(--dk-ink);
    scrollbar-width: none;
    transition: height .35s ease;
}

.promo-track::-webkit-scrollbar { display: none; }

.promo-slide {
    position: relative;
    flex: 0 0 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

/* The <picture> around a photo, there to offer a phone its own version (ADR-0043), takes no
   box of its own: the photo is laid out as if it were the slide's child. */
.promo-slide picture { display: contents; }

/* The photo or video itself: the full width, its own height, never more than the cap. */
.promo-media {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    max-height: var(--promo-max-height);
    object-fit: contain;
}

/* The same photo behind it, covering the slide and blurred: what shows beside a photo that
   reached the height cap before the full width, and during the moment a slide is loading. */
.promo-backdrop img {
    position: absolute;
    inset: -24px;
    width: calc(100% + 48px);
    height: calc(100% + 48px);
    object-fit: cover;
    filter: blur(22px) saturate(1.1) brightness(.85);
}

@media (prefers-reduced-transparency: reduce) {
    .promo-backdrop img { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .promo-track { transition: none; }
}

.promo-arrow {
    position: absolute;
    top: 50%;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    border: none;
    border-radius: var(--dk-radius-pill);
    background: rgba(255, 255, 255, .92);
    color: var(--dk-ink);
    box-shadow: var(--dk-shadow-raised);
    cursor: pointer;
}

.promo-prev { inset-inline-start: 12px; }
.promo-next { inset-inline-end: 12px; }

/* The arrows point the way the row moves, which RTL reverses. */
[dir=rtl] .promo-arrow svg { transform: scaleX(-1); }

.promo-dots { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }

.promo-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: var(--dk-radius-pill);
    background: var(--dk-border);
    cursor: pointer;
}

/* A larger target than the dot itself, for a thumb. */
.promo-dot { box-sizing: content-box; border: 8px solid transparent; background-clip: padding-box; margin: -8px -4px; }
.promo-dot[aria-current=true] { background-color: var(--dk-accent); width: 22px; }

@media (max-width: 520px) {
    /* Portrait promos are the usual kind on a phone: let them be tall. */
    .promo-track { --promo-max-height: min(78vh, 600px); border-radius: var(--dk-radius); }
    .promo-arrow { display: none; }
}

.sale-band h2 { font-family: var(--dk-font-display); font-weight: 700; font-size: 26px; margin: 4px 0 0; }
.sale-band .eyebrow { font-size: 12.5px; font-weight: 800; opacity: .9; }

.sale-band .btn-outline { background: #fff; border-color: #fff; }

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

.site-footer {
    background: var(--dk-ink);
    color: #fff;
    margin-top: auto;
    padding: 40px 0 32px;
}

.footer-inner { display: flex; gap: 32px; flex-wrap: wrap; justify-content: space-between; align-items: center; }

.footer-brand { display: flex; align-items: center; gap: 14px; }

.footer-mark {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    overflow: hidden;
    flex: none;

    /* The same warm tint the header badge uses. The artwork is drawn for a light ground, so
       it keeps one here rather than floating on the dark footer. */
    background: #F3EFE6;
}

.footer-mark img { width: 100%; height: 100%; object-fit: cover; }

.footer-wordmark { display: flex; flex-direction: column; gap: 2px; }
.footer-wordmark .logo-text { color: #fff; font-size: 20px; }

.footer-tagline {
    font-family: var(--dk-font-display);
    font-size: 12.5px;
    color: var(--dk-text-on-dark);
    letter-spacing: .02em;
}

.footer-links { display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; color: var(--dk-text-on-dark); }
.footer-social { display: inline-flex; align-items: center; gap: 8px; }

/* The last line of every page: a quiet, centred credit under a hairline, the name as a small
   pill that lights up in the accent on hover. Centred, it stays clear of the WhatsApp button
   in the corner on a phone too. */
.footer-credit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 32px 0 0;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: 12px;
    letter-spacing: .04em;
    color: var(--dk-text-on-dark);
}

.footer-credit a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--dk-radius-pill);
    font-family: var(--dk-font-display);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .12em;
    color: #fff;
    transition: background-color .15s ease, border-color .15s ease;
}

/* A small accent dot before the name, the shop's terracotta. */
.footer-credit a::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dk-accent);
}

.footer-credit a:hover { background: var(--dk-accent); border-color: var(--dk-accent); }
.footer-credit a:hover::before { background: #fff; }
.footer-credit a:focus-visible { outline: 2px solid var(--dk-accent); outline-offset: 3px; }

/* ---- Responsive ---- */

@media (max-width: 860px) {
    /* The gaps are tighter than the desktop's to give back the room the account icon takes
       (ADR-0028). */
    .topbar-inner { padding: 14px 20px; column-gap: 12px; }
    .container { padding: 0 20px; }
    .brand-row { gap: 10px; }
    .nav-links { gap: 12px; }
    .navlink { font-size: 13px; }

    /* A fourth word in the nav wrapped the header onto two rows below this width (ADR-0028).
       The icon keeps it on one; the word is still there, visually hidden, for a screen reader. */
    .navlink-icon { display: block; }
    .navlink-account .navlink-text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    .hero { flex-direction: column; padding: 32px 0 40px; gap: 28px; }
    .hero-title { font-size: 32px; }

    /* The drifting blobs are decoration that only works beside the copy. Once the hero
       stacks they became a 220px band of near-empty space between the buttons and the first
       product - on a phone, most of a screen of scrolling before anything to buy. */
    .hero-art { display: none; }

    /* Stacked, the copy's flex-basis - a width beside the art - becomes a height, and held
       the hero open at 420px under text half that tall. */
    .hero-copy { flex: none; min-width: 0; }
    .product-flex { flex-direction: column; gap: 28px; }

    /* Stacked, the columns must fill the width and size to their content. The desktop rules
       would otherwise misfire twice over: align-items: flex-start let the photo column grow
       to the photo's natural width (412px on a 375px phone, so the whole page scrolled
       sideways), and a flex-basis meant as a width became a minimum height. */
    .product-flex .pimg,
    .product-flex .pinfo { flex: none; width: 100%; min-width: 0; }
    .pimg-frame { max-height: 420px; }

    /* The filter panel folds behind one button, so the first products are on the first
       screen; the checkbox before it opens it in place, with no script. */
    .shop-layout { display: block; }

    .filters-toggle {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 14px;
        padding: 10px 18px;
        border: 2px solid var(--dk-border);
        border-radius: var(--dk-radius-pill);
        background: var(--dk-surface);
        color: var(--dk-ink);
        font-weight: 800;
        font-size: 14px;
        cursor: pointer;
    }

    .filters { display: none; position: static; max-height: none; overflow: visible; margin-bottom: 18px; }
    .filters-toggle-input:checked ~ .filters { display: block; }
    .filters-toggle-input:checked + .filters-toggle { border-color: var(--dk-ink); }
    .filters-toggle-input:focus-visible + .filters-toggle { outline: 2px solid var(--dk-accent); outline-offset: 3px; }
}

@media (max-width: 520px) {
    .topbar-inner { padding: 12px 16px; }
    .container { padding: 0 16px; }
    .logo-text { display: none; }
    .brand-row { gap: 10px; }
    /* No gap: each link is at least 44px wide on a touch screen (feature 63), and a short word
       centred in that already stands clear of the next. */
    .nav-links { gap: 0; }
    .navlink { font-size: 12px; }
    .wa-float { width: 54px; height: 54px; inset-inline-end: 16px; }
    .hero-title { font-size: 28px; }

    /* The Arabic page needs the header tighter than this to stay on one row: its language
       button says "English", which is wider than "العربية" (ADR-0028). */
    .topbar-inner { column-gap: 10px; }
    .lang-toggle { padding-inline: 10px; }

    /* One card per row here, so a shorter tile keeps the four groups nearer one screen. */
    .group-card .group-tile { min-height: 68px; padding: 14px 16px; font-size: 15px; }
}

/* ---- Product gallery ----
   CSS only: a radio per photo, and the checked one reveals its frame. No JavaScript, for the
   same reason the size selector uses radios - most visitors arrive from an Instagram link on
   whatever phone they have. */

.gallery-radio { position: absolute; opacity: 0; pointer-events: none; }

/* Every frame is stacked and hidden; the radio immediately before the checked one shows it. */
.gallery-frame { display: none; }
.gallery-radio:checked + .gallery-frame { display: block; }

.gallery-thumbs {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.gallery-thumb {
    width: 62px;
    height: 62px;
    flex: none;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid transparent;
    background: var(--dk-hairline);
    cursor: pointer;
}

.gallery-thumb:hover { border-color: var(--dk-border); }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* A product with no photo yet. Without this the tinted panel reads as a broken image. */
.pcard-noimage {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, .65);
}

/* ---- Customer account (ADR-0028) ----
   Sign-in, sign-up and the account page, after the prototype's account screen: the profile
   row, the gold points card, then the order and points histories as white cards. */

.account-shell { max-width: 460px; margin: 0 auto; padding: 36px 0 56px; }

.account-card {
    background: var(--dk-surface);
    border-radius: var(--dk-radius-lg);
    box-shadow: var(--dk-shadow-card);
    padding: 28px;
}

.account-title {
    font-family: var(--dk-font-display);
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 6px;
}

.account-lead { color: var(--dk-text-muted); font-size: 14px; line-height: 1.5; margin: 0 0 8px; }

.field-label { display: block; font-weight: 800; font-size: 13px; margin: 16px 0 6px; }

.text-input {
    width: 100%;
    border: 2px solid var(--dk-border);
    border-radius: 12px;
    padding: 11px 14px;
    background: var(--dk-surface);
    color: var(--dk-ink);
    font: inherit;
    /* 16px or more, or a phone zooms the page in when the box is tapped. */
    font-size: 16px;
}

.text-input:focus { outline: none; border-color: var(--dk-accent); }

/* A phone number is typed left to right on the Arabic page too; its placeholder follows. */
.text-input[dir="ltr"] { text-align: start; }
[dir="rtl"] .text-input[dir="ltr"] { text-align: right; }

.field-help { font-size: 12.5px; color: var(--dk-text-muted); margin-top: 6px; line-height: 1.45; }

.field-error { display: block; color: var(--dk-danger-fg); font-size: 12.5px; font-weight: 700; margin-top: 6px; }
.field-error:empty { display: none; }

.form-error { color: var(--dk-danger-fg); font-size: 13.5px; font-weight: 700; }
.form-error ul { margin: 12px 0 0; padding: 12px 14px; list-style: none; background: var(--dk-danger-bg); border-radius: 12px; }
.form-error.validation-summary-valid { display: none; }

.account-submit { width: 100%; margin-top: 22px; cursor: pointer; }

.account-switch { text-align: center; margin: 18px 0 0; font-size: 14px; color: var(--dk-text-muted); }
.account-switch a { color: var(--dk-accent); font-weight: 800; }

.account-note {
    margin: 16px 0 0;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--dk-page);
    color: var(--dk-text-muted);
    font-size: 13px;
    line-height: 1.5;
}

.account-page { max-width: 760px; margin: 0 auto; padding: 32px 0 56px; }

.account-heading { font-family: var(--dk-font-display); font-size: 28px; font-weight: 700; margin: 0 0 22px; }

.account-notice {
    background: var(--dk-success-bg);
    color: var(--dk-success-fg);
    border-radius: 12px;
    padding: 12px 16px;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 18px;
}

.account-profile { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }

.account-avatar {
    width: 54px;
    height: 54px;
    flex: none;
    border-radius: 50%;
    background: var(--dk-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--dk-font-display);
    font-weight: 700;
    font-size: 20px;
    box-shadow: 0 6px 14px var(--dk-accent-shadow);
}

.account-name { font-weight: 800; font-size: 16px; }
.account-phone { font-size: 13px; color: var(--dk-text-muted); unicode-bidi: isolate; }

.points-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--dk-radius-lg);
    padding: 24px 26px;
    color: var(--dk-ink);
    background: linear-gradient(135deg, var(--dk-gold), #e2a520);
    box-shadow: 0 14px 30px rgba(201, 154, 78, .35);
    margin-bottom: 18px;
}

.points-card::after {
    content: "";
    position: absolute;
    inset-inline-end: -20px;
    top: -30px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
}

.points-label { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; font-weight: 800; opacity: .85; }
.points-value { font-family: var(--dk-font-display); font-size: 38px; font-weight: 700; margin-top: 4px; }

.points-note {
    position: relative;
    margin-top: 14px;
    padding: 10px 14px;
    border-radius: 11px;
    background: rgba(255, 255, 255, .35);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
}

.account-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 26px;
}

.account-stat { background: var(--dk-surface); border-radius: var(--dk-radius); padding: 14px 16px; box-shadow: var(--dk-shadow-card); }
.account-stat-label { font-size: 12px; font-weight: 800; color: var(--dk-text-muted); }
.account-stat-value { font-family: var(--dk-font-display); font-size: 22px; font-weight: 700; margin-top: 2px; }
.account-stat-owed .account-stat-value { color: var(--dk-warning-fg); }

.account-section { margin-bottom: 26px; }
.account-section-title { font-size: 15px; font-weight: 800; margin: 0 0 11px; }
.account-empty { color: var(--dk-text-muted); font-size: 14px; margin: 0; line-height: 1.5; }
.account-list { display: flex; flex-direction: column; gap: 10px; }

.order-card {
    background: var(--dk-surface);
    border-radius: var(--dk-radius);
    padding: 14px 16px;
    box-shadow: var(--dk-shadow-card);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.order-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.order-no { font-weight: 800; font-size: 14px; }
.order-date { font-size: 12.5px; color: var(--dk-text-muted); }

.status-chip { font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: var(--dk-radius-pill); white-space: nowrap; }
.status-paid { background: var(--dk-success-bg); color: var(--dk-success-fg); }
.status-pending { background: var(--dk-warning-bg); color: var(--dk-warning-fg); }
.status-overdue { background: var(--dk-danger-bg); color: var(--dk-danger-fg); }

.order-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.order-line { display: flex; align-items: center; gap: 12px; color: inherit; }
.order-line:hover .order-line-name { color: var(--dk-accent); }

.order-thumb {
    width: 52px;
    height: 52px;
    flex: none;
    border-radius: 10px;
    overflow: hidden;
    background: var(--dk-blue);
}

.order-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.order-line-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.order-line-name { font-weight: 700; font-size: 13.5px; }
.order-line-meta { font-size: 12.5px; color: var(--dk-text-muted); }

.order-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    align-items: center;
    border-top: 1px solid var(--dk-hairline);
    padding-top: 10px;
    font-size: 13px;
    font-weight: 700;
}

.order-owed { color: var(--dk-warning-fg); }
.order-points { color: var(--dk-gold); font-weight: 800; margin-inline-start: auto; }

.points-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    background: var(--dk-surface);
    border-radius: 12px;
    padding: 12px 16px;
    box-shadow: var(--dk-shadow-card);
}

.points-row-label { font-size: 13.5px; font-weight: 700; }
.points-plus { color: var(--dk-success-fg); font-weight: 800; font-size: 13.5px; white-space: nowrap; }
.points-minus { color: var(--dk-danger-fg); font-weight: 800; font-size: 13.5px; white-space: nowrap; }

.account-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.account-actions form { margin: 0; }
.account-actions .btn-outline { cursor: pointer; display: inline-block; }

/* On a product only its buyer can see: why it is here when the shop does not show it. */
.bought-note {
    margin: 14px 0 4px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--dk-info-bg);
    color: var(--dk-info-fg);
    font-weight: 700;
    font-size: 13.5px;
    line-height: 1.45;
}

@media (max-width: 520px) {
    .account-card { padding: 22px 18px; }
    .points-value { font-size: 32px; }
}

/* ---- Cart (ADR-0092) ---- */

/* The bag in the header, with how many pieces are in it. An icon on every screen: there is no
   room for a fifth word in the header on a phone. */
.navlink-cart { display: inline-flex; align-items: center; position: relative; padding-inline-end: 4px; }
.navlink-cart-icon { display: block; }

.cart-count {
    position: absolute;
    top: -8px;
    inset-inline-end: -8px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--dk-radius-pill);
    background: var(--dk-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
}

/* Add to cart beside asking on WhatsApp; side by side while they fit, stacked on a phone. */
.pdetail-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; align-items: center; }
.pdetail-actions form { margin: 0; }
.pdetail-actions .btn-accent,
.pdetail-actions .btn-outline { display: inline-block; cursor: pointer; font-family: inherit; text-align: center; }

.cart-note {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    align-items: center;
    margin-top: 18px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--dk-success-bg);
    color: var(--dk-success-fg);
    font-weight: 700;
    font-size: 13.5px;
}

.cart-note a { color: inherit; text-decoration: underline; font-weight: 800; }
.cart-note-warning { background: var(--dk-warning-bg); color: var(--dk-warning-fg); }

.cart-gone {
    background: var(--dk-warning-bg);
    color: var(--dk-warning-fg);
    border-radius: 12px;
    padding: 12px 16px;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 18px;
}

.cart-gone p { margin: 0 0 6px; }
.cart-gone ul { margin: 0; padding-inline-start: 20px; }

.cart-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

.cart-line {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--dk-surface);
    border-radius: var(--dk-radius);
    padding: 12px 14px;
    box-shadow: var(--dk-shadow-card);
}

.cart-line-product { flex: 1 1 auto; min-width: 0; }
.cart-line-price { display: flex; flex-direction: column; align-items: flex-end; font-size: 15px; white-space: nowrap; }
.cart-line-price s { color: var(--dk-text-muted); font-size: 12px; }
.cart-remove { margin: 0; }

.cart-remove-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 2px solid var(--dk-border);
    border-radius: var(--dk-radius-pill);
    padding: 7px 12px;
    color: var(--dk-text-muted);
    font: inherit;
    font-weight: 800;
    font-size: 12.5px;
    cursor: pointer;
}

.cart-remove-button:hover { color: var(--dk-danger-fg); border-color: var(--dk-danger-fg); }

.cart-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 16px;
    padding: 14px 16px;
    border-top: 2px solid var(--dk-hairline);
    font-weight: 800;
    font-size: 15px;
}

.cart-total strong { font-family: var(--dk-font-display); font-size: 24px; }

.cart-send { margin-top: 10px; }
.cart-send-button { display: inline-flex; align-items: center; gap: 10px; }
.cart-send-hint { color: var(--dk-text-muted); font-size: 13px; line-height: 1.5; margin: 10px 0 0; }

@media (max-width: 520px) {
    /* The remove button keeps its icon and gives up its word; the word stays its label. */
    .cart-remove-button span { display: none; }
    .cart-send-button { width: 100%; justify-content: center; }
    .pdetail-actions > * { flex: 1 1 100%; }
    .pdetail-actions .btn-accent,
    .pdetail-actions .btn-outline { width: 100%; }
}

/* ---- Delivery strip and page (feature 57) ----
   The strip sits above the sticky header on every storefront page and scrolls away with the
   page; the delivery page is a short read, one fact a section. */
.delivery-strip {
    display: block;
    padding: 7px 16px;
    background: var(--dk-ink);
    color: var(--dk-text-on-dark-strong);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
}

.delivery-strip:hover,
.delivery-strip:focus-visible { color: #fff; text-decoration: underline; }

.info-page { max-width: 640px; padding: 28px 0 48px; }
.info-page .section-title { margin-bottom: 20px; }
.info-section { margin-bottom: 20px; }
.info-heading { font-family: var(--dk-font-display); font-size: 17px; font-weight: 700; margin: 0 0 4px; }
.info-section p { margin: 0; color: var(--dk-text-muted); line-height: 1.6; }
/* The delivery fee, one row per region: the places on the start side, the amount on the end. */
.fee-list { list-style: none; margin: 8px 0 0; padding: 0; }
.fee-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--dk-border); color: var(--dk-text-muted); line-height: 1.5; }
.fee-list li:last-child { border-bottom: 0; }
.fee-list strong { color: var(--dk-ink); white-space: nowrap; }
.info-page .cta { display: inline-flex; margin-top: 8px; }

/* ---- Touch targets (feature 63) ----
   Everything a thumb taps is at least 44px each way on a touch screen, and on any screen as narrow
   as a phone, held either way up. Measured at 320px wide, the header's links were 22 to 37px, the
   chips 35px and "See all" 18px. A mouse on a wide screen keeps the sizes the prototype drew. */
@media (pointer: coarse), (max-width: 860px) {
    /* Two 44px rows when the header wraps: the space between them is inside the links now, so
       the rows sit closer and the header is no taller than before. */
    .topbar-inner { row-gap: 8px; }

    .brand { min-width: 44px; min-height: 44px; }

    /* The strip is a link to the delivery page: one line of it was 32px tall. */
    .delivery-strip {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
    }

    .navlink {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }

    /* Under the word, as before, not at the foot of the taller link. */
    .navlink .underline { bottom: 5px; }

    /* Round, and the height of the language button beside them, as before. */
    .social-link { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
    .lang-toggle { display: inline-flex; align-items: center; min-height: 44px; }

    .subtile,
    .chip,
    .filters-toggle,
    .back-link,
    .cart-remove-button { min-height: 44px; }

    .cart-remove-button { min-width: 44px; justify-content: center; }

    .filter-group-name {
        display: inline-flex;
        align-items: center;
        min-width: 44px;
        min-height: 44px;
        margin-bottom: 0;
    }

    /* "Already have an account? Sign in", and the other way round, under the form. */
    .account-switch a { display: inline-flex; align-items: center; min-height: 44px; }

    .btn-accent,
    .btn-outline {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
    }

    /* "See all" sits beside a section's heading: 13px more above and below makes it 44px to the
       thumb, and the negative margin keeps the row the height it was. */
    .section-link { display: inline-block; line-height: 18px; padding-block: 13px; margin-block: -13px; }

    /* One link a row: 44px each, the gap between them now inside them. */
    .footer-links { gap: 0; }
    .footer-links a { display: inline-flex; align-items: center; min-height: 44px; }

    /* The credit keeps its small pill; an ::after makes it 44px tall. Its ::before is the dot. */
    .footer-credit a { position: relative; }
    .footer-credit a::after { content: ""; position: absolute; inset: -9px 0; }

    /* Each dot stays 9px; a transparent border makes it 44px to the thumb, and the negative
       margin keeps the row 9px tall. Swiping still works as well. */
    .promo-dots { gap: 0; }
    .promo-dot { border-width: 17.5px; margin: -17.5px 0; }
}

/* Five 44px links and the 44px logo need 296px in Arabic; a 320px phone has 288. Here the links
   take the second row, where the social and language buttons were, and those join the logo on
   the first: the header is no taller than it was. */
@media (max-width: 359px) {
    .topbar-inner > .brand-row:first-child { display: contents; }

    .nav-links {
        order: 1;
        flex: 1 1 100%;
        justify-content: space-between;
    }
}

/* Two lines tall on a phone, whether its words take one or two (feature 66). In Arabic they fit
   one line of a 360px phone with 2px to spare, so the strip went to two lines and back as Cairo's
   Arabic and Latin files arrived one after the other, and the whole page under it moved 5px each
   time. English takes two lines here anyway. 1.4em is its line height. */
@media (max-width: 400px) {
    .delivery-strip { min-height: calc(2 * 1.4em + 14px); }
}

/* A phone's keyboard pushes the field being typed into up to the bottom of the screen, where the
   WhatsApp button sits over it. It steps aside until the customer is done typing. */
body:has(.text-input:focus) .wa-float { display: none; }

/* ---- Add to cart within reach (feature 64, ADR-0106) ----
   In one column the buttons came after the photos, the description and the sizes: 1390px down
   a 740px-tall phone. Here they are a bar at the foot of the screen for the whole page, side by
   side while they fit. The sizes stay where they are; Add to cart with none picked takes the
   customer up to them, as it always did. */
@media screen and (max-width: 860px) {
    .pdetail-actions {
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 25;
        flex-wrap: wrap;
        align-items: stretch;
        gap: 8px;
        margin: 0;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
        background: rgba(255, 255, 255, .96);
        backdrop-filter: blur(8px);
        border-top: 1px solid var(--dk-hairline);
        box-shadow: 0 -6px 18px rgba(0, 0, 0, .06);
    }

    .pdetail-actions > * { flex: 1 1 auto; }
    .pdetail-actions form { display: flex; }

    /* Each as wide as its words to begin with, so the two share a row when they fit; the phone
       rules' width: 100% would put each on a row of its own. At 13px the Arabic pair fits a
       320px phone side by side: 276px of the 288. */
    .pdetail-actions .btn-accent,
    .pdetail-actions .btn-outline { width: auto; padding: 10px 12px; font-size: 13px; }
    .pdetail-actions form .btn-accent { width: 100%; }

    /* The bar's height, so the end of the page can be scrolled clear of it. */
    body:has(.pdetail-actions) { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }

    /* Add to cart with no size picked scrolls to the sizes and says to pick one. Without this the
       browser stopped with them at the very foot of the screen, under the bar; with it, it counts
       the bar's height and a little more. */
    html:has(.pdetail-actions) { scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }

    /* The bar has its own way to WhatsApp, about this piece; the round button would sit on it. */
    body:has(.pdetail-actions) .wa-float { display: none; }
}