/* ==========================================================================
   MobCub — Shoptimizer Single Product (PDP) restyle
   Matches the "Dressing Astoria" reference: warm cream, serif display,
   terracotta accent, fully-rounded pill controls.

   Scope: single-product summary column. Paste into Appearance > Customize >
   Additional CSS, or your child theme style.css. Everything is scoped under
   .single-product so it never leaks into shop/cart/checkout.
   ========================================================================== */

.single-product {
  /* ---- Design tokens ---------------------------------------------------- */
  --mc-bg:            #f8f6f3; /* page / cream                  */
  --mc-surface:       #ebe8e5; /* info box, inactive chips       */
  --mc-line:          #e2ddd7; /* hairline dividers / borders    */
  --mc-charcoal:      #3e4247; /* primary text / headings        */
  --mc-ink:           #3d3833; /* body text                      */
  --mc-muted:         #766a5e; /* secondary / labels             */
  --mc-faint:         #958b80; /* eyebrow, captions              */
  --mc-terra:         #ff0044; /* accent — buttons, rings        */
  --mc-terra-hover:   #db023c; /* accent pressed/hover           */

  /* Fonts — swap if your tokens differ. DM Sans for display,
     Inter for UI/body. Make sure both are enqueued in the theme. */
  --mc-serif: 'DM Sans', serif;
  --mc-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --mc-radius-pill: 999px;
  --mc-radius-box:  14px;
}

/* ==========================================================================
   1. SUMMARY COLUMN — base rhythm
   ========================================================================== */
.single-product div.product .summary.entry-summary {
  font-family: var(--mc-sans);
  color: var(--mc-ink);
  padding-left: 0; /* breathing room from the left rule, like the ref */
}

.single-product .summary .cgkit-attribute-swatches .cgkit-attribute-swatch.cgkit-color > button {width: 44px; height: 44px}
/*.single-product .summary .cgkit-attribute-swatches .cgkit-attribute-swatch.cgkit-color span.color-div {width: 36px; height: 36px; background: transparent !important}*/
/*ovi*/

/* square */
.single-product .summary .cgkit-attribute-swatches .cgkit-attribute-swatch.cgkit-color > button,
.single-product .cgkit-as-wrap .cgkit-attribute-swatches .cgkit-attribute-swatch.cgkit-color > button:before,
.single-product .summary .cgkit-attribute-swatches .cgkit-attribute-swatch.cgkit-color span.color-div {border-radius: 50%}

/* 1. Set the parent swatch to relative positioning */
.single-product .summary .cgkit-attribute-swatches .cgkit-swatch-selected {
  position: relative;
  /* Optional: Add a matching green border to the swatch itself */
  border: 2px solid #22c55e; 
}

/* 2. Create the green checkmark badge */
.single-product .summary .cgkit-attribute-swatches .cgkit-swatch-selected::after {
	content: "\2714"; /* Heavy check mark */
  position: absolute;
  
  /* Position it in the bottom right corner (adjust as needed) */
  bottom: -6px; 
  right: -6px;
  
  /* Circle styling */
  width: 18px;
  height: 18px;
  background-color: #22c55e; /* Green color */
  border-radius: 50%; /* Makes it a perfect circle */
  
  /* Center the checkmark inside the circle */
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* Text styling */
  color: white;
  font-size: 11px;
  font-weight: bold;
  
  /* Optional: Adds a subtle shadow so it pops over the swatch color */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  z-index: 10; 
}

.product-details-wrapper {padding-top: 3rem}

/* ==========================================================================
   2. TITLE + EYEBROW
   The category eyebrow ("MOBILĂ DORMITOR — DRESSINGURI") is output by the
   breadcrumb/category; if you render it via a hook with .mc-eyebrow, this
   styles it. The H1 title is .product_title.entry-title.
   ========================================================================== */
.single-product .mc-eyebrow,
.single-product .summary .posted_in {
  font-family: var(--mc-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mc-terra);
  margin: 0 0 0.65rem;
}

