/* Ward Store — catalog (Claude Design v2): product card (Option 4), product grids/rows, shop / category / search / offers, filters. */
:root{--ward-build-catalog:"2.6.0"}   /* TEMPORARY delivery marker, read by the console check in functions.php */

/* ---------- Grids & rows ---------- */
.ward-grid,.woocommerce ul.products.ward-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(44%,190px),1fr));gap:28px clamp(12px,1.6vw,20px);list-style:none;margin:0;padding:0}
.ward-grid-home,.woocommerce ul.products.ward-grid-home{grid-template-columns:repeat(auto-fill,minmax(min(44%,200px),1fr));gap:24px clamp(12px,1.6vw,20px)}
.ward-row{display:flex;gap:clamp(12px,1.6vw,20px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;list-style:none;margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter) 4px;scroll-padding-inline:var(--gutter)}
.ward-row::-webkit-scrollbar{display:none}
.ward-row > .ward-pcard{flex:1 0 min(41vw,210px);scroll-snap-align:start}
.woocommerce ul.products li.product.ward-pcard{float:none;width:auto;margin:0;padding:0;clear:none}

/* ---------- Product card · Option 4 "Conversion Premium" (ward_store_product_card(), inc/catalog.php) ----------
   The one card of the storefront: homepage sections, shop, categories, search, offers, wishlist, related products. */
.ward-pcard{position:relative;display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid var(--ward-line);border-radius:18px;overflow:hidden;transition:border-color .2s,box-shadow .3s,transform .3s}
.ward-pcard-media{position:relative;aspect-ratio:1/1;background:var(--ward-surface);overflow:hidden}
.ward-pcard-img{position:absolute;inset:0;display:block}
/* Whole product visible (v2.10.3): uncropped source file + contain inside the fixed square stage, centred; never cropped or
   distorted, enlarged at most 1.5× its source px (--ward-iw/--ward-ih from ward_store_pcard_img_attrs()). The stage takes the
   photo's own light edge colour (--ward-card-bg, ward_store_card_bg()) so built-in white / beige backgrounds have no visible
   box; transparent or busy edges keep --ward-surface. The WooCommerce selector beats its "li.product a img{height:auto}".
   The single-product gallery (product.css) is separate and unaffected. */
