/* ==========================================================================
   Single product — Produit-Chat.dc.html
   Full-width two-column: a "jewel"-framed gallery + an editorial summary,
   pill-chip variations, a soft qty stepper, then description + related.
   Loop/colour basics live in products.css; this is single-page only.
   ========================================================================== */

/* --- Gallery: jewel frame + cream radial glow + soft shadow --- */
.single-product .woocommerce-product-gallery { margin-bottom: 0; }
.single-product .woocommerce-product-gallery .flex-viewport,
.single-product .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
  border-radius: 22px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 40%, var(--jl-cream-tint), #F1E6D4);
  box-shadow: 0 26px 54px rgba(27, 21, 18, .10);
}
.single-product .woocommerce-product-gallery__image img { border-radius: 22px; }

/* Thumbnails: rounded squares, bordeaux ring on the active one */
.single-product .flex-control-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
/* Kill WooCommerce's float clearfix — as a flex container it renders these
   display:table pseudo-elements as phantom flex items that skew the gap. Match
   WC's own selector chain so source order (this sheet loads later) wins. */
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs::before,
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs::after { content: none; }
/* WooCommerce's column math (.woocommerce-product-gallery--columns-N li) ships at
   higher specificity and forces float + percentage width/margin — !important is the
   sanctioned escape against that plugin-enforced layout. The flex row + gap above
   then handles spacing, so the floats and column gutters must be neutralised. */
.single-product .flex-control-thumbs li {
  width: 78px !important;
  height: 78px !important;
  margin: 0 !important;
  float: none !important;
}
.single-product .flex-control-thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 13px;
  border: 2px solid var(--jl-line);
  opacity: 1;
  cursor: pointer;
  transition: border-color .2s ease;
}
.single-product .flex-control-thumbs img.flex-active,
.single-product .flex-control-thumbs img:hover { border-color: var(--jl-bordeaux); }

/* --- Summary: eyebrow, serif title, serif price --- */
.single-product .jl-product__eyebrow {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--jl-bordeaux);
}
.single-product .summary .product_title.entry-title {
  margin: 0 0 14px;
  font-size: clamp(38px, 4.6vw, 54px);
  line-height: 1;
  letter-spacing: -.01em;
}
.single-product .summary > p.price,
.single-product .summary .woocommerce-variation-price .price {
  font-family: var(--jl-serif);
  font-weight: 600;
  font-size: 38px;
  line-height: 1;
  color: var(--jl-bordeaux);
  margin: 0 0 22px;
}
.single-product .summary > p.price .woocommerce-Price-currencySymbol { font-size: .72em; }
.single-product div.product .single_variation .price { margin-bottom: 0; }
.single-product .summary .woocommerce-product-details__short-description {
  max-width: 440px;
  margin: 0 0 30px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--jl-text-70);
}

/* Brass stars, if/when real reviews exist */
.single-product .woocommerce-product-rating { margin-bottom: 22px; }
.single-product .star-rating span::before,
.single-product .star-rating::before { color: var(--jl-brass); }

