/*
 * Storefront chrome (announcement bar, header, menu, footer) shared by every customer page,
 * plus the customer pages built on the design system. Self-contained: it also renders correctly
 * above and below the catalogue pages, which keep their own content styles.
 */

.site-wrap{width:min(100%,var(--ui-max));margin-inline:auto;padding-inline:var(--ui-gutter)}
.site-announce,.site-header,.site-footer{font-family:var(--ui-font);-webkit-font-smoothing:antialiased}
:where(.site-announce,.site-header,.site-footer) *,:where(.site-announce,.site-header,.site-footer) *::before,:where(.site-announce,.site-header,.site-footer) *::after{box-sizing:border-box}
:where(.site-announce,.site-header,.site-footer) :where(h2,h3,p,ul){margin:0}
:where(.site-announce,.site-header,.site-footer) ul{list-style:none;padding:0}
:where(.site-announce,.site-header,.site-footer) a{color:inherit;text-decoration:none}
:where(.site-announce,.site-header,.site-footer) img{display:block;max-width:100%}

/* ---------- Announcement bar ---------- */
.site-announce{background:var(--ui-brand-strong);color:#fff;font-size:13px;font-weight:600}
.site-announce-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:40px}
.site-announce-msg{display:flex;align-items:center;gap:8px;min-width:0}
.site-announce-msg .ui-icon{color:#fff}
.site-announce-msg a{color:#fff;font-weight:700;text-decoration:underline;text-decoration-color:rgb(255 255 255 / .4);text-underline-offset:4px;white-space:nowrap}
.site-announce-msg a:hover{text-decoration-color:#fff}
.site-announce-dot{width:7px;height:7px;flex-shrink:0;border-radius:50%;background:#f3c26b}
.site-announce-side{display:flex;align-items:center;gap:6px;flex-shrink:0}
.site-announce-side a{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 10px;border-radius:var(--ui-pill);color:#fff;font-weight:700}
.site-announce-side a:hover{background:rgb(255 255 255 / .1)}

.site-announce .lang-flag{width:20px;height:14px;border-radius:2px;box-shadow:0 0 0 1px rgb(255 255 255 / .25)}
@media (max-width:640px){.site-announce-side .site-announce-phone{display:none}.site-announce-inner{min-height:44px}.site-announce-msg{font-size:12px;line-height:1.5}}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:40;background:rgb(255 255 255 / .94);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);box-shadow:0 1px 0 var(--ui-line)}
.site-header-bar{display:flex;align-items:center;gap:clamp(10px,1.6vw,20px);min-height:76px}
.site-brand{display:flex;align-items:center;flex-shrink:0;border-radius:12px}
.site-brand img{width:auto;height:48px}
.site-nav{display:flex;align-items:center;gap:2px}
.site-nav a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:var(--ui-pill);color:var(--ui-ink-2);font-size:14px;font-weight:700;white-space:nowrap;transition:background-color .15s}
.site-nav a:hover{background:var(--ui-surface-2);color:var(--ui-ink)}
.site-nav a[aria-current=page]{color:var(--ui-brand)}
.site-search{flex:1;min-width:240px;max-width:460px;margin-inline-start:auto}
.site-search .ui-input{min-height:44px;background:var(--ui-surface-2);border-color:transparent;font-size:14px}
.site-search .ui-input:hover{border-color:var(--ui-line-strong)}
.site-search .ui-input:focus{background:#fff}
.site-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
/* Management link for staff and the owner: a white pill with the icon in a soft circle, like «المتجر» inside the admin. */
.site-admin-link{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding-block:5px;padding-inline:5px 14px;border-radius:var(--ui-pill);background:var(--ui-surface);color:var(--ui-ink);font-size:14px;font-weight:800;white-space:nowrap;text-decoration:none;box-shadow:var(--ui-shadow-1)}
.site-admin-link:hover{color:var(--ui-brand-strong)}
.site-admin-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ui-brand-soft);color:var(--ui-brand)}
.site-cart{position:relative;gap:10px;min-height:48px;padding-block:6px;padding-inline:7px 18px}
.site-cart-icon{position:relative;display:grid;place-items:center;width:34px;height:34px;flex-shrink:0;border-radius:50%;background:rgb(255 255 255 / .2)}
.site-cart-count{position:absolute;top:-6px;inset-inline-end:-7px;display:grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:var(--ui-pill);background:#fff;color:var(--ui-brand-strong);font-size:11px;font-weight:800;line-height:1;box-shadow:0 0 0 2px var(--ui-brand)}
.site-cart-text{display:grid;justify-items:start;line-height:1.2;text-align:start}
.site-cart-label{font-size:14px;font-weight:800}
.site-cart-text:has(.site-cart-total:not([hidden])) .site-cart-label{font-size:11px;font-weight:700;opacity:.88}
.site-cart-total{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.site-cart-total small{font-size:11px;font-weight:700;opacity:.88}
.site-search-row{display:none;padding-bottom:12px}
.site-menu-toggle{display:none}

/* Menu sheet (details/summary: works without JavaScript; ui.js closes it on outside click / Escape). */
.site-menu{position:relative}
.site-menu > summary{list-style:none}
.site-menu > summary::-webkit-details-marker{display:none}
.site-menu-panel{position:absolute;inset-inline-start:0;top:calc(100% + 12px);z-index:50;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;width:min(760px,calc(100vw - 2 * var(--ui-gutter)));padding:24px;border-radius:var(--ui-radius-xl);background:#fff;box-shadow:var(--ui-shadow-3)}
.site-menu-group h2{margin-bottom:8px;color:var(--ui-muted);font-size:12px;font-weight:800}
html[lang=en] .site-menu-group h2{text-transform:uppercase;letter-spacing:.08em}
.site-menu-group a{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 10px;margin-inline:-10px;border-radius:14px;color:var(--ui-ink);font-weight:700;font-size:15px}
.site-menu-group a:hover{background:var(--ui-surface-2)}
.site-menu-icon{display:grid;place-items:center;width:34px;height:34px;flex-shrink:0;border-radius:11px;background:var(--ui-surface-2);color:var(--ui-brand)}
.site-menu-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.site-menu-contact{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-radius:var(--ui-radius-lg);background:var(--ui-surface-2)}
.site-menu-contact p{color:var(--ui-muted);font-size:14px}

/* Below 1280px account and management become icon buttons, so the menu, search and cart keep one row. */
@media (max-width:1279px){
  .site-search{min-width:160px}
  .site-account-label{display:none}
  .site-account{width:44px;padding:0}
}
@media (max-width:1100px){
  .site-nav{display:none}
  .site-menu-toggle{display:inline-flex}
}
@media (max-width:760px){
  .site-header-bar{min-height:64px;gap:8px}
  .site-brand img{height:40px}
  .site-search-bar{display:none}
  .site-search-row{display:block}
  .site-search-row .site-search{max-width:none;margin:0}
  .site-actions{margin-inline-start:auto;gap:6px}
  .site-account-label,.site-cart-label{display:none}
  /* Phones: a smaller «الإدارة» pill that keeps its word, so it always reads as the way into the admin. */
  .site-admin-link{gap:5px;min-height:38px;padding-block:4px;padding-inline:4px 10px;font-size:12.5px}
  .site-admin-icon{width:28px;height:28px}
  .site-admin-icon .ui-icon{width:15px;height:15px}
  .site-account{width:44px;padding:0}
  .site-cart{gap:8px;padding-inline:6px 14px}
  .site-cart:not(:has(.site-cart-total:not([hidden]))){padding-inline:6px}
  .site-cart:not(:has(.site-cart-total:not([hidden]))) .site-cart-text{display:none}
  .site-cart-total{font-size:14px}
  .site-menu{position:static}
  .site-menu-panel{inset-inline:var(--ui-gutter);top:calc(100% + 8px);width:auto;grid-template-columns:1fr;gap:18px;max-height:calc(100dvh - 140px);overflow:auto;padding:20px}
}
@media (max-width:420px){
  /* Staff on narrow phones: «الإدارة» keeps its place, the cart shows its count only. */
  .site-actions:has(.site-admin-link){gap:5px}
  .site-actions:has(.site-admin-link) .site-cart{padding-inline:6px}
  .site-actions:has(.site-admin-link) .site-cart-text{display:none}
}
@media (max-width:340px){
  /* The narrowest phones: the cart button shows its count; the total stays in its spoken label and the cart page. */
  .site-cart{padding-inline:6px}
  .site-cart-text{display:none}
}

.site-flash{margin-top:20px}

/* ---------- Footer ---------- */
.site-footer{margin-top:clamp(16px,3vw,40px);padding-bottom:28px;background:var(--ui-bg);color:var(--ui-ink)}
.site-footer-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;padding:clamp(24px,4vw,44px);border-radius:var(--ui-radius-xl);background:var(--ui-brand);color:#fff;overflow:hidden;position:relative}
.site-footer-cta::after{content:'';position:absolute;inset-inline-end:-80px;top:-120px;width:320px;height:320px;border-radius:50%;background:radial-gradient(closest-side,rgb(255 255 255 / .16),transparent);pointer-events:none}
.site-footer-cta > *{position:relative;z-index:1}
.site-footer-cta .ui-eyebrow{color:#fff}
.site-footer-cta h2{margin-top:6px;font-size:clamp(22px,2.6vw,30px);font-weight:800;line-height:1.3;color:#fff}
.site-footer-cta p{margin-top:6px;max-width:52ch;color:#f2f8fe;font-size:15px}
.site-footer-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr));gap:32px;padding:clamp(32px,5vw,56px) 0 32px}
.site-footer-brand img{height:56px;width:auto}
.site-footer-brand p{margin-top:16px;max-width:36ch;color:var(--ui-muted);font-size:14px;line-height:1.8}
.site-footer-col h2{margin-bottom:12px;color:var(--ui-muted);font-size:12px;font-weight:800}
html[lang=en] .site-footer-col h2{text-transform:uppercase;letter-spacing:.08em}
.site-footer-col a{display:flex;align-items:center;gap:8px;min-height:40px;color:var(--ui-ink);font-size:14px;font-weight:600}
.site-footer-col a:hover{color:var(--ui-brand)}
.site-footer-col .ui-icon{color:var(--ui-muted)}
.site-footer-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding-top:24px;border-top:1px solid var(--ui-line);color:var(--ui-muted);font-size:13px}
.site-footer-legal{display:flex;flex-wrap:wrap;gap:6px 20px;margin:14px 0 0;color:var(--ui-muted);font-size:12.5px;line-height:1.6}
.site-footer-legal span{white-space:nowrap}
@media (max-width:560px){.site-footer-legal{display:grid;gap:4px}.site-footer-legal span{white-space:normal}}
.site-footer-pay{display:flex;flex-wrap:wrap;gap:8px}
@media (max-width:1000px){.site-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.site-footer-brand{grid-column:1 / -1}}
@media (max-width:560px){.site-footer-grid{grid-template-columns:1fr 1fr;gap:28px 16px}.site-footer-col a{min-height:44px}.site-footer-cta .ui-actions,.site-footer-cta .ui-btn{width:100%}}

/* WhatsApp offers channel button (floating on the reading-start side; shop.js tucks it away when it would cover a control). */
.wa-float{position:fixed;z-index:55;bottom:calc(18px + env(safe-area-inset-bottom));display:inline-flex;align-items:center;gap:9px;min-height:50px;padding-block:7px;padding-inline:8px 18px;border-radius:var(--ui-pill);background:#1b7a43;color:#fff;font:700 14px/1.3 var(--ui-font);text-decoration:none;box-shadow:0 10px 28px rgb(18 62 87 / .22);transition-property:opacity,transform,visibility;transition-duration:.18s}
html[dir=rtl] .wa-float{right:max(18px,env(safe-area-inset-right))}
html[dir=ltr] .wa-float{left:max(18px,env(safe-area-inset-left))}
.wa-float:hover{background:#16683a}
.wa-float .wa-icon{width:34px;height:34px;padding:7px;flex-shrink:0;border-radius:50%;background:#25d366;color:#fff}
.wa-float.is-tucked{opacity:0;visibility:hidden;transform:translateY(14px);pointer-events:none}
body:has(.wa-float) .site-footer{padding-bottom:96px}
@media (max-width:580px){.wa-float{min-height:48px;padding-block:6px;padding-inline:6px 15px;gap:7px}}
/* Over a field or button it shrinks to its round icon (still tappable); it hides only while the customer types. */
.wa-float.is-compact{padding-inline:7px;gap:0}
.wa-float.is-compact .wa-float-label{display:none}
@media (prefers-reduced-motion:reduce){.wa-float{transition:none}}

/* ---------- Phone and tablet dock ----------
   Same shape as the admin dock: attached to the bottom edge, five equal places, the current one filled in brand blue.
   It shows wherever the top navigation folds into the menu, and the account button moves from the header into it. */
.store-dock{display:none}
@media (max-width:1100px){
  .store-dock{position:fixed;inset-inline:0;bottom:0;z-index:45;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;padding:8px max(10px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));border-radius:26px 26px 0 0;background:#fff;box-shadow:0 -1px 0 var(--ui-line),0 -14px 34px -18px rgb(18 62 87 / .28)}
  .store-dock-item{position:relative;display:grid;justify-items:center;align-content:center;gap:3px;min-width:0;min-height:56px;padding:4px 2px;border-radius:18px;color:var(--ui-muted);font-size:11px;font-weight:800;line-height:1.2;text-align:center;text-decoration:none;cursor:pointer;list-style:none;transition-property:background-color,color,transform;transition-duration:.15s}
  .store-dock-item > span:not(.store-dock-count){max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .store-dock-item:active{transform:scale(.96)}
  .store-dock-more{display:grid}
  .store-dock-more > summary::-webkit-details-marker{display:none}
  .store-dock-more[open] > summary{background:var(--ui-brand-soft);color:var(--ui-brand-strong)}
  /* An open sheet comes above the install invitation and the offers button. */
  .store-dock:has(.store-dock-more[open]){z-index:62}
  .store-dock-item[aria-current=page]{background:var(--ui-brand);color:#fff}
  .store-dock-count{position:absolute;top:4px;inset-inline-start:calc(50% + 6px);display:grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:var(--ui-pill);background:var(--ui-brand);color:#fff;font-size:10px;line-height:1;box-shadow:0 0 0 2px #fff}
  .store-dock-count[hidden]{display:none}
  .store-dock-item[aria-current=page] .store-dock-count{background:#fff;color:var(--ui-brand-strong);box-shadow:0 0 0 2px var(--ui-brand)}
  .store-dock-sheet{position:fixed;inset-inline:0;bottom:calc(env(safe-area-inset-bottom) + 84px);z-index:46;width:min(520px,calc(100% - 24px));max-height:calc(100dvh - 180px);overflow-y:auto;margin-inline:auto;padding:16px;border-radius:var(--ui-radius-xl);background:var(--ui-surface);box-shadow:var(--ui-shadow-3)}
  .store-dock-sheet h2{margin-bottom:10px;padding-inline:4px;color:var(--ui-muted);font-size:12px;font-weight:800}
  .store-dock-sheet ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:0;padding:0;list-style:none}
  .store-dock-sheet a{display:flex;align-items:center;gap:10px;min-height:52px;padding:6px 8px;border-radius:16px;background:var(--ui-surface-2);color:var(--ui-ink);font-size:14px;font-weight:700;text-decoration:none}
  .store-dock-sheet .site-menu-icon{background:#fff}
  .store-dock-offers{grid-column:1 / -1}
  .store-dock-sheet .store-dock-offers a{background:var(--ui-brand-soft);color:var(--ui-brand-strong)}
  .store-dock-sheet a[aria-current=page]{background:var(--ui-brand);color:#fff}
  /* Everything that floats at the bottom moves above the dock; the page ends above it too. */
  body:has(.store-dock) .site-account{display:none}
  body:has(.store-dock) .site-footer{padding-bottom:calc(112px + env(safe-area-inset-bottom))}
  body:has(.store-dock):has(.wa-float) .site-footer{padding-bottom:calc(170px + env(safe-area-inset-bottom))}
  body:has(.store-dock) .wa-float{bottom:calc(84px + env(safe-area-inset-bottom))}
  body:has(.store-dock) .app-install{bottom:calc(84px + env(safe-area-inset-bottom));max-height:calc(100dvh - 114px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
  /* While the customer types, the on-screen keyboard needs the room. */
  .ui-store:has(:is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]):not([type=button]):not([type=file]),textarea,select):focus) .store-dock{display:none}
}
@media (max-width:760px){
  body:has(.store-dock) .site-menu-panel{max-height:calc(100dvh - 224px)}
}
@media (max-width:640px){
  /* A product page has its own buy bar on phones; it takes the dock's place instead of stacking on top of it. */
  body:has(.pdp-bar) .store-dock{display:none}
}
@media (prefers-reduced-motion:reduce){.store-dock-item{transition:none}}
@media print{.store-dock{display:none!important}}

/* ---------- Cart ---------- */
.cart-layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:24px;align-items:start}
.cart-items{list-style:none;margin:0;padding:0}
.cart-item{display:grid;grid-template-columns:84px minmax(0,1fr) auto auto auto;grid-template-areas:"thumb info qty total remove";align-items:center;gap:16px 20px;padding:20px clamp(18px,2.4vw,28px);border-bottom:1px solid var(--ui-line)}
.cart-item:last-child{border-bottom:0}
.cart-thumb{position:relative;grid-area:thumb;display:grid;place-items:center;width:84px;height:84px;border-radius:18px;background:var(--ui-surface-2);overflow:hidden;color:var(--ui-brand)}
.cart-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:2px;outline:1px solid rgb(0 0 0 / .06);outline-offset:-1px;border-radius:inherit}
.cart-thumb svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.cart-info{grid-area:info;min-width:0}
.cart-info h2{font-size:16px;font-weight:800;line-height:1.5}
.cart-info p{margin-top:2px;color:var(--ui-muted);font-size:13px}
.cart-info .bundle-components{margin-top:8px;font-size:12px}
.cart-qty{grid-area:qty}
.cart-line-total{grid-area:total;min-width:96px;font-size:17px;font-weight:800;text-align:end}
.cart-remove{grid-area:remove}
.cart-item--problem{background:var(--ui-danger-soft)}
.cart-item--problem .cart-thumb{background:#fff;color:var(--ui-danger)}
.cart-list-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:14px clamp(18px,2.4vw,28px);border-top:1px solid var(--ui-line);background:#fbfcfd}

/* Quantity stepper: three small forms that read as one control, usable without JavaScript. */
.ui-qty{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:var(--ui-pill);background:var(--ui-surface-2)}
.ui-qty form{display:contents}
.ui-qty .ui-btn{--btn-bg:#fff;--btn-ring:transparent;width:38px;min-height:38px;padding:0;box-shadow:var(--ui-shadow-1)}
.ui-qty input{width:54px;min-height:38px;padding:0;border:0;background:transparent;color:var(--ui-ink);font:800 16px/1 var(--ui-font);text-align:center;font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.ui-qty input::-webkit-outer-spin-button,.ui-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ui-qty input:focus{outline:2px solid var(--ui-brand);outline-offset:0;border-radius:10px}
@media (pointer:coarse){.ui-qty .ui-btn{width:44px;min-height:44px}.ui-qty input{min-height:44px}}

.cart-aside{position:sticky;top:96px;display:grid;gap:16px}
.cart-stock-alert{border-radius:0}
.cart-summary .cart-blocked{margin-top:16px}
.cart-summary .cart-signin{margin-top:8px}
.cart-summary h2{font-size:19px;font-weight:800;margin-bottom:8px}
.cart-summary .ui-btn--block{margin-top:20px}
.cart-trust{display:grid;gap:12px;margin-top:20px;padding-top:20px;border-top:1px solid var(--ui-line)}
.cart-trust li{display:flex;align-items:flex-start;gap:12px;font-size:13px;line-height:1.6;color:var(--ui-ink-2)}
.cart-trust .ui-icon{margin-top:2px;color:var(--ui-leaf)}
.cart-save form{display:grid;gap:12px;margin-top:12px}
.cart-save h2{font-size:16px;font-weight:800}
.cart-save p{color:var(--ui-muted);font-size:13px;margin-top:2px}

@media (max-width:980px){
  .cart-layout{grid-template-columns:1fr}
  .cart-aside{position:static}
}
@media (max-width:640px){
  .cart-item{grid-template-columns:68px minmax(0,1fr) auto;grid-template-areas:"thumb info remove" "thumb qty total";gap:10px 14px;padding:16px}
  /* Narrow phones: four tracks, so the line total neither squeezes the item's name (above) nor touches the counter
     (beside it): the name spans to the remove button, the counter spans under the picture. */
  @media (max-width:420px){
    .cart-item{grid-template-columns:56px minmax(0,1fr) auto auto;grid-template-areas:"thumb info info remove" "qty qty total total"}
    .cart-thumb{width:56px;height:56px;border-radius:14px}
  }
  .cart-thumb{width:68px;height:68px;border-radius:16px;align-self:start}
  .cart-line-total{min-width:0;font-size:16px}
  .cart-remove{align-self:start}
}

/* ---------- Sign-in, registration and recovery ----------
   One panel: the form on the reading side, the account benefits on the other (below the form on phones). */
.auth-shell{max-width:1120px}
.auth-panel{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);border-radius:var(--ui-radius-xl);background:var(--ui-surface);box-shadow:var(--ui-shadow-2);overflow:hidden}
.auth-panel--single{grid-template-columns:minmax(0,1fr);max-width:580px;margin-inline:auto}
.auth-main{display:grid;align-content:start;gap:20px;min-width:0;padding:clamp(24px,4.4vw,56px)}
.auth-main > .auth-gap{margin-top:0}
.auth-switch{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:var(--ui-pill);background:var(--ui-surface-2)}
.auth-switch a{display:grid;place-items:center;min-height:44px;padding:0 12px;border-radius:var(--ui-pill);color:var(--ui-muted);font-size:14px;font-weight:800;text-align:center;transition:background-color .2s var(--ui-ease),color .2s var(--ui-ease),box-shadow .2s var(--ui-ease)}
.auth-switch a:hover{color:var(--ui-ink)}
.auth-switch a[aria-current=page]{background:var(--ui-surface);color:var(--ui-brand-strong);box-shadow:var(--ui-shadow-1)}
.auth-back{justify-self:start}
.auth-badge{display:inline-flex;align-items:center;gap:8px;justify-self:start;min-height:34px;padding:0 14px;border-radius:var(--ui-pill);background:var(--ui-brand-soft);color:var(--ui-brand-strong);font-size:13px;font-weight:800}
.auth-intro{display:flex;align-items:flex-start;gap:16px}
.auth-icon{display:grid;place-items:center;width:52px;height:52px;flex-shrink:0;border-radius:16px;background:var(--ui-brand-soft);color:var(--ui-brand)}
.auth-title{margin:0;color:var(--ui-ink);font-size:clamp(24px,2.6vw,30px);font-weight:800;line-height:1.25}
.auth-lead,.auth-main > .ui-lead{margin-top:6px;color:var(--ui-muted);font-size:15px;line-height:1.8}
.auth-main > .ui-lead{margin-top:-8px}
.auth-form{display:grid;gap:16px}
.auth-form > .ui-btn--primary{margin-top:4px}
.auth-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.auth-pair-hint{margin-top:-8px}
.auth-label-row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px}
.auth-forgot{font-size:13px}
.auth-google{--btn-bg:var(--ui-surface);--btn-ring:var(--ui-line-strong);--btn-hover:var(--ui-surface-2)}
.auth-divider{display:flex;align-items:center;gap:12px;margin:0;color:var(--ui-muted);font-size:13px}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--ui-line)}
.auth-note{display:flex;gap:12px;padding:14px 16px;border-radius:var(--ui-radius-md);background:var(--ui-surface-2);color:var(--ui-ink-2);font-size:13.5px;line-height:1.75}
.auth-note > .ui-icon{flex-shrink:0;margin-top:3px;color:var(--ui-brand)}
.auth-note p + p{margin-top:4px}
.auth-foot{padding-top:18px;border-top:1px solid var(--ui-line);color:var(--ui-muted);font-size:14px;text-align:center}
.auth-links{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px}
/* Email codes: one wide, evenly spaced field; after a correct code, two equal actions (stacked on narrow phones). */
.code-input{font-size:clamp(22px,5vw,28px);font-weight:700;letter-spacing:.35em;text-align:center;font-variant-numeric:tabular-nums}
.auth-choice{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:4px}
@media (max-width:420px){.auth-choice{grid-template-columns:1fr}}
.auth-aside{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:center;gap:24px;padding:clamp(28px,4vw,52px);overflow:hidden;background:linear-gradient(160deg,var(--ui-brand) 0%,var(--ui-brand-strong) 62%,#026f99 100%);color:#fff}
.auth-aside::before,.auth-aside::after{content:'';position:absolute;z-index:-1;border-radius:50%;background:rgb(255 255 255 / .08)}
.auth-aside::before{width:360px;height:360px;inset-block-start:-140px;inset-inline-end:-140px}
.auth-aside::after{width:240px;height:240px;inset-block-end:-110px;inset-inline-start:-80px}
.auth-aside-eyebrow{align-self:flex-start;padding:6px 12px;border-radius:var(--ui-pill);background:rgb(255 255 255 / .16);font-size:12px;font-weight:800}
.auth-aside h2{margin:0;color:#fff;font-size:clamp(22px,2.4vw,30px);font-weight:800;line-height:1.35}
.auth-aside ul{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.auth-aside li{display:flex;align-items:flex-start;gap:14px;padding:14px;border-radius:var(--ui-radius-md);background:rgb(255 255 255 / .1)}
.auth-aside li > span{display:grid;place-items:center;width:40px;height:40px;flex-shrink:0;border-radius:12px;background:#fff;color:var(--ui-brand-strong)}
.auth-aside strong{font-size:15px}
.auth-aside p{margin-top:2px;color:#fff;font-size:13.5px;line-height:1.7;opacity:.92}
@media (max-width:900px){
  .auth-panel{grid-template-columns:minmax(0,1fr);max-width:600px;margin-inline:auto}
  .auth-aside{gap:16px;padding:24px clamp(18px,5vw,36px) 26px}
  .auth-aside h2{font-size:19px}
  .auth-aside::before{width:240px;height:240px;inset-block-start:-120px;inset-inline-end:-100px}
}
@media (max-width:560px){
  .auth-main{gap:18px;padding:22px 18px 24px}
  .auth-pair{grid-template-columns:minmax(0,1fr)}
  .auth-intro{gap:12px}
  .auth-icon{width:44px;height:44px;border-radius:14px}
  .auth-aside li{padding:12px}
}

/* ---------- Information pages ---------- */
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px;align-items:start}
.info-sections{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.info-page .ui-card > p{margin-top:10px;color:var(--ui-ink-2);line-height:1.9}
.info-page .ui-card > .ui-link,.info-page .ui-card > .ui-alert{margin-top:12px}
.info-icon{display:grid;place-items:center;width:46px;height:46px;margin-bottom:14px;border-radius:14px;background:var(--ui-brand-soft);color:var(--ui-brand)}
.info-phones{display:grid;gap:10px;margin-top:16px;list-style:none;padding:0}
.info-phones a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px;padding:8px 8px 8px 16px;border-radius:var(--ui-radius-md);background:var(--ui-surface-2);font-size:19px;font-weight:800;color:var(--ui-ink);transition:background-color .15s}
html[dir=rtl] .info-phones a{padding:8px 16px 8px 8px}
.info-phones a:hover{background:var(--ui-surface-3)}
.info-phones .ui-btn{--btn-bg:#fff;pointer-events:none}
.info-wa{background:#effaf3;box-shadow:inset 0 0 0 1px #cfe9d8}
.info-wa .info-icon{background:#fff;color:#1b7a43}
.info-wa-btn{--btn-bg:#1b7a43;--btn-fg:#fff;--btn-ring:transparent;--btn-hover:#16683a;margin:16px 0 10px}
.info-channel .info-icon{background:rgb(255 255 255 / .12);color:#fff}
.info-page .info-channel > p{margin:10px 0 18px;color:#f2f8fe;line-height:1.8}
.info-areas{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;list-style:none;padding:0}
.info-article{max-width:780px;padding:clamp(24px,4vw,48px)}
.info-article .ui-title{margin-bottom:8px}
.info-article p{margin-top:14px;font-size:16px;line-height:2}
.info-article .ui-link{margin-top:16px}
@media (max-width:760px){.info-sections{grid-template-columns:1fr}}
/* Contact: three equal channel cards, the offers channel as a wide band, then links that answer common questions. */
.contact-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.contact-card{display:flex;flex-direction:column;align-items:flex-start}
.contact-card > .ui-card-sub{margin-top:6px;line-height:1.8}
.contact-card .contact-card-action{width:100%;margin-top:auto;padding-top:18px}
.contact-card .info-wa-btn{width:100%;margin:0 0 10px}
.contact-card .info-phones a bdi{min-width:0;overflow-wrap:anywhere}
.contact-card .info-phones a[href^="mailto:"]{font-size:16px}
.contact-channel{display:flex;align-items:center;gap:20px;margin-top:16px;padding:clamp(20px,3vw,32px);border-radius:var(--ui-radius-xl);background:linear-gradient(135deg,var(--ui-brand) 0%,var(--ui-brand-strong) 100%);color:#fff}
.contact-channel-icon{display:grid;place-items:center;width:56px;height:56px;flex-shrink:0;border-radius:16px;background:rgb(255 255 255 / .16)}
.contact-channel-text{flex:1;min-width:0}
.contact-channel h2{margin:0;color:#fff;font-size:20px;font-weight:800}
.contact-channel p{margin-top:4px;color:#fff;line-height:1.8;opacity:.94}
.contact-channel .ui-btn{flex-shrink:0}
.contact-legal{margin-top:16px}
.contact-legal-head{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.contact-legal-head .info-icon{margin:0;flex-shrink:0}
.contact-legal-head .ui-hint{margin:2px 0 0}
.contact-legal-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:10px;margin:0}
.contact-legal-list div{padding:12px 14px;border-radius:var(--ui-radius-md);background:var(--ui-surface-2)}
.contact-legal-list dt{color:var(--ui-muted);font-size:12.5px;font-weight:700}
.contact-legal-list dd{display:grid;gap:2px;margin:4px 0 0;font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}
.contact-legal-list dd bdi{justify-self:start}
.contact-legal-list small{color:var(--ui-muted);font-size:12.5px;font-weight:700;line-height:1.6}
.contact-help{margin-top:clamp(28px,4vw,40px)}
.contact-help h2{color:var(--ui-ink);font-size:18px;font-weight:800}
.contact-help ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px;padding:0;list-style:none}
.contact-help a{display:flex;align-items:flex-start;gap:12px;height:100%;padding:16px;border-radius:var(--ui-radius-md);background:var(--ui-surface);box-shadow:var(--ui-shadow-1);color:var(--ui-ink);transition:box-shadow .2s var(--ui-ease)}
.contact-help a:hover{box-shadow:var(--ui-shadow-2)}
.contact-help a > span{display:grid;place-items:center;width:40px;height:40px;flex-shrink:0;border-radius:12px;background:var(--ui-brand-soft);color:var(--ui-brand)}
.contact-help strong{display:block;font-size:15px;font-weight:800}
.contact-help small{display:block;margin-top:2px;color:var(--ui-muted);font-size:13px;line-height:1.6}
@media (max-width:1000px){
  .contact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .contact-grid > .info-wa{grid-column:1 / -1}
  .contact-help ul{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .contact-grid{grid-template-columns:minmax(0,1fr)}
  .contact-channel{flex-direction:column;align-items:flex-start;gap:14px}
  .contact-channel .ui-btn{width:100%}
}

/* ---------- Checkout ---------- */
.checkout-layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:24px;align-items:start}
.checkout-closed{margin-bottom:20px}
.checkout-num{display:inline-grid;place-items:center;width:28px;height:28px;margin-inline-end:10px;border-radius:50%;background:var(--ui-brand);color:#fff;font-size:13px;vertical-align:2px}
.ui-steps a{display:inline-flex;align-items:center;gap:8px;min-height:32px}
.ui-steps a:hover{color:var(--ui-brand)}
.pay-options{display:grid;gap:10px}
.pay-option{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;padding:16px 18px;border-radius:var(--ui-radius-md);background:var(--ui-surface);box-shadow:inset 0 0 0 1px var(--ui-line);cursor:pointer;transition-property:box-shadow,background-color;transition-duration:.15s}
.pay-option:hover{box-shadow:inset 0 0 0 1px var(--ui-line-strong)}
.pay-option:has(input:checked){background:var(--ui-brand-soft);box-shadow:inset 0 0 0 2px var(--ui-brand)}
.pay-option input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--ui-brand)}
.pay-option-body{display:grid;gap:2px;min-width:0}
.pay-option-body strong{font-size:15px}
.pay-option-body small{color:var(--ui-muted);font-size:13px}
.transfer-details{display:grid;gap:6px;margin-top:12px;padding:14px;border-radius:var(--ui-radius-sm);background:#fff;box-shadow:inset 0 0 0 1px var(--ui-brand-line)}
.transfer-details[hidden]{display:none}
.transfer-method{font-size:13px;font-weight:800;color:var(--ui-ink)}
.transfer-number{display:block;font-size:22px;font-weight:800;letter-spacing:1px;color:var(--ui-ink)}
.transfer-number bdi{user-select:all}
.transfer-beneficiary{display:block;font-size:13px}
.transfer-amount{display:block;font-size:12px;color:var(--ui-muted)}
.transfer-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.copy-status{font-size:12px;font-weight:700;color:var(--ui-success)}
.copy-status.is-error{color:var(--ui-danger)}
.checkout-proof{display:grid;gap:12px;margin-top:20px;padding-top:20px;border-top:1px solid var(--ui-line)}
.checkout-proof[hidden]{display:none}
.checkout-proof h3{font-size:16px;font-weight:800}
.checkout-proof .ui-chip{justify-self:start}
.checkout-submit-bar{display:grid;gap:12px}
/* The long labels («Continue to payment · 3,520.00 EGP») wrap on the narrowest phones instead of widening the page. */
.checkout-submit{min-width:0;padding-block:8px;white-space:normal;text-align:center;text-wrap:balance}
.cart-summary > .ui-link{margin-top:12px}
.checkout-mini{display:none}
.checkout-extras{margin-top:14px;border-radius:var(--ui-radius-md);box-shadow:inset 0 0 0 1px var(--ui-line)}
.checkout-extras > summary{min-height:50px;padding-inline:16px;font-size:14px}
.checkout-extras .ui-form-grid{padding:4px 16px 16px}
@media (max-width:980px){
  .checkout-layout{grid-template-columns:1fr}
  .checkout-mini{display:flex;align-items:center;gap:10px;margin-bottom:16px;padding:12px 16px;border-radius:var(--ui-radius-md);background:var(--ui-brand-soft);color:var(--ui-ink);font-size:14px;text-decoration:none}
  .checkout-mini > span:first-of-type{flex:1;min-width:0}
  .checkout-mini .ui-icon{color:var(--ui-brand)}
}

/* Bundle contents, quantity first ("2 كيس أرز ..."); each part isolated so RTL never moves the count. */
body.ui .bundle-components{display:grid;gap:6px;margin:8px 0 0;padding:0;list-style:none;font-size:12px;color:var(--ui-ink)}
body.ui .bundle-components li{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:7px;line-height:1.55}
body.ui .component-qty{justify-self:start;padding:0 7px;border-radius:6px;background:var(--ui-brand-soft);color:var(--ui-brand-strong);font-weight:800;white-space:nowrap;unicode-bidi:isolate}
body.ui .component-title{min-width:0;unicode-bidi:isolate}
.damage-account{margin-bottom:20px}
.damage-steps{margin-top:16px;padding-top:0;border-top:0}
.ui-card--muted > .ui-link{margin-top:8px}

/* ---------- Customer account ---------- */
.account-head{align-items:center}
.account-identity{display:flex;align-items:center;gap:18px;min-width:0}
.account-avatar{display:grid;place-items:center;width:64px;height:64px;flex-shrink:0;border-radius:22px;background:var(--ui-brand);color:#fff;font-size:26px;font-weight:800}
.account-identity .ui-title{margin-top:4px}
.account-identity .ui-lead{margin-top:6px;font-size:14px}
.account-section{margin-top:32px}
.account-again{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;margin-top:20px;padding:16px 18px;background:var(--ui-brand-soft)}
.account-again p{display:grid;flex:1 1 260px;gap:2px;margin:0}
.account-again small{color:var(--ui-muted);font-size:13px;line-height:1.6}
@media (max-width:560px){.account-again form,.account-again .ui-btn{width:100%}}
/* "My orders": number, status and date on one side; the total and the "view order" button on the other (in a footer
   row on phones). Only the number and the button open the order. */
/* «طلباتي»: number, status and the order's facts (date, items, payment) on the start side, the total and «عرض الطلب»
   on the end side, and a four-step track under them showing where the order is. Phones stack the same three parts. */
.account-order{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"main foot" "track track";align-items:center;gap:12px 24px;padding:16px 20px;border-radius:var(--ui-radius-lg);background:var(--ui-surface);box-shadow:var(--ui-shadow-1)}
.account-order-main{grid-area:main;display:grid;gap:5px;min-width:0}
.account-order-id{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.account-order-number{color:var(--ui-ink);font-size:15px;font-weight:800;white-space:nowrap}
.account-order-number:hover{color:var(--ui-brand-strong)}
.account-order-date{display:flex;flex-wrap:wrap;gap:0 6px;color:var(--ui-muted);font-size:12.5px;line-height:1.6;font-variant-numeric:tabular-nums}
.account-order-date > span + span::before{content:"·";margin-inline-end:6px;color:var(--ui-faint)}
.account-order-foot{grid-area:foot;display:flex;align-items:center;gap:18px}
.account-order-total{display:grid;text-align:end}
.account-order-total small{color:var(--ui-muted);font-size:12px;line-height:1.5}
.account-order-total strong{font-size:17px;font-weight:800;line-height:1.4;white-space:nowrap}
.account-order-go{flex-shrink:0}
.account-order-track{grid-area:track;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0;padding:0;list-style:none;color:var(--ui-faint);font-size:11.5px;font-weight:700;line-height:1.35;text-align:center}
.account-order-track li{display:grid;gap:6px;min-width:0}
.account-order-track li::before{content:"";height:5px;border-radius:var(--ui-pill);background:var(--ui-surface-3)}
.account-order-track li.is-done{color:var(--ui-ink-2)}
.account-order-track li.is-done::before{background:var(--ui-brand)}
.account-order-track li[aria-current="step"]{color:var(--ui-brand-strong)}
.order-returns{display:grid;gap:10px;margin:14px 0 0;padding:0;list-style:none}
.order-return{display:grid;gap:4px;padding:14px 16px;border-radius:var(--ui-radius-md);background:var(--ui-surface-2)}
.order-return-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.order-return-head strong{font-size:15px;font-weight:800}
.order-return-date{color:var(--ui-muted);font-size:12px;font-variant-numeric:tabular-nums}
.order-return-reason{margin-top:4px;color:var(--ui-ink-2);font-size:14px;line-height:1.7;overflow-wrap:anywhere}
.order-return-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;margin-top:8px;padding-top:10px;border-top:1px solid var(--ui-line)}
.order-return-foot span{color:var(--ui-muted);font-size:13px}
.order-return-foot strong{font-size:15px;font-weight:800}
.order-return-foot .order-return-pending{color:var(--ui-ink-2);font-size:13px;font-weight:700}
@container (max-width:520px){
  .account-order{grid-template-columns:minmax(0,1fr);grid-template-areas:"main" "track" "foot";gap:12px;padding:14px 16px}
  .account-order-foot{justify-content:space-between;padding-top:12px;border-top:1px solid var(--ui-line)}
  .account-order-total{text-align:start}
  .account-order-track{font-size:11px}
}
.account-lists{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:12px}
/* The list name keeps its width; on narrow cards both buttons move together to their own row instead of squeezing it. */
.account-list{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--ui-radius-lg)}
.account-list-body{flex:1 1 100px;min-width:0}
.account-list-actions{display:flex;align-items:center;gap:8px;margin-inline-start:auto}
.account-list-body h3{font-size:15px;font-weight:800;overflow-wrap:anywhere}
.account-list-body small{color:var(--ui-muted);font-size:12px}
@media (max-width:560px){.account-identity{gap:12px}.account-avatar{width:52px;height:52px;border-radius:18px;font-size:21px}}

/* ---------- Order details (customer) ---------- */
.order-meta{margin-top:10px}
.order-lines{margin-top:16px}
.order-money{margin-top:8px}
.order-note{margin-top:12px}
.order-details dd{text-align:end;overflow-wrap:anywhere}
.order-proof{margin-top:12px}
.order-pay-state{margin-top:12px}
/* The checkout button says where it leads: placing the order, or on to Paymob's page when paying online. */
.checkout-submit-pay{display:none}
[data-checkout]:has([data-payment-choice][value=paymob]:checked) .checkout-submit-pay{display:inline}
[data-checkout]:has([data-payment-choice][value=paymob]:checked) .checkout-submit-order{display:none}
[data-checkout]:not(:has([data-needs-proof]:checked)) .checkout-hint-transfer{display:none}
/* Paying online from the order page: what is due, then the button to Paymob's page. */
.order-pay-online{display:grid;gap:10px;margin-top:12px;padding:14px 16px;border-radius:var(--ui-radius-md);background:var(--ui-brand-soft)}
.order-pay-online-due{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;margin:0;font-size:14px;font-weight:700}
.order-pay-online-due strong{font-size:20px;font-weight:800}
.order-pay-online small{color:var(--ui-ink-2);font-size:12.5px;line-height:1.6}
/* Reporting damage on a delivered order: each item with the same − / + counter as the cart. */
.damage-lines{display:grid;margin:-6px 0 0;padding:0;list-style:none;border:1px solid var(--ui-line);border-radius:var(--ui-radius-md);overflow:hidden}
.damage-line{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid var(--ui-line);background:var(--ui-surface)}
.damage-line:last-child{border-bottom:0}
.damage-line > div{display:grid;gap:2px;min-width:0}
.damage-line strong{font-size:14px;font-weight:800;line-height:1.5}
.damage-line small{color:var(--ui-muted);font-size:12px}
.damage-line .ui-stepper{flex-shrink:0}
/* Editing an order: the same lines, steppers and summary as the cart. A line set to zero reads as removed; a new one as added. */
.edit-head{display:grid;gap:2px;padding:18px clamp(18px,2.4vw,28px);border-bottom:1px solid var(--ui-line)}
.edit-head h2{font-size:17px;font-weight:800}
.edit-head p{color:var(--ui-muted);font-size:13px}
.edit-alert{border-radius:0}
.edit-item .cart-info h3{font-size:16px;font-weight:800;line-height:1.5}
.edit-state{display:none;align-items:center;gap:6px;margin-top:6px;font-size:12px;font-weight:800}
.edit-item.is-removed{background:#fbfcfd}
.edit-item.is-removed .cart-thumb,.edit-item.is-removed .cart-info h3,.edit-item.is-removed .cart-info p{opacity:.5}
.edit-item.is-removed .cart-info h3{text-decoration:line-through}
.edit-item.is-removed .edit-state--removed{display:inline-flex;color:var(--ui-danger)}
.edit-item.is-removed .cart-remove{visibility:hidden}
.edit-item.is-added{background:var(--ui-brand-soft)}
.edit-item.is-added .edit-state--added{display:inline-flex;color:var(--ui-brand-strong)}
.edit-more > summary{display:flex;align-items:center;gap:12px;list-style:none;cursor:pointer;border-bottom:0}
.edit-more > summary::-webkit-details-marker{display:none}
.edit-more[open] > summary{border-bottom:1px solid var(--ui-line)}
.edit-more-summary > span:nth-child(2){display:grid;gap:2px}
.edit-more-summary strong{font-size:16px;font-weight:800}
.edit-more-summary small{color:var(--ui-muted);font-size:13px}
.edit-more-icon{display:grid;place-items:center;width:40px;height:40px;flex-shrink:0;border-radius:12px;background:var(--ui-brand-soft);color:var(--ui-brand)}
.edit-more[open] .ui-disclosure-arrow{transform:rotate(180deg)}
.edit-price-note{margin-top:12px}
.edit-review-lines small{display:block;margin-top:2px;color:var(--ui-warning);font-size:12px;font-weight:700}
.edit-review-lines .ui-badge{margin-top:4px}
.edit-review-lines .is-removed strong{color:var(--ui-muted);text-decoration:line-through}
.cart-summary .ui-btn--ghost.ui-btn--block{margin-top:8px}
/* The customer's order page: change or cancel while the order is still unconfirmed. */
.order-manage{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px 16px;background:var(--ui-brand-soft);box-shadow:inset 0 0 0 1px var(--ui-brand-line)}
.order-manage-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:#fff;color:var(--ui-brand-strong)}
.order-manage h2{font-size:16px;font-weight:800}
.order-manage p{margin-top:2px;color:var(--ui-ink-2);font-size:13px}
.order-manage-actions{display:flex;flex-wrap:wrap;gap:8px}
.order-cancel{padding:0}
.order-cancel-summary{display:flex;align-items:center;gap:12px;min-height:64px;padding:12px clamp(18px,2.4vw,28px);list-style:none;cursor:pointer;border-radius:inherit}
.order-cancel-summary::-webkit-details-marker{display:none}
.order-cancel-summary > span:nth-child(2){display:grid;gap:2px}
.order-cancel-summary strong{color:var(--ui-danger);font-size:15px;font-weight:800}
.order-cancel-summary small{color:var(--ui-muted);font-size:12.5px}
.order-cancel-icon{display:grid;place-items:center;width:40px;height:40px;flex-shrink:0;border-radius:12px;background:var(--ui-danger-soft);color:var(--ui-danger)}
.order-cancel[open] .ui-disclosure-arrow{transform:rotate(180deg)}
.order-cancel-form{padding:0 clamp(18px,2.4vw,28px) clamp(18px,2.4vw,28px)}
@media (max-width:640px){
  .order-manage{grid-template-columns:auto minmax(0,1fr)}
  .order-manage-actions{grid-column:1 / -1}
  .order-manage-actions .ui-btn{flex:1 1 140px}
  .edit-item .cart-qty{justify-self:start}
}

/* ---------- Sign-in & security ---------- */
/* My details & security: a profile summary and section links beside grouped settings rows (stacked on phones).
   Each row shows its current value; its edit button opens the form under it. */
.settings-layout{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:24px;align-items:start}
.settings-side{position:sticky;top:132px;display:grid;gap:12px}
.settings-profile{display:grid;justify-items:center;gap:12px;text-align:center}
.settings-avatar{display:grid;place-items:center;width:68px;height:68px;border-radius:50%;background:var(--ui-brand-soft);box-shadow:inset 0 0 0 1px var(--ui-brand-line);color:var(--ui-brand-strong);font-size:28px;font-weight:800;line-height:1}
.settings-profile-text{display:grid;gap:2px;min-width:0;max-width:100%}
.settings-profile-text strong{color:var(--ui-ink);font-size:17px;font-weight:800;overflow-wrap:anywhere}
.settings-profile-text bdi{color:var(--ui-muted);font-size:13px;overflow-wrap:anywhere}
.settings-status{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0;padding:0;list-style:none}
.settings-nav{display:grid;gap:4px;padding:8px;border-radius:var(--ui-radius-lg);background:var(--ui-surface);box-shadow:var(--ui-shadow-1)}
.settings-nav a{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 12px;border-radius:var(--ui-radius-sm);color:var(--ui-ink-2);font-size:14px;font-weight:700;transition:background-color .2s var(--ui-ease),color .2s var(--ui-ease)}
.settings-nav a:hover{background:var(--ui-surface-2);color:var(--ui-ink)}
.settings-nav .ui-icon{flex-shrink:0;color:var(--ui-brand)}
.settings-main{display:grid;gap:16px;min-width:0}
.settings-group{scroll-margin-top:132px}
#my-orders{scroll-margin-top:96px}
@media (max-width:760px){#my-orders{scroll-margin-top:140px}}
.settings-group-head h2{margin:0;color:var(--ui-ink);font-size:clamp(18px,1.8vw,21px);font-weight:800}
.settings-group-head p{margin-top:4px;color:var(--ui-muted);font-size:14px;line-height:1.7}
.settings-row{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;margin-top:18px;padding-top:20px;border-top:1px solid var(--ui-line)}
.settings-row-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--ui-brand-soft);color:var(--ui-brand)}
.settings-row-icon--plain{background:var(--ui-surface-2)}
.settings-row-body{min-width:0}
.settings-row-body h3{margin:0;color:var(--ui-ink);font-size:15.5px;font-weight:800;line-height:1.5}
.settings-row-body > .ui-hint{margin-top:6px}
.settings-value{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:6px;color:var(--ui-ink);font-size:15px;font-weight:700;line-height:1.6;overflow-wrap:anywhere}
.settings-value.is-empty{color:var(--ui-muted);font-weight:600}
.settings-address{align-items:flex-start;font-weight:600}
.settings-warning{display:flex;align-items:flex-start;gap:6px;color:var(--ui-warning);font-weight:700}
.settings-warning .ui-icon{flex-shrink:0;margin-top:2px}
.settings-inline{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:12px}
.settings-edit{margin-top:12px}
.settings-edit > summary{list-style:none;width:max-content;max-width:100%}
.settings-edit > summary::-webkit-details-marker{display:none}
.settings-edit[open] > summary{--btn-bg:var(--ui-surface-3)}
.settings-form{display:grid;gap:14px;margin-top:14px;padding:18px;border-radius:var(--ui-radius-md);background:var(--ui-bg);box-shadow:inset 0 0 0 1px var(--ui-line)}
.settings-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.settings-form-actions{display:flex;flex-wrap:wrap;gap:10px}
.security-devices{display:grid;gap:8px;margin:12px 0 0;padding:0;list-style:none}
.security-devices li{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:var(--ui-radius-sm);background:var(--ui-surface-2)}
.security-devices li.is-current{background:var(--ui-brand-soft)}
.security-devices li > .ui-icon{flex-shrink:0;color:var(--ui-brand)}
.security-devices span{display:grid;min-width:0}
.security-devices strong{font-size:14px;font-weight:800}
.security-devices small{color:var(--ui-muted);font-size:12.5px}
@media (min-width:720px){
  /* The edit button sits at the end of its row; the form still opens full width under the row's text. */
  .settings-row--editable{position:relative}
  .settings-row--editable .settings-row-body > :not(.settings-edit){margin-inline-end:220px}
  .settings-row--editable .settings-edit{margin-top:0}
  .settings-row--editable .settings-edit > summary{position:absolute;top:18px;inset-inline-end:0}
}
@media (max-width:960px){
  .settings-layout{grid-template-columns:minmax(0,1fr);gap:16px}
  .settings-side{position:static;grid-template-columns:minmax(0,1fr)}
  .settings-profile{grid-template-columns:auto minmax(0,1fr);justify-items:start;align-items:center;text-align:start}
  .settings-status{grid-column:1 / -1;justify-content:flex-start}
  .settings-nav{display:flex;gap:8px;overflow-x:auto;padding:0;background:none;box-shadow:none;scrollbar-width:none}
  .settings-nav::-webkit-scrollbar{display:none}
  .settings-nav a{flex-shrink:0;min-height:40px;padding:6px 14px;border-radius:var(--ui-pill);background:var(--ui-surface);box-shadow:var(--ui-shadow-1);white-space:nowrap}
}
@media (max-width:560px){
  .settings-avatar{width:56px;height:56px;font-size:24px}
  .settings-row{grid-template-columns:36px minmax(0,1fr);gap:12px}
  .settings-row-icon{width:36px;height:36px;border-radius:11px}
  .settings-pair{grid-template-columns:minmax(0,1fr)}
  .settings-form{padding:14px}
}

/* ---------- Error pages ---------- */
.error-page{max-width:720px}
.error-code{display:inline-grid;place-items:center;min-width:72px;height:40px;padding:0 14px;border-radius:var(--ui-pill);background:var(--ui-brand-soft);color:var(--ui-brand-strong);font-weight:800;font-variant-numeric:tabular-nums}
.error-page .ui-title{margin-top:4px}

/* ---------- Delivery hours note (checkout and delivery page) and a saved area outside coverage ---------- */
.delivery-hours{display:flex;align-items:flex-start;gap:10px;margin:0;padding:12px 14px;border-radius:var(--ui-radius-sm);background:var(--ui-brand-soft);color:var(--ui-ink);font-size:14.5px;font-weight:700;line-height:1.65;box-shadow:inset 0 0 0 1px var(--ui-brand-line)}
.delivery-hours svg{flex-shrink:0;margin-top:2px;color:var(--ui-brand-strong)}
.info-page .delivery-hours{margin-block:12px}
.area-picker-unserved{display:flex;align-items:flex-start;gap:8px;margin:0 0 8px;font-size:14px}
.area-picker-unserved svg{flex-shrink:0;margin-top:2px}

/* ---------- Pack image (photo or a calm category tile) ---------- */
.pack-art{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:1;overflow:hidden;isolation:isolate;border-radius:var(--ui-radius-md);background:linear-gradient(160deg,#f3fafd,#e4f4fb)}
.pack-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:2%;mix-blend-mode:multiply;transition:scale .3s var(--ui-ease)}
.pack-art-icon{display:grid;place-items:center;width:44%;aspect-ratio:1;border-radius:50%;background:#fff;color:var(--ui-brand);box-shadow:var(--ui-shadow-1)}
.pack-art-icon svg{width:56%;height:56%;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Home ---------- */
/* A pale sage panel keeps the basket and product packaging as the main visual focus. */
.hero{padding-block:clamp(12px,2.4vw,28px) clamp(14px,2.4vw,24px)}
.hero-panel{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(12px,3vw,40px);padding:clamp(24px,4vw,56px) clamp(22px,4.5vw,64px);overflow:hidden;border-radius:clamp(26px,3vw,40px);background:radial-gradient(90% 80% at 10% 100%,#cdeefb 0%,rgb(205 238 251 / 0) 60%),radial-gradient(70% 70% at 95% 0%,#e9f8fe 0%,rgb(233 248 254 / 0) 70%),linear-gradient(160deg,#f4fbfe,#e2f4fc)}
.hero-panel::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgb(2 158 218 / .16) 1.2px,transparent 1.2px);background-size:22px 22px;mask-image:linear-gradient(110deg,transparent 30%,#000 75%);-webkit-mask-image:linear-gradient(110deg,transparent 30%,#000 75%);pointer-events:none}
.hero-copy{position:relative;z-index:1}
.hero-copy h1{margin:12px 0 14px;font-size:clamp(34px,5.2vw,62px);font-weight:800;line-height:1.14;color:var(--ui-ink)}
.hero-copy .hero-title--wholesale{line-height:1.4}
.hero-copy h1 span{color:var(--ui-brand)}
.hero-copy > p{max-width:500px;margin:0 0 26px;color:var(--ui-ink-2);font-size:clamp(15px,1.4vw,17.5px);line-height:1.9}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px}
.hero-actions .ui-btn--primary{box-shadow:0 14px 30px -12px rgb(2 158 218 / .65)}
.hero-visual{position:relative;justify-self:center;width:100%;max-width:520px;aspect-ratio:1}
.hero-svg{display:block;width:100%;height:100%;overflow:visible}
.hero-orbit{fill:none;stroke:#8fd5f0;stroke-width:1.6;stroke-dasharray:3 10}
.hero-orbit--inner{stroke:#b9e6f7;stroke-dasharray:2 7}
.hero-orbit-dots circle{fill:var(--ui-brand)}
.hero-orbit-dots--inner circle{fill:#f5b041}
.hero-orbits,.hero-orbit-dots{transform-box:view-box;transform-origin:260px 262px}
.hero-sun{transform-box:fill-box;transform-origin:center}
.hero-basket{transform-box:fill-box;transform-origin:50% 100%}
.hero-bag{transform-box:fill-box;transform-origin:50% 100%;transform:rotate(var(--r,0deg))}
.hero-bag--ahl{--r:-9deg}
.hero-bag--rice{--r:8deg}
.hero-bag--sugar{--r:-1deg}
.hero-carton .hero-bag{filter:drop-shadow(0 10px 8px rgb(81 48 15 / .16))}
.hero-par{transition:translate .5s cubic-bezier(.2,.8,.2,1)}
.hero-par--1{translate:calc(var(--px,0) * -12px) calc(var(--py,0) * -8px)}
.hero-par--2{translate:calc(var(--px,0) * 16px) calc(var(--py,0) * 10px)}
.hero-par--3{translate:calc(var(--px,0) * -18px) calc(var(--py,0) * -10px)}
.hero-spark{fill:#f5b041;transform-box:fill-box;transform-origin:center}
.hero-spark--2{fill:var(--ui-brand)}
.hero-chip{position:absolute;z-index:1;display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:var(--ui-pill);background:#fff;color:var(--ui-ink);font-size:13px;font-weight:800;white-space:nowrap;box-shadow:0 14px 32px -14px rgb(18 62 87 / .45)}
html[dir=rtl] .hero-chip{padding:6px 6px 6px 14px}
.hero-chip-mark{display:grid;place-items:center;width:30px;height:30px;overflow:hidden;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px rgb(18 62 87 / .08)}
.hero-chip-mark--zita{padding:3px;background:var(--zita-blue)}
.hero-chip-mark img{width:100%;height:100%;object-fit:contain}
.hero-chip--zita{top:14%;right:-2%}
.hero-chip--ahl{top:24%;left:-3%}
@media (prefers-reduced-motion:no-preference){
  .hero-copy > *{animation:hero-rise .7s cubic-bezier(.2,.8,.2,1) both}
  .hero-copy > :nth-child(2){animation-delay:.08s}
  .hero-copy > :nth-child(3){animation-delay:.16s}
  .hero-copy > :nth-child(4){animation-delay:.24s}
  .hero-copy > :nth-child(5){animation-delay:.32s}
  .hero-basket{animation:hero-basket-in .8s cubic-bezier(.2,.8,.2,1) .1s both,hero-squash .6s ease-out 1.75s}
  .hero-bag--ahl{animation:hero-drop .95s cubic-bezier(.3,1.45,.55,1) .6s both,hero-bob 5.5s ease-in-out 2.4s infinite}
  .hero-bag--rice{animation:hero-drop .95s cubic-bezier(.3,1.45,.55,1) .9s both,hero-bob 6.2s ease-in-out 2.7s infinite}
  .hero-bag--sugar{animation:hero-drop .95s cubic-bezier(.3,1.45,.55,1) 1.2s both,hero-bob 5s ease-in-out 3s infinite}
  .hero-orbits{animation:hero-spin 90s linear infinite}
  .hero-orbit-dots{animation:hero-spin 22s linear infinite}
  .hero-orbit-dots--inner{animation-duration:30s;animation-direction:reverse}
  .hero-sun{animation:hero-pulse 6s ease-in-out infinite}
  .hero-spark{animation:hero-twinkle 2.8s ease-in-out infinite}
  .hero-spark--2{animation-delay:.9s}
  .hero-spark--3{animation-delay:1.7s}
  .hero-chip{animation:hero-pop .6s cubic-bezier(.3,1.4,.5,1) both,hero-float 6s ease-in-out infinite}
  .hero-chip--zita{animation-delay:1.9s,2.5s}
  .hero-chip--ahl{animation-delay:2.1s,3.4s}
}
@keyframes hero-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes hero-basket-in{from{opacity:0;transform:translateY(60px) scale(.9)}to{opacity:1;transform:none}}
@keyframes hero-squash{0%,100%{transform:none}30%{transform:scale(1.035,.955)}65%{transform:scale(.99,1.012)}}
@keyframes hero-drop{0%{opacity:0;transform:translateY(-360px) rotate(calc(var(--r) * -2.5))}30%{opacity:1}100%{opacity:1;transform:translateY(0) rotate(var(--r))}}
@keyframes hero-bob{0%,100%{transform:translateY(0) rotate(var(--r))}50%{transform:translateY(-8px) rotate(calc(var(--r) + 1.6deg))}}
@keyframes hero-spin{to{transform:rotate(360deg)}}
@keyframes hero-pulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.06);opacity:1}}
@keyframes hero-twinkle{0%,100%{transform:scale(.55);opacity:.35}50%{transform:scale(1.15);opacity:1}}
@keyframes hero-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes hero-float{0%,100%{translate:0 0}50%{translate:0 -8px}}

/* Trust: one calm white bar under the banner. */
.home-trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:clamp(28px,4vw,48px);padding:6px;border-radius:var(--ui-radius-lg);background:var(--ui-surface);box-shadow:0 10px 30px -22px rgb(18 62 87 / .35);outline:1px solid rgb(18 62 87 / .06);outline-offset:-1px}
.trust-item{display:flex;align-items:center;gap:12px;padding:12px 14px}
.trust-item + .trust-item{box-shadow:inset 1px 0 0 var(--ui-line)}
html[dir=rtl] .trust-item + .trust-item{box-shadow:inset -1px 0 0 var(--ui-line)}
.trust-icon{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;border-radius:14px;background:var(--ui-brand-soft);color:var(--ui-brand)}
.trust-item > span:last-child{display:grid;min-width:0}
.trust-item strong{font-size:14px;font-weight:800;line-height:1.4}
.trust-item small{color:var(--ui-muted);font-size:12.5px;line-height:1.5}

/* Categories: picture chips with how many packs each has. */
.home-catalog{scroll-margin-top:96px}
.home-catalog-head{margin-bottom:14px}
.home-catalog-head > .ui-actions{margin-inline-start:auto}
.home-cats{display:flex;gap:10px;margin:0 0 18px;padding:2px 2px 8px;overflow-x:auto;scrollbar-width:none}
.home-cats::-webkit-scrollbar{display:none}
.home-cat{display:flex;flex-shrink:0;align-items:center;gap:10px;padding:6px 16px 6px 6px;border-radius:var(--ui-pill);background:var(--ui-surface);color:var(--ui-ink);font-weight:800;text-decoration:none;box-shadow:0 1px 0 rgb(18 62 87 / .04),inset 0 0 0 1px var(--ui-line);transition-property:background-color,color,box-shadow,translate;transition-duration:.2s}
html[dir=rtl] .home-cat{padding:6px 6px 6px 16px}
.home-cat:hover{translate:0 -2px;box-shadow:0 10px 22px -14px rgb(18 62 87 / .45),inset 0 0 0 1px var(--ui-brand-line)}
.home-cat-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--ui-brand-soft);color:var(--ui-brand)}
.home-cat-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.home-cat small{display:grid;place-items:center;min-width:24px;height:22px;padding:0 7px;border-radius:var(--ui-pill);background:var(--ui-surface-2);color:var(--ui-muted);font-size:12px;font-weight:800}
.home-cat[aria-current=page]{background:var(--ui-brand);color:#fff;box-shadow:0 12px 24px -14px rgb(2 158 218 / .8)}
.home-cat[aria-current=page] .home-cat-icon{background:rgb(255 255 255 / .2);color:#fff}
.home-cat[aria-current=page] small{background:rgb(255 255 255 / .22);color:#fff}
.home-results{margin:0 0 14px;color:var(--ui-muted);font-size:14px}

/* Deals and bundles follow the catalogue; their navigation destination also explains an empty selection. */
.home-deals{margin-block:clamp(28px,4vw,48px) clamp(30px,4vw,48px)}
.home-deals-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.home-deals-head .ui-lead{margin:6px 0 0}
.home-deals-icon{display:grid;place-items:center;width:48px;height:48px;flex-shrink:0;border-radius:16px;background:#fff1e6;color:#e5484d}
.site-wholesale-link{display:inline-flex;align-items:center;gap:6px;color:var(--ui-brand-strong)}

.home-how{margin-top:clamp(36px,5vw,64px)}
#offers,#bundles{scroll-margin-top:96px}
@media (max-width:760px){#offers,#bundles{scroll-margin-top:140px}}
.how-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.how-steps li{display:grid;gap:6px;align-content:start;padding:20px;border-radius:var(--ui-radius-lg);background:var(--ui-surface);box-shadow:var(--ui-shadow-1)}
.how-num{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--ui-brand);color:#fff;font-weight:800}
.how-steps strong{font-size:16px;font-weight:800}
.how-steps p{margin:0;color:var(--ui-muted);font-size:14px;line-height:1.7}
.home-brands{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px;margin-top:clamp(36px,5vw,64px);padding:clamp(20px,3vw,32px);border-radius:var(--ui-radius-xl);background:var(--ui-surface);box-shadow:var(--ui-shadow-1)}
.home-brands-copy{min-width:0}
.home-brands .ui-lead{margin:6px 0 0}
.home-brand-logos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;width:316px;max-width:100%;min-width:0}
.home-brand-logo{position:relative;display:block;aspect-ratio:1;overflow:hidden;border-radius:24px;box-shadow:0 12px 26px -16px rgb(18 62 87 / .55)}
.home-brand-logo img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.home-brand-logo--zita{background:var(--ui-brand)}
.home-brand-logo--zita img{padding:12px;object-fit:contain}
.home-brand-logo--bkh{background:#370077}
.home-brand-logo--bkh img{inset:-14%;width:128%;height:128%;max-width:none;object-fit:contain}

/* Sections slide in once as they scroll into view (ui.js marks only those still below the fold). */
[data-reveal].is-pending{opacity:0;translate:0 26px}
[data-reveal]{transition:opacity .7s cubic-bezier(.2,.8,.2,1),translate .7s cubic-bezier(.2,.8,.2,1)}
@media (prefers-reduced-motion:reduce){[data-reveal].is-pending{opacity:1;translate:none}}

@media (max-width:980px){
  .home-trust{grid-template-columns:1fr 1fr}
  .trust-item:nth-child(3){box-shadow:none}
  .trust-item:nth-child(n+3){border-top:1px solid var(--ui-line)}
}
@media (max-width:820px){
  .hero-panel{grid-template-columns:1fr;padding:26px 20px 18px;text-align:start}
  .hero-visual{max-width:420px;margin-top:4px}
  .home-brands{grid-template-columns:minmax(0,1fr);text-align:center}
  .home-brand-logos{justify-self:center}
}
@media (max-width:760px){
  .how-steps{grid-template-columns:1fr;gap:8px}
  .how-steps li{grid-template-columns:36px minmax(0,1fr);gap:2px 12px;padding:14px}
  .how-num{grid-row:span 2}
}
@media (max-width:560px){
  .hero{padding-top:12px}
  .hero-copy h1{margin:8px 0 10px;font-size:33px}
  .hero-copy > p{margin-bottom:18px;font-size:15px;line-height:1.8}
  .hero-actions{gap:8px}
  .hero-actions .ui-btn{flex:1 1 auto;padding-inline:12px;font-size:14px}
  .hero-visual{max-width:340px}
  .hero-chip{padding:5px 12px 5px 5px;font-size:12px}
  html[dir=rtl] .hero-chip{padding:5px 5px 5px 12px}
  .hero-chip-mark{width:26px;height:26px}
  .home-trust{padding:4px}
  .trust-item{flex-direction:column;align-items:flex-start;gap:8px;padding:12px}
  .trust-icon{width:36px;height:36px;border-radius:12px}
  .trust-item strong{font-size:13px}
  .trust-item small{font-size:12px}
  .home-cat{gap:8px;padding:5px 12px 5px 5px;font-size:14px}
  html[dir=rtl] .home-cat{padding:5px 5px 5px 12px}
  .home-cat-icon{width:32px;height:32px}
  .home-cat-icon svg{width:19px;height:19px}
}

/* ---------- Product card ---------- */
/* Each bag stays centred inside its stage; the isolated blend removes white photo corners without spilling onto the card. */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,236px),1fr));gap:22px 16px;padding-top:18px}
/* Tablets: three cards a row instead of two oversized ones. */
@media (min-width:700px) and (max-width:980px){.pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pcard{--tint-1:#f2fbff;--tint-2:#c9ecfa;--tint-ink:var(--ui-brand-strong);position:relative;display:flex;flex-direction:column;border-radius:26px;background:var(--ui-surface);box-shadow:0 1px 0 rgb(18 62 87 / .04),0 14px 34px -22px rgb(18 62 87 / .4);outline:1px solid rgb(18 62 87 / .06);outline-offset:-1px;transition-property:translate,box-shadow;transition-duration:.3s;transition-timing-function:cubic-bezier(.2,.8,.2,1)}
.pcard--zita{--tint-1:#f2fbff;--tint-2:#c9ecfa;--tint-ink:var(--zita-blue-strong)}
.pcard--ahl{--tint-1:#fffaf1;--tint-2:#f4dfb9;--tint-ink:#9b2c22}
.pcard--bkh{--tint-1:#faf5ff;--tint-2:#e9dcf8;--tint-ink:#370077}
.pcard--other{--tint-1:#f5faf7;--tint-2:#d9ece2;--tint-ink:var(--ui-success)}
.pcard{--pcard-raised-shadow:0 1px 0 rgb(18 62 87 / .04),0 26px 48px -24px rgb(18 62 87 / .5);--pcard-raised-photo:translateY(clamp(-8px,-3%,-4px)) rotate(-3deg) scale(1.05);--pcard-raised-art:translateY(-6px) scale(1.05);--pcard-raised-floor:scaleX(.8)}
@media (hover:hover) and (pointer:fine){.pcard:hover{translate:0 -5px;box-shadow:var(--pcard-raised-shadow)}}
.pcard-media{position:relative;display:block;margin:10px 10px 0;color:inherit;text-decoration:none}
.pcard-stage{position:relative;display:grid;place-items:center;aspect-ratio:1 / .86;overflow:hidden;isolation:isolate;border-radius:20px;background:radial-gradient(110% 85% at 50% 105%,var(--tint-2) 0%,var(--tint-1) 68%)}
.pcard-glow{position:absolute;inset:8% 16% 26%;border-radius:50%;background:radial-gradient(closest-side,rgb(255 255 255 / .95),rgb(255 255 255 / 0))}
.pcard-floor{position:absolute;bottom:0;left:27%;right:27%;height:7%;border-radius:50%;background:radial-gradient(closest-side,rgb(18 62 87 / .26),rgb(18 62 87 / 0));transition:transform .5s cubic-bezier(.22,.61,.36,1),opacity .5s cubic-bezier(.22,.61,.36,1)}
.pcard-photo{position:absolute;left:6%;top:9%;width:88%;height:82%;object-fit:contain;object-position:center;mix-blend-mode:multiply;transform-origin:center;transition:transform .5s cubic-bezier(.3,1.45,.55,1),opacity .35s ease-out}
.photos-ready .pcard-photo:not(.is-loaded),.photos-ready .pack-art img:not(.is-loaded){opacity:0}
.pcard-photo.is-broken,.pack-art img.is-broken{display:none}
.photos-ready .pcard-stage:has(.pcard-photo:not(.is-loaded):not(.is-broken))::after,.photos-ready .pack-art:has(img:not(.is-loaded):not(.is-broken))::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(100deg,rgb(255 255 255 / 0) 30%,rgb(255 255 255 / .65) 50%,rgb(255 255 255 / 0) 70%);background-size:220% 100%;animation:photo-wait 1.2s linear infinite}
@keyframes photo-wait{from{background-position:120% 0}to{background-position:-120% 0}}
@media (prefers-reduced-motion:reduce){.photos-ready .pcard-stage::after,.photos-ready .pack-art::after{animation:none}}
.pcard-art{position:relative;display:grid;place-items:center;width:46%;aspect-ratio:1;border-radius:50%;background:#fff;color:var(--tint-ink);box-shadow:0 14px 26px -16px rgb(18 62 87 / .45);transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.pcard-art svg{width:54%;height:54%;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
/* Pointing at a pack lifts the bag a little, tilts it and enlarges it slightly while its floor shadow tightens and
   fades, then everything eases back the same way. The bag box keeps 6% side and 9% top/bottom margins inside the
   stage, and the small lift, the 3° tilt and the 5% enlargement stay within them, so
   the bag is never cut and never covers the weight or the badge (which sit above the stage). */
@media (hover:hover) and (pointer:fine){
  .pcard:hover .pcard-photo,.pcard:has(.pcard-title a:focus-visible) .pcard-photo{transform:var(--pcard-raised-photo)}
  .pcard:hover .pcard-art,.pcard:has(.pcard-title a:focus-visible) .pcard-art{transform:var(--pcard-raised-art)}
  .pcard:hover .pcard-floor,.pcard:has(.pcard-title a:focus-visible) .pcard-floor{transform:var(--pcard-raised-floor);opacity:.6}
}
/* Touch keeps the current reading card raised through native scrolling and its momentum, using the desktop pose. */
@media (hover:none),(pointer:coarse){
  .pcard.is-scroll-active{translate:0 -5px;box-shadow:var(--pcard-raised-shadow)}
  .pcard.is-scroll-active .pcard-photo{transform:var(--pcard-raised-photo)}
  .pcard.is-scroll-active .pcard-art{transform:var(--pcard-raised-art)}
  .pcard.is-scroll-active .pcard-floor{transform:var(--pcard-raised-floor);opacity:.6}
}
/* The drawn tile is a placeholder, and says so, until the pack's real photo is uploaded. */
.art-note{position:absolute;inset-inline:10px;bottom:8px;text-align:center;font-size:.72rem;font-weight:600;line-height:1.3;color:var(--ui-muted)}
/* The weight sits in the top-right corner and the badge (offer, bulk price or «الأكثر طلبًا») in the top-left corner,
   each pinned on its own, so the badge never drops under the weight; the badge only uses the room the weight leaves. */
.pcard-tags{position:absolute;top:10px;left:10px;right:10px;height:0;pointer-events:none;--weight-room:72px}
.pcard-weight{position:absolute;top:0;right:0;padding:4px 10px;border-radius:var(--ui-pill);background:rgb(255 255 255 / .94);color:var(--ui-ink);font-size:12px;font-weight:800;white-space:nowrap;box-shadow:0 4px 12px -4px rgb(18 62 87 / .25)}
.pcard-tags .pcard-flag{position:absolute;top:0;left:0;max-width:calc(100% - var(--weight-room));line-height:1.3;text-align:center}
.pcard-flag{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:var(--ui-pill);background:var(--ui-brand);color:#fff;font-size:12px;font-weight:800;box-shadow:0 6px 14px -6px rgb(18 62 87 / .45)}
.pcard-flag--offer{background:#e5484d}
.pcard-flag--hot{background:#f5b041;color:#3b2300}
.pcard-body{display:flex;flex:1;flex-direction:column;gap:3px;padding:14px 16px 16px}
.pcard-brand{display:inline-flex;align-items:center;gap:7px;color:var(--tint-ink);font-size:12.5px;font-weight:800}
.pcard-mark{display:grid;place-items:center;width:22px;height:22px;flex-shrink:0;overflow:hidden;border-radius:7px;background:var(--ui-brand);color:#fff}
.pcard--zita .pcard-mark{background:var(--zita-blue)}
.pcard--ahl .pcard-mark{background:#fff;box-shadow:inset 0 0 0 1px rgb(18 62 87 / .08)}
.pcard--bkh .pcard-mark{background:#370077}
.pcard--other .pcard-mark{background:var(--tint-2);color:var(--tint-ink)}
.pcard-mark img{width:100%;height:100%;object-fit:contain}
.pcard--bkh .pcard-mark img{width:128%;height:128%;max-width:none}
.pcard-title{margin:2px 0 0;font-size:15.5px;font-weight:800;line-height:1.45}
.pcard-title a{color:inherit;text-decoration:none}
.pcard-title a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.pcard-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin-top:6px}
.pcard-price strong{font-size:23px;font-weight:800;line-height:1.1}
.pcard-price strong small{margin-inline-start:4px;font-size:12px;color:var(--ui-muted)}
.pcard-price del{color:var(--ui-faint);font-size:13.5px}
.pcard-unit{margin:0;color:var(--ui-muted);font-size:12px}
/* A shrink: the store card whose stage holds the shrink scene (store.partials.shrink-scene): the pack cut out of its
   white studio background, standing in its open carton (back flaps and dark inner walls behind it, front panel before
   it, printed with the bag count). The scene keeps one 300 × 260 frame, scaled to fit and centred in whatever holds it
   (card stage, product page, cart thumbnail): its holder is a size container and the scene takes the largest such
   frame that fits, so the pack keeps the same proportion to its carton everywhere and sits exactly in the middle.
   Only the pack lifts on hover or under the thumb; the carton stays put. The scene never creates a stacking context,
   so a photo still waiting for its cut-out copy can blend into the light ground. */
.pcard--wholesale .pcard-stage,.pack-art--shrink,.cart-thumb,.drawer-thumb{container-type:size}
.pcard--wholesale .pcard-floor{display:none}
.shrink-scene{position:relative;display:block;flex-shrink:0;width:min(94cqw,calc(94cqh * 300 / 260));height:min(94cqh,calc(94cqw * 260 / 300));container-type:inline-size;pointer-events:none}
.shrink-scene .shrink-scene-back,.shrink-scene .shrink-scene-front{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.shrink-scene .shrink-scene-bag{position:absolute;inset:auto;left:23%;top:4%;width:54%;height:86%;padding:0;object-fit:contain;object-position:50% 100%;mix-blend-mode:normal;outline:0;border-radius:0}
.shrink-scene--blend .shrink-scene-bag{mix-blend-mode:multiply}
.shrink-scene .shrink-scene-art{position:absolute;left:32%;top:14%;width:36%;aspect-ratio:1;height:auto}
.shrink-scene .shrink-scene-art svg{width:56%;height:56%}
.shrink-scene-count{position:absolute;top:90.6%;left:50%;translate:-50% -50%;display:inline-flex;align-items:baseline;gap:.3em;padding:.12em .65em .18em;border-radius:.45em;background:#fffaf1;color:var(--ui-ink);font-size:clamp(9px,5.4cqi,21px);font-weight:800;line-height:1.1;white-space:nowrap;box-shadow:0 0 0 1px rgb(120 72 25 / .25),0 3px 8px -4px rgb(80 45 10 / .55)}
.shrink-scene-count strong{font-size:1.62em;line-height:1;font-variant-numeric:tabular-nums;color:var(--ui-brand-strong)}
.shrink-scene--thumb{width:min(100cqw,calc(100cqh * 300 / 260));height:min(100cqh,calc(100cqw * 260 / 300))}
/* The contents line: what one shrink holds, count first, in one glance. */
.pcard-shrink{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;margin:6px 0 0;padding:6px 10px;border-radius:12px;background:var(--tint-1,var(--ui-brand-soft));box-shadow:inset 0 0 0 1px rgb(18 62 87 / .07);color:var(--ui-ink);font-size:13px;line-height:1.4}
.pcard-shrink-icon{display:flex;color:var(--tint-ink,var(--ui-brand-strong))}
.pcard-shrink-label{color:var(--ui-muted);font-size:12px;font-weight:700}
.pcard-shrink-count{font-size:15px;font-weight:800;unicode-bidi:isolate}
.pcard-shrink-weight{font-weight:700;white-space:nowrap}
.pcard-shrink-weight > span{color:var(--ui-faint)}
.pcard-price-per{color:var(--ui-muted);font-size:12.5px;font-weight:700}
.pcard-bag-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:1px 5px;margin:0;color:var(--ui-muted);font-size:12px;line-height:1.5}
.pcard-bag-price .ui-money{font-weight:700;color:var(--ui-ink)}
.pcard-bag-price .ui-money small{margin-inline-start:0;font-size:11px}
@container (max-width:170px){.pcard-shrink{gap:2px 5px;padding:5px 8px;font-size:12px}.pcard-shrink-icon,.pcard-shrink-label{display:none}.pcard-shrink-count{font-size:14px}}
/* Bundle card: the pack card's frame plus its packs (quantity first). Its photo area takes only the height left over
   in its row, so it matches the pack cards beside it instead of stretching them. */
.pcard--bundle .pcard-media{display:flex;flex:1 1 auto;flex-direction:column}
.pcard--bundle .pcard-stage{flex:1 1 auto;aspect-ratio:1 / .58}
.pcard--bundle .pcard-body{flex:0 0 auto}
.pcard-contains{margin:6px 0 0;color:var(--ui-muted);font-size:12px;font-weight:700}
body.ui .pcard .bundle-components{gap:5px;margin:4px 0 2px;font-size:12.5px}
body.ui .pcard .bundle-components li{gap:6px;line-height:1.45}
body.ui .pcard .component-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcard-more{position:relative;z-index:1;display:inline-flex;align-items:center;gap:3px;justify-self:start;margin:2px 0 0;color:var(--ui-brand-strong);font-size:12px;font-weight:800}
.pcard-bundle-details{position:relative;z-index:1;display:none;align-items:baseline;flex-wrap:wrap;gap:0 4px;color:var(--ui-brand-strong);font-size:11px;font-weight:700;line-height:1.5;text-decoration:none}
.pcard-bundle-details span:first-child{color:var(--ui-muted);font-weight:400}
.pcard-bundle-details span+span::before{content:"·";margin-inline-end:4px;color:var(--ui-muted)}
.pcard-stock{display:flex;align-items:center;gap:7px;margin:4px 0 0;color:var(--ui-success);font-size:12.5px;font-weight:700}
.pcard-stock::before{content:"";width:7px;height:7px;flex-shrink:0;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px rgb(26 127 75 / .14)}
.pcard-stock.is-low{color:#b45309}
.pcard-stock.is-low::before{box-shadow:0 0 0 3px rgb(180 83 9 / .16)}
.pcard.is-out .pcard-stock{color:var(--ui-danger)}
.pcard.is-out .pcard-photo,.pcard.is-out .pcard-art{opacity:.55;filter:grayscale(.4)}
.pcard-buy{position:relative;z-index:1;display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;margin-top:auto;padding-top:14px}
/* A narrow card (three in a row on tablets) puts the counter on its own line, so «أضف للسلة» is never cut off. */
.pcard-body{container-type:inline-size}
@container (max-width:230px){.pcard-buy{grid-template-columns:1fr;gap:6px}.pcard-buy .ui-stepper{width:100%}.pcard-buy .ui-stepper input{flex:1}}
.pcard-add{min-width:0;padding-inline:12px;white-space:nowrap;box-shadow:0 10px 22px -12px rgb(2 158 218 / .7)}
.pcard-add:disabled{box-shadow:none}
.pcard-now{grid-column:1 / -1;min-height:40px;font-size:14px}
.pcard-add.is-added{--btn-bg:var(--ui-success);--btn-hover:var(--ui-success)}
.ui-stepper{display:inline-flex;align-items:center;justify-content:space-between;flex-shrink:0;border-radius:var(--ui-pill);background:var(--ui-surface-2)}
.ui-stepper button{display:grid;place-items:center;width:34px;height:44px;padding:0;border:0;border-radius:var(--ui-pill);background:transparent;color:var(--ui-ink);cursor:pointer}
.ui-stepper button:hover:not(:disabled){background:var(--ui-surface-3)}
.ui-stepper button:disabled{opacity:.4;cursor:not-allowed}
.ui-stepper input{width:32px;min-height:44px;padding:0;border:0;background:transparent;color:var(--ui-ink);font:800 15px/1 var(--ui-font);text-align:center;font-variant-numeric:tabular-nums;appearance:textfield;-moz-appearance:textfield}
.ui-stepper input::-webkit-outer-spin-button,.ui-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ui-stepper input:focus-visible{outline:2px solid var(--ui-brand);outline-offset:-2px;border-radius:8px}
.ui-stepper--lg button{width:46px;height:52px}
.ui-stepper--lg input{width:44px;min-height:52px;font-size:17px}
/* The bag that flies to the cart after «أضف للسلة» (ui.js). */
.fly-to-cart{position:fixed;z-index:80;pointer-events:none;object-fit:contain;mix-blend-mode:multiply}
.site-cart.is-bumped,[data-cart-link].is-bumped{animation:cart-bump .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes cart-bump{0%,100%{transform:none}40%{transform:scale(1.14)}}
@media (prefers-reduced-motion:reduce){.pcard,.pcard-photo,.pcard-art,.pcard-floor{transition:none;animation:none}.pcard:hover,.pcard:hover .pcard-photo,.pcard:hover .pcard-art,.pcard:hover .pcard-floor,.pcard:has(.pcard-title a:focus-visible) .pcard-photo,.pcard:has(.pcard-title a:focus-visible) .pcard-art,.pcard:has(.pcard-title a:focus-visible) .pcard-floor,.pcard.is-scroll-active,.pcard.is-scroll-active .pcard-photo,.pcard.is-scroll-active .pcard-art,.pcard.is-scroll-active .pcard-floor{translate:none;transform:none;opacity:1}}
@media (max-width:560px){
  .pgrid{grid-template-columns:1fr 1fr;gap:18px 10px}
  .pcard{border-radius:22px}
  .pcard-media{margin:8px 8px 0}
  .pcard-stage{border-radius:16px}
  .pcard-tags{top:7px;left:7px;right:7px;--weight-room:62px}
  .pcard-weight,.pcard-flag{padding:3px 8px;font-size:11px}
  /* On phones the badge drops its icon and may break onto two short lines rather than reach the weight. */
  .pcard-tags .pcard-flag svg{display:none}
  .pcard-tags .pcard-flag{padding:3px 7px}
  .pcard-body{gap:2px;padding:10px 10px 12px}
  .pcard-title{font-size:14px}
  .pcard-price strong{font-size:19px}
  .pcard-unit{font-size:11px}
  /* A phone bundle uses the same grid cell, photo ratio and controls as a normal pack. Its complete, unabridged
     contents are one tap away rather than squeezed into the narrow card. */
  .pcard--bundle .pcard-media{display:block;flex:0 0 auto}
  .pcard--bundle .pcard-stage{aspect-ratio:1 / .86}
  .pcard--bundle .pcard-body{flex:1}
  .pcard--bundle .pcard-contains,body.ui .pcard--bundle .bundle-components,.pcard--bundle .pcard-more{display:none}
  .pcard-bundle-details{display:flex}
  .pcard-contains{font-size:11.5px}
  body.ui .pcard .bundle-components{gap:4px;font-size:12px}
  body.ui .pcard .component-title{white-space:normal}
  .pcard-stock{font-size:11.5px}
  .pcard-buy{grid-template-columns:1fr;gap:6px;padding-top:10px}
  .pcard-buy .ui-stepper{width:100%}
  .pcard-buy .ui-stepper button{width:40px;height:38px}
  .pcard-buy .ui-stepper input{flex:1;min-height:38px}
  .pcard-add{min-height:42px;padding-inline:8px;font-size:14px}
  .pcard-now{min-height:38px;font-size:13.5px}
}

/* ---------- Bundle card ---------- */

/* ---------- Product page ---------- */
.pdp-wrap{padding-block:clamp(16px,3vw,28px) clamp(24px,4vw,48px)}
.pdp-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:18px;color:var(--ui-muted);font-size:13px;font-weight:700}
.pdp-crumbs a{color:var(--ui-brand-strong);text-decoration:none}
.pdp-crumbs a:hover{text-decoration:underline}
.pdp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:start;gap:clamp(20px,4vw,48px)}
.pdp-media{position:sticky;top:110px;padding:14px;border-radius:var(--ui-radius-xl);background:var(--ui-surface);box-shadow:var(--ui-shadow-1)}
.pdp-media .pack-art{border-radius:16px}
.pdp-media .pcard-flag{position:absolute;top:26px;inset-inline-start:26px;z-index:1}
.pdp-info{display:grid;gap:12px;align-content:start;min-width:0}
.pdp-info h1{margin:0;font-size:clamp(26px,3.4vw,38px);font-weight:800;line-height:1.25}
.pdp-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px}
.pdp-price strong{font-size:clamp(28px,3.2vw,36px);font-weight:800}
.pdp-price strong small{margin-inline-start:4px;font-size:15px;color:var(--ui-muted)}
.pdp-price del{color:var(--ui-faint);font-size:17px}
.pdp-note{margin:-6px 0 0;color:var(--ui-muted);font-size:13.5px}
/* A shrink's product page states its contents in a larger line under the price. */
.pdp-shrink{justify-self:start;margin:0;padding:8px 14px;font-size:14.5px}
.pdp-shrink .pcard-shrink-count{font-size:17px}
.pdp-stock{justify-self:start}
.pdp-sizes p{margin:0 0 8px;font-size:14px;font-weight:800}
.pdp-tiers{padding:14px 16px;border-radius:var(--ui-radius-md);background:var(--ui-brand-soft)}
.pdp-tiers strong{color:var(--ui-brand-strong);font-size:14px}
.pdp-tiers ul{display:grid;gap:4px;margin:8px 0 0;padding:0;list-style:none;font-size:14px}
.pdp-tiers li{display:flex;justify-content:space-between;gap:10px}
/* Bundle page: every pack inside, its quantity first, a link to the pack's own page and what it costs alone. */
.bundle-contents{padding:14px 16px;border-radius:var(--ui-radius-md);background:var(--ui-surface);box-shadow:var(--ui-shadow-1)}
.bundle-contents h2{margin:0 0 8px;font-size:15px;font-weight:800}
.bundle-contents ul{display:grid;gap:0;margin:0;padding:0;list-style:none}
.bundle-contents li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-height:44px;padding:6px 0;border-bottom:1px solid var(--ui-line);font-size:14px;line-height:1.6}
.bundle-contents li:last-child{border-bottom:0}
.bundle-contents .component-qty{flex-shrink:0;padding:2px 9px;border-radius:var(--ui-pill);background:var(--ui-brand-soft);color:var(--ui-brand-strong);font-size:12.5px;font-weight:800}
.bundle-contents a{flex:1 1 140px;min-width:0;color:var(--ui-ink);font-weight:700}
.bundle-contents a:hover{color:var(--ui-brand-strong)}
.bundle-contents li > bdi:not(.component-qty){flex:1 1 140px;min-width:0;font-weight:700}
.bundle-contents .ui-money{margin-inline-start:auto;color:var(--ui-muted);font-size:13px;font-weight:700;white-space:nowrap}
.bundle-contents .ui-money small{margin-inline-start:3px;font-size:11px}
.pdp-buy{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.pdp-add{flex:1 1 200px}
.pdp-now{flex:1 1 140px}
.pdp-trust{display:grid;gap:8px;margin:6px 0 0;padding:14px 16px;border-radius:var(--ui-radius-md);background:var(--ui-surface);box-shadow:var(--ui-shadow-1);list-style:none;font-size:14px}
.pdp-trust li{display:flex;align-items:flex-start;gap:10px;line-height:1.6}
.pdp-trust .ui-icon{margin-top:2px;flex-shrink:0;color:var(--ui-brand)}
.pdp-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0}
.pdp-facts div{padding:12px 14px;border-radius:var(--ui-radius-md);background:var(--ui-surface-2)}
.pdp-facts dt{color:var(--ui-muted);font-size:12px;font-weight:700}
.pdp-facts dd{margin:2px 0 0;font-size:14px;font-weight:700;line-height:1.6}
.pdp-description{margin:0;color:var(--ui-ink-2);line-height:1.9}
.pdp-related{margin-top:clamp(32px,5vw,56px)}
.pdp-related .ui-title{margin:0 0 16px;font-size:clamp(22px,2.6vw,28px)}
.pdp-bar{display:none}
@media (max-width:860px){
  .pdp{grid-template-columns:1fr}
  .pdp-media{position:relative;top:auto;width:100%;max-width:440px;justify-self:center}
}
@media (max-width:640px){
  .pdp-media{max-width:320px;padding:10px}
  .pdp-bar{position:fixed;inset-inline:0;bottom:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgb(255 255 255 / .97);box-shadow:0 -1px 0 var(--ui-line),0 -10px 30px -12px rgb(18 62 87 / .25);backdrop-filter:blur(12px)}
  .pdp-bar-price{display:grid;line-height:1.25}
  .pdp-bar-price strong{font-size:20px;font-weight:800}
  .pdp-bar-price strong small{margin-inline-start:3px;font-size:12px;color:var(--ui-muted)}
  .pdp-bar-price > small{color:var(--ui-muted);font-size:12px}
  .pdp-bar-actions{display:flex;flex:1;justify-content:flex-end;gap:8px;min-width:0}
  .pdp-bar .ui-btn{flex:1 1 0;min-width:0;max-width:200px;padding-inline:10px;font-size:14.5px}
  body:has(.pdp-bar) .site-footer{padding-bottom:150px}
  /* The offers button sits just above the bar instead of disappearing behind it. */
  body:has(.pdp-bar) .wa-float{bottom:calc(84px + env(safe-area-inset-bottom))}

}

/* ---------- Side cart ---------- */
.cart-drawer{position:fixed;inset-block:0;inset-inline-start:auto;inset-inline-end:0;width:min(420px,100vw);max-width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:0;border:0;background:var(--ui-surface);color:var(--ui-ink);box-shadow:var(--ui-shadow-3)}
.cart-drawer[open]{display:flex;flex-direction:column}
.cart-drawer::backdrop{background:rgb(18 62 87 / .4)}
.cart-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid var(--ui-line)}
.cart-drawer-head h2{display:flex;align-items:center;gap:8px;margin:0;font-size:18px;font-weight:800}
.cart-drawer-note{display:flex;align-items:center;gap:8px;margin:0;padding:10px 18px;background:var(--ui-success-soft);color:var(--ui-success);font-size:14px;font-weight:700}
.cart-drawer-body{display:flex;flex:1;flex-direction:column;min-height:0}
.cart-drawer-list{display:grid;flex:1;align-content:start;gap:14px;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 18px}
.cart-drawer-foot{display:grid;gap:8px;padding:14px 18px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--ui-line)}
.drawer-lines{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.drawer-lines li{display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:12px}
.drawer-thumb{position:relative;display:grid;place-items:center;width:56px;height:56px;overflow:hidden;border-radius:14px;background:var(--ui-surface-2);color:var(--ui-brand)}
.drawer-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:1px}
.drawer-thumb svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.drawer-line-text{display:grid;min-width:0}
.drawer-line-text strong{font-size:14px;font-weight:800;line-height:1.4}
.drawer-line-text small{color:var(--ui-muted);font-size:12.5px}
.drawer-sum{padding-top:10px;border-top:1px solid var(--ui-line)}
.drawer-empty{padding-block:40px}
.cart-drawer .ui-total > span small{display:block;margin-top:2px;color:var(--ui-muted);font-size:12px;font-weight:600}

/* Minimum order (EGP 800): what counts towards it and what is still missing. */
.order-minimum{display:grid;gap:8px;margin-top:16px;padding:14px 16px;border-radius:var(--ui-radius-md);background:var(--ui-warning-soft)}
.order-minimum.is-met{background:var(--ui-success-soft)}
.order-minimum-head{display:flex;align-items:center;gap:8px;font-size:14px}
.order-minimum-head .ui-icon{color:var(--ui-warning);flex:none}
.order-minimum.is-met .order-minimum-head .ui-icon{color:var(--ui-success)}
.order-minimum .ui-lines{margin:0}
.order-minimum-meter{width:100%;height:8px}
.order-minimum-note{color:var(--ui-ink-2);font-size:12.5px;line-height:1.6}
.cart-minimum-hint{margin-top:8px;color:var(--ui-ink-2);font-size:13px;line-height:1.6}

/* Delivery area picker: a search box above the grouped list. */
.area-picker{display:grid;gap:8px}
.area-picker-empty{color:var(--ui-ink-2);font-size:13px}
.info-areas-title{margin-top:16px;font-size:14px;font-weight:800}