/* ==========================================================================
   Lulla — UX polish layer (loaded last, overrides only what it names)
   ========================================================================== */
html{-webkit-tap-highlight-color:transparent}
:where(a,button,input,select,textarea,summary):focus-visible{outline:3px solid var(--pink);outline-offset:3px}

/* Header: quiet shadow once the page scrolls */
.site-header{transition:box-shadow .25s}
.site-header.is-scrolled{box-shadow:0 6px 24px oklch(.25 .03 250/.07)}
.cart-toggle.bump{animation:cart-bump .5s ease}
@keyframes cart-bump{0%,100%{transform:scale(1)}35%{transform:scale(1.22)}70%{transform:scale(.94)}}

/* Hero: one strong action, one quiet action */
.hero-actions{flex-direction:row!important;align-items:center!important;flex-wrap:wrap;gap:12px!important}
.hero-actions .btn{width:auto;min-height:52px;padding:0 30px;border-radius:999px}
.hero-actions .btn.secondary-cta{background:var(--surface);color:var(--pink-dark);border:1.5px solid var(--pink);box-shadow:none}
.hero-actions .btn.secondary-cta:hover{background:var(--pink-soft);color:var(--pink-dark);transform:none}
@media(max-width:640px){
  .hero-actions{justify-content:center}
  .hero-actions .btn{flex:1 1 140px;padding:0 18px}
}

/* Trust strip */
.trust-strip{padding-block:8px 28px;background:var(--bg)}
.trust-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.trust-item{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--surface);border:1px solid var(--border);border-radius:18px}
.trust-icon{flex:none;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--pink-soft);color:var(--pink-dark)}
.trust-item:nth-child(even) .trust-icon{background:var(--aqua-soft);color:oklch(.45 .1 155)}
.trust-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.trust-item b{display:block;font-size:14px;line-height:1.5;color:var(--ink)}
.trust-item small{display:block;font-size:12px;line-height:1.5;color:var(--muted)}
@media(max-width:900px){.trust-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){
  .trust-strip{padding-block:4px 20px}
  .trust-grid{gap:8px}
  .trust-item{flex-direction:column;text-align:center;gap:8px;padding:12px 8px;border-radius:16px}
  .trust-icon{width:40px;height:40px}
  .trust-item b{font-size:13px}
  .trust-item small{font-size:11px}
}

/* Product cards: no dead space, price sits under the name */
.product-grid{grid-auto-rows:auto}
.product-grid .product-card .product-info h3{height:auto;min-height:3.2em}
.product-grid .product-card .price{margin-top:auto;gap:10px;padding-top:6px}
.product-grid .product-card .price>span{display:flex;flex-direction:row-reverse;justify-content:flex-end;align-items:baseline;gap:8px;flex-wrap:wrap;min-height:0;grid-template-rows:none}
.product-grid .product-card .price strong{font-size:17px;color:var(--ink);line-height:1.4}
.product-grid .product-card .price .old-price{font-size:12px;line-height:1.4}
.product-grid .product-card:has(.old-price) .price strong{color:var(--pink-dark)}
.product-grid .product-card .badge.sale{background:var(--pink)!important;color:var(--surface)!important;border:0;font-weight:700}
.product-grid .product-card .main-img{transition:transform .45s ease}
@media(hover:hover){.product-grid .product-card:hover .main-img{transform:scale(1.05)}}

/* Card button: add straight to the cart */
.product-grid .product-open-button{gap:6px;min-height:42px;border-radius:12px;font-size:13px;cursor:pointer;transition:background .2s,transform .15s}
.product-grid .product-open-button.add-cart{width:100%;height:auto;padding:6px 10px;border:0;background:var(--pink);color:var(--surface);display:inline-flex}
.product-grid .product-open-button.add-cart:hover{background:var(--pink-dark)}
.product-grid .product-open-button.add-cart:active{transform:scale(.97)}
.product-grid .product-open-button svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.product-grid .product-open-button.sold-out{background:var(--bg);border-color:var(--border);color:var(--muted);cursor:default}
@media(max-width:600px){
  .product-grid .product-card .price strong{font-size:15px}
  .product-grid .product-open-button{font-size:12px;min-height:40px;padding:6px}
  .product-grid .product-open-button svg{width:15px;height:15px}
}

