/* INTEGEST WEB — responsive layer for every storefront preset (2026-10-30).
   Loaded by partials/theme-head AFTER theme-base.css and the preset file (css/themes/*.css), so it applies to all themes.
   Mobile-first breakpoints: phone ≤480 · large phone ≤768 · tablet ≤1024 · desktop ≥1280.
   Logical properties only (margin-inline, inset-inline…) => Arabic (dir=rtl) is mirrored automatically; the only
   direction-specific rules are the off-canvas transforms. No business logic, no new markup required except the drawer heads. */

/* ---------- 0. global guards: no horizontal page scroll at 360px ---------- */
html{scroll-padding-block-start:84px}
body{overflow-x:clip;overflow-wrap:break-word}
img,svg,video,iframe,canvas{max-width:100%}
img{height:auto}
table{max-width:100%}
pre,code{white-space:pre-wrap;overflow-wrap:anywhere}
.container{min-width:0}
.row>*{min-width:0}
.section-head{flex-wrap:wrap}
.page-head.row{gap:8px 16px}
body.drawer-open{overflow:hidden}

/* ---------- 1. off-canvas drawers (menu + catalogue filters) ---------- */
.drawer-head{display:none}
.drawer-overlay{position:fixed;inset:0;z-index:65;background:rgba(10,14,20,.48);opacity:0;transition:opacity .2s}
.drawer-overlay.is-visible{opacity:1}
.drawer-close{background:transparent;border:0;color:inherit}
.drawer-close .icon{width:22px;height:22px}

@media (max-width:1023.98px){
  /* the sticky header is a stacking context (z-index 40): lifted above the overlay while its menu drawer is open.
     A fixed drawer needs a header WITHOUT backdrop-filter (it would become the drawer's containing block): see nova / cosmetic / glamour. */
  body.nav-open .site-header{z-index:80}
  .site-header{-webkit-backdrop-filter:none;backdrop-filter:none}
  .site-header .mobile-nav{position:fixed;inset-block:0;inset-inline-start:0;z-index:70;display:flex;flex-direction:column;
    width:min(340px,86vw);margin:0;padding:0 20px calc(24px + env(safe-area-inset-bottom));border:0;
    background:var(--c-header-bg);color:var(--c-header-ink);box-shadow:var(--shadow-lg);
    overflow-y:auto;overscroll-behavior:contain;transform:translateX(-105%);visibility:hidden;transition:transform .25s ease,visibility .25s}
  [dir=rtl] .site-header .mobile-nav{transform:translateX(105%)}
  .site-header .mobile-nav.open{display:flex;transform:none;visibility:visible}
  .site-header .mobile-nav a{display:flex;align-items:center;min-height:48px;padding-block:8px}
  .site-header .mobile-nav .lang-row{flex-wrap:wrap;padding-block-start:16px}
  .site-header .mobile-nav .lang-row a{min-height:44px}
  .mobile-nav .drawer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;position:sticky;top:0;z-index:1;
    min-height:60px;margin-inline:-20px;padding-inline:20px 8px;background:inherit;border-block-end:1px solid var(--c-header-line)}
  .mobile-nav .drawer-title{font-weight:700;font-size:1rem}
}
@media (prefers-reduced-motion:reduce){
  .site-header .mobile-nav,.filters .collapsible,.drawer-overlay{transition:none}
}

