.pk3-showroom{
  --bg:#fbf7ef;
  --panel:#ffffff;
  --gold:#b88a3c;
  --ink:#1f1a15;
  --muted:#6f675e;
  --line:#eadfce;
  --soft:#fffdf9;
  font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,#fffdf8 0%,#f8f1e6 100%);
  border-radius:28px;
  overflow:hidden;
  position:relative;
  box-shadow:0 24px 70px rgba(29,23,18,.08)
}
.pk3-showroom *{box-sizing:border-box}
.pk3-header{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;padding:24px 28px 14px}
.pk3-kicker{display:inline-flex;border:1px solid rgba(184,138,60,.26);border-radius:999px;padding:7px 12px;color:var(--gold);text-transform:uppercase;letter-spacing:.12em;font-size:12px;background:#fff}
.pk3-header h1{font-size:clamp(24px,3.2vw,40px);line-height:1.05;margin:10px 0 6px;color:var(--ink)}
.pk3-header p{margin:0;color:var(--muted);max-width:760px;font-size:15px;line-height:1.55}
.pk3-header-actions{display:flex;gap:10px;flex-wrap:wrap}
.pk3-btn{border:0;border-radius:999px;padding:12px 18px;font-weight:850;text-decoration:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;line-height:1}
.pk3-primary{background:linear-gradient(135deg,#cba260,#a77730);color:#fff;box-shadow:0 12px 22px rgba(184,138,60,.20)}
.pk3-ghost{background:#fff;border:1px solid var(--line);color:var(--ink)}
.pk3-whatsapp{background:#21bf63;color:#fff}
.pk3-empty{margin:0 28px 28px;padding:22px;border:1px dashed var(--line);border-radius:18px;color:var(--muted);background:#fff}

.pk3-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding:0 28px 16px}
.pk3-nav-btn{border:1px solid var(--line);background:#fff;border-radius:22px;padding:9px;cursor:pointer;font-weight:850;color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:9px;box-shadow:0 10px 28px rgba(0,0,0,.04);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.pk3-nav-btn:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(0,0,0,.06)}
.pk3-nav-btn.is-active{border-color:rgba(184,138,60,.55);box-shadow:0 14px 38px rgba(184,138,60,.15)}
.pk3-nav-thumb{position:relative;display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:linear-gradient(180deg,#f9f2e7,#efe3d2)}
.pk3-nav-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .22s ease,filter .22s ease,transform .22s ease}
.pk3-nav-img-color{opacity:0;filter:none}.pk3-nav-img-gray{opacity:1;filter:none}
.pk3-nav-btn:not(.is-active) .pk3-nav-img-color:only-child{opacity:1;filter:grayscale(1)}
.pk3-nav-btn.is-active .pk3-nav-img-color{opacity:1}.pk3-nav-btn.is-active .pk3-nav-img-gray{opacity:0}
.pk3-nav-btn:hover .pk3-nav-img{transform:scale(1.03)}
.pk3-nav-thumb-fallback{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:42px;font-weight:950;color:var(--gold)}
.pk3-nav-label{font-size:14px;line-height:1.2;text-align:center;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}

.pk3-stage{position:relative;margin:0 20px 10px;border:1px solid var(--line);border-radius:26px;background:rgba(255,255,255,.72);overflow:hidden}
.pk3-camera{height:min(74vh,760px);min-height:520px;overflow:hidden;position:relative;background:linear-gradient(180deg,#fffdfa 0,#f8f2e9 100%)}
.pk3-track{height:100%;display:flex;transition:transform .55s cubic-bezier(.2,.8,.2,1);position:relative;z-index:1}
.pk3-aisle{min-width:100%;height:100%;padding:20px clamp(14px,3.2vw,42px) 24px;display:flex;flex-direction:column}
.pk3-aisle-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px}
.pk3-aisle-head span{color:var(--gold);text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:800}
.pk3-aisle-head h2{font-size:clamp(22px,3vw,34px);line-height:1.08;margin:3px 0;color:var(--ink)}
.pk3-aisle-head p{margin:0;color:var(--muted);font-size:14px}
.pk3-sign{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;color:var(--gold);font-weight:950;font-size:19px;border:1px solid rgba(184,138,60,.22)}
.pk3-shelf-viewport{flex:1;overflow:auto;overscroll-behavior:contain;border-radius:22px;border:1px solid var(--line);background:var(--soft);padding:18px;touch-action:pan-x pan-y;scrollbar-width:thin}
.pk3-product-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px;width:100%;position:relative}
.pk3-product-card{position:relative;z-index:1;border:0;background:transparent;padding:0;color:var(--ink);cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:9px;justify-content:flex-start;align-items:flex-start;transition:transform .18s ease}
.pk3-product-card:hover{transform:translateY(-4px)}
.pk3-product-img{width:100%;aspect-ratio:1/1;background:#f3eadc;border-radius:16px;display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid rgba(234,223,206,.75)}
.pk3-product-img img{max-width:88%;max-height:88%;object-fit:contain;filter:drop-shadow(0 9px 10px rgba(0,0,0,.10))}
.pk3-product-card strong{font-size:13px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:850;min-height:32px}
.pk3-product-card em{font-style:normal;font-weight:950;color:var(--gold);font-size:13px;line-height:1.2}
.pk3-no-products{padding:20px;color:var(--muted);grid-column:1/-1}
.pk3-arrow{position:absolute;z-index:3;top:50%;transform:translateY(-50%);width:44px;height:58px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.96);color:var(--ink);font-size:36px;cursor:pointer;box-shadow:0 14px 30px rgba(0,0,0,.08)}
.pk3-left{left:10px}.pk3-right{right:10px}
.pk3-help{text-align:center;color:#8b837a;font-size:12px;padding:0 20px 16px}

.pk3-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.48);z-index:9998}
.pk3-panel{display:none;position:fixed;z-index:9999;left:50%;top:50%;transform:translate(-50%,-50%);width:min(940px,93vw);max-height:90vh;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:28px;box-shadow:0 40px 120px rgba(0,0,0,.2);grid-template-columns:42% 58%}
.pk3-panel.is-open{display:grid}.pk3-overlay.is-open{display:block}
.pk3-close{position:absolute;right:14px;top:12px;width:42px;height:42px;border-radius:50%;border:0;background:rgba(0,0,0,.06);color:#4d4339;font-size:28px;cursor:pointer;z-index:2}
.pk3-panel-img{background:linear-gradient(145deg,#fbf4e9,#f2e6d4);display:flex;align-items:center;justify-content:center;padding:28px;min-height:360px}
.pk3-panel-img img{max-width:100%;max-height:340px;object-fit:contain;filter:drop-shadow(0 18px 20px rgba(0,0,0,.14))}
.pk3-panel-body{padding:32px}.pk3-cat{text-transform:uppercase;letter-spacing:.14em;color:var(--gold);font-size:12px;font-weight:800}
.pk3-panel h2{font-size:clamp(28px,4vw,40px);line-height:1.08;margin:10px 0;color:var(--ink)}.pk3-price{font-size:23px;color:var(--gold);font-weight:950;margin:10px 0 14px}.pk3-panel p{color:var(--muted);line-height:1.65}.pk3-panel small{display:block;color:#83786d}.pk3-panel-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}

@media(max-width:1024px){.pk3-product-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.pk3-nav{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.pk3-nav-label{font-size:13px}}
@media(max-width:780px){
  .pk3-showroom{border-radius:18px}
  .pk3-header{display:block;padding:20px 16px 12px}
  .pk3-header-actions{margin-top:14px}.pk3-btn{padding:11px 14px;font-size:13px}
  .pk3-nav{padding:0 12px 12px;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
  .pk3-nav-btn{border-radius:14px;padding:5px;gap:5px}.pk3-nav-thumb{border-radius:11px;aspect-ratio:1/1}.pk3-nav-label{font-size:10px;line-height:1.1}
  .pk3-stage{margin:0 8px 8px;border-radius:18px}
  .pk3-camera{height:72vh;min-height:520px}
  .pk3-aisle{padding:16px 10px 20px}
  .pk3-aisle-head{align-items:flex-start;margin-bottom:12px}.pk3-aisle-head p{font-size:12px}.pk3-sign{width:40px;height:40px;font-size:16px}
  .pk3-shelf-viewport{padding:12px;border-radius:16px}
  .pk3-product-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .pk3-product-img{border-radius:13px}.pk3-product-card{gap:6px}.pk3-product-card strong{font-size:11px;line-height:1.18;min-height:27px}.pk3-product-card em{font-size:11px}
  .pk3-arrow{width:34px;height:50px;font-size:31px}.pk3-left{left:2px}.pk3-right{right:2px}
  .pk3-panel{grid-template-columns:1fr;border-radius:22px}.pk3-panel-img{min-height:240px;padding:20px}.pk3-panel-img img{max-height:230px}.pk3-panel-body{padding:24px}.pk3-help{font-size:11px;padding-bottom:12px}
}
@media(max-width:390px){.pk3-product-grid{gap:9px}.pk3-product-card strong,.pk3-product-card em{font-size:10.5px}.pk3-nav{gap:5px}.pk3-nav-label{font-size:9.5px}}

/* V3.5 - Fix RTL thème arabe
   Le site peut passer en dir=rtl, mais le rail horizontal du showroom doit rester en LTR.
   Sans cette isolation, le flex/grid du rail s'inverse et le swipe peut afficher des rayons vides. */
.pk3-showroom .pk3-stage,
.pk3-showroom .pk3-camera,
.pk3-showroom .pk3-track,
.pk3-showroom .pk3-aisle,
.pk3-showroom .pk3-shelf-viewport,
.pk3-showroom .pk3-product-grid,
.pk3-showroom .pk3-nav{
  direction:ltr !important;
}
.pk3-showroom .pk3-track{
  flex-direction:row !important;
}
.pk3-showroom.pk3-page-rtl .pk3-header,
.pk3-showroom.pk3-page-rtl .pk3-aisle-head,
.pk3-showroom.pk3-page-rtl .pk3-panel-body{
  direction:rtl;
  text-align:right;
}
.pk3-showroom.pk3-page-rtl .pk3-header-actions,
.pk3-showroom.pk3-page-rtl .pk3-panel-actions{
  direction:rtl;
}
.pk3-showroom.pk3-page-rtl .pk3-product-card{
  direction:rtl;
  text-align:right;
  align-items:flex-end;
}
.pk3-showroom.pk3-page-rtl .pk3-nav-label{
  text-align:center;
}
.pk3-showroom.pk3-page-rtl .pk3-sign{
  margin-inline-start:0;
}


/* V3.6 - Correctif modal produit mobile
   Le header du thème Pack'Arijing a un z-index élevé. On place donc la fenêtre produit au-dessus,
   on bloque le scroll de la page arrière et on rend la fenêtre réellement scrollable sur mobile. */
html.pk3-modal-lock,
body.pk3-modal-lock{
  overflow:hidden !important;
  overscroll-behavior:none !important;
  touch-action:none !important;
}
.pk3-overlay{
  z-index:2147483000 !important;
  overscroll-behavior:contain;
}
.pk3-panel{
  z-index:2147483001 !important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
}
.pk3-close{
  z-index:2147483002 !important;
}
@media(max-width:780px){
  .pk3-overlay.is-open{
    display:block !important;
    position:fixed !important;
    inset:0 !important;
  }
  .pk3-panel{
    left:10px !important;
    right:10px !important;
    top:calc(env(safe-area-inset-top, 0px) + 10px) !important;
    bottom:calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
    width:auto !important;
    max-width:none !important;
    height:auto !important;
    max-height:none !important;
    transform:none !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    border-radius:24px !important;
    grid-template-columns:1fr !important;
    padding-bottom:0;
  }
  .pk3-panel.is-open{
    display:block !important;
  }
  .pk3-close{
    position:fixed !important;
    top:calc(env(safe-area-inset-top, 0px) + 18px) !important;
    right:18px !important;
    width:46px !important;
    height:46px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:rgba(255,255,255,.96) !important;
    color:#1f1a15 !important;
    border:1px solid rgba(0,0,0,.08) !important;
    box-shadow:0 10px 28px rgba(0,0,0,.18) !important;
    line-height:1 !important;
  }
  .pk3-panel-img{
    min-height:220px !important;
    padding:54px 18px 16px !important;
  }
  .pk3-panel-img img{
    max-height:210px !important;
  }
  .pk3-panel-body{
    padding:22px 22px 26px !important;
  }
  .pk3-panel-actions{
    position:sticky;
    bottom:0;
    z-index:5;
    margin:18px -22px -26px;
    padding:12px 22px calc(env(safe-area-inset-bottom, 0px) + 14px);
    background:linear-gradient(180deg,rgba(255,255,255,.88),#fff 36%);
    box-shadow:0 -10px 22px rgba(0,0,0,.04);
  }
}


/* V4.9.3 - Correctif SAFE : modal mobile plus haute, active, non grisée.
   JS original conservé pour éviter showroom vide. */

html.pk3-modal-lock,
body.pk3-modal-lock{
  overflow:hidden!important;
  overscroll-behavior:none!important;
  touch-action:auto!important;
}

.pk3-overlay{
  z-index:2147483000!important;
  background:rgba(0,0,0,.42)!important;
  opacity:1!important;
  visibility:visible!important;
  filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

.pk3-panel{
  z-index:2147483001!important;
  background:#fffdf9!important;
  opacity:1!important;
  visibility:visible!important;
  filter:none!important;
  mix-blend-mode:normal!important;
  isolation:isolate!important;
}

.pk3-panel *,
.pk3-panel img{
  filter:none!important;
  mix-blend-mode:normal!important;
}

@media(max-width:780px){

  .pk3-overlay.is-open{
    display:block!important;
    position:fixed!important;
    inset:0!important;
  }

  .pk3-panel,
  html[dir="rtl"] .pk3-panel,
  body[dir="rtl"] .pk3-panel{
    position:fixed!important;

    top:86px!important;
    left:8px!important;
    right:8px!important;
    bottom:8px!important;

    width:auto!important;
    max-width:none!important;
    height:auto!important;
    max-height:none!important;

    transform:none!important;
    margin:0!important;

    overflow-y:auto!important;
    overflow-x:hidden!important;

    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain!important;
    touch-action:pan-y!important;

    border-radius:26px!important;
    border:1px solid rgba(184,138,60,.14)!important;
    box-shadow:0 26px 90px rgba(0,0,0,.28)!important;
    background:#fffdf9!important;
  }

  .pk3-panel.is-open,
  html[dir="rtl"] .pk3-panel.is-open,
  body[dir="rtl"] .pk3-panel.is-open{
    display:block!important;
  }

  html[dir="rtl"] .pk3-panel,
  body[dir="rtl"] .pk3-panel{
    direction:rtl!important;
    text-align:right!important;
  }

  .pk3-close{
    position:sticky!important;
    top:10px!important;
    float:right!important;
    margin:10px 10px -64px auto!important;

    width:54px!important;
    height:54px!important;
    min-width:54px!important;

    display:flex!important;
    align-items:center!important;
    justify-content:center!important;

    border-radius:50%!important;
    background:#fff!important;
    color:#211a15!important;
    border:1px solid rgba(0,0,0,.08)!important;
    box-shadow:0 10px 28px rgba(0,0,0,.18)!important;

    font-size:34px!important;
    line-height:1!important;
    z-index:2147483002!important;
  }

  html[dir="rtl"] .pk3-close,
  body[dir="rtl"] .pk3-close{
    float:left!important;
    margin:10px auto -64px 10px!important;
  }

  .pk3-panel-img{
    height:43vh!important;
    min-height:43vh!important;
    padding:58px 16px 14px!important;

    display:flex!important;
    align-items:center!important;
    justify-content:center!important;

    background:linear-gradient(145deg,#fbf4e9,#f2e6d4)!important;
    overflow:hidden!important;
  }

  .pk3-panel-img img{
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    max-height:100%!important;
    object-fit:contain!important;
    display:block!important;
    opacity:1!important;
    filter:none!important;
  }

  .pk3-panel-body{
    padding:22px 22px 24px!important;
    background:#fffdf9!important;
  }

  .pk3-panel h2{
    font-size:25px!important;
    line-height:1.2!important;
    margin:8px 0 10px!important;
  }

  .pk3-panel p{
    font-size:15px!important;
    line-height:1.65!important;
  }

  .pk3-price{
    font-size:21px!important;
    margin:8px 0 12px!important;
  }

  .pk3-panel-actions{
    position:sticky!important;
    bottom:0!important;
    z-index:5!important;
    margin:20px -22px -24px!important;
    padding:14px 16px calc(14px + env(safe-area-inset-bottom))!important;
    background:rgba(255,255,255,.98)!important;
    border-top:1px solid rgba(184,138,60,.16)!important;
    box-shadow:0 -10px 28px rgba(0,0,0,.08)!important;
    display:flex!important;
    gap:10px!important;
  }

  .pk3-panel-actions .pk3-btn{
    flex:1 1 0!important;
    min-height:46px!important;
    border-radius:16px!important;
    font-size:14px!important;
  }
}

@media(max-width:390px){
  .pk3-panel,
  html[dir="rtl"] .pk3-panel,
  body[dir="rtl"] .pk3-panel{
    top:82px!important;
    left:6px!important;
    right:6px!important;
    bottom:6px!important;
  }

  .pk3-panel-img{
    height:39vh!important;
    min-height:39vh!important;
  }

  .pk3-panel h2{
    font-size:22px!important;
  }

  .pk3-panel-actions{
    gap:8px!important;
    padding-left:12px!important;
    padding-right:12px!important;
  }
}


/* V4.9.4 - Modal vraiment active/non grisée + scroll automatique doux */
.pk3-showroom .pk3-overlay,
.pk3-overlay{
  background:rgba(0,0,0,.34)!important;
  opacity:1!important;
  filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  pointer-events:auto!important;
}

.pk3-showroom .pk3-panel,
.pk3-panel{
  background:#fffdf9!important;
  opacity:1!important;
  filter:none!important;
  -webkit-filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  mix-blend-mode:normal!important;
  isolation:isolate!important;
  pointer-events:auto!important;
  color:#1f1a15!important;
}

.pk3-panel::before,
.pk3-panel::after{
  opacity:0!important;
  display:none!important;
  content:none!important;
}

.pk3-panel *,
.pk3-panel img,
.pk3-panel .pk3-panel-img,
.pk3-panel .pk3-panel-body,
.pk3-panel .pk3-panel-actions{
  opacity:1!important;
  filter:none!important;
  -webkit-filter:none!important;
  mix-blend-mode:normal!important;
}

@media(max-width:780px){
  .pk3-overlay.is-open{
    z-index:2147483000!important;
  }

  .pk3-panel.is-open{
    z-index:2147483005!important;
    background:#fffdf9!important;
    opacity:1!important;
    filter:none!important;
    -webkit-filter:none!important;
    box-shadow:0 28px 90px rgba(0,0,0,.34)!important;
  }

  .pk3-panel-img{
    background:linear-gradient(145deg,#fff8ef,#f3e6d3)!important;
  }

  .pk3-panel-actions{
    background:#ffffff!important;
  }
}


/* V4.9.5 - Scroll handoff produits -> page */
.pk3-shelf-viewport{
  overscroll-behavior-y:auto!important;
  overscroll-behavior-x:contain!important;
  -webkit-overflow-scrolling:touch!important;
}

.pk3-camera{
  overscroll-behavior-y:auto!important;
}
