/* ===== Product page (mockup 5A) ===== */
/* The product page is a Flatsome custom layout block ("product-page"):
   vertical gallery left, info column right, accordion tabs, related grid. */

/* breadcrumbs -> quiet mauve category path */
.single-product .breadcrumbs {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bsx-mauve);
  font-weight: 400;
  margin-bottom: 14px;
}
.single-product .breadcrumbs a { color: var(--bsx-mauve); }
.single-product .breadcrumbs a:hover { color: var(--bsx-ink); }

/* title */
.single-product .product-title-container .product-title {
  font-size: 38px;
  line-height: 1.05;
  color: var(--bsx-ink);
}
.single-product .product-title-container { margin-bottom: 12px; }

/* price */
.single-product .product-page-price,
.single-product .price-wrapper .price {
  font-size: 22px;
  color: var(--bsx-ink);
  font-family: var(--bsx-font-body);
  font-weight: 400;
}
.single-product .price-wrapper .price del { color: var(--bsx-muted-price); font-size: 17px; }

/* short description */
.single-product .product-short-description,
.single-product .product-excerpt {
  color: var(--bsx-text-soft);
  font-size: 14px;
  line-height: 1.65;
}

/* variation attribute labels (SIZE / COLOR) + selected value beside them.
   Flatsome shrinks the selected value to ~10px/400; bump it to match the
   header so "SIZE: XS" reads as one consistent label. */
.single-product .variations label {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bsx-text);
}
.single-product .variations .ux-swatch-selected-value {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bsx-text-soft);
}

/* COLOR swatches (5A): 32px circles showing the real colour, dark ring
   when selected. Flatsome renders these as .ux-swatch--color with an inner
   .ux-swatch__color carrying --swatch-color. */
.single-product .variations .ux-swatches-attribute-ux_color { gap: 10px; }
.single-product .variations .ux-swatch--color {
  width: 32px;
  height: 32px;
  min-width: 0;
  padding: 0;
  border: 1px solid #ddd6ca;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: none;
  outline: none;
}
.single-product .variations .ux-swatch--color .ux-swatch__color {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: block;
}
.single-product .variations .ux-swatch--color.selected {
  border: 2px solid var(--bsx-ink);
  box-shadow: none;
  outline: none;
}
.single-product .variations .ux-swatch--color.selected::after { display: none; }

/* SIZE swatches (5A): 48px rounded squares (S / M / L) */
.single-product .variations .ux-swatch--label {
  min-width: 48px;
  height: 48px;
  border: 1px solid #ddd6ca;
  border-radius: var(--bsx-radius);
  background: #fff;
  color: var(--bsx-text);
  box-shadow: none;
}
.single-product .variations .ux-swatch--label.selected {
  border-color: var(--bsx-ink);
  color: var(--bsx-ink);
  box-shadow: none;
}
.single-product .variations select {
  border: 1px solid #ddd6ca;
  border-radius: var(--bsx-radius);
  height: 48px;
  font-size: 14px;
  color: var(--bsx-text);
}

/* add to cart: full-width button, no quantity stepper (qty adjusted in the bag) */
.single-product .add-to-cart-container .woocommerce-variation-add-to-cart,
.single-product .add-to-cart-container form.cart:not(.variations_form),
.single-product .add-to-cart-container .variations_button {
  display: flex;
  align-items: stretch;
  gap: 12px;
}
/* Hide the quantity counter on the product page; the hidden input still
   submits qty=1 so add-to-cart works and quantity is editable in the bag.
   !important beats the inline display style WooCommerce's variation.js sets
   on the add-to-cart area once a purchasable variation is selected. */
.single-product form.cart .quantity,
.single-product .add-to-cart-container .quantity {
  display: none !important;
}
/* Hide the "in stock" availability label (5A design shows none). Out-of-stock
   messaging is intentionally kept so shoppers still see unavailable items. */
