/* =====================================================================
   JOWL STORE — feuille de style unique
   Palette relevée sur une bijouterie de luxe marocaine :
     blush #EFCCC6 · crème #F9EDEB · off-white #FFFCFB
     encre #000 · brun signature #63271C · or #C9A227
   Typo : Syne (titres) + Jost (prix, méta)
   ===================================================================== */

:root{
  --blush:#EFCCC6;
  --cream:#F9EDEB;
  --offwhite:#FFFCFB;
  --ink:#000;
  --ink-soft:#201A1A;
  --brand:#63271C;
  --gold:#C9A227;
  --line:#E6D9D5;
  --grey:#7a6e6b;
  --ok:#2e7d58;
  --err:#b3261e;
  --display:'Syne',Helvetica,Arial,sans-serif;
  --meta:'Jost',Helvetica,Arial,sans-serif;
  --maxw:1340px;
  --gut:24px;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  margin:0;background:#fff;color:var(--ink);
  font-family:var(--display);font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;margin:0 0 .6em;line-height:1.15}
h1{font-size:clamp(26px,3.4vw,38px)}
h2{font-size:clamp(22px,2.6vw,30px)}
h3{font-size:18px}
p{margin:0 0 1em}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.muted{color:var(--grey)}
.center{text-align:center}

/* --- Arabe / RTL ---------------------------------------------------- */
html[dir="rtl"] body{font-family:'Noto Kufi Arabic',var(--display)}
html[dir="rtl"] .topbar__right{flex-direction:row-reverse}
html[dir="rtl"] .crumbs{direction:rtl}

/* --- Bandeau haut --------------------------------------------------- */
.topbar{
  background:var(--cream);font-family:var(--meta);
  font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--brand);
}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:34px}
.topbar a{white-space:nowrap}
.topbar a:hover{color:var(--ink)}
.topbar__right{display:flex;align-items:center;gap:18px}
.langsw{display:inline-flex;gap:6px;align-items:center}
.langsw a{opacity:.5}
.langsw a.is-on{opacity:1;font-weight:600;text-decoration:underline}

