/* Preset "Cosmetics Plus" (approved boards web2026: Main, Catalogue, Produit, Checkout, Mobile, Styleguide).
   Palette: primary #A83D50, deep #812C40, dusty rose #D99AA5, blush #F6E6E5, cream #FFF9F3, white, text #292326, secondary #74656A,
   border #EADDDD, gold #B58A58, success #1B8F5F, error #B42318. Cormorant Garamond (titles) + Jost (body) + Noto Kufi Arabic.
   Layout traits: header=editorial (announcement bar, inline search, category row), hero=editorial, card=premium (4:5, brand caps, wishlist,
   hover CTA), bottom tab bar < 900px, no WhatsApp / wilaya bar / dark toggle. Trait components live in theme-base.css; this file is the skin.
   Gold badges use dark text (#B58A58 on white is only 3.1:1); success text is darkened to #177A52 for AA. */
:root{
  --c-bg:#FFF9F3;--c-surface:#FFFFFF;--c-surface-2:#FBF1EF;--c-soft:#F6E6E5;--c-line:#EADDDD;--c-line-strong:#D99AA5;
  --c-ink:#292326;--c-muted:#74656A;--c-primary:#A83D50;--c-on-primary:#FFFFFF;--c-primary-soft:#F6E6E5;
  --c-accent:#B58A58;--c-on-accent:#292326;--c-accent-ink:#8F6A3A;--c-accent-soft:#F3E8DA;--c-focus:#A83D50;
  --c-header-bg:#FFFFFF;--c-header-ink:#292326;--c-header-muted:#74656A;--c-header-line:#EADDDD;--c-header-accent:#812C40;
  --c-hero-bg:#F6E6E5;--c-hero-ink:#292326;--c-hero-muted:#5E5054;--c-hero-media:#812C40;--c-hero-media-2:#F3DCDC;
  --c-footer-bg:#FFFFFF;--c-footer-ink:#5E5054;--c-footer-title:#292326;
  --c-sidebar-bg:#812C40;--c-sidebar-ink:#F6E6E5;--c-sidebar-active:rgba(255,255,255,.12);
  --c-success:#177A52;--c-success-soft:#E3F5EC;--c-danger:#B42318;--c-danger-soft:#FBEAE8;--c-warning:#8A5300;--c-warning-soft:#FCF1DE;--c-info:#812C40;--c-info-soft:#F6E6E5;
  --c-deep:#812C40;--c-rose:#D99AA5;--c-gold:#B58A58;
  --font-latin:"Jost";--font-arabic:"Noto Kufi Arabic";--font-display-face:"Cormorant Garamond";
  --display-weight:600;--display-style-em:italic;--display-tracking:-.01em;
  --fs-hero:clamp(2.6rem,5.5vw,4rem);--fs-h2:clamp(1.7rem,3vw,2.25rem);
  --r-xs:6px;--r-sm:12px;--r-md:16px;--r-lg:16px;--r-xl:24px;--r-media:12px;--r-arch:16px;--r-btn:999px;--r-input:12px;
  --shadow:0 2px 8px rgba(129,44,64,.06);--shadow-lg:0 8px 24px rgba(129,44,64,.08);
  color-scheme:light;
}
[lang=ar]{--font-display:"Noto Kufi Arabic",var(--font-fallback);--display-weight:600;--display-style-em:normal;--display-tracking:0}
/* Dark surfaces (OS preference only: the preset has no toggle). */
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --c-bg:#1C1417;--c-surface:#261B1F;--c-surface-2:#2F2227;--c-soft:#3A2A30;--c-line:#46343B;--c-line-strong:#5A4450;
  --c-ink:#F7ECEE;--c-muted:#C8B5BB;--c-primary:#E58CA0;--c-on-primary:#2A1017;--c-primary-soft:#45252E;
  --c-accent:#D4B07F;--c-on-accent:#2A1F12;--c-accent-ink:#E0C397;--c-accent-soft:#3C3024;--c-focus:#E58CA0;
  --c-header-bg:#1C1417;--c-header-ink:#F7ECEE;--c-header-muted:#C8B5BB;--c-header-line:#46343B;--c-header-accent:#E58CA0;
  --c-hero-bg:#2F2227;--c-hero-ink:#F7ECEE;--c-hero-muted:#D8C6CC;--c-hero-media:#812C40;--c-hero-media-2:#4A2A33;
  --c-footer-bg:#140E10;--c-footer-ink:rgba(247,236,238,.72);--c-footer-title:#F7ECEE;
  --c-success:#6FD3A3;--c-success-soft:#173226;--c-danger:#FF9A8F;--c-danger-soft:#3E1814;--c-info:#E58CA0;--c-info-soft:#45252E;
  --shadow:0 1px 2px rgba(0,0,0,.4);--shadow-lg:0 16px 40px rgba(0,0,0,.5);
  color-scheme:dark;
}}
:root[data-theme=dark]{--c-bg:#1C1417;--c-surface:#261B1F;--c-ink:#F7ECEE;--c-muted:#C8B5BB;--c-primary:#E58CA0;--c-on-primary:#2A1017;--c-header-bg:#1C1417;--c-header-ink:#F7ECEE}

/* ---------- global ---------- */
html[data-preset=cosmetics-plus] body{line-height:1.6}
html[data-preset=cosmetics-plus] h1,html[data-preset=cosmetics-plus] h2,html[data-preset=cosmetics-plus] .page-head h1,html[data-preset=cosmetics-plus] .section-head h2{font-family:var(--font-display);font-weight:600}
html[data-preset=cosmetics-plus] .section-head h2{font-size:var(--fs-h2)}
html[data-preset=cosmetics-plus] .eyebrow{color:var(--c-deep);letter-spacing:.2em;text-transform:uppercase;font-size:.72rem;font-weight:500}
[lang=ar][data-preset=cosmetics-plus] .eyebrow{letter-spacing:0}
html[data-preset=cosmetics-plus] .section{padding-block:40px}
@media(min-width:1024px){html[data-preset=cosmetics-plus] .section{padding-block:56px}}
html[data-preset=cosmetics-plus] .btn-link{color:var(--c-deep);font-weight:500}

/* buttons */
html[data-preset=cosmetics-plus] .btn{border-radius:var(--r-btn);font-weight:500;letter-spacing:.02em}
html[data-preset=cosmetics-plus] .btn-primary{background:var(--c-primary);color:var(--c-on-primary);border-color:var(--c-primary);box-shadow:0 8px 20px rgba(168,61,80,.25)}
html[data-preset=cosmetics-plus] .btn-primary:hover{background:var(--c-deep);border-color:var(--c-deep);color:var(--c-on-primary)}
html[data-preset=cosmetics-plus] .btn-accent{background:transparent;color:var(--c-deep);border:1.5px solid var(--c-primary)}
html[data-preset=cosmetics-plus] .btn-accent:hover{background:var(--c-primary-soft);color:var(--c-deep)}
html[data-preset=cosmetics-plus] .btn:disabled{background:var(--c-line);color:var(--c-muted);border-color:var(--c-line);box-shadow:none}
html[data-preset=cosmetics-plus] .btn-icon{border-radius:50%}

/* badges & chips */
html[data-preset=cosmetics-plus] .badge{border-radius:999px;font-weight:500;letter-spacing:.04em;font-size:.75rem}
html[data-preset=cosmetics-plus] .badge::before{display:none}
html[data-preset=cosmetics-plus] .badge-accent{background:var(--c-gold);color:var(--c-on-accent)}
html[data-preset=cosmetics-plus] .chip{border-radius:999px;border:1px solid var(--c-line);background:var(--c-surface)}
html[data-preset=cosmetics-plus] .chip[aria-current=page]{background:var(--c-primary);color:var(--c-on-primary);border-color:var(--c-primary)}

/* forms */
html[data-preset=cosmetics-plus] .input,html[data-preset=cosmetics-plus] select,html[data-preset=cosmetics-plus] textarea{border-radius:var(--r-input);border-color:var(--c-line);background:var(--c-surface);min-height:44px}
html[data-preset=cosmetics-plus] .input:focus,html[data-preset=cosmetics-plus] select:focus,html[data-preset=cosmetics-plus] textarea:focus{border-color:var(--c-primary);box-shadow:0 0 0 4px var(--c-primary-soft);outline:none}
html[data-preset=cosmetics-plus] .error{color:var(--c-danger);font-size:.8rem;margin-block-start:4px}
html[data-preset=cosmetics-plus] .pill span{border-radius:999px;border-color:var(--c-line)}
html[data-preset=cosmetics-plus] .pill input:checked+span{background:var(--c-primary-soft);border-color:var(--c-primary);color:var(--c-deep)}
html[data-preset=cosmetics-plus] .choice{border-radius:var(--r-md)}
html[data-preset=cosmetics-plus] .choice:has(input:checked){border-color:var(--c-primary);background:var(--c-primary-soft)}
html[data-preset=cosmetics-plus] .check input,html[data-preset=cosmetics-plus] .choice input{accent-color:var(--c-primary)}

/* top bars + header */
html[data-preset=cosmetics-plus] .topbar{background:var(--c-bg);color:var(--c-muted);font-size:.78rem;text-align:center;border-block-end:1px solid var(--c-line)}
html[data-preset=cosmetics-plus] .topbar a{color:var(--c-deep)}
html[data-preset=cosmetics-plus] .site-header{border-block-end:1px solid var(--c-header-line)}
html[data-preset=cosmetics-plus] .brand .brand-fr{font-family:var(--font-display);font-weight:700;font-size:1.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--c-deep)}
[lang=ar][data-preset=cosmetics-plus] .brand .brand-fr{letter-spacing:0;text-transform:none}
@media(min-width:1024px){html[data-preset=cosmetics-plus] .brand .brand-fr{font-size:1.9rem}}
html[data-preset=cosmetics-plus] .lang-switch a{border-radius:999px;border:1px solid var(--c-line);font-size:.78rem;font-weight:500;padding:5px 12px}
html[data-preset=cosmetics-plus] .lang-switch a[aria-current=true]{background:var(--c-primary-soft);color:var(--c-deep);border-color:var(--c-rose)}
html[data-preset=cosmetics-plus] .cart-pill{background:var(--c-primary);color:var(--c-on-primary)!important}
html[data-preset=cosmetics-plus] .search-panel .btn{background:var(--c-primary);color:var(--c-on-primary);border-color:var(--c-primary)}
html[data-preset=cosmetics-plus] .cat-nav a{font-weight:500}
html[data-preset=cosmetics-plus] .cat-nav .offer{color:var(--c-primary)}