.ward-pcard-media{--pc-pad:7%;background-color:var(--ward-card-bg,var(--ward-surface));transition:background-color .35s ease}
.ward-pcard-img img,.woocommerce ul.products li.product .ward-pcard-img img{position:absolute;inset:var(--pc-pad);width:min(100% - 2 * var(--pc-pad),var(--ward-iw,9999px) * 1.5);height:min(100% - 2 * var(--pc-pad),var(--ward-ih,9999px) * 1.5);max-width:none;object-fit:contain;object-position:50% 50%;margin:auto;display:block;box-shadow:none;transition:opacity .35s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
@media (max-width:767px){ .ward-pcard-media{--pc-pad:5%} }
.ward-pcard-img .ward-pcard-img-alt{opacity:0}
.ward-pcard .ward-product-placeholder{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:8px;background:var(--ward-surface);color:#E7A3BB;text-align:center;padding:12px}
.ward-pcard .ward-product-placeholder span{font-size:11px;color:var(--ward-muted)}
@media (hover:hover){
  .ward-pcard:hover{border-color:#D5D5DA;box-shadow:0 18px 36px -18px rgba(17,17,20,.28)}
  .ward-pcard:hover .ward-pcard-img:has(.ward-pcard-img-alt) img:not(.ward-pcard-img-alt){opacity:0}
  .ward-pcard:hover .ward-pcard-img-alt{opacity:1}
  .ward-pcard:hover .ward-pcard-media:has(.ward-pcard-img-alt){background-color:var(--ward-card-bg2,var(--ward-surface))}
  .ward-pcard:hover .ward-pcard-img img:only-child{transform:scale(1.04)}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){ .ward-pcard:hover{transform:translateY(-2px)} }
.ward-pcard-badge{position:absolute;top:0;inset-inline-start:0;z-index:1;background:var(--ward-pink);color:#fff;font-size:12.5px;font-weight:800;line-height:1.3;padding:7px 12px 6px;border-end-end-radius:14px;white-space:nowrap}
.ward-pcard-wish{position:absolute;top:10px;inset-inline-end:10px;z-index:2;width:36px;height:36px;border-radius:50%;border:0;background:#fff;color:var(--ward-ink);display:grid;place-items:center;box-shadow:var(--shadow-1);cursor:pointer;padding:0;transition:color .15s,transform .15s}
.ward-pcard-wish::before{content:"";position:absolute;inset:-4px}   /* 44px hit area */
.ward-pcard-wish:hover,.ward-pcard-wish[aria-pressed="true"]{color:var(--ward-pink)}
.ward-pcard-wish[aria-pressed="true"] .ward-i{fill:currentColor}
.ward-pcard-wish:active{transform:scale(.92)}
.ward-pcard-out{position:absolute;inset-inline:0;bottom:0;z-index:1;background:rgba(17,17,20,.84);color:#fff;text-align:center;font-size:13px;font-weight:700;padding:8px}
.ward-pcard.is-out .ward-pcard-img{background-color:inherit;filter:grayscale(.9);opacity:.7}   /* whole stage dims: no box around photos with their own background */

.ward-pcard-body{display:flex;flex-direction:column;gap:6px;padding:12px 14px 14px;flex:1}
.ward-pcard-rate{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--ward-muted);line-height:1.2}
.ward-pcard-rate b{color:var(--ward-ink);font-weight:700}
.ward-pcard-stars{display:inline-block;font-size:13px;letter-spacing:1px;line-height:1;color:transparent;background:linear-gradient(90deg,#E08A00 calc(var(--r) * 20%),#D6D6DB 0);-webkit-background-clip:text;background-clip:text}
[dir="rtl"] .ward-pcard-stars{background-image:linear-gradient(270deg,#E08A00 calc(var(--r) * 20%),#D6D6DB 0)}
.ward-pcard-title{margin:0;font-size:14.5px;font-weight:600;line-height:1.45;min-height:2.9em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-wrap:pretty}
.ward-pcard-title a{color:var(--ward-ink)}
.ward-pcard-title a:hover{color:var(--ward-pink)}
.ward-pcard-price{display:flex;align-items:baseline;gap:4px 8px;flex-wrap:wrap;font-variant-numeric:tabular-nums}
.ward-pcard-now{font-size:19px;font-weight:800;line-height:1.3;color:var(--ward-ink)}
.ward-pcard.is-sale .ward-pcard-now{color:var(--ward-pink)}
.ward-pcard-now .ward-card-from{font-size:12px;font-weight:500;color:var(--ward-muted)}
.ward-pcard-price del{font-size:13px;line-height:1.2}
.ward-pcard-save{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;font-size:12px;font-weight:700;color:var(--ward-success)}
.ward-pcard-save .woocommerce-Price-amount{font-weight:700}
.ward-pcard-stock{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:700;color:var(--ward-warning-ink)}
.ward-pcard-bar{height:5px;border-radius:9px;background:#F3E7D3;overflow:hidden}
.ward-pcard-bar i{display:block;height:100%;background:var(--ward-warning);border-radius:inherit}

/* Add to cart */
.ward-pcard-cta{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 12px;border-radius:12px;background:var(--ward-ink);color:#fff;font-size:14px;font-weight:800;line-height:1.2;text-align:center;transition:background-color .2s,box-shadow .2s,transform .1s}
.ward-pcard-cta:hover{background:var(--ward-pink);color:#fff}
.ward-pcard-cta:active{transform:scale(.98)}
.ward-pcard-cta>span{display:inline-flex;align-items:center;gap:8px}
.ward-pcard-cta .ward-pcard-cta-done{display:none}
.ward-pcard-cta.added{background:var(--ward-pink)}
.ward-pcard-cta.added .ward-pcard-cta-go{display:none}
.ward-pcard-cta.added .ward-pcard-cta-done{display:inline-flex}
.ward-pcard-cta.loading{opacity:.6;pointer-events:none}
.ward-pcard-cta.is-notify,.ward-pcard-cta.is-options{background:#fff;color:var(--ward-ink);box-shadow:inset 0 0 0 1.5px var(--ward-line)}
.ward-pcard-cta.is-notify:hover,.ward-pcard-cta.is-options:hover{background:#fff;color:var(--ward-ink);box-shadow:inset 0 0 0 1.5px var(--ward-ink)}
.ward-pcard .added_to_cart{display:none!important}   /* confirmation = "Added" state + header count + live region */
.ward-pcard-title a:focus-visible,.ward-pcard-cta:focus-visible,.ward-pcard-wish:focus-visible{outline:2px solid var(--ward-pink);outline-offset:2px}
@media (prefers-reduced-motion:reduce){ .ward-pcard,.ward-pcard-img img{transition:none} }
/* Phones: shop / category grids, Picked for you and the homepage rails share one compact card body, so title, price and
   button stay on one line each and every homepage section looks the same */
@media (max-width:767px){
  :is(.ward-grid,.ward-hp-grid,.ward-hp-row) .ward-pcard-body{padding:10px 10px 12px;gap:5px}
  :is(.ward-grid,.ward-hp-grid,.ward-hp-row) .ward-pcard-title{font-size:13.5px}
  :is(.ward-grid,.ward-hp-grid,.ward-hp-row) .ward-pcard-now{font-size:16px}
  :is(.ward-grid,.ward-hp-grid,.ward-hp-row) .ward-pcard-cta{min-height:42px;font-size:13px;gap:6px;padding:0 8px}
  :is(.ward-grid,.ward-hp-grid,.ward-hp-row) .ward-pcard-stars{font-size:11px}
  :is(.ward-grid,.ward-hp-grid,.ward-hp-row) .ward-pcard-rate{font-size:12px}
  :is(.ward-grid,.ward-hp-grid,.ward-hp-row) .ward-pcard-wish{top:8px;inset-inline-end:8px;width:34px;height:34px}
  .ward-pcard-badge{font-size:11.5px;padding:6px 10px 5px}
}

/* ---------- Archive layout ---------- */
.ward-archive{padding-bottom:clamp(40px,5vw,64px)}
.ward-crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:6px;list-style:none;margin:0;padding:16px 0;font-size:13px;color:var(--ward-muted)}
.ward-crumbs a{color:var(--ward-muted)}
.ward-crumbs a:hover{color:var(--ward-pink)}
.ward-crumbs [aria-current]{color:var(--ward-ink)}
.ward-crumb-sep{display:grid}
.ward-archive-head{display:flex;flex-direction:column;gap:6px;padding-bottom:18px}
.ward-archive-head h1{margin:0;font-size:clamp(24px,2.5vw,32px);display:flex;align-items:center;gap:10px}
.ward-archive-head p{margin:0;font-size:15px;color:var(--ward-ink-2)}
.ward-offers-icon{color:var(--ward-pink)}
.ward-cat-banner{border-radius:var(--r-lg);background:var(--ward-tint);padding:clamp(18px,2.6vw,32px);display:flex;align-items:center;gap:clamp(14px,2vw,24px);margin-bottom:20px}
.ward-cat-banner-icon{width:clamp(60px,6.3vw,80px);height:clamp(60px,6.3vw,80px);border-radius:var(--r-tile);background:#fff;color:var(--ward-pink);display:grid;place-items:center;flex:none}
.ward-cat-banner-text{display:flex;flex-direction:column;gap:6px;min-width:0}
.ward-cat-banner-title{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.ward-cat-banner-title h1{margin:0;font-size:clamp(22px,2.5vw,32px)}
.ward-cat-banner-title span{font-size:14px;color:var(--ward-muted)}
.ward-cat-banner p{margin:0;font-size:14px;line-height:1.7;color:var(--ward-ink-2);max-width:620px}
.ward-search-head{gap:14px}
.ward-search-big{height:54px;max-width:640px;border:1.5px solid var(--ward-ink);border-radius:14px;display:flex;align-items:center;gap:10px;padding-inline:16px 6px}
.ward-search-big input[type=search]{flex:1;min-width:0;border:0;outline:0;background:none;font-size:16px;font-weight:500;-webkit-appearance:none;appearance:none}
.ward-search-big input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}
.ward-search-clear{width:36px;height:36px;border:0;background:none;color:var(--ward-muted);display:grid;place-items:center;cursor:pointer;padding:0}
.ward-search-big .ward-search-submit{height:42px;border-radius:var(--r-sm)}
.ward-search-head h1{font-size:clamp(22px,2.3vw,30px)}

.ward-chips{display:flex;align-items:center;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter) 20px}
.ward-chips::-webkit-scrollbar{display:none}
/* v3.1.4 mobile swipe: on phones a finger swipe moves only the row (never chains into the page or the browser's back /
   forward gesture), and the chips / product cards settle gently at the start edge. Sizes and spacing unchanged. */
@media (max-width:767px){
  .ward-chips{scroll-snap-type:x proximity;scroll-padding-inline:var(--gutter);overscroll-behavior-x:contain}
  .ward-chips > *{scroll-snap-align:start}
  .ward-row{overscroll-behavior-x:contain}
}
.ward-chips-label{font-size:13px;color:var(--ward-muted);white-space:nowrap;padding-inline-end:4px}
.ward-chip-f{height:38px;padding:0 16px;border-radius:var(--r-pill);border:1px solid var(--ward-line);background:#fff;color:var(--ward-ink);font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;flex:none}
.ward-chip-f:hover{border-color:var(--ward-ink);color:var(--ward-ink)}
.ward-chip-f.is-active{background:var(--ward-ink);border-color:var(--ward-ink);color:#fff;padding-inline-start:12px}

.ward-archive-body{display:flex;gap:32px;align-items:flex-start}
.ward-results{flex:1;min-width:0;display:flex;flex-direction:column;gap:18px}
.ward-toolbar{display:flex;align-items:center;gap:10px}
.ward-result-count{margin:0;flex:1;font-size:14px;color:var(--ward-ink-2)}
.ward-filter-btn{height:40px;padding:0 14px;border-radius:var(--r-sm);border:1.5px solid var(--ward-line);background:#fff;font-size:14px;font-weight:700;display:inline-flex;align-items:center;gap:8px;cursor:pointer;color:var(--ward-ink)}
.ward-filter-n{min-width:18px;height:18px;padding:0 4px;border-radius:var(--r-pill);background:var(--ward-pink);color:#fff;font-size:11px;display:grid;place-items:center}
.ward-sort{position:relative;height:40px;border-radius:var(--r-sm);border:1.5px solid var(--ward-line);display:inline-flex;align-items:center;gap:6px;padding-inline:14px 34px;font-size:14px}
.ward-sort:focus-within{border-color:var(--ward-ink)}
.ward-sort-label{color:var(--ward-muted)}
.ward-sort select{border:0;background:none;font-weight:700;font-size:14px;-webkit-appearance:none;appearance:none;cursor:pointer;outline:0;padding:0;max-width:170px}
.ward-sort-chev{position:absolute;inset-inline-end:12px;pointer-events:none}
/* Small phones: result count on its own line, Filter + Sort share the next one (long English sort names overflowed at 320px) */
@media (max-width:419.98px){
  .ward-toolbar{flex-wrap:wrap;row-gap:8px}
  .ward-result-count{flex:1 0 100%}
  .ward-sort{flex:1;min-width:0}
  .ward-sort select{width:100%;max-width:none;text-overflow:ellipsis}
}

/* ---------- Filters (v2.9.0): desktop sidebar ≥1024px · filter sheet below (bottom sheet on phones, side drawer on tablets) ---------- */
.ward-filters-form{display:flex;flex-direction:column;margin:0}
.ward-filters-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-bottom:14px;border-bottom:1px solid var(--ward-line)}
.ward-filters-head h2{margin:0;font-size:17px;font-weight:800}
.ward-filters-clear{font-size:13px;font-weight:700;color:var(--ward-pink);padding:4px 0}
.ward-filters-clear:hover{color:var(--ward-pink-2);text-decoration:underline}
.ward-fgroup{border:0;margin:0;padding:18px 0;border-bottom:1px solid var(--ward-line);display:flex;flex-direction:column;gap:12px;min-width:0}
.ward-fgroup legend,.ward-fgroup-title{float:left;width:100%;padding:0;margin:0 0 12px;font-size:15px;font-weight:800;line-height:1.4}
.ward-fgroup-title{float:none;margin:0}
.ward-fgroup legend + *{clear:both}
.ward-fcur{font-weight:500;color:var(--ward-muted);font-size:13px}

/* Category list: one selectable row per category, sub-categories behind a disclosure button */
.ward-fcat{gap:10px}
.ward-fcat-search{position:relative;display:flex;align-items:center;height:42px;border:1.5px solid var(--ward-line);border-radius:var(--r-sm);background:#fff;padding-inline:12px 4px;gap:8px;color:var(--ward-muted)}
.ward-fcat-search:focus-within{border-color:var(--ward-ink);color:var(--ward-ink)}
.ward-fcat-search input{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;font:inherit;font-size:14px;color:var(--ward-ink);-webkit-appearance:none;appearance:none}
.ward-fcat-search input::-webkit-search-cancel-button{-webkit-appearance:none}
.ward-fcat-search input::placeholder{color:var(--ward-subtle)}
.ward-fcat-search-clear{width:34px;height:34px;border:0;border-radius:8px;background:none;color:var(--ward-muted);display:grid;place-items:center;cursor:pointer;padding:0}
.ward-fcat-search-clear[hidden]{display:none}
.ward-fcat-search-clear:hover{background:var(--ward-surface);color:var(--ward-ink)}
.ward-fcat-list,.ward-fcat-sub{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.ward-fcat-node[hidden],.ward-fcat-sub[hidden]{display:none}
.ward-fcat.is-enhanced:not(.is-all):not(.is-searching) .is-extra{display:none}
.ward-fcat-line{display:flex;align-items:center;gap:2px}
.ward-fcat-row{flex:1;min-width:0;min-height:40px;display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:var(--r-sm);color:var(--ward-ink);font-size:14px;line-height:1.35;transition:background-color .15s}
.ward-fcat-row:hover{background:var(--ward-surface-2);color:var(--ward-ink)}
.ward-fcat-row:focus-visible,.ward-fcat-toggle:focus-visible,.ward-fcat-more:focus-visible,.ward-active-pill:focus-visible,.ward-chip-f:focus-visible{outline:2px solid var(--ward-ink);outline-offset:-2px}
.ward-fcat-mark{flex:none;width:18px;height:18px;border-radius:50%;border:1.5px solid #C9CBD0;color:#fff;display:grid;place-items:center}
.ward-fcat-mark .ward-i{opacity:0}
.ward-fcat-name{flex:1;min-width:0;overflow-wrap:anywhere}
.ward-fcat-count{flex:none;min-width:26px;padding:1px 7px;border-radius:var(--r-pill);background:var(--ward-surface);color:var(--ward-muted);font-size:12px;font-weight:700;text-align:center;font-variant-numeric:tabular-nums}
/* selected: tinted row + check badge + bold text + aria-current (not colour alone) */
.ward-fcat-row.is-on{background:var(--ward-tint);font-weight:800}
.ward-fcat-row.is-on .ward-fcat-mark{background:var(--ward-ink);border-color:var(--ward-ink)}
.ward-fcat-row.is-on .ward-fcat-mark .ward-i{opacity:1}
.ward-fcat-row:hover .ward-fcat-mark{border-color:var(--ward-ink)}
.ward-fcat-row.is-on .ward-fcat-count{background:#fff;color:var(--ward-ink)}
.ward-fcat-row.is-path{font-weight:800}
.ward-fcat-row.is-path .ward-fcat-mark{border-color:var(--ward-ink);box-shadow:inset 0 0 0 3px #fff;background:var(--ward-ink)}
.ward-fcat-toggle{flex:none;width:36px;height:36px;border:0;border-radius:var(--r-sm);background:none;color:var(--ward-muted);display:grid;place-items:center;cursor:pointer;padding:0}
.ward-fcat-toggle:hover{background:var(--ward-surface-2);color:var(--ward-ink)}
.ward-fcat-toggle .ward-i{transition:transform .2s}
.ward-fcat-toggle[aria-expanded="true"] .ward-i{transform:rotate(180deg)}
.ward-fcat-sub{margin-inline-start:19px;padding-inline-start:8px;border-inline-start:1.5px solid var(--ward-line-2);margin-block:2px 4px}
.ward-fcat-sub .ward-fcat-row{min-height:36px;font-size:13.5px;padding-block:6px}
.ward-fcat-more{align-self:flex-start;min-height:40px;border:0;background:none;padding:0 10px;font:inherit;font-size:14px;font-weight:700;color:var(--ward-ink);display:inline-flex;align-items:center;gap:6px;cursor:pointer;border-radius:var(--r-sm)}
.ward-fcat-more:hover{background:var(--ward-surface-2)}
.ward-fcat-more .ward-i{transition:transform .2s}
.ward-fcat-more[aria-expanded="true"] .ward-i{transform:rotate(180deg)}
.ward-fcat.is-searching .ward-fcat-more{display:none}
.ward-fcat-none{margin:0;padding:8px 10px;font-size:13px;color:var(--ward-muted)}

.ward-check-link,.ward-check{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ward-ink);cursor:pointer;min-height:24px;position:relative}
.ward-check input{position:absolute;opacity:0;width:20px;height:20px;margin:0;inset-inline-start:0;cursor:pointer}
.ward-box{width:20px;height:20px;border-radius:var(--r-xs);border:1.5px solid #B9BBC0;background:#fff;color:#fff;display:grid;place-items:center;flex:none}
.ward-box .ward-i{opacity:0}
.ward-check input:checked + .ward-box{background:var(--ward-ink);border-color:var(--ward-ink)}
.ward-check input:checked + .ward-box .ward-i{opacity:1}
.ward-check input:focus-visible + .ward-box{outline:2px solid var(--ward-ink);outline-offset:2px}
.ward-check:hover .ward-box{border-color:var(--ward-ink)}
.ward-stars{color:#F2A516}
.ward-range{position:relative;height:20px;margin:0 8px}
.ward-range::before{content:"";position:absolute;inset-inline:0;top:8px;height:4px;border-radius:2px;background:var(--ward-line)}
.ward-range-fill{position:absolute;top:8px;height:4px;border-radius:2px;background:var(--ward-ink)}
.ward-range input[type=range]{position:absolute;inset:0;width:100%;margin:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none;height:20px}
.ward-range input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;pointer-events:auto;width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid var(--ward-ink);cursor:pointer}
.ward-range input[type=range]::-moz-range-thumb{pointer-events:auto;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--ward-ink);cursor:pointer}
.ward-range input[type=range]::-moz-range-track{background:none}
.ward-range input[type=range]::-webkit-slider-runnable-track{background:none}
.ward-price-inputs{display:flex;align-items:center;gap:8px}
.ward-price-inputs label{flex:1;min-width:0;height:44px;border:1.5px solid var(--ward-line);border-radius:var(--r-sm);display:flex;align-items:center;gap:6px;padding:0 10px;font-size:13px;color:var(--ward-muted)}
.ward-price-inputs label:focus-within{border-color:var(--ward-ink)}
.ward-price-inputs input{flex:1;min-width:0;border:0;outline:0;background:none;font-size:16px;font-weight:700;color:var(--ward-ink);text-align:end;-moz-appearance:textfield}
.ward-price-inputs input::-webkit-inner-spin-button,.ward-price-inputs input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.ward-price-dash{color:var(--ward-subtle)}
.ward-filters-foot{display:flex;gap:10px;padding-top:16px}
.ward-filters-foot .ward-btn-dark{flex:1}
.ward-filters-close{display:none}
.ward-js .ward-filters-foot{display:none}   /* desktop applies instantly; the footer returns inside the filter sheet */

@media (min-width:1024px){
  /* No inner scrollbar: the sidebar is as tall as its content (the long category list is shortened by "Show all") */
  .ward-filters{width:264px;flex:none}
  .ward-filter-btn{display:none}
  .ward-filter-backdrop{display:none!important}
}
@media (max-width:1023.98px){
  .ward-sort-label{display:none}
  .ward-filters{position:fixed;z-index:170;background:#fff;box-shadow:var(--shadow-3);visibility:hidden;display:flex;flex-direction:column;overscroll-behavior:contain}
  .ward-filters.is-open{visibility:visible}
  .ward-filters-form{min-height:0;flex:1}
  .ward-filters-head{padding:8px 8px 8px 16px;padding-inline:16px 8px;border-bottom-color:var(--ward-line-2);flex:none}
  .ward-filters-head h2{flex:1}
  .ward-filters-head .ward-filters-clear{display:none}   /* the sheet footer has "Clear all" */
  .ward-filters-close{display:inline-grid}
  .ward-filters-scroll{overflow-y:auto;overscroll-behavior:contain;padding:0 16px;flex:1;min-height:0}
  .ward-fgroup{border-bottom-color:var(--ward-line-2)}
  .ward-js .ward-filters-foot,.ward-filters-foot{display:flex;flex:none;padding:12px 16px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--ward-line-2);background:#fff}
  .ward-filters-foot .ward-btn{min-height:50px}
  .ward-filters-foot .ward-btn-outline{flex:0 1 auto;padding-inline:18px}
  /* touch sizes */
  .ward-fcat-row{min-height:48px;font-size:15px;padding-inline:12px}
  .ward-fcat-sub .ward-fcat-row{min-height:44px;font-size:14.5px}
  .ward-fcat-toggle{width:44px;height:44px}
  .ward-fcat-search{height:46px}
  .ward-fcat-search input{font-size:16px}   /* no iOS zoom on focus */
  .ward-fcat-more{min-height:44px}
  .ward-check{min-height:40px}
  .ward-filter-backdrop{position:fixed;inset:0;z-index:165;background:rgba(17,17,20,.45)}
  body.ward-sheet-open{overflow:hidden}
  body.ward-sheet-open .ward-whatsapp,body.ward-sheet-open .ward-tabbar{visibility:hidden}
}
/* Phones: bottom sheet */
@media (max-width:639.98px){
  .ward-filters{inset-inline:0;bottom:0;max-height:92dvh;height:92dvh;border-radius:20px 20px 0 0;transform:translateY(105%);transition:transform .28s cubic-bezier(.2,.8,.2,1),visibility 0s linear .28s}
  .ward-filters.is-open{transform:none;transition:transform .28s cubic-bezier(.2,.8,.2,1)}
  .ward-filters-head::before{content:"";position:absolute;top:6px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:var(--ward-line)}
  .ward-filters-head{position:relative;padding-top:14px}
}
/* Tablets: side drawer from the reading-start edge (right in Arabic, left in English) */
@media (min-width:640px) and (max-width:1023.98px){
  .ward-filters{top:0;bottom:0;inset-inline-start:0;width:min(420px,86vw);transform:translateX(-105%);transition:transform .28s cubic-bezier(.2,.8,.2,1),visibility 0s linear .28s}
  [dir="rtl"] .ward-filters{transform:translateX(105%)}
  .ward-filters.is-open,[dir="rtl"] .ward-filters.is-open{transform:none;transition:transform .28s cubic-bezier(.2,.8,.2,1)}
}
@media (prefers-reduced-motion:reduce){ .ward-filters,.ward-filters.is-open{transition:none} .ward-fcat-toggle .ward-i,.ward-fcat-more .ward-i{transition:none} }

/* ---------- Active filters, loading, errors ---------- */
.ward-active{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:-6px}
.ward-active[hidden]{display:none}
.ward-active-label{font-size:13px;color:var(--ward-muted)}
.ward-active-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ward-active-pill{min-height:34px;display:inline-flex;align-items:center;gap:6px;padding:0 8px 0 12px;padding-inline:12px 8px;border-radius:var(--r-pill);background:var(--ward-surface);color:var(--ward-ink);font-size:13px;font-weight:700}
.ward-active-pill:hover{background:var(--ward-line-2);color:var(--ward-ink)}
.ward-active-x{width:20px;height:20px;border-radius:50%;background:#fff;display:grid;place-items:center}
.ward-active-clear{font-size:13px;font-weight:700;color:var(--ward-pink);padding:6px 4px}
.ward-loadbar{height:3px;border-radius:2px;margin-top:-12px;overflow:hidden;position:relative;visibility:hidden}
.ward-results.is-loading .ward-loadbar{visibility:visible}
.ward-loadbar::after{content:"";position:absolute;inset-block:0;width:35%;border-radius:2px;background:var(--ward-pink);animation:ward-loadbar 1s ease-in-out infinite}
@keyframes ward-loadbar{from{inset-inline-start:-35%}to{inset-inline-start:100%}}
.ward-results.is-loading .ward-results-body{opacity:.5;pointer-events:none;transition:opacity .15s}
.ward-results.is-loading .ward-pcard-media::after{content:"";position:absolute;inset:0;z-index:3;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.65) 50%,transparent 70%) 0 0/250% 100%;animation:ward-shimmer 1.1s linear infinite}
@keyframes ward-shimmer{from{background-position:120% 0}to{background-position:-120% 0}}
@media (prefers-reduced-motion:reduce){ .ward-loadbar::after,.ward-results.is-loading .ward-pcard-media::after{animation:none} .ward-loadbar::after{inset-inline-start:0;width:100%;opacity:.5} }
.ward-ajax-error{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;border-radius:var(--r);background:var(--ward-error-bg);color:var(--ward-ink)}
.ward-ajax-error p{margin:0;flex:1 1 220px;font-size:14px}
.ward-ajax-error .ward-btn{min-height:38px;padding:0 14px;font-size:13px}
.ward-chip-f .ward-i{flex:none}
.ward-chip-n{font-size:12px;color:var(--ward-muted);font-weight:700}

/* ---------- Load more / empty / can't find ---------- */
.ward-loadmore{display:flex;flex-direction:column;align-items:center;gap:12px;padding-top:12px}
.ward-loadmore-text{margin:0;font-size:13px;color:var(--ward-muted)}
.ward-progress{width:200px;height:4px;border-radius:2px;background:var(--ward-line);overflow:hidden}
.ward-progress span{display:block;height:100%;background:var(--ward-ink);transition:width .3s}
.ward-loadmore .ward-btn{min-width:200px}
.ward-loadmore .ward-btn[aria-busy="true"]{opacity:.6;pointer-events:none}
.ward-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:40px 16px}
.ward-empty-icon{width:88px;height:88px;border-radius:50%;background:var(--ward-tint);color:var(--ward-pink);display:grid;place-items:center}
.ward-empty h2{margin:0;font-size:22px}
.ward-empty p{margin:0;font-size:15px;color:var(--ward-ink-2);max-width:420px;line-height:1.7}
.ward-empty-cats{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding-top:12px}
.ward-empty-cats .ward-i{color:var(--ward-pink)}
.ward-empty-ctx{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.ward-empty-ctx li{padding:4px 12px;border-radius:var(--r-pill);background:var(--ward-surface);font-size:13px;font-weight:700}
.ward-empty-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding-top:4px}
.ward-empty-actions:empty{display:none}
.ward-empty-sug-h{margin:12px 0 0;font-size:14px;font-weight:700;color:var(--ward-ink)}
.ward-empty .ward-empty-sug-h + .ward-empty-cats{padding-top:0}
.ward-cantfind{border-radius:16px;background:var(--ward-surface-3);padding:20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:12px}
.ward-cantfind-icon{width:48px;height:48px;border-radius:50%;background:var(--ward-whatsapp);color:#fff;display:grid;place-items:center;flex:none}
.ward-cantfind-text{flex:1 1 220px;display:flex;flex-direction:column;gap:2px}
.ward-cantfind-text b{font-size:16px}
.ward-cantfind-text span{font-size:14px;color:var(--ward-ink-2)}

/* ---------- Wishlist page ---------- */
.ward-wishlist{padding-bottom:clamp(40px,5vw,64px)}
.ward-wl-icon{color:var(--ward-pink)}
.ward-wl-count{font-size:15px;font-weight:500;color:var(--ward-muted)}
.ward-pcard-wl-remove{align-self:center;min-height:40px;border:0;background:none;color:var(--ward-muted);font:inherit;font-size:13px;display:inline-flex;align-items:center;gap:6px;cursor:pointer;padding:0 8px;margin-top:-2px}
.ward-pcard-wl-remove:hover{color:var(--ward-pink)}
.ward-pcard.is-leaving{opacity:0;transform:scale(.96)}
.ward-wishlist .ward-empty[hidden]{display:none}

/* ---------- Odd last card on 2-column phone grids ----------
   v3.1.5: the v2.12.1 rule that centred a lone last card in its own row is removed. A phone grid is a plain 2-column
   grid: an odd last card keeps its normal cell (the start column, right in Arabic / left in English) next to an empty
   slot, at the same width as every other card. */