:root{
  --burgundy:#7d1d2d;
  --burgundy-dark:#5c1320;
  --ink:#16191c;
  --muted:#6b7175;
  --cream:#faf7f3;
  --cream-2:#f5eee7;
  --line:#e8ddd5;
  --white:#fff;
  --green:#18744a;
  --shadow:0 14px 38px rgba(48,34,27,.09);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Tahoma,Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.55;padding-bottom:78px}
img{display:block;max-width:100%}
button,input,select{font:inherit}
a{text-decoration:none;color:inherit}
fieldset{border:0;padding:0;margin:0}

.topbar{background:var(--burgundy-dark);color:#fff;display:flex;gap:22px;align-items:center;overflow:auto;white-space:nowrap;padding:10px 14px;font-size:12px;scrollbar-width:none}
.topbar::-webkit-scrollbar{display:none}

.hero{padding:14px 14px 34px;display:grid;grid-template-areas:"intro" "media" "actions";gap:16px;max-width:1180px;margin:auto}
.hero-intro{grid-area:intro;text-align:center}
.hero-media{grid-area:media;position:relative}
.hero-actions-block{grid-area:actions;text-align:center}
.hero-media img{width:100%;height:clamp(280px,72vw,330px);object-fit:cover;object-position:center 62%;border-radius:22px;box-shadow:var(--shadow)}
.hero-colors{position:absolute;left:10px;right:10px;bottom:10px;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;direction:ltr}
.hero-colors span{background:rgba(255,255,255,.92);backdrop-filter:blur(8px);padding:7px 4px;border-radius:10px;text-align:center;font-size:11px;font-weight:800;box-shadow:0 4px 14px rgba(0,0,0,.08)}
.eyebrow,.kicker{display:inline-flex;align-items:center;gap:7px;color:var(--burgundy);font-size:13px;font-weight:900}
.eyebrow em{font-style:normal;color:#9b6c73;font-size:11px;font-weight:700}
.hero h1{font-size:36px;line-height:1.08;letter-spacing:-.5px;margin:9px 0 12px}
.hero h1 strong{color:var(--burgundy)}
.hero-lead{font-size:16px;color:#4f565a;margin:0 auto 4px;max-width:560px}
.microcopy{margin:3px 0 0;color:#8a8f92;font-size:12px;direction:ltr;text-align:center}
.hero-points{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.hero-points span{background:var(--cream);border:1px solid var(--line);padding:7px 10px;border-radius:999px;font-size:12px;font-weight:800}
.btn{border:0;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:900;cursor:pointer}
.btn-primary{width:100%;max-width:480px;background:var(--burgundy);color:#fff;padding:14px 18px;box-shadow:0 10px 24px rgba(125,29,45,.23)}
.btn small{font-size:11px;font-weight:700;opacity:.8;direction:ltr}

.section{padding:44px 14px;max-width:1120px;margin:auto}
.section-tight{padding:0 14px 34px;max-width:1120px;margin:auto}
.section-head{text-align:center;margin:0 auto 20px;max-width:720px}.section-head.compact{margin-bottom:16px}
.section-head h2{font-size:29px;line-height:1.15;margin:5px 0 6px}.section-head>p:not(.microcopy){margin:0;color:var(--muted);font-size:14px}
.trust-strip{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.trust-strip article{background:var(--cream);border:1px solid var(--line);border-radius:16px;padding:13px 10px;text-align:center}.trust-strip article>span{display:block;font-size:21px;margin-bottom:3px}.trust-strip b{display:block;font-size:13px}.trust-strip small{display:block;font-size:10px;color:var(--muted);direction:ltr}

.colors{padding-top:38px}.color-pairs{display:grid;gap:14px}.pair-card{margin:0;position:relative;overflow:hidden;border-radius:20px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}.pair-card img{width:100%;aspect-ratio:12/7;object-fit:cover}.pair-card figcaption{position:absolute;left:8px;right:8px;bottom:8px;display:grid;grid-template-columns:1fr 1fr;gap:8px;direction:ltr}.pair-card figcaption span{background:rgba(255,255,255,.94);backdrop-filter:blur(7px);padding:7px 8px;border-radius:10px;text-align:center;font-size:11px;font-weight:900;box-shadow:0 4px 16px rgba(0,0,0,.08)}

.before-after{padding-top:38px}.before-card{position:relative;overflow:hidden;border-radius:20px;border:1px solid var(--line);box-shadow:var(--shadow);background:var(--cream)}.before-card img{width:100%;aspect-ratio:1/1;object-fit:cover}.before-labels{position:absolute;top:10px;left:10px;right:10px;display:grid;grid-template-columns:1fr 1fr;gap:10px;direction:ltr}.before-labels span{background:rgba(255,255,255,.93);border-radius:10px;padding:7px;text-align:center;font-size:11px;font-weight:900}

.installation{padding-top:38px}.installation-grid{display:grid;gap:18px}.install-image img{width:100%;border-radius:20px;border:1px solid var(--line);box-shadow:var(--shadow)}.steps{display:grid;gap:10px}.steps article{display:flex;gap:12px;align-items:flex-start;background:var(--cream);border:1px solid var(--line);border-radius:16px;padding:13px}.steps article>span{min-width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--burgundy);color:#fff;font-weight:900}.steps b{font-size:15px}.steps p{margin:2px 0 0;color:var(--muted);font-size:13px}

.fit-section{padding-top:38px}.fit-card{display:grid;gap:14px}.fit-card>img{width:100%;border-radius:20px;border:1px solid var(--line);box-shadow:var(--shadow)}.fit-notes{display:grid;grid-template-columns:1fr 1fr;gap:8px}.fit-notes span{background:var(--cream);border:1px solid var(--line);border-radius:13px;padding:10px 8px;font-size:12px;font-weight:800;text-align:center}

.order-section{background:var(--burgundy-dark);padding:44px 14px}.order-wrap{max-width:900px;margin:auto}.order-head{text-align:center;color:#fff;margin-bottom:16px}.kicker.light{color:#f2c3cb}.order-head h2{font-size:30px;line-height:1.15;margin:5px 0 6px}.order-head p{margin:0;color:#e7cfd4;font-size:12px;direction:ltr}.order-form{background:#fff;border-radius:22px;padding:18px;box-shadow:0 18px 48px rgba(0,0,0,.23)}.choice-group+.choice-group{margin-top:18px}.choice-group legend{width:100%;font-size:15px;font-weight:900;margin-bottom:10px}.choice-group legend small{display:block;color:#92979a;font-size:10px;font-weight:700;direction:ltr;margin-top:1px}.pack-options{display:grid;gap:8px}.choice-card{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;border:1.5px solid var(--line);border-radius:14px;padding:12px;background:#fff;cursor:pointer}.choice-card input,.color-choice input{position:absolute;opacity:0;pointer-events:none}.radio-ui{width:18px;height:18px;border-radius:50%;border:2px solid #c6b8b0;position:relative}.choice-card div{display:grid}.choice-card b{font-size:15px}.choice-card small{font-size:11px;color:var(--muted)}.choice-card strong{direction:ltr;font-size:16px;white-space:nowrap}.choice-card:has(input:checked){border-color:var(--burgundy);background:#fff7f8;box-shadow:0 0 0 2px rgba(125,29,45,.08)}.choice-card:has(input:checked) .radio-ui{border-color:var(--burgundy)}.choice-card:has(input:checked) .radio-ui:after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--burgundy)}.popular-choice:after{content:"الأكثر طلباً";position:absolute;top:-8px;left:12px;background:var(--burgundy);color:#fff;border-radius:999px;padding:2px 7px;font-size:9px;font-weight:800}
.color-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}.color-choice{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"swatch name" "swatch sub";column-gap:8px;align-items:center;border:1.5px solid var(--line);border-radius:13px;padding:10px;cursor:pointer}.color-choice:has(input:checked){border-color:var(--burgundy);background:#fff7f8;box-shadow:0 0 0 2px rgba(125,29,45,.08)}.swatch{grid-area:swatch;width:28px;height:28px;border-radius:50%;border:1px solid rgba(0,0,0,.13)}.swatch-black{background:#181818}.swatch-beige{background:#e7dccd}.swatch-gray{background:#8c8e92}.swatch-grenat{background:#7c1730}.color-choice b{grid-area:name;font-size:13px;direction:ltr;text-align:right}.color-choice small{grid-area:sub;font-size:10px;color:var(--muted)}
.customer-info{margin-top:20px!important}.form-grid{display:grid;gap:9px}.form-grid label{display:grid;gap:5px;font-size:12px;font-weight:800}.form-grid input{width:100%;border:1px solid #ded7d2;border-radius:12px;padding:12px 13px;outline:none;background:#fff;font-size:14px}.form-grid input:focus{border-color:#a85664;box-shadow:0 0 0 3px rgba(125,29,45,.08)}
.order-summary{display:flex;justify-content:space-between;align-items:center;margin:18px 0 10px;background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:12px 14px}.order-summary>div{display:grid;gap:1px}.order-summary span{font-size:10px;color:var(--muted)}.order-summary b{font-size:15px}.order-summary strong{font-size:20px;color:var(--burgundy);direction:ltr}.btn-submit{width:100%;background:var(--burgundy);color:#fff;padding:14px 16px;font-size:16px}.form-msg{min-height:20px;text-align:center;margin:8px 0 0;font-size:12px}.form-msg.ok{color:var(--green)}.form-msg.err{color:#b42318}.checkout-trust{display:grid;grid-template-columns:1fr;gap:5px;text-align:center;margin-top:10px;color:#6f7478;font-size:10px;direction:ltr}

.faq{padding-bottom:52px}.faq-list{display:grid;gap:8px}.faq-list details{background:#fff;border:1px solid var(--line);border-radius:13px;padding:13px 14px}.faq-list summary{font-weight:900;cursor:pointer;font-size:14px}.faq-list p{margin:8px 0 0;color:var(--muted);font-size:13px}
footer{text-align:center;border-top:1px solid #eee;padding:22px 14px;color:#8b8f92;font-size:12px}.mobile-cta{position:fixed;left:10px;right:10px;bottom:10px;z-index:40;background:var(--burgundy);color:#fff;border-radius:16px;padding:11px 14px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 14px 34px rgba(74,15,26,.35)}.mobile-cta span{display:grid;font-weight:900;font-size:13px}.mobile-cta small{font-size:9px;opacity:.8;direction:ltr}.mobile-cta b{font-size:12px;direction:ltr}



/* V3.4 — tighter mobile rhythm + refined colors heading */
@media (max-width:699px){
  .hero{padding-bottom:8px}
  .hero-actions-block{margin-bottom:0}
  .hero-points{margin-bottom:0}
  .colors{padding-top:16px}

  .colors .section-head{
    position:relative;
    margin:0 auto 18px;
    padding:16px 14px 14px;
    border:1px solid #eee2dc;
    border-radius:20px;
    background:linear-gradient(180deg,#fffaf8 0%,#ffffff 100%);
    box-shadow:0 8px 24px rgba(67,42,32,.045);
    overflow:hidden;
  }
  .colors .section-head:before{
    content:"";
    position:absolute;
    top:0;
    right:50%;
    transform:translateX(50%);
    width:58px;
    height:3px;
    border-radius:0 0 999px 999px;
    background:var(--burgundy);
  }
  .colors .section-head .kicker{
    display:inline-flex;
    justify-content:center;
    padding:5px 10px;
    border-radius:999px;
    background:#f7e9ec;
    color:var(--burgundy);
    font-size:12px;
    line-height:1.2;
    margin-bottom:5px;
  }
  .colors .section-head h2{
    margin:3px 0 4px;
    font-size:31px;
    line-height:1.12;
    letter-spacing:-.25px;
  }
  .colors .section-head .microcopy{
    margin-top:2px;
    color:#9b7b81;
    font-size:11px;
    letter-spacing:.1px;
  }
}

/* V3.5 — force the mobile spacing + compact professional colors heading */
@media (max-width:699px){
  .hero{
    padding-bottom:0 !important;
    row-gap:12px !important;
  }
  .hero-actions-block{
    margin:0 !important;
    padding:0 !important;
  }
  .hero-points{
    margin:0 !important;
  }
  .colors{
    margin-top:0 !important;
    padding-top:14px !important;
    padding-bottom:44px !important;
  }
  .colors .section-head{
    margin:0 auto 16px !important;
    padding:12px 12px 13px !important;
    border:1px solid #ecdadd !important;
    border-radius:16px !important;
    background:#fff8f9 !important;
    box-shadow:none !important;
  }
  .colors .section-head:before{
    display:none !important;
  }
  .colors .section-head .kicker{
    display:inline-flex !important;
    margin:0 0 6px !important;
    padding:5px 10px !important;
    border-radius:999px !important;
    background:#f3e3e6 !important;
    color:var(--burgundy) !important;
    font-size:11px !important;
    line-height:1.25 !important;
    font-weight:900 !important;
  }
  .colors .section-head h2{
    margin:0 0 2px !important;
    font-size:30px !important;
    line-height:1.08 !important;
    letter-spacing:-.2px !important;
  }
  .colors .section-head .microcopy{
    margin:0 !important;
    color:#9b7c81 !important;
    font-size:10px !important;
  }
}


/* V3.9 — remove excessive white gaps between mobile sections */
@media (max-width:699px){
  .colors{
    padding-bottom:10px !important;
  }
  .before-after{
    padding-top:8px !important;
    padding-bottom:10px !important;
  }
  .before-after .section-head{
    margin-bottom:12px !important;
  }
  .fit-section{
    padding-top:8px !important;
    padding-bottom:18px !important;
  }
  .fit-section .section-head{
    margin-bottom:12px !important;
  }
}


/* V3.10 — horizontal chair-type banner directly under Avant/Après */
.fit-band-section{padding-top:6px;padding-bottom:18px}
.fit-band-card{overflow:hidden;border-radius:18px;border:1px solid var(--line);box-shadow:var(--shadow);background:#fff}
.fit-band-card img{width:100%;height:auto;display:block}



/* V3.12 — short note under chair-type banner */
.fit-band-copy{max-width:760px;margin:12px auto 0;text-align:center;padding:0 8px}
.fit-band-copy p{margin:0;color:var(--muted);font-size:14px;line-height:1.7}
.fit-band-copy .microcopy{margin-top:4px;text-align:center}




/* V3.27 — old landing page container architecture, stable when zooming */
html,body{width:100%;max-width:100%;overflow-x:hidden}
body{min-width:0}
.container{width:100%;max-width:650px;margin:0 auto;padding-left:16px;padding-right:16px}

/* Full-width sections; only their inner .container is constrained */
.hero,.section,.section-tight,.order-section,footer{width:100%;max-width:none;margin:0}
.hero{display:block;padding:24px 0 16px;text-align:center}
.section{padding:35px 0}
.section-tight{padding:0 0 34px}
.order-section{padding:44px 0 90px}

/* Restore the mobile-first visuals at every CSS viewport width */
.hero-intro,.hero-actions-block{text-align:center}
.hero h1{font-size:36px;line-height:1.08}
.hero-lead{font-size:16px;margin-left:auto;margin-right:auto}
.microcopy{text-align:center}
.hero-media{margin-top:16px}
.hero-media img{width:100%;height:clamp(280px,72vw,330px);object-fit:cover;object-position:center 62%;border-radius:22px}
.hero-points{justify-content:center}
.color-pairs{max-width:none;margin:0;display:grid;gap:14px}
.pair-card img{aspect-ratio:12/7;object-fit:cover}
.before-card{max-width:none;margin:0}
.before-card img{aspect-ratio:1/1;object-fit:cover}
.fit-band-card{max-width:none;margin:0}
.order-wrap{max-width:none;margin:0}
.pack-options{grid-template-columns:1fr}
.color-options{grid-template-columns:1fr 1fr}
.form-grid{grid-template-columns:1fr}
.checkout-trust{grid-template-columns:1fr}
.order-form{padding:18px}
.order-head h2{font-size:30px}
.section-head h2{font-size:29px}

/* Sticky CTA — French only, no RTL/LTR mixing */
.mobile-cta.mobile-cta-fr{position:fixed;left:10px;right:10px;bottom:10px;z-index:40;background:var(--burgundy);color:#fff;border-radius:16px;padding:11px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;box-shadow:0 14px 34px rgba(74,15,26,.35);direction:ltr;unicode-bidi:isolate;white-space:nowrap;overflow:hidden;transform:none}
.mobile-cta.mobile-cta-fr .cta-offer,.mobile-cta.mobile-cta-fr .cta-action{display:block;direction:ltr;unicode-bidi:isolate;font-weight:900;line-height:1}
.mobile-cta.mobile-cta-fr .cta-offer{font-size:14px}
.mobile-cta.mobile-cta-fr .cta-action{font-size:15px}
.mobile-cta.mobile-cta-fr.is-hidden{opacity:0;pointer-events:none;transform:translateY(16px)}
.mobile-cta{transition:opacity .2s ease,transform .2s ease}

@media (min-width:769px){.mobile-cta{display:none!important}.order-section{padding-bottom:50px}}


/* V3.28 — keep anti-spam honeypot functional but completely invisible */
.hp-field{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  margin:-1px!important;
  padding:0!important;
  overflow:hidden!important;
  clip:rect(0 0 0 0)!important;
  clip-path:inset(50%)!important;
  white-space:nowrap!important;
  border:0!important;
  opacity:0!important;
  pointer-events:none!important;
}
.hp-field,
.hp-field *{
  visibility:hidden!important;
}

/* V3.30 — chair banner title separated from image */
.fit-band-head{
  text-align:center;
  margin:0 auto 10px;
}
.fit-band-head .kicker{
  margin-bottom:3px;
}
.fit-band-head h2{
  margin:2px 0 2px;
  font-size:24px;
  line-height:1.15;
}
.fit-band-head .microcopy{
  margin:0;
  text-align:center;
}
@media (max-width:699px){
  .fit-band-head h2{font-size:22px}
}

/* V3.31 — final chair compatibility copy */
.fit-band-head .fit-band-subtitle{
  margin:5px 0 3px;
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
}


/* V3.33 — clearer checkout validation */
.choice-group.has-error{
  border:2px solid #d92d20;
  background:#fff6f5;
  border-radius:16px;
  padding:12px;
  box-shadow:0 0 0 4px rgba(217,45,32,.08);
}
.choice-group.has-error legend{
  color:#b42318;
}
.choice-error{
  display:none;
  margin:10px 0 0;
  padding:10px 12px;
  border:1px solid #f3b7b2;
  border-radius:11px;
  background:#fff0ee;
  color:#b42318;
  font-size:13px;
  line-height:1.55;
  font-weight:900;
  text-align:right;
}
.choice-group.has-error .choice-error{
  display:block;
}
.form-msg.err{
  min-height:auto;
  margin:12px 0 0;
  padding:11px 12px;
  border:1px solid #f3b7b2;
  border-radius:11px;
  background:#fff0ee;
  color:#b42318;
  font-size:13px;
  line-height:1.55;
  font-weight:900;
  text-align:center;
}
