/* ============================================
   STRASS DENTAIRES — Product Description Styles
   sd-product-styles.css
   
   INSTALLATION :
   1. Uploader ce fichier dans : /themes/flavor/assets/css/sd-product-styles.css
   2. L'inclure dans le thème, au choix :
   
      Option A — Dans le header.tpl ou layout :
      <link rel="stylesheet" href="{$urls.css_url}sd-product-styles.css">
   
      Option B — Dans le fichier theme.yml :
      assets:
        css:
          product:
            - id: sd-product-styles
              path: assets/css/sd-product-styles.css
   
      Option C — Dans un module custom ou via le hook displayHeader :
      Media::addCSS(_THEME_CSS_DIR_.'sd-product-styles.css');
   
   Toutes les classes commencent par "sd-" pour éviter
   tout conflit avec le thème Bizkit.
   ============================================ */

/* ─── GOOGLE FONTS ─── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Outfit:wght@300;400;500;600&display=swap');

/* ─── VARIABLES ─── */
:root {
  --sd-gold: #C5A572;
  --sd-gold-light: #D4BA8A;
  --sd-gold-dark: #B8976C;
  --sd-black: #0D0D0D;
  --sd-dark: #141414;
  --sd-card: #1A1A1A;
  --sd-border: #2A2520;
  --sd-text: #E8E0D4;
  --sd-muted: #9A9089;
  --sd-radius: 16px;
  --sd-radius-sm: 14px;
  --sd-radius-xs: 12px;
  --sd-font-display: 'Playfair Display', Georgia, serif;
  --sd-font-body: 'Outfit', Helvetica, Arial, sans-serif;
}

/* ─── RESET : neutralise Bizkit à l'intérieur de .sd ─── */
.sd,
.sd *,
.sd *::before,
.sd *::after {
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
}

.sd {
  font-family: var(--sd-font-body) !important;
  color: var(--sd-text) !important;
  line-height: 1.6 !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  font-size: 14px !important;
}

/* empêche Bizkit d'hériter des styles parasites */
.sd div,
.sd span,
.sd p,
.sd h1, .sd h2, .sd h3, .sd h4,
.sd table, .sd tr, .sd td,
.sd ul, .sd li,
.sd details, .sd summary {
  all: unset !important;
  display: revert !important;
  box-sizing: border-box !important;
}

/* on remet display block pour les blocs */
.sd div, .sd p, .sd h1, .sd h2, .sd h3, .sd h4, .sd details {
  display: block !important;
}

.sd span, .sd summary {
  display: inline !important;
}

.sd table {
  display: table !important;
}
.sd tr {
  display: table-row !important;
}
.sd td {
  display: table-cell !important;
}

/* ─── HERO BANNER ─── */
.sd-hero {
  background: linear-gradient(135deg, #0D0D0D 0%, #1A1510 50%, #0D0D0D 100%) !important;
  border: 1px solid var(--sd-border) !important;
  border-radius: var(--sd-radius) !important;
  padding: 50px 40px !important;
  text-align: center !important;
  overflow: hidden !important;
  margin-bottom: 40px !important;
  position: relative !important;
}

.sd-hero-label {
  display: inline-block !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--sd-gold) !important;
  border: 1px solid rgba(197,165,114,0.3) !important;
  padding: 6px 20px !important;
  border-radius: 100px !important;
  margin-bottom: 20px !important;
}

.sd-hero h1 {
  font-family: var(--sd-font-display) !important;
  font-size: 42px !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin-bottom: 8px !important;
  line-height: 1.2 !important;
}

.sd-hero h1 .sd-gold {
  color: var(--sd-gold) !important;
}

.sd-hero-sub {
  font-size: 17px !important;
  font-weight: 300 !important;
  color: var(--sd-muted) !important;
  max-width: 600px !important;
  margin: 0 auto 28px !important;
}

/* ─── BADGES ─── */
.sd-badges {
  text-align: center !important;
}

.sd-badge {
  display: inline-block !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--sd-gold) !important;
  background: rgba(197,165,114,0.08) !important;
  border: 1px solid rgba(197,165,114,0.2) !important;
  padding: 7px 16px !important;
  border-radius: 100px !important;
  margin: 4px !important;
}

/* ─── SECTION TITLES ─── */
.sd-title {
  font-family: var(--sd-font-display) !important;
  font-size: 26px !important;
  font-weight: 600 !important;
  color: #fff !important;
  margin: 0 0 28px 0 !important;
  padding: 0 0 12px 0 !important;
  border-bottom: 1px solid var(--sd-border) !important;
}

/* ─── INTRO TEXT ─── */
.sd-intro {
  font-size: 15px !important;
  line-height: 1.8 !important;
  margin-bottom: 16px !important;
  color: var(--sd-text) !important;
}