.single-product .product_title.entry-title {
  font-family: var(--mc-serif);
  font-weight: 400;
  font-size: clamp(2.6rem, 4.4vw, 2.75rem);
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--mc-charcoal);
  margin: 0 0 0.9rem;
}

/* ==========================================================================
   3. RATING ROW  ("☆☆☆☆☆  Fii primul care scrie o recenzie")
   ========================================================================== */
.single-product .woocommerce-product-rating {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0 0 1.4rem;
}
.single-product .woocommerce-product-rating .star-rating {
  font-size: 1rem;
  color: var(--mc-faint);
}
.single-product .woocommerce-product-rating .woocommerce-review-link {
  font-family: var(--mc-sans);
  font-size: 0.95rem;
  color: var(--mc-muted);
  text-decoration: none;
}
.single-product .woocommerce-product-rating .woocommerce-review-link:hover {
  color: var(--mc-charcoal);
}

/* ==========================================================================
   4. PRICE  (serif, large)
   Covers the summary price (.cgkit-as-variation-price > p.price) and the
   live variation price (.woocommerce-variation-price .price).
   ========================================================================== */
.single-product .cgkit-as-variation-price p.price,
.single-product .summary > p.price,
.single-product .woocommerce-variation-price .price {
  font-family: var(--mc-serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 3.6vw, 2.9rem);
  line-height: 1.1;
  color: var(--mc-charcoal);
  margin: 0 0 0.5rem;
	
  color: #ff0044;        /* terracotta, matches CTA */
  font-family: 'DM Sans', serif;
  font-size: 2rem;       /* slightly smaller than title */
  font-weight: 400;	
}
.single-product .price .woocommerce-Price-currencySymbol {
  /* "lei" sits inline, same size — keep it from shrinking */
  font-size: inherit;
  font-weight: 400;
}
/* Strikethrough (regular) price when on sale */
.single-product .price del,
.single-product .price del .amount {
  color: var(--mc-faint);
  font-size: 0.95em;
  font-weight: 400;
}

.single-product .price ins {
  text-decoration: none;
}



/* "Plătește în rate" finance line (if rendered with .mc-finance, else target
   your installments plugin wrapper). Kept subtle and small. */
.single-product .mc-finance {
  font-family: var(--mc-sans);
  font-size: 0.9rem;
  color: var(--mc-muted);
  margin: 0 0 1.6rem;
}

/* ==========================================================================
   5. VARIATION SWATCHES  (CommerceKit)
   Layout: .cgkit-as-wrap > .cgkit-swatch-title (label) + <ul>.
   We hide WooCommerce's default <th>/<td> table chrome and let the swatch
   blocks stack cleanly like the reference ("Culoare: Alb Corp").
   ========================================================================== */

/* Strip the variations <table> frame so rows read as plain stacked blocks */
.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;
  margin: 0;
  background: none;
}
.single-product .variations tr {
  margin-bottom: 0.4rem;
}
.product .summary table.variations tr:last-child .value {padding-bottom: 0}

.single-product .variations td.value .cgkit-as-wrap .cgkit-swatch-title {display: none !important}

.single-product .cgkit-as-wrap {
  margin: 0;
}

/* "Culoare:" / "Alege dimensiuni:" label above the swatches.
   The plugin prints attribute text in .cgkit-swatch-title — restyle it. */
.single-product .cgkit-swatch-title {
  font-family: var(--mc-sans);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--mc-muted);
  margin: 0 0 0.7rem;
  display: block;
}
/* The selected value gets emphasised (e.g. "Alb Corp" in charcoal) */
.single-product .cgkit-chosen-attribute {
  font-weight: 600;
  color: var(--mc-charcoal);
}

.single-product .cgkit-attribute-swatches-wrap {
  border: 0;
  padding: 0;
  margin: 0;
}
.single-product .cgkit-attribute-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.single-product .summary .cgkit-attribute-swatches .cgkit-attribute-swatch {margin-right: 0}

.product .woocommerce-product-gallery .flex-control-thumbs li {
  flex: 0 0 auto;
  width: 92px !important;     /* FlexSlider pune width inline pe li */
  height: 92px;
  margin: 0;
  padding: 0;
  list-style: none;
  cursor: pointer;
}