.single-product .stock.in-stock {
  display: none !important;
}
/* Add to Bag: fixed 220px per 5A design (full-width only on mobile). */
.single-product .add-to-cart-container .single_add_to_cart_button {
  flex: 0 0 auto;
  width: 220px;
  max-width: 100%;
  background-color: var(--bsx-ink);
  border-radius: var(--bsx-radius) !important;
  letter-spacing: 0.03em;
  text-transform: none;
  font-weight: 600;
  height: 52px;
  line-height: 52px;
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
}
.single-product .add-to-cart-container .single_add_to_cart_button:hover { background-color: #000; }

/* accordion rows (5A): minimal separated rows, label left + mauve "+" toggle
   right that flips to "−" when open. Flatsome markup is
   .accordion-item > a.accordion-title.plain (button.toggle + label text). */
.single-product .product-page-accordian .accordion-item {
  border-bottom: 1px solid var(--bsx-border);
}
.single-product .product-page-accordian .accordion-item:first-child {
  border-top: 1px solid var(--bsx-border);
}
.single-product .product-page-accordian .accordion-item:last-child {
  border-bottom: 0;
}
.single-product .product-page-accordian .accordion-title {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 15px 0;
  margin: 0;
  border: 0;
  background: none;
  font-family: var(--bsx-font-body);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bsx-text);
}
/* toggle → plain mauve glyph, no button chrome.
   Flatsome positions .toggle absolutely (top-left), which drops it out of the
   flex row so it overlaps the label. Force it back into flow (position:static,
   no float/offsets) so it's a real flex item and space-between pins it right. */
.single-product .product-page-accordian .accordion-title .toggle {
  position: static;
  float: none;
  left: auto;
  right: auto;
  top: auto;
  transform: none;
  order: 2;            /* label (anonymous text item) left, toggle right */
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  line-height: 1;
}
.single-product .product-page-accordian .accordion-title .toggle i { display: none; }
.single-product .product-page-accordian .accordion-title .toggle::before {
  content: "+";
  font-family: var(--bsx-font-body);
  font-size: 13px;   /* design: "+" is inline text at the row's 13px, not an enlarged glyph */
  font-weight: 400;
  line-height: 1;
  color: var(--bsx-mauve);
}
.single-product .product-page-accordian .accordion-title[aria-expanded="true"] .toggle::before {
  content: "\2212"; /* minus */
}
.single-product .product-page-accordian .accordion-inner {
  color: var(--bsx-text-soft);
  font-size: 14px;
  line-height: 1.7;
  padding: 0 0 18px;
}

/* gallery */
.single-product .product-gallery-slider,
.single-product .product-gallery-slider .flickity-viewport { border-radius: 12px; overflow: hidden; }
.single-product .vertical-thumbnails .col a { border-radius: 7px; overflow: hidden; display: block; }
.single-product .vertical-thumbnails .col img { border-radius: 7px; }
.single-product .vertical-thumbnails .is-nav-selected img {
  border: 2px solid var(--bsx-mauve);
}

/* related products: «Рекомендуємо» centered Playfair.
   Heading is h2.wt-crp-heading (wt-related-products plugin); the old site
   custom CSS pins its font-size with !important, hence ours too. */
.single-product .related .wt-crp-heading,
.single-product .related h3,
.single-product .related .product-section-title {
  font-family: var(--bsx-font-heading);
  font-size: 26px !important;
  font-weight: 500;
  text-align: center;
  color: var(--bsx-ink);
  border: 0;
  margin-bottom: 24px;
}

/* Related/recommended cards are .product-small like the shop grid, but the main
   product price rule (.single-product .price-wrapper .price, 22px) cascades into
   them and blows their prices up. Reset them to the standard card sizing so every
   product card matches shop.css. Higher specificity (4 classes) wins over 22px. */
.single-product .product-small .price-wrapper .price { font-size: 15px; }
.single-product .product-small .price-wrapper .price del { font-size: 13px; }

/* design shows 3 related cards per row (plugin outputs 4 columns) */
@media (min-width: 850px) {
  .single-product .related .products.large-columns-4 > .col {
    flex-basis: 33.333%;
    max-width: 33.333%;
  }
}

@media (max-width: 549px) {
  .single-product .product-title-container .product-title { font-size: 28px; }
  .single-product .add-to-cart-container .single_add_to_cart_button { width: 100%; }
}