.sd-intro-muted {
  font-size: 15px !important;
  line-height: 1.8 !important;
  margin-bottom: 40px !important;
  color: var(--sd-muted) !important;
}

.sd-bold {
  font-weight: 700 !important;
}

.sd-gold {
  color: var(--sd-gold) !important;
}

.sd-white {
  color: #fff !important;
}

/* ─── GRID SYSTEM (la pièce maîtresse) ─── */
.sd-grid-2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 20px !important;
  margin-bottom: 40px !important;
}

.sd-grid-3 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  margin-bottom: 40px !important;
}

.sd-grid-4 {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  margin-bottom: 40px !important;
}

/* ─── EQUIPMENT CARD (gold border) ─── */
.sd-equip {
  background: linear-gradient(160deg, #1A1810 0%, var(--sd-dark) 100%) !important;
  border: 1px solid rgba(197,165,114,0.25) !important;
  border-top: 3px solid rgba(197,165,114,0.5) !important;
  border-radius: var(--sd-radius) !important;
  padding: 30px !important;
  overflow: hidden !important;
}

.sd-equip-header {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-bottom: 20px !important;
}

.sd-equip-icon {
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  border-radius: 12px !important;
  background: rgba(197,165,114,0.1) !important;
  border: 1px solid rgba(197,165,114,0.2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 22px !important;
}

.sd-equip-header h3 {
  font-family: var(--sd-font-display) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--sd-gold-light) !important;
}

/* specs 2-column inside equip card */
.sd-specs-2col {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}

.sd-spec {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  font-size: 13.5px !important;
  color: var(--sd-text) !important;
  padding: 6px 0 !important;
}

.sd-spec::before {
  content: '◆' !important;
  color: var(--sd-gold) !important;
  font-size: 7px !important;
  margin-top: 5px !important;
  flex-shrink: 0 !important;
}

/* ─── ACCESSORY CARD (dark) ─── */
.sd-card {
  background: var(--sd-card) !important;
  border: 1px solid var(--sd-border) !important;
  border-radius: var(--sd-radius-sm) !important;
  padding: 24px 16px !important;
  text-align: center !important;
}

.sd-card-icon {
  font-size: 28px !important;
  margin-bottom: 10px !important;
  display: block !important;
}

.sd-card h4 {
  font-family: var(--sd-font-display) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #fff !important;
  margin-bottom: 10px !important;
}

.sd-card p {
  font-size: 12.5px !important;
  color: var(--sd-muted) !important;
  line-height: 1.5 !important;
}

/* check list inside cards */
.sd-check {
  text-align: left !important;
  font-size: 12.5px !important;
  color: var(--sd-muted) !important;
  line-height: 2 !important;
}

.sd-check-mark {
  color: var(--sd-gold) !important;
}

/* ─── SPECS STRIP (horizontal cells) ─── */
.sd-strip {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1px !important;
  background: var(--sd-border) !important;
  border: 1px solid var(--sd-border) !important;
  border-radius: var(--sd-radius) !important;
  overflow: hidden !important;
  margin-bottom: 40px !important;
}

.sd-strip-cell {
  background: var(--sd-card) !important;
  padding: 22px 20px !important;
  text-align: center !important;
}

.sd-strip-label {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--sd-muted) !important;
  margin-bottom: 6px !important;
  display: block !important;
}

.sd-strip-value {
  font-family: var(--sd-font-display) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--sd-gold) !important;
  display: block !important;
}

.sd-strip-detail {
  font-size: 11.5px !important;
  color: var(--sd-muted) !important;
  margin-top: 2px !important;
  display: block !important;
}

/* ─── TIMELINE STEPS ─── */
.sd-timeline {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0 !important;
  margin-bottom: 40px !important;
}

.sd-step {
  text-align: center !important;
  padding: 0 10px !important;
}

.sd-step-num {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: var(--sd-black) !important;
  border: 2px solid var(--sd-gold) !important;
  color: var(--sd-gold) !important;
  font-family: var(--sd-font-display) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 40px !important;
  text-align: center !important;
  margin: 0 auto 14px !important;
  display: block !important;
}

.sd-step h4 {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #fff !important;
  margin-bottom: 4px !important;
}

.sd-step p {
  font-size: 12px !important;
  color: var(--sd-muted) !important;
  margin-bottom: 8px !important;
}

.sd-step-time {
  display: inline-block !important;
  font-size: 11px !important;
  color: var(--sd-gold) !important;
  background: rgba(197,165,114,0.1) !important;
  padding: 3px 10px !important;
  border-radius: 100px !important;
}

