/*
 * Markething Herba — Single product styling (Blocksy native template).
 *
 * The variation selector is now Blocksy's native "Variation Swatches"
 * (the old woovr "Variations as Radio Buttons" design has been retired).
 * This file styles those native swatches into a polished package selector and
 * keeps the plugin-module outputs that still render in the Blocksy summary:
 * the Podnaslov subtitle, the 30-day lowest price, and the availability line,
 * plus the Blocksy text-colour fix. Enqueued on single product pages only.
 */

/* ── Podnaslov (subtitle), between title and price ─────────────────────── */
.mh-single-subtitle {
  margin: 4px 0 12px !important;
  font-family: "Santral", sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.5px !important;
  color: #2d202b !important;
}

/* ── Let Blocksy control text colour on the single product ────────────────
 * Elementor's global kit (.elementor-kit-44 on <body>) sets the body text
 * colour with higher specificity than Blocksy's `body` rule, so it tints the
 * product summary/description (#5C3A52 instead of Blocksy's #1A1A1A). Re-assert
 * Blocksy's text colour here; elements with their own colour (price, buttons,
 * swatches, availability) keep theirs. Scoped to single product only.
 */
.single-product div.product .entry-summary,
.single-product div.product .summary,
.single-product .woocommerce-product-details__short-description {
  color: var(--theme-text-color, #1a1a1a) !important;
}

/* ── Add-to-cart button ───────────────────────────────────────────────── */
.single-product .single_add_to_cart_button {
  border-radius: 7px !important;
}

/* Quantity input */
.single-product div.quantity[data-type] input[type="number"] {
  -moz-appearance: textfield !important;
  border-radius: 7px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

/* ══ Native variation swatches (Blocksy) — polished package selector ══════
 * Markup: table.variations > th.label (the "Pakiranje: X" label) + td.value
 * which holds .ct-variation-swatches > button.ct-swatch-container. Blocksy
 * paints the visible pill on the inner .ct-swatch; the selected button carries
 * aria-pressed="true". We only restyle — no markup is added.
 */

/* Stack the attribute label above its swatches, full width. */
.single-product .variations,
.single-product .variations tbody,
.single-product .variations tr {
  display: block !important;
  width: 100% !important;
}
.single-product .variations th.label,
.single-product .variations td.value {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  text-align: left !important;
}
.single-product .variations th.label {
  margin: 0 0 10px !important;
}
.single-product .variations th.label label {
  font-family: "Santral", sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -0.2px !important;
  color: #2d202b !important;
  margin: 0 !important;
}
/* the "…: 60 kapsula" current-selection part of the label */
.single-product .variations th.label label span {
  font-weight: 500 !important;
  color: #8a8088 !important;
}

/* The swatch row. */
.single-product .ct-variation-swatches {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-items: center !important;
}

/* Each pill (Blocksy renders the visible box on .ct-swatch). */
.single-product .ct-variation-swatches .ct-swatch {
  box-sizing: border-box !important;
  min-width: 84px !important;
  padding: 11px 18px !important;
  background: #fff !important;
  border: 2px solid #ddd5db !important;
  border-radius: 999px !important;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease !important;
}
.single-product .ct-variation-swatches .ct-swatch-content {
  font-family: "Santral", sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -0.2px !important;
  color: #1a1a1a !important;
  line-height: 1.2 !important;
}

/* Hover — brand plum outline + faint tint. */
.single-product .ct-variation-swatches .ct-swatch-container:hover .ct-swatch {
  border-color: #4b3447 !important;
  background: #faf6f9 !important;
}

/* Selected — filled with the brand plum (matches the add-to-cart button). */
.single-product .ct-variation-swatches .ct-swatch-container[aria-pressed="true"] .ct-swatch {
  background: #4b3447 !important;
  border-color: #4b3447 !important;
}
.single-product .ct-variation-swatches .ct-swatch-container[aria-pressed="true"] .ct-swatch-content {
  color: #fff !important;
}

/* "Obriši" (clear selection) — subtle text link. */
.single-product .variations .reset_variations {
  display: inline-block !important;
  margin-top: 8px !important;
  font-family: "Santral", sans-serif !important;
  font-size: 13px !important;
  color: #8a8088 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}
.single-product .variations .reset_variations:hover {
  color: #4b3447 !important;
}

/* Selected-variation price: mute the struck regular, keep the sale price clean. */
.single-product .single_variation .price del,
.single-product .single_variation .price del .woocommerce-Price-amount {
  color: #1a1a1a !important;
  font-weight: 700 !important;
}
.single-product .single_variation .price ins {
  text-decoration: none !important;
}

/* ── Simple/bundle product price (above the add-to-cart) ──────────────────
 * Blocksy's single layout shows the price only via the variations form, so
 * simple products render it through the Lowest_Price module instead. */
.mh-simple-price {
  margin: 0 0 6px !important;
  font-family: "Santral", sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: #2d202b !important;
}
.mh-simple-price .mh-price__regular,
.mh-simple-price del,
.mh-simple-price del .woocommerce-Price-amount {
  color: #8a8088 !important;
  font-weight: 500 !important;
  margin-right: 6px !important;
}
.mh-simple-price .mh-price__sale,
.mh-simple-price ins {
  text-decoration: none !important;
}

/* ── 30-day lowest price (below the add-to-cart button) ────────────────── */
.mh-lowest-price {
  display: block !important;
  width: 100% !important;
  clear: both !important;
  margin-top: 12px !important;
  margin-bottom: 20px !important;
  text-align: left !important;
  font-family: "Santral", sans-serif !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  letter-spacing: -0.3px !important;
  color: #888 !important;
}
.mh-lowest-price__label {
  font-weight: 400 !important;
}
.mh-lowest-price__value,
.mh-lowest-price__value .woocommerce-Price-amount {
  font-weight: 600 !important;
  color: #555 !important;
}

/* ── Stock + dispatch estimate (below the add-to-cart button) ─────────── */
.mh-availability {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
  margin-top: 30px !important;
}
.mh-availability__dot {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  width: 12px;
  height: 12px;
  margin-top: 4px;
}
.mh-availability__ping {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #2e9e4f;
  animation: mh-ping 1.2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.mh-availability__core {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #2e9e4f;
}
.mh-availability__dot--red .mh-availability__ping {
  display: none;
}
.mh-availability__dot--red .mh-availability__core {
  background: #d33333;
}
.mh-availability__text {
  margin: 0 !important;
  font-family: "Santral", sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.4px !important;
  color: var(--e-global-color-240d707, #333333) !important;
}
@keyframes mh-ping {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  75%,
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mh-availability__ping {
    animation: none;
    display: none;
  }
}

/* ── Mobitel ──────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .single-product .ct-variation-swatches {
    gap: 8px !important;
  }
  .single-product .ct-variation-swatches .ct-swatch {
    min-width: 72px !important;
    padding: 10px 14px !important;
  }
}

/*
 * Product tabs (accordion): wide centered padding on desktop, tightened for
 * tablet and mobile so the content is not squeezed. Descendant selector so it
 * matches whether Blocksy nests the tabs in .product-entry-wrapper or not.
 */
.product .woocommerce-tabs {
  padding-top: 60px;
  clear: both;
  padding: 80px 22% 20px !important;
}
@media (max-width: 1024px) {
  .product .woocommerce-tabs {
    padding: 64px 8% !important;
  }
}
@media (max-width: 767px) {
  .product .woocommerce-tabs {
    padding: 40px 20px !important;
  }
}