/*
 * Initial state for product entrance animation.
 * Hides the two main columns to prevent them from flashing on screen.
*/
#product-page .product-breadcrumbs,
#product-page .main-image-container,
#product-page .fav-discount-wrapper,
#product-page .main-product-image,
#product-page .custom-gallery-thumbnails .thumbnail-item,
#product-page .product-column-left,
#product-page .gallery-swatch-nav {
  visibility: hidden;
}

#product-page .discount-badge {
  padding: 8px 21px;
  border-radius: 10px !important;
}
#product-page .fav-discount-wrapper {
  justify-content: start;
  gap: 14px;
}
#product-page .fav-discount-wrapper:has(.discount-badge) {
  justify-content: end;
}

#product-page .discount-badge p {
  font-size: 18px;
}
/* --- Main Product Layout --- */
.product-row-1 {
  display: flex;
  flex-wrap: wrap;
  column-gap: 96px; /* Increased gap for a more spacious layout */
  row-gap: 21px; /* Increased gap for a more spacious layout */
  align-items: flex-start; /* Aligns columns to the top */
}
.product-column-left,
.product-column-right {
  flex: 1;
  position: relative;
  width: 50%;
  min-width: 320px;
  max-width: 100%;
}
/* --- Sticky Add to Cart Bar --- */

/* 1. Hide the bar by default */
.oab-sticky-add-to-cart-bar {
  display: none;
}
.product-breadcrumbs {
  display: none;
}
.mob-product-breadcrumbs {
  display: flex;
}
.woocommerce:where(body:not(.woocommerce-uses-block-theme))
  .woocommerce-breadcrumb {
  color: var(--color-text-h6);
}
@media (max-width: 729px) {
  .price {
    order: 1;
  }
  #oab-in-page-selector-trigger {
    order: 2;
  }
  #pgl-product-details {
    order: 3;
  }
  .pgl-swatches-container {
    justify-content: center;
    /* gap: 24px !important; */
  }
  .pgl-swatch-item.is-active .pgl-swatch-title {
    padding-top: 6px;
  }
  .pgl-swatch-item {
    /* min-width: 40%; */
    width: 90px;
    text-align: center;
  }
  .pgl-swatch-image {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 !important;
  }
  .product-column-left {
    background: var(--color-card-bg);
    border-radius: 47px;
    padding: 44px 32px;
    margin-top: 22px;
  }
  .woocommerce:where(body:not(.woocommerce-uses-block-theme))
    .woocommerce-breadcrumb {
    font-size: 1.1em;
  }
}
@media (min-width: 730px) {
  .mob-product-breadcrumbs {
    display: none;
  }
  .product-breadcrumbs {
    display: flex;
  }
}