/* ─── LIST CARD (pour qui, etc) ─── */
.sd-list-card {
  background: var(--sd-card) !important;
  border: 1px solid var(--sd-border) !important;
  border-radius: var(--sd-radius) !important;
  padding: 30px !important;
}

.sd-list-card h3 {
  font-family: var(--sd-font-display) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #fff !important;
  margin-bottom: 18px !important;
}

.sd-list-item {
  font-size: 14px !important;
  color: var(--sd-text) !important;
  padding: 7px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}

.sd-list-item:last-child {
  border-bottom: none !important;
}

/* ─── RENT ROW (prix en face du label) ─── */
.sd-rent-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  font-size: 14px !important;
  color: var(--sd-text) !important;
}

.sd-rent-row:last-of-type {
  border-bottom: none !important;
}

.sd-rent-price {
  font-family: var(--sd-font-display) !important;
  font-weight: 600 !important;
  color: var(--sd-gold) !important;
  font-size: 15px !important;
}

.sd-rent-highlight {
  background: rgba(197,165,114,0.08) !important;
  border: 1px solid rgba(197,165,114,0.2) !important;
  border-radius: 10px !important;
  padding: 14px 18px !important;
  margin-top: 14px !important;
  text-align: center !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--sd-gold) !important;
}

/* ─── ADVANTAGE CARD ─── */
.sd-adv {
  background: var(--sd-card) !important;
  border: 1px solid var(--sd-border) !important;
  border-radius: var(--sd-radius-sm) !important;
  padding: 28px 16px !important;
  text-align: center !important;
}

.sd-adv-icon {
  font-size: 32px !important;
  margin-bottom: 14px !important;
  display: block !important;
}

.sd-adv h4 {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #fff !important;
  margin-bottom: 8px !important;
}

.sd-adv p {
  font-size: 12.5px !important;
  color: var(--sd-muted) !important;
  line-height: 1.5 !important;
}

/* ─── FAQ ─── */
.sd-faq {
  margin-bottom: 40px !important;
}

.sd-faq details {
  background: var(--sd-card) !important;
  border: 1px solid var(--sd-border) !important;
  border-radius: var(--sd-radius-xs) !important;
  padding: 22px 26px !important;
  margin-bottom: 10px !important;
}

.sd-faq summary {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #fff !important;
  cursor: pointer !important;
  display: block !important;
}

.sd-faq summary::-webkit-details-marker {
  display: none !important;
}

.sd-faq-answer {
  font-size: 14px !important;
  color: var(--sd-muted) !important;
  margin-top: 14px !important;
  padding-top: 14px !important;
  border-top: 1px solid var(--sd-border) !important;
  line-height: 1.7 !important;
}

/* ─── FOOTER CTA ─── */
.sd-footer {
  background: linear-gradient(135deg, #1A1810 0%, #141414 100%) !important;
  border: 1px solid rgba(197,165,114,0.2) !important;
  border-radius: var(--sd-radius) !important;
  padding: 36px !important;
  text-align: center !important;
  margin-bottom: 20px !important;
}

.sd-footer-badges {
  margin-bottom: 18px !important;
  text-align: center !important;
}

.sd-footer-badge {
  font-size: 13px !important;
  color: var(--sd-muted) !important;
  margin: 0 12px !important;
}

.sd-b2b {
  font-size: 13px !important;
  color: var(--sd-muted) !important;
  background: rgba(197,165,114,0.05) !important;
  border: 1px solid rgba(197,165,114,0.15) !important;
  border-radius: 10px !important;
  padding: 16px 24px !important;
  display: inline-block !important;
}

/* ─── DIVIDER ─── */
.sd-divider {
  height: 1px !important;
  background: linear-gradient(90deg, transparent, var(--sd-border), transparent) !important;
  margin: 40px 0 !important;
}

/* ─── RESPONSIVE ─── */
@media (max-width: 768px) {
  .sd-hero {
    padding: 36px 24px !important;
  }
  .sd-grid-2 {
    grid-template-columns: 1fr !important;
  }
  .sd-grid-4,
  .sd-grid-3 {
    grid-template-columns: 1fr 1fr !important;
  }
  .sd-timeline {
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
  }
  .sd-strip {
    grid-template-columns: 1fr 1fr !important;
  }
  .sd-specs-2col {
    grid-template-columns: 1fr !important;
  }
  .sd-hero h1 {
    font-size: 32px !important;
  }
}

@media (max-width: 480px) {
  .sd-grid-4,
  .sd-grid-3 {
    grid-template-columns: 1fr !important;
  }
  .sd-strip {
    grid-template-columns: 1fr !important;
  }
  .sd-timeline {
    grid-template-columns: 1fr !important;
  }
}