/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/

/* =========================================================
   CUSTOM FONT: PP Editorial Old Ultralight Italic
   ========================================================= */
@font-face{
  font-family: "PP Editorial Old Ultralight Italic";
  src: url("/wp-content/uploads/2025/12/ppeditorialold-ultralightitalic.woff2") format("woff2");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

/* Use this class on the word you want italic */
.italic-word{
  font-style: italic !important;
  font-weight: 100 !important;
}
/* =========================================================
   Product hover Cart + Quick View icons white
   ========================================================= */
.wd-action-btn>a {
    color: #ffffff !important;
}
/* =========================================================
   HEADER: RIGHT COLUMN LEFT BORDER + COLORS
   ========================================================= */

/* Right side header column setup */
.whb-col-right{
  position: relative;
  padding-left: 20px;
  color: #fff; /* default (top) color */
}

/* 15–20px vertical border on the left */
.whb-col-right::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 20px; /* change to 15px if you want */
  background-color: currentColor; /* matches text/icon color */
  transition: background-color .3s ease, opacity .3s ease;
}

/* Sticky/scrolled state: match menu/cart icon color */
header.whb-header.header-scrolled .whb-col-right{
  color: var(--wd-header-el-color, #333);
}

/* Optional: nav padding */
.wd-header-nav{
  padding-inline: 25px;
}

/* =========================================================
   HEADER: TRANSPARENT TOP → BLUR WHITE ON SCROLL
   ========================================================= */

/* Smooth transition */
header.whb-header .whb-row.whb-general-header{
  transition: background-color .25s ease, box-shadow .25s ease;
}

/* Top of page = transparent */
header.whb-header .whb-row.whb-general-header{
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* After scroll = blurry transparent white */
header.whb-header.header-scrolled .whb-row.whb-general-header{
  background-color: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 6px 24px rgba(0,0,0,0.08);
}

/* =========================================================
   HEADER MILI: TOP (NOT SCROLLED) FORCE WHITE MENU + ICONS
   ========================================================= */

/* Top (not scrolled): navigation variables */
header.whb-header:not(.header-scrolled) .whb-color-dark .wd-nav-header,
header.whb-header:not(.header-scrolled) .whb-color-dark .wd-nav{
  --wd-navigation-color: #fff !important;
  --wd-navigation-color-hover: #fff !important;
  --wd-navigation-color-active: #fff !important;
}

/* Top (not scrolled): fallback force link text white */
header.whb-header:not(.header-scrolled) .wd-nav a,
header.whb-header:not(.header-scrolled) .wd-nav a .nav-link-text{
  color: #fff !important;
}

/* Top (not scrolled): header tools/icons */
header.whb-header:not(.header-scrolled) .wd-tools-element{
  --wd-header-el-color: #fff !important;
  --wd-header-el-color-hover: #fff !important;
  color: #fff !important;
}

header.whb-header:not(.header-scrolled) .wd-tools-element .wd-tools-icon,
header.whb-header:not(.header-scrolled) .wd-tools-element .wd-tools-icon:before,
header.whb-header:not(.header-scrolled) .wd-cart-number,
header.whb-header:not(.header-scrolled) .wd-cart-subtotal{
  color: #fff !important;
}

/* Top (not scrolled): svg icons */
header.whb-header:not(.header-scrolled) .wd-tools-element svg,
header.whb-header:not(.header-scrolled) .wd-tools-element svg *{
  fill: #fff !important;
  stroke: #fff !important;
}

/* =========================================
   Header for rest all pages Without Home
   ========================================= */

/* Header For All Pages ONLY – entire main menu */
header.whb-header.whb-header_786104
.wd-nav a.woodmart-nav-link .nav-link-text {
  color: #000000 !important;
}

/* Hover */
header.whb-header.whb-header_786104
.wd-nav a.woodmart-nav-link:hover .nav-link-text {
  color: #000000 !important;
}

/* Sticky / scrolled */
header.whb-header.whb-header_786104.header-scrolled
.wd-nav a.woodmart-nav-link .nav-link-text {
  color: #000000 !important;
}
/* Set right column color (icons + divider) */
header.whb-header.whb-header_786104
.whb-col-right {
  color: #000000;
}
/* Header For All Pages ONLY – My Account icon */
header.whb-header.whb-header_786104
.wd-header-my-account .wd-tools-icon {
  color: #000000 !important;
}
/* SVG / pseudo icon support */
header.whb-header.whb-header_786104
.wd-header-my-account .wd-tools-icon::before {
  color: #000000 !important;
}
/* Header For All Pages ONLY – Cart icon */
header.whb-header.whb-header_786104
.wd-header-cart .wd-tools-icon {
  color: #000000 !important;
}

/* Icon font / pseudo element */
header.whb-header.whb-header_786104
.wd-header-cart .wd-tools-icon::before {
  color: #000000 !important;
}
/* Header For All Pages ONLY – Cart subtotal text */
header.whb-header.whb-header_786104
.wd-cart-subtotal,
header.whb-header.whb-header_786104
.wd-cart-subtotal .woocommerce-Price-amount {
  color: #000000 !important;
}



/* =========================================
   MOBILE TOP: Bottom Border
   ========================================= */
@media (max-width: 767px){
  .whb-column.whb-col-mobile.whb-column_mobile1.whb-hidden-lg{
    position: relative;
  }

  .whb-column.whb-col-mobile.whb-column_mobile1.whb-hidden-lg::after{
    content: "";
    position: absolute;
    left: -20px;   /* tweak if needed */
    right: -20px;  /* tweak if needed */
    bottom: 0;
    height: 1px;
    background: #ffffff;
  }
}

/* =========================================
   Mobile Hamburger Menu POL HEADER HOME
   ========================================= */

.pol-mobile-hamburger{
  color:#fff;
  position:relative;
  z-index:999999;
}
.whb-sticked .pol-mobile-hamburger{
  color:#111;
}
/* =========================================
   Mobile Hamburger Menu Icon for POL HEADER
   ========================================= */
/* Mobile ONLY – hamburger icon color (default state) */
@media (max-width: 768px) {
  header.whb-header.whb-header_786104
  .pol-mobile-hamburger {
    color: #1E3B2C !important;
  }
}

/* Mobile ONLY – keep dark green on tap / hover */
@media (max-width: 768px) {
  header.whb-header.whb-header_786104
  .pol-mobile-hamburger:hover,
  header.whb-header.whb-header_786104
  .pol-mobile-hamburger:active {
    color: #1E3B2C !important;
  }
}

/* =========================================
   PRODUCT CARD: Image Padding, Title Font
   ========================================= */

/* Product Title */
.wd-product .wd-entities-title {
    font-family: "ABC Favorit - Medium Trial", sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
}

/* Remove padding from product wrapper */
.wd-product .product-wrapper{
  padding: 0 0 20px 0 !important;
}

/* Remove internal image padding if any */
.wd-product .product-image,
.wd-product .product-image-link,
.wd-product .product-element-top{
  padding: 0 !important;
  margin: 0 !important;
}

/* Ensure image fills container */
.wd-product .product-image img{
  display: block;
  width: 100%;
  height: auto;
}
/* Product Text Contents Padding TOP/BOTTOM */
.wd-products[class*="wd-stretch-cont"] .product-element-bottom {
    padding: 40px 40px !important; 
}


/* =========================================================
   Product Card Content Ordering
   ========================================================= */

/* Reorder product card elements (WoodMart) */
.wd-product .product-element-bottom {
  display: flex;
  flex-direction: column;
}

/* Title stays first */
.wd-product .wd-entities-title {
  order: 1;
}

/* Price in the middle */
.wd-product .price {
  order: 2;
}

/* Rating at the bottom */
.wd-product .wd-star-rating {
  order: 3;
}

/* =========================================================
   POL PILL TABS (Elementor Nested Tabs)
   Add class: pill-tabs
   ========================================================= */

/* ---------- Desktop / Global ---------- */
.pill-tabs.elementor-widget-n-tabs{
  position: relative;
  z-index: 20;

  /* Elementor variable overrides */
  --n-tabs-title-background-color: transparent !important;
  --n-tabs-title-background-color-active: transparent !important;
  --n-tabs-title-background-color-hover: transparent !important;

  --n-tabs-title-color: #111 !important;
  --n-tabs-title-color-active: #111 !important;
  --n-tabs-title-color-hover: #111 !important;

  --n-tabs-title-border-radius: 999px !important;

  /* Your sizes */
  --n-tabs-title-padding-block-start: 8px !important;
  --n-tabs-title-padding-block-end: 8px !important;
  --n-tabs-title-padding-inline-start: 20px !important;
  --n-tabs-title-padding-inline-end: 20px !important;
}

/* Pill wrapper */
.pill-tabs.elementor-widget-n-tabs .e-n-tabs > .e-n-tabs-heading{
  position: relative;
  z-index: 30;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;

  margin: 18px auto 28px !important;
  padding: 0 !important;

  border: 1px solid rgba(0,0,0,.65) !important;
  border-radius: 999px !important;
  background: #fff !important;
  gap: 0 !important;
}

/* Tab buttons */
.pill-tabs.elementor-widget-n-tabs .e-n-tabs > .e-n-tabs-heading > button.e-n-tab-title{
  position: relative !important;
  z-index: 35;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 999px !important;
  color: #111 !important;
  flex: 0 0 auto !important;

  /* prevent weird vertical alignment differences */
  margin: 0 !important;
  line-height: 1 !important;
}

/* Divider */
.pill-tabs.elementor-widget-n-tabs .e-n-tabs > .e-n-tabs-heading > button.e-n-tab-title:not(:last-child)::after{
  content: "" !important;
  position: absolute !important;
  right: -1px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 1px !important;
  height: 14px !important;
  background: rgba(0,0,0,.55) !important;
}

/* Active tab */
.pill-tabs.elementor-widget-n-tabs .e-n-tabs > .e-n-tabs-heading > button.e-n-tab-title[aria-selected="true"]{
  background: transparent !important;
  color: #111 !important;
  padding-left: 49px !important;
  z-index: 40;
}

/* Orange dot (ACTIVE ONLY) */
.pill-tabs.elementor-widget-n-tabs .e-n-tabs > .e-n-tabs-heading > button.e-n-tab-title[aria-selected="true"]::before{
  content: "" !important;
  position: absolute !important;
  left: 23px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 999px !important;
  background: #1e3b2c !important;
  z-index: 50;
}

/* Content spacing fix */
.pill-tabs.elementor-widget-n-tabs .e-n-tabs-content{
  margin-top: 0 !important;
  position: relative;
  z-index: 1;
}

/* ---------- Mobile ONLY fixes ---------- */
@media (max-width: 767px){

  /* Elementor mobile mode adds vertical gap between buttons (this is the 14px) */
  .pill-tabs.elementor-widget-n-tabs{
    --n-tabs-title-gap: 0px !important;
  }

  /* Keep pill clean on mobile */
  .pill-tabs.elementor-widget-n-tabs .e-n-tabs > .e-n-tabs-heading{
    max-width: calc(100% - 32px) !important;
    width: fit-content !important;
    white-space: nowrap !important;

    margin: 10px auto 16px !important;
    padding: 0 !important;

    flex-direction: row !important;
  }

  /* IMPORTANT: kill Elementor's mobile margin on the 2nd+ tab */
  .pill-tabs.elementor-widget-n-tabs .e-n-tabs-mobile .e-n-tabs-heading > .e-n-tab-title{
    margin: 0 !important;
    margin-block: 0 !important;
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
  }
  .pill-tabs.elementor-widget-n-tabs .e-n-tabs-mobile .e-n-tab-title:not(:first-child){
    margin-block-start: 0 !important; /* the exact rule causing 14px */
  }

  /* Slightly smaller mobile sizing */
  .pill-tabs.elementor-widget-n-tabs .e-n-tabs > .e-n-tabs-heading > button.e-n-tab-title{
    font-size: 13px !important;
    padding: 6px 16px !important;
    line-height: 1 !important;
  }

  /* Active spacing for dot */
  .pill-tabs.elementor-widget-n-tabs .e-n-tabs > .e-n-tabs-heading > button.e-n-tab-title[aria-selected="true"]{
    padding-left: 36px !important;
  }

  /* Smaller dot */
  .pill-tabs.elementor-widget-n-tabs .e-n-tabs > .e-n-tabs-heading > button.e-n-tab-title[aria-selected="true"]::before{
    left: 14px !important;
    width: 10px !important;
    height: 10px !important;
  }

  /* Slightly shorter divider */
  .pill-tabs.elementor-widget-n-tabs .e-n-tabs > .e-n-tabs-heading > button.e-n-tab-title:not(:last-child)::after{
    height: 12px !important;
  }
}

/* ================================
   Mobile Peek Slider (75% slide / 25% peek)
   Add class: mobile-peek-slider (on the parent container)
   ================================ */

@media (max-width: 767px){

  /* Track (works whether slides are direct children OR inside .e-con-inner) */
  .mobile-peek-slider,
  .mobile-peek-slider > .e-con-inner{
    display: flex !important;
    flex-wrap: nowrap !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;

    gap: 16px !important;

    /* This creates the nice left/right breathing room like Goodrays */
    padding: 0 16px 12px !important;

    /* Ensures snap respects the side padding */
    scroll-padding-inline: 16px !important;

    scrollbar-width: none !important; /* Firefox */
  }

  /* Hide scrollbar */
  .mobile-peek-slider::-webkit-scrollbar,
  .mobile-peek-slider > .e-con-inner::-webkit-scrollbar{
    height: 0 !important;
    display: none !important;
  }

  /* Slides (75% width) */
  .mobile-peek-slider > .e-con,
  .mobile-peek-slider > .e-con-inner > .e-con{
    flex: 0 0 75% !important;
    max-width: 75% !important;
    min-width: 75% !important;

    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;

    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* Prevent Elementor inner wrapper from adding weird sizing */
  .mobile-peek-slider > .e-con-inner{
    margin: 0 !important;
    width: auto !important;
    max-width: none !important;
  }
}

/* ================================
   CARD SLIDER
   ================================ */
:root{
  --ingredient-reveal: 30px; /* adjust */
}

/* card */
.ingredient-card{
  position: relative;
  overflow: hidden;
}

/* image stays normal height */
.ingredient-card .ingredient-media img{
  width: 100%;
  height: auto;
  display: block;
}

/* hide extra by default */
.ingredient-card .ingredient-extra{
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .45s cubic-bezier(.22,1,.36,1), opacity .25s ease;
}

/* panel starts LOWER (so image stays visible) */
.ingredient-card .ingredient-panel{
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(-1 * var(--ingredient-reveal)); /* push panel DOWN */
  z-index: 2;
  background: #fff;
  transition: transform .45s cubic-bezier(.22,1,.36,1);
  will-change: transform;
}

/* hover: pull panel UP to reveal the extra */
.ingredient-card:hover .ingredient-panel{
  transform: translateY(calc(-1 * var(--ingredient-reveal)));
}

.ingredient-card:hover .ingredient-extra{
  max-height: 500px;
  opacity: 1;
}

/* ==============================================
   POL SUBSCRIPTION TOGGLE + CTA BUTTON HOME PAGE
================================================= */
.pol-sub-toggle{
  display:flex;
  flex-direction:column;
  gap:14px; /* space between toggle row and button */
  font-family:inherit;
}
/* toggle row alignment (centered like button) */
.pol-sub-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  text-align:center;
}
/* toggle switch size */
.pol-switch{
  position:relative;
  width:36px;
  height:16px;
  flex:0 0 auto;
}
/* hide native checkbox */
.pol-switch-input{
  opacity:0;
  width:0;
  height:0;
}
/* toggle background track */
.pol-switch-track{
  position:absolute;
  inset:0;
  background:#e1e1e1;
  border-radius:999px;
  transition:.25s;
}
/* toggle knob */
.pol-switch-track:before{
  content:"";
  position:absolute;
  width:12px;
  height:12px;
  left:2px;
  top:2px;
  background:#fff;
  border-radius:50%;
  box-shadow:0 1px 2px rgba(0,0,0,.12);
  transition:.25s;
}
/* toggle ON state */
.pol-switch-input:checked + .pol-switch-track{
  background:#111;
}
.pol-switch-input:checked + .pol-switch-track:before{
  transform:translateX(16px);
}
/* toggle labels text */
.pol-sub-label{
  font-size:16px;
  font-weight:500;
  color:#111;
  line-height:1;
}
/* label visibility logic */
.pol-label-on{ display:none; }
.pol-sub-toggle.is-on .pol-label-off{ display:none; }
.pol-sub-toggle.is-on .pol-label-on{ display:inline; }
/* main CTA button */
.pol-sub-btn{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 26px;
  border-radius:999px;
  background:#1e3b2c;
  color:#111;
  text-decoration:none;
  width:100%;
  box-sizing:border-box;
}
/* button text */
.pol-btn-text{
  font-size:16px;
  font-weight:600;
  line-height:1;
  padding: 0px 25px 3px 0px;
}
/* price wrapper */
.pol-btn-price{
  display:flex;
  align-items:baseline;
  gap:10px;
  white-space:nowrap;
}
/* current price */
.pol-price-new{
  font-size:16px;
  font-weight:700;
  line-height:1;
}
/* old price (strike) */
.pol-price-old{
  font-size:16px;
  font-weight:600;
  opacity:.35;
  text-decoration:line-through;
  display:none;
  line-height:1;
}
/* show old price on subscribe */
.pol-sub-toggle.is-on .pol-price-old{
  display:inline;
}





/* =========================================================
   PRODUCT OPTIONS — REFINED GOODRAYS STYLE
========================================================= */

/* Hide Woo default dropdowns */
.variations select,
.variations th.label {
  display: none !important;
}

/* Section containers */
.pol-flavours,
.pol-sizes {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

/* =========================================================
   FLAVOURS — EDGE-TO-EDGE IMAGE
========================================================= */

.pol-flavour {
  background: #ffffff;
  border-radius: 10px;
  padding: 0;
  border: 2px solid #e6e1da;
  cursor: pointer;
  transition: all .2s ease;
  overflow: hidden;
}

.pol-flavour.is-active {
  border: 2px solid #111;
  box-shadow: 0 8px 22px rgba(0,0,0,.12);
}

/* Image wrapper */
.pol-thumb {
  background: none;
  height: 96px;
  display: block;
}

/* Image styling */
.pol-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px 8px 0 0;
}

/* Label */
.pol-label {
  padding: 10px 8px 12px;
  font-size: 12px;
  line-height: 1.2;
  text-align: center;
  color: #111;
  font-weight: 400;
  text-transform: capitalize;
}

.pol-flavour.is-disabled{
  opacity:.4;
  pointer-events:none;
}
.pol-flavour{
  transition:.2s ease;
}

.pol-flavour:hover{
  transform:translateY(-2px);
}

/* =========================================================
   SIZE / PIECES
========================================================= */

.pol-size {
  min-height: 76px;
  background: #fff;
  border-radius: 10px;
  border: 2px solid #e6e1da;
  padding: 12px;
  cursor: pointer;
  transition: all .2s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pol-size.is-active {
  border: 2px solid #111;
  box-shadow: 0 8px 22px rgba(0,0,0,.12);
}

.pol-size.is-disabled {
  opacity: .35;
  pointer-events: none;
}

.pol-size-title {
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  color: #6c6c6c;
  line-height: 1.1;
  margin: 0;
}

.pol-unit {
  font-size: 13px;
  text-align: center;
  margin-top: 2px;
  line-height: 1.1;
  color: #555;
}

/* =========================================================
   BADGES
========================================================= */

.pol-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: #ff7a45;
  color: #fff;
  font-size: 11px;
  padding: 4px 12px;
  border-radius: 999px;
  font-weight: 500;
  letter-spacing: .2px;
  z-index: 5;
  white-space: nowrap;
}

/* =========================================================
   OPTION TITLES
========================================================= */

.pol-option-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  color: #111;
  text-transform: uppercase;
  margin-bottom: 6px;
  text-align: center;
}

/* =========================================================
   MOBILE — GRID LAYOUT (NO SCROLL)
========================================================= */

@media (max-width: 768px) {

  /* container wraps */
  .pol-flavours,
  .pol-sizes {
    flex-wrap: wrap;
    overflow: hidden;
    padding-top: 14px;
    padding-bottom: 14px;
  }

  /* flavour cards — 3 per row */
  .pol-flavour {
    margin-bottom: 12px;
  }

  /* image size */
  .pol-thumb {
    height: 90px;
  }

  /* label */
  .pol-label {
    font-size: 11px;
    padding: 8px 6px 10px;
  }

  /* size cards */
  .pol-size {
    min-height: 68px;
    padding: 10px;
    margin-bottom: 12px;
    overflow: visible;
  }

  .pol-size-title {
    font-size: 14px;
  }

  .pol-unit {
    font-size: 12px;
  }

  /* badge */
  .pol-badge {
    top: -9px;
    font-size: 10px;
    padding: 3px 10px;
  }
}
/* =========================================================
   MOBILE — TALLER PRODUCT IMAGES
========================================================= */

@media (max-width: 600px) {

  .pol-flavours .pol-thumb {
    height: 130px !important;
  }

  .pol-size.pol-has-image .pol-thumb {
    height: 130px !important;
  }
}

/* =========================================================
   HIDE FLAVOUR & SIZE WRAPPER FOR SIMPLE PRODUCTS
========================================================= */

/* Hide flavour & size wrapper for SIMPLE products */
.single-product.product-type-simple .pol-variation-wrap {
  display: none !important;
}


/* =========================================================
   VARIABLE PRODUCT — SINGLE PRICE MODE
========================================================= */
.pol-variable-price .price {
  text-align: center;
}


/* =========================================================
   DYNAMIC ATTRIBUTES (Potency, Strength, etc.)
========================================================= */

.pol-dynamic-attrs {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.pol-dynamic-attrs .pol-size {
  /* reuse size card style */
}
.pol-dynamic{
  padding:10px 14px;
  border:1px solid #ddd;
  border-radius:10px;
  cursor:pointer;
  display:inline-block;
  margin:6px;
}

.pol-dynamic.is-active{
  border-color:#000;
}

/* =========================================================
   DYNAMIC ATTRIBUTE IMAGES (Potency, Strength)
========================================================= */

.pol-size.pol-has-image .pol-thumb {
  height: 86px;
  margin-bottom: 0px;
}
.pol-size.pol-has-image .pol-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
}

/* =========================================================
   DYNAMIC ATTRIBUTE CARDS — MATCH FLAVOUR STYLE
   (Potency, Strength, etc.)
========================================================= */

/* Make dynamic cards same size as flavour */
.pol-size.pol-has-image {
  padding: 0;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
/* Active state same as flavour */
.pol-size.pol-has-image.is-active {
  border: 2px solid #111;
  box-shadow: 0 8px 22px rgba(0,0,0,.12);
}
/* Image wrapper — same as flavour */
.pol-size.pol-has-image .pol-thumb {
  height: 96px;
  background: none;
}
/* Image behavior — identical to flavour */
.pol-size.pol-has-image .pol-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px 8px 0 0;
}
/* Text label — same spacing & style */
.pol-size.pol-has-image .pol-size-title {
  padding: 10px 8px 2px;
  font-size: 12px;
  line-height: 1.2;
  text-align: center;
  font-weight: 500;
  text-transform: capitalize;
}
/* Price under label */
.pol-size.pol-has-image .pol-unit {
  font-size: 13px;
  text-align: center;
  margin-bottom: 10px;
  color: #555;
}

/* =========================================================
   MOBILE — SAME AS FLAVOUR
========================================================= */

@media (max-width: 768px) {

  .pol-size.pol-has-image {
    width: 107px;
    scroll-snap-align: start;
  }

  .pol-size.pol-has-image .pol-thumb {
    height: 86px;
  }

  .pol-size.pol-has-image .pol-size-title {
    font-size: 11px;
    padding: 8px 6px 2px;
  }

  .pol-size.pol-has-image .pol-unit {
    font-size: 12px;
  }
}


/* =========================================================
   FORCE GRID — DESKTOP 3 / MOBILE 2
========================================================= */

.pol-flavours,
.pol-sizes,
.pol-dynamic-attrs {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

/* remove fixed widths */
.pol-flavour,
.pol-size,
.pol-size.pol-has-image {
  width: 100% !important;
}

/* MOBILE ONLY */
@media (max-width: 600px) {

  .pol-flavours,
  .pol-sizes,
  .pol-dynamic-attrs {
    grid-template-columns: repeat(2, 1fr);
  }

}


/* =========================================================
   POL STYLE PRICE - SINGLE PRODUCT PAGE
========================================================= */

/* Reset default price spacing */
.single-product .price {
  margin: -10px 0 18px; /* moved up 10px */
}
/* Main price container */
.single-product .price,
.single-product .woocommerce-Price-amount {
  font-family: inherit;
}
/* Price pill wrapper — FULL WIDTH */
.single-product .price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  width: 100%;
  box-sizing: border-box;

  background: #fff;
  border: 2px solid #e6e1da;
  border-radius: 10px;

  padding: 18px 50px;
}
/* Price amount */
.single-product .price .woocommerce-Price-amount {
  font-size: 22px;
  font-weight: 600;
  color: #1e3b2c;
}
/* Price range dash spacing fix */
.single-product .price del,
.single-product .price ins {
  background: none;
  padding: 0;
}
/* Hide duplicated screen reader text */
.single-product .price .screen-reader-text {
  display: none;
}
/* Price box: 1px black border + 10px radius */
.single-product .wd-single-price p.price {
  border-radius: 10px !important;
}
/* Force price text to black */
.single-product .wd-single-price p.price,
.single-product .wd-single-price p.price .woocommerce-Price-amount,
.single-product .wd-single-price p.price span.amount,
.single-product .wd-single-price p.price bdi {
  color: #1e3b2c !important;
}
.single-product .wd-single-price p.price {
    margin-top: 6px;
}

/* Mobile refinement */
@media (max-width: 768px) {
  .single-product .price {
    padding: 16px 18px;
  }

  .single-product .price .woocommerce-Price-amount {
    font-size: 20px;
  }
}

/* =========================================================
   Lab Reports Display on Product page
========================================================= */
/* Remove bullet points from Lab Reports list */
.lab-reports-list {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}
/* Lab Reports link color */
.lab-reports-list a {
  color: #1E3B2C; 
  font-weight: 500;
  text-decoration: none;
}
/* Optional hover effect */
.lab-reports-list a:hover {
  color: #1e3b2c;
  text-decoration: underline;
}

/* ===============================
   BLOG CATEGORY BADGE (GOODRAYS STYLE)
================================ */

.elementor-post__thumbnail {
  position: relative;
  overflow: hidden;
}
/* Badge */
.pol-post-category-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  background: #1E3B2C; /* adjust to brand */
  color: #ffffff;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: capitalize;
  border-radius: 999px;
  z-index: 5;
  line-height: 1;
}
/* Optional hover effect */
.elementor-post:hover .pol-post-category-badge {
  transform: translateY(-2px);
  transition: all .25s ease;
}