/* --- Logo ----------------------------------------------------------- */
.brandbar{background:#fff;padding:18px 0 14px;text-align:center}
.logo{display:inline-block;line-height:1}
.logo__name{
  font-family:var(--display);font-weight:700;
  font-size:clamp(30px,4.6vw,46px);letter-spacing:.14em;color:var(--brand);
}
.logo__sub{
  display:block;margin-top:6px;font-family:var(--meta);
  font-size:9px;letter-spacing:.42em;color:var(--brand);opacity:.85;
}

/* --- Navigation ----------------------------------------------------- */
.nav{background:var(--blush);position:relative;z-index:40}
.nav__list{
  display:flex;justify-content:center;flex-wrap:wrap;gap:0;
  margin:0;padding:0;list-style:none;
}
.nav__item{position:relative}
.nav__item>a{
  display:block;padding:13px 20px;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:500;
}
.nav__item:hover>a{background:rgba(255,255,255,.45)}
.nav__drop{
  position:absolute;top:100%;inset-inline-start:0;min-width:230px;background:#fff;
  border:1px solid var(--line);padding:8px 0;margin:0;list-style:none;
  opacity:0;visibility:hidden;transform:translateY(6px);transition:.18s;
  box-shadow:0 18px 40px rgba(0,0,0,.08);
}
.nav__item:hover .nav__drop{opacity:1;visibility:visible;transform:none}
.nav__drop a{display:block;padding:9px 20px;font-size:12.5px;letter-spacing:.05em}
.nav__drop a:hover{background:var(--cream);color:var(--brand)}
.navtoggle{display:none;background:none;border:0;padding:10px 14px;font-size:13px;letter-spacing:.12em;text-transform:uppercase}

/* --- Boutons -------------------------------------------------------- */
.btn{
  display:inline-block;border:0;padding:15px 34px;background:var(--blush);color:var(--ink);
  font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.17em;
  text-transform:uppercase;text-align:center;transition:.18s;
}
.btn:hover{background:var(--brand);color:#fff}
.btn--dark{background:var(--ink);color:#fff}
.btn--dark:hover{background:var(--brand)}
.btn--ghost{background:transparent;border:1px solid var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#fff}
.btn--block{display:block;width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* --- Héro ----------------------------------------------------------- */
.hero{position:relative;min-height:clamp(380px,56vw,620px);display:flex;align-items:center;
  background:linear-gradient(120deg,#2b2b2e,#5a4a45 55%,#8d6f66);overflow:hidden}
.hero__card{
  background:rgba(255,255,255,.88);padding:38px 40px;max-width:430px;margin:0 var(--gut);
  backdrop-filter:blur(2px);
}
.hero__kicker{font-family:var(--meta);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--brand)}
.hero__card h1{margin:10px 0 14px}
.hero__card p{font-size:14px;color:#3a3330}
.hero__link{display:inline-block;margin-top:8px;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:3px}

/* --- Bandeau réassurance -------------------------------------------- */
.usp{background:var(--cream);font-family:var(--meta);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.usp .wrap{display:flex;justify-content:center;gap:clamp(18px,6vw,70px);flex-wrap:wrap;padding-block:14px;color:var(--brand)}

/* --- Sections ------------------------------------------------------- */
.section{padding:clamp(44px,6vw,78px) 0}
.section--cream{background:var(--offwhite)}
.section__head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:26px;flex-wrap:wrap}
.section__head h2{margin:0}
.section__more{font-family:var(--meta);font-size:11px;letter-spacing:.18em;text-transform:uppercase;border-bottom:1px solid currentColor}

/* --- Grille produits ------------------------------------------------ */
.grid{display:grid;gap:26px 20px;grid-template-columns:repeat(4,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{position:relative;display:block}
.card__media{position:relative;background:var(--cream);aspect-ratio:1/1;overflow:hidden}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease,opacity .3s}
.card:hover .card__media img{transform:scale(1.045)}
.card__media img+img{position:absolute;inset:0;opacity:0}
.card:hover .card__media img+img{opacity:1}
.card__tag{
  position:absolute;top:10px;inset-inline-start:10px;background:#fff;color:var(--brand);
  font-family:var(--meta);font-size:9px;letter-spacing:.14em;text-transform:uppercase;padding:5px 9px;
}
.card__tag--out{background:var(--ink);color:#fff}
.card__body{display:flex;justify-content:space-between;gap:12px;padding-top:12px}
.card__name{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;line-height:1.45}
.card__price{font-family:var(--meta);font-size:11.5px;font-weight:500;white-space:nowrap;text-transform:uppercase}
.card__price del{color:var(--grey);margin-inline-end:6px;font-weight:400}

/* --- Rayons (home) -------------------------------------------------- */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tile{position:relative;aspect-ratio:3/4;background:var(--cream);display:flex;align-items:flex-end;overflow:hidden}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85;transition:transform .7s}
.tile:hover img{transform:scale(1.05)}
.tile__in{position:relative;padding:26px;background:linear-gradient(transparent,rgba(0,0,0,.55));width:100%;color:#fff}
.tile__in h3{margin:0 0 4px;font-size:20px;letter-spacing:.06em;text-transform:uppercase}
.tile__in span{font-family:var(--meta);font-size:10px;letter-spacing:.2em;text-transform:uppercase}

/* --- Fil d'Ariane --------------------------------------------------- */
.crumbs{font-family:var(--meta);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);padding:14px 0}
.crumbs a:hover{color:var(--brand)}

/* --- Boutique : filtres --------------------------------------------- */
.shop{display:grid;grid-template-columns:230px 1fr;gap:40px;align-items:start}
.facets{position:sticky;top:16px;font-size:13px}
.facets h4{font-family:var(--meta);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brand);margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.facets ul{list-style:none;margin:0 0 26px;padding:0}
.facets li{padding:4px 0}
.facets a{font-size:13px}
.facets a:hover,.facets a.is-on{color:var(--brand);font-weight:600}
.shop__bar{display:flex;justify-content:space-between;align-items:center;gap:14px;
  margin-bottom:22px;padding-bottom:14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.shop__count{font-family:var(--meta);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey)}
select,input,textarea{
  font-family:var(--meta);font-size:13px;padding:11px 12px;border:1px solid var(--line);
  background:#fff;color:var(--ink);width:100%;border-radius:0;
}
select:focus,input:focus,textarea:focus{outline:none;border-color:var(--brand)}
.shop__bar select{width:auto;min-width:190px}

/* --- Fiche produit -------------------------------------------------- */
.pdp{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,64px);padding-bottom:40px}
.pdp__gal{display:grid;gap:10px}
.pdp__main{background:var(--cream);aspect-ratio:1/1}
.pdp__main img{width:100%;height:100%;object-fit:cover}
.pdp__thumbs{display:flex;gap:10px}
.pdp__thumbs button{width:72px;height:72px;padding:0;border:1px solid var(--line);background:var(--cream)}
.pdp__thumbs button.is-on{border-color:var(--brand)}
.pdp__head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.pdp__head h1{font-size:clamp(22px,2.4vw,28px);text-transform:uppercase;letter-spacing:.02em;max-width:62%}
.pdp__price{font-family:var(--meta);font-size:15px;font-weight:500;white-space:nowrap}
.pdp__price del{display:block;font-size:12px;color:var(--grey);font-weight:400}
.pdp__desc{border-top:1px solid var(--line);padding-top:18px;margin-top:18px;font-size:14px}
.specs{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);margin:22px 0}
.specs div{padding:12px 14px;border-inline-end:1px solid var(--line)}
.specs div:last-child{border:0}
.specs dt{font-family:var(--meta);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);margin:0 0 4px}
.specs dd{margin:0;font-size:12.5px;text-transform:uppercase;letter-spacing:.04em}
.addrow{display:flex;gap:12px;align-items:stretch;margin-top:6px}
.qty{display:flex;align-items:center;border:1px solid var(--line);width:112px;flex:0 0 112px}
.qty button{width:34px;height:100%;background:none;border:0;font-size:16px;color:var(--brand)}
.qty input{border:0;text-align:center;padding:12px 0;width:44px}
.pdp__meta{font-family:var(--meta);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);margin-top:22px}
.pdp__wa{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-family:var(--meta);
  font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--brand);border-bottom:1px solid currentColor}

/* --- Panier --------------------------------------------------------- */
.cart{display:grid;grid-template-columns:1fr 340px;gap:40px;align-items:start;padding:10px 0 60px}
.cartline{display:grid;grid-template-columns:92px 1fr auto;gap:16px;padding:18px 0;border-bottom:1px solid var(--line);align-items:center}
.cartline img{width:92px;height:92px;object-fit:cover;background:var(--cream)}
.cartline__name{font-size:13px;text-transform:uppercase;letter-spacing:.05em}
.cartline__sku{font-family:var(--meta);font-size:10px;letter-spacing:.1em;color:var(--grey);text-transform:uppercase}
.cartline__rm{background:none;border:0;padding:0;margin-top:8px;font-family:var(--meta);font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--grey);border-bottom:1px solid currentColor}
.cartline__rm:hover{color:var(--err)}
.summary{background:var(--offwhite);border:1px solid var(--line);padding:24px}
.summary h3{font-size:13px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:16px}
.summary__row{display:flex;justify-content:space-between;font-family:var(--meta);font-size:13px;padding:7px 0}
.summary__row--total{border-top:1px solid var(--line);margin-top:10px;padding-top:14px;font-size:16px;font-weight:600}
.notice{background:var(--cream);border-inline-start:3px solid var(--brand);padding:16px 18px;font-size:13.5px;margin-bottom:22px}

/* --- Checkout ------------------------------------------------------- */
.checkout{display:grid;grid-template-columns:1.25fr .75fr;gap:44px;align-items:start;padding-bottom:60px}
.field{margin-bottom:16px}
.field label{display:block;font-family:var(--meta);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey);margin-bottom:6px}
.field .err{display:none;color:var(--err);font-family:var(--meta);font-size:11px;margin-top:5px}
.field.is-bad input,.field.is-bad select,.field.is-bad textarea{border-color:var(--err)}
.field.is-bad .err{display:block}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pay{border:1px solid var(--line);margin-bottom:12px}
.pay label{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;cursor:pointer;font-size:14px}
.pay input{width:auto;margin-top:3px}
.pay small{display:block;color:var(--grey);font-family:var(--meta);font-size:12px;margin-top:3px}
.pay.is-on{border-color:var(--brand);background:var(--offwhite)}
.orderline{display:flex;justify-content:space-between;gap:14px;font-family:var(--meta);font-size:13px;
  padding:10px 0;border-bottom:1px solid var(--line)}
.legend{font-family:var(--meta);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brand);margin:0 0 14px;padding-bottom:8px;border-bottom:1px solid var(--line)}