@media (max-width: 1024px) {
  .product-row-1 {
    gap: 42px;
  }
  .swatch-link {
    min-width: 12vw;
    min-height: 12vw;
  }

  .product_title.entry-title {
    font-size: 26px;
  }
  .product-title-desc p {
    font-size: 17px;
  }
  .sticky-element img {
    height: 60vh !important; /* Or set a max-height */
    max-height: 420px !important;
  }
}
.standalone-single-button .plus-cart {
  display: none;
}
/* 2. On mobile, set up the sticky bar */
@media (max-width: 767px) {
  .oab-sticky-bar-content:has(.standalone-selector-wrapper.is-active) {
    padding: 8px;
  }
  .oab-sticky-bar-content:has(.standalone-selector-wrapper.is-active)
    .standalone-qty-minus {
    border-radius: 28px 9px 9px 28px;
  }
  .oab-sticky-bar-content:has(.standalone-selector-wrapper.is-active)
    .standalone-qty-btn {
    background-color: var(--color-border);
  }
  .oab-sticky-bar-content:has(.standalone-selector-wrapper.is-active)
    .standalone-qty-plus {
    border-radius: 9px 28px 28px 9px;
  }
  .oab-sticky-add-to-cart-bar .plus-cart {
    background-color: var(--color-accent);
    flex-shrink: 0;
    height: 48px;
    width: 48px;
    border-radius: 50%;
    color: var(--color-badge-accent-text);
    font-size: 17px;
    display: flex;
    align-items: center;
    opacity: 100 !important;
    pointer-events: all !important;
    z-index: 2 !important;
    justify-content: center;
    transition: all 0.3s ease-in-out;
  }

  .oab-sticky-add-to-cart-bar .standalone-single-button {
    background-color: transparent !important;
    font-size: 17px;
    color: var(--color-btn-secondary-border);
    padding: 0 !important;
  }
  .oab-sticky-add-to-cart-bar {
    display: flex;
    gap: 8px;
    position: fixed;
    bottom: 15px;
    left: 0;
    right: 0;
    z-index: 999;

    /* Animation setup: Start hidden below the screen */
    transform: translateY(120%);
    /* This cubic-bezier creates a nice "bounce" effect */
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }

  /* 3. The "visible" state, triggered by JavaScript */
  .oab-sticky-add-to-cart-bar.is-visible {
    transform: translateY(0);
  }
  .product-features-title {
    font-size: 24px !important;
    text-align: center !important;
  }
  /* 4. Styling for the bar content */
  .oab-sticky-bar-content {
    display: flex;
    align-items: center;
    justify-content: space-between;

    /* Center it with a max-width */
    width: fit-content;
    max-width: 90%;
    margin: 0 auto;

    /* Spacing */
    padding: 8px 18px 8px 8px; /* A bit more padding on the right */

    /* --- The Glass Effect --- */

    /* 1. Frosted Glass Background */
    /* Using 70% opacity white. Your 28% (..47) is too transparent for a white bg */

    background-color: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(5px);
    /* 2. The Blur */
    -webkit-backdrop-filter: blur(5px);

    /* 3. The Pill Shape */
    border-radius: 55px;

    border: 1px solid #6e8c6514;
    background-color: #bfb6ad70;
    backdrop-filter: blur(5px);
    box-shadow: inset 0 0 2000px rgba(255, 255, 255, 0.5);
  }
  .sms-notif-enable-label:hover,
  .sms-notif-enable-label:hover strong {
    background-color: transparent !important;
  }
  /* 5. Styling for the price and selector inside */
  .oab-sticky-bar-price {
    font-size: 16px;
    font-weight: bold;
    color: #000; /* Ensure text is readable */
  }

  .oab-sticky-bar-selector {
    /* Shrink the selector to fit */
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    transform: scale(1);
    transform-origin: right;
  }
}
/* Add this media query to target screens *up to* 480px wide.
  (You might want to use 479px or 481px depending on your breakpoints)
*/
@media (max-width: 480px) {
  .dropdown-label,
  .pfaq-question-text {
    font-size: 18px;
  }

  .product-column-left,
  .product-column-right {
    min-width: auto; /* Or min-width: 0; */

    /* You might also want them to stack instead of being side-by-side */
    width: 100%;
    flex-basis: 100%;
  }
}
.product-column-left {
  padding-top: 48px;
  display: flex;
  flex-direction: column;
  gap: 34px;
}
.product-breadcrumbs {
  margin-top: 160px;
  padding: 0 32px;

  margin-bottom: 24px;
  font-size: 17px;
}
.product-title-desc p {
  text-align: justify;
  font-size: 18px;
  color: var(--color-text-h4);
}
/* --- Custom Gallery (Right Column) --- */
.custom-gallery-wrapper {
  /* Set the maximum height relative to the viewport */
  /* Use flexbox to arrange the images vertically */
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: fit-content;
}

/* The container for the big main image */
.main-image-container {
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 21px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
  background-color: var(--color-product-card-bg);
  position: relative;
}
/* Position the badge wrapper at the top right */
.main-image-container .fav-discount-wrapper {
  top: 16px;
  right: 16px;
  z-index: 5;
}

/* The big main image itself */
.main-product-image {
  border-radius: 21px;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1; /* Enforces a square 1:1 ratio */
  object-fit: cover; /* Fills the square without distorting, cropping if necessary */
  /* TODO Remove later */
  mix-blend-mode: multiply;
}

.woocommerce img,
.woocommerce-page img {
  border-radius: 21px;
  height: 100% !important;
  max-height: 100%;
}
/* Container for the 2-column thumbnails */
.custom-gallery-thumbnails {
  display: flex;
  gap: 16px;
}

/* Each individual thumbnail column */
.thumbnail-item {
  aspect-ratio: 1 / 1;
  flex: 1; /* Makes each thumbnail take up equal space */
}

/* The images inside the thumbnail columns */
.thumbnail-item img {
  border-radius: 21px;
  width: 100%;
  height: 100%;
  display: block;
  aspect-ratio: 1 / 1; /* Also enforce a square ratio on thumbnails */
  object-fit: cover; /* Also cover for thumbnails */
}

/* nutritional Info */
/* --- Custom Nutrition Facts Section --- */
.product_dropdown-wrapper {
  border-radius: 16px;
  padding: 18px;
  background-color: var(--color-card-bg);
}

.product_dropdown-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
.product_dropdown-top .type-secondary {
  max-width: 92%;
}

.product_dropdown-button {
  background-color: transparent;
  border: none;

  cursor: pointer;
  color: #333; /* Set a default color */
}

.pfaq-section-content .product_dropdown-button {
  padding: 8px;
}
.button-icon-plus {
  width: 14px;
  height: 14px;
  position: relative;
}