/* ===============================
   REMOVE BORDER ON PRICE (CART SLIDER)
================================ /* 
/* Remove quantity pill styling inside Elementor mini cart only */
.elementor-menu-cart__product-price .quantity {
  border: none !important;
  background: transparent !important;
  height: auto !important;
  padding: 0 !important;
  border-radius: 0 !important;
}


/* =====================================================
   ELEMENTOR MENU CART — FINAL CLEAN DESIGN
===================================================== */

/* PRODUCT LIST */
.elementor-menu-cart__product.cart_item {
  padding: 14px 16px !important;
  margin-bottom: 14px;
  border-radius: 14px;
  background: #ffffff;                 /* clean card */
  box-shadow: 0 6px 16px rgba(0,0,0,0.06);
}

/* Remove default borders */
.elementor-menu-cart__product.cart_item {
  border: none !important;
}

/* Product image wrapper */
.elementor-menu-cart__product-image {
  padding-right: 12px;
}

/* Rounded product image */
.elementor-menu-cart__product-image img {
  border-radius: 14px !important;
  object-fit: cover;
}

/* Product name */
.elementor-menu-cart__product-name {
  line-height: 1.35;
  margin-bottom: 4px;
  font-weight: 500;
}

/* Price */
.elementor-menu-cart__product-price {
  margin-top: 4px;
  font-size: 14px;
  color: #1e3b2c;
  font-weight: 600;
}

