/* ==========================================================================
   Similius product page — Urenus look & feel
   Target:  https://us.similius.com/product/nux-vomica/
   Model:   https://urenus.com/products/nux-vomica
   Paste into Appearance → Customize → Additional CSS.

   Every rule is scoped to .single-product so nothing leaks to other pages.

   Design tokens read off urenus.com:
     navy            #313652   (variant selected, Buy Now, headings accent)
     text            #42434D
     add-to-cart bg  #E0E0E0   with navy text and a 1px navy ring @20%
     ring            rgba(49, 54, 82, .2)
     radius          4px
     button padding  12px 20px      (height ~43px)
     pill padding    8px 16px       (height ~35px)
     font            DM Sans (already the site body font)
   ========================================================================== */

:root {
  --sim-navy: #313652;
  --sim-text: #42434D;
  --sim-grey-btn: #E0E0E0;
  --sim-ring: rgba(49, 54, 82, .2);
  --sim-radius: 4px;
}


/* --- 1. Summary column: base type ------------------------------------- */

.single-product .summary.entry-summary {
  color: var(--sim-text);
}


/* --- 2. Product title -------------------------------------------------- */
/* Urenus: 48px / 1.2 / 700. clamp() keeps it sane on laptops and phones. */

.single-product .summary .product_title {
  font-size: clamp(32px, 3.2vw, 48px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--sim-text);
  margin-bottom: 8px;
}


/* --- 3. Price ---------------------------------------------------------- */
/* Urenus labels the price with a small "Price" caption above the amount.
   Similius has no such label, so it is drawn with ::before. */

.single-product .summary > p.price {
  font-size: 20px;
  font-weight: 700;
  color: var(--sim-text);
  margin-bottom: 26px;
}

.single-product .summary > p.price::before {
  content: "Price";
  display: block;
  font-size: 16px;
  font-weight: 400;
  color: var(--sim-text);
  margin-bottom: 2px;
}

/* Price shown after a variation is chosen */
.single-product .woocommerce-variation-price .price {
  font-size: 20px;
  font-weight: 700;
  color: var(--sim-text);
}


/* --- 4. Variation labels ("Potency", "Size") --------------------------- */
/* Urenus: 16px / 700, 10px below the label. */

.single-product table.variations th.label,
.single-product table.variations th.label label {
  font-size: 16px;
  font-weight: 700;
  color: var(--sim-text);
  margin: 0;
}

.single-product table.variations tr {
  margin-bottom: 22px;
}


/* --- 5. Variation pills ------------------------------------------------ */
/* Similius ships a 3-column CSS grid of full-width buttons with 14px radius.
   Urenus uses auto-width pills that wrap — so the grid has to go. */

/* The swatch plugin injects <style id="rvb-style-inline-css"> containing
   `.rvb-options { display: grid !important; grid-template-columns:
   repeat(var(--rvb-desk), minmax(0,1fr)); width: 100% }` — hence !important
   here, and on the button width below. Without it the pills stay stretched. */
.single-product .rvb-options {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
  grid-template-columns: none;
  margin: 10px 0 0;
}