.button-plus-vertical,
.button-plus-horizontal {
  background-color: var(--color-text-h4);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.button-plus-vertical {
  width: 2px;
  height: 100%;
}

.button-plus-horizontal {
  width: 100%;
  height: 2px;
}

.product_dropdown-bottom {
  overflow: hidden;
}

.product_dropdown-content-inner {
  padding-top: 16px;
  padding-bottom: 16px;
}

.text-weight-medium {
  font-weight: 500;
}

.product_dropdown-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.product_dropdown-label {
  color: var(--color-text-body);
}
/* --- Indent for Nutrition Subcategories --- */
.product_dropdown-content.is-indented {
  padding-right: 20px;
}
.product_dropdown-content.is-indented .product_dropdown-label {
  opacity: 0.7;
}
/* StoryTelling */
.scrollytelling-section {
  display: flex;
  gap: 3rem;
  margin-top: 5rem;
  margin-bottom: 5rem;
}
/*  to make text full width when image is missing */
.scrollytelling-section.no-image-layout .scrolling-column {
  width: 100%;
  flex: 0 0 100%;
  max-width: 100%;
}
/* The sticky column for the image */
.sticky-column {
  flex: 1;
  height: 100vh;
  width: 50%;
  position: relative;
}

/* The element that will be pinned */
.sticky-element {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 80vh; /* Give it a more specific height */
  display: flex;
  align-items: center;
  justify-content: center;

  /* NEW: Contain the image zoom */
  border-radius: 24px;
  overflow: hidden;
}

.sticky-element img {
  width: 100%;
  height: 100%; /* Fill the container */
  object-fit: cover !important;
  /* Radius is now on the parent .sticky-element */
}

/* The scrolling column for the text panels */
.scrolling-column {
  flex: 1;
  max-width: 50%;
  margin-top: 25vh; /* Pushes first panel down */
}

/* Each individual content block */
.content-panel {
  padding-bottom: 50vh; /* Creates scroll space */

  /* NEW ANIMATION (Initial State) */
  opacity: 0.3;
  transform: translateY(20px); /* Start 20px down */
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* The panel that is currently active/in view */
.content-panel.is-active {
  /* NEW ANIMATION (Active State) */
  opacity: 1;
  transform: translateY(0); /* Move to original position */
}
.product-column-left .price {
  flex-direction: row;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.product-column-left .price:has(del) {
  gap: 8px;
}
.product-column-left .price svg {
  height: 26px;
  width: 26px;
}
.product-column-left .price *,
.product-column-left .price,
.product-column-left .price ins,
.product-column-left .price ins *,
.product-column-left .price bdi,
.product-column-left .price bdi * {
  text-decoration: none !important;
  color: var(--color-text-body) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
}

.product-column-left .price del,
.product-column-left .price del * {
  display: inline-block !important;
  text-decoration: line-through !important;
  color: var(--color-text-h3) !important;
  font-size: 19px !important;
  margin-left: 2px !important;
}

@media (max-width: 368px) {
  .sticky-element img {
    height: auto !important;
    max-height: 420px;
    aspect-ratio: 1;
  }
}
/* --- MOBILE STYLES --- */
@media (max-width: 768px) {
  .scrollytelling-section {
    flex-direction: column;
    gap: 2rem;
  }

  .sticky-column {
    /* Un-stick the column */
    position: static;
    height: auto;
    width: auto;
    z-index: 10;
  }

  .sticky-element {
    /* Remove desktop positioning */
    position: static;
    transform: none;
    height: auto; /* Let image define height */
    width: 100%;
    /* Keep the radius and overflow */
  }

  #pgl-product-reviews {
    margin-bottom: 0;
  }
  .scrolling-column {
    z-index: 10;
    background: var(--color-card-border);
    border-radius: 24px;
    padding: 42px 36px;
    max-width: none !important;
    margin-top: 0; /* Remove desktop spacing */
  }

  .content-panel {
    padding-bottom: 3rem; /* Reduce padding on mobile */
  }
  .product-column-left .price svg {
    height: 21px;
    width: 21px;
  }
  .product-column-left .price *,
  .product-column-left .price,
  .product-column-left .price ins,
  .product-column-left .price ins *,
  .product-column-left .price bdi,
  .product-column-left .price bdi * {
    text-decoration: none !important;
    color: var(--color-text-body) !important;
    font-size: 19px !important;
    font-weight: 600 !important;
  }
}
/* End of StoryTelling Section */

/* 1. The Sticky Swatch Navigator Bar */
.gallery-swatch-nav {
  position: sticky;
  bottom: 20px;

  width: auto;
  height: auto;
  display: flex;
  justify-content: center;
  z-index: 9;
  /* This makes it only sticky within its parent, .product-column-right */
}

.swatch-nav-inner {
  display: flex;
  gap: 5px;
  padding: 8px;
  width: fit-content;
  backdrop-filter: blur(10px);
  background: #e9e5e16e;
  -webkit-backdrop-filter: blur(10px);
  border-radius: 12px;
}

.swatch-link {
  width: 70px;
  height: 70px;
  max-width: 70px;
  max-height: 70px;
  background-color: var(--color-border);
  aspect-ratio: 1 / 1;
  border-radius: 10px;
}

.swatch-link img {
  width: 100%;
  border-radius: 8px;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
  will-change: transform;
  transition: all 0.3s ease-in-out;
}
.swatch-link:hover img,
.swatch-link.is-active img {
  opacity: 1; /* Fully visible when active */
}

/* Give our gallery images a class for JS to target */
.custom-gallery-wrapper .gallery-image-item {
  margin-bottom: 20px; /* Add some space between images */
}
/* 1. Main Features Section Container */
.pgl-features {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 46px;
  background: var(--color-nutrition-bg);
  border-radius: 24px;
  border: 1px solid var(--color-nutrition-border);
  margin-top: 140px;
  margin-bottom: 64px;
  padding: 48px 20px;

  position: relative; /* This is the anchor for the ::before element */
  overflow: hidden; /* This hides the background circle and is crucial for the title mask */
  visibility: hidden; /* Hide the whole section before the animation runs */
}
#pgl-features {
  position: relative;
  overflow: hidden;
}

/* 3. The Header (Title) and Wrapper for the Badges */
/* These do not need z-index or position because the ::before is now z-index: 0 */
.product-features-header {
  text-align: center;
}

.product-features-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 21px;
  width: 70%;
}