.product .woocommerce-product-gallery .flex-control-thumbs li img {
  width: 100% !important;     /* învinge atributul width="1448" din onload */
  height: 100% !important;    /* învinge height din onload */
  max-width: none;
  object-fit: cover;
  display: block;
  border-radius: 12px;
  border: 1.5px solid #e2ddd7;
  background: transparent;
  opacity: 0.85;
  transition: opacity 0.15s ease, border-color 0.15s ease, outline-color 0.15s ease;
}

/* ---- Colour swatches (round) ----------------------------------------- */
.single-product .cgkit-attribute-swatch.cgkit-color .swatch {
  position: relative;
  width: 48px;
  height: 48px;
  padding: 4px;            /* gap between ring and fill */
  border-radius: var(--mc-radius-pill);
  border: 1.5px solid var(--mc-line);
  background: transparent;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* Fill is absolutely centred inside the padded ring so the colour disc sits
   dead-centre (CommerceKit otherwise nudges it via inline left/top). inset
   matches the swatch padding for an even gap on all four sides. */
.single-product .cgkit-attribute-swatch.cgkit-color .swatch .color-div {
  position: absolute;
  inset: 4px;
  margin: auto;
  width: auto;
  height: auto;
  border-radius: var(--mc-radius-pill);
  display: block;
}
.single-product .cgkit-attribute-swatch.cgkit-color .swatch:hover {
  border-color: var(--mc-faint);
}
/* Selected colour → terracotta ring */
.single-product .cgkit-attribute-swatch.cgkit-color .swatch.cgkit-swatch-selected {
  border-color: var(--mc-terra);
  border-width: 2px;
}
/* Kill the plugin's default selected ::before (checkmark/extra ring) */
.single-product .cgkit-attribute-swatch.cgkit-color > button.cgkit-swatch-selected::before {
  display: none;
}
/* ---- Size / text swatches (outlined pills, .button-fluid) ------------- */
.single-product .cgkit-attribute-swatch.cgkit-button .swatch,
.single-product .swatch.button-fluid {
  min-width: 0;
  width: auto;
  height: auto;
  padding: 0.6rem 1.15rem;
  border-radius: var(--mc-radius-pill);
  border: 1.5px solid var(--mc-line);
  background: transparent;
  font-family: var(--mc-sans);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--mc-ink);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.single-product .cgkit-attribute-swatch.cgkit-button .swatch:hover,
.single-product .swatch.button-fluid:hover {
  border-color: var(--mc-charcoal);
}
.single-product .cgkit-attribute-swatch.cgkit-button .swatch.cgkit-swatch-selected,
.single-product .swatch.button-fluid.cgkit-swatch-selected {
  border-color: var(--mc-terra);
  color: var(--mc-terra);
  background: rgba(157, 70, 22, 0.05);
}

/* Out-of-stock swatch — diagonal line via .cross stays, just mute it */
.single-product .swatch[data-oos="true"] { opacity: 0.4; }

/* "Anulează" reset link */
.single-product .reset_variations {
  font-family: var(--mc-sans);
  font-size: 0.85rem;
  color: var(--mc-muted);
  text-decoration: underline;
}
.single-product .reset_variations:hover { color: var(--mc-charcoal); }

/* ---- Spacing between the variation block and the price + action row ----
   In image 2 the "Anulează" link sat flush against the price/quantity below.
   Push the single_variation_wrap (which holds the live variation price and
   the add-to-cart row) down so the section breathes. */
.single-product .single_variation_wrap {
  margin-top: 1.6rem;
}
.single-product .woocommerce-variation-price {
  margin-bottom: 0.4rem;
	display: none !important;
}
.single-product .woocommerce-variation-price .price {
  margin: 0;
}

/* The "200 × 200 × 51 cm · Vezi toate detaliile" meta line — if you output it
   with .mc-dims, this styles it. */
.single-product .mc-dims {
  font-family: var(--mc-sans);
  font-size: 0.95rem;
  color: var(--mc-muted);
  margin: 0.4rem 0 1.4rem;
}

/* ==========================================================================
   6. QUANTITY + ADD TO CART  (the action row)
   --------------------------------------------------------------------------
   IMPORTANT — real markup nesting (variable product + CommerceKit):

     form.cart.variations_form
       .single_variation_wrap
         .woocommerce-variation-add-to-cart
           .commercekit-sticky-atc-intersector   ← quantity + button live HERE
             <script>                              (must be removed from flow)
             .quantity.buttons_added
             .single_add_to_cart_button

   The flex must sit on .commercekit-sticky-atc-intersector, NOT on
   .woocommerce-variation-add-to-cart (that parent has a single child, which
   is why the button previously dropped onto its own row).

   For simple products there is no intersector, so we also flex
   form.cart directly as a fallback.
   ========================================================================== */
.single-product .woocommerce-variation-add-to-cart .commercekit-sticky-atc-intersector,
.single-product .woocommerce-variation-add-to-cart:not(:has(.commercekit-sticky-atc-intersector)),
.single-product form.cart:not(.variations_form) {
  display: flex;
  align-items: stretch;
  gap: 0.85rem;
  margin: 0 0 0.4rem;
}

/* The inline <script> that ships as the first child of the intersector must
   not occupy a flex slot (it was creating an empty gap / pushing layout). */
.single-product .commercekit-sticky-atc-intersector > script {
  display: none;
}

/* ---- Quantity stepper (pill) ----------------------------------------- */
.single-product .quantity.buttons_added {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  width: 128px;
  height: 56px;
  padding: 0;
  border: 1.5px solid var(--mc-line);
  border-radius: var(--mc-radius-pill);
  background: var(--mc-bg);
  overflow: hidden;
}
.single-product .quantity.buttons_added .qty {
  -moz-appearance: textfield;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  text-align: center;
  font-family: var(--mc-sans);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--mc-charcoal);
  /* leave room for the +/- hit targets on each side */
  padding: 0 2.6rem;
	position: relative;
	z-index: 3;
}
.single-product .quantity.buttons_added .qty::-webkit-outer-spin-button,
.single-product .quantity.buttons_added .qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Shoptimizer's +/- ship as EMPTY spans inside .quantity-nav, and the source
   order is .plus FIRST then .minus. We position them by class (.minus = left,
   .plus = right) so order in the DOM never matters, and draw the glyphs via
   ::before. The nav overlays the field; only the two buttons catch clicks. */