.single-product .rvb-options .rvb-option {
  /* the plugin stretches these to fill its grid; !important is needed because
     its own width rule outranks a plain override */
  width: auto !important;
  flex: 0 0 auto;
  min-width: 0;
  padding: 8px 16px;
  border: 0;
  border-radius: var(--sim-radius);
  background: #fff;
  color: var(--sim-text);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  min-height: 35px;
  box-shadow: inset 0 0 0 1px var(--sim-ring);
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.single-product .rvb-options .rvb-option:hover {
  box-shadow: inset 0 0 0 1px var(--sim-navy);
}

.single-product .rvb-options .rvb-option.is-selected {
  background: var(--sim-navy);
  color: #fff;
  box-shadow: none;
}

/* "Clear" link under the pickers */
.single-product .reset_variations {
  font-size: 14px;
  color: var(--sim-text);
  opacity: .7;
  text-decoration: underline;
}


/* --- 6. Quantity + buttons -------------------------------------------- */
/* Similius lays these out in one horizontal row. Urenus stacks them:
   a labelled quantity box, then two full-width buttons. */

.single-product .ct-cart-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

/* "Quantity" caption — Similius only has a screen-reader label */
.single-product .ct-cart-actions::before {
  content: "Quantity";
  font-size: 16px;
  font-weight: 400;
  color: var(--sim-text);
  margin-bottom: -2px;
}

.single-product .ct-cart-actions .quantity {
  width: 120px;
  height: 45px;          /* was 55px — the ± buttons centre against this box */
  flex: 0 0 auto;
}

/* The ± controls are absolutely positioned by the theme against the old 55px
   height, which left them off-centre and picking up a filled background. */
.single-product .ct-cart-actions .quantity .ct-increase,
.single-product .ct-cart-actions .quantity .ct-decrease {
  top: 0;
  bottom: 0;
  width: 34px;
  height: 100%;
  margin: 0;
  background: transparent !important;
  color: var(--sim-text);
  border: 0;
  border-radius: var(--sim-radius);
}

.single-product .ct-cart-actions .quantity .ct-decrease {
  left: 4px;
  right: auto;
}

.single-product .ct-cart-actions .quantity .ct-increase {
  right: 4px;
  left: auto;
}

.single-product .ct-cart-actions .quantity .ct-increase:hover,
.single-product .ct-cart-actions .quantity .ct-decrease:hover {
  background: rgba(49, 54, 82, .07) !important;
  color: var(--sim-navy);
}

.single-product .ct-cart-actions .quantity input.qty {
  width: 120px;
  height: 45px;
  border: 1px solid var(--sim-ring);
  border-radius: var(--sim-radius) !important;   /* theme sets 3px */
  font-size: 16px;
  font-weight: 400;
  color: var(--sim-text);
  text-align: center;
}

/* Add to cart — light grey with navy text and a hairline ring.
   :not(.wc-buy-now-btn) matters: the Buy Now button ALSO carries the
   single_add_to_cart_button class, so without it Buy Now turns grey too. */
.single-product .ct-cart-actions .single_add_to_cart_button:not(.wc-buy-now-btn),
.single-product .ct-cart-actions .single_add_to_cart_button.button.alt:not(.wc-buy-now-btn) {
  --theme-button-background-initial-color: var(--sim-grey-btn);
  --theme-button-background-hover-color: #d4d4d4;
  --theme-button-text-initial-color: var(--sim-navy);
  --theme-button-text-hover-color: var(--sim-navy);
  width: 100%;
  min-height: 43px;
  padding: 12px 20px;
  border-radius: var(--sim-radius);
  background: var(--sim-grey-btn);
  color: var(--sim-navy);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  box-shadow: inset 0 0 0 1px var(--sim-ring);
}

.single-product .ct-cart-actions .single_add_to_cart_button:not(.wc-buy-now-btn):hover {
  background: #d4d4d4;
  color: var(--sim-navy);
}

/* Buy Now — solid navy. Selector repeats .single_add_to_cart_button to outrank
   the grey rule above, which the button also matches. */
.single-product .ct-cart-actions .wc-buy-now-btn,
.single-product .ct-cart-actions .wc-buy-now-btn.single_add_to_cart_button {
  --theme-button-background-initial-color: var(--sim-navy);
  --theme-button-background-hover-color: #262a41;
  --theme-button-text-initial-color: var(--sim-grey-btn);
  --theme-button-text-hover-color: #fff;
  width: 100%;
  min-height: 43px;
  padding: 12px 20px;
  border-radius: var(--sim-radius);
  background: var(--sim-navy);
  color: var(--sim-grey-btn);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
}

.single-product .ct-cart-actions .wc-buy-now-btn:hover {
  background: #262a41;
  color: #fff;
}


/* --- 7. PayPal button -------------------------------------------------- */
/* Breathing room, and 420px caps PayPal's responsive height at 45px so it
   stops towering over the 43px buttons above it. */

.single-product .ppc-button-wrapper {
  max-width: 420px;
  margin-top: 16px;
  margin-bottom: 8px;
}


/* --- 8. Trust rows ("Extra Features") ---------------------------------- */
/* Urenus shows the three sales points with no section heading. */

.single-product .ct-product-additional-info .ct-module-title {
  display: none;
}

.single-product .ct-product-additional-info ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.single-product .ct-product-additional-info li {
  display: flex;
  align-items: center;
  gap: 12px;
}

.single-product .ct-product-additional-info .ct-label {
  font-size: 16px;
  font-weight: 400;
  color: var(--sim-text);
}

/* The trust list sat flush against the Description accordion. */
.single-product .ct-product-additional-info {
  margin-bottom: 30px;
}

.single-product .ct-product-additional-info .ct-icon-container svg {
  fill: var(--sim-navy);
  color: var(--sim-navy);
}


/* --- 9. Accordions (Description / Additional information / Reviews) ---- */
/* Similius renders these 12px uppercase; Urenus uses sentence case at 16px. */

.single-product .ct-accordion-heading {
  font-size: 16px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--sim-text);
  padding: 18px 0;
}


/* --- 10. Gallery ------------------------------------------------------- */
/* Urenus frames the main image and outlines the active thumbnail. Optional —
   delete this block if you prefer the current borderless gallery. */

/* Your gallery is the WCGS slider: #wpgs-gallery > .wcgs-carousel, with
   .wcgs-thumb items below. Swiper marks the active thumb with
   .spswiper-slide-thumb-active. */

.single-product .wcgs-carousel {
  border: 1px solid #e8e8ea;
  border-radius: var(--sim-radius);
}

/* The plugin already draws `border: 2px solid #0085BA` on the active thumb.
   Recolour that border — do NOT add an outline on top, which reads as a
   doubled frame. */
.single-product .wcgs-thumb.spswiper-slide-thumb-active img,
.single-product .wcgs-thumb.spswiper-slide-active img {
  border-color: var(--sim-navy) !important;
  outline: none !important;
}


/* --- 10b. Gallery arrows: always visible ------------------------------- */
/* The plugin ships them display:none / opacity:0 until hover. */

/* Scope to .wcgs-carousel — the MAIN image only. The thumbnail strip
   (.gallery-navigation-carousel) has its own 25x150 arrows; un-hiding those
   drops two full-width grey bars across the gallery. */

.single-product .wcgs-carousel > .wcgs-spswiper-button-next,
.single-product .wcgs-carousel > .wcgs-spswiper-button-prev {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .45);
  z-index: 5;
}

.single-product .wcgs-carousel > .wcgs-spswiper-button-next:hover,
.single-product .wcgs-carousel > .wcgs-spswiper-button-prev:hover {
  background: rgba(0, 0, 0, .7);
}

/* Keep them off the image edges */
.single-product .wcgs-carousel > .wcgs-spswiper-button-prev { left: 12px; }
.single-product .wcgs-carousel > .wcgs-spswiper-button-next { right: 12px; }


/* --- 11. Mobile -------------------------------------------------------- */

@media (max-width: 767px) {
  .single-product .ppc-button-wrapper {
    max-width: none;
  }

  .single-product .rvb-options .rvb-option {
    font-size: 15px;
  }
}