/* 4. The Title Itself */
/* The overflow:hidden is the "mask" that makes the reveal animation work */
.product-features-title {
  overflow: hidden;
  font-size: 28px;
}

.product-features-title .reveal-text {
  display: block;
  font-weight: 600;
  color: var(--color-text-h3);
}
/* --- The rest of your badge styling is correct --- */

.feature-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 9px 9px 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-h2);
  /* background-color: #ffffff8c; */
  /* border: 1px solid #ffffff; */
  border-radius: 87px;
}

.feature-badge p {
  padding-bottom: 12px;
  padding-top: 8px;
  max-width: 80px;
  text-align: center;
  font-size: 13px;
}

.feature-icon {
  width: 90px;
  height: 90px !important;
  max-height: 90px !important;
  background-color: #fffffff2;
  /* background-color: #ece8dc; */
  border-radius: 50% !important;
  object-fit: contain;
}

/* WYSIWYG */
/**
 * Minimal & Elegant WYSIWYG Content Styles
 * for the Scrollytelling Section
 */

/* Target the div that wraps the content from your plugin's WYSIWYG editor. */
.content-panel div {
  color: var(--color-text-body);
  font-size: clamp(
    1rem,
    0.95rem + 0.2vw,
    1.125rem
  ); /* Scales from 16px to 18px */
  line-height: 1.7; /* Generous line height for readability */
}

/* === Headings === */
/* Assumes you will use H3, H4, etc., inside your content */
.content-panel h3,
.content-panel h4 {
  margin-top: 2em;
  margin-bottom: 0.5em;
  line-height: 1.3;
}

.content-panel h3 {
  color: var(--color-text-h3);
  font-size: clamp(
    1.25rem,
    1.1rem + 0.5vw,
    1.5rem
  ); /* Scales from 20px to 24px */
}

.content-panel h4 {
  color: var(--color-text-h4);
  font-size: clamp(
    1.1rem,
    1rem + 0.2vw,
    1.25rem
  ); /* Scales from 17.6px to 20px */
}

/* === Paragraphs === */
.content-panel p {
  margin-bottom: 1.25em;
}
.content-panel p:last-child {
  margin-bottom: 0;
}

/* === Lists (UL & OL) === */
.content-panel ul,
.content-panel ol {
  margin-bottom: 1.5em;
  padding-right: 1.5rem; /* Indentation for RTL */
}

.content-panel li {
  position: relative;
  padding-right: 1rem; /* Space between bullet and text */
  margin-bottom: 0.75em;
}

/* Custom, elegant bullets for Unordered Lists */
.content-panel ul > li::before {
  content: "■"; /* A simple, minimal square */
  position: absolute;
  top: 0.4em; /* Adjust vertical alignment */
  right: 0; /* Position for RTL */
  font-size: 0.5em; /* Make the bullet smaller than the text */
  color: var(--color-primary); /* Use your theme's sage green accent */
}

/* Style the numbers for Ordered Lists */
.content-panel ol {
  list-style: none;
  counter-reset: custom-counter;
}
.content-panel ol > li::before {
  counter-increment: custom-counter;
  content: counter(custom-counter) ".";
  position: absolute;
  right: 0;
  font-weight: 600;
  color: var(--color-text-muted);
}

/* === Links === */
.content-panel a {
  color: var(--color-text-link);
  text-decoration: none;
  font-weight: 600;
  background-image: linear-gradient(
    to right,
    var(--color-primary),
    var(--color-primary)
  );
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.3s ease;
}

.content-panel a:hover {
  background-size: 100% 2px;
}