/* breadcrumbs, page heads, pagination */
html[data-preset=cosmetics-plus] .crumbs{font-size:.82rem;color:var(--c-muted)}
html[data-preset=cosmetics-plus] .crumbs a:hover{color:var(--c-deep)}
html[data-preset=cosmetics-plus] .pagination li>*{border-radius:50%;min-width:40px;min-height:40px;border:1px solid var(--c-line);background:var(--c-surface);display:inline-flex;align-items:center;justify-content:center}
html[data-preset=cosmetics-plus] .pagination .active>*{background:var(--c-primary);color:var(--c-on-primary);border-color:var(--c-primary)}

/* catalogue */
html[data-preset=cosmetics-plus] .filters .card{border-radius:var(--r-md);padding:20px}
html[data-preset=cosmetics-plus] .filters label,html[data-preset=cosmetics-plus] .filters legend{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--c-muted);font-weight:500}
[lang=ar][data-preset=cosmetics-plus] .filters label,[lang=ar][data-preset=cosmetics-plus] .filters legend{letter-spacing:0}
html[data-preset=cosmetics-plus] .filters .check{font-weight:400;font-size:.92rem;letter-spacing:0;text-transform:none;color:var(--c-ink)}
html[data-preset=cosmetics-plus] .filter-toggle{background:var(--c-surface);border:1px solid var(--c-line);color:var(--c-ink)}
html[data-preset=cosmetics-plus] .empty{background:var(--c-surface);border:1px dashed var(--c-line-strong);border-radius:var(--r-md);color:var(--c-muted);text-align:center;padding:40px 20px}