.single-product .quantity-nav {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  background: transparent;
  pointer-events: none; /* children re-enable */
}
.single-product .quantity-button {
  position: absolute;
  top: 0;
  height: 100%;
  width: 40px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
  color: var(--mc-muted);
  font-size: 1.3rem;
  line-height: 1;
  user-select: none;
  background: none;
  transition: color 0.15s ease;
}
.single-product .quantity-button:hover { color: var(--mc-charcoal); }

/* Minus → always left edge; Plus → always right edge */
.single-product .quantity-button.minus,
.single-product .quantity-button.quantity-down {
  left: 0;
  right: auto;
	font-family: auto;
}
.single-product .quantity-button.plus,
.single-product .quantity-button.quantity-up {
  right: 0;
  left: auto;
	font-family: auto;
}

.plata-in-rate {
	display: flex;
	width: 100%;
	clear: both;
	font-size: 12px;
	align-items: center;
	color: #3d3833;
	gap: 5px;
	padding: 5px 0;
}

.plata-in-rate svg {
	color: #ff0044;
}
.plata-in-rate a {color: #3d3833; text-decoration: underline}
.plata-in-rate a:hover {
	color: #ff0044;	
	text-decoration: underline;
}

.commercekit-pdp-simple-form .commercekit-sticky-atc-intersector {display: flex; gap: 15px}

/* Draw glyphs (spans ship empty); reset any inherited icon mask/background */
.single-product .quantity-button.minus::before,
.single-product .quantity-button.quantity-down::before {
	content: "\2212";
  mask-image: none;
  -webkit-mask-image: none;
  background: none;
}
.single-product .quantity-button.plus::before,
.single-product .quantity-button.quantity-up::before {
  content: "+";
  mask-image: none;
  -webkit-mask-image: none;
  background: none;
}

/* ---- Add to cart button (terracotta pill) ---------------------------- */
.swiper-container.cg-main-swiper .swiper-wrapper .swiper-slide,
.cg-main-swiper .swiper-slide img, .cg-thumb-swiper .swiper-slide img,
#commercegurus-pdp-gallery .single-product .swiper-slide-imglink {border-radius: 20px}
.single-product .single_add_to_cart_button.button.alt {
  flex: 1 1 auto;
  min-height: 56px;
  padding: 0 2rem;
  border: 0;
  border-radius: var(--mc-radius-pill);
  background: var(--mc-terra);
  color: #fff;
  font-family: var(--mc-sans);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;       /* override Shoptimizer uppercase */
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
	margin: 0;
  transition: background 0.18s ease, transform 0.05s ease;
}
.single-product .single_add_to_cart_button.button.alt:hover {
  background: var(--mc-terra-hover);
}
.single-product .single_add_to_cart_button.button.alt:active {
  transform: translateY(1px);
}
.single-product .single_add_to_cart_button.button.alt:focus-visible {
  outline: 3px solid rgba(157, 70, 22, 0.35);
  outline-offset: 2px;
}
.single-product .single_add_to_cart_button.disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ==========================================================================
   7. WISHLIST  ("♡ Adaugă la favorite")
   CommerceKit outputs .commercekit-wishlist / .cg-wishlist. Render it as a
   quiet text+icon link under the action row.
   ========================================================================== */
.single-product .commercekit-wishlist,
.single-product .cg-wishlist {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-family: var(--mc-sans);
  font-size: 0.98rem;
  color: var(--mc-ink);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.single-product .commercekit-wishlist:hover,
.single-product .cg-wishlist:hover { color: var(--mc-terra); }
.single-product .commercekit-wishlist svg,
.single-product .cg-wishlist svg { width: 18px; height: 18px; }

.single-product .cgkit-as-wrap .cgkit-attribute-swatches .cgkit-attribute-swatch.cgkit-button button.button-fluid {border-radius: 20px}

/* ==========================================================================
   8. INFO / TRUST BLOCKS
   The "Livrare gratuită" panel and the 3-up trust row
   (Fabricat în România · Garanție inclusă · Retur în 14 zile) are usually
   added via a hook/shortcode. These styles assume the markup below; adjust
   class names to match what you output:

     <div class="mc-ship">
       <span class="mc-ship__title">Livrare gratuită în toată România</span>
       <span class="mc-ship__sub">Estimare: 3–5 zile lucrătoare</span>
     </div>
     <div class="mc-trust">
       <span>Fabricat în România</span>
       <span>Garanție inclusă</span>
       <span>Retur în 14 zile</span>
     </div>
     <div class="mc-pay">Plată securizată <i>VISA</i><i>MC</i><i>PAYPAL</i></div>
   ========================================================================== */
.single-product .mc-ship {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 1.6rem 0 1.3rem;
  padding: 1.05rem 1.25rem;
  background: var(--mc-surface);
  border-radius: var(--mc-radius-box);
}
.single-product .mc-ship__title {
  font-family: var(--mc-sans);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--mc-charcoal);
}
.single-product .mc-ship__sub {
  font-family: var(--mc-sans);
  font-size: 0.88rem;
  color: var(--mc-muted);
}

.single-product .mc-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  padding: 0 0 1.2rem;
  margin: 0 0 1.2rem;
  border-bottom: 1px solid var(--mc-line);
}
.single-product .mc-trust > span {
  font-family: var(--mc-sans);
  font-size: 0.92rem;
  color: var(--mc-ink);
}