/* === Blockquotes === */
.content-panel blockquote {
  margin: 2em 0;
  padding: 1em 1.5em;
  border-right: 3px solid var(--color-primary); /* Sage green border for RTL */
  background-color: var(
    --color-product-card-bg
  ); /* Use your subtle card background */
  border-radius: 8px;
  font-style: italic;
  color: var(--color-text-muted);
}
.content-panel blockquote p {
  margin-bottom: 0;
}

/* === Horizontal Rule === */
.content-panel hr {
  border: none;
  height: 1px;
  background-color: var(--color-border-subtle);
  margin: 2.5em 0;
}

/* FAQ */
.pfaq-accordion-section .pfaq-item {
  opacity: 0; /* Start invisible */
}
/* FAQ Section Title Animation Prep */
.pfaq-section-title {
  opacity: 1; /* Default visible state (JS will hide if animating) */
  /* Optional: Add overflow hidden if blur causes layout shifts */
  /* overflow: hidden; */
}

/* In your CSS file or Added via wp_add_inline_style */
.faq-title-word {
  display: inline-block;
  opacity: 0; /* Make absolutely sure this rule is present and applying */
  will-change: transform, opacity, filter;
}
/* Ensure spaces are treated correctly */
.faq-title-char:empty {
  /* Targets the spans with   */
  display: inline;
  opacity: 1; /* Spaces don't need to fade in */
}

/* Ensure the title is visible if JS fails */
.pfaq-section-title:not(.chars-split) {
  opacity: 1 !important;
}
.no-js .pfaq-section-title .faq-title-char {
  opacity: 1 !important; /* Show chars if JS is disabled */
  transform: none !important;
  filter: none !important;
}

/* Make sure FAQ items also start hidden via CSS */
.pfaq-accordion-section .pfaq-item {
  opacity: 0;
  will-change: transform, opacity;
}
.no-js .pfaq-accordion-section .pfaq-item {
  opacity: 1 !important;
  transform: none !important;
}
.pfaq-accordion-section {
  display: flex;
  flex-direction: row;
  row-gap: 8px;
  column-gap: 44px;
  margin: 16rem 0;
  justify-content: space-around;
  flex-wrap: wrap;
  align-items: start;
}
.pfaq-section-title {
  font-size: 1.8em;
  margin-bottom: 1.4em;
  color: var(--color-primary);
  text-align: center;
}

.pfaq-section-content {
  width: 700px;
  max-width: 100%;
}
.pfaq-answer-content p {
  margin-bottom: 10px;
}

.scrolling-column figure {
  width: 100% !important;
  margin: 32px auto;
  max-width: 100% !important;
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-items: center;
  justify-content: center;
}
.scrolling-column figure img {
  margin: 0 auto;
}
.scrolling-column img {
  justify-self: center;
}
.scrolling-column figcaption {
  text-align: center;
  margin-top: 5px;
}
/* Related Posts */
/* 1. Hides the title *before* the JS splits it.
   The JS will set this to opacity: 1 after it runs.
*/
.related-products {
  margin: 0px 0 150px 0;
}
.related-products-title {
  opacity: 0;
  color: var(--color-primary);
  font-size: 1.8em;
  margin-bottom: 1.4em;
  text-align: center;
}

/* 2. Hides the product cards *before* GSAP animates them.
   This is the initial state for the card animation.
*/
.related-products .products-grid > * {
  opacity: 0;
}

/* 3. Tablet (780px to 1280px): 3 columns */
@media (min-width: 780px) and (max-width: 1279px) {
  /* 4. IMPORTANT: Show the 3rd product again on tablet */
  .related-products .products-grid > *:nth-child(4) {
    display: none !important; /* or 'flex', 'grid' depending on layout */
  }
}
.pgl-similar-products {
  margin-top: 100px;
}

/* --- Related Blog Section --- */
/*
 * ===================================================
 * == Related Blog Stack CSS (Required for Animation)
 * ===================================================
 */
/* --- 1. Main Section Container --- */
.related-blog-section {
  border-radius: 38px;
  padding: 4rem 0 6rem 0;
  overflow: hidden; /* For the title mask */
  /* This is the dark background for the whole section */
  background-color: var(--color-top-nav-bg);
}

/* --- 2. Section Title --- */
.blog-section-title-mask {
  overflow: hidden;
  text-align: center;
}
.blog-section-title-mask h2 {
  color: var(--color-text-h4);
  color: #7a8a74;
  text-align: right;
  font-size: 2.5rem;
  /* GSAP animates this from yPercent: 100 */
}

/* --- 3. Pinning & Stacking Setup --- */
/* --- 3. Pinning & Stacking Setup --- */
.blog-stack-container.sticky-cards {
  width: 90%;
  max-width: 600px;
  margin: 0 auto;
}

.blog-card-stack-pinned-element {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* ===================================================
   * == THIS IS THE  Vertical Centering for the card container
   * == Make it a flex container to center its child (the actual card)
   * =================================================== */
  display: flex;
  align-items: center; /* Vertically center its content */
  justify-content: center; /* Horizontally center its content */
  height: 70vh; /* This should match the card's height */
}