/* product page */
html[data-preset=cosmetics-plus] .gallery-main{background:var(--c-soft);border:1px solid var(--c-line);border-radius:var(--r-md)}
html[data-preset=cosmetics-plus] .thumbs button{border-radius:var(--r-sm);border:1px solid var(--c-line);background:var(--c-surface)}
html[data-preset=cosmetics-plus] .thumbs button[aria-pressed=true]{border-color:var(--c-primary);box-shadow:0 0 0 3px var(--c-primary-soft)}
html[data-preset=cosmetics-plus] .product-info h1{font-size:clamp(1.8rem,3vw,2.4rem)}
html[data-preset=cosmetics-plus] .product-info>.muted.small:first-child{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--c-muted)}
html[data-preset=cosmetics-plus] .big-price{color:var(--c-deep);font-weight:600}
html[data-preset=cosmetics-plus] .discount-badge{background:var(--c-primary);color:var(--c-on-primary);border-radius:999px;font-size:.75rem;padding:3px 10px}
html[data-preset=cosmetics-plus] .qty{border:1px solid var(--c-line);border-radius:999px;overflow:hidden;background:var(--c-surface)}
html[data-preset=cosmetics-plus] .qty button{background:transparent}
html[data-preset=cosmetics-plus] .delivery-estimate{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-md);padding:14px 16px}
html[data-preset=cosmetics-plus] .prose h2,html[data-preset=cosmetics-plus] .product-info h2{font-family:var(--font-display);font-size:1.4rem}
html[data-preset=cosmetics-plus] details.accordion{border-block-start:1px solid var(--c-line)}
html[data-preset=cosmetics-plus] details.accordion summary{cursor:pointer;padding-block:14px;font-weight:500;list-style:none;display:flex;justify-content:space-between;align-items:center}
html[data-preset=cosmetics-plus] details.accordion summary::after{content:"+";color:var(--c-deep);font-size:1.2rem}
html[data-preset=cosmetics-plus] details.accordion[open] summary::after{content:"−"}
html[data-preset=cosmetics-plus] .bottom-bar{background:var(--c-surface);border-block-start:1px solid var(--c-line)}