.single-product .mc-pay {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--mc-sans);
  font-size: 0.9rem;
  color: var(--mc-muted);
}
.single-product .mc-pay i {
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--mc-muted);
  background: var(--mc-surface);
  border-radius: 6px;
  padding: 0.32rem 0.55rem;
}

/* ==========================================================================
   9. SHORT DESCRIPTION (if shown in summary)
   ========================================================================== */
.single-product .woocommerce-product-details__short-description {
  font-size: 14px;
  line-height: 1.4;
  color: var(--mc-ink);
  margin: 0.5rem 0;
}

/* ==========================================================================
   10. GALLERY — soften corners to match the rounded card language
   ========================================================================== */
.single-product .woocommerce-product-gallery__image,
.single-product .woocommerce-product-gallery__image img,
.single-product .flex-control-thumbs li img {
  border-radius: var(--mc-radius-box);
}
/* Active thumbnail → terracotta ring (Shoptimizer toggles .flex-active) */
.single-product .flex-control-thumbs li img.flex-active,
.single-product .flex-control-thumbs li .flex-active img {
  outline: 2px solid var(--mc-terra);
  outline-offset: 2px;
}

/* ==========================================================================
   11. STICKY ADD-TO-CART BAR (Shoptimizer) — match the button language
   ========================================================================== */