/* Remove (X) button */
.elementor-menu-cart__product-remove {
  margin-left: 6px;
  opacity: 0.6;
}
.elementor-menu-cart__product-remove:hover {
  opacity: 1;
}

/* =====================================================
   SUBTOTAL
===================================================== */

.elementor-menu-cart__subtotal {
  margin-top: 18px;
  font-size: 16px;
  font-weight: 600;
}

/* =====================================================
   FOOTER BUTTONS — ORANGE PILLS
===================================================== */

.elementor-menu-cart__footer-buttons {
  gap: 14px;
  padding-top: 16px;
}

/* Base button style */
.elementor-menu-cart__footer-buttons .elementor-button {
  border-radius: 999px !important;
  padding: 14px 24px !important;
  font-weight: 600;
  transition: all 0.25s ease;
  border: 1px solid #f0f0f0 !important;
}

/* View Cart button */
.elementor-menu-cart__footer-buttons 
.elementor-button--view-cart {
  background-color: #1e3b2c !important;
  color: #ffffff !important;
}

/* Checkout button */
.elementor-menu-cart__footer-buttons 
.elementor-button--checkout {
  background-color: #1e3b2c !important;
  color: #ffffff !important;
}

/* Hover effect */
.elementor-menu-cart__footer-buttons .elementor-button:hover {
  transform: translateY(-1px);
  opacity: 0.9;
}

/* =====================================================
   MOBILE REFINEMENT
===================================================== */

@media (max-width: 767px) {
  .elementor-menu-cart__product.cart_item {
    padding: 12px;
    border-radius: 12px;
  }

  .elementor-menu-cart__footer-buttons .elementor-button {
    padding: 12px 20px !important;
  }
}

/* =====================================================
   CHECKOUT — RIGHT COLUMN BACKGROUND
===================================================== */

/* Right column wrapper */
.woocommerce-checkout
.checkout-order-review,
.woocommerce-checkout
#order_review {
  background-color: #F3EEE6 !important;
  padding: 30px !important;
  border-radius: 16px;
}

/* Checkout section titles — Goodrays style */
.woocommerce-checkout h3 {
  font-size: 22px;
  font-weight: 600;
  text-transform: capitalize !important;
}