/* --- 4. Card Base --- */
.blog-stack-card {
  position: absolute; /* Keep absolute for stacking */
  width: 100%; /* 100% of the 600px container */
  height: 70vh; /* Give it a solid height */
  max-height: 400px;
  /* ===================================================
   * == REMOVED: `top: 50%; left: 50%; transform: translate(-50%, -50%);`
   * == The parent (`.blog-card-stack-pinned-element`) now handles centering
   * == with flexbox, and GSAP's yPercent works relative to its current position.
   * =================================================== */

  border-radius: 21px;
  overflow: hidden;

  /* GSAP will now handle opacity and visibility */
  opacity: 0;
  visibility: hidden;
}

/* --- 5. Card Link & Overlay --- */
.blog-stack-card-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%; /* 100% of the 70vh */
  width: 100%;
  position: relative;
  z-index: 2;
  padding: 2rem;
  color: #ffffff;
  text-decoration: none;
  background: linear-gradient(
    0deg,
    var(--color-border-subtle) 0%,
    var(--color-footer-bg) 100%
  );
  color: var(--color-badge-accent);
  transition: background 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

/* --- 6. Card Background Image --- */
.blog-stack-card-inner img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1; /* Sits behind the .blog-stack-card-inner */
  transform: scale(1);
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

/* --- 7. Card Content --- */
.blog-stack-card-content {
  display: none; /* Hide the original in-card text */
  padding: 0;
  transform: translateY(120%);
  transition: transform 0.5s ease-in-out;
}