/* Toast: softer, readable on phones */
.toast{border-radius:16px;box-shadow:0 12px 32px oklch(.25 .03 250/.22);width:max-content;max-width:min(440px,calc(100vw - 32px));bottom:calc(24px + env(safe-area-inset-bottom));line-height:1.6}
.toast-msg{flex:1;min-width:0}
.cart-drawer.open~.toast{bottom:auto;top:calc(16px + env(safe-area-inset-top))}
.toast-action{color:oklch(.85 .1 155)}

/* Cart: free-delivery progress */
.cart-summary>.ship-progress{display:block;margin:0 0 14px;padding:12px 14px;border-radius:14px;background:var(--pink-soft)}
.ship-progress-text{margin:0 0 8px;font-size:13px;line-height:1.6;color:var(--ink)}
.ship-progress-text b{color:var(--pink-dark)}
.ship-progress-track{height:8px;border-radius:99px;background:var(--surface);overflow:hidden}
.ship-progress-bar{display:block;height:100%;width:0;border-radius:inherit;background:var(--pink);transition:width .5s ease}
.ship-progress.done{background:var(--aqua-soft)}
.ship-progress.done b{color:oklch(.45 .1 155)}
.ship-progress.done .ship-progress-bar{background:var(--aqua)}
.cart-drawer .checkout-btn{border-radius:14px;min-height:52px;font-size:16px}

