/* Deco Bois — sitewide theme, matching the landing page design system */

:root {
  --db-cream: #f6f1e7;
  --db-cream-soft: #fbf8f2;
  --db-dark: #0a0a0a;
  --db-gold: #c8a45c;
  --db-gold-dark: #b8943c;
  --db-text: #2b2620;
  --db-text-muted: #6b6459;
  --db-border: #e6dcc8;
  --db-radius: 16px;
  --db-radius-pill: 30px;
  --db-font-heading: 'Cormorant Garamond', serif;
  --db-font-body: 'Montserrat', sans-serif;
}

body {
  background-color: var(--db-cream) !important;
  color: var(--db-text) !important;
  font-family: var(--db-font-body) !important;
}

h1, h2, h3, .elementor-heading-title {
  font-family: var(--db-font-heading) !important;
  font-weight: 500 !important;
  color: var(--db-text) !important;
}

a { color: var(--db-text); }
a:hover { color: var(--db-gold); }

/* Buttons: pill-shaped gold, matching hero CTAs */
.elementor-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce input.button,
.wpforms-submit,
input[type="submit"] {
  background-color: var(--db-dark) !important;
  color: var(--db-cream-soft) !important;
  border: none !important;
  border-radius: var(--db-radius-pill) !important;
  padding: 14px 28px !important;
  font-family: var(--db-font-body) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  letter-spacing: 0.3px;
  transition: background-color 0.2s ease, transform 0.15s ease;
}
.elementor-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce input.button:hover,
.wpforms-submit:hover,
input[type="submit"]:hover {
  background-color: var(--db-gold) !important;
  color: var(--db-dark) !important;
  transform: translateY(-1px);
}

/* Hello Elementor's base stylesheet hardcodes every unstyled <button> /
   [type=submit] / [type=button] to a hot-pink fill (#cc3366) on hover/focus.
   Neutralize that site-wide; the class-based rules above (and any other
   .something:hover rule) are more specific and still win over this reset. */
button:hover,
button:focus,
[type="button"]:hover,
[type="button"]:focus,
[type="submit"]:hover,
[type="submit"]:focus {
  background-color: transparent !important;
  color: var(--db-text) !important;
}
button:focus-visible,
[type="button"]:focus-visible,
[type="submit"]:focus-visible {
  outline: 2px solid var(--db-gold) !important;
  outline-offset: 2px;
}

/* WhatsApp CTA buttons get the signature gold fill (secondary style).
   Selector specificity matches (and, by source order, beats) the generic
   ".woocommerce button.button" dark-pill rule above — otherwise the single
   product page's "button.button.alt.db-whatsapp-btn" stays black. */
.woocommerce a.db-whatsapp-btn,
.woocommerce button.db-whatsapp-btn,
.db-whatsapp-btn {
  background-color: var(--db-gold) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--db-radius-pill) !important;
  padding: 14px 28px !important;
  font-family: var(--db-font-body) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.15s ease;
}
.woocommerce a.db-whatsapp-btn:hover,
.woocommerce button.db-whatsapp-btn:hover,
.db-whatsapp-btn:hover {
  background-color: var(--db-gold-dark) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}
.db-whatsapp-btn::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background-color: #ffffff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347zM12.001 2c-5.523 0-10 4.477-10 10 0 1.766.462 3.484 1.34 4.998L2 22l5.125-1.34A9.955 9.955 0 0012.001 22c5.522 0 10-4.477 10-10s-4.478-10-10-10z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347zM12.001 2c-5.523 0-10 4.477-10 10 0 1.766.462 3.484 1.34 4.998L2 22l5.125-1.34A9.955 9.955 0 0012.001 22c5.522 0 10-4.477 10-10s-4.478-10-10-10z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Shop / product loop cards (also covers .product-category tiles — WooCommerce
   gives category tiles both "product-category" and "product" classes) */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  background: var(--db-cream-soft);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius);
  padding: 0 !important;
  overflow: hidden; /* clip the image to the card's own rounded corners */
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.woocommerce ul.products li.product:hover {
  box-shadow: 0 8px 28px rgba(10,10,10,0.08);
  transform: translateY(-3px);
}
/* Image bleeds to the top/left/right edges — rounded only on top */
.woocommerce ul.products li.product img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 !important;
  border-radius: var(--db-radius) var(--db-radius) 0 0 !important;
}
/* Padding lives on the text, not the card — this is what creates the gap
   between the image and the title */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-category__title,