.blog-stack-card-content h3 {
  color: var(--color-text-h2);
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-stack-card-content p {
  color: var(--color-text-body);
  opacity: 0.8;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- 8. Card Hover Animation --- */
.blog-stack-card:hover .blog-stack-card-inner img {
  transform: scale(1.1);
}

.blog-stack-card:hover .blog-stack-card-content {
  transform: translateY(0);
}

/*
 * ===================================================
 * == Misc
 * ===================================================
 */

/* * ===================================================
 * == Placeholder Card Loader
 * ===================================================
 */
.blog-posts-loader {
  /* Mimic the card shape */
  position: absolute;
  width: 100%;
  height: 70vh;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 16px;
  background-color: var(--color-card-bg); /* Dark base */
  overflow: hidden; /* Important for the shimmer */
}

.blog-loader-shimmer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* The animated gradient */
  background: linear-gradient(
    0deg,
    var(--color-border-subtle) 0%,
    var(--color-footer-bg) 100%
  );
  background-size: 200% 100%;
  animation: blogShimmer 1.5s infinite linear;
}

@keyframes blogShimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/*
 * ===================================================
 * == 2-Column Sticky Blog Layout
 * ===================================================
 */

/* 1. Make the main section a container */
.related-blog-section {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

/* 2. The 2-Column Grid */
.blog-layout-grid {
  display: grid;
  grid-template-columns: 1fr; /* 1 column on mobile */
  gap: 2rem;
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

/* 3. The STICKY Card Stack Column (Left) */
.blog-stack-column {
  position: relative;
  /* This column will be pinned by GSAP */
}

/* 4. The SCROLLING Title Column (Right) */
.blog-title-column {
  position: relative;
  overflow: hidden;
  /* This column will scroll naturally */
}

/* 5. The Title Styling */
.blog-section-title-mask {
  text-align: right;
}

/*
 * ===================================================
 * == Desktop Layout (The Sticky Part)
 * ===================================================
 */

@media (min-width: 768px) {
  .blog-layout-grid {
    /* 6fr for cards (left), 4fr for text (right) */
    grid-template-columns: 4fr 6fr;
    gap: 4rem;
    align-items: start; /* Align items to the top */
  }

  .blog-stack-column {
    /* Set height to the VISIBLE pinned area */
    height: calc(100vh - 100px); /* Adjust 100px if your header is different */

    /* These lines vertically center the content of this column */
    display: flex;
    align-items: center; /* Vertically center its child (.blog-card-stack-pinned-element) */
    justify-content: center; /* Horizontally center its child */
  }

  .blog-card-stack-pinned-element {
    /* Set height to match the card height for simple centering, and for the loader */
    height: 70vh;
    border-radius: 12px;
  }
  /* =================================================== */

  .blog-title-column {
    /* This column SCROLLS. */
    position: relative;
  }

  .blog-section-title-mask {
    text-align: left; /* Or right, your preference */
  }
}
/*
 * ===================================================
 * Dynamic Content List (Right Column)
 * ===================================================
 */

.blog-dynamic-content {
  margin-top: 20vh;
}

.blog-dynamic-list-scroller {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0vh;
}

.blog-dynamic-list-item {
  min-height: 60vh;
  /* padding-bottom: 25vh; */

  opacity: 0.3;
  transition: opacity 0.4s ease;

  /* This centers the text vertically within its block */
  display: flex;
  flex-direction: column;
  justify-content: start;
}

.blog-dynamic-list-item.is-active {
  opacity: 1; /* Active item is fully visible */
}

.blog-dynamic-title {
  font-size: 1.75rem;
  line-height: 1.3;
  color: var(--color-text-body); /* White title */
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.blog-dynamic-desc {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-h2); /* Light grey text */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* On desktop, align text with the title */
@media (min-width: 768px) {
  .blog-dynamic-content {
    text-align: right;
  }
}

@media (max-width: 400px) {
  .pgl-features {
    padding: 48px 16px;
  }
  .blog-section-title-mask h2 {
    font-size: 1.6rem;
  }
  .related-products-title {
    font-size: 1.8rem;
    margin-bottom: 38px;
  }
  .pfaq-accordion-section {
    margin: 8rem 0;
  }
  .content-panel {
    padding-bottom: 0;
  }
}
/*
 * ===================================================
 * == NEW: Mobile Responsiveness (Overrides)
 * ===================================================
 */
@media (max-width: 767px) {
  .product-features-wrapper {
    width: 100%;
  }

  /* 1. Hide the dynamic text column's content */
  .blog-dynamic-content {
    display: none;
  }
  .pgl-similar-products {
    margin-top: 180px;
  }
  /* 2. Show the in-card content */
  .blog-stack-card-content {
    display: block;
    transform: translateY(0);
    padding: 0 1.6rem 1.8rem 1.6rem;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 5;
    transition: none;
    background: linear-gradient(180deg, transparent, #3e3e3e);
  }

  .blog-stack-card-content h3 {
    font-size: 1.25rem;
    color: white;
  }
  .blog-stack-card-content p {
    font-size: 0.9rem;
    -webkit-line-clamp: 2;
    color: #fff;
  }

  /* 3. Adjust card inner padding/layout */
  .blog-stack-card-inner {
    padding: 0;
    justify-content: flex-end;
  }

  /* 4. Disable hover effects on mobile */
  .blog-stack-card-inner img {
    transform: scale(1);
    transition: none;
  }

  .blog-stack-card-inner {
    transition: none;
  }

  .blog-stack-card:hover .blog-stack-card-inner img,
  .blog-stack-card:hover .blog-stack-card-inner {
    transform: scale(1);
  }

  /* 6. Adjust card stack layout */
  .blog-stack-container.sticky-cards {
    max-width: 100%;
    height: auto;
  }

  .blog-card-stack-pinned-element {
    height: 60vh;
    max-height: 400px;
  }

  /* Override placeholder for mobile */
  .blog-posts-loader {
    height: 60vh;
    max-height: 400px;
  }

  .blog-stack-card {
    height: 60vh;
    max-height: 400px;
  }
  .related-products-title {
    font-size: 2.3em;
    margin-bottom: 1.8em;
  }
  /* 7. Adjust title alignment */
  .blog-section-title-mask {
    text-align: right;
    margin-bottom: 14px;
  }
  .blog-section-title-mask h2 {
    font-size: 2.4rem;
    text-align: center;
  }
}

.blog-dynamic-link {
  color: #4f5a49 !important;
}
.blog-dynamic-link::before {
  background-image: linear-gradient(
    to left,
    hsl(98.8, 10.4%, 32%) 45%,
    hsl(98.8, 10.4%, 32%, 20.2%) 55%
  ) !important;
}

/* 1. Hide the plugin's "On Sale" / "In Stock" checkboxes */

.sms-notif-form .sms-notif-groups-label {
  display: none !important;
}

/* 2. Hide the form content (the phone field, etc.) by default.

   The plugin's own JS will show this by setting 'display: block'.

*/

.sms-notif-form .sms-notif-content {
  display: none;
}

/* 3. The full-screen overlay (hidden by default) */

.oab-pwsms-overlay {
  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(0, 0, 0, 0.6);

  backdrop-filter: blur(5px);

  z-index: 9998;

  opacity: 0;

  visibility: hidden;

  transition: opacity 0.3s;
}

.oab-pwsms-overlay.is-visible {
  opacity: 1;

  visibility: visible;
}

/* 4. This is the POPUP!

   We are re-styling the plugin's *existing* content div

   to look like a popup when our JS gives it the 'oab-is-popup' class.

*/

.sms-notif-content.oab-is-popup {
  position: fixed !important;

  top: 50% !important;

  left: 50% !important;

  transform: translate(-50%, -50%);

  background: #fff;

  padding: 30px;

  padding-top: 40px;

  border-radius: 12px;

  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);

  z-index: 9999;

  width: 90%;

  max-width: 400px;
}

/* 5. The close button (which we add with JS) */

.oab-pwsms-popup-close {
  position: absolute;

  top: 8px;

  right: 12px;

  font-size: 28px;

  font-weight: 300;

  color: #888;

  background: none;

  border: none;

  cursor: pointer;

  padding: 0;

  line-height: 1;
}

.sms-notif-submit {
  margin-top: 8px !important;

  width: 100% !important;

  border-radius: 12px !important;

  background: var(--color-text-h3) !important;
}

.sms-notif-result-p {
  margin-top: 17px;
}

.sms-notif-result img {
  display: none !important;
}

.sms-notif-mobile::placeholder {
  text-align: right !important;

  direction: rtl !important;
}

input.sms-notif-enable {
  display: none !important;
}

.sms-notif-enable-label strong {
  background: var(--color-btn-primary) !important;

  color: var(--color-btn-primary-text) !important;

  border-radius: 12px !important;

  padding: 12px 24px !important;

  font-size: 16px !important;

  font-weight: 600 !important;

  transition: all 0.3s ease-in-out !important;

  cursor: pointer !important;
}

.oab-sticky-add-to-cart-bar .sms-notif-enable-label strong {
  background: transparent !important;
  padding: 0 !important;
  display: inline-flex;
  width: 100%;
  color: var(--color-text-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding-left: 12px !important;
}

.sms-notif-enable-label:hover strong {
  background: var(--color-btn-primary-hover);
}

.sms-notif-result:not(:empty) {
  background: var(--color-accent-subtle) !important;

  border-radius: 12px !important;

  padding: 12px !important;

  width: 100% !important;

  display: block !important;

  color: var(--color-badge-accent) !important;

  text-align: center !important;
}

.product-column-left.modal-is-open {
  transform: none !important;
}


/* --- Standalone Quantity Selector (cleaned) --- */
.standalone-qty-selector {
  display: inline-flex;
  align-items: center;
  border-radius: 12px;
  overflow: hidden;
  gap: 6px;
  position: relative;
}
/* --- Wrapper for Both States --- */
.standalone-selector-wrapper {
  position: relative;
  min-width: 168px;
  display: inline-block;
  height: 48px; /* Set a fixed height */
}

/* --- The Single "Add to Cart" Button --- */
.standalone-single-button {
  background-color: var(--color-btn-primary);
  color: var(--color-btn-primary-text);
  border: none;
  border-radius: 12px;
  padding: 0 24px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  height: 100%;
  width: 168px;
  transition: background-color 0.2s ease-in-out;
  position: absolute;
  top: 0;
  right: 0;
  white-space: nowrap;
}
.standalone-single-button:hover {
  background-color: var(--color-btn-primary-hover);
  color: var(--color-btn-primary-text) !important;
}

/* --- Positioning the States --- */
/* By default, the quantity selector is hidden and shrunken */
.standalone-qty-selector {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none; /* Make it unclickable when hidden */
}

/* When the wrapper is active, show the quantity selector */
.standalone-selector-wrapper.is-active .standalone-qty-selector {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* By default, the single button is visible */
.standalone-single-button {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: auto;
}

/* When the wrapper is active, hide the single button */
.standalone-selector-wrapper.is-active .standalone-single-button {
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
}
.standalone-qty-add.standalone-qty-btn {
  padding: 12px 16px;
  width: fit-content;
  border-radius: 12px;
  font-size: 16px;
  background-color: var(--color-btn-primary);
  color: var(--color-btn-primary-text);
}
.standalone-qty-add.standalone-qty-btn:hover {
  background-color: var(--color-btn-primary-hover) !important;
}
/* Buttons */
.standalone-qty-btn {
  border: none;
  cursor: pointer;
  padding: 12px 16px;
  font-size: 20px;
  line-height: 1;
  transition: background-color 0.2s;
  z-index: 2;
  background: var(--color-card-bg);
  border-radius: 9px;
  height: 48px;
  width: 48px;
}
.standalone-qty-btn:hover:not(:disabled) {
  background-color: #f2f1ee;
}
.standalone-qty-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Viewport that clips the rolling digits */
.standalone-qty-count-wrapper {
  height: 48px; /* must match .count-digit height */
  position: relative;
  overflow: hidden;

  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
  height: 48px;
  width: 60px;
  border: 1px solid var(--color-card-border);
  background: transparent;
  border-radius: 9px;
}

/* Inner container (keeps digits inside) */
.standalone-qty-count-inner {
  position: relative; /* digits are absolutely positioned relative to this */
  width: 100%;
  height: 100%;
}

/* Each digit is absolutely positioned so transforms don't change layout */
.count-digit {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 48px; /* match wrapper */
  line-height: 48px; /* vertical centering */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  will-change: transform;
  pointer-events: none; /* avoid clicks on digits */
}

/* Loading state */
.standalone-selector-wrapper.loading {
  cursor: wait;
  opacity: 0.85;
  animation: pulse 1.3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.button-primary {
  background-color: var(--color-btn-primary) !important;
  color: var(--color-btn-primary-text) !important;
  transition: all 0.3s ease-in-out;
  padding: 12px !important;
  border-radius: 24px;
}
.button-primary:hover {
  background-color: var(--color-btn-primary-hover) !important;
}