/* ---------- 2. header: compact + sticky on phones, nothing overflows ---------- */
.site-header{transition:box-shadow .2s}
.site-header.is-scrolled{box-shadow:0 4px 18px rgba(0,0,0,.08)}
@media (max-width:1023.98px){
  .site-header .bar{gap:8px}
  .site-header .bar>.row{gap:8px!important}
  .site-header .brand{justify-self:stretch;min-width:0;overflow:hidden}
  .site-header .brand .brand-fr{max-width:100%}
  .search-panel .search-form .input{min-height:46px}
}
@media (max-width:768px){
  .site-header .bar{min-height:58px}
  html[data-header=mega] .site-header .bar{min-height:58px}
  .header-editorial .bar-editorial{min-height:58px}
  .site-header .brand img{max-height:38px}
  .brand .brand-fr{font-size:1.15rem}
  .brand .brand-ar{font-size:.7rem}
  .site-header.is-scrolled .brand .brand-ar{display:none}
  .topbar{font-size:.75rem}
  .topbar .container{padding-block:4px}
  .topbar .container>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .topbar .container>a{flex:none}
  .header-glam .glam-bar{gap:10px 12px}
  .header-glam.is-scrolled .glam-bar{padding-block:6px}
  .header-glam.is-scrolled .brand img{max-height:40px}
}
@media (max-width:767px){
  /* glam header: brand and round buttons stay on one row, the search takes the second row */
  .header-glam .brand{flex:1 1 0;min-width:0;overflow:hidden}
  .header-glam .brand .brand-fr{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .glam-actions{flex:none}
  .glam-lang-menu{max-width:calc(100vw - 32px)}
}
/* small desktops: the editorial header (brand · search · labelled icons) must fit in 1024px */
@media (min-width:1024px) and (max-width:1279.98px){
  .header-editorial .bar-editorial{gap:20px}
  .header-editorial .head-link>span:last-child{display:none}
  .header-editorial .brand{max-width:280px;min-width:0;overflow:hidden}
  .header-editorial .brand .brand-fr{max-width:100%}
}
@media (max-width:480px){
  .head-actions{gap:0}
  .head-actions .btn-icon{width:40px;min-height:44px}
  /* account is in the menu drawer (and in the bottom tab bar when the theme has one) */
  .site-header:not(.header-editorial):not(.header-glam) .head-actions>a.btn-icon{display:none}
  .cart-pill{padding:0 12px;gap:6px}
  .glam-actions{gap:6px}
  .glam-btn{width:42px;height:42px}
  .header-glam .brand img{max-height:44px}
}

/* ---------- 3. product grids: 2 phone · 3 tablet · 4–5 desktop ---------- */
.products{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:768px){.products{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1024px){
  .products{grid-template-columns:repeat(4,minmax(0,1fr))}
  .layout-catalog .products,.featured .products,html[data-card] .featured .products{grid-template-columns:repeat(3,minmax(0,1fr))}
  html[data-card=dense] .layout-catalog .products{grid-template-columns:repeat(3,minmax(0,1fr))}
  html[data-card=dense] .products:not(.layout-catalog .products):not(.featured .products){grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:1280px){
  .layout-catalog .products{grid-template-columns:repeat(4,minmax(0,1fr))}
  html[data-card=dense] .products:not(.layout-catalog .products):not(.featured .products){grid-template-columns:repeat(5,minmax(0,1fr))}
  html[data-card=dense] .layout-catalog .products{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:768px) and (max-width:899.98px){
  .glam-products>.pcard,.glam-cat-grid>.glam-cat{flex-basis:calc((100% - 28px)/3)}
}
@media (max-width:480px){
  .products{gap:14px 10px}
  .pcard .meta{flex-direction:column;align-items:flex-start;gap:4px}
  .pcard .price-wrap{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:4px 8px;white-space:normal}
  .pcard .name{font-size:.98rem}
  .pcard .tag{inset-block-start:8px;inset-inline-start:8px;font-size:.75rem;padding:2px 8px}
  .cat-cards{gap:10px}
  .cat-card .cat-visual{height:110px}
}

/* ---------- 4. catalogue: chips scroll, filters in a slide-in panel below 900px ---------- */
.chips{scrollbar-width:none;-webkit-overflow-scrolling:touch}
.chips::-webkit-scrollbar{display:none}
@media (max-width:899.98px){
  .filter-toggle{min-height:48px}
  .filters .collapsible{display:block;position:fixed;inset-block:0;inset-inline-end:0;z-index:70;width:min(380px,90vw);margin:0;
    border:0;border-radius:0;padding-block-start:0;padding-block-end:calc(24px + env(safe-area-inset-bottom));
    overflow-y:auto;overscroll-behavior:contain;box-shadow:var(--shadow-lg);
    transform:translateX(105%);visibility:hidden;transition:transform .25s ease,visibility .25s}
  [dir=rtl] .filters .collapsible{transform:translateX(-105%)}
  .filters .collapsible.open{transform:none;visibility:visible}
  .filters .drawer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;position:sticky;top:0;z-index:1;
    min-height:60px;margin:0 -20px 16px;padding-inline:20px 8px;background:var(--c-surface);border-block-end:1px solid var(--c-line)}
  .filters .drawer-title{font-weight:700}
}

/* ---------- 5. product page: stacked, swipeable gallery, sticky add-to-cart bar ---------- */
.gallery-main{touch-action:pan-y}
/* grid children may shrink below their content (long words / URLs / references in a description never widen the page) */
.product-page>*,.layout-catalog>*,.layout-checkout>*,.featured>*{min-width:0}
.prose,.product-info h1,.cart-line .title,.summary-row>span:first-child{overflow-wrap:anywhere}
.thumbs{scroll-snap-type:x mandatory;scrollbar-width:thin;padding-block-end:4px}
.thumbs button{scroll-snap-align:start}
@media (max-width:899.98px){
  .product-page{gap:18px;padding-block-start:4px}
  .gallery-main{border-radius:var(--r-lg)}
  .thumbs button{width:60px;height:60px}
  .product-info h1{font-size:clamp(1.45rem,6vw,2rem)}
  .big-price{font-size:1.45rem}
  .delivery-estimate select{width:100%}
  .bottom-bar{gap:8px;padding-inline:12px}
  .bottom-bar .btn{flex:1 1 0;min-width:0;padding-inline:10px;white-space:normal;line-height:1.15;font-size:.92rem;text-align:center}
}
@media (max-width:480px){
  .product-info form .row .btn-lg{flex:1 1 100%}
  .crumbs{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

/* ---------- 6. cart & checkout: one column, large touch targets ---------- */
@media (max-width:899.98px){
  .layout-checkout{gap:16px}
  .sticky{position:static}
}
@media (max-width:768px){
  .card{padding:16px}
  /* 16px text in fields: iOS Safari no longer zooms in on focus */
  .input,select,textarea,.search-inline input,.glam-search input{font-size:16px}
  .summary-total{font-size:1.1rem}
  .step-title{font-size:1rem}
}
@media (max-width:480px){
  .cart-line{grid-template-columns:64px minmax(0,1fr);gap:10px 12px}
  .cart-line img,.cart-line .ph{width:64px;height:78px}
  .cart-line>.right{grid-column:2;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:start}
  .cart-line>.right form .btn{margin-block-start:0!important}
  .cart-line form.row{flex-wrap:nowrap}
  .mode-choice{grid-template-columns:1fr}
  .choice{padding:14px 12px}
  .checkout-steps{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
  .checkout-steps::-webkit-scrollbar{display:none}
  .checkout-steps li+li::before{width:12px!important}
}
@media (pointer:coarse){
  .btn-sm{min-height:44px}
  .btn-link{min-height:44px}
  .check{min-height:44px}
  .pagination li>*{min-width:44px;min-height:44px}
  .chip{min-height:44px}
  .qty button{width:48px}
}

/* ---------- 7. tables: horizontal scroll everywhere, cards on phones (.table-cards + data-label) ---------- */
.table-wrap{-webkit-overflow-scrolling:touch}
@media (max-width:640px){
  .table-wrap table:not(.table-cards){min-width:520px}
  .table-cards thead{display:none}
  .table-cards,.table-cards tbody,.table-cards tr,.table-cards td{display:block;width:100%}
  .table-cards tr{padding:10px 14px;border-block-end:1px solid var(--c-line)}
  .table-cards tr:last-child{border-block-end:0}
  .table-cards td{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:5px 0;border:0;text-align:end}
  .table-cards td::before{content:attr(data-label);color:var(--c-muted);font-size:.8rem;font-weight:600;text-align:start}
  .table-cards td[colspan]{display:block;text-align:center}
  .table-cards td[colspan]::before{content:none}
  .table-cards tbody tr:hover td{background:transparent}
}

/* ---------- 8. footer, forms, misc ---------- */
@media (min-width:481px) and (max-width:759.98px){
  .site-footer .cols{grid-template-columns:1fr 1fr}
  .site-footer .cols>:first-child{grid-column:1/-1}
}
@media (max-width:768px){
  .site-footer{padding-block:36px 24px;margin-block-start:32px}
  .site-footer .cols{gap:20px}
  .site-footer a{padding-block:8px}
  .section{padding-block:32px}
  .hero-ctas .btn{flex:1 1 auto}
  .hero-media .arch{min-height:220px}
  .promo-banner .pb-text{padding:28px 20px}
  .narrow,.article{padding-inline:0}
  .login-box{margin-block:24px}
}
@media (max-width:480px){
  .page-head{padding-block:18px 8px}
  .hero-ctas{gap:8px}
  .hero-ctas .btn{width:100%}
  .glam-cta{padding-inline:20px;font-size:.9rem}
  .grid-2,.grid-3{gap:0 12px}
  .wa-float,.sticky-cart{min-height:48px}
  .chatbot-panel{width:calc(100vw - 24px);height:min(560px,calc(100svh - 96px))}
  .chatbot{inset-inline-end:12px}
}
/* ---------- 9. Arabic: amounts « 12 500,00 د.ج » are isolated left-to-right (money() separates thousands with a plain space:
   without isolation the bidi algorithm shows « 500,00 12 ») ---------- */
[dir=rtl] .price,[dir=rtl] .price-old,[dir=rtl] .big-price,[dir=rtl] [data-price],[dir=rtl] [data-line-total],[dir=rtl] [data-total],
[dir=rtl] [data-fee],[dir=rtl] .summary-row>span:last-child,[dir=rtl] .table-cards td.right,[dir=rtl] .promo-card .big,
[dir=rtl] .pcard .tag.discount,[dir=rtl] .discount-badge{direction:ltr;unicode-bidi:isolate}
@media print{.drawer-overlay,.drawer-head{display:none!important}}