.woocommerce ul.products li.product h2 {
  font-family: var(--db-font-body) !important;
  font-size: 15px !important;
  color: var(--db-text) !important;
  margin: 0 !important;
  padding: 14px 16px 0 !important;
}
.woocommerce ul.products li.product .price {
  display: block;
  color: var(--db-gold-dark) !important;
  font-weight: 600;
  padding: 4px 16px 16px !important;
}
.woocommerce ul.products li.product .woocommerce-loop-category__title .count {
  background: none !important;
  color: var(--db-text-muted);
}
/* "Choisir" / add-to-cart sits outside the <a> wrapper as a sibling.
   Bordered style (not a solid fill) so it reads as a secondary action inside
   the card; :not(.db-whatsapp-btn) keeps the gold WhatsApp CTA untouched. */
.woocommerce ul.products li.product a.add_to_cart_button:not(.db-whatsapp-btn),
.woocommerce ul.products li.product .button:not(.db-whatsapp-btn) {
  margin: 4px 16px 16px !important;
  display: block;
  background-color: transparent !important;
  color: var(--db-dark) !important;
  border: 1.5px solid var(--db-dark) !important;
  border-radius: var(--db-radius-pill) !important;
  padding: 10px 20px !important;
  font-size: 12.5px !important;
  text-align: center;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.woocommerce ul.products li.product a.add_to_cart_button:not(.db-whatsapp-btn):hover,
.woocommerce ul.products li.product .button:not(.db-whatsapp-btn):hover {
  background-color: var(--db-dark) !important;
  color: var(--db-cream-soft) !important;
  transform: translateY(-1px);
}
/* Category tiles have a single <a> wrapping image + title, no separate .price
   block to carry the bottom padding — so give it one directly */
.woocommerce ul.products li.product-category > a {
  display: block;
  padding-bottom: 16px;
}

/* Single product page */
.woocommerce div.product .price {
  color: var(--db-gold-dark) !important;
}
.woocommerce div.product .woocommerce-product-details__short-description {
  font-family: var(--db-font-body);
  color: var(--db-text-muted);
}
.woocommerce div.product form.cart .quantity input.qty {
  border: 1px solid var(--db-border) !important;
  border-radius: 10px !important;
  background: var(--db-cream-soft) !important;
}

/* Variation picker (Couleur, Taille, …) — WooCommerce's default table lays the
   label out top-aligned against a taller custom select, which reads as
   misaligned; lay it out as a proper centered row instead. */
.woocommerce div.product table.variations {
  width: 100%;
  margin: 0;
}
.woocommerce div.product table.variations tr {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.woocommerce div.product table.variations th.label {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 0 !important;
  margin: 0;
  font-family: var(--db-font-body) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--db-text) !important;
}
.woocommerce div.product table.variations td.value {
  flex: 1 1 220px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 0 !important;
  margin: 0;
}
.woocommerce div.product table.variations td.value select {
  width: 100%;
  max-width: 420px;
}
.woocommerce div.product table.variations td.value .reset_variations {
  margin: 0 !important;
  font-family: var(--db-font-body) !important;
  font-size: 12.5px !important;
  color: var(--db-text-muted) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.woocommerce div.product table.variations td.value .reset_variations:hover {
  color: var(--db-gold) !important;
}

/* ---- Unified dropdown (<select>) styling — sitewide ----
   One consistent look for every native select: variation pickers, the shop
   "Default sorting" dropdown, checkout country/state, WPForms selects, etc.
   Custom gold chevron replaces the browser's default arrow. */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline-block;
  min-height: 46px;
  border: 1px solid var(--db-border) !important;
  border-radius: 10px !important;
  background-color: var(--db-cream-soft) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c8a45c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 13px !important;
  padding: 11px 38px 11px 16px !important;
  font-family: var(--db-font-body) !important;
  font-size: 14px !important;
  color: var(--db-text) !important;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
select::-ms-expand {
  display: none;
}
select:hover {
  border-color: var(--db-gold) !important;
}
select:focus {
  outline: none;
  border-color: var(--db-gold) !important;
  box-shadow: 0 0 0 3px rgba(200, 164, 92, 0.22);
}
select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* RTL-aware: WooCommerce price/select markup can sit in an RTL context (ar locale) */
[dir="rtl"] select {
  background-position: left 14px center !important;
  padding: 11px 16px 11px 38px !important;
}

/* Product categories / archive headers */
.woocommerce-products-header__title,
.page-title {
  font-family: var(--db-font-heading) !important;
  color: var(--db-text) !important;
}

/* Contact form */
.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container textarea {
  border: 1px solid var(--db-border) !important;
  border-radius: 10px !important;
  background: var(--db-cream-soft) !important;
  font-family: var(--db-font-body) !important;
}

/* Blog cards */
.blog-designer-pack-wrapper .bdp-post-item,
article.post {
  background: var(--db-cream-soft) !important;
  border-radius: var(--db-radius) !important;
  border: 1px solid var(--db-border) !important;
}

/* De-emphasize cart/checkout since purchase flow goes through WhatsApp */
.woocommerce-cart .cart-collaterals,
.woocommerce-checkout-review-order {
  opacity: 0.9;
}

/* ---- Product tabs (Description / Additional information / Reviews) ----
   WooCommerce's defaults (lavender tab fill, browser-default focus outline)
   don't match the site — restyle as cream tabs with a gold active indicator. */
.woocommerce-tabs ul.tabs,
.woocommerce-tabs ul.wc-tabs {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 !important;
  margin: 0 0 32px !important;
  border-bottom: 1px solid var(--db-border) !important;
  list-style: none !important;
  background: none !important;
}
.woocommerce-tabs ul.tabs::before,
.woocommerce-tabs ul.tabs::after {
  display: none !important;
  content: none !important;
}
.woocommerce-tabs ul.tabs li {
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after {
  display: none !important;
  content: none !important;
}
.woocommerce-tabs ul.tabs li a {
  display: inline-block;
  padding: 13px 22px !important;
  background: var(--db-cream-soft) !important;
  color: var(--db-text-muted) !important;
  border: 1px solid var(--db-border) !important;
  border-bottom: none !important;
  border-radius: 10px 10px 0 0 !important;
  font-family: var(--db-font-body) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.3px;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.woocommerce-tabs ul.tabs li a:hover {
  color: var(--db-text) !important;
}
.woocommerce-tabs ul.tabs li a:focus-visible {
  outline: 2px solid var(--db-gold) !important;
  outline-offset: 2px;
}
.woocommerce-tabs ul.tabs li.active a {
  background: var(--db-cream) !important;
  color: var(--db-text) !important;
  border-color: var(--db-gold) !important;
  border-bottom: 1px solid var(--db-cream) !important;
  margin-bottom: -1px !important;
}
.woocommerce-tabs .woocommerce-Tabs-panel {
  border: none !important;
  padding: 0 !important;
  background: none !important;
}

/* ---- Reviews tab ---- */
.woocommerce #reviews .comment-form-rating .stars a,
.woocommerce #review_form-wrapper .stars a {
  color: var(--db-gold) !important;
}
.woocommerce #reviews #comments .comment-text {
  background: var(--db-cream-soft) !important;
  border: 1px solid var(--db-border) !important;
  border-radius: var(--db-radius) !important;
}
.woocommerce #reviews #comment,
.woocommerce #reviews input[type="text"],
.woocommerce #reviews input[type="email"],
.comment-form textarea,
.comment-form input[type="text"],
.comment-form input[type="email"] {
  border: 1px solid var(--db-border) !important;
  border-radius: 10px !important;
  background: var(--db-cream-soft) !important;
  font-family: var(--db-font-body) !important;
  color: var(--db-text) !important;
  padding: 12px 14px !important;
}
.woocommerce #reviews #comment:focus,
.comment-form textarea:focus,
.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus {
  outline: none;
  border-color: var(--db-gold) !important;
  box-shadow: 0 0 0 3px rgba(200, 164, 92, 0.18);
}
.comment-form label {
  font-family: var(--db-font-body) !important;
  color: var(--db-text) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* =========================================================================
   Premium single-product page (2026) — editorial two-column layout with a
   large 3D/gallery media rail and a sticky summary card. Scoped to
   body.single-product so it never leaks into shop/archive pages.
   ========================================================================= */
body.single-product .woocommerce,
body.single-product .woocommerce-page {
  --db-font-heading: "Fraunces", "Cormorant Garamond", serif;
  --db-font-body: "Jost", "Montserrat", sans-serif;
}

/* Hello Elementor caps .site-main at ~1140px; give the product page room to
   breathe on large desktops so the media rail can be genuinely large. */
body.single-product main.site-main,
body.single-product #main.site-main {
  max-width: min(1560px, 94vw) !important;
}

body.single-product div.product {
  display: grid;
  grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
  column-gap: clamp(32px, 4vw, 72px);
  row-gap: clamp(44px, 5vw, 80px);
  align-items: start;
  max-width: min(1560px, 94vw);
  margin: 8px auto 0;
}
/* Cap the summary so extra width flows to the media rail on big screens. */
body.single-product .summary.entry-summary { max-width: 540px; }
/* Summary spans both rows so row 1's height is driven by the gallery alone —
   otherwise an auto row track sizes to its TALLEST item, and since the buy-box
   card is usually taller than the gallery, row 1 would stretch to match it,
   leaving a large empty gap between the image and the tabs below it. */
body.single-product div.product > .summary { grid-column: 2; grid-row: 1 / span 2; }
/* Tabs live in the LEFT column only (under the gallery), not full-width — a
   full-width row 2 sits beneath the sticky buy-box's column and the card would
   float over it while scrolling. Keeping it in column 1 avoids that overlap. */
body.single-product div.product > .woocommerce-tabs { grid-column: 1; grid-row: 2; }
/* Kill WooCommerce's default float layout so the grid controls everything. */
body.single-product div.product > .woocommerce-product-gallery,
body.single-product div.product > .vsd-model-gallery-wrapper,
body.single-product div.product > .summary {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
}

/* ---- Media rail (3D viewer + gallery) ---- */
body.single-product .vsd-model-gallery-wrapper {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
body.single-product .vsd-model-viewer-wrapper {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, var(--db-cream-soft) 100%);
  border: 1px solid var(--db-border);
  box-shadow: 0 24px 60px rgba(43, 38, 32, 0.10);
}
/* Bigger 3D stage on desktop — override the plugin's inline padding-bottom ratio. */
body.single-product .vsd-model-viewer-frame {
  padding-bottom: 0 !important;
  height: clamp(440px, 44vw, 640px) !important;
}
/* "Interactive 3D" affordance pill over the viewer. */
body.single-product .vsd-model-viewer-wrapper::after {
  content: "Vue 3D — glissez pour tourner";
  position: absolute;
  top: 16px; left: 16px;
  z-index: 20; /* Visody sets the model-viewer element to z-index:19 */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  font-family: var(--db-font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #fff;
  background: rgba(20, 18, 15, 0.66);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 30px;
  pointer-events: none;
}

/* Gallery = WooCommerce flexslider (one slide at a time). We give it a fixed
   stage, uniform cover-fit images, dot indicators, and custom arrows — rather
   than fighting the slider with a grid (which stacked every slide full-size). */
body.single-product .woocommerce-product-gallery {
  position: relative;
  margin: 0 !important;
}
/* The fixed "stage" box (radius/border/shadow/overflow) must NOT be put
   directly on .woocommerce-product-gallery__wrapper — that exact <ul> is the
   element WooCommerce's FlexSlider inline-styles and measures for its slide
   track math, and adding a border/overflow there corrupts its width
   calculation (observed: slides blown out to ~10x viewport width). So the
   box lives on .flex-viewport when it exists (2+ images — FlexSlider never
   touches that element's box model), and falls back onto __wrapper itself
   only when .flex-viewport is absent (single-image products, where
   FlexSlider never initializes at all, so there's nothing to corrupt). */
body.single-product .woocommerce-product-gallery .flex-viewport {
  height: clamp(380px, 40vw, 560px) !important;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--db-border);
  box-shadow: 0 18px 44px rgba(43, 38, 32, 0.09);
  background: var(--db-cream-soft);
}
body.single-product .woocommerce-product-gallery__wrapper {
  height: 100% !important;
  margin: 0 !important;
}
body.single-product .woocommerce-product-gallery:not(:has(.flex-viewport)) .woocommerce-product-gallery__wrapper {
  height: clamp(380px, 40vw, 560px) !important;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--db-border);
  box-shadow: 0 18px 44px rgba(43, 38, 32, 0.09);
  background: var(--db-cream-soft);
}
body.single-product .woocommerce-product-gallery__image {
  height: 100% !important;
  margin: 0 !important;
  border: none;
  box-shadow: none;
  border-radius: 0;
}
body.single-product .woocommerce-product-gallery__image a,
body.single-product .woocommerce-product-gallery__image > a { display: block; height: 100%; }
body.single-product .woocommerce-product-gallery__image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover; /* every image renders at the same fixed size */
  border-radius: 0;
  display: block;
}
/* Visody 3D overlay fills the same fixed stage. */
body.single-product .woocommerce-product-gallery .vsd-model-viewer-overlay {
  position: absolute;
  inset: 0;
  border-radius: 22px;
  overflow: hidden;
}
body.single-product .woocommerce-product-gallery .vsd-model-viewer-overlay model-viewer,
body.single-product .woocommerce-product-gallery .vsd-model-viewer-overlay .vsd-model-viewer-frame {
  width: 100% !important;
  height: 100% !important;
  padding-bottom: 0 !important;
}
body.single-product .woocommerce-product-gallery__trigger {
  z-index: 6;
  top: 16px; right: 16px;
}