/* cart / checkout */
html[data-preset=cosmetics-plus] .card{border-radius:var(--r-md);border-color:var(--c-line);box-shadow:var(--shadow)}
html[data-preset=cosmetics-plus] .cart-line{border-color:var(--c-line)}
html[data-preset=cosmetics-plus] .cart-line img,html[data-preset=cosmetics-plus] .cart-line .ph{border-radius:var(--r-sm);background:var(--c-soft)}
html[data-preset=cosmetics-plus] .cart-line .title{font-weight:500}
html[data-preset=cosmetics-plus] .summary-row{font-size:.92rem;padding-block:6px;border-block-end:1px dashed var(--c-line)}
html[data-preset=cosmetics-plus] .summary-total{font-size:1.15rem;font-weight:600;color:var(--c-deep);border-block-end:0;padding-block-start:12px}
html[data-preset=cosmetics-plus] .step-title{font-family:var(--font-display);font-size:1.5rem;font-weight:600}
html[data-preset=cosmetics-plus] .step-title .n{background:var(--c-deep);color:#fff;border-radius:50%;font-family:var(--font-body);font-size:.85rem}
html[data-preset=cosmetics-plus] .checkout-steps{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 20px;padding:0;list-style:none;font-size:.82rem;color:var(--c-muted)}
html[data-preset=cosmetics-plus] .checkout-steps li{display:inline-flex;align-items:center;gap:8px}
html[data-preset=cosmetics-plus] .checkout-steps li+li::before{content:"";width:24px;height:1px;background:var(--c-line-strong)}
html[data-preset=cosmetics-plus] .checkout-steps .n{width:24px;height:24px;border-radius:50%;border:1px solid var(--c-line-strong);display:inline-flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:500}
html[data-preset=cosmetics-plus] .checkout-steps li[aria-current=step]{color:var(--c-deep);font-weight:500}
html[data-preset=cosmetics-plus] .checkout-steps li[aria-current=step] .n,html[data-preset=cosmetics-plus] .checkout-steps li.done .n{background:var(--c-deep);color:#fff;border-color:var(--c-deep)}
html[data-preset=cosmetics-plus] .note{color:var(--c-muted);font-size:.85rem}

/* notifications, drawers, skeletons */
html[data-preset=cosmetics-plus] .alert{border-radius:var(--r-md);border-inline-start:4px solid currentColor;border-color:transparent;border-inline-start-color:currentColor}
html[data-preset=cosmetics-plus] .mobile-nav.open,html[data-preset=cosmetics-plus] .collapsible{background:var(--c-surface)}
html[data-preset=cosmetics-plus] .mobile-nav a{font-weight:500}
html[data-preset=cosmetics-plus] .skeleton{background:linear-gradient(90deg,var(--c-soft) 25%,var(--c-surface-2) 50%,var(--c-soft) 75%);background-size:200% 100%;border-radius:var(--r-sm);animation:cp-shimmer 1.4s infinite}
@keyframes cp-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){html[data-preset=cosmetics-plus] .skeleton{animation:none}}

/* category strip (used when hero != editorial) */
html[data-preset=cosmetics-plus] .cat-strip{background:var(--c-surface);border-color:var(--c-line)}
html[data-preset=cosmetics-plus] .cat-strip a{font-family:var(--font-body)!important;font-style:normal!important;font-size:.92rem!important;color:var(--c-ink);border:1px solid var(--c-line);border-radius:999px;padding:.35em 1em;background:var(--c-bg)}
html[data-preset=cosmetics-plus] .cat-strip a::after{content:none}
html[data-preset=cosmetics-plus] .cat-strip a:hover{background:var(--c-primary-soft);color:var(--c-deep)}
html[data-preset=cosmetics-plus] .benefits{background:var(--c-surface);border:1px solid var(--c-line)}
html[data-preset=cosmetics-plus] .benefits .num{color:var(--c-rose)}

/* footer */
html[data-preset=cosmetics-plus] .site-footer{background:var(--c-footer-bg);border-block-start:1px solid var(--c-line);color:var(--c-footer-ink)}
html[data-preset=cosmetics-plus] .site-footer strong{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--c-footer-title);font-weight:500}
[lang=ar][data-preset=cosmetics-plus] .site-footer strong{letter-spacing:0}
html[data-preset=cosmetics-plus] .site-footer .brand .brand-fr{font-size:1.5rem}
html[data-preset=cosmetics-plus] .site-footer a:hover{color:var(--c-deep)}
html[data-preset=cosmetics-plus] .site-footer .legal{border-block-start:1px solid var(--c-line);color:var(--c-muted)}

/* mobile tab bar */
html[data-preset=cosmetics-plus] .bottom-nav{background:var(--c-surface);border-block-start:1px solid var(--c-line)}
html[data-preset=cosmetics-plus] .bottom-nav a[aria-current=page]{color:var(--c-deep)}
html[data-preset=cosmetics-plus] .bottom-nav .bn-count{background:var(--c-primary);color:var(--c-on-primary)}
html[data-preset=cosmetics-plus] .sticky-cart{background:var(--c-primary);color:var(--c-on-primary)}

/* RTL: mirrored by logical properties; directional tweaks only */
[dir=rtl][data-preset=cosmetics-plus] .hero-editorial .halo{inset-inline-end:-40px}
[dir=rtl][data-preset=cosmetics-plus] .checkout-steps li+li::before{transform:scaleX(-1)}
[dir=rtl][data-preset=cosmetics-plus] .header-editorial .search-inline{padding-inline:16px 6px}