/* --- Variations: stack label over pill chips --- */
.single-product .variations { margin: 0 0 6px; border: 0; }
.single-product .variations,
.single-product .variations tbody,
.single-product .variations tr,
.single-product .variations th,
.single-product .variations td {
  display: block;
  width: auto;
  border: 0;
  padding: 0;
  background: transparent;
}
.single-product .variations tr { margin-bottom: 22px; }
.cfvsw-label-inline table.variations td { display: flex !important; align-items: center; }
.single-product .variations th.label { padding: 0 0 11px; }
.single-product .variations th.label label {
  margin: 0;
  font-family: var(--jl-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: none;
  color: var(--jl-text-50);
}

/* cfvsw label swatches → pill chips (override the plugin's inline 24px/3px) */
.single-product .cfvsw-swatches-container { display: flex; flex-wrap: wrap; gap: 10px; }
.single-product .cfvsw-swatches-option.cfvsw-label-option {
  min-width: 0 !important;   /* plugin sets inline min-width:24px */
  min-height: 0 !important;
  border-radius: var(--jl-r-pill) !important; /* plugin sets inline 3px */
  padding: 10px 20px;
  border: 1px solid var(--jl-line);
  background: #fff;
  box-shadow: none;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.single-product .cfvsw-swatches-option .cfvsw-swatch-inner {
  background: transparent;
  border: 0;
  font: 500 13px/1 var(--jl-sans);
  color: var(--jl-ink);
}
.single-product .cfvsw-swatches-option:hover { border-color: rgba(110, 28, 47, .4); }
.single-product .cfvsw-swatches-option.cfvsw-selected-swatch {
  background: var(--jl-bordeaux) !important; /* plugin paints its own selected state */
  border-color: var(--jl-bordeaux) !important;
}
.single-product .cfvsw-swatches-option.cfvsw-selected-swatch .cfvsw-swatch-inner { color: var(--jl-cream); }

.single-product .reset_variations {
  display: inline-block;
  margin-top: 0;
  font-size: 12px;
  color: var(--jl-text-50);
}
.single-product .reset_variations:hover { color: var(--jl-bordeaux); }

/* SKU/category meta is redundant — category is the eyebrow, SKU is empty (ND) */
.single-product .product_meta { display: none; }

/* WAPF custom-description field label, sitting under the chips */
.single-product .wapf { margin-top: 8px; }
.single-product .wapf-field-label label span {
  font: 500 12px/1 var(--jl-sans);
  letter-spacing: .06em;
  color: var(--jl-text-50);
}

/* --- Quantity stepper + add-to-cart --- */
.single-product .woocommerce-variation-add-to-cart,
.single-product form.cart:not(.variations_form) {
  display: flex;
  gap: 14px;
  align-items: stretch;
  margin-top: 10px;
}
/* WooCommerce clearfixes .variations_button with display:table pseudo-elements;
   in this flex row they become phantom items that add a 14px gap at each end.
   Match WC's selector chain so source order (this sheet loads later) wins. */
.single-product div.product .variations_button::before,
.single-product div.product .variations_button::after { content: none; }
.single-product form.cart .quantity {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 4px 6px;
  background: #fff;
  border: 1px solid var(--jl-line);
  border-radius: var(--jl-r-pill);
}
.single-product form.cart .quantity .qty {
  width: 46px;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
  font: 500 15px var(--jl-sans);
  color: var(--jl-ink);
  -moz-appearance: textfield;
}
.single-product form.cart .quantity .qty::-webkit-outer-spin-button,
.single-product form.cart .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.single-product .jl-qty-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: var(--jl-r-pill);
  background: transparent;
  color: var(--jl-bordeaux);
  font-size: 20px;
  line-height: 1;
  box-shadow: none;
  cursor: pointer;
  transition: background .15s ease;
}
.single-product .jl-qty-btn:hover { background: rgba(110, 28, 47, .08); color: var(--jl-bordeaux); }
.single-product .single_add_to_cart_button {
  flex: 1;
  min-height: 50px;
  padding: 0 28px;
  font-size: 15px;
}
.single-product .single_add_to_cart_button::before {
  content: "";
  flex: none;
  width: 17px;
  height: 17px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M11%205h2v6h6v2h-6v6h-2v-6H5v-2h6z'%20fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M11%205h2v6h6v2h-6v6h-2v-6H5v-2h6z'%20fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --- Description / tabs: a flat editorial section --- */
.single-product .woocommerce-tabs {
  margin-top: 90px;
  padding-top: 60px;
  border-top: 1px solid var(--jl-line);
}
.single-product .woocommerce-tabs ul.tabs {
  float: none;     /* Storefront floats the tab list into a narrow left column */
  width: auto;
  margin: 0 0 26px;
  padding: 0;
  text-align: left;
}
.single-product .woocommerce-tabs ul.tabs::before { display: none; }
.single-product .woocommerce-tabs ul.tabs li {
  display: inline-block;
  margin: 0 28px 0 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.single-product .woocommerce-tabs ul.tabs li::before,
.single-product .woocommerce-tabs ul.tabs li::after { display: none; }
.single-product .woocommerce-tabs ul.tabs li a {
  padding: 0 0 8px;
  font: 500 12px/1 var(--jl-sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--jl-text-50);
  border-bottom: 2px solid transparent;
}
.single-product .woocommerce-tabs ul.tabs li.active a,
.single-product .woocommerce-tabs ul.tabs li a:hover {
  color: var(--jl-bordeaux);
  border-bottom-color: var(--jl-bordeaux);
}
.single-product .woocommerce-tabs .panel,
.single-product .woocommerce-Tabs-panel {
  float: none;     /* and Storefront floats the panel right — make it full width */
  width: 100%;
  margin: 0;
  max-width: 760px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--jl-text-70);
}
.single-product .woocommerce-Tabs-panel h2 {
  margin: 0 0 18px;
  font-family: var(--jl-serif);
  font-weight: 600;
  font-size: 34px;
  line-height: 1.1;
}
.single-product .woocommerce-Tabs-panel h3 {
  font-family: var(--jl-serif);
  font-weight: 600;
  font-size: 24px;
}

/* --- Related ("Produits similaires") --- */
.single-product .related.products,
.single-product .upsells.products {
  clear: both;
  margin-top: 90px;
  border-top: 0;
}
.single-product .related.products > h2,
.single-product .upsells.products > h2 {
  margin: 0 0 34px;
  font-family: var(--jl-serif);
  font-weight: 600;
  font-size: 36px;
}

@media (max-width: 768px) {
  .single-product .woocommerce-tabs { margin-top: 56px; padding-top: 40px; }
  .single-product .related.products { margin-top: 56px; }
}