/* Fullscreen zoom trigger + Visody 3D button styled as clean circular chips */
body.single-product .woocommerce-product-gallery__trigger,
body.single-product .woocommerce-product-gallery .vsd-model-viewer-3d-button {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 4px 14px rgba(43, 38, 32, 0.16);
}

/* Visody's "underneath" control bar (forced on via pre_option_visody_float_button_position
   in functions.php) — rendered right after the gallery. Restyled as a single
   full-width "View in 3D / AR" pill button below the images, matching the
   mobile app's layout instead of the default small floating icon chips. */
body.single-product .vsd-model-viewer-control-buttons.control-buttons-gallery {
  position: static !important;
  display: flex !important;
  width: 100%;
  margin: 18px 0 0 !important;
  inset: auto !important;
}
body.single-product .vsd-model-viewer-control-buttons.control-buttons-gallery .vsd-model-viewer-3d-button {
  display: none !important;
}
body.single-product .vsd-model-viewer-control-buttons.control-buttons-gallery .vsd-model-viewer-ar-button {
  position: relative;
  overflow: hidden;
  appearance: none;
  -webkit-appearance: none;
  width: 100% !important;
  height: 52px !important;
  border-radius: 12px !important;
  background-color: transparent !important;
  background-image: linear-gradient(135deg, var(--db-gold) 0%, var(--db-gold-dark) 100%) !important;
  border: none !important;
  box-shadow: 0 10px 26px rgba(184, 148, 60, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--db-font-body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.2px;
  color: #fff !important;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* The theme's global `button:hover/:focus` reset (Hello Elementor override,
   above) forces background-color:transparent and color:var(--db-text) with
   !important — harmless for background-color (we're transparent anyway, the
   gradient lives in background-image which that rule doesn't touch), but it
   was winning over our non-!important color, flipping the label dark on
   hover. Repeat every property here with !important so hover/focus can't
   diverge from the resting state. */
body.single-product .vsd-model-viewer-control-buttons.control-buttons-gallery .vsd-model-viewer-ar-button:hover,
body.single-product .vsd-model-viewer-control-buttons.control-buttons-gallery .vsd-model-viewer-ar-button:focus {
  background-color: transparent !important;
  background-image: linear-gradient(135deg, var(--db-gold) 0%, var(--db-gold-dark) 100%) !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(184, 148, 60, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}
body.single-product .vsd-model-viewer-control-buttons.control-buttons-gallery .vsd-model-viewer-ar-button:active {
  background-color: transparent !important;
  background-image: linear-gradient(135deg, var(--db-gold) 0%, var(--db-gold-dark) 100%) !important;
  color: #fff !important;
  transform: translateY(0);
  box-shadow: 0 6px 16px rgba(184, 148, 60, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}
body.single-product .vsd-model-viewer-control-buttons.control-buttons-gallery .vsd-model-viewer-ar-button::after {
  content: "Voir en 3D / AR";
  position: relative;
  z-index: 1;
}
body.single-product .vsd-model-viewer-control-buttons.control-buttons-gallery .vsd-model-viewer-ar-button img {
  position: relative;
  z-index: 1;
  width: 18px; height: 18px;
  padding: 7px;
  box-sizing: content-box;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  filter: brightness(0) invert(1); /* recolor the plugin's dark AR icon to white */
}
/* Move the 3D/AR viewer's close ("X") button from its default top-right
   position to bottom-right, out of the way of the gallery's own zoom
   trigger and thumbnail dots. */
body.single-product .vsd-model-viewer .vsd-model-viewer-close-button {
  top: auto !important;
  bottom: 16px !important;
  right: 16px !important;
}

/* Custom prev/next arrows (added by JS) */
body.single-product .db-gallery-arrow {
  position: absolute;
  top: clamp(190px, 20vw, 280px); /* vertically centered on the fixed stage */
  transform: translateY(-50%);
  z-index: 7;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; cursor: pointer;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--db-text);
  box-shadow: 0 4px 14px rgba(43, 38, 32, 0.16);
  transition: background 0.2s ease, transform 0.15s ease;
}
body.single-product .db-gallery-arrow:hover { background: #fff; }
body.single-product .db-gallery-arrow:active { transform: translateY(-50%) scale(0.94); }
body.single-product .db-gallery-arrow svg { width: 20px; height: 20px; }
body.single-product .db-gallery-arrow--prev { left: 14px; }
body.single-product .db-gallery-arrow--next { right: 14px; }
body.single-product .db-gallery-arrow[hidden] { display: none; }

/* Thumbnail control → dot indicators below the stage */
body.single-product .woocommerce-product-gallery .flex-control-thumbs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px;
  list-style: none;
  margin: 18px 0 0 !important;
  padding: 0 !important;
}
body.single-product .woocommerce-product-gallery .flex-control-thumbs li {
  flex: 0 0 9px;
  width: 9px !important;   /* flexslider sets an inline px width — override it */
  height: 9px !important;
  margin: 0 !important;
  border-radius: 50%;
  background: var(--db-border);
  overflow: hidden;
  cursor: pointer;
  float: none !important;
  transition: background 0.2s ease, transform 0.2s ease;
  list-style: none;
}
body.single-product .woocommerce-product-gallery .flex-control-thumbs li:hover { background: var(--db-gold); }
body.single-product .woocommerce-product-gallery .flex-control-thumbs li:has(img.flex-active) {
  background: var(--db-gold-dark);
  transform: scale(1.25);
}
body.single-product .woocommerce-product-gallery .flex-control-thumbs li img {
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important; /* invisible but still the flexslider click target */
  cursor: pointer;
  border: none;
}

/* ---- Summary card (sticky on desktop) ---- */
body.single-product .summary.entry-summary {
  position: sticky;
  top: 24px;
  background: var(--db-cream-soft);
  border: 1px solid var(--db-border);
  border-radius: 24px;
  padding: clamp(26px, 2.6vw, 40px);
  box-shadow: 0 20px 50px rgba(43, 38, 32, 0.07);
  font-family: var(--db-font-body);
}
body.single-product .summary .product_title {
  font-family: var(--db-font-heading) !important;
  font-weight: 500 !important;
  font-size: clamp(28px, 3vw, 40px) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.01em;
  margin: 0 0 14px !important;
  color: var(--db-text) !important;
}
body.single-product .summary p.price,
body.single-product .summary .price {
  font-family: var(--db-font-body) !important;
  font-size: clamp(20px, 2vw, 26px) !important;
  font-weight: 600 !important;
  color: var(--db-gold-dark) !important;
  margin: 0 0 18px !important;
}
body.single-product .summary .price del { opacity: 0.5; font-weight: 400; }
body.single-product .summary .woocommerce-product-details__short-description {
  font-size: 15px;
  line-height: 1.7;
  color: var(--db-text-muted);
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--db-border);
}

/* Variable-product form stacks: Couleur picker on top, CTA row below.
   (A plain form.cart display:flex would put the picker and CTA side by side.) */
body.single-product .summary.entry-summary form.variations_form { display: block; }
/* Stacked variation field: label on top, full-width select below, reset under it.
   Overrides the sitewide flex-row variation layout (higher specificity + later). */
body.single-product .summary.entry-summary table.variations,
body.single-product .summary.entry-summary table.variations tbody,
body.single-product .summary.entry-summary table.variations tr,
body.single-product .summary.entry-summary table.variations th.label,
body.single-product .summary.entry-summary table.variations td.value {
  display: block;
  width: auto;
  background: transparent !important;
  border: none !important;
}
body.single-product .summary.entry-summary table.variations tr + tr { margin-top: 14px; }
body.single-product .summary.entry-summary table.variations th.label {
  margin: 0 0 8px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  text-align: left !important;
  color: var(--db-text) !important;
}
body.single-product .summary.entry-summary table.variations td.value select {
  width: 100%;
  max-width: none;
  min-width: 0;
}
body.single-product .summary.entry-summary table.variations td.value .reset_variations {
  display: inline-block;
  margin: 8px 0 0 !important;
}
/* CTA row: quantity + full-width WhatsApp button. Applies to simple products
   (form.cart) and to the variable-product add-to-cart wrapper. */
body.single-product .summary form.cart:not(.variations_form),
body.single-product .summary .woocommerce-variation-add-to-cart {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin: 18px 0 0;
}
body.single-product .summary form.cart .quantity { flex: 0 0 auto; margin: 0 !important; }
body.single-product .summary form.cart .quantity input.qty {
  height: 100%;
  min-height: 56px;
  width: 68px;
  text-align: center;
  font-size: 16px;
}
body.single-product .summary .single_add_to_cart_button.db-whatsapp-btn {
  flex: 1 1 auto;
  min-height: 56px;
  font-size: 14.5px !important;
  border-radius: 16px !important;
  padding: 14px 24px !important;
}
body.single-product .summary .woocommerce-variation-add-to-cart { flex-wrap: wrap; }

/* Assurances / trust strip */
body.single-product .db-assurances {
  list-style: none;
  margin: 24px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--db-border);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
body.single-product .db-assurance {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0;
}
body.single-product .db-assurance__ic {
  flex-shrink: 0;
  width: 42px; height: 42px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--db-cream);
  color: var(--db-gold-dark);
  border: 1px solid var(--db-border);
}
body.single-product .db-assurance__ic svg { width: 21px; height: 21px; }
body.single-product .db-assurance__body { display: flex; flex-direction: column; line-height: 1.35; }
body.single-product .db-assurance__title { font-size: 14px; font-weight: 600; color: var(--db-text); }
body.single-product .db-assurance__desc { font-size: 12.5px; color: var(--db-text-muted); }

body.single-product .db-summary-reassure {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 22px 0 0;
  padding: 14px 16px;
  background: var(--db-cream);
  border: 1px solid var(--db-border);
  border-radius: 14px;
  font-size: 13px;
  color: var(--db-text-muted);
}
body.single-product .db-summary-reassure svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--db-gold-dark); }
body.single-product .db-summary-reassure a {
  color: var(--db-gold-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
body.single-product .db-summary-reassure a:hover { color: var(--db-gold); }

/* Product meta (SKU / category) as subtle chips */
body.single-product .summary .product_meta {
  margin: 22px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--db-border);
  font-family: var(--db-font-body);
  font-size: 12.5px;
  color: var(--db-text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}
body.single-product .summary .product_meta > span { display: inline-flex; gap: 5px; }
body.single-product .summary .product_meta a {
  color: var(--db-text);
  text-decoration: none;
  border-bottom: 1px solid var(--db-gold);
}
body.single-product .summary .product_meta a:hover { color: var(--db-gold-dark); }
/* Hide the SKU ("UGS : …") — not meaningful to customers on this catalogue. */
body.single-product .summary .product_meta .sku_wrapper { display: none !important; }

/* Additional-information attribute table: keep it left-aligned. */
body.single-product .woocommerce-Tabs-panel .shop_attributes th,
body.single-product .woocommerce-Tabs-panel .shop_attributes td {
  text-align: left !important;
  padding-left: 0 !important;
}

/* ---- Tabs (editorial, under the media rail in the left grid column) ---- */
body.single-product .woocommerce-tabs {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}
body.single-product .woocommerce-tabs ul.tabs {
  display: flex;
  gap: 6px;
  padding: 0 0 0;
  margin: 0 0 32px;
  border-bottom: 1px solid var(--db-border);
}
body.single-product .woocommerce-tabs ul.tabs::before,
body.single-product .woocommerce-tabs ul.tabs::after { display: none; }
body.single-product .woocommerce-tabs ul.tabs li {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.single-product .woocommerce-tabs ul.tabs li::before,
body.single-product .woocommerce-tabs ul.tabs li::after { display: none !important; }
body.single-product .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 14px 20px !important;
  font-family: var(--db-font-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--db-text-muted) !important;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
body.single-product .woocommerce-tabs ul.tabs li a:hover { color: var(--db-text) !important; }
body.single-product .woocommerce-tabs ul.tabs li.active a {
  color: var(--db-text) !important;
  border-bottom-color: var(--db-gold) !important;
}
body.single-product .woocommerce-Tabs-panel {
  max-width: 820px;
  font-family: var(--db-font-body);
  color: var(--db-text);
}
body.single-product .woocommerce-Tabs-panel h2 {
  font-family: var(--db-font-heading) !important;
  font-weight: 500 !important;
  font-size: clamp(22px, 2.2vw, 28px) !important;
  margin: 0 0 18px !important;
}
body.single-product .woocommerce-Tabs-panel p,
body.single-product .woocommerce-Tabs-panel li { font-size: 15px; line-height: 1.75; color: var(--db-text-muted); }
body.single-product .woocommerce-Tabs-panel ul { padding-left: 1.1em; }
body.single-product .woocommerce-Tabs-panel ul li { margin-bottom: 8px; }
body.single-product .shop_attributes th { font-family: var(--db-font-body) !important; color: var(--db-text) !important; }

/* ---- Breadcrumb ---- */
body.single-product .woocommerce-breadcrumb {
  max-width: min(1560px, 94vw);
  margin: 0 auto 22px !important;
  font-family: var(--db-font-body);
  font-size: 12.5px;
  color: var(--db-text-muted);
  letter-spacing: 0.2px;
}
body.single-product .woocommerce-breadcrumb a { color: var(--db-text-muted); text-decoration: none; }
body.single-product .woocommerce-breadcrumb a:hover { color: var(--db-gold-dark); }

/* ---- Responsive: single column under 1024px ---- */
@media (max-width: 1024px) {
  body.single-product div.product {
    grid-template-columns: 1fr;
  }
  /* Single column now — reset the desktop row-spanning trick (summary/tabs
     sharing rows 1-2) back to plain document order, or the summary's
     "grid-row: 1 / span 2" would overlap the gallery which also auto-places
     into row 1. */
  body.single-product div.product > .summary { grid-column: 1; grid-row: auto; }
  body.single-product div.product > .woocommerce-tabs { grid-row: auto; }
  body.single-product .summary.entry-summary { position: static; }
  body.single-product .vsd-model-viewer-frame { height: clamp(360px, 90vw, 520px) !important; }
}

/* Mobile tabs: wrapping pills instead of an awkwardly-wrapping underline row
   (the long "Informations complémentaires" label breaks a single-line row). */
@media (max-width: 767px) {
  body.single-product .woocommerce-tabs ul.tabs {
    flex-wrap: wrap;
    gap: 8px;
    border-bottom: none !important;
    margin: 0 0 24px !important;
  }
  body.single-product .woocommerce-tabs ul.tabs li a {
    border: 1px solid var(--db-border) !important;
    border-radius: 30px !important;
    padding: 9px 16px !important;
    margin-bottom: 0 !important;
    font-size: 13px !important;
    white-space: nowrap;
  }
  body.single-product .woocommerce-tabs ul.tabs li.active a {
    background: var(--db-dark) !important;
    color: var(--db-cream) !important;
    border-color: var(--db-dark) !important;
  }
}