.single-product .shoptimizer-sticky-add-to-cart__content-button .button,
.single-product .shoptimizer-sticky-add-to-cart .single_add_to_cart_button {
  border-radius: var(--mc-radius-pill);
  background: var(--mc-terra);
  text-transform: none;
  font-family: var(--mc-sans);
  font-weight: 600;
}
.single-product .shoptimizer-sticky-add-to-cart__content-button .button:hover {
  background: var(--mc-terra-hover);
}

/* ==========================================================================
   12. TABS  (Descriere · Caracteristici · Întreținere)
   Underlined, lowercase-friendly tab row like the reference.
   ========================================================================== */
.single-product .wc-tabs {
  border-bottom: 1px solid var(--mc-line);
  margin: 0 0 2rem;
  gap: 2rem;
  display: flex;
  padding: 0;
}
.single-product .wc-tabs li { margin: 0; background: none; border: 0; }
.single-product .wc-tabs li a {
  font-family: var(--mc-sans);
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--mc-muted);
  padding: 0 0 0.85rem;
  border-bottom: 2px solid transparent;
}
.single-product .wc-tabs li.active a {
  color: var(--mc-charcoal);
  border-bottom-color: var(--mc-charcoal);
}

/* ==========================================================================
   13. RESPONSIVE — stack action row on small screens
   ========================================================================== */
@media (max-width: 480px) {
  .single-product form.cart .woocommerce-variation-add-to-cart,
  .single-product form.cart:not(.variations_form) {
    flex-direction: column;
  }
  
  .single-product .single_add_to_cart_button.button.alt { width: 100%; }
  .single-product .summary.entry-summary {
    border-left: 0;
    padding-left: 0;
  }
}

/* ==========================================================================
   PDP gallery thumbnails — .flex-control-thumbs
   ========================================================================== */
.product .woocommerce-product-gallery .flex-control-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0.85rem 0 0;
  padding: 0;
  list-style: none;
}

.product .woocommerce-product-gallery .flex-control-thumbs li {
  flex: 0 0 auto;
  width: 92px;          /* even, fixed thumb size */
  height: 92px;
  margin: 0;
  padding: 0;
  list-style: none;
  cursor: pointer;
}

.product .woocommerce-product-gallery .flex-control-thumbs li img {
  width: 100%;
  height: 100%;
  object-fit: cover;     /* fill the square, no letterbox/beige gaps */
  display: block;
  border-radius: 12px;
  border: 1.5px solid #e2ddd7;
  background: transparent;
  opacity: 0.85;
  transition: opacity 0.15s ease, border-color 0.15s ease, outline-color 0.15s ease;
}

.product .woocommerce-product-gallery .flex-control-thumbs li img:hover {
  opacity: 1;
  border-color: #958b80;
}

/* Active thumbnail → terracotta ring only on the selected one
   (Shoptimizer toggles .flex-active on the active thumb img) */
.product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
  opacity: 1;
  border-color: #ff0044;
  outline: 2px solid #ff0044;
  outline-offset: 2px;
}

@media all and (max-width: 768px) {
	body .archive-header .woocommerce-breadcrumb {
    white-space: break-spaces;
    padding: 10px 0;
	}		
	body .product-details-wrapper {padding-top: 20px}
}