/* --- Confirmation --------------------------------------------------- */
.thanks{max-width:620px;margin:0 auto;text-align:center;padding:70px 0 90px}
.thanks__num{display:inline-block;font-family:var(--meta);letter-spacing:.2em;background:var(--cream);
  padding:10px 22px;margin:14px 0 22px;color:var(--brand)}

/* --- Pied de page --------------------------------------------------- */
.foot{background:var(--blush);margin-top:40px}
.foot__top{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:center;
  padding:34px 0;border-bottom:1px solid rgba(99,39,28,.18);
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--brand)}
.foot__cols{display:grid;grid-template-columns:repeat(5,1fr);gap:26px;padding:40px 0}
.foot h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px}
.foot ul{list-style:none;margin:0;padding:0;font-family:var(--meta);font-size:12.5px}
.foot li{padding:3px 0}
.foot a:hover{color:#fff}
.foot__bar{border-top:1px solid rgba(99,39,28,.18);padding:16px 0;font-family:var(--meta);
  font-size:11px;letter-spacing:.06em;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}

/* --- Panier flottant / toast ---------------------------------------- */
.toast{
  position:fixed;inset-inline-end:20px;bottom:20px;background:var(--ink);color:#fff;
  padding:14px 20px;font-family:var(--meta);font-size:13px;letter-spacing:.06em;
  transform:translateY(130%);transition:.3s;z-index:90;
}
.toast.is-on{transform:none}
.wa-float{
  position:fixed;inset-inline-end:18px;bottom:78px;width:50px;height:50px;border-radius:50%;
  background:#25D366;display:grid;place-items:center;z-index:80;box-shadow:0 8px 22px rgba(0,0,0,.2);
}
.wa-float svg{width:26px;height:26px;fill:#fff}
.cartcount{display:inline-block;min-width:16px;height:16px;line-height:16px;text-align:center;
  background:var(--brand);color:#fff;border-radius:50%;font-size:9px;margin-inline-start:5px}

/* --- Responsive ----------------------------------------------------- */
@media(max-width:1080px){
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot__cols{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:860px){
  .shop{grid-template-columns:minmax(0,1fr)}
  .shop>*{min-width:0}
  .facets{position:static;display:none}
  .facets.is-open{display:block}
  .pdp,.cart,.checkout{grid-template-columns:1fr}
  .tiles{grid-template-columns:1fr}
  .navtoggle{display:block;width:100%;text-align:center;background:var(--blush)}
  .nav__list{display:none;flex-direction:column}
  .nav__list.is-open{display:flex}
  .nav__item>a{padding:12px 20px;border-top:1px solid rgba(99,39,28,.15)}
  .nav__drop{position:static;opacity:1;visibility:visible;transform:none;border:0;box-shadow:none;
    background:rgba(255,255,255,.5);display:none}
  .nav__item.is-open .nav__drop{display:block}
}
@media(max-width:640px){
  .grid,.grid--3{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}
  .shop__bar{gap:10px}
  .shop__bar form{flex:1 1 100%}
  .shop__bar select{width:100%;min-width:0}
  .card__body{flex-direction:column;gap:3px}
  .card__name{font-size:11.5px}
  .card__price{font-size:11px;white-space:normal}
  .card__price del{display:inline-block}
  .foot__cols,.foot__top{grid-template-columns:1fr;text-align:start}
  .topbar .wrap{font-size:9px;gap:8px}
  .specs{grid-template-columns:1fr}
  .specs div{border-inline-end:0;border-bottom:1px solid var(--line)}
  .row2{grid-template-columns:1fr}
}

/* =====================================================================
   Bloc « commande express » (paiement à la livraison) — fiche produit
   Couleurs pilotées par inc/config.php → --cod / --cod-dark
   ===================================================================== */
.codbox{
  border:1px solid var(--line);border-radius:14px;background:#fff;
  padding:22px;margin-top:26px;box-shadow:0 10px 34px rgba(0,0,0,.05);
  font-family:var(--meta);
}
.codbox__title{
  font-family:var(--display);font-weight:700;font-size:18px;line-height:1.35;
  text-align:center;margin:0 0 18px;color:var(--ink);
}
.codbox__item{
  display:flex;gap:14px;align-items:center;
  border:1px solid var(--line);border-radius:10px;background:#FBFAFA;padding:12px;margin-bottom:14px;
}
.codbox__item img{width:62px;height:62px;object-fit:cover;border-radius:7px;background:var(--cream);flex:0 0 62px}
.codbox__item b{display:block;font-family:var(--display);font-size:14px;line-height:1.35;margin-bottom:4px}
.codbox__item span{font-size:15px;font-weight:600;color:var(--cod)}

.codrow{
  display:flex;align-items:stretch;border:1px solid var(--line);
  border-radius:10px;overflow:hidden;margin-bottom:12px;background:#fff;
}
.codrow__ico{
  flex:0 0 52px;display:grid;place-items:center;background:#F4F3F2;
  border-inline-end:1px solid var(--line);color:#8b8380;
}
.codrow__ico svg{width:19px;height:19px;fill:currentColor}
.codrow input{border:0;padding:15px 14px;font-size:14.5px;background:transparent}
.codrow input::placeholder{color:#9a938f}
.codrow input:focus{outline:none}
.codrow.is-bad{border-color:var(--err)}
.codrow.is-bad .codrow__ico{background:#FDEDEC;color:var(--err)}

.codqty{justify-content:space-between;align-items:center;padding-inline-end:10px}
.codqty__label{flex:1;padding:14px;font-size:14.5px;color:#6f6764}
.codqty__ctrl{display:flex;align-items:center;gap:10px}
.codqty__ctrl button{
  width:40px;height:40px;border:1px solid var(--line);border-radius:9px;background:#F4F3F2;
  font-size:19px;line-height:1;color:#4a4340;transition:.15s;
}
.codqty__ctrl button:hover{background:var(--cream);border-color:var(--cod)}
.codqty__ctrl output{min-width:26px;text-align:center;font-size:16px;font-weight:600}

.codbox__total{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  border:1px dashed var(--line);border-radius:10px;background:#FBFAFA;
  padding:16px;margin:16px 0;
}
.codbox__total span{font-size:14.5px;color:#6f6764}
.codbox__total b{font-size:21px;color:var(--cod);font-family:var(--meta)}
.codbox__ship{
  display:flex;justify-content:space-between;font-size:12.5px;color:var(--grey);
  margin:-8px 2px 14px;
}
.codbox__cta{
  display:block;width:100%;border:0;border-radius:10px;background:var(--cod);color:#fff;
  padding:19px;font-family:var(--display);font-weight:700;font-size:15px;
  letter-spacing:.06em;text-transform:uppercase;transition:.18s;
}
.codbox__cta:hover{background:var(--cod-dark)}
.codbox__cta[disabled]{opacity:.6;cursor:wait}
.codbox__note{text-align:center;font-size:12px;color:var(--grey);margin:12px 0 0}
.codbox__err{color:var(--err);font-size:13px;text-align:center;margin:12px 0 0;display:none}
.codbox__err.is-on{display:block}

@media(max-width:640px){
  .codbox{padding:18px 14px;border-radius:12px}
  .codbox__title{font-size:16px}
  .codrow input{padding:14px 12px}
}