/* Checkout: reassure before the form */
.checkout-form .payment-note{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;background:var(--aqua-soft);font-weight:700;font-size:14px}
.checkout-form .payment-note::before{content:"";flex:none;width:22px;height:22px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Crect x='2.5' y='6' width='19' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Crect x='2.5' y='6' width='19' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E") center/contain no-repeat}
.checkout-form input,.checkout-form textarea,.checkout-form select{border-radius:12px;transition:border-color .2s,box-shadow .2s}
.checkout-form input:focus,.checkout-form textarea:focus,.checkout-form select:focus{outline:none;border-color:var(--pink);box-shadow:0 0 0 4px var(--pink-soft)}
.checkout-form [type=submit]{min-height:54px;font-size:16px;border-radius:14px}
.checkout-mini-summary>div:last-child{padding-top:10px;border-top:1px dashed var(--border);font-size:17px;font-weight:700}
@media(max-width:640px){
  .checkout-form [type=submit]{position:sticky;bottom:0;z-index:2;box-shadow:0 -10px 20px var(--surface)}
  .checkout-form input,.checkout-form textarea,.checkout-form select{font-size:16px} /* stops iOS zoom on focus */
}

/* Product page */
.product-header-actions{display:flex;align-items:center;gap:8px}
.product-cart-link{position:relative;color:var(--ink)}
.product-cart-link svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.page-add-cart{border-radius:14px}
.buy-reassurance{list-style:none;margin:14px 0 0;padding:14px 16px;display:grid;gap:10px;border-radius:16px;background:var(--bg);border:1px solid var(--border)}
.buy-reassurance li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink)}
.buy-reassurance svg{flex:none;width:20px;height:20px;fill:none;stroke:var(--pink-dark);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.page-price-row{padding-block:14px}
.full-details{padding-block:40px}
@media(max-width:600px){
  .product-header-actions{gap:6px}
  .buy-reassurance{padding:12px 14px}
  .buy-reassurance li{font-size:13px}
  .full-details{padding-block:24px}
}

/* WhatsApp shortcut (only rendered when a store phone is set) */
.wa-float{position:fixed;z-index:60;inset-inline-end:16px;bottom:calc(16px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:8px;height:52px;padding:0 18px 0 14px;border-radius:999px;background:oklch(.62 .15 152);color:oklch(1 0 0);font-weight:700;font-size:14px;text-decoration:none;box-shadow:0 10px 26px oklch(.45 .12 152/.35);transition:transform .2s}
.wa-float:hover{transform:translateY(-2px)}
.wa-float svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
@media(max-width:640px){.wa-float span{display:none}.wa-float{width:52px;padding:0;justify-content:center}.product-page .wa-float{bottom:calc(92px + env(safe-area-inset-bottom))}}

@media(prefers-reduced-motion:reduce){
  .cart-toggle.bump{animation:none}
  .product-grid .product-card .main-img,.ship-progress-bar,.wa-float{transition:none}
}

.full-details[hidden]{display:none!important}

/* ==========================================================================
   Home page — mockup layout (hero card, category chips + circles, promo, new arrivals)
   ========================================================================== */
body{background:var(--bg)}
.legacy-hero{display:none!important}

/* Hero card */
.hero-v2{padding-block:16px 8px}
.hero-v2-card{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:stretch;min-height:400px;border-radius:32px;overflow:hidden;background:oklch(.935 .045 350)}
.hero-v2-copy{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:14px;padding:40px 56px 40px 24px;text-align:right;z-index:1}
.hero-v2-eyebrow{font-size:15px;font-weight:600;color:var(--pink-dark)}
.hero-v2-title{margin:0;font-size:clamp(34px,4.4vw,58px);line-height:1.25;font-weight:800;color:var(--ink);letter-spacing:0}
.hero-v2-title em{display:block;font-style:normal;color:var(--pink)}
.hero-v2-text{margin:0;max-width:380px;font-size:17px;line-height:1.8;color:var(--muted)}
.hero-v2-cta{display:inline-flex;align-items:center;justify-content:center;min-height:52px;margin-top:8px;padding:0 34px;border-radius:999px;background:var(--pink);color:#fff;font-weight:700;font-size:16px;text-decoration:none;box-shadow:0 10px 22px oklch(.6 .17 350/.25);transition:background .2s,transform .2s}
.hero-v2-cta:hover{background:var(--pink-dark);transform:translateY(-2px)}
.hero-v2-media{position:relative;overflow:hidden;border-radius:0 50% 50% 0/0 50% 50% 0;background:#fff}
.hero-v2-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 40%}

/* Compact section headings: title + small pink "عرض الكل" */
.section-heading.compact-heading{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between;margin-bottom:16px}
.compact-heading h2{margin:0;font-size:clamp(22px,2.4vw,30px)!important;font-weight:800}
.compact-heading .eyebrow{display:none}
.compact-heading .text-link{display:inline-flex!important;font-size:14px;font-weight:600;color:var(--pink-dark);white-space:nowrap}
.compact-heading .text-link span{display:none}

/* Categories: chip row on top, photo circles under it */
.categories-section{background:transparent;padding:28px 0 8px}
.categories-section .category-grid{gap:16px}
.category-grid .category-chip-rail{order:1;display:flex;flex:0 0 100%;gap:10px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.category-chip-rail::-webkit-scrollbar{display:none}
.category-chip-rail .category{flex:0 0 auto;width:auto;min-height:44px;padding:8px 20px;border:1px solid var(--border);border-radius:999px;background:var(--surface);box-shadow:0 2px 8px oklch(.25 .03 250/.04);transition:border-color .2s,background .2s}
.category-chip-rail .category b{font-size:14px;font-weight:600;line-height:1.5;color:var(--ink)}
.category-chip-rail .category:hover{border-color:var(--pink);background:var(--pink-soft)}
.category-grid .clothing-category-rail{order:2;margin-bottom:0}
.clothing-category-rail .category-photo img{border:4px solid var(--surface);box-shadow:0 6px 16px oklch(.25 .03 250/.1)}
.clothing-category-rail .category-photo b{font-size:13px;font-weight:700}

/* Promo card */
.promo-section{padding-block:12px}
.promo-card{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:170px;padding:24px 40px;border-radius:28px;background:oklch(.94 .04 160);color:var(--ink);text-decoration:none;overflow:hidden;transition:transform .2s}
.promo-card:hover{transform:translateY(-2px)}
.promo-copy{display:flex;flex-direction:column;gap:6px;max-width:420px}
.promo-copy strong{font-size:clamp(22px,2.6vw,32px);font-weight:800;line-height:1.3}
.promo-copy>span:not(.promo-link){font-size:15px;line-height:1.7;color:var(--muted)}
.promo-link{margin-top:4px;font-size:14px;font-weight:700;color:var(--pink-dark)}
.promo-link::after{content:" ←"}
.promo-art{flex:none;width:200px;height:150px}

.products-section{padding-top:28px}
.trust-strip{padding-block:8px 40px;background:transparent}

@media(max-width:640px){
  .hero-v2{padding-block:12px 4px}
  .hero-v2-card{min-height:224px;border-radius:26px;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
  .hero-v2-copy{padding:20px 18px 18px 6px;gap:8px}
  .hero-v2-eyebrow{font-size:11px}
  .hero-v2-title{font-size:25px;line-height:1.35}
  .hero-v2-text{display:none}
  .hero-v2-cta{min-height:40px;margin-top:auto;padding:0 20px;font-size:14px}
  .hero-v2-copy{justify-content:flex-start;padding-top:28px}
  .categories-section{padding:22px 0 4px}
  .categories-section .category-grid{gap:12px}
  .category-chip-rail .category{min-height:40px;padding:6px 16px}
  .category-chip-rail .category b{font-size:13px}
  .promo-card{min-height:140px;padding:18px 20px;border-radius:24px;gap:8px}
  .promo-copy>span:not(.promo-link){font-size:12.5px}
  .promo-link{display:none}
  .promo-art{width:130px;height:110px}
  .products-section{padding-top:20px}
}
@media(prefers-reduced-motion:reduce){.hero-v2-cta,.promo-card{transition:none}}
.categories-section .clothing-category-rail{padding-bottom:6px}
.categories-section{padding-bottom:0}
.promo-section{padding-top:8px}

/* ==========================================================================
   Hero carousel — native swipe (scroll-snap), dots + arrows, autoplay in claude-ux.js
   ========================================================================== */
.hero-v2-track{display:flex;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;border-radius:32px}
.hero-v2-track::-webkit-scrollbar{display:none}
.hero-v2-track>.hero-v2-card{flex:0 0 100%;scroll-snap-align:center}
.hero-v2-delivery{background:oklch(.955 .045 85)}
.hero-v2-delivery .hero-v2-title em{color:oklch(.5 .1 155)}
.hero-v2-delivery .hero-v2-eyebrow{color:oklch(.45 .09 155)}
.hero-v2-delivery .hero-v2-cta{background:oklch(.52 .11 155);box-shadow:0 10px 22px oklch(.45 .1 155/.25)}
.hero-v2-delivery .hero-v2-cta:hover{background:oklch(.45 .1 155)}
.hero-v2-care{background:oklch(.94 .04 165)}
.hero-v2-care .hero-v2-title em{color:oklch(.5 .1 165)}
.hero-v2-care .hero-v2-eyebrow{color:oklch(.45 .09 165)}
.hero-v2-media-art{display:grid;place-items:center;border-radius:0;background:transparent}
.hero-v2-art{width:min(88%,360px);height:auto}
.hero-v2-art .delivery-halo{fill:oklch(.9 .065 155)}
.hero-v2-art .delivery-route{fill:none;stroke:oklch(.51 .09 155);stroke-width:2;stroke-dasharray:5 7;stroke-linecap:round}
.hero-v2-art .delivery-pin,.hero-v2-art .delivery-heart{fill:var(--pink-dark)}
.hero-v2-art .delivery-paper,.hero-v2-art .delivery-van{fill:#fff}
.hero-v2-art .delivery-box{fill:oklch(.8 .1 65)}
.hero-v2-art .delivery-tape{fill:oklch(.94 .04 65)}
.hero-v2-art .delivery-window{fill:oklch(.61 .09 155)}
.hero-v2-art .delivery-wheel{fill:var(--ink)}
.hero-v2-art .delivery-speed,.hero-v2-art .delivery-spark{fill:none;stroke:var(--pink-dark);stroke-width:3;stroke-linecap:round}
.hero-v2-nav{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:12px}
.hero-v2-dots{display:flex;align-items:center;gap:6px}
.hero-v2-dots button{width:28px;height:28px;padding:0;border:0;background:transparent;display:grid;place-items:center;cursor:pointer}
.hero-v2-dots button::before{content:"";width:8px;height:8px;border-radius:99px;background:oklch(.85 .03 350);transition:width .35s cubic-bezier(.2,.8,.2,1),background .35s}
.hero-v2-dots button[aria-current="true"]::before{width:26px;background:var(--pink)}
.hero-v2-arrow{width:40px;height:40px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:border-color .2s,background .2s}
.hero-v2-arrow:hover{border-color:var(--pink);background:var(--pink-soft);color:var(--pink-dark)}
.hero-v2-arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:640px){
  .hero-v2-track{border-radius:26px;gap:12px}
  .hero-v2-arrow{display:none}
  .hero-v2-nav{margin-top:8px}
  .hero-v2-art{width:96%}
}

/* Cards: option labels + "choose size" button */
.product-grid .product-card .product-option-labels{display:flex;flex-wrap:wrap;gap:5px;margin:0}
.product-grid .product-option-label{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:999px;background:var(--pink-soft);color:var(--pink-dark);font-size:11.5px;font-weight:700;line-height:1.6}
.product-grid .product-option-label svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.product-grid .price .price-from{font-size:12px;font-weight:600;color:var(--muted)}
.product-grid .product-open-button.choose-options{width:100%;border:1.5px solid var(--pink);background:var(--surface);color:var(--pink-dark)}
.product-grid .product-open-button.choose-options:hover{background:var(--pink-soft);border-color:var(--pink-dark);color:var(--pink-dark)}

/* Pagination: clear prev / numbers / next */
.catalogue-pages{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin:36px auto 8px}
.catalogue-pages .page-step{display:inline-flex;align-items:center;gap:8px;min-height:50px;padding:0 24px;border:0;border-radius:999px;background:var(--pink);color:#fff;font-size:15px;font-weight:700;box-shadow:0 8px 20px oklch(.6 .17 350/.22);cursor:pointer;transition:background .2s,transform .15s}
.catalogue-pages .page-step:hover:not(:disabled){background:var(--pink-dark);transform:translateY(-1px)}
.catalogue-pages .page-step:active:not(:disabled){transform:none}
.catalogue-pages .page-step:disabled{background:var(--surface);color:oklch(.7 .02 250);border:1px solid var(--border);box-shadow:none;cursor:not-allowed}
.catalogue-pages .page-step svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.catalogue-pages .page-numbers{display:flex;align-items:center;gap:6px;margin-inline:6px}
.catalogue-pages .page-num{min-width:44px;height:44px;padding:0 6px;border:1px solid var(--border);border-radius:14px;background:var(--surface);color:var(--ink);font-weight:700;font-size:15px;cursor:pointer;transition:border-color .2s,background .2s}
.catalogue-pages .page-num:hover{border-color:var(--pink);color:var(--pink-dark)}
.catalogue-pages .page-num[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:#fff;cursor:default}
.catalogue-pages .page-gap{color:var(--muted);padding-inline:2px}
.catalogue-pages .page-status{flex-basis:100%;text-align:center;font-size:13px;color:var(--muted);margin-top:4px}
@media(max-width:640px){
  .catalogue-pages{gap:6px}
  .catalogue-pages .page-step{min-height:46px;padding:0 16px;font-size:14px}
  .catalogue-pages .page-numbers{order:-1;flex-basis:100%;justify-content:center;margin:0 0 6px}
  .catalogue-pages .page-step{flex:1 1 0;justify-content:center;max-width:180px}
}
@media(prefers-reduced-motion:reduce){.hero-v2-dots button::before,.catalogue-pages .page-step{transition:none}}
.catalogue-pages>.page-step{width:auto;height:auto;grid-row:auto}

/* Contrast: white labels sit on the deeper brand pink (≥4.5:1); accents on tinted cards stay ≥3:1 */
.hero-v2-cta,.catalogue-pages .page-step,.product-grid .product-open-button.add-cart{background:var(--pink-dark)}
.hero-v2-cta:hover,.catalogue-pages .page-step:hover:not(:disabled),.product-grid .product-open-button.add-cart:hover{background:oklch(.48 .17 350)}
.hero-v2-baby .hero-v2-title em{color:oklch(.58 .19 350)}
.hero-v2-delivery .hero-v2-text{color:oklch(.42 .05 85)}
.hero-v2-care .hero-v2-text{color:oklch(.4 .05 165)}