/*
 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-family: "PP Editorial Old Ultralight Italic", serif !important;
  font-style: italic !important;
  font-weight: 100 !important;
  letter-spacing: 0.05em;
}

/* =========================================================
   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: 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;
}
/* =========================================
   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-mobile-hamburger{
  color:#fff;
  position:relative;
  z-index:999999;
}
.whb-sticked .pol-mobile-hamburger{
  color:#111;
}

/* =========================================
   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;
}

/* =========================================================
   GOODRAYS-STYLE 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: #f07a3f !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:#f27f54;
  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;
}