/** Shopify CDN: Minification failed

Line 13894:2 Unexpected "}"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:404-template (INDEX:0) */
.gyanpradip-404 {
    /* Accent defaults to the active color scheme's link/primary colour.
       An "Accent color" setting can override --gp404-accent inline. */
    --gp404-accent: var(--color-primary);
    display: flex;
    align-items: center;
    min-height: 68vh;
  }

  .gyanpradip-404__inner {
    max-width: 62rem;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Big 404 figure — follows the color scheme's heading text colour,
     unless an Accent color is set (then --gp404-number wins). */
  .gyanpradip-404__figure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.4rem, 1.5vw, 1.2rem);
    line-height: 1;
    margin-bottom: clamp(1.2rem, 3vw, 2rem);
    color: var(--gp404-number, var(--color-foreground-heading));
  }

  .gyanpradip-404__digit {
    font-size: clamp(9rem, 26vw, 20rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    background: linear-gradient(160deg, currentColor 0%, rgb(from currentColor r g b / 55%) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .gyanpradip-404__zero {
    width: clamp(7rem, 22vw, 17rem);
    height: clamp(7rem, 22vw, 17rem);
    display: inline-flex;
    animation: gp404-float 4s ease-in-out infinite;
  }

  .gyanpradip-404__zero svg {
    width: 100%;
    height: 100%;
  }

  @keyframes gp404-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-0.8rem) rotate(4deg); }
  }

  @media (prefers-reduced-motion: reduce) {
    .gyanpradip-404__zero { animation: none; }
  }

  .gyanpradip-404__title {
    margin: 0 0 1rem;
  }

  .gyanpradip-404__text {
    max-width: 44rem;
    margin: 0 auto 2.4rem;
    color: rgb(from var(--color-foreground) r g b / 72%);
    font-size: 1.6rem;
  }

  /* Search */
  .gyanpradip-404__search {
    display: flex;
    align-items: center;
    width: min(48rem, 100%);
    margin: 0 auto 2.4rem;
    background: var(--color-background);
    border: 0.15rem solid rgb(from var(--gp404-accent) r g b / 25%);
    border-radius: 5rem;
    padding: 0.5rem 0.5rem 0.5rem 0.6rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }

  .gyanpradip-404__search:focus-within {
    border-color: var(--gp404-accent);
    box-shadow: 0 0.4rem 1.6rem rgb(from var(--gp404-accent) r g b / 14%);
  }

  .gyanpradip-404__search input[type="search"] {
    flex: 1;
    height: 4.4rem;
    border: 0;
    background: transparent;
    box-shadow: none;
    padding-inline: 1.4rem;
    font-size: 1.5rem;
  }

  .gyanpradip-404__search input[type="search"]:focus-visible {
    outline: none;
    box-shadow: none;
  }

  /* Search button uses the color scheme's primary button colours */
  .gyanpradip-404__search button {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
    height: 4.4rem;
    padding-inline: 2rem;
    border: 0;
    border-radius: 5rem;
    background: var(--color-primary-button-background);
    color: var(--color-primary-button-text);
    font-size: 1.4rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
  }

  .gyanpradip-404__search button:hover {
    background: var(--color-primary-button-hover-background);
    color: var(--color-primary-button-hover-text);
  }

  .gyanpradip-404__search button:active { transform: scale(0.97); }

  /* Actions */
  .gyanpradip-404__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    justify-content: center;
  }

  /* Quick links */
  .gyanpradip-404__links {
    margin-top: 3.2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem 1.6rem;
  }

  .gyanpradip-404__links-label {
    font-weight: 600;
    color: rgb(from var(--color-foreground) r g b / 60%);
    font-size: 1.4rem;
  }

  .gyanpradip-404__links ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .gyanpradip-404__links a {
    color: var(--gp404-accent);
    font-weight: 600;
    font-size: 1.4rem;
    text-underline-offset: 0.3rem;
  }

  .gyanpradip-404__links a:hover { text-decoration: underline; }

  @media (max-width: 749px) {
    .gyanpradip-404 { min-height: 60vh; }
    .gyanpradip-404__search button span { display: none; }
    .gyanpradip-404__search button { padding-inline: 1.4rem; }
  }
/* END_SECTION:404-template */

/* START_SECTION:announcement-bar (INDEX:2) */
/* ========================================================================
     Announcement Bar — self-contained styles.
     Embedded via {% stylesheet %}; Shopify bundles per-theme into one cached CSS.
     ======================================================================== */

  .announcement-bar {
    position: relative;
    color: var(--color-foreground);
    background-color: var(--color-background);
    font-size: 1.4rem;
    line-height: 1.2;
    z-index: 4;
    border-bottom: 0.1rem solid rgb(from var(--color-foreground) r g b / 8%);
  }

  /* The bar sits in its own stacking context (z-index: 4), which traps the
     language/currency dropdown below the header (.header_bottom z-index: 9,
     sticky header z-index: 98). While a switcher dropdown is open, lift the
     whole bar above the header so the open panel is visible. */
  .announcement-bar:has(.dropdown__open_label[aria-expanded="true"]) {
    z-index: 100;
  }

  .announcement-bar__inner {
    display: grid;
    grid-template-columns: 1fr;                 /* mobile: slider column only */
    align-items: center;
    min-height: 4rem;
    padding-block: 0.6rem;
    gap: 1.5rem;
  }

  @media (min-width: 750px) {
    .announcement-bar__inner {
      grid-template-columns: 1fr 2fr 1fr;       /* desktop: left / middle / right */
      gap: 2rem;
    }
  }

  /* Columns --------------------------------------------------------------- */

  .announcement-bar__col {
    display: flex;
    align-items: center;
    min-width: 0;
  }

  .announcement-bar__col--social,
  .announcement-bar__col--switchers {
    display: none;
  }

  @media (min-width: 750px) {
    .announcement-bar__col--social { justify-content: flex-start; display: flex; }
    .announcement-bar__col--switchers { justify-content: flex-end; display: flex; }
  }

  .announcement-bar__col--slider {
    justify-content: center;
    min-width: 0;
  }

  .announcement-bar__col--slider.announcement-bar__col--has-nav {
    position: relative;
    padding-inline: 3rem;                        /* leave room for arrows */
  }

  /* Slider & slides ------------------------------------------------------- */

  .announcement-bar__slider-root {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .announcement-bar__swiper {
    width: 100%;
    overflow: hidden;
  }

  .announcement-bar__slide {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding-inline: 1rem;
    white-space: normal;
  }

  .announcement-bar__slide--align-start  { justify-content: flex-start; }
  .announcement-bar__slide--align-center { justify-content: center; }
  .announcement-bar__slide--align-end    { justify-content: flex-end; }

  .announcement-bar__text {
    font-size: 1.4rem;
    font-weight: 500;
  }

  /* Highlight chip — merchant colors via per-slide CSS vars */
  .announcement-bar__highlight {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.8rem;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: 0.4rem;
    background-color: rgb(var(--ab-highlight-bg, 16, 185, 129));
    color: rgb(var(--ab-highlight-text, 255, 255, 255));
    line-height: 1;
  }

  /* Button — merchant color via per-slide CSS var */
  .announcement-bar__button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: rgb(var(--ab-button-color, 225, 29, 72));
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.15s ease;
  }

  a.announcement-bar__button:hover,
  a.announcement-bar__button:focus-visible { text-decoration: underline; }

  /* Nav arrows ------------------------------------------------------------ */

  .announcement-bar__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    color: currentColor;
    cursor: pointer;
    padding: 0.4rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.75;
    transition: opacity 0.15s ease;
  }

  .announcement-bar__nav:hover,
  .announcement-bar__nav:focus-visible { opacity: 1; }

  .announcement-bar__nav--prev { inset-inline-start: 0; }
  .announcement-bar__nav--next { inset-inline-end: 0; }

  .announcement-bar__nav > svg {
    width: 1.6rem;
    height: 1.6rem;
    display: block;
  }

  /* Prev/Next icons are already directional; flip horizontally under RTL. */
  html[dir="rtl"] .announcement-bar__nav > svg { transform: scaleX(-1); }

  /* Social icons ---------------------------------------------------------- */

  .announcement-bar__social {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    margin: 0;
    padding: 0;
  }

  .announcement-bar__social .list-social__link {
    color: currentColor;
    padding: 0.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .announcement-bar__social .list-social__link svg {
    width: 1.6rem;
    height: 1.6rem;
  }

  /* Switchers ------------------------------------------------------------- */

  .announcement-bar__switchers {
    display: flex;
    align-items: center;
  }

  .announcement-bar__switchers .localization__store {
    gap: 1.5rem;
    flex-wrap: nowrap;
  }

  .announcement-bar__switchers .dropdown__open_label {
    background: transparent;
    border: 0;
    color: currentColor;
    font-size: 1.3rem;
    font-weight: 500;
    padding: 0.4rem 0.6rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
  }

  .announcement-bar__switchers .dropdown__open_label svg {
    width: 1rem;
  }

  /* Country flag — global sizing for flags inside the announcement bar */
  .announcement-bar__switchers .country-flag {
    width: 2rem;
    height: 1.5rem;
    object-fit: cover;
    vertical-align: middle;
    margin-inline-end: 0.6rem;
    border-radius: 0.2rem;
    display: inline-block;
    flex-shrink: 0;
  }

  .announcement-bar__switchers .dropdown__list__item {
    display: flex;
    align-items: center;
  }

  .announcement-bar__switchers .dropdown__list__item .country-flag {
    margin-inline-end: 0.8rem;
  }

  /* Swiper override: ensure slides match wrapper height in a 1-line bar. */
  .announcement-bar__swiper .swiper-slide {
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }
/* END_SECTION:announcement-bar */

/* START_SECTION:bundle (INDEX:5) */
/* sections/bundle.liquid — combo/bundle offer promo section.
     Boxed header (badge + heading + optional "view all" link) above a grid
     of _bundle-card blocks, each merchant-added via "Add block". */

  .bundle {
    padding-block-start: var(--padding-block-start, 40px);
    padding-block-end: var(--padding-block-end, 40px);
  }
  @media (max-width: 749px) {
    .bundle {
      padding-block-start: calc(var(--padding-block-start, 40px) * var(--mobile-scale, 0.8));
      padding-block-end: calc(var(--padding-block-end, 40px) * var(--mobile-scale, 0.8));
    }
  }

  .bundle__box {
    box-sizing: border-box;
    width: 100%;
    padding: var(--box-padding, 32px);
    background-color: var(--box-bg, transparent);
    border: var(--box-border-width, 0) solid var(--box-border-color, transparent);
    border-radius: var(--box-radius, 0);
  }
  @media (max-width: 749px) {
    .bundle__box {
      padding: calc(var(--box-padding, 32px) * 0.6);
    }
  }

  .bundle__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.4rem;
    margin-block-end: 1.2rem;
    border-radius: 999rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--bundle-badge-color, #7a4a00);
    background-color: var(--bundle-badge-bg, #f8c94a);
  }

  .bundle__header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
    flex-wrap: wrap;
  }

  .bundle__heading {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
  }

  .bundle__view-all {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
    font-weight: 600;
    text-decoration: none;
    color: var(--color-link, var(--color-foreground));
  }
  .bundle__view-all:hover {
    text-decoration: underline;
    text-underline-offset: 0.2rem;
  }
  .bundle__view-all-icon {
    display: inline-flex;
    transform: rotate(-90deg);
  }
  .bundle__view-all-icon svg {
    width: 1.4rem;
    height: 1.4rem;
  }

  .bundle__grid {
    display: grid;
    grid-template-columns: repeat(var(--cols-desktop, 2), 1fr);
    gap: var(--gap, 24px);
    margin-block-start: var(--header-to-grid-gap, 32px);
  }
  @media (max-width: 749px) {
    .bundle__grid {
      grid-template-columns: repeat(var(--cols-mobile, 1), 1fr);
    }
  }
/* END_SECTION:bundle */

/* START_SECTION:category-list (INDEX:14) */
.category-list {
    padding-block-start: var(--padding-block-start, 60px);
    padding-block-end: var(--padding-block-end, 60px);
  }

  @media (max-width: 749px) {
    .category-list {
      padding-block-start: calc(var(--padding-block-start, 60px) * var(--padding-mobile-scale, 0.8));
      padding-block-end: calc(var(--padding-block-end, 60px) * var(--padding-mobile-scale, 0.8));
    }
  }

  .category-list__intro-band {
    width: 100%;
    box-sizing: border-box;
    margin-block-end: var(--category-list-heading-gap, 32px);
  }

  .category-list__top {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .category-list__heading-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }

  .category-list__heading-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--category-list-heading-icon-size, 24px);
    height: var(--category-list-heading-icon-size, 24px);
    overflow: hidden;
    color: var(--category-list-heading-icon-color, var(--color-foreground));
  }

  .category-list__heading-icon svg,
  .category-list__heading-icon img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    display: block;
    flex-shrink: 0;
  }

  .category-list__heading {
    margin: 0;
  }

  .category-list__subtitle {
    margin-block-start: 0.8rem;
  }

  /* ── Slider shell ── */
  .category-list__slider {
    position: relative;
    display: block;
  }

  /* Vertical padding gives the hover lift, shadow, ring and count badge room
     so overflow:hidden (needed to clip slides horizontally) doesn't cut the
     top/bottom of the tiles. */
  .category-list__slider .swiper {
    overflow: hidden;
    padding-block: var(--cl-slider-pad, 14px);
    margin-block: calc(-1 * var(--cl-slider-pad, 14px));
  }

  .category-list__slider .swiper-slide {
    height: auto;
    box-sizing: border-box;
  }

  /* Pre-init fallback: even row before Swiper fires (SLIDER_DEVELOPMENT_BLUEPRINT §3.8, Pattern A) */
  /* `overflow-x: auto` forces overflow-y to auto as well, so the ring/shadow/badge that
     sit outside the tile box get clipped until Swiper initialises. Repeat the .swiper
     padding/negative-margin trick here so the row is scrollable horizontally without
     cutting the tiles top/bottom during page load. */
  .category-list__slider .swiper:not(.swiper-initialized) .swiper-wrapper {
    display: flex;
    flex-wrap: nowrap;
    box-sizing: border-box;
    gap: var(--cl-gap-mobile, 12px);
    overflow-x: auto;
    scrollbar-width: none;
    padding-block: var(--cl-slider-pad, 14px);
    margin-block: calc(-1 * var(--cl-slider-pad, 14px));
  }
  .category-list__slider .swiper:not(.swiper-initialized) .swiper-wrapper::-webkit-scrollbar {
    display: none;
  }
  .category-list__slider .swiper:not(.swiper-initialized) .swiper-slide {
    flex-shrink: 0;
    width: var(--cl-fallback-w-mobile, calc((100% - 24px) / 3.5));
    box-sizing: border-box;
  }
  @media (min-width: 750px) {
    .category-list__slider .swiper:not(.swiper-initialized) .swiper-wrapper {
      gap: var(--cl-gap-desktop, 16px);
    }
    .category-list__slider .swiper:not(.swiper-initialized) .swiper-slide {
      width: var(--cl-fallback-w-desktop, calc((100% - 80px) / 6));
    }
  }

  /* ── Navigation buttons (standard swiper-nav contract) ── */
  .category-list .swiper-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s;
    border: 0;
    background: transparent;
    color: var(--color-foreground);
  }
  .category-list .swiper-nav svg { width: 18px; height: 18px; }
  .category-list .swiper-nav.swiper-button-prev::after,
  .category-list .swiper-nav.swiper-button-next::after { display: none; }
  .category-list .swiper-nav--bg-none { width: auto; height: auto; padding: 4px; }
  .category-list .swiper-nav--bg-circle { border-radius: 100%; }
  .category-list .swiper-nav--bg-square { border-radius: 6px; }
  .category-list .swiper-nav--bg-custom:not(.swiper-nav--bg-none) {
    border-radius: var(--category-list-slider-nav-radius, 0px);
  }
  .category-list .swiper-nav--solid:not(.swiper-nav--bg-none) {
    background: var(--color-primary-button-background);
    color: var(--color-primary-button-text);
    border-color: var(--color-primary-button-border);
  }
  .category-list .swiper-nav--solid:not(.swiper-nav--bg-none):hover {
    background: var(--color-primary-button-hover-background);
    color: var(--color-primary-button-hover-text);
    border-color: var(--color-primary-button-hover-border);
  }
  .category-list .swiper-nav--outline:not(.swiper-nav--bg-none) {
    background: var(--color-secondary-button-background);
    color: var(--color-secondary-button-text);
    border-width: var(--btn-border-width, 1px);
    border-style: solid;
    border-color: var(--color-secondary-button-border);
  }
  .category-list .swiper-nav--outline:not(.swiper-nav--bg-none):hover {
    background: var(--color-secondary-button-hover-background);
    color: var(--color-secondary-button-hover-text);
    border-color: var(--color-secondary-button-hover-border);
  }
  .category-list .swiper-nav[disabled],
  .category-list .swiper-nav.swiper-button-disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
  }

  /* Header nav (beside heading) */
  .category-list__nav--header {
    display: flex;
    gap: 0.8rem;
    flex-shrink: 0;
    align-items: center;
    margin-inline-start: auto;
  }
  .category-list__nav--header .swiper-nav {
    position: relative;
    inset: auto;
    transform: none;
    margin: 0;
  }

  /* Right-side controls beside the heading (See all + header nav) */
  .category-list__actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
    margin-inline-start: auto;
  }
  .category-list__actions .category-list__nav--header {
    margin-inline-start: 0;
  }

  /* "See all" link/button */
  .category-list__view-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    color: var(--color-foreground);
    transition: color 0.2s, background 0.2s, border-color 0.2s, opacity 0.2s;
  }
  .category-list__view-all-icon {
    display: inline-flex;
    align-items: center;
  }
  .category-list__view-all-icon svg {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
  }
  .category-list__view-all--link:hover {
    text-decoration: underline;
  }
  .category-list__view-all--outline,
  .category-list__view-all--solid {
    padding-block: 0.9rem;
    padding-inline: 1.8rem;
    border-radius: 6px;
    box-sizing: border-box;
  }
  .category-list__view-all--solid {
    background: var(--color-primary-button-background);
    color: var(--color-primary-button-text);
    border: var(--btn-border-width, 1px) solid var(--color-primary-button-border);
  }
  .category-list__view-all--solid:hover {
    background: var(--color-primary-button-hover-background);
    color: var(--color-primary-button-hover-text);
    border-color: var(--color-primary-button-hover-border);
  }
  .category-list__view-all--outline {
    background: var(--color-secondary-button-background);
    color: var(--color-secondary-button-text);
    border: var(--btn-border-width, 1px) solid var(--color-secondary-button-border);
  }
  .category-list__view-all--outline:hover {
    background: var(--color-secondary-button-hover-background);
    color: var(--color-secondary-button-hover-text);
    border-color: var(--color-secondary-button-hover-border);
  }

  /* Overlay nav — centred on the media row, sits at the slider edges.
     The media row starts below the slider's top padding (--cl-slider-pad), so the
     overlay is offset by the same amount to line the arrows up with the tile centre. */
  .category-list__nav--overlay {
    position: absolute;
    inset-block-start: var(--cl-slider-pad, 14px);
    height: var(--cl-circle-size, 140px);
    inset-inline: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
    z-index: 3;
    box-sizing: border-box;
  }
  .category-list__nav--overlay .swiper-nav {
    position: relative;
    inset: auto;
    transform: none;
    margin: 0;
    pointer-events: auto;
    box-shadow: 0 4px 14px rgb(from var(--color-foreground) r g b / 14%);
  }
  /* A disabled overlay arrow (at the first/last slide) overlaps the edge card. Keep it
     capturing clicks so the click can't fall through to the card link beneath it and
     navigate to that collection — it simply does nothing at the carousel boundary. */
  .category-list .category-list__nav--overlay .swiper-nav.swiper-button-disabled,
  .category-list .category-list__nav--overlay .swiper-nav[disabled] {
    pointer-events: auto;
    cursor: default;
  }
  .category-list__nav--overlay .swiper-button-prev {
    transform: translateX(-40%);
  }
  .category-list__nav--overlay .swiper-button-next {
    transform: translateX(40%);
  }

  /* Desktop: overlay arrows stay hidden until the slider is hovered (or
     keyboard-focused). This keeps them from covering / "cutting" the edge
     cards when idle. */
  @media (min-width: 750px) {
    .category-list__nav--overlay {
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.2s ease, visibility 0.2s ease;
    }
    .category-list__slider:hover .category-list__nav--overlay,
    .category-list__slider:focus-within .category-list__nav--overlay {
      opacity: 1;
      visibility: visible;
    }
  }

  /* Desktop: hide overlay when nav sits beside the heading */
  @media (min-width: 750px) {
    .category-list--nav-header .category-list__nav--overlay {
      display: none;
    }
  }

  /* Mobile: header nav hidden, arrows are swipe-only */
  @media (max-width: 749px) {
    .category-list__nav--header {
      display: none !important;
    }
    .category-list__nav--overlay {
      display: none;
    }
  }
/* END_SECTION:category-list */

/* START_SECTION:collection-list (INDEX:15) */
/* sections/collection-list.liquid
     Spec: blueprint/skill/HOMEPAGE_SECTIONS_PLAN.md §4
           blueprint/sections/COLLECTION_LIST_PAGE_WIDTH_AND_CAROUSEL_PLAN.md
           blueprint/sections/COLLECTION_LIST_MOBILE_SLIDER_NAV_OVERLAY_PLAN.md
           blueprint/sections/COLLECTION_LIST_NAV_AND_VIEW_ALL_POSITION_PLAN.md
           blueprint/sections/COLLECTION_LIST_VIEW_ALL_ICON_AND_SIZE_PLAN.md
           blueprint/sections/COLLECTION_LIST_CARD_TITLE_BUTTON_BACKDROP_BLUR_PLAN.md
           blueprint/sections/COLLECTION_LIST_HEADING_BAND_GUTTER_AND_GAP_PLAN.md
           blueprint/sections/COLLECTION_LIST_PAGE_WIDTH_SLIDER_INTRO_MAIN_PADDING_SYNC_PLAN.md
           blueprint/sections/COLLECTION_LIST_SWIPER_PREINIT_FALLBACK_PLAN.md
           blueprint/sections/COLLECTION_LIST_TITLE_ALIGNMENT_PLAN.md */

  .collection-list {
    padding-block-start: var(--padding-block-start, 60px);
    padding-block-end: var(--padding-block-end, 60px);
  }

  /* Intro band: horizontal gutter only (no .section-container — avoids global padding-block on heading strip).
     Gap to track/grid via --collection-list-heading-gap (default 55px). */
  .collection-list .collection-list__intro-band {
    width: 100%;
    box-sizing: border-box;
    /* Match snippets/section.liquid `.section-container` inline padding (incl. optional --padding-inline-*). */
    padding-inline-start: var(--padding-inline-start, var(--container-padding-inline, 15px));
    padding-inline-end: var(--padding-inline-end, var(--container-padding-inline, 15px));
    margin-block-end: var(--collection-list-heading-gap, 55px);
  }

  @media (max-width: 749px) {
    .collection-list .collection-list__intro-band {
      padding-inline-start: calc(var(--padding-inline-start, 15px) * var(--padding-mobile-scale, 1));
      padding-inline-end: calc(var(--padding-inline-end, 15px) * var(--padding-mobile-scale, 1));
    }
  }

  /* Main/foot use `.section-container` for gutter + width. If a global stylesheet ever applies padding-block to `.section-container` again, this keeps the section single-authority for block padding on `<section>`. */
  .collection-list .collection-list__main-band.section-container,
  .collection-list .collection-list__foot-band.section-container {
    padding-block-start: 0;
    padding-block-end: 0;
  }

  .collection-list .collection-list__head-band,
  .collection-list .collection-list__foot-band {
    width: 100%;
  }

  .collection-list__track-band {
    width: 100%;
    min-width: 0;
  }

  .collection-list__track-band--flush {
    padding-inline: 0;
    max-width: none;
  }

  /* Top row — grid layout only (inside intro band) */
  .collection-list__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-block-end: 24px;
  }

  .collection-list .collection-list__intro-band .collection-list__top {
    margin-block-end: 0;
  }

  .collection-list__top:not(:has(.collection-list__heading)) {
    justify-content: flex-end;
  }

  .collection-list__heading {
    margin: 0;
    flex: 1;
  }

  .collection-list__subtitle {
    margin: 0;
  }

  .collection-list .collection-list__intro-band > .collection-list__subtitle:first-child {
    margin-block-start: 0;
    margin-block-end: 0;
  }

  .collection-list .collection-list__intro-band .collection-list__shell-intro + .collection-list__subtitle,
  .collection-list .collection-list__intro-band .collection-list__top + .collection-list__subtitle {
    margin-block-start: 0.8rem;
    margin-block-end: 0;
  }

  /*
    Slider desktop: tier-header nav aligns with heading (CSS Grid / flex head-band).
    Slider mobile (<992px): tier-overlay centered on the swiper only; hover-driven show (fine pointer).
    See blueprint/sections/COLLECTION_LIST_MOBILE_SLIDER_NAV_OVERLAY_PLAN.md
  */

  /* Flush head-band: heading row behaves like legacy `.collection-list__top` */
  .collection-list__head-band .collection-list__shell-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-block-end: 0;
  }

  .collection-list__head-band .collection-list__shell-intro:not(:has(.collection-list__heading)) {
    justify-content: flex-end;
  }

  .collection-list__head-band.collection-list__intro-band .collection-list__subtitle {
    margin-block-start: 0.8rem;
    margin-block-end: 0;
  }

  /* Slider intro row — inside `.collection-list__intro-band` (not inside carousel shell) */
  .collection-list .collection-list__intro-band > .collection-list__shell-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .collection-list .collection-list__intro-band .collection-list__shell-intro:not(:has(.collection-list__heading)) {
    justify-content: flex-end;
  }

  .collection-list .collection-list__intro-band .collection-list__heading {
    margin-block: 0;
    margin-inline: 0;
    min-width: 0;
    flex: 1;
  }

  .collection-list .collection-list__heading-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    flex-shrink: 0;
  }

  .collection-list .collection-list__view-all--inline {
    display: flex;
    align-items: center;
    margin: 0;
  }

  @media (max-width: 991px) {
    .collection-list .collection-list__view-all--inline {
      display: none !important;
    }
  }

  /* Carousel shell wraps slider track only (heading/subtitle live in intro band) */
  .collection-list .collection-list__carousel-shell {
    width: 100%;
    min-width: 0;
  }

  .collection-list__nav {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    align-items: center;
  }

  /* Prev/next via gyanpradip-slider-nav — slideshow `.swiper-nav` tokens parity */
  .collection-list .collection-list__nav:not(.collection-list__nav--overlay) .swiper-nav {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    inset-inline: auto;
    transform: none;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    max-width: 44px;
    max-height: 44px;
    box-sizing: border-box;
    flex: 0 0 auto;
    align-self: center;
    margin: 0;
    aspect-ratio: 1;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition:
      opacity 0.25s ease,
      transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
      background 0.2s,
      color 0.2s,
      border-color 0.2s,
      visibility 0.2s;
    border: 0;
    background: transparent;
    color: var(--color-foreground);
    will-change: transform, opacity;
  }

  .collection-list .collection-list__nav--overlay .swiper-nav {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    inset-inline: auto;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    max-width: 44px;
    max-height: 44px;
    box-sizing: border-box;
    flex: 0 0 auto;
    align-self: center;
    margin: 0;
    aspect-ratio: 1;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition:
      opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
      background 0.2s,
      color 0.2s,
      border-color 0.2s,
      visibility 0.2s;
    border: 0;
    background: transparent;
    color: var(--color-foreground);
    will-change: transform, opacity;
  }

  .collection-list .collection-list__nav .swiper-nav.swiper-nav--bg-none {
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    max-width: none;
    max-height: none;
    aspect-ratio: auto;
    padding: 4px;
  }

  .collection-list .collection-list__nav .swiper-nav--bg-square {
    border-radius: 0;
  }

  .collection-list .collection-list__nav .swiper-nav--bg-circle {
    border-radius: 100%;
  }

  .collection-list .collection-list__nav .swiper-nav--bg-custom {
    border-radius: var(--collection-list-slider-nav-radius, 0px);
  }

  .collection-list .collection-list__nav .swiper-nav.swiper-nav--solid:not(.swiper-nav--bg-none) {
    background: var(--color-foreground);
    color: var(--color-background);
  }

  .collection-list .collection-list__nav .swiper-nav.swiper-nav--solid:not(.swiper-nav--bg-none):hover {
    background: rgb(from var(--color-foreground) r g b / 85%);
  }

  .collection-list .collection-list__nav .swiper-nav.swiper-nav--outline:not(.swiper-nav--bg-none) {
    background: transparent;
    color: var(--color-foreground);
    border: 1px solid var(--color-foreground);
  }

  .collection-list .collection-list__nav .swiper-nav.swiper-nav--outline:not(.swiper-nav--bg-none):hover {
    background: var(--color-foreground);
    color: var(--color-background);
  }

  .collection-list .collection-list__nav .swiper-nav.swiper-button-prev::after,
  .collection-list .collection-list__nav .swiper-nav.swiper-button-next::after {
    display: none;
  }

  .collection-list .collection-list__nav .swiper-nav:focus-visible:not(.swiper-button-disabled) {
    opacity: 1;
    outline: none;
    box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-foreground);
  }

  .collection-list .collection-list__nav .swiper-nav[disabled],
  .collection-list .collection-list__nav .swiper-nav.swiper-button-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }

  .collection-list .collection-list__nav .swiper-nav svg {
    width: 18px;
    height: 18px;
  }

  /* Swiper viewport clipping — hides off-screen nav translation (no horizontal page scroll) */
  .collection-list--slider .collection-list__swiper-pane {
    position: relative;
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  @supports (overflow: clip) {
    .collection-list--slider .collection-list__swiper-pane {
      overflow-x: clip;
    }
  }

  .collection-list__nav--overlay {
    pointer-events: none;
    justify-content: space-between;
    position: absolute;
    inset-inline: 0;
    inset-block-start: 0;
    inset-block-end: 0;
    align-items: center;
    padding-inline: 8px;
    z-index: 2;
    box-sizing: border-box;
  }

  .collection-list__nav--overlay .swiper-nav {
    pointer-events: auto;
  }

  /* Desktop: overlay hidden when navigation binds to tier-header (beside heading) */
  @media (min-width: 992px) {
    .collection-list--slider:not(.collection-list--nav-on-carousel) .collection-list__nav--overlay {
      display: none !important;
    }
  }

  /* Mobile/tablet overlay tier; header tier hidden below 992px */
  @media (max-width: 991px) {
    .collection-list--slider .collection-list__nav--header {
      display: none !important;
    }

    .collection-list.collection-list--slider {
      overflow-x: hidden;
    }

    @supports (overflow: clip) {
      .collection-list.collection-list--slider {
        overflow-x: clip;
      }
    }
  }

  /* Narrow viewport + desktop "on carousel": overlay arrows hidden until section hover / focus-within */
  @media (max-width: 991px) {
    .collection-list--slider .collection-list__nav--overlay .swiper-button-prev {
      transform: translateX(calc(-1 * (100% + 20px)));
      opacity: 0;
      visibility: hidden;
    }

    .collection-list--slider .collection-list__nav--overlay .swiper-button-next {
      transform: translateX(calc(100% + 20px));
      opacity: 0;
      visibility: hidden;
    }

    .collection-list.collection-list--slider:hover .collection-list__nav--overlay .swiper-button-prev,
    .collection-list.collection-list--slider:hover .collection-list__nav--overlay .swiper-button-next,
    .collection-list.collection-list--slider:focus-within .collection-list__nav--overlay .swiper-button-prev,
    .collection-list.collection-list--slider:focus-within .collection-list__nav--overlay .swiper-button-next {
      transform: translateX(0);
      opacity: 1;
      visibility: visible;
    }
  }

  .collection-list--nav-on-carousel.collection-list--slider .collection-list__nav--overlay .swiper-button-prev {
    transform: translateX(calc(-1 * (100% + 20px)));
    opacity: 0;
    visibility: hidden;
  }

  .collection-list--nav-on-carousel.collection-list--slider .collection-list__nav--overlay .swiper-button-next {
    transform: translateX(calc(100% + 20px));
    opacity: 0;
    visibility: hidden;
  }

  .collection-list.collection-list--nav-on-carousel.collection-list--slider:hover
    .collection-list__nav--overlay
    .swiper-button-prev,
  .collection-list.collection-list--nav-on-carousel.collection-list--slider:hover
    .collection-list__nav--overlay
    .swiper-button-next,
  .collection-list.collection-list--nav-on-carousel.collection-list--slider:focus-within
    .collection-list__nav--overlay
    .swiper-button-prev,
  .collection-list.collection-list--nav-on-carousel.collection-list--slider:focus-within
    .collection-list__nav--overlay
    .swiper-button-next {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
  }

  @media (prefers-reduced-motion: reduce) {
    .collection-list--slider .collection-list__nav .swiper-nav {
      transition-duration: 0.01ms;
    }

    @media (max-width: 991px) {
      .collection-list--slider .collection-list__nav--overlay .swiper-button-prev,
      .collection-list--slider .collection-list__nav--overlay .swiper-button-next {
        transform: none !important;
      }
    }

    .collection-list--nav-on-carousel.collection-list--slider .collection-list__nav--overlay .swiper-button-prev,
    .collection-list--nav-on-carousel.collection-list--slider .collection-list__nav--overlay .swiper-button-next {
      transform: none !important;
    }
  }

  .collection-list__slider .swiper {
    overflow: hidden;
    width: 100%;
    min-width: 0;
  }

  /* Grid layout */
  .collection-list--grid .collection-list__grid {
    display: grid;
    grid-template-columns: repeat(var(--cols-desktop, 4), 1fr);
    gap: var(--collection-list-gap, 16px);
  }

  @media (max-width: 749px) {
    .collection-list--grid .collection-list__grid {
      grid-template-columns: repeat(var(--cols-mobile, 1), 1fr);
    }

    .collection-list--grid:not(.stack-on-mobile) .collection-list__grid {
      display: flex;
      grid-template-columns: none;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      padding-inline: var(--collection-padding-inline-mobile, var(--container-padding-inline, 15px));
      gap: var(--collection-list-gap-mobile, 12px);
    }

    .collection-list--full-flush.collection-list--grid:not(.stack-on-mobile) .collection-list__grid {
      padding-inline: 0;
    }

    .collection-list--grid:not(.stack-on-mobile) .collection-list__grid::-webkit-scrollbar { display: none; }
    .collection-list--grid:not(.stack-on-mobile) .collection-list__grid > * {
      flex: 0 0 calc(100% - 4rem);
      scroll-snap-align: start;
    }
  }

  .collection-list--slider .swiper-slide {
    height: auto;
    box-sizing: border-box;
  }

  /*
    Pre-init slide widths (until `.swiper-initialized`) — matches assets/collection-list.js
    breakpoints 749 / 750–1099 / 1100 + tabletSlides = min(desktop, 3). See COLLECTION_LIST_SWIPER_PREINIT_FALLBACK_PLAN.md
  */
  .collection-list__slider:not(.collection-list__slider--single)
    .swiper:not(.swiper-initialized)
    .swiper-wrapper {
    display: flex;
    flex-wrap: nowrap;
    box-sizing: border-box;
    gap: var(--cl-slider-gap-m, 0px);
  }

  @media (min-width: 750px) {
    .collection-list__slider:not(.collection-list__slider--single)
      .swiper:not(.swiper-initialized)
      .swiper-wrapper {
      gap: var(--cl-slider-gap-d, 0px);
    }
  }

  .collection-list__slider:not(.collection-list__slider--single)
    .swiper:not(.swiper-initialized)
    .swiper-slide {
    flex-shrink: 0;
    width: var(--cl-fallback-w-mobile);
    box-sizing: border-box;
  }

  @media (min-width: 750px) and (max-width: 1099px) {
    .collection-list__slider:not(.collection-list__slider--single)
      .swiper:not(.swiper-initialized)
      .swiper-slide {
      width: var(--cl-fallback-w-tablet);
    }
  }

  @media (min-width: 1100px) {
    .collection-list__slider:not(.collection-list__slider--single)
      .swiper:not(.swiper-initialized)
      .swiper-slide {
      width: var(--cl-fallback-w-desktop);
    }
  }

  .collection-list__slider.collection-list__slider--single .swiper:not(.swiper-initialized) .swiper-wrapper {
    display: flex;
  }

  .collection-list__slider.collection-list__slider--single .swiper:not(.swiper-initialized) .swiper-slide {
    width: 100%;
    flex-shrink: 0;
  }

  /* Pagination — below swiper, in flow */
  .collection-list .collection-list__pagination.swiper-pagination {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    top: auto;
    width: 100%;
    margin-block-start: 2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    max-width: 100%;
  }

  .collection-list .collection-list__pagination--bottom-left {
    justify-content: flex-start;
  }

  .collection-list .collection-list__pagination--bottom-center {
    justify-content: center;
  }

  .collection-list .collection-list__pagination--bottom-right {
    justify-content: flex-end;
  }

  .collection-list .collection-list__pagination .swiper-pagination-bullet {
    cursor: pointer;
    margin: 0;
    opacity: 1;
    background: rgb(from var(--color-foreground) r g b / 25%);
    width: 8px;
    height: 8px;
    border-radius: 100%;
    border: 0;
    transition: background 0.2s;
  }

  .collection-list .collection-list__pagination .swiper-pagination-bullet-active {
    background: var(--color-foreground);
  }

  .collection-list .collection-list__pagination .swiper-pagination-bullet.swiper-pagination-bullet--number {
    box-sizing: border-box;
    width: auto;
    height: auto;
    min-width: 2.4rem;
    min-height: 2.4rem;
    margin: 0;
    padding: 0 0.6rem;
    background: transparent;
    border-radius: 100%;
    color: rgb(from var(--color-foreground) r g b / 50%);
    font-size: 1.2rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: color 0.2s;
  }

  .collection-list
    .collection-list__pagination
    .swiper-pagination-bullet.swiper-pagination-bullet--number.swiper-pagination-bullet-active {
    color: var(--color-foreground);
    background: transparent;
  }

  .collection-list .collection-list__pagination .swiper-pagination-fraction {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.03em;
    color: rgb(from var(--color-foreground) r g b / 75%);
    font-size: 1.2rem;
  }

  /* View all CTA — sizes + optional icon (Phosphor ArrowUpRight) */
  .collection-list .collection-list__view-all-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    box-sizing: border-box;
  }

  .collection-list .collection-list__view-all-btn--small {
    padding-block: 0.8rem;
    padding-inline: 1.6rem;
    font-size: 1.2rem;
    line-height: 1.3;
  }

  .collection-list .collection-list__view-all-btn--medium {
    padding-block: 1rem;
    padding-inline: 2.4rem;
    font-size: 1.4rem;
    line-height: 1.35;
  }

  .collection-list .collection-list__view-all-btn--large {
    padding-block: 1.4rem;
    padding-inline: 3.2rem;
    font-size: 1.6rem;
    line-height: 1.35;
  }

  .collection-list .collection-list__view-all-btn-icon svg {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    display: block;
  }

  @media (max-width: 749px) {
    .collection-list .collection-list__view-all-btn {
      min-height: 4.4rem;
    }
  }

  .collection-list__view-all {
    display: flex;
    justify-content: var(--view-all-align, center);
    margin-block-start: 32px;
  }

  @media (min-width: 992px) {
    .collection-list__view-all--bottom.collection-list__view-all--hide-on-desktop {
      display: none !important;
    }
  }

  @media (max-width: 749px) {
    .collection-list {
      padding-block-start: calc(var(--padding-block-start, 60px) * var(--padding-mobile-scale, 0.8));
      padding-block-end: calc(var(--padding-block-end, 60px) * var(--padding-mobile-scale, 0.8));
    }
  }
/* END_SECTION:collection-list */

/* START_SECTION:featured-collection (INDEX:23) */
/* sections/featured-collection.liquid — single-collection product feed (grid or slider),
     forked from sections/product-tabs.liquid with the tab list removed. Product cards use the
     same _product-card theme-block system; the slider is powered by its own web component
     (assets/featured-collection-slider.js) since product-tabs-slider.js requires a tab panel
     ancestor that doesn't exist here. */

  .featured-collection {
    padding-block-start: var(--padding-block-start, 6rem);
    padding-block-end:   var(--padding-block-end, 6rem);
  }

  .featured-collection .featured-collection__intro-band {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.2rem;
    width: 100%;
    box-sizing: border-box;
    padding-inline-start: var(--padding-inline-start, var(--container-padding-inline, 1.5rem));
    padding-inline-end: var(--padding-inline-end, var(--container-padding-inline, 1.5rem));
    margin-block-end: var(--featured-collection-heading-gap, 55px);
  }
  @media (max-width: 749px) {
    .featured-collection .featured-collection__intro-band {
      padding-inline-start: calc(var(--padding-inline-start, 1.5rem) * var(--padding-mobile-scale, 1));
      padding-inline-end: calc(var(--padding-inline-end, 1.5rem) * var(--padding-mobile-scale, 1));
    }
  }

  .featured-collection .featured-collection__heading-divider {
    width: 100%;
    height: var(--featured-collection-heading-border-width, 2px);
    margin-block-start: 0rem;
    background: rgb(from var(--color-foreground) r g b / var(--featured-collection-heading-border-opacity, 0.2));
  }

  .featured-collection__heading {
    margin: 0;
    flex: 1;
    min-width: 0;
  }

  .featured-collection__heading-with-icon {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex: 1;
    min-width: 0;
  }
  .featured-collection__heading-with-icon .featured-collection__heading {
    flex: 0 1 auto;
  }
  .featured-collection__heading-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    flex-shrink: 0;
    overflow: hidden;
    width: var(--featured-collection-heading-icon-size, 24px);
    height: var(--featured-collection-heading-icon-size, 24px);
    color: var(--featured-collection-heading-icon-color, var(--color-foreground));
  }
  .featured-collection__heading-icon svg,
  .featured-collection__heading-icon img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    display: block;
  }

  .featured-collection__subtitle {
    margin: 0;
  }

  .featured-collection .featured-collection__intro-band .featured-collection__heading + .featured-collection__subtitle,
  .featured-collection .featured-collection__intro-band .featured-collection__shell-intro + .featured-collection__subtitle,
  .featured-collection .featured-collection__intro-band .featured-collection__top + .featured-collection__subtitle {
    margin-block-start: 0.8rem;
  }

  .featured-collection .featured-collection__track-band.section-container {
    padding-block-start: 0;
    padding-block-end: 0;
  }

  .featured-collection__track-band {
    width: 100%;
    min-width: 0;
  }

  .featured-collection__track-band--flush {
    padding-inline: 0;
    max-width: none;
  }

  /* Heading row (grid): heading (left) + optional inline View all (right) */
  .featured-collection__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
  }

  /* Heading row (slider): heading + optional nav/View all */
  .featured-collection .featured-collection__intro-band > .featured-collection__shell-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .featured-collection__heading-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.6rem;
    flex-shrink: 0;
  }

  .featured-collection__view-all--inline {
    display: flex;
    align-items: center;
    margin: 0;
  }

  @media (max-width: 991px) {
    .featured-collection__view-all--inline {
      display: none !important;
    }
  }

  .featured-collection .featured-collection__carousel-shell {
    width: 100%;
    min-width: 0;
  }

  /* Grid layout */
  .featured-collection__grid {
    display: grid;
    grid-template-columns: repeat(var(--cols-desktop, 4), 1fr);
    gap: var(--gap-desktop, 1.6rem);
  }

  .featured-collection__grid > gyanpradip-product-card.product-card--align-row-actions {
    align-self: stretch;
    min-height: 0;
  }

  @media (max-width: 1099px) {
    .featured-collection__grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (max-width: 749px) {
    .featured-collection__grid {
      grid-template-columns: repeat(var(--cols-mobile, 2), 1fr);
      gap: var(--gap-mobile, 1.2rem);
    }
  }

  @media (max-width: 749px) {
    .featured-collection__grid--hscroll-mobile {
      display: flex;
      grid-template-columns: none;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-padding-inline: var(--page-gutter, var(--container-padding-inline-mobile, 1.5rem));
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .featured-collection__grid--hscroll-mobile::-webkit-scrollbar { display: none; }
    .featured-collection__grid--hscroll-mobile > * {
      flex: 0 0 calc((100% - var(--gap-mobile, 1.2rem)) / 1.5);
      scroll-snap-align: start;
    }
  }

  .featured-collection__empty {
    text-align: center;
    color: rgb(from var(--color-foreground) r g b / 60%);
    padding: 4.8rem 1.6rem;
  }

  @media (max-width: 749px) {
    .featured-collection {
      padding-block-start: calc(var(--padding-block-start, 6rem) * var(--mobile-scale, 0.8));
      padding-block-end:   calc(var(--padding-block-end, 6rem)   * var(--mobile-scale, 0.8));
    }
  }

  /* ───────────────────── Slider nav + pagination (scoped to Feature collection only) ───────────────────── */
  .featured-collection .swiper-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.4rem;
    height: 4.4rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    border: 0;
    background: transparent;
    color: var(--color-foreground);
    box-sizing: border-box;
    flex: 0 0 auto;
    align-self: center;
    margin: 0;
    aspect-ratio: 1;
  }
  .featured-collection .swiper-nav svg {
    width: 1.8rem;
    height: 1.8rem;
  }
  .featured-collection .swiper-nav--bg-none {
    width: auto;
    height: auto;
    padding: 0.4rem;
    aspect-ratio: auto;
    max-width: none;
    max-height: none;
  }
  .featured-collection .swiper-nav--bg-circle { border-radius: 100%; }
  .featured-collection .swiper-nav--bg-square { border-radius: 0; }
  .featured-collection .swiper-nav--solid:not(.swiper-nav--bg-none) {
    background: var(--color-foreground);
    color: var(--color-background);
  }
  .featured-collection .swiper-nav--solid:not(.swiper-nav--bg-none):hover {
    background: rgb(from var(--color-foreground) r g b / 85%);
  }
  .featured-collection .swiper-nav--outline:not(.swiper-nav--bg-none) {
    background: transparent;
    color: var(--color-foreground);
    border: 0.1rem solid var(--color-foreground);
  }
  .featured-collection .swiper-nav--outline:not(.swiper-nav--bg-none):hover {
    background: var(--color-foreground);
    color: var(--color-background);
  }
  .featured-collection .swiper-nav[disabled] {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
  }

  .swiper-pagination-bullet--number {
    width: auto; height: auto; min-width: 2.4rem; min-height: 2.4rem;
    padding: 0 0.6rem;
    background: transparent;
    color: var(--color-foreground);
    opacity: 0.5;
    font-size: 1.2rem; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 100%;
  }
  .swiper-pagination-bullet--number.swiper-pagination-bullet-active {
    opacity: 1;
    background: rgb(from var(--color-foreground) r g b / 10%);
  }

  .featured-collection .featured-collection__nav {
    display: flex;
    gap: 0.8rem;
    flex-shrink: 0;
    align-items: center;
  }

  .featured-collection .featured-collection__nav:not(.featured-collection__nav--overlay) .swiper-nav {
    position: relative;
    top: auto; bottom: auto; left: auto; right: auto; inset-inline: auto;
    transform: none;
    width: 4.4rem; height: 4.4rem; min-width: 4.4rem; min-height: 4.4rem; max-width: 4.4rem; max-height: 4.4rem;
    box-sizing: border-box;
    flex: 0 0 auto;
    align-self: center;
    margin: 0;
    aspect-ratio: 1;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition:
      opacity 0.25s ease,
      transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
      background 0.2s,
      color 0.2s,
      border-color 0.2s,
      visibility 0.2s;
    border: 0;
    background: transparent;
    color: var(--color-foreground);
    will-change: transform, opacity;
  }

  .featured-collection .featured-collection__nav--overlay .swiper-nav {
    position: relative;
    top: auto; bottom: auto; left: auto; right: auto; inset-inline: auto;
    width: 4.4rem; height: 4.4rem; min-width: 4.4rem; min-height: 4.4rem; max-width: 4.4rem; max-height: 4.4rem;
    box-sizing: border-box;
    flex: 0 0 auto;
    align-self: center;
    margin: 0;
    aspect-ratio: 1;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition:
      opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
      background 0.2s,
      color 0.2s,
      border-color 0.2s,
      visibility 0.2s;
    border: 0;
    background: transparent;
    color: var(--color-foreground);
    will-change: transform, opacity;
  }

  .featured-collection .featured-collection__nav .swiper-nav.swiper-nav--bg-none {
    width: auto; height: auto; min-width: 0; min-height: 0; max-width: none; max-height: none;
    aspect-ratio: auto;
    padding: 0.4rem;
  }
  .featured-collection .featured-collection__nav .swiper-nav--bg-square { border-radius: 0; }
  .featured-collection .featured-collection__nav .swiper-nav--bg-circle { border-radius: 100%; }
  .featured-collection .featured-collection__nav .swiper-nav--bg-custom {
    border-radius: var(--featured-collection-slider-nav-radius, 0);
  }
  .featured-collection .featured-collection__nav .swiper-nav.swiper-nav--solid:not(.swiper-nav--bg-none) {
    background: var(--color-foreground);
    color: var(--color-background);
  }
  .featured-collection .featured-collection__nav .swiper-nav.swiper-nav--solid:not(.swiper-nav--bg-none):hover {
    background: rgb(from var(--color-foreground) r g b / 85%);
  }
  .featured-collection .featured-collection__nav .swiper-nav.swiper-nav--outline:not(.swiper-nav--bg-none) {
    background: transparent;
    color: var(--color-foreground);
    border: 0.1rem solid var(--color-foreground);
  }
  .featured-collection .featured-collection__nav .swiper-nav.swiper-nav--outline:not(.swiper-nav--bg-none):hover {
    background: var(--color-foreground);
    color: var(--color-background);
  }
  .featured-collection .featured-collection__nav .swiper-nav.swiper-button-prev::after,
  .featured-collection .featured-collection__nav .swiper-nav.swiper-button-next::after {
    display: none;
  }
  .featured-collection .featured-collection__nav .swiper-nav:focus-visible:not(.swiper-button-disabled) {
    opacity: 1;
    outline: none;
    box-shadow: 0 0 0 0.2rem var(--color-background), 0 0 0 0.4rem var(--color-foreground);
  }
  .featured-collection .featured-collection__nav .swiper-nav[disabled],
  .featured-collection .featured-collection__nav .swiper-nav.swiper-button-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }
  .featured-collection .featured-collection__nav .swiper-nav svg {
    width: 1.8rem;
    height: 1.8rem;
  }

  .featured-collection--slider .featured-collection__swiper-pane {
    position: relative;
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }
  @supports (overflow: clip) {
    .featured-collection--slider .featured-collection__swiper-pane {
      overflow-x: clip;
    }
  }

  .featured-collection__nav--overlay {
    pointer-events: none;
    justify-content: space-between;
    position: absolute;
    inset-inline: 0;
    inset-block-start: 0;
    inset-block-end: 0;
    align-items: center;
    padding-inline: 0.8rem;
    z-index: 2;
    box-sizing: border-box;
  }
  .featured-collection__nav--overlay .swiper-nav { pointer-events: auto; }
  /* Keep pointer-events on the disabled arrow too. Both Swiper's
     `.swiper-button-disabled { pointer-events: none }` and this section's own
     disabled rule above turn it off; on the pointer-events:none overlay that lets a
     click on the disabled arrow pass THROUGH to the product card's full-card PDP link
     underneath — opening the product page. Match that rule's specificity (0,4,0),
     placed later so it wins, and swallow the click instead. */
  .featured-collection .featured-collection__nav--overlay .swiper-nav.swiper-button-disabled {
    pointer-events: auto;
  }

  @media (min-width: 992px) {
    .featured-collection--slider:not(.featured-collection--nav-on-carousel) .featured-collection__nav--overlay {
      display: none !important;
    }
  }

  @media (max-width: 991px) {
    .featured-collection--slider .featured-collection__nav--header {
      display: none !important;
    }
    .featured-collection.featured-collection--slider {
      overflow-x: hidden;
    }
    @supports (overflow: clip) {
      .featured-collection.featured-collection--slider {
        overflow-x: clip;
      }
    }
  }

  @media (max-width: 991px) {
    .featured-collection--slider .featured-collection__nav--overlay .swiper-button-prev {
      transform: translateX(calc(-1 * (100% + 2rem)));
      opacity: 0;
      visibility: hidden;
    }
    .featured-collection--slider .featured-collection__nav--overlay .swiper-button-next {
      transform: translateX(calc(100% + 2rem));
      opacity: 0;
      visibility: hidden;
    }
    .featured-collection.featured-collection--slider:hover .featured-collection__nav--overlay .swiper-button-prev,
    .featured-collection.featured-collection--slider:hover .featured-collection__nav--overlay .swiper-button-next,
    .featured-collection.featured-collection--slider:focus-within .featured-collection__nav--overlay .swiper-button-prev,
    .featured-collection.featured-collection--slider:focus-within .featured-collection__nav--overlay .swiper-button-next {
      transform: translateX(0);
      opacity: 1;
      visibility: visible;
    }
  }

  .featured-collection--nav-on-carousel.featured-collection--slider .featured-collection__nav--overlay .swiper-button-prev {
    transform: translateX(calc(-1 * (100% + 2rem)));
    opacity: 0;
    visibility: hidden;
  }
  .featured-collection--nav-on-carousel.featured-collection--slider .featured-collection__nav--overlay .swiper-button-next {
    transform: translateX(calc(100% + 2rem));
    opacity: 0;
    visibility: hidden;
  }
  .featured-collection.featured-collection--nav-on-carousel.featured-collection--slider:hover
    .featured-collection__nav--overlay .swiper-button-prev,
  .featured-collection.featured-collection--nav-on-carousel.featured-collection--slider:hover
    .featured-collection__nav--overlay .swiper-button-next,
  .featured-collection.featured-collection--nav-on-carousel.featured-collection--slider:focus-within
    .featured-collection__nav--overlay .swiper-button-prev,
  .featured-collection.featured-collection--nav-on-carousel.featured-collection--slider:focus-within
    .featured-collection__nav--overlay .swiper-button-next {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
  }

  @media (prefers-reduced-motion: reduce) {
    .featured-collection--slider .featured-collection__nav .swiper-nav {
      transition-duration: 0.01ms;
    }
    @media (max-width: 991px) {
      .featured-collection--slider .featured-collection__nav--overlay .swiper-button-prev,
      .featured-collection--slider .featured-collection__nav--overlay .swiper-button-next {
        transform: none !important;
      }
    }
    .featured-collection--nav-on-carousel.featured-collection--slider .featured-collection__nav--overlay .swiper-button-prev,
    .featured-collection--nav-on-carousel.featured-collection--slider .featured-collection__nav--overlay .swiper-button-next {
      transform: none !important;
    }
  }

  .featured-collection__slider .swiper {
    overflow: hidden;
    width: 100%;
    min-width: 0;
  }

  .featured-collection__slider:not(.featured-collection__slider--single) .swiper:not(.swiper-initialized) .swiper-wrapper {
    display: flex;
    flex-wrap: nowrap;
    box-sizing: border-box;
    gap: var(--fc-gap, 0px);
  }
  .featured-collection__slider:not(.featured-collection__slider--single) .swiper:not(.swiper-initialized) .swiper-slide {
    flex-shrink: 0;
    width: var(--fc-fallback-w-mobile);
    box-sizing: border-box;
  }
  @media (min-width: 750px) and (max-width: 1099px) {
    .featured-collection__slider:not(.featured-collection__slider--single) .swiper:not(.swiper-initialized) .swiper-slide {
      width: var(--fc-fallback-w-tablet);
    }
  }
  @media (min-width: 1100px) {
    .featured-collection__slider:not(.featured-collection__slider--single) .swiper:not(.swiper-initialized) .swiper-slide {
      width: var(--fc-fallback-w-desktop);
    }
  }
  .featured-collection__slider.featured-collection__slider--single .swiper:not(.swiper-initialized) .swiper-wrapper {
    display: flex;
  }
  .featured-collection__slider.featured-collection__slider--single .swiper:not(.swiper-initialized) .swiper-slide {
    width: 100%;
    flex-shrink: 0;
  }

  .featured-collection__slider {
    --featured-collection-slide-safe-inset: 0.6rem;
  }
  .featured-collection__slider .swiper-slide {
    box-sizing: border-box;
    padding-block: var(--featured-collection-slide-safe-inset);
    padding-inline: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: auto;
  }
  .featured-collection__slider .swiper-slide > gyanpradip-product-card {
    align-self: start;
    width: 100%;
  }
  .featured-collection__slider .swiper-slide > gyanpradip-product-card.product-card--align-row-actions {
    align-self: stretch;
    flex: 1 1 auto;
    min-height: 0;
  }

  .featured-collection .featured-collection__pagination.swiper-pagination {
    position: relative;
    left: auto; right: auto; bottom: auto; top: auto;
    width: 100%;
    margin-block-start: 2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.2rem;
    max-width: 100%;
  }
  .featured-collection .featured-collection__pagination--bottom-left { justify-content: flex-start; }
  .featured-collection .featured-collection__pagination--bottom-center { justify-content: center; }
  .featured-collection .featured-collection__pagination--bottom-right { justify-content: flex-end; }

  .featured-collection .featured-collection__pagination .swiper-pagination-bullet {
    cursor: pointer;
    margin: 0;
    opacity: 1;
    background: rgb(from var(--color-foreground) r g b / 25%);
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 100%;
    border: 0;
    transition: background 0.2s;
  }
  .featured-collection .featured-collection__pagination .swiper-pagination-bullet-active {
    background: var(--color-foreground);
  }
  .featured-collection .featured-collection__pagination .swiper-pagination-bullet.swiper-pagination-bullet--number {
    box-sizing: border-box;
    width: auto; height: auto; min-width: 2.4rem; min-height: 2.4rem;
    margin: 0;
    padding: 0 0.6rem;
    background: transparent;
    border-radius: 100%;
    color: rgb(from var(--color-foreground) r g b / 50%);
    font-size: 1.2rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: color 0.2s;
  }
  .featured-collection
    .featured-collection__pagination
    .swiper-pagination-bullet.swiper-pagination-bullet--number.swiper-pagination-bullet-active {
    color: var(--color-foreground);
    background: transparent;
  }
  .featured-collection .featured-collection__pagination .swiper-pagination-fraction {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.03em;
    color: rgb(from var(--color-foreground) r g b / 75%);
    font-size: 1.2rem;
  }

  .featured-collection .featured-collection__view-all-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    box-sizing: border-box;
    font-weight: 700;
  }
  .featured-collection .featured-collection__view-all-btn--small {
    padding-block: 0.8rem;
    padding-inline: 1.6rem;
    font-size: 1.2rem;
    line-height: 1.3;
  }
  .featured-collection .featured-collection__view-all-btn--medium {
    padding-block: 1rem;
    padding-inline: 2.4rem;
    font-size: 1.4rem;
    line-height: 1.35;
  }
  .featured-collection .featured-collection__view-all-btn--large {
    padding-block: 1.4rem;
    padding-inline: 3.2rem;
    font-size: 1.6rem;
    line-height: 1.35;
  }
  .featured-collection .featured-collection__view-all-btn-icon svg {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    display: block;
  }
  @media (max-width: 749px) {
    .featured-collection .featured-collection__view-all-btn {
      min-height: 4.4rem;
    }
  }
  .featured-collection .featured-collection__view-all-btn.featured-collection__view-all-btn--link {
    padding: 0;
  }
  @media (max-width: 749px) {
    .featured-collection .featured-collection__view-all-btn.featured-collection__view-all-btn--link {
      min-height: 0;
    }
  }

  .featured-collection .featured-collection__view-all--bottom {
    display: flex;
    justify-content: center;
    margin-block-start: 3.2rem;
  }
  @media (min-width: 992px) {
    .featured-collection .featured-collection__view-all--bottom.featured-collection__view-all--hide-on-desktop {
      display: none !important;
    }
  }
/* END_SECTION:featured-collection */

/* START_SECTION:featured-product (INDEX:24) */
/* ── PDP base layout (shared with gyanpradip-product) ─────────────────────── */

  :root {
    --media-shadow-vertical-offset: 4px;
    --media-shadow-visible: 0;
    --media-shadow-horizontal-offset: 0px;
    --media-border-width: 1px;
    --media-radius: 0px;
  }

  product-info {
    display: block;
  }

  .product {
    margin: 0;
  }

  .product.grid {
    gap: 0;
  }

  .product--no-media {
    max-width: 57rem;
    margin: 0 auto;
  }

  .product__media-wrapper {
    padding-left: 0;
  }

  @media screen and (min-width: 750px) {
    .product__column-sticky {
      display: block;
      position: sticky;
      top: 3rem;
      z-index: 2;
    }

    .product--thumbnail .thumbnail-list {
      padding-right: var(--media-shadow-horizontal-offset);
    }

    .product__info-wrapper {
      padding: 0 0 0 5rem;
    }

    .product__info-wrapper--extra-padding {
      padding: 0 0 0 8rem;
    }

    .product--right .product__info-wrapper {
      padding: 0 5rem 0 0;
    }

    .product--right .product__info-wrapper--extra-padding {
      padding: 0 8rem 0 0;
    }

    .product--right .product__media-list {
      margin-bottom: 2rem;
    }

    .product__media-container .slider-buttons {
      display: none;
    }

    .product--right .product__media-wrapper {
      order: 2;
    }
  }

  @media screen and (min-width: 990px) {
    .product--large:not(.product--no-media) .product__media-wrapper {
      max-width: 65%;
      width: calc(65% - var(--grid-gap-x) / 2);
    }

    .product--large:not(.product--no-media) .product__info-wrapper {
      padding: 0 0 0 4rem;
      max-width: 35%;
      width: calc(35% - var(--grid-gap-x) / 2);
    }

    .product--large:not(.product--no-media).product--right
      .product__info-wrapper {
      padding: 0 4rem 0 0;
    }

    .product--medium:not(.product--no-media) .product__media-wrapper,
    .product--small:not(.product--no-media) .product__info-wrapper {
      max-width: 55%;
      width: calc(55% - var(--grid-gap-x) / 2);
    }

    .product--medium:not(.product--no-media) .product__info-wrapper,
    .product--small:not(.product--no-media) .product__media-wrapper {
      max-width: 45%;
      width: calc(45% - var(--grid-gap-x) / 2);
    }
  }

  /* ── Section-level overrides (higher specificity, .featured-product scoped) */
  /* Section padding — desktop value + mobile scaled via --mobile-scale. */
  .featured-product {
    padding-block-start: var(--padding-block-start, 0);
    padding-block-end: var(--padding-block-end, 0);
  }
  @media screen and (max-width: 749px) {
    .featured-product {
      padding-block-start: calc(var(--padding-block-start, 0) * var(--mobile-scale, 1));
      padding-block-end: calc(var(--padding-block-end, 0) * var(--mobile-scale, 1));
    }
  }
  .featured-product .product {
    --grid-gap-y: 10px;
    --grid-gap-y-mobile: 10px;
    --grid-gap-x-mobile: 10px;
    --grid-gap-x: 10px;
  }
  /* Tablet (750–991px): fixed 2rem column gap. */
  @media screen and (min-width: 750px) and (max-width: 991px) {
    .featured-product .product.grid {
      --grid-gap-x: 2rem;
      column-gap: 2rem;
    }
  }
  /* Desktop (>=992px): merchant-controlled gap. */
  @media screen and (min-width: 992px) {
    .featured-product .product.grid {
      --grid-gap-x: var(--pdp-column-gap, 4rem);
      column-gap: var(--pdp-column-gap, 4rem);
    }
  }

  /* Column spacing comes from column-gap; neutralize legacy info-wrapper padding. */
  @media screen and (min-width: 750px) {
    .featured-product .product__info-wrapper,
    .featured-product .product--right .product__info-wrapper {
      padding-inline: 0;
    }
  }

  /* Desktop ratios: Small = media ~33% / details ~67%. */
  @media screen and (min-width: 990px) {
    .featured-product .product--small:not(.product--no-media) .product__media-wrapper {
      max-width: 33%;
      width: calc(33% - var(--grid-gap-x) / 2);
    }
    .featured-product .product--small:not(.product--no-media) .product__info-wrapper {
      max-width: 67%;
      width: calc(67% - var(--grid-gap-x) / 2);
    }
    .featured-product .product--large:not(.product--no-media) .product__info-wrapper {
      padding-inline: 0;
    }
  }

  /* Sticky columns are desktop-only: disable on tablet for this section. */
  @media screen and (min-width: 750px) and (max-width: 991px) {
    .featured-product .product__column-sticky {
      position: static;
      top: auto;
    }
  }

  /* Main viewer (gallery) navigation — gallery DOM, static styling. */
  .product .main-viewer-navigation {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: 1rem;
    height: 100%;
    width: 100%;
  }
  .product .main-viewer-navigation.hidden { display: none; }
  .product .main-viewer-button {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    background: rgb(from var(--color-button) r g b / calc(var(--alpha-button-background) * 100%));
    color: var(--color-button-text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
    transition: opacity 0.3s ease;
    opacity: 0;
    z-index: 10;
  }
  .product .product__media-wrapper:hover .main-viewer-button { opacity: 1; }
  .product .main-viewer-button.main-viewer-button--prev { margin-inline-end: auto; }
  .product .main-viewer-button.main-viewer-button--next { margin-inline-start: auto; }
  .product .main-viewer-button svg { width: 1.5rem; height: 1.5rem; }
  @media screen and (max-width: 749px) {
    .product .main-viewer-navigation {
      position: static;
      inset: unset;
      height: auto;
      width: 100%;
      z-index: auto;
      pointer-events: auto;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 0.4rem;
      padding: 0.8rem 0.5rem;
    }
    .product media-gallery[data-mobile-style="counter"] .main-viewer-navigation {
      justify-content: space-between;
      padding: 0.8rem 1rem;
    }
    .product .product__media-wrapper .main-viewer-button {
      width: 3.5rem;
      height: 3.5rem;
    }
    .product .product__media-wrapper .main-viewer-button svg { width: 1.2rem; height: 1.2rem; }
    .d-md-none { display: initial; }
  }
  @media screen and (min-width: 750px) {
    .d-md-none { display: none; }
  }
/* END_SECTION:featured-product */

/* START_SECTION:footer (INDEX:25) */
/* ─── Footer wrapper ─────────────────────────────────────────── */
  .footer {
    position: relative;
  }

  /* ─── Page-width container ───────────────────────────────────── */
  .footer__page-width {
    max-width: var(--layout-page-width);
    margin-inline: auto;
    padding-inline: var(--container-padding-inline, 1.5rem);
  }

  /* ─── Columns area ───────────────────────────────────────────── */
  .footer__top {
    padding-inline: var(--container-padding-inline, 1.5rem);
  }

  .footer__columns {
    display: flex;
    flex-wrap: wrap;
    gap: var(--footer-col-gap-v, 2.4rem) var(--footer-col-gap-h, 2.4rem);
  }

  /* ─── Bottom bar ─────────────────────────────────────────────── */
  .footer__bottom {
    padding-block: 1.5rem;
    padding-inline: var(--container-padding-inline, 1.5rem);
  }

  /* Dividers on the inner (page-width) container so they stay within content bounds */
  .footer__bottom-inner--top-divider {
    border-top: 0.1rem solid rgb(from var(--color-foreground) r g b / 15%);
    padding-top: 1.5rem;
  }

  .footer__bottom-inner--bottom-divider {
    border-bottom: 0.1rem solid rgb(from var(--color-foreground) r g b / 15%);
    padding-bottom: 1.5rem;
  }

  .footer__bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.2rem;
  }

  .footer__bottom-left {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
  }

  .footer__bottom-center {
    flex: 1;
    text-align: center;
    min-width: 16rem;
  }

  .footer__copyright {
    margin: 0;
    font-size: 1.4rem;
    line-height: 1;
  }

  .footer__copyright a {
    color: var(--color-foreground);
    text-decoration: underline;
    text-underline-offset: 0.2rem;
  }

  .footer__bottom-right {
    display: flex;
    align-items: center;
  }

  .footer__bottom-right .list-payment {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.8rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  @media (max-width: 749px) {
    .footer__columns {
      gap: var(--footer-col-gap-v-mobile, 0rem) var(--footer-col-gap-h, 2.4rem);
    }

    .footer__bottom-inner {
      flex-direction: column-reverse;
      align-items: center;
    }

    .footer__bottom-center {
      text-align: center;
    }

    .footer__bottom-right .list-payment {
      justify-content: center;
    }

    .footer__bottom-left .localization__store.d-flex {
      justify-content: center;
    }
  }

  /* ─── Logo bar ───────────────────────────────────────────────── */
  .footer__logo-bar {
    padding-block: 4rem;
    padding-inline: var(--container-padding-inline, 1.5rem);
    text-align: center;
  }

  .footer__logo-bar img {
    max-width: var(--footer-logo-max-width, 30rem);
    width: 100%;
    height: auto;
    display: block;
    margin-inline: auto;
  }
/* END_SECTION:footer */

/* START_SECTION:gyanpradip-book-request-modal (INDEX:33) */
.book-request-modal {
    position: fixed;
    inset: 0;
    z-index: -1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    box-sizing: border-box;
    background: transparent;
    opacity: 0;
    visibility: hidden;
    transition:
      background-color 0.28s ease,
      opacity 0.28s ease,
      visibility 0.28s ease;
  }

  .book-request-modal[open] {
    z-index: 101;
    opacity: 1;
    visibility: visible;
    background: var(--brm-overlay, rgb(0 0 0 / 0.6));
  }

  .book-request-modal.is-closing {
    background: transparent;
    opacity: 0;
  }

  .book-request-modal__content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--brm-max-width, 560px);
    max-height: calc(100vh - 4rem);
    overflow: hidden;
    background: var(--brm-modal-bg, #fff);
    color: var(--brm-text, #121212);
    border-radius: var(--brm-radius, 16px);
    box-shadow: 0 24px 60px rgb(0 0 0 / 0.25);
    transform: scale(0.94);
    opacity: 0;
    transition:
      transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
      opacity 0.22s ease;
  }

  .book-request-modal[open] .book-request-modal__content {
    transform: scale(1);
    opacity: 1;
  }

  .book-request-modal.is-closing .book-request-modal__content {
    transform: scale(0.94);
    opacity: 0;
    transition:
      transform 0.25s ease-in,
      opacity 0.25s ease-in;
  }

  /* ── Header ─────────────────────────────────────────────── */
  .book-request-modal__header {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.2rem;
    padding: 2rem 2.2rem;
    background: linear-gradient(
      135deg,
      var(--brm-header-bg, #064e3b),
      color-mix(in srgb, var(--brm-header-bg, #064e3b) 78%, #000)
    );
    color: var(--brm-header-text, #fff);
    border-radius: var(--brm-radius, 16px) var(--brm-radius, 16px) 0 0;
  }

  .book-request-modal__header-text {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    min-width: 0;
  }

  .book-request-modal__header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
    background: var(--brm-accent, #bb4d00);
    color: #fff;
  }

  .book-request-modal__title {
    display: block;
    margin: 0;
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.3;
    color: inherit;
  }

  .book-request-modal__subtitle {
    display: block;
    margin-top: 0.2rem;
    font-size: 1.2rem;
    opacity: 0.85;
  }

  .book-request-modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 3.4rem;
    height: 3.4rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.12);
    color: currentColor;
    cursor: pointer;
    transition: background 0.2s ease;
  }

  .book-request-modal__close:hover {
    background: rgb(255 255 255 / 0.24);
  }

  /* ── Body ───────────────────────────────────────────────── */
  .book-request-modal__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 2rem 2.2rem 2.4rem;
  }

  .book-request-modal__card {
    padding: 1.4rem 1.6rem;
    margin-bottom: 1.8rem;
    background: var(--brm-card-bg, #e3f0e9);
    border-radius: calc(var(--brm-radius, 16px) - 4px);
  }

  .book-request-modal__card-heading {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 0.4rem;
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--brm-header-bg, #064e3b);
  }

  .book-request-modal__card-icon {
    display: inline-flex;
    color: var(--brm-header-bg, #064e3b);
  }

  .book-request-modal__card-text {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.6;
    opacity: 0.85;
  }

  .book-request-modal__form {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
  }

  /* Fields are rendered as _contact-field theme blocks (add/remove/reorder in
     the editor). They output .contact-form-block__field markup, so we style
     that here — scoped to the modal — instead of relying on the contact-form
     block's own stylesheet, which is not loaded on every page. */
  .book-request-modal__fields {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
  }

  .book-request-modal__fields .contact-form-block__field {
    flex: 1 1 calc(50% - 0.6rem);
    min-width: 0;
  }

  .book-request-modal__fields .contact-form-block__field--full {
    flex-basis: 100%;
  }

  .book-request-modal__fields .contact-form-block__field > label,
  .book-request-modal__fields .contact-form-block__radio-group legend {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 1.3rem;
    font-weight: 600;
  }

  .book-request-modal__fields .contact-form-block__field input,
  .book-request-modal__fields .contact-form-block__field textarea,
  .book-request-modal__fields .contact-form-block__field select {
    width: 100%;
    box-sizing: border-box;
    padding: 1.1rem 1.2rem;
    font-size: 1.4rem;
    color: var(--brm-text, #121212);
    background: var(--brm-field-bg, #fff);
    border: 1px solid var(--brm-field-border, #d9e2dd);
    border-radius: calc(var(--brm-radius, 16px) - 6px);
    transition:
      border-color 0.2s ease,
      box-shadow 0.2s ease;
  }

  .book-request-modal__fields .contact-form-block__field input:focus,
  .book-request-modal__fields .contact-form-block__field textarea:focus,
  .book-request-modal__fields .contact-form-block__field select:focus {
    outline: none;
    border-color: var(--brm-header-bg, #064e3b);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brm-header-bg, #064e3b) 18%, transparent);
  }

  .book-request-modal__fields .contact-form-block__field textarea {
    resize: vertical;
    min-height: 7rem;
  }

  .book-request-modal__fields .contact-form-block__checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.3rem;
    cursor: pointer;
  }

  .book-request-modal__fields .contact-form-block__checkbox input {
    width: auto;
  }

  .book-request-modal__fields .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .book-request-modal__note {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    width: 100%;
    margin: 0.4rem 0 0;
    font-size: 1.15rem;
    line-height: 1.5;
    opacity: 0.7;
  }

  .book-request-modal__note-icon {
    display: inline-flex;
    flex-shrink: 0;
    margin-top: 0.1rem;
    color: var(--brm-header-bg, #064e3b);
  }

  .book-request-modal__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    width: 100%;
    padding: 1.3rem 1.6rem;
    margin-top: 0.4rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--brm-button-text, #fff);
    background: var(--brm-button-bg, #064e3b);
    border: 0;
    border-radius: calc(var(--brm-radius, 16px) - 6px);
    cursor: pointer;
    transition:
      filter 0.2s ease,
      transform 0.1s ease;
  }

  .book-request-modal__submit:hover {
    filter: brightness(1.08);
  }

  .book-request-modal__submit:active {
    transform: translateY(1px);
  }

  .book-request-modal__success {
    width: 100%;
    padding: 1.1rem 1.2rem;
    margin: 0;
    font-size: 1.35rem;
    color: var(--brm-header-bg, #064e3b);
    background: color-mix(in srgb, var(--brm-header-bg, #064e3b) 10%, transparent);
    border-radius: calc(var(--brm-radius, 16px) - 6px);
  }

  .book-request-modal__errors {
    width: 100%;
    padding: 1.1rem 1.2rem;
    margin: 0;
    font-size: 1.3rem;
    color: rgb(var(--color-error, 200 0 0));
    background: rgb(from rgb(var(--color-error, 200 0 0)) r g b / 0.08);
    border-radius: calc(var(--brm-radius, 16px) - 6px);
  }

  .book-request-modal__errors ul {
    margin: 0;
    padding-left: 1.6rem;
  }

  @media screen and (max-width: 749px) {
    .book-request-modal {
      padding: 1rem;
      align-items: flex-end;
    }

    .book-request-modal__content {
      max-height: 92vh;
    }

    .book-request-modal__fields .contact-form-block__field {
      flex-basis: 100%;
    }

    .book-request-modal__title {
      font-size: 1.5rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .book-request-modal,
    .book-request-modal__content {
      transition: none !important;
    }
  }
/* END_SECTION:gyanpradip-book-request-modal */

/* START_SECTION:gyanpradip-main-collection (INDEX:40) */
/* Main Collection — section-owned grid + padding CSS.
     Filter / facets / layout-switcher CSS now lives in blocks/gyanpradip-filters.liquid.
     Dynamic values pass through inline CSS custom properties on .gyanpradip-collection-template
     because this stylesheet block is static and cannot contain Liquid.
     Bootstrap .row / .row-cols-* grid replaced by CSS Grid (theme-wide idiom; see product-tabs).
     Spec: blueprint/collection-template/MAIN_COLLECTION_PRODUCT_CARD_MIGRATION_PLAN.md section 5 */

  .gyanpradip-collection-template {
    padding-block-start: calc(var(--padding-block-start, 0rem) * var(--pad-mobile-scale, 1));
    padding-block-end: calc(var(--padding-block-end, 0rem) * var(--pad-mobile-scale, 1));
  }
  @media (min-width: 750px) {
    .gyanpradip-collection-template {
      padding-block-start: var(--padding-block-start, 0rem);
      padding-block-end: var(--padding-block-end, 0rem);
    }
  }

  /* Product grid — column count driven by --cols-desktop / --cols-mobile (inline from
     settings) and by the .grid-col-N class the layout switcher toggles on #GyanpradipProductGrid. */
  .gyanpradip-collection-grid {
    display: grid;
    grid-template-columns: repeat(var(--cols-desktop, 3), minmax(0, 1fr));
    /* Independent row/column gaps: vertical -> row-gap, horizontal -> column-gap.
       Both fall back to --grid-gap (legacy single value) then 1.6rem. */
    row-gap: var(--grid-gap-row, var(--grid-gap, 1.6rem));
    column-gap: var(--grid-gap-col, var(--grid-gap, 1.6rem));
  }

  /* Tablet default parity with legacy row-cols-md-3 */
  @media (min-width: 768px) and (max-width: 991px) {
    .gyanpradip-collection-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  /* Mobile: 1 or 2 columns (product_column_on_mobile); switcher has no mobile effect (legacy parity) */
  @media (max-width: 767px) {
    .gyanpradip-collection-grid {
      grid-template-columns: repeat(var(--cols-mobile, 2), minmax(0, 1fr));
    }
  }

  /* Layout-switcher overrides — active on tablet + desktop only (min-width: 768px) */
  @media (min-width: 768px) {
    .grid-col-1 .gyanpradip-collection-grid { grid-template-columns: minmax(0, 1fr); }
    .grid-col-2 .gyanpradip-collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-col-3 .gyanpradip-collection-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid-col-4 .gyanpradip-collection-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .grid-col-5 .gyanpradip-collection-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  }

  /* Full-width flush: edge-to-edge band (zeroes .section-container inline gutter) */
  .gyanpradip-collection-template--flush {
    padding-inline-start: 0;
    padding-inline-end: 0;
  }

  /* In-grid promo banner cell. Span values arrive as inline custom props on the item
     wrapper (--banner-col-span / --banner-row-span, set from section settings).
     Dense packing is enabled only when a tall (2-row) banner exists so 1-row banners
     keep strict source-order sequencing (P1 -> banner -> P2). See
     blueprint/collection-template/PRIVATE_BANNER_BLOCK_IN_PRODUCT_LOOP_ANALYSIS.md §3.5. */
  .gyanpradip-collection-grid__item--banner {
    grid-column: span var(--banner-col-span, 2);
    grid-row: span var(--banner-row-span, 1);
    min-width: 0;
  }
  .gyanpradip-collection-grid--has-tall-banner {
    grid-auto-flow: row dense;
  }

  /* Mobile: banner is always a full-width single-row band (avoids overflow on 1-col). */
  @media (max-width: 767px) {
    .gyanpradip-collection-grid__item--banner {
      grid-column: 1 / -1;
      grid-row: auto;
    }
  }

  /* List view (layout switcher = 1 column): full width, single row regardless of span. */
  @media (min-width: 768px) {
    .grid-col-1 .gyanpradip-collection-grid__item--banner {
      grid-column: 1 / -1;
      grid-row: auto;
    }
  }

  /* ===== migrated from assets/gyanpradip-collection-page.css (section-shell portion) ===== */
@media screen and (max-width: 749px) {
  .collection .grid__item:only-child {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

@media screen and (max-width: 989px) {
  .collection .slider.slider--tablet {
    margin-bottom: 1.5rem;
  }
}

.collection .loading-overlay {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  width: 100%;
  padding: 0 1.5rem;
  opacity: 0.7;
}

@media screen and (min-width: 750px) {
  .collection .loading-overlay {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}

.collection.loading .loading-overlay {
  display: block;
}

.collection--empty .title-wrapper {
  margin-top: 10rem;
  margin-bottom: 15rem;
}

.gyanpradip-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 46rem;
  margin: 6rem auto 8rem;
  padding: 0 2rem;
}

.gyanpradip-empty-state__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 8rem;
  height: 8rem;
  margin-bottom: 2.4rem;
  border-radius: 50%;
  color: rgb(var(--color-foreground));
  background: rgba(var(--color-foreground), 0.06);
}

.gyanpradip-empty-state__icon svg {
  width: 3.6rem;
  height: 3.6rem;
}

.gyanpradip-empty-state__title {
  margin: 0 0 1rem;
  font-size: 2.6rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.gyanpradip-empty-state__text {
  margin: 0 0 2.8rem;
  font-size: 1.5rem;
  line-height: 1.5;
  color: rgba(var(--color-foreground), 0.7);
}

.gyanpradip-empty-state__link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.gyanpradip-empty-state__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 4.6rem;
  padding: 0 2.8rem;
  border-radius: var(--buttons-radius, 0.4rem);
  background: rgb(var(--color-button, var(--color-foreground)));
  color: rgb(var(--color-button-text, var(--color-background)));
  font-size: 1.5rem;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.gyanpradip-empty-state__button:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

@media screen and (max-width: 989px) {
  .collection .slider--tablet.product-grid {
    scroll-padding-left: 1.5rem;
  }
}

.collection__description > * {
  margin: 0;
}

.collection__title.title-wrapper {
  margin-bottom: 2.5rem;
}

.collection__title .title:not(:only-child) {
  margin-bottom: 1rem;
}

@media screen and (min-width: 990px) {
  .collection__title--desktop-slider .title {
    margin-bottom: 2.5rem;
  }

  .collection__title.title-wrapper--self-padded-tablet-down {
    padding: 0 5rem;
  }

  .collection slider-component:not(.page-width-desktop) {
    padding: 0;
  }

  .collection--full-width slider-component:not(.slider-component-desktop) {
    padding: 0 1.5rem;
    max-width: none;
  }
}

.collection__view-all a:not(.link) {
  margin-top: 1rem;
}
.collection.loading {
  position: relative;
}
.loading-overlay {
  position: absolute;
  z-index: 9;
  width: 1.8rem;
  background: var(--color-background);
}

@media screen and (max-width: 749px) {
  .loading-overlay {
    top: 0;
    right: 0;
  }
}

@media screen and (min-width: 750px) {
  .loading-overlay {
    left: 0;
  }
}

.loading-overlay__spinner {
  width: 1.8rem;
  display: inline-block;
}

.spinner {
  animation: rotator 1.4s linear infinite;
}

@keyframes rotator {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(270deg);
  }
}

.path {
  stroke-dasharray: 280;
  stroke-dashoffset: 0;
  transform-origin: center;
  stroke: var(--color-foreground);
  animation: dash 1.4s ease-in-out infinite;
}

@media screen and (forced-colors: active) {
  .path {
    stroke: CanvasText;
  }
}

@keyframes dash {
  0% {
    stroke-dashoffset: 280;
  }
  50% {
    stroke-dashoffset: 75;
    transform: rotate(135deg);
  }
  100% {
    stroke-dashoffset: 280;
    transform: rotate(450deg);
  }
}

.loading-overlay:not(.hidden) + .cart-item__price-wrapper,
.loading-overlay:not(.hidden) ~ cart-remove-button {
  opacity: 50%;
}

.loading-overlay:not(.hidden) ~ cart-remove-button {
  pointer-events: none;
  cursor: default;
}
/* END_SECTION:gyanpradip-main-collection */

/* START_SECTION:gyanpradip-product (INDEX:44) */
/* ── section-gyanpradip-product.css zones 1+2 — PDP base layout (migrated) ─ */

  :root {
    --media-shadow-vertical-offset: 4px;
    --media-shadow-visible: 0;
    --media-shadow-horizontal-offset: 0px;
    --media-border-width: 1px;
    --media-radius: 0px;
  }

  product-info {
    display: block;
  }

  .product {
    margin: 0;
  }

  .product.grid {
    gap: 0;
  }

  .product--no-media {
    max-width: 57rem;
    margin: 0 auto;
  }

  .product__media-wrapper {
    padding-left: 0;
  }

  @media screen and (min-width: 750px) {
    .product__column-sticky {
      display: block;
      position: sticky;
      top: 3rem;
      z-index: 2;
    }

    .product--thumbnail .thumbnail-list {
      padding-right: var(--media-shadow-horizontal-offset);
    }

    .product__info-wrapper {
      padding: 0 0 0 5rem;
    }

    .product__info-wrapper--extra-padding {
      padding: 0 0 0 8rem;
    }

    .product--right .product__info-wrapper {
      padding: 0 5rem 0 0;
    }

    .product--right .product__info-wrapper--extra-padding {
      padding: 0 8rem 0 0;
    }

    .product--right .product__media-list {
      margin-bottom: 2rem;
    }

    .product__media-container .slider-buttons {
      display: none;
    }

    .product--right .product__media-wrapper {
      order: 2;
    }
  }

  @media screen and (min-width: 990px) {
    .product--large:not(.product--no-media) .product__media-wrapper {
      max-width: 65%;
      width: calc(65% - var(--grid-gap-x) / 2);
    }

    .product--large:not(.product--no-media) .product__info-wrapper {
      padding: 0 0 0 4rem;
      max-width: 35%;
      width: calc(35% - var(--grid-gap-x) / 2);
    }

    .product--large:not(.product--no-media).product--right
      .product__info-wrapper {
      padding: 0 4rem 0 0;
    }

    .product--medium:not(.product--no-media) .product__media-wrapper,
    .product--small:not(.product--no-media) .product__info-wrapper {
      max-width: 55%;
      width: calc(55% - var(--grid-gap-x) / 2);
    }

    .product--medium:not(.product--no-media) .product__info-wrapper,
    .product--small:not(.product--no-media) .product__media-wrapper {
      max-width: 45%;
      width: calc(45% - var(--grid-gap-x) / 2);
    }
  }

  /* ── Section-level PDP overrides (higher specificity, .gyanpradip-product scoped) */
  /* Section padding — same mechanism as sections/product-tabs.liquid:
     desktop value + mobile scaled via --mobile-scale. */
  .gyanpradip-product {
    padding-block-start: var(--padding-block-start, 0);
    padding-block-end: var(--padding-block-end, 0);
  }
  @media screen and (max-width: 749px) {
    .gyanpradip-product {
      padding-block-start: calc(var(--padding-block-start, 0) * var(--mobile-scale, 1));
      padding-block-end: calc(var(--padding-block-end, 0) * var(--mobile-scale, 1));
    }
  }
  .gyanpradip-product .product {
    --grid-gap-y: 10px;
    --grid-gap-y-mobile: 10px;
    --grid-gap-x-mobile: 10px;
    --grid-gap-x: 10px;
  }
  /* Tablet (750–991px): fixed 2rem column gap.
     Two things must happen together:
       1. column-gap must be set explicitly — .product.grid{gap:0} in
          section-gyanpradip-product.css has specificity (0,2,0) and overrides
          .grid{column-gap:var(--grid-gap-x)} (0,1,0). Adding .gyanpradip-product
          raises us to (0,3,0) so our rule wins.
       2. --grid-gap-x must match — column widths use calc(N% - var(--grid-gap-x)/2),
          so the variable must equal the applied gap or columns overflow. */
  @media screen and (min-width: 750px) and (max-width: 991px) {
    .gyanpradip-product .product.grid {
      --grid-gap-x: 2rem;
      column-gap: 2rem;
    }
  }
  /* Desktop (>=992px): merchant-controlled gap. */
  @media screen and (min-width: 992px) {
    .gyanpradip-product .product.grid {
      --grid-gap-x: var(--pdp-column-gap, 4rem);
      column-gap: var(--pdp-column-gap, 4rem);
    }
  }

  /* Column spacing now comes from column-gap (A3); neutralize the legacy
     info-wrapper inline padding within THIS section only — featured-product
     still relies on the shared rules in section-gyanpradip-product.css. */
  @media screen and (min-width: 750px) {
    .gyanpradip-product .product__info-wrapper,
    .gyanpradip-product .product--right .product__info-wrapper {
      padding-inline: 0;
    }
  }

  /* Desktop ratios (A2): Small = media ~33% / details ~67% (overrides the
     shared 45/55). Medium 50/50 and Large 65/35 already correct upstream. */
  @media screen and (min-width: 990px) {
    .gyanpradip-product .product--small:not(.product--no-media) .product__media-wrapper {
      max-width: 35%;
      width: calc(35% - var(--grid-gap-x) / 2);
    }
    .gyanpradip-product .product--small:not(.product--no-media) .product__info-wrapper {
      max-width: 65%;
      width: calc(65% - var(--grid-gap-x) / 2);
    }
    .gyanpradip-product .product--large:not(.product--no-media) .product__info-wrapper {
      padding-inline: 0;
    }
  }

  /* Sticky columns are desktop-only (A4): disable on tablet for this section. */
  @media screen and (min-width: 750px) and (max-width: 991px) {
    .gyanpradip-product .product__column-sticky {
      position: static;
      top: auto;
    }
  }

  /* Main viewer (gallery) navigation — gallery DOM, static styling. */
  .product .main-viewer-navigation {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: 1rem;
    height: 100%;
    width: 100%;
  }
  .product .main-viewer-navigation.hidden { display: none; }
  .product .main-viewer-button {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    background: rgb(from var(--color-button) r g b / calc(var(--alpha-button-background) * 100%));
    color: var(--color-button-text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
    transition: opacity 0.3s ease;
    opacity: 0;
    z-index: 10;
  }
  .product .product__media-wrapper:hover .main-viewer-button { opacity: 1; }
  .product .main-viewer-button.main-viewer-button--prev { margin-inline-end: auto; }
  .product .main-viewer-button.main-viewer-button--next { margin-inline-start: auto; }
  .product .main-viewer-button svg { width: 1.5rem; height: 1.5rem; }
  @media screen and (max-width: 749px) {
    /* Convert from absolute overlay to static bar below the slider.
       Specificity (0,2,0) matches the desktop definition so this wins. */
    .product .main-viewer-navigation {
      position: static;
      inset: unset;
      height: auto;
      width: 100%;
      z-index: auto;
      pointer-events: auto;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 0.4rem;
      padding: 0.8rem 0.5rem;
    }
    /* Counter layout: arrows spread to edges, counter centred between */
    .product media-gallery[data-mobile-style="counter"] .main-viewer-navigation {
      justify-content: space-between;
      padding: 0.8rem 1rem;
    }
    /* Arrow buttons: smaller on touch devices */
    .product .product__media-wrapper .main-viewer-button {
      width: 3.5rem;
      height: 3.5rem;
    }
    .product .product__media-wrapper .main-viewer-button svg { width: 1.2rem; height: 1.2rem; }
    .d-md-none { display: initial; }
  }
  @media screen and (min-width: 750px) {
    .d-md-none { display: none; }
  }
/* END_SECTION:gyanpradip-product */

/* START_SECTION:logo-list (INDEX:49) */
/* sections/logo-list.liquid */

  .logo-list {
    padding-block-start: var(--padding-block-start, 4rem);
    padding-block-end: var(--padding-block-end, 4rem);
  }

  .logo-list__intro {
    margin-block-end: var(--logo-heading-gap, 2.4rem);
  }
  .logo-list__heading {
    margin: 0;
  }
  .logo-list__subtitle {
    margin: 0;
    margin-block-start: 0.8rem;
  }

  /* ── Grid layout ── */
  .logo-list--grid .logo-list__items {
    display: grid;
    grid-template-columns: repeat(var(--cols-desktop, 6), 1fr);
    gap: var(--logo-gap, 2.4rem);
    align-items: center;
    justify-items: center;
  }
  .logo-list--grid .logo-list__items > * {
    max-height: var(--logo-height, none);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  @media (max-width: 749px) {
    .logo-list--grid .logo-list__items {
      grid-template-columns: repeat(var(--cols-mobile, 2), 1fr);
    }

    /* Horizontal touch-scroll peek when stack_on_mobile is OFF */
    .logo-list--grid:not(.stack-on-mobile) .logo-list__items {
      display: flex;
      grid-template-columns: none;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      padding-inline: 1.6rem;
      gap: var(--logo-gap-mobile, 1.6rem);
    }
    .logo-list--grid:not(.stack-on-mobile) .logo-list__items::-webkit-scrollbar { display: none; }

    /* Per-option peek widths — divisor is a literal so CSS calc is valid */
    .logo-list--peek-2.logo-list--grid:not(.stack-on-mobile) .logo-list__items > * {
      flex: 0 0 calc((100% - 1 * var(--logo-gap-mobile, 1.6rem)) / 2);
      max-height: var(--logo-height, none);
      scroll-snap-align: start;
    }
    .logo-list--peek-2-5.logo-list--grid:not(.stack-on-mobile) .logo-list__items > * {
      flex: 0 0 calc((100% - 2 * var(--logo-gap-mobile, 1.6rem)) / 2.5);
      max-height: var(--logo-height, none);
      scroll-snap-align: start;
    }
    .logo-list--peek-3.logo-list--grid:not(.stack-on-mobile) .logo-list__items > * {
      flex: 0 0 calc((100% - 2 * var(--logo-gap-mobile, 1.6rem)) / 3);
      max-height: var(--logo-height, none);
      scroll-snap-align: start;
    }
    .logo-list--peek-3-5.logo-list--grid:not(.stack-on-mobile) .logo-list__items > * {
      flex: 0 0 calc((100% - 3 * var(--logo-gap-mobile, 1.6rem)) / 3.5);
      max-height: var(--logo-height, none);
      scroll-snap-align: start;
    }
    .logo-list--peek-4.logo-list--grid:not(.stack-on-mobile) .logo-list__items > * {
      flex: 0 0 calc((100% - 3 * var(--logo-gap-mobile, 1.6rem)) / 4);
      max-height: var(--logo-height, none);
      scroll-snap-align: start;
    }

    .logo-list {
      padding-block-start: calc(var(--padding-block-start, 4rem) * var(--padding-mobile-scale, 0.8));
      padding-block-end: calc(var(--padding-block-end, 4rem) * var(--padding-mobile-scale, 0.8));
    }
  }

  /* ── Slider layout ── */
  .logo-list--slider .logo-list__slider { display: block; }
  .logo-list--slider .swiper { overflow: hidden; width: 100%; min-width: 0; }
  .logo-list--slider .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--logo-height, auto);
    box-sizing: border-box;
  }

  /* ── Slider pre-init fallback (prevents layout jump before Swiper JS fires) ── */
  .logo-list__slider:not(.logo-list__slider--single) .swiper:not(.swiper-initialized) .swiper-wrapper {
    display: flex;
    flex-wrap: nowrap;
    box-sizing: border-box;
    gap: var(--logo-gap-fb-m, 0px);
  }
  .logo-list__slider:not(.logo-list__slider--single) .swiper:not(.swiper-initialized) .swiper-slide {
    flex-shrink: 0;
    width: var(--logo-fb-m);
    box-sizing: border-box;
  }
  @media (min-width: 750px) {
    .logo-list__slider:not(.logo-list__slider--single) .swiper:not(.swiper-initialized) .swiper-wrapper {
      gap: var(--logo-gap-fb-d, 0px);
    }
    .logo-list__slider:not(.logo-list__slider--single) .swiper:not(.swiper-initialized) .swiper-slide {
      width: var(--logo-fb-t);
    }
  }
  @media (min-width: 1100px) {
    .logo-list__slider:not(.logo-list__slider--single) .swiper:not(.swiper-initialized) .swiper-slide {
      width: var(--logo-fb-d);
    }
  }

  /* ── Nav buttons (scoped) ── */
  .logo-list .swiper-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.4rem;
    height: 4.4rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    border: 0;
    background: transparent;
    color: var(--color-foreground);
  }
  .logo-list .swiper-nav svg { width: 1.8rem; height: 1.8rem; }
  .logo-list .swiper-nav.swiper-button-prev::after,
  .logo-list .swiper-nav.swiper-button-next::after { display: none; }
  .logo-list .swiper-nav--bg-none { width: auto; height: auto; padding: 0.4rem; }
  .logo-list .swiper-nav--bg-circle { border-radius: 100%; }
  .logo-list .swiper-nav--bg-custom:not(.swiper-nav--bg-none) {
    border-radius: var(--logo-list-slider-nav-radius, 0px);
  }
  .logo-list .swiper-nav--solid:not(.swiper-nav--bg-none) {
    background: var(--color-foreground);
    color: var(--color-background);
  }
  .logo-list .swiper-nav--solid:not(.swiper-nav--bg-none):hover {
    background: rgb(from var(--color-foreground) r g b / 85%);
  }
  .logo-list .swiper-nav--outline:not(.swiper-nav--bg-none) {
    background: transparent;
    color: var(--color-foreground);
    border: 1px solid var(--color-foreground);
  }
  .logo-list .swiper-nav--outline:not(.swiper-nav--bg-none):hover {
    background: var(--color-foreground);
    color: var(--color-background);
  }
  .logo-list .swiper-nav:focus-visible:not(.swiper-button-disabled) {
    opacity: 1;
    outline: none;
    box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-foreground);
  }
  .logo-list .swiper-nav[disabled],
  .logo-list .swiper-nav.swiper-button-disabled {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
  }

  /* ── Pagination ── */
  .logo-list .logo-list__pagination.swiper-pagination {
    position: relative;
    left: auto; right: auto; bottom: auto; top: auto;
    width: 100%;
    margin-block-start: 2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.2rem;
  }
  .logo-list .logo-list__pagination--bottom-left  { justify-content: flex-start; }
  .logo-list .logo-list__pagination--bottom-center { justify-content: center; }
  .logo-list .logo-list__pagination--bottom-right  { justify-content: flex-end; }
  .logo-list .logo-list__pagination .swiper-pagination-bullet {
    cursor: pointer;
    margin: 0;
    opacity: 1;
    background: rgb(from var(--color-foreground) r g b / 25%);
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 100%;
    border: 0;
    transition: background 0.2s;
  }
  .logo-list .logo-list__pagination .swiper-pagination-bullet-active {
    background: var(--color-foreground);
  }
  .logo-list .logo-list__pagination .swiper-pagination-fraction {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.03em;
    color: rgb(from var(--color-foreground) r g b / 75%);
    font-size: 1.2rem;
  }
/* END_SECTION:logo-list */

/* START_SECTION:marquee (INDEX:50) */
/* sections/marquee.liquid — CSS-keyframe based scrolling marquee.
     Spec: blueprint/skill/HOMEPAGE_SECTIONS_PLAN.md §9
     Replaces legacy sections/scrolling-text.liquid (kept for templates that reference it). */

  .marquee {
    display: block;
    max-width: 100%;
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-block-start: var(--padding-block-start, 0);
    padding-block-end: var(--padding-block-end, 0);
  }

  /* Clip at the page-width band (section-container + modifier). The track is
     intentionally wider than this box (width: max-content + translate animation).
     Without overflow-x clip, document scrollWidth grows and a horizontal scrollbar appears. */
  .marquee__inner {
    overflow-x: clip;
    overflow-y: visible;
  }

  .marquee--vertical .marquee__inner {
    overflow-x: clip;
    overflow-y: hidden;
  }

  .marquee--tilted {
    /* Clipping is handled on .marquee__inner; host stays hidden so tilt does
       not reopen page-level horizontal scroll (MARQUEE_HORIZONTAL_OVERFLOW_FIX_PLAN §C2). */
    overflow: hidden;
  }
  .marquee--tilted .marquee__track {
    transform: rotate(var(--marquee-tilt, 0deg));
    transform-origin: center;
  }

  .marquee__track {
    display: flex;
    width: max-content;
    align-items: center;
    /* Animation duration is set via inline style from --marquee-duration */
    animation: marquee-scroll var(--marquee-duration, 30s) linear infinite;
    animation-direction: var(--marquee-direction, normal);
    animation-play-state: var(--marquee-play-state, running);
  }

  .marquee--paused-on-hover .marquee__track:hover {
    animation-play-state: paused;
  }

  @keyframes marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }

  /* When animation is reversed via --marquee-direction: reverse, the start translate is -50% and ends at 0 */

  /* Vertical variants — direction "up" and "down" rotate the track 90deg.
     Implementation note: vertical marquees need a fixed height container; here we use 320px default. */
  .marquee--vertical {
    width: var(--marquee-vertical-width, 100%);
    height: var(--marquee-vertical-height, 320px);
  }
  .marquee--vertical .marquee__track {
    flex-direction: column;
    width: 100%;
    height: max-content;
    animation-name: marquee-scroll-vertical;
  }
  @keyframes marquee-scroll-vertical {
    from { transform: translateY(0); }
    to   { transform: translateY(-50%); }
  }

  /* Reduced motion: disable the animation entirely */
  @media (prefers-reduced-motion: reduce) {
    .marquee__track {
      animation: none;
    }
  }

  @media (max-width: 749px) {
    .marquee {
      padding-block-start: calc(var(--padding-block-start, 0) * var(--padding-mobile-scale, 0.8));
      padding-block-end: calc(var(--padding-block-end, 0) * var(--padding-mobile-scale, 0.8));
    }
  }
/* END_SECTION:marquee */

/* START_SECTION:media-gallery (INDEX:51) */
/* sections/media-gallery.liquid
     Spec: blueprint/media-gallery/MEDIA_GALLERY_REBUILD_PLAN.md */

  .media-gallery {
    padding-block-start: var(--padding-block-start, 60px);
    padding-block-end: var(--padding-block-end, 60px);
  }

  @media (max-width: 749px) {
    .media-gallery {
      padding-block-start: calc(var(--padding-block-start, 60px) * var(--padding-mobile-scale, 0.8));
      padding-block-end: calc(var(--padding-block-end, 60px) * var(--padding-mobile-scale, 0.8));
    }
  }

  .media-gallery__top {
    margin-block-end: 2.4rem;
  }

  /* ==========================================================================
     GRID layout
     ========================================================================== */

  .media-gallery--grid .media-gallery__items {
    display: grid;
    grid-template-columns: repeat(var(--cols-desktop, 4), 1fr);
    gap: var(--mg-gap, 12px);
  }

  @media (max-width: 749px) {
    /* Stack disabled: horizontal flex scroll with snap */
    .media-gallery--grid:not(.stack-on-mobile) .media-gallery__items {
      display: flex;
      gap: 1.6rem;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      padding-inline: 1.6rem;
    }
    .media-gallery--grid:not(.stack-on-mobile) .media-gallery__items::-webkit-scrollbar { display: none; }
    .media-gallery--grid:not(.stack-on-mobile) .media-gallery__items > * {
      flex: 0 0 calc(100% - 4rem);
      scroll-snap-align: start;
      height: auto;
    }

    /* Stack enabled: vertical column */
    .media-gallery--grid.stack-on-mobile .media-gallery__items {
      display: flex;
      flex-direction: column;
      overflow: visible;
      scroll-snap-type: none;
      padding-inline: 0;
      gap: var(--mg-gap, 12px);
    }
    .media-gallery--grid.stack-on-mobile .media-gallery__items > * {
      flex: 1 1 auto;
      width: 100%;
    }
  }

  /* ==========================================================================
     SLIDER layout
     ========================================================================== */

  /* Override Swiper's height:100% — lets wrapper & slides size to aspect-ratio content */
  .media-gallery--slider .swiper-wrapper {
    height: auto;
  }
  .media-gallery--slider .swiper-slide {
    height: auto;
  }

  /* Slider element: block + full-width (custom elements default to inline) */
  .media-gallery--slider .media-gallery__slider {
    display: block;
    width: 100%;
    position: relative;
  }
  .media-gallery--slider .media-gallery__nav--overlay {
    position: absolute;
    inset-block-start: 0;
    inset-block-end: 0;
    inset-inline: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: 0.8rem;
    pointer-events: none;
    z-index: 2;
    box-sizing: border-box;
  }
  .media-gallery--slider .media-gallery__nav--overlay .swiper-nav {
    pointer-events: auto;
  }
  /* Restore flex positioning — Swiper's CSS sets position:absolute on nav buttons globally */
  .media-gallery--slider .media-gallery__nav--overlay .swiper-button-prev,
  .media-gallery--slider .media-gallery__nav--overlay .swiper-button-next {
    position: relative;
    top: auto; left: auto; right: auto; bottom: auto;
    margin-top: 0;
  }

  /* ── beside_heading: desktop ≥992px — overlay hidden; header nav visible ── */
  @media (min-width: 992px) {
    .media-gallery--slider:not(.media-gallery--nav-on-carousel) .media-gallery__nav--overlay {
      display: none !important;
    }
  }

  /* ── beside_heading: mobile <992px — hide header nav; overlay takes over ── */
  @media (max-width: 991px) {
    .media-gallery--slider .media-gallery-header__nav {
      display: none !important;
    }
  }

  /* ── beside_heading: mobile <992px — overlay default: off-edge ── */
  @media (max-width: 991px) {
    .media-gallery--slider {
      overflow-x: hidden;
    }
    @supports (overflow: clip) {
      .media-gallery--slider {
        overflow-x: clip;
      }
    }
    .media-gallery--slider:not(.media-gallery--nav-on-carousel) .media-gallery__nav--overlay .swiper-button-prev {
      transform: translateX(calc(-1 * (100% + 2rem)));
      opacity: 0;
      visibility: hidden;
      transition:
        transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.25s ease,
        visibility 0.2s,
        background 0.2s,
        color 0.2s,
        border-color 0.2s;
    }
    .media-gallery--slider:not(.media-gallery--nav-on-carousel) .media-gallery__nav--overlay .swiper-button-next {
      transform: translateX(calc(100% + 2rem));
      opacity: 0;
      visibility: hidden;
      transition:
        transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.25s ease,
        visibility 0.2s,
        background 0.2s,
        color 0.2s,
        border-color 0.2s;
    }
    /* Hover / focus-within reveal */
    .media-gallery--slider:not(.media-gallery--nav-on-carousel):hover .media-gallery__nav--overlay .swiper-button-prev,
    .media-gallery--slider:not(.media-gallery--nav-on-carousel):hover .media-gallery__nav--overlay .swiper-button-next,
    .media-gallery--slider:not(.media-gallery--nav-on-carousel):focus-within .media-gallery__nav--overlay .swiper-button-prev,
    .media-gallery--slider:not(.media-gallery--nav-on-carousel):focus-within .media-gallery__nav--overlay .swiper-button-next {
      transform: translateX(0);
      opacity: 1;
      visibility: visible;
    }
  }

  /* ── on_carousel: overflow clip + hover-reveal ── */
  .media-gallery--nav-on-carousel .media-gallery__slider {
    overflow-x: clip;
  }
  .media-gallery--nav-on-carousel .media-gallery__nav--overlay .swiper-button-prev {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-1.2rem);
    transition:
      transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.25s ease,
      visibility 0.2s,
      background 0.2s,
      color 0.2s,
      border-color 0.2s;
  }
  .media-gallery--nav-on-carousel .media-gallery__nav--overlay .swiper-button-next {
    opacity: 0;
    visibility: hidden;
    transform: translateX(1.2rem);
    transition:
      transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.25s ease,
      visibility 0.2s,
      background 0.2s,
      color 0.2s,
      border-color 0.2s;
  }
  .media-gallery--nav-on-carousel .media-gallery__slider:hover .media-gallery__nav--overlay .swiper-button-prev,
  .media-gallery--nav-on-carousel .media-gallery__slider:hover .media-gallery__nav--overlay .swiper-button-next,
  .media-gallery--nav-on-carousel .media-gallery__slider:focus-within .media-gallery__nav--overlay .swiper-button-prev,
  .media-gallery--nav-on-carousel .media-gallery__slider:focus-within .media-gallery__nav--overlay .swiper-button-next {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .media-gallery--slider .media-gallery__nav--overlay .swiper-button-prev,
    .media-gallery--slider .media-gallery__nav--overlay .swiper-button-next {
      transition-duration: 0.01ms;
      transform: none !important;
    }
  }

  /* ==========================================================================
     Swiper nav buttons (SLIDER_DEVELOPMENT_BLUEPRINT §3.3.1)
     ========================================================================== */

  .media-gallery .swiper-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    border: 0;
    background: transparent;
    color: var(--color-foreground);
  }
  .media-gallery .swiper-nav svg { width: 18px; height: 18px; }
  .media-gallery .swiper-nav.swiper-button-prev::after,
  .media-gallery .swiper-nav.swiper-button-next::after { display: none; }

  .media-gallery .swiper-nav--bg-none { width: auto; height: auto; padding: 4px; }
  .media-gallery .swiper-nav--bg-circle { border-radius: 100%; }
  .media-gallery .swiper-nav--bg-custom:not(.swiper-nav--bg-none) {
    border-radius: var(--media-gallery-slider-nav-radius, 0px);
  }
  .media-gallery .swiper-nav--bg-capsule:not(.swiper-nav--bg-none) {
    border-radius: var(--media-gallery-slider-nav-radius, 0px);
    width: auto;
    min-width: 5.6rem;
    padding-inline: 1.2rem;
  }
  .media-gallery .swiper-nav--solid:not(.swiper-nav--bg-none) {
    background: var(--color-primary-button-background);
    color: var(--color-primary-button-text);
    border-color: var(--color-primary-button-border);
  }
  .media-gallery .swiper-nav--solid:not(.swiper-nav--bg-none):hover {
    background: var(--color-primary-button-hover-background);
    color: var(--color-primary-button-hover-text);
    border-color: var(--color-primary-button-hover-border);
  }
  .media-gallery .swiper-nav--outline:not(.swiper-nav--bg-none) {
    background: var(--color-secondary-button-background);
    color: var(--color-secondary-button-text);
    border-width: var(--btn-border-width, 1px);
    border-style: solid;
    border-color: var(--color-secondary-button-border);
  }
  .media-gallery .swiper-nav--outline:not(.swiper-nav--bg-none):hover {
    background: var(--color-secondary-button-hover-background);
    color: var(--color-secondary-button-hover-text);
    border-color: var(--color-secondary-button-hover-border);
  }
  .media-gallery .swiper-nav[disabled] { opacity: 0.4; cursor: default; pointer-events: none; }

  /* ==========================================================================
     Swiper pre-init fallback (SLIDER_DEVELOPMENT_BLUEPRINT §3.8 Pattern A)
     Prevents layout jump before JS fires.
     ========================================================================== */

  .media-gallery--slider .swiper:not(.swiper-initialized) .swiper-wrapper {
    display: flex;
    flex-wrap: nowrap;
    box-sizing: border-box;
    gap: var(--mg-gap-m, 12px);
  }
  .media-gallery--slider .swiper:not(.swiper-initialized) .swiper-slide {
    flex-shrink: 0;
    width: var(--mg-fallback-w-mobile, calc((100% - 12px) / 1.2));
    box-sizing: border-box;
  }
  @media (min-width: 750px) {
    .media-gallery--slider .swiper:not(.swiper-initialized) .swiper-wrapper {
      gap: var(--mg-gap-d, 16px);
    }
    .media-gallery--slider .swiper:not(.swiper-initialized) .swiper-slide {
      width: var(--mg-fallback-w-tablet, calc((100% - 48px) / 4));
    }
  }
  @media (min-width: 1100px) {
    .media-gallery--slider .swiper:not(.swiper-initialized) .swiper-slide {
      width: var(--mg-fallback-w-desktop, calc((100% - 48px) / 4));
    }
  }

  /* ==========================================================================
     Pagination
     ========================================================================== */

  .media-gallery__pagination-row {
    width: 100%;
    display: flex;
    margin-block-start: 2.4rem;
    box-sizing: border-box;
  }
  .media-gallery__pagination-row--bottom-left   { justify-content: flex-start; }
  .media-gallery__pagination-row--bottom-center { justify-content: center; }
  .media-gallery__pagination-row--bottom-right  { justify-content: flex-end; }

  /* 3-class specificity beats Swiper's .swiper-pagination-bullets.swiper-pagination-horizontal */
  .media-gallery--slider .media-gallery__pagination.swiper-pagination {
    position: relative;
    inset: auto;
    left: auto; right: auto; bottom: auto; top: auto;
    width: fit-content;
    max-width: 100%;
    margin: 0;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.2rem;
    box-sizing: border-box;
    background: var(--color-background);
    border-radius: 0.8rem;
    padding: 1rem 2rem;
    box-shadow: 0 1px 4px rgb(0 0 0 / 8%);
  }
  .media-gallery__pagination .swiper-pagination-bullet {
    cursor: pointer;
    margin: 0;
    opacity: 1;
    background: rgb(from var(--color-foreground) r g b / 25%);
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 100%;
    border: 0;
    flex-shrink: 0;
    transition: background 0.2s;
  }
  .media-gallery__pagination .swiper-pagination-bullet-active {
    background: var(--color-foreground);
  }
  .media-gallery__pagination .swiper-pagination-fraction {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.03em;
    color: rgb(from var(--color-foreground) r g b / 75%);
    font-size: 1.2rem;
  }
/* END_SECTION:media-gallery */

/* START_SECTION:product-info-tabs (INDEX:56) */
/* Every tab block renders a [role="tab"] (moved into .product-content-tabs__tablist
     by gyanpradip-product-content-tabs.js) + [role="tabpanel"] pair. The
     product-assistance block is the only other possible child. Named grid areas (rather
     than a row span, which can't reliably reach across auto-generated implicit rows)
     place each one regardless of the merchant's block order: stacked with the
     assistance box last below 990px, beside the tabs (spanning both rows) at 990px+. */
  .product-content-tabs {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "tablist" "panel" "aside";
    align-items: start;
  }

  @media screen and (min-width: 990px) {
    .product-content-tabs {
      grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
      grid-template-rows: auto 1fr;
      grid-template-areas: "tablist aside" "panel aside";
      column-gap: 3rem;
    }

    /* Sticks within the "aside" grid area (spans tablist + panel rows), so once
       the panel's content is taller than the box it stays in view while scrolling
       and releases at the bottom of the panel — same offset as the theme's other
       sticky column (.product__column-sticky, see section-main-product.css). */
    .product-content-tabs > .product-assistance {
      margin-top: 0;
      position: sticky;
      top: 3rem;
    }
  }

  .product-content-tabs__tablist {
    grid-area: tablist;
    display: flex;
    gap: 2.4rem;
    border-bottom: 0.1rem solid rgb(from var(--color-foreground) r g b / 12%);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }

  .product-content-tabs > .product-assistance {
    grid-area: aside;
    margin-top: 3rem;
  }

  .product-content-tabs__tablist::-webkit-scrollbar {
    display: none;
  }

  .product-content-tabs__tab {
    appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 0.2rem solid transparent;
    padding: 1.2rem 0.2rem;
    margin-bottom: -0.1rem;
    font-size: 1.5rem;
    font-weight: 500;
    color: rgb(from var(--color-foreground) r g b / 60%);
    cursor: pointer;
    white-space: nowrap;
  }

  .product-content-tabs__tab[aria-selected="true"] {
    color: var(--product-content-tabs-active-color, var(--color-foreground));
    border-bottom-color: var(--product-content-tabs-active-color, var(--color-foreground));
  }

  .product-content-tabs__tab:focus-visible {
    outline: 0.2rem solid var(--product-content-tabs-active-color, var(--color-foreground));
    outline-offset: 0.2rem;
  }

  .product-content-tabs__panel {
    grid-area: panel;
    padding-top: 2rem;
  }

  .product-content-tabs__panel[hidden] {
    display: none;
  }
/* END_SECTION:product-info-tabs */

/* START_SECTION:product-recommendations (INDEX:57) */
/* sections/product-recommendations.liquid — module-card rebuild.
     Spec: blueprint/product-recommendation-section/PRODUCT_RECOMMENDATIONS_SECTION_REBUILD_PLAN.md
     Renders recommendations through the _product-card module (<gyanpradip-product-card>), fetched
     and injected by assets/product-recommendations-module.js. Slider delegated to <gyanpradip-slider>.
     Band/width system + heading parity copied from sections/product-tabs.liquid (§6A of the plan). */

  .product-recommendations-module {
    display: block;
    padding-block-start: var(--padding-block-start, 6rem);
    padding-block-end:   var(--padding-block-end, 6rem);
  }

  /* No recommendations / fetch error / non-product context — controller hides the whole section. */
  .product-recommendations-module.is-empty {
    display: none !important;
  }

  @media (max-width: 749px) {
    .product-recommendations-module {
      padding-block-start: calc(var(--padding-block-start, 6rem) * var(--mobile-scale, 0.8));
      padding-block-end:   calc(var(--padding-block-end, 6rem)   * var(--mobile-scale, 0.8));
    }
  }

  /* ── Width bands (§6A.2). .section--page-width / .section--full-width come from base.css;
     do NOT redefine them. Only the flush variant is section-scoped. ── */
  .product-recommendations-module__track-band {
    width: 100%;
    min-width: 0;
  }

  .product-recommendations-module__track-band--flush {
    padding-inline: 0;
    max-width: none;
  }

  /* Bands carry horizontal gutters + max-width only; vertical padding lives on the section. */
  .product-recommendations-module__track-band.section-container {
    padding-block: 0;
  }

  /* ── Intro band: heading/subheading (left) + beside-heading nav (right) ── */
  .product-recommendations-module__intro-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
    margin-block-end: var(--pr-heading-gap, 55px);
  }
  .product-recommendations-module__intro-band.section-container {
    padding-block: 0;
  }

  .product-recommendations-module__intro-text {
    flex: 1 1 auto;
    min-width: 0;
  }

  .product-recommendations-module__heading {
    margin: 0;
  }

  .product-recommendations-module__subtitle {
    margin: 0;
  }

  .product-recommendations-module__heading + .product-recommendations-module__subtitle {
    margin-block-start: 0.8rem;
  }

  .product-recommendations-module__heading-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
  }

  .product-recommendations-module__nav--header {
    display: flex;
    align-items: center;
    gap: 0.8rem;
  }

  /* Beside-heading nav is a desktop-only control. Below 992px it is hidden and the
     carousel-overlay tier takes over (parity with Product Tabs; matches the setting's
     "Below 992px, arrows sit on the sides" copy). */
  @media (max-width: 991px) {
    .product-recommendations-module__heading-actions {
      display: none;
    }
  }
  @media (max-width: 749px) {
    .product-recommendations-module__intro-band {
      display: block;
    }
  }

  /* ── Grid layout ── */
  .product-recommendations-module__grid {
    display: grid;
    grid-template-columns: repeat(var(--cols-mobile, 2), 1fr);
    gap: var(--rec-gap, 1.6rem);
  }
  @media (min-width: 750px) {
    .product-recommendations-module__grid {
      grid-template-columns: repeat(var(--cols-desktop, 4), 1fr);
    }
  }

  /* Even-bottom card alignment (Grid row layout → Align buttons) */
  .product-recommendations-module__grid > gyanpradip-product-card.product-card--align-row-actions {
    align-self: stretch;
    min-height: 0;
  }

  /* Horizontal scroll on mobile when "stack on mobile" is off */
  @media (max-width: 749px) {
    .product-recommendations-module__grid--hscroll-mobile {
      display: flex;
      grid-template-columns: none;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-padding-inline: var(--page-gutter, 1.5rem);
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .product-recommendations-module__grid--hscroll-mobile::-webkit-scrollbar {
      display: none;
    }
    .product-recommendations-module__grid--hscroll-mobile > * {
      flex: 0 0 calc((100% - var(--rec-gap, 1.2rem)) / 1.5);
      scroll-snap-align: start;
    }
  }

  /* ── Slider layout ── */
  .product-recommendations-module__slider {
    display: block;
  }

  .product-recommendations-module__swiper-pane {
    position: relative;
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }
  @supports (overflow: clip) {
    .product-recommendations-module__swiper-pane {
      overflow-x: clip;
    }
  }
  .product-recommendations-module__swiper-pane .swiper {
    width: 100%;
    min-width: 0;
  }

  /* Variant rings / swatch outlines extend past the clip box vertically — pad block only.
     Inline gap is owned by Swiper spaceBetween; never pad inline here. */
  .product-recommendations-module__swiper-pane .swiper-slide {
    box-sizing: border-box;
    padding-block: 0.6rem;
    padding-inline: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: auto;
  }
  .product-recommendations-module__swiper-pane .swiper-slide > gyanpradip-product-card {
    align-self: start;
    width: 100%;
  }
  .product-recommendations-module__swiper-pane .swiper-slide > gyanpradip-product-card.product-card--align-row-actions {
    align-self: stretch;
    flex: 1 1 auto;
    min-height: 0;
  }

  /* Pre-init slide widths — prevent layout jump before Swiper measures.
     Mirrors gyanpradip-slider breakpoints: mobile <750 / tablet 750–1099 / desktop ≥1100. */
  .product-recommendations-module__slider .swiper:not(.swiper-initialized) .swiper-wrapper {
    display: flex;
    flex-wrap: nowrap;
    box-sizing: border-box;
    gap: var(--pr-gap, 0px);
  }
  .product-recommendations-module__slider .swiper:not(.swiper-initialized) .swiper-slide {
    flex-shrink: 0;
    width: var(--pr-fallback-w-mobile);
    box-sizing: border-box;
  }
  @media (min-width: 750px) and (max-width: 1099px) {
    .product-recommendations-module__slider .swiper:not(.swiper-initialized) .swiper-slide {
      width: var(--pr-fallback-w-tablet);
    }
  }
  @media (min-width: 1100px) {
    .product-recommendations-module__slider .swiper:not(.swiper-initialized) .swiper-slide {
      width: var(--pr-fallback-w-desktop);
    }
  }

  /* ── Swiper nav skin (scoped) — neutralises Swiper bundle defaults.
     blueprint/skill/SLIDER_DEVELOPMENT_BLUEPRINT.md §3.3.1 ── */
  .product-recommendations-module .swiper-nav {
    /* Neutralise the swiper-bundle .swiper-button-prev/next defaults
       (position:absolute; top:50%; left/right:10px; margin-top; transform).
       Both placements lay the buttons out via flex — header row + overlay flex —
       so the buttons must be static flow items, never Swiper-positioned. */
    position: relative;
    inset: auto;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    inset-inline: auto;
    transform: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.4rem;
    height: 4.4rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s;
    border: 0;
    background: transparent;
    color: var(--color-foreground);
    box-sizing: border-box;
    flex: 0 0 auto;
    align-self: center;
    margin: 0;
    aspect-ratio: 1;
  }
  .product-recommendations-module .swiper-nav svg {
    width: 1.8rem;
    height: 1.8rem;
  }
  .product-recommendations-module .swiper-nav--bg-none {
    width: auto;
    height: auto;
    padding: 0.4rem;
    aspect-ratio: auto;
    max-width: none;
    max-height: none;
  }
  .product-recommendations-module .swiper-nav--bg-circle { border-radius: 100%; }
  .product-recommendations-module .swiper-nav--bg-square { border-radius: 0; }
  .product-recommendations-module .swiper-nav--bg-custom { border-radius: var(--pr-slider-nav-radius, 0); }
  .product-recommendations-module .swiper-nav--solid:not(.swiper-nav--bg-none) {
    background: var(--color-foreground);
    color: var(--color-background);
  }
  .product-recommendations-module .swiper-nav--solid:not(.swiper-nav--bg-none):hover {
    background: rgb(from var(--color-foreground) r g b / 85%);
  }
  .product-recommendations-module .swiper-nav--outline:not(.swiper-nav--bg-none) {
    background: transparent;
    color: var(--color-foreground);
    border: 0.1rem solid var(--color-foreground);
  }
  .product-recommendations-module .swiper-nav--outline:not(.swiper-nav--bg-none):hover {
    background: var(--color-foreground);
    color: var(--color-background);
  }
  /* Disabled wins over the overlay hover-reveal. The hover rule lights the overlay
     buttons to opacity:1 via a (0,6,0) selector; this restore ends in
     `.swiper-nav.swiper-button-disabled` under the same hovered ancestor chain ⇒ (0,7,0),
     so the end-of-track arrow stays dimmed even while the section is hovered. */
  .product-recommendations-module .swiper-nav[disabled],
  .product-recommendations-module .swiper-nav.swiper-button-disabled,
  .product-recommendations-module--nav-on-carousel.product-recommendations-module--slider:hover
    .product-recommendations-module__nav--overlay .swiper-nav[disabled],
  .product-recommendations-module--nav-on-carousel.product-recommendations-module--slider:hover
    .product-recommendations-module__nav--overlay .swiper-nav.swiper-button-disabled {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
  }
  .product-recommendations-module .swiper-nav.swiper-button-prev::after,
  .product-recommendations-module .swiper-nav.swiper-button-next::after {
    display: none;
  }
  .product-recommendations-module .swiper-nav:focus-visible:not(.swiper-button-disabled) {
    outline: none;
    box-shadow: 0 0 0 0.2rem var(--color-background), 0 0 0 0.4rem var(--color-foreground);
  }

  /* ── Overlay nav — left/right edges of the swiper pane, hover-revealed ── */
  .product-recommendations-module__nav--overlay {
    position: absolute;
    inset-block: 0;
    inset-inline: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: 0.8rem;
    pointer-events: none;
    z-index: 4;
    box-sizing: border-box;
  }
  .product-recommendations-module__nav--overlay .swiper-nav {
    pointer-events: auto;
  }

  /* Overlay buttons slide in from the pane edges — animate transform/opacity/visibility.
     (The header tier keeps the simpler base transition; it is never offset.) */
  .product-recommendations-module__nav--overlay .swiper-nav {
    transition:
      opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
      background 0.2s, color 0.2s, border-color 0.2s, visibility 0.2s;
    will-change: transform, opacity;
  }

  /* (A) On-cards (hover) — active at ALL widths once placement = on_carousel.
     Resting: offset off the left/right edge, hidden. Reveal on SECTION hover/focus. */
  .product-recommendations-module--nav-on-carousel.product-recommendations-module--slider
    .product-recommendations-module__nav--overlay .swiper-button-prev {
    transform: translateX(calc(-1 * (100% + 2rem)));
    opacity: 0;
    visibility: hidden;
  }
  .product-recommendations-module--nav-on-carousel.product-recommendations-module--slider
    .product-recommendations-module__nav--overlay .swiper-button-next {
    transform: translateX(calc(100% + 2rem));
    opacity: 0;
    visibility: hidden;
  }
  .product-recommendations-module--nav-on-carousel.product-recommendations-module--slider:hover
    .product-recommendations-module__nav--overlay .swiper-button-prev,
  .product-recommendations-module--nav-on-carousel.product-recommendations-module--slider:hover
    .product-recommendations-module__nav--overlay .swiper-button-next,
  .product-recommendations-module--nav-on-carousel.product-recommendations-module--slider:focus-within
    .product-recommendations-module__nav--overlay .swiper-button-prev,
  .product-recommendations-module--nav-on-carousel.product-recommendations-module--slider:focus-within
    .product-recommendations-module__nav--overlay .swiper-button-next {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
  }

  /* (B) Beside-heading MOBILE fallback (<992px) — same slide behavior for ANY placement,
     because the header tier is hidden here and the overlay takes over. */
  @media (max-width: 991px) {
    .product-recommendations-module--slider
      .product-recommendations-module__nav--overlay .swiper-button-prev {
      transform: translateX(calc(-1 * (100% + 2rem)));
      opacity: 0;
      visibility: hidden;
    }
    .product-recommendations-module--slider
      .product-recommendations-module__nav--overlay .swiper-button-next {
      transform: translateX(calc(100% + 2rem));
      opacity: 0;
      visibility: hidden;
    }
    .product-recommendations-module--slider:hover
      .product-recommendations-module__nav--overlay .swiper-button-prev,
    .product-recommendations-module--slider:hover
      .product-recommendations-module__nav--overlay .swiper-button-next,
    .product-recommendations-module--slider:focus-within
      .product-recommendations-module__nav--overlay .swiper-button-prev,
    .product-recommendations-module--slider:focus-within
      .product-recommendations-module__nav--overlay .swiper-button-next {
      transform: translateX(0);
      opacity: 1;
      visibility: visible;
    }

    /* Disabled wins over the mobile (beside-heading) hover-reveal. The reveal above
       targets `.swiper-button-prev/next` ⇒ (0,4,0); this restore ends in
       `.swiper-nav.swiper-button-disabled` under `--slider:hover/:focus-within` ⇒ (0,5,0),
       so an end-of-track arrow stays dimmed on hover even without `--nav-on-carousel`. */
    .product-recommendations-module--slider:hover
      .product-recommendations-module__nav--overlay .swiper-nav[disabled],
    .product-recommendations-module--slider:hover
      .product-recommendations-module__nav--overlay .swiper-nav.swiper-button-disabled,
    .product-recommendations-module--slider:focus-within
      .product-recommendations-module__nav--overlay .swiper-nav[disabled],
    .product-recommendations-module--slider:focus-within
      .product-recommendations-module__nav--overlay .swiper-nav.swiper-button-disabled {
      opacity: 0.5;
      cursor: default;
      pointer-events: none;
    }

    /* Clip the off-edge buttons at the section box once the header tier is gone,
       so the resting offset never widens the page. */
    .product-recommendations-module--slider {
      overflow-x: hidden;
    }
    @supports (overflow: clip) {
      .product-recommendations-module--slider {
        overflow-x: clip;
      }
    }
  }

  /* Reduced motion: keep the fade, drop the slide. */
  @media (prefers-reduced-motion: reduce) {
    .product-recommendations-module--slider
      .product-recommendations-module__nav--overlay .swiper-nav {
      transition-duration: 0.01ms;
    }
    .product-recommendations-module--nav-on-carousel.product-recommendations-module--slider
      .product-recommendations-module__nav--overlay .swiper-button-prev,
    .product-recommendations-module--nav-on-carousel.product-recommendations-module--slider
      .product-recommendations-module__nav--overlay .swiper-button-next {
      transform: none !important;
    }
    @media (max-width: 991px) {
      .product-recommendations-module--slider
        .product-recommendations-module__nav--overlay .swiper-button-prev,
      .product-recommendations-module--slider
        .product-recommendations-module__nav--overlay .swiper-button-next {
        transform: none !important;
      }
    }
  }

  /* On desktop (>=992px) the overlay is the nav ONLY when placement is "on carousel".
     For "beside heading" the header tier owns desktop, so the overlay is suppressed there
     and only re-appears below 992px (handled by it simply not being display:none). */
  @media (min-width: 992px) {
    .product-recommendations-module--slider:not(.product-recommendations-module--nav-on-carousel)
      .product-recommendations-module__nav--overlay {
      display: none !important;
    }
  }

  /* ── Pagination — single .swiper-pagination element IS the full-width flex row;
     the position modifier sets justify-content directly on it (parity with Product Tabs).
     A wrapper row with width:auto inner relied on shrink-to-fit, which Swiper's bundled
     `.swiper-pagination { width: 100% }` base style overrode → bullets collapsed left. ── */
  .product-recommendations-module__pagination.swiper-pagination {
    position: relative;
    inset: auto;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    max-width: 100%;
    margin-block-start: 2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.2rem;
  }
  .product-recommendations-module__pagination--bottom-left   { justify-content: flex-start; }
  .product-recommendations-module__pagination--bottom-center { justify-content: center; }
  .product-recommendations-module__pagination--bottom-right  { justify-content: flex-end; }
  .product-recommendations-module__pagination .swiper-pagination-bullet {
    cursor: pointer;
    margin: 0;
    opacity: 1;
    background: rgb(from var(--color-foreground) r g b / 25%);
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 100%;
    border: 0;
    transition: background 0.2s;
  }
  .product-recommendations-module__pagination .swiper-pagination-bullet-active {
    background: var(--color-foreground);
  }
  .product-recommendations-module__pagination .swiper-pagination-bullet.swiper-pagination-bullet--number {
    box-sizing: border-box;
    width: auto;
    height: auto;
    min-width: 2.4rem;
    min-height: 2.4rem;
    margin: 0;
    padding: 0 0.6rem;
    background: transparent;
    border-radius: 100%;
    color: rgb(from var(--color-foreground) r g b / 50%);
    font-size: 1.2rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: color 0.2s;
  }
  .product-recommendations-module__pagination .swiper-pagination-bullet.swiper-pagination-bullet--number.swiper-pagination-bullet-active {
    color: var(--color-foreground);
    background: transparent;
  }
  .product-recommendations-module__pagination .swiper-pagination-fraction {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.03em;
    color: rgb(from var(--color-foreground) r g b / 75%);
    font-size: 1.2rem;
  }

  /* ── Skeleton placeholders (pre-fetch) ── */
  .product-recommendations-module__skeleton {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .product-recommendations-module__skeleton-media {
    aspect-ratio: 1;
    background: rgb(from var(--color-foreground) r g b / 8%);
    border-radius: 0.4rem;
    animation: product-rec-module-pulse 1.5s ease-in-out infinite;
  }
  .product-recommendations-module__skeleton-title {
    height: 1.4rem;
    background: rgb(from var(--color-foreground) r g b / 6%);
    border-radius: 0.2rem;
    animation: product-rec-module-pulse 1.5s ease-in-out infinite 0.2s;
  }
  .product-recommendations-module__skeleton-price {
    height: 1.2rem;
    width: 50%;
    background: rgb(from var(--color-foreground) r g b / 5%);
    border-radius: 0.2rem;
    animation: product-rec-module-pulse 1.5s ease-in-out infinite 0.4s;
  }

  /* Slider skeleton — single non-wrapping row, widths matched to the pre-init slider
     (--pr-fallback-w-* + --pr-gap). The .__swiper-pane wrapper clips overflow so only the
     visible slides show, exactly like the initialized slider. */
  .product-recommendations-module__skeleton-track {
    display: flex;
    flex-wrap: nowrap;
    box-sizing: border-box;
    gap: var(--pr-gap, 0px);
  }
  .product-recommendations-module__skeleton-track > .product-recommendations-module__skeleton {
    flex-shrink: 0;
    width: var(--pr-fallback-w-mobile);
    box-sizing: border-box;
  }
  @media (min-width: 750px) and (max-width: 1099px) {
    .product-recommendations-module__skeleton-track > .product-recommendations-module__skeleton {
      width: var(--pr-fallback-w-tablet);
    }
  }
  @media (min-width: 1100px) {
    .product-recommendations-module__skeleton-track > .product-recommendations-module__skeleton {
      width: var(--pr-fallback-w-desktop);
    }
  }

  @keyframes product-rec-module-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
  }
/* END_SECTION:product-recommendations */

/* START_SECTION:product-tabs (INDEX:58) */
/* sections/product-tabs.liquid — Phase 4 rebuild + width bands.
     Spec: blueprint/sections/PRODUCT_TABS_IMPLEMENTATION_PLAN.md,
           blueprint/sections/PRODUCT_TABS_SECTION_DESIGN_POLISH_PLAN.md
     Intro band + flush track parity: sections/collection-list.liquid */

  .product-tabs {
    padding-block-start: var(--padding-block-start, 6rem);
    padding-block-end:   var(--padding-block-end, 6rem);
  }

  /* Heading + tabs row: gutter aligns with theme container (collection-list intro pattern). */
  .product-tabs .product-tabs__intro-band {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.2rem;
    width: 100%;
    box-sizing: border-box;
    padding-inline-start: var(--padding-inline-start, var(--container-padding-inline, 1.5rem));
    padding-inline-end: var(--padding-inline-end, var(--container-padding-inline, 1.5rem));
    margin-block-end: var(--product-tabs-heading-gap, 55px);
  }
  @media (max-width: 749px) {
    .product-tabs .product-tabs__intro-band {
      padding-inline-start: calc(var(--padding-inline-start, 1.5rem) * var(--padding-mobile-scale, 1));
      padding-inline-end: calc(var(--padding-inline-end, 1.5rem) * var(--padding-mobile-scale, 1));
    }
  }

  .product-tabs .product-tabs__intro-text .product-tabs__heading {
    margin: 0;
  }

  .product-tabs__subtitle {
    margin: 0;
  }

  .product-tabs .product-tabs__intro-text .product-tabs__heading + .product-tabs__subtitle {
    margin-block-start: 0.8rem;
  }

  .product-tabs .product-tabs__track-band.section-container {
    padding-block-start: 0;
    padding-block-end: 0;
  }

  .product-tabs__track-band {
    width: 100%;
    min-width: 0;
  }

  .product-tabs__track-band--flush {
    padding-inline: 0;
    max-width: none;
  }

  /* Header row: tablist (left) + optional View all link (right) */
  .product-tabs__header {
    display: flex; align-items: center;
    gap: 2.4rem;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
  }
  .product-tabs__header--with-link { justify-content: space-between; }

  .product-tabs__tablist { display: flex; flex-wrap: wrap; gap: 2.4rem; }
  .product-tabs__header:not(.product-tabs__header--with-link) .product-tabs__tablist--center { margin-inline: auto; }
  .product-tabs__header:not(.product-tabs__header--with-link) .product-tabs__tablist--right  { margin-inline-start: auto; }

  .product-tabs__tab {
    appearance: none;
    background: transparent;
    border: 0;
    /* Thin underline, minimal gap below label (reference: tight text-to-rule spacing) */
    border-block-end: 0.1rem solid transparent;
    margin-block-end: -0.1rem;
    color: rgb(from var(--color-foreground) r g b / 55%);
    cursor: pointer;
    padding: 0.6rem 0 0.2rem;
    font: inherit;
    font-weight: 500;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: color 0.2s, border-color 0.2s;
    position: relative;
  }
  .product-tabs__tab:hover {
    color: var(--color-foreground);
  }
  .product-tabs__tab[aria-selected="true"] {
    color: var(--color-foreground);
    border-block-end-color: var(--color-foreground);
  }
  .product-tabs__tab:focus-visible {
    outline: 0.2rem solid var(--color-foreground);
    outline-offset: 0.4rem;
  }

  /* Legacy text link (anchor only) — CTA buttons use .button; do not style wrapper divs. */
  a.product-tabs__view-all {
    display: inline-flex; align-items: center; gap: 0.6rem;
    padding: 1rem 1.6rem;
    border: 0.1rem solid var(--color-foreground);
    color: var(--color-foreground);
    text-decoration: none;
    font-size: 0.85em; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.05em;
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
  }
  a.product-tabs__view-all:hover {
    background: var(--color-foreground);
    color: var(--color-background);
  }
  a.product-tabs__view-all svg { width: 1.4rem; height: 1.4rem; }

  .product-tabs__panel[hidden] { display: none; }

  /* Grid layout */
  .product-tabs__grid {
    display: grid;
    grid-template-columns: repeat(var(--cols-desktop, 4), 1fr);
    gap: var(--gap-desktop, 1.6rem);
  }

  /* Grid footer alignment (_product-card → Even bottom): stretch cards to row track height */
  .product-tabs__grid > gyanpradip-product-card.product-card--align-row-actions {
    align-self: stretch;
    min-height: 0;
  }

  @media (max-width: 1099px) {
    .product-tabs__grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (max-width: 749px) {
    .product-tabs__grid {
      grid-template-columns: repeat(var(--cols-mobile, 2), 1fr);
      gap: var(--gap-mobile, 1.2rem);
    }
  }

  /* Horizontal-scroll on mobile (when stack_on_mobile is off) */
  @media (max-width: 749px) {
    .product-tabs__grid--hscroll-mobile {
      display: flex;
      grid-template-columns: none;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-padding-inline: var(--page-gutter, var(--container-padding-inline-mobile, 1.5rem));
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .product-tabs__grid--hscroll-mobile::-webkit-scrollbar { display: none; }
    .product-tabs__grid--hscroll-mobile > * {
      flex: 0 0 calc((100% - var(--gap-mobile, 1.2rem)) / 1.5);
      scroll-snap-align: start;
    }
  }

  /* Slider layout — relative wrapper so the absolute nav buttons can position. */
  .product-tabs__slider { position: relative; display: block; }

  /* Empty-state message (only rendered when collections array is empty AND
     placeholder branch is somehow disabled — shouldn't occur in practice). */
  .product-tabs__empty {
    text-align: center;
    color: rgb(from var(--color-foreground) r g b / 60%);
    padding: 4.8rem 1.6rem;
  }

  /* Mobile padding scale */
  @media (max-width: 749px) {
    .product-tabs {
      padding-block-start: calc(var(--padding-block-start, 6rem) * var(--mobile-scale, 0.8));
      padding-block-end:   calc(var(--padding-block-end, 6rem)   * var(--mobile-scale, 0.8));
    }
  }

  /* ───────────────────── Slider nav + pagination (scoped to Product Tabs only)
     Matches sections/collection-list.liquid nav parity + neutralizes Swiper bundle
     defaults (non-square .swiper-button-* sizing, absolute positioning leftovers).
     blueprint/skill/SLIDER_DEVELOPMENT_BLUEPRINT.md §3.3.1 */
  .product-tabs .swiper-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.4rem;
    height: 4.4rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    border: 0;
    background: transparent;
    color: var(--color-foreground);
    box-sizing: border-box;
    flex: 0 0 auto;
    align-self: center;
    margin: 0;
    aspect-ratio: 1;
  }
  .product-tabs .swiper-nav svg {
    width: 1.8rem;
    height: 1.8rem;
  }
  .product-tabs .swiper-nav--bg-none {
    width: auto;
    height: auto;
    padding: 0.4rem;
    aspect-ratio: auto;
    max-width: none;
    max-height: none;
  }
  .product-tabs .swiper-nav--bg-circle {
    border-radius: 100%;
  }
  .product-tabs .swiper-nav--bg-square {
    border-radius: 0;
  }
  .product-tabs .swiper-nav--solid:not(.swiper-nav--bg-none) {
    background: var(--color-foreground);
    color: var(--color-background);
  }
  .product-tabs .swiper-nav--solid:not(.swiper-nav--bg-none):hover {
    background: rgb(from var(--color-foreground) r g b / 85%);
  }
  .product-tabs .swiper-nav--outline:not(.swiper-nav--bg-none) {
    background: transparent;
    color: var(--color-foreground);
    border: 0.1rem solid var(--color-foreground);
  }
  .product-tabs .swiper-nav--outline:not(.swiper-nav--bg-none):hover {
    background: var(--color-foreground);
    color: var(--color-background);
  }
  .product-tabs .swiper-nav[disabled] {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
  }

  .swiper-pagination-bullet--number {
    width: auto; height: auto; min-width: 2.4rem; min-height: 2.4rem;
    padding: 0 0.6rem;
    background: transparent;
    color: var(--color-foreground);
    opacity: 0.5;
    font-size: 1.2rem; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 100%;
  }
  .swiper-pagination-bullet--number.swiper-pagination-bullet-active {
    opacity: 1;
    background: rgb(from var(--color-foreground) r g b / 10%);
  }

  /* ── Slider parity with Collection list (dual-tier nav + pagination outside swiper) ── */
  .product-tabs .product-tabs__carousel-shell {
    width: 100%;
    min-width: 0;
  }

  .product-tabs .product-tabs__intro-band > .product-tabs__shell-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .product-tabs .product-tabs__header--slider {
    flex: 1;
    min-width: 0;
    margin: 0;
  }

  .product-tabs .product-tabs__heading-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.6rem;
    flex-shrink: 0;
  }

  .product-tabs .product-tabs__view-all--inline {
    display: flex;
    align-items: center;
    margin: 0;
  }

  /**
   * View all wrappers: when [hidden] (per-tab overflow), keep a stable block-size so the
   * shell-intro row does not jump. UA [hidden] is display:none — override with flex only where
   * we still show this column. Slider + inline: desktop only (mobile hides inline CTA entirely).
   */
  .product-tabs [data-product-tabs-view-all-wrap] {
    box-sizing: border-box;
    min-width: 0;
  }

  .product-tabs [data-product-tabs-view-all-wrap][hidden] {
    visibility: hidden;
    pointer-events: none;
    border: none;
    margin: 0;
    padding: 0;
    min-height: max(var(--product-tabs-view-all-slot-min-height, 4.2rem), 4.4rem);
  }

  @media (min-width: 750px) {
    .product-tabs [data-product-tabs-view-all-wrap][hidden] {
      min-height: var(--product-tabs-view-all-slot-min-height, 4.2rem);
    }
  }

  /* Grid inline + bottom: reserve slot at all breakpoints where this DOM exists. */
  .product-tabs:not(.product-tabs--slider) .product-tabs__view-all--inline[data-product-tabs-view-all-wrap][hidden],
  .product-tabs .product-tabs__view-all--bottom[data-product-tabs-view-all-wrap][hidden] {
    display: flex !important;
    align-items: center;
    overflow: hidden;
  }

  .product-tabs:not(.product-tabs--slider) .product-tabs__view-all--inline[data-product-tabs-view-all-wrap][hidden] {
    justify-content: flex-end;
    width: 0;
  }

  .product-tabs .product-tabs__view-all--bottom[data-product-tabs-view-all-wrap][hidden] {
    justify-content: center;
    width: 100%;
  }

  @media (min-width: 992px) {
    .product-tabs.product-tabs--slider .product-tabs__view-all--inline[data-product-tabs-view-all-wrap][hidden] {
      display: flex !important;
      align-items: center;
      justify-content: flex-end;
      width: 0;
      overflow: hidden;
    }
  }

  /* Mobile/tablet: bottom row is the only visible CTA (Collection list parity). */
  @media (max-width: 991px) {
    .product-tabs.product-tabs--slider .product-tabs__view-all--inline,
    .product-tabs:not(.product-tabs--slider) .product-tabs__view-all--inline {
      display: none !important;
    }
  }

  .product-tabs .product-tabs__nav {
    display: flex;
    gap: 0.8rem;
    flex-shrink: 0;
    align-items: center;
  }

  .product-tabs .product-tabs__nav:not(.product-tabs__nav--overlay) .swiper-nav {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    inset-inline: auto;
    transform: none;
    width: 4.4rem;
    height: 4.4rem;
    min-width: 4.4rem;
    min-height: 4.4rem;
    max-width: 4.4rem;
    max-height: 4.4rem;
    box-sizing: border-box;
    flex: 0 0 auto;
    align-self: center;
    margin: 0;
    aspect-ratio: 1;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition:
      opacity 0.25s ease,
      transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
      background 0.2s,
      color 0.2s,
      border-color 0.2s,
      visibility 0.2s;
    border: 0;
    background: transparent;
    color: var(--color-foreground);
    will-change: transform, opacity;
  }

  .product-tabs .product-tabs__nav--overlay .swiper-nav {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    inset-inline: auto;
    width: 4.4rem;
    height: 4.4rem;
    min-width: 4.4rem;
    min-height: 4.4rem;
    max-width: 4.4rem;
    max-height: 4.4rem;
    box-sizing: border-box;
    flex: 0 0 auto;
    align-self: center;
    margin: 0;
    aspect-ratio: 1;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition:
      opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
      background 0.2s,
      color 0.2s,
      border-color 0.2s,
      visibility 0.2s;
    border: 0;
    background: transparent;
    color: var(--color-foreground);
    will-change: transform, opacity;
  }

  /* Icon-only tier — undo fixed 44×44 chrome from overlay/header rows */
  .product-tabs .product-tabs__nav .swiper-nav.swiper-nav--bg-none {
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    max-width: none;
    max-height: none;
    aspect-ratio: auto;
    padding: 0.4rem;
  }

  .product-tabs .product-tabs__nav .swiper-nav--bg-square {
    border-radius: 0;
  }

  .product-tabs .product-tabs__nav .swiper-nav--bg-circle {
    border-radius: 100%;
  }

  .product-tabs .product-tabs__nav .swiper-nav--bg-custom {
    border-radius: var(--product-tabs-slider-nav-radius, 0);
  }

  .product-tabs .product-tabs__nav .swiper-nav.swiper-nav--solid:not(.swiper-nav--bg-none) {
    background: var(--color-foreground);
    color: var(--color-background);
  }

  .product-tabs .product-tabs__nav .swiper-nav.swiper-nav--solid:not(.swiper-nav--bg-none):hover {
    background: rgb(from var(--color-foreground) r g b / 85%);
  }

  .product-tabs .product-tabs__nav .swiper-nav.swiper-nav--outline:not(.swiper-nav--bg-none) {
    background: transparent;
    color: var(--color-foreground);
    border: 0.1rem solid var(--color-foreground);
  }

  .product-tabs .product-tabs__nav .swiper-nav.swiper-nav--outline:not(.swiper-nav--bg-none):hover {
    background: var(--color-foreground);
    color: var(--color-background);
  }

  .product-tabs .product-tabs__nav .swiper-nav.swiper-button-prev::after,
  .product-tabs .product-tabs__nav .swiper-nav.swiper-button-next::after {
    display: none;
  }

  .product-tabs .product-tabs__nav .swiper-nav:focus-visible:not(.swiper-button-disabled) {
    opacity: 1;
    outline: none;
    box-shadow: 0 0 0 0.2rem var(--color-background), 0 0 0 0.4rem var(--color-foreground);
  }

  .product-tabs .product-tabs__nav .swiper-nav[disabled],
  .product-tabs .product-tabs__nav .swiper-nav.swiper-button-disabled, .product-tabs.product-tabs--nav-on-carousel.product-tabs--slider:hover .product-tabs__nav .swiper-nav[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }

  .product-tabs .product-tabs__nav .swiper-nav svg {
    width: 1.8rem;
    height: 1.8rem;
  }

  .product-tabs--slider .product-tabs__swiper-pane {
    position: relative;
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  @supports (overflow: clip) {
    .product-tabs--slider .product-tabs__swiper-pane {
      overflow-x: clip;
    }
  }

  .product-tabs__nav--overlay {
    pointer-events: none;
    justify-content: space-between;
    position: absolute;
    inset-inline: 0;
    inset-block-start: 0;
    inset-block-end: 0;
    align-items: center;
    padding-inline: 0.8rem;
    z-index: 2;
    box-sizing: border-box;
  }

  .product-tabs__nav--overlay .swiper-nav {
    pointer-events: auto;
  }

  @media (min-width: 992px) {
    .product-tabs--slider:not(.product-tabs--nav-on-carousel) .product-tabs__nav--overlay {
      display: none !important;
    }
  }

  @media (max-width: 991px) {
    .product-tabs--slider .product-tabs__nav--header {
      display: none !important;
    }

    .product-tabs.product-tabs--slider {
      overflow-x: hidden;
    }

    @supports (overflow: clip) {
      .product-tabs.product-tabs--slider {
        overflow-x: clip;
      }
    }
  }

  @media (max-width: 991px) {
    .product-tabs--slider .product-tabs__nav--overlay .swiper-button-prev {
      transform: translateX(calc(-1 * (100% + 2rem)));
      opacity: 0;
      visibility: hidden;
    }

    .product-tabs--slider .product-tabs__nav--overlay .swiper-button-next {
      transform: translateX(calc(100% + 2rem));
      opacity: 0;
      visibility: hidden;
    }

    .product-tabs.product-tabs--slider:hover .product-tabs__nav--overlay .swiper-button-prev,
    .product-tabs.product-tabs--slider:hover .product-tabs__nav--overlay .swiper-button-next,
    .product-tabs.product-tabs--slider:focus-within .product-tabs__nav--overlay .swiper-button-prev,
    .product-tabs.product-tabs--slider:focus-within .product-tabs__nav--overlay .swiper-button-next {
      transform: translateX(0);
      opacity: 1;
      visibility: visible;
    }
  }

  .product-tabs--nav-on-carousel.product-tabs--slider .product-tabs__nav--overlay .swiper-button-prev {
    transform: translateX(calc(-1 * (100% + 2rem)));
    opacity: 0;
    visibility: hidden;
  }

  .product-tabs--nav-on-carousel.product-tabs--slider .product-tabs__nav--overlay .swiper-button-next {
    transform: translateX(calc(100% + 2rem));
    opacity: 0;
    visibility: hidden;
  }

  .product-tabs.product-tabs--nav-on-carousel.product-tabs--slider:hover
    .product-tabs__nav--overlay
    .swiper-button-prev,
  .product-tabs.product-tabs--nav-on-carousel.product-tabs--slider:hover
    .product-tabs__nav--overlay
    .swiper-button-next,
  .product-tabs.product-tabs--nav-on-carousel.product-tabs--slider:focus-within
    .product-tabs__nav--overlay
    .swiper-button-prev,
  .product-tabs.product-tabs--nav-on-carousel.product-tabs--slider:focus-within
    .product-tabs__nav--overlay
    .swiper-button-next {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
  }

  @media (prefers-reduced-motion: reduce) {
    .product-tabs--slider .product-tabs__nav .swiper-nav {
      transition-duration: 0.01ms;
    }

    @media (max-width: 991px) {
      .product-tabs--slider .product-tabs__nav--overlay .swiper-button-prev,
      .product-tabs--slider .product-tabs__nav--overlay .swiper-button-next {
        transform: none !important;
      }
    }

    .product-tabs--nav-on-carousel.product-tabs--slider .product-tabs__nav--overlay .swiper-button-prev,
    .product-tabs--nav-on-carousel.product-tabs--slider .product-tabs__nav--overlay .swiper-button-next {
      transform: none !important;
    }
  }

  .product-tabs__slider-host .swiper {
    overflow: hidden;
    width: 100%;
    min-width: 0;
  }

  /*
    Pre-init slide widths — prevents layout jump before Swiper JS calculates widths.
    Mirrors breakpoints in assets/product-tabs-slider.js:
    mobile <750px / tablet 750–1099px / desktop ≥1100px.
    Variables (--pt-fallback-w-*, --pt-gap) set on <section> via Liquid.
    See blueprint/slider-fallback/PRODUCT_TABS_SLIDER_PREINIT_FALLBACK_PLAN.md
  */
  .product-tabs__slider-host .swiper:not(.swiper-initialized) .swiper-wrapper {
    display: flex;
    flex-wrap: nowrap;
    box-sizing: border-box;
    gap: var(--pt-gap, 0px);
  }

  .product-tabs__slider-host .swiper:not(.swiper-initialized) .swiper-slide {
    flex-shrink: 0;
    width: var(--pt-fallback-w-mobile);
    box-sizing: border-box;
  }

  @media (min-width: 750px) and (max-width: 1099px) {
    .product-tabs__slider-host .swiper:not(.swiper-initialized) .swiper-slide {
      width: var(--pt-fallback-w-tablet);
    }
  }

  @media (min-width: 1100px) {
    .product-tabs__slider-host .swiper:not(.swiper-initialized) .swiper-slide {
      width: var(--pt-fallback-w-desktop);
    }
  }

  /*
   * Slider viewport uses overflow:hidden (Swiper contract). Variant focus rings,
   * swatch outlines, and quantity borders extend past the paint box vertically —
   * padding-block insets content so decoration is less likely clipped top/bottom.
   * Do NOT use padding-inline: spaceBetween already sets horizontal gap; inline
   * padding would add to that and break the merchant’s “Gap between products” value.
   * blueprint/product-cards/PRODUCT_TABS_SLIDER_OVERFLOW_CLIP_PLAN.md
   */
  .product-tabs__slider-host {
    --product-tabs-slide-safe-inset: 0.6rem;
  }

  .product-tabs__slider-host .swiper-slide {
    box-sizing: border-box;
    padding-block: var(--product-tabs-slide-safe-inset);
    padding-inline: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: auto;
  }

  .product-tabs__slider-host .swiper-slide > gyanpradip-product-card {
    align-self: start;
    width: 100%;
  }

  /* Match grid baseline alignment when Product card → Grid row layout → Align buttons */
  .product-tabs__slider-host .swiper-slide > gyanpradip-product-card.product-card--align-row-actions {
    align-self: stretch;
    flex: 1 1 auto;
    min-height: 0;
  }

  .product-tabs .product-tabs__pagination.swiper-pagination {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    top: auto;
    width: 100%;
    margin-block-start: 2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.2rem;
    max-width: 100%;
  }

  .product-tabs .product-tabs__pagination--bottom-left {
    justify-content: flex-start;
  }

  .product-tabs .product-tabs__pagination--bottom-center {
    justify-content: center;
  }

  .product-tabs .product-tabs__pagination--bottom-right {
    justify-content: flex-end;
  }

  .product-tabs .product-tabs__pagination .swiper-pagination-bullet {
    cursor: pointer;
    margin: 0;
    opacity: 1;
    background: rgb(from var(--color-foreground) r g b / 25%);
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 100%;
    border: 0;
    transition: background 0.2s;
  }

  .product-tabs .product-tabs__pagination .swiper-pagination-bullet-active {
    background: var(--color-foreground);
  }

  .product-tabs .product-tabs__pagination .swiper-pagination-bullet.swiper-pagination-bullet--number {
    box-sizing: border-box;
    width: auto;
    height: auto;
    min-width: 2.4rem;
    min-height: 2.4rem;
    margin: 0;
    padding: 0 0.6rem;
    background: transparent;
    border-radius: 100%;
    color: rgb(from var(--color-foreground) r g b / 50%);
    font-size: 1.2rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: color 0.2s;
  }

  .product-tabs
    .product-tabs__pagination
    .swiper-pagination-bullet.swiper-pagination-bullet--number.swiper-pagination-bullet-active {
    color: var(--color-foreground);
    background: transparent;
  }

  .product-tabs .product-tabs__pagination .swiper-pagination-fraction {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.03em;
    color: rgb(from var(--color-foreground) r g b / 75%);
    font-size: 1.2rem;
  }

  .product-tabs .product-tabs__view-all-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    box-sizing: border-box;
  }

  .product-tabs .product-tabs__view-all-btn--small {
    padding-block: 0.8rem;
    padding-inline: 1.6rem;
    font-size: 1.2rem;
    line-height: 1.3;
  }

  .product-tabs .product-tabs__view-all-btn--medium {
    padding-block: 1rem;
    padding-inline: 2.4rem;
    font-size: 1.4rem;
    line-height: 1.35;
  }

  .product-tabs .product-tabs__view-all-btn--large {
    padding-block: 1.4rem;
    padding-inline: 3.2rem;
    font-size: 1.6rem;
    line-height: 1.35;
  }

  .product-tabs .product-tabs__view-all-btn-icon svg {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    display: block;
  }

  @media (max-width: 749px) {
    .product-tabs .product-tabs__view-all-btn {
      min-height: 4.4rem;
    }
  }

  .product-tabs .product-tabs__view-all--bottom {
    display: flex;
    justify-content: center;
    margin-block-start: 3.2rem;
  }

  @media (min-width: 992px) {
    /* Bottom duplicate: hidden on desktop when inline CTA is the primary placement (slider beside tabs, grid). */
    .product-tabs .product-tabs__view-all--bottom.product-tabs__view-all--hide-on-desktop {
      display: none !important;
    }
  }
/* END_SECTION:product-tabs */

/* START_SECTION:recently-viewed-products (INDEX:61) */
/* sections/recently-viewed-products.liquid — Search-Rendering-API rebuild.
     Spec: blueprint/recently-viewed/RECENTLY_VIEWED_SECTION_REBUILD_PLAN.md
     Renders recently-viewed products through the _product-card module
     (<gyanpradip-product-card>), fetched + injected by assets/recently-viewed-products.js.
     Architecture is a sibling of sections/product-recommendations.liquid; the data
     source is the browser's localStorage history (via the Search Rendering API),
     not the server `recommendations` object. Slider delegated to <gyanpradip-slider>. */

  .recently-viewed {
    display: block;
    padding-block-start: var(--padding-block-start, 6rem);
    padding-block-end:   var(--padding-block-end, 6rem);
  }

  /* No views / fetch error / empty result — controller hides the whole section
     (heading included). Default-hidden on the storefront until JS reveals it. */
  .recently-viewed.is-empty {
    display: none !important;
  }

  @media (max-width: 749px) {
    .recently-viewed {
      padding-block-start: calc(var(--padding-block-start, 6rem) * var(--mobile-scale, 0.8));
      padding-block-end:   calc(var(--padding-block-end, 6rem)   * var(--mobile-scale, 0.8));
    }
  }

  /* ── Width bands. .section--page-width / .section--full-width come from base.css. ── */
  .recently-viewed__track-band {
    width: 100%;
    min-width: 0;
  }

  .recently-viewed__track-band--flush {
    padding-inline: 0;
    max-width: none;
  }

  .recently-viewed__track-band.section-container {
    padding-block: 0;
  }

  /* ── Intro band: heading/subheading (left) + beside-heading nav (right) ── */
  .recently-viewed__intro-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
    margin-block-end: var(--rv-heading-gap, 55px);
  }
  .recently-viewed__intro-band.section-container {
    padding-block: 0;
  }

  .recently-viewed__intro-text {
    flex: 1 1 auto;
    min-width: 0;
  }

  .recently-viewed__heading {
    margin: 0;
  }

  .recently-viewed__subtitle {
    margin: 0;
  }

  .recently-viewed__heading + .recently-viewed__subtitle {
    margin-block-start: 0.8rem;
  }

  .recently-viewed__heading-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
  }

  .recently-viewed__nav--header {
    display: flex;
    align-items: center;
    gap: 0.8rem;
  }

  @media (max-width: 991px) {
    .recently-viewed__heading-actions {
      display: none;
    }
  }
  @media (max-width: 749px) {
    .recently-viewed__intro-band {
      display: block;
    }
  }

  /* ── Grid layout ── */
  .recently-viewed__grid {
    display: grid;
    grid-template-columns: repeat(var(--cols-mobile, 2), 1fr);
    gap: var(--rec-gap, 1.6rem);
  }
  @media (min-width: 750px) {
    .recently-viewed__grid {
      grid-template-columns: repeat(var(--cols-desktop, 4), 1fr);
    }
  }

  .recently-viewed__grid > gyanpradip-product-card.product-card--align-row-actions {
    align-self: stretch;
    min-height: 0;
  }

  /* Horizontal scroll on mobile when "stack on mobile" is off */
  @media (max-width: 749px) {
    .recently-viewed__grid--hscroll-mobile {
      display: flex;
      grid-template-columns: none;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-padding-inline: var(--page-gutter, 1.5rem);
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .recently-viewed__grid--hscroll-mobile::-webkit-scrollbar {
      display: none;
    }
    .recently-viewed__grid--hscroll-mobile > * {
      flex: 0 0 calc((100% - var(--rec-gap, 1.2rem)) / 1.5);
      scroll-snap-align: start;
    }
  }

  /* ── List layout — same grid/columns as .recently-viewed__grid, but each
     card is forced horizontal (media left, content right) via a two-column
     CSS Grid on .product-card__content. The media is placed in column 1
     spanning every row the text stack generates (grid-row: 1 / -1), so it
     stretches to the full height of the vendor/title/price/buy stack while
     that stack keeps its own natural row-by-row rhythm in column 2 — no
     position: absolute, no manual inset-start padding.

     `-1` only resolves against the EXPLICIT grid — with no
     grid-template-rows, the explicit row grid has zero tracks, so `1 / -1`
     degenerates to `1 / 1` and the media collapses to row 1 only (the rest
     of the stack then renders outside/below it). Declaring a generous fixed
     grid-template-rows makes those rows explicit, so `-1` correctly lands
     on the real last row.

     row-gap is forced to 0 and the vertical rhythm is applied as
     margin-block-end on the column-2 items instead: `gap` inserts a gutter
     between EVERY pair of row tracks, including the unused trailing ones
     from the fixed 8-row template — with a real `gap`, those empty rows
     each still contribute a gutter's worth of dead space at the bottom of
     any card whose text stack is shorter than 8 rows. Margins only apply
     between rendered siblings, so unused rows cost nothing. */
  .recently-viewed__grid--list {
    --rv-list-media-size: 7rem;
  }
  @media (min-width: 750px) {
    .recently-viewed__grid--list {
      --rv-list-media-size: 9rem;
    }
  }

  .recently-viewed__grid--list > gyanpradip-product-card.product-card {
    width: 100%;
  }

  .recently-viewed__grid--list > gyanpradip-product-card.product-card > .product-card__content {
    display: grid;
    grid-template-columns: var(--rv-list-media-size) 1fr;
    grid-template-rows: repeat(8, auto);
    column-gap: 1.2rem;
    row-gap: 0;
    padding-inline-start: 0;
  }

  .recently-viewed__grid--list > gyanpradip-product-card.product-card > .product-card__content > .product-card-media {
    grid-column: 1;
    grid-row: 1 / -1;
    /* align-self: start (not the grid default of stretch) so the media
       keeps the block's own configured aspect ratio (--media-aspect,
       inline style from _product-card-media.liquid) instead of being
       forced to distort to whatever height the text stack happens to be.
       Stretch + aspect-ratio would otherwise fight — grid stretch wins and
       aspect-ratio is silently ignored. The spanned rows still grow to fit
       the image's natural height when it's taller than the text stack. */
    align-self: start;
    width: 100%;
    margin: 0;
  }

  .recently-viewed__grid--list > gyanpradip-product-card.product-card > .product-card__content > :not(.product-card-media) {
    grid-column: 2;
  }

  .recently-viewed__grid--list > gyanpradip-product-card.product-card > .product-card__content > :not(.product-card-media):not(:last-child) {
    margin-block-end: var(--card-gap, 0.8rem);
  }

  /* Title clamps to a single line in list mode — the row is only as tall as
     the thumbnail, so a wrapping multi-line title (e.g. "Socks (3 options)
     This is a long product title...") pushes price/vendor further down each
     time. Truncate with an ellipsis instead. */
  .recently-viewed__grid--list > gyanpradip-product-card.product-card .product-card-title {
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .recently-viewed__grid--list > gyanpradip-product-card.product-card .product-card-title__text {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /* Skeleton placeholders mirror the same horizontal shape while loading. */
  .recently-viewed__grid--list > .recently-viewed__skeleton {
    display: grid;
    grid-template-columns: var(--rv-list-media-size) 1fr;
    grid-template-rows: repeat(8, auto);
    column-gap: 1.2rem;
    row-gap: 0;
  }

  .recently-viewed__grid--list > .recently-viewed__skeleton > .recently-viewed__skeleton-media {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: start;
    width: 100%;
    aspect-ratio: 1;
  }

  .recently-viewed__grid--list > .recently-viewed__skeleton > :not(.recently-viewed__skeleton-media) {
    grid-column: 2;
  }

  .recently-viewed__grid--list > .recently-viewed__skeleton > :not(.recently-viewed__skeleton-media):not(:last-child) {
    margin-block-end: 1rem;
  }

  /* ── Slider layout ── */
  .recently-viewed__slider {
    display: block;
  }

  .recently-viewed__swiper-pane {
    position: relative;
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }
  @supports (overflow: clip) {
    .recently-viewed__swiper-pane {
      overflow-x: clip;
    }
  }
  .recently-viewed__swiper-pane .swiper {
    width: 100%;
    min-width: 0;
  }

  .recently-viewed__swiper-pane .swiper-slide {
    box-sizing: border-box;
    padding-block: 0.6rem;
    padding-inline: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: auto;
  }
  .recently-viewed__swiper-pane .swiper-slide > gyanpradip-product-card {
    align-self: start;
    width: 100%;
  }
  .recently-viewed__swiper-pane .swiper-slide > gyanpradip-product-card.product-card--align-row-actions {
    align-self: stretch;
    flex: 1 1 auto;
    min-height: 0;
  }

  /* Pre-init slide widths — prevent layout jump before Swiper measures. */
  .recently-viewed__slider .swiper:not(.swiper-initialized) .swiper-wrapper {
    display: flex;
    flex-wrap: nowrap;
    box-sizing: border-box;
    gap: var(--rv-gap, 0px);
  }
  .recently-viewed__slider .swiper:not(.swiper-initialized) .swiper-slide {
    flex-shrink: 0;
    width: var(--rv-fallback-w-mobile);
    box-sizing: border-box;
  }
  @media (min-width: 750px) and (max-width: 1099px) {
    .recently-viewed__slider .swiper:not(.swiper-initialized) .swiper-slide {
      width: var(--rv-fallback-w-tablet);
    }
  }
  @media (min-width: 1100px) {
    .recently-viewed__slider .swiper:not(.swiper-initialized) .swiper-slide {
      width: var(--rv-fallback-w-desktop);
    }
  }

  /* ── Swiper nav skin (scoped) — neutralises Swiper bundle defaults.
     blueprint/skill/SLIDER_DEVELOPMENT_BLUEPRINT.md §3.3.1 ── */
  .recently-viewed .swiper-nav {
    position: relative;
    inset: auto;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    inset-inline: auto;
    transform: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.4rem;
    height: 4.4rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s;
    border: 0;
    background: transparent;
    color: var(--color-foreground);
    box-sizing: border-box;
    flex: 0 0 auto;
    align-self: center;
    margin: 0;
    aspect-ratio: 1;
  }
  .recently-viewed .swiper-nav svg {
    width: 1.8rem;
    height: 1.8rem;
  }
  .recently-viewed .swiper-nav--bg-none {
    width: auto;
    height: auto;
    padding: 0.4rem;
    aspect-ratio: auto;
    max-width: none;
    max-height: none;
  }
  .recently-viewed .swiper-nav--bg-circle { border-radius: 100%; }
  .recently-viewed .swiper-nav--bg-square { border-radius: 0; }
  .recently-viewed .swiper-nav--bg-custom { border-radius: var(--rv-slider-nav-radius, 0); }
  .recently-viewed .swiper-nav--solid:not(.swiper-nav--bg-none) {
    background: var(--color-foreground);
    color: var(--color-background);
  }
  .recently-viewed .swiper-nav--solid:not(.swiper-nav--bg-none):hover {
    background: rgb(from var(--color-foreground) r g b / 85%);
  }
  .recently-viewed .swiper-nav--outline:not(.swiper-nav--bg-none) {
    background: transparent;
    color: var(--color-foreground);
    border: 0.1rem solid var(--color-foreground);
  }
  .recently-viewed .swiper-nav--outline:not(.swiper-nav--bg-none):hover {
    background: var(--color-foreground);
    color: var(--color-background);
  }
  .recently-viewed .swiper-nav[disabled],
  .recently-viewed .swiper-nav.swiper-button-disabled,
  .recently-viewed--nav-on-carousel.recently-viewed--slider:hover
    .recently-viewed__nav--overlay .swiper-nav[disabled],
  .recently-viewed--nav-on-carousel.recently-viewed--slider:hover
    .recently-viewed__nav--overlay .swiper-nav.swiper-button-disabled {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
  }
  .recently-viewed .swiper-nav.swiper-button-prev::after,
  .recently-viewed .swiper-nav.swiper-button-next::after {
    display: none;
  }
  .recently-viewed .swiper-nav:focus-visible:not(.swiper-button-disabled) {
    outline: none;
    box-shadow: 0 0 0 0.2rem var(--color-background), 0 0 0 0.4rem var(--color-foreground);
  }

  /* ── Overlay nav — left/right edges of the swiper pane, hover-revealed ── */
  .recently-viewed__nav--overlay {
    position: absolute;
    inset-block: 0;
    inset-inline: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: 0.8rem;
    pointer-events: none;
    z-index: 4;
    box-sizing: border-box;
  }
  .recently-viewed__nav--overlay .swiper-nav {
    pointer-events: auto;
    transition:
      opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
      background 0.2s, color 0.2s, border-color 0.2s, visibility 0.2s;
    will-change: transform, opacity;
  }

  /* (A) On-cards (hover) — active at ALL widths once placement = on_carousel. */
  .recently-viewed--nav-on-carousel.recently-viewed--slider
    .recently-viewed__nav--overlay .swiper-button-prev {
    transform: translateX(calc(-1 * (100% + 2rem)));
    opacity: 0;
    visibility: hidden;
  }
  .recently-viewed--nav-on-carousel.recently-viewed--slider
    .recently-viewed__nav--overlay .swiper-button-next {
    transform: translateX(calc(100% + 2rem));
    opacity: 0;
    visibility: hidden;
  }
  .recently-viewed--nav-on-carousel.recently-viewed--slider:hover
    .recently-viewed__nav--overlay .swiper-button-prev,
  .recently-viewed--nav-on-carousel.recently-viewed--slider:hover
    .recently-viewed__nav--overlay .swiper-button-next,
  .recently-viewed--nav-on-carousel.recently-viewed--slider:focus-within
    .recently-viewed__nav--overlay .swiper-button-prev,
  .recently-viewed--nav-on-carousel.recently-viewed--slider:focus-within
    .recently-viewed__nav--overlay .swiper-button-next {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
  }

  /* (B) Beside-heading MOBILE fallback (<992px) — overlay takes over. */
  @media (max-width: 991px) {
    .recently-viewed--slider
      .recently-viewed__nav--overlay .swiper-button-prev {
      transform: translateX(calc(-1 * (100% + 2rem)));
      opacity: 0;
      visibility: hidden;
    }
    .recently-viewed--slider
      .recently-viewed__nav--overlay .swiper-button-next {
      transform: translateX(calc(100% + 2rem));
      opacity: 0;
      visibility: hidden;
    }
    .recently-viewed--slider:hover
      .recently-viewed__nav--overlay .swiper-button-prev,
    .recently-viewed--slider:hover
      .recently-viewed__nav--overlay .swiper-button-next,
    .recently-viewed--slider:focus-within
      .recently-viewed__nav--overlay .swiper-button-prev,
    .recently-viewed--slider:focus-within
      .recently-viewed__nav--overlay .swiper-button-next {
      transform: translateX(0);
      opacity: 1;
      visibility: visible;
    }
    .recently-viewed--slider:hover
      .recently-viewed__nav--overlay .swiper-nav[disabled],
    .recently-viewed--slider:hover
      .recently-viewed__nav--overlay .swiper-nav.swiper-button-disabled,
    .recently-viewed--slider:focus-within
      .recently-viewed__nav--overlay .swiper-nav[disabled],
    .recently-viewed--slider:focus-within
      .recently-viewed__nav--overlay .swiper-nav.swiper-button-disabled {
      opacity: 0.5;
      cursor: default;
      pointer-events: none;
    }
    .recently-viewed--slider {
      overflow-x: hidden;
    }
    @supports (overflow: clip) {
      .recently-viewed--slider {
        overflow-x: clip;
      }
    }
  }

  /* Reduced motion: keep the fade, drop the slide. */
  @media (prefers-reduced-motion: reduce) {
    .recently-viewed--slider
      .recently-viewed__nav--overlay .swiper-nav {
      transition-duration: 0.01ms;
    }
    .recently-viewed--nav-on-carousel.recently-viewed--slider
      .recently-viewed__nav--overlay .swiper-button-prev,
    .recently-viewed--nav-on-carousel.recently-viewed--slider
      .recently-viewed__nav--overlay .swiper-button-next {
      transform: none !important;
    }
    @media (max-width: 991px) {
      .recently-viewed--slider
        .recently-viewed__nav--overlay .swiper-button-prev,
      .recently-viewed--slider
        .recently-viewed__nav--overlay .swiper-button-next {
        transform: none !important;
      }
    }
  }

  /* On desktop (>=992px) the overlay is the nav ONLY when placement is "on carousel". */
  @media (min-width: 992px) {
    .recently-viewed--slider:not(.recently-viewed--nav-on-carousel)
      .recently-viewed__nav--overlay {
      display: none !important;
    }
  }

  /* ── Pagination ── */
  .recently-viewed__pagination.swiper-pagination {
    position: relative;
    inset: auto;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    max-width: 100%;
    margin-block-start: 2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.2rem;
  }
  .recently-viewed__pagination--bottom-left   { justify-content: flex-start; }
  .recently-viewed__pagination--bottom-center { justify-content: center; }
  .recently-viewed__pagination--bottom-right  { justify-content: flex-end; }
  .recently-viewed__pagination .swiper-pagination-bullet {
    cursor: pointer;
    margin: 0;
    opacity: 1;
    background: rgb(from var(--color-foreground) r g b / 25%);
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 100%;
    border: 0;
    transition: background 0.2s;
  }
  .recently-viewed__pagination .swiper-pagination-bullet-active {
    background: var(--color-foreground);
  }
  .recently-viewed__pagination .swiper-pagination-bullet.swiper-pagination-bullet--number {
    box-sizing: border-box;
    width: auto;
    height: auto;
    min-width: 2.4rem;
    min-height: 2.4rem;
    margin: 0;
    padding: 0 0.6rem;
    background: transparent;
    border-radius: 100%;
    color: rgb(from var(--color-foreground) r g b / 50%);
    font-size: 1.2rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: color 0.2s;
  }
  .recently-viewed__pagination .swiper-pagination-bullet.swiper-pagination-bullet--number.swiper-pagination-bullet-active {
    color: var(--color-foreground);
    background: transparent;
  }
  .recently-viewed__pagination .swiper-pagination-fraction {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.03em;
    color: rgb(from var(--color-foreground) r g b / 75%);
    font-size: 1.2rem;
  }

  /* ── Skeleton placeholders (pre-fetch) ── */
  .recently-viewed__skeleton {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .recently-viewed__skeleton-media {
    aspect-ratio: 1;
    background: rgb(from var(--color-foreground) r g b / 8%);
    border-radius: 0.4rem;
    animation: recently-viewed-pulse 1.5s ease-in-out infinite;
  }
  .recently-viewed__skeleton-title {
    height: 1.4rem;
    background: rgb(from var(--color-foreground) r g b / 6%);
    border-radius: 0.2rem;
    animation: recently-viewed-pulse 1.5s ease-in-out infinite 0.2s;
  }
  .recently-viewed__skeleton-price {
    height: 1.2rem;
    width: 50%;
    background: rgb(from var(--color-foreground) r g b / 5%);
    border-radius: 0.2rem;
    animation: recently-viewed-pulse 1.5s ease-in-out infinite 0.4s;
  }

  /* Slider skeleton — single non-wrapping row, widths matched to the pre-init slider. */
  .recently-viewed__skeleton-track {
    display: flex;
    flex-wrap: nowrap;
    box-sizing: border-box;
    gap: var(--rv-gap, 0px);
  }
  .recently-viewed__skeleton-track > .recently-viewed__skeleton {
    flex-shrink: 0;
    width: var(--rv-fallback-w-mobile);
    box-sizing: border-box;
  }
  @media (min-width: 750px) and (max-width: 1099px) {
    .recently-viewed__skeleton-track > .recently-viewed__skeleton {
      width: var(--rv-fallback-w-tablet);
    }
  }
  @media (min-width: 1100px) {
    .recently-viewed__skeleton-track > .recently-viewed__skeleton {
      width: var(--rv-fallback-w-desktop);
    }
  }

  @keyframes recently-viewed-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
  }
/* END_SECTION:recently-viewed-products */

/* START_SECTION:slideshow (INDEX:63) */
/* sections/slideshow.liquid — Phase 3 §3 rebuild.
     Spec: blueprint/skill/HOMEPAGE_SECTIONS_PLAN.md §3 */

  .slideshow {
    position: relative;
    width: 100%;
    /* Slide distance when nav is hidden (hover-capable, motion OK). */
    --slideshow-nav-hide-shift: 2rem;
    /* Empty-state placeholder height (no image/video). Full visible viewport
       on desktop, hero band on mobile so the next section stays reachable.
       See blueprint/sections/SLIDESHOW_PLACEHOLDER_FULLSCREEN_PLAN.md §3.2. */
    --placeholder-min-h:        100svh;
    --placeholder-min-h-mobile: 70svh;
  }

  /* Host is a custom element — block formatting context for full-width hero + absolute nav.
     overflow-x clips transformed nav buttons at rest (translateX) so they don’t widen document scroll.
     Spec: blueprint/sections/SLIDESHOW_NAV_OVERFLOW_X_PLAN.md */
  slideshow-section.slideshow {
    display: block;
    overflow-x: hidden;
    /* Top margin (settings.margin_top). Full value on desktop; scaled down on
       mobile by the section's "Mobile scale" (--padding-mobile-scale) below. */
    margin-block-start: var(--slideshow-margin-top, 0px);
  }

  @media (max-width: 749px) {
    slideshow-section.slideshow {
      margin-block-start: calc(var(--slideshow-margin-top, 0px) * var(--padding-mobile-scale, 0.8));
    }
  }

  @supports (overflow: clip) {
    slideshow-section.slideshow {
      overflow-x: clip;
    }
  }

  /* Slide-height variants */
  .slideshow--small      { --slide-min-h: 30svh; }
  .slideshow--medium     { --slide-min-h: 50svh; }
  .slideshow--large      { --slide-min-h: 70svh; }
  .slideshow--full-screen { --slide-min-h: 100svh; }
  .slideshow--adapt      { --slide-min-h: auto; }
  .slideshow--custom     { /* set inline via --slide-min-h */ }

  .slideshow .swiper-slide {
    min-height: var(--slide-min-h, 70svh);
    height: var(--slide-min-h, 70svh);
  }
  .slideshow--adapt .swiper-slide {
    min-height: 0;
    height: auto;
  }

  /* Contain slide — page-container gutter comes from .section-container /
     .section--page-width|full-width on .slideshow__swiper-wrap (same classes
     already used by .slideshow__ui, so pagination stays edge-aligned with the
     card); only the corner radius is added here. */
  .slideshow--contained .swiper {
    border-radius: var(--border-radius, 0);
  }

  /* Round the slide itself too (it already has overflow:hidden) so the media's
     bottom corners clip to the radius even if autoHeight leaves a sub-pixel gap
     under the image — .swiper alone only rounds the viewport, which can miss the
     image's own bottom edge. Applies at every breakpoint (responsive). */
  .slideshow--contained .swiper-slide {
    border-radius: var(--border-radius, 0);
  }

  /* Contained + page-width: the card is centred and capped at --layout-page-width.
     Straddle the nav arrows on the card's edge — half the button sits outside the
     card, half inside — by centring the button (offset = half its width) on that edge.
     Full-width contained keeps the default 2rem inset since the card spans the viewport. */
  .slideshow--contained[data-section-width="page-width"] .swiper-nav.swiper-button-prev {
    inset-inline-start: calc(
      max((100% - var(--layout-page-width, 100%)) / 2, 0px) + var(--container-padding-inline, 15px) - 2.4rem
    );
  }
  .slideshow--contained[data-section-width="page-width"] .swiper-nav.swiper-button-next {
    inset-inline-end: calc(
      max((100% - var(--layout-page-width, 100%)) / 2, 0px) + var(--container-padding-inline, 15px) - 2.4rem
    );
  }

  /* Empty-state placeholder slides — full viewport on desktop, hero band on mobile.
     Once a merchant uploads media, the :has() selector stops matching and the
     slide returns to --slide-min-h. */
  .slideshow .swiper-slide:has(.slideshow-item__placeholder) {
    min-height: var(--placeholder-min-h, 100svh);
    height: var(--placeholder-min-h, 100svh);
  }

  @media (max-width: 749px) {
    .slideshow .swiper-slide:has(.slideshow-item__placeholder) {
      min-height: var(--placeholder-min-h-mobile, 70svh);
      height: var(--placeholder-min-h-mobile, 70svh);
    }
  }

  .swiper-nav {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    cursor: pointer;
    transition:
      transform 0.25s ease,
      opacity 0.25s ease,
      background 0.2s,
      color 0.2s,
      border-color 0.2s;
    border: 0; background: transparent;
    color: var(--color-foreground);
  }
  .swiper-nav svg { width: 18px; height: 18px; }
  .swiper-nav--bg-none   { width: auto; height: auto; padding: 4px; }
  .swiper-nav--bg-circle { border-radius: 100%; }
  .swiper-nav--solid:not(.swiper-nav--bg-none) {
    background: var(--color-foreground);
    color: var(--color-background);
  }
  .swiper-nav--solid:not(.swiper-nav--bg-none):hover {
    background: rgb(from var(--color-foreground) r g b / 85%);
  }
  .swiper-nav--outline:not(.swiper-nav--bg-none) {
    background: transparent;
    color: var(--color-foreground);
    border: 1px solid var(--color-foreground);
  }
  .swiper-nav--outline:not(.swiper-nav--bg-none):hover {
    background: var(--color-foreground);
    color: var(--color-background);
  }
  .swiper-nav[disabled] { opacity: 0.4; cursor: default; pointer-events: none; }

  /* Single slide: no pagination/navigation makes sense (JS toggles this class once slide count is known). */
  slideshow-section.slideshow--single-slide .swiper-nav.swiper-button-prev,
  slideshow-section.slideshow--single-slide .swiper-nav.swiper-button-next,
  slideshow-section.slideshow--single-slide .slideshow__pagination {
    display: none !important;
  }

  /* Swiper bundle adds ::after (swiper-icons font) — we use gyanpradip-icon-slider SVG inside. */
  .slideshow .swiper-nav.swiper-button-prev::after,
  .slideshow .swiper-nav.swiper-button-next::after {
    display: none;
  }

  .slideshow .swiper-nav.swiper-button-prev,
  .slideshow .swiper-nav.swiper-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 11;
    pointer-events: auto;
    width: 4.8rem;
    height: 4.8rem;
    left: auto;
    right: auto;
    margin-top: 0;
  }
  .slideshow .swiper-nav.swiper-button-prev {
    inset-inline-start: 2rem;
    inset-inline-end: auto;
  }
  .slideshow .swiper-nav.swiper-button-next {
    inset-inline-end: 2rem;
    inset-inline-start: auto;
  }
  .slideshow .swiper-nav.swiper-button-prev:focus-visible,
  .slideshow .swiper-nav.swiper-button-next:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-foreground);
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0) translateY(-50%);
  }

  /*
    Prev/next hidden at rest; slide in + fade on host :hover/:focus-within (or nav :focus-visible).
    Use (hover: hover) without (pointer: fine) so narrow / touch-emulated viewports still match
    desktop when a real hover is available (e.g. mouse + responsive mode).
    blueprint/sections/SLIDESHOW_NAV_VISIBILITY_AND_PAGINATION_UNDERLINE_PLAN.md
  */
  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
    slideshow-section.slideshow:not(:hover):not(:focus-within) .swiper-nav.swiper-button-prev:not(:focus-visible) {
      opacity: 0;
      pointer-events: none;
      transform: translateX(calc(-1 * var(--slideshow-nav-hide-shift))) translateY(-50%);
    }
    slideshow-section.slideshow:not(:hover):not(:focus-within) .swiper-nav.swiper-button-next:not(:focus-visible) {
      opacity: 0;
      pointer-events: none;
      transform: translateX(var(--slideshow-nav-hide-shift)) translateY(-50%);
    }

    slideshow-section.slideshow:is(:hover, :focus-within) .swiper-nav.swiper-button-prev,
    slideshow-section.slideshow:is(:hover, :focus-within) .swiper-nav.swiper-button-next {
      opacity: 1;
      pointer-events: auto;
      transform: translateX(0) translateY(-50%);
    }

    slideshow-section.slideshow:is(:hover, :focus-within) .swiper-nav.swiper-button-prev[disabled],
    slideshow-section.slideshow:is(:hover, :focus-within) .swiper-nav.swiper-button-next[disabled] {
      opacity: 0.4;
    }

    [dir="rtl"]
      slideshow-section.slideshow:not(:hover):not(:focus-within)
      .swiper-nav.swiper-button-prev:not(:focus-visible) {
      transform: translateX(var(--slideshow-nav-hide-shift)) translateY(-50%);
    }
    [dir="rtl"]
      slideshow-section.slideshow:not(:hover):not(:focus-within)
      .swiper-nav.swiper-button-next:not(:focus-visible) {
      transform: translateX(calc(-1 * var(--slideshow-nav-hide-shift))) translateY(-50%);
    }
  }

  /*
    Typical phones: hover:none. Mirror hide/reveal using :focus-within so arrows match desktop
    when the slideshow host is focused (tab or tap — host has tabindex="0").
    Scoped to theme mobile breakpoint so large touch desktops are unchanged.
  */
  @media (hover: none) and (prefers-reduced-motion: no-preference) and (max-width: 749px) {
    slideshow-section.slideshow:not(:focus-within) .swiper-nav.swiper-button-prev:not(:focus-visible) {
      opacity: 0;
      pointer-events: none;
      transform: translateX(calc(-1 * var(--slideshow-nav-hide-shift))) translateY(-50%);
    }
    slideshow-section.slideshow:not(:focus-within) .swiper-nav.swiper-button-next:not(:focus-visible) {
      opacity: 0;
      pointer-events: none;
      transform: translateX(var(--slideshow-nav-hide-shift)) translateY(-50%);
    }

    slideshow-section.slideshow:focus-within .swiper-nav.swiper-button-prev,
    slideshow-section.slideshow:focus-within .swiper-nav.swiper-button-next {
      opacity: 1;
      pointer-events: auto;
      transform: translateX(0) translateY(-50%);
    }

    slideshow-section.slideshow:focus-within .swiper-nav.swiper-button-prev[disabled],
    slideshow-section.slideshow:focus-within .swiper-nav.swiper-button-next[disabled] {
      opacity: 0.4;
    }

    [dir="rtl"]
      slideshow-section.slideshow:not(:focus-within)
      .swiper-nav.swiper-button-prev:not(:focus-visible) {
      transform: translateX(var(--slideshow-nav-hide-shift)) translateY(-50%);
    }
    [dir="rtl"]
      slideshow-section.slideshow:not(:focus-within)
      .swiper-nav.swiper-button-next:not(:focus-visible) {
      transform: translateX(calc(-1 * var(--slideshow-nav-hide-shift))) translateY(-50%);
    }
  }

  /* Avoid a focus ring when the host receives programmatic / tap focus; keyboard uses :focus-visible. */
  slideshow-section.slideshow:focus:not(:focus-visible) {
    outline: none;
  }

  .slideshow__ui {
    position: absolute;
    inset: 0;
    width: 100%;
    margin-inline: auto;
    z-index: 5;
    pointer-events: none;
  }

  .slideshow .slideshow__pagination {
    position: absolute;
    pointer-events: auto;
    bottom: 24px;
    width: auto;
    max-width: max-content;
    display: inline-flex;
    align-items: center;
    gap: 1.2rem;
    padding: 0.8rem 1.6rem;
    background: var(--color-background);
    border-radius: 4px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.05em;
  }
  /*
    Number bullets: both Swiper base + Gyanpradip modifier (renderBullet / bulletClass).
    High specificity beats swiper-bundle.min.css + legacy slideshow CSS.
  */
  .slideshow .slideshow__pagination .swiper-pagination-bullet.swiper-pagination-bullet--number {
    position: relative;
    box-sizing: border-box;
    width: auto;
    height: auto;
    min-width: 2.4rem;
    min-height: 2.4rem;
    margin: 0;
    padding: 0 0.6rem;
    background: transparent;
    color: var(--color-foreground);
    opacity: 0.5;
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    border: 0;
    flex-shrink: 0;
    transition: color 0.2s, opacity 0.2s;
  }

  .slideshow
    .slideshow__pagination
    .swiper-pagination-bullet.swiper-pagination-bullet--number
    + .swiper-pagination-bullet.swiper-pagination-bullet--number::before {
    content: "";
    display: inline-block;
    width: 2.4rem;
    height: 1px;
    background: rgb(from var(--color-foreground) r g b / 30%);
    margin-inline-end: 1.2rem;
    vertical-align: middle;
    align-self: center;
  }

  .slideshow
    .slideshow__pagination
    .swiper-pagination-bullet.swiper-pagination-bullet--number.swiper-pagination-bullet-active {
    color: var(--color-foreground);
    opacity: 1;
  }

  /* Bottom-left / right: offset by canonical container gutter. Swiper bundle
     (.swiper-pagination-horizontal) sets left:0; width:100%; bottom:10px — we
     must unset physical left/right/width and nest past those selectors so
     inset-inline-* wins (PAGE_WIDTH_BLUEPRINT + Swiper cascade).
     .swiper-pagination-horizontal covers bullets, fraction (counter), etc. */
  .slideshow .slideshow__ui .slideshow__pagination.slideshow__pagination--bottom-left.swiper-pagination-horizontal {
    left: unset;
    right: unset;
    width: auto;
    max-width: max-content;
    inset-inline-start: var(--container-padding-inline, 15px);
    inset-inline-end: auto;
    bottom: 24px;
  }
  .slideshow .slideshow__ui .slideshow__pagination.slideshow__pagination--bottom-center.swiper-pagination-horizontal {
    left: unset;
    right: unset;
    width: auto;
    max-width: max-content;
    inset-inline-start: 50%;
    inset-inline-end: auto;
    transform: translateX(-50%);
    bottom: 24px;
  }
  .slideshow .slideshow__ui .slideshow__pagination.slideshow__pagination--bottom-right.swiper-pagination-horizontal {
    left: unset;
    right: unset;
    width: auto;
    max-width: max-content;
    inset-inline-end: var(--container-padding-inline, 15px);
    inset-inline-start: auto;
    bottom: 24px;
  }

  /* Reduced motion: disable transitions */
  @media (prefers-reduced-motion: reduce) {
    .slideshow .swiper-slide {
      transition: none;
    }
    .slideshow .swiper-nav.swiper-button-prev,
    .slideshow .swiper-nav.swiper-button-next {
      transition: background 0.2s, color 0.2s, border-color 0.2s;
    }
  }

  @media (max-width: 749px) {
    .slideshow .swiper-nav.swiper-button-prev,
    .slideshow .swiper-nav.swiper-button-next {
      width: 3.6rem;
      height: 3.6rem;
    }
    .slideshow .swiper-nav.swiper-button-prev { inset-inline-start: 1.6rem; }
    .slideshow .swiper-nav.swiper-button-next { inset-inline-end: 1.6rem; }

    /* Contained + page-width on mobile: buttons are 3.6rem, so straddle the card
       edge with half (1.8rem) of the button outside. */
    .slideshow--contained[data-section-width="page-width"] .swiper-nav.swiper-button-prev {
      inset-inline-start: calc(
        max((100% - var(--layout-page-width, 100%)) / 2, 0px) + var(--container-padding-inline-mobile, 15px) - 1.8rem
      );
    }
    .slideshow--contained[data-section-width="page-width"] .swiper-nav.swiper-button-next {
      inset-inline-end: calc(
        max((100% - var(--layout-page-width, 100%)) / 2, 0px) + var(--container-padding-inline-mobile, 15px) - 1.8rem
      );
    }

    .slideshow .slideshow__ui .slideshow__pagination.slideshow__pagination--bottom-left.swiper-pagination-horizontal {
      inset-inline-start: var(--container-padding-inline-mobile, 15px);
    }
    .slideshow .slideshow__ui .slideshow__pagination.slideshow__pagination--bottom-right.swiper-pagination-horizontal {
      inset-inline-end: var(--container-padding-inline-mobile, 15px);
    }

    /*
      Mobile content-below mode — blueprint/sections/SLIDESHOW_MOBILE_CONTENT_BELOW_PLAN.md
      Stacked layout: media band → slide content → pagination under .swiper.
    */
    slideshow-section[data-mobile-content-below="true"].slideshow .swiper-slide {
      min-height: 0;
      height: auto;
    }

    /* Empty slide: don’t lock the whole slide to placeholder-min-h when content stacks in-flow. */
    slideshow-section[data-mobile-content-below="true"].slideshow .swiper-slide:has(.slideshow-item__placeholder) {
      min-height: 0;
      height: auto;
    }

    slideshow-section[data-mobile-content-below="true"] .slideshow__ui {
      position: relative;
      inset: auto;
      width: 100%;
      margin-block-start: 1.6rem;
      display: flex;
      align-items: center;
    }

    slideshow-section[data-mobile-content-below="true"] .slideshow__ui:has(.slideshow__pagination--bottom-left) {
      justify-content: flex-start;
    }
    slideshow-section[data-mobile-content-below="true"] .slideshow__ui:has(.slideshow__pagination--bottom-center) {
      justify-content: center;
    }
    slideshow-section[data-mobile-content-below="true"] .slideshow__ui:has(.slideshow__pagination--bottom-right) {
      justify-content: flex-end;
    }

    slideshow-section[data-mobile-content-below="true"] .slideshow__ui .slideshow__pagination,
    slideshow-section[data-mobile-content-below="true"] .slideshow__ui .slideshow__pagination.swiper-pagination-horizontal,
    slideshow-section[data-mobile-content-below="true"]
      .slideshow__ui
      .slideshow__pagination.slideshow__pagination--bottom-left.swiper-pagination-horizontal,
    slideshow-section[data-mobile-content-below="true"]
      .slideshow__ui
      .slideshow__pagination.slideshow__pagination--bottom-center.swiper-pagination-horizontal,
    slideshow-section[data-mobile-content-below="true"]
      .slideshow__ui
      .slideshow__pagination.slideshow__pagination--bottom-right.swiper-pagination-horizontal {
      position: relative;
      inset: auto;
      bottom: auto;
      transform: none;
    }

    /*
      Pin nav to vertical center of media band only (not stacked content).
      Non-adapt: --slide-min-h is a length. Adapt: invalid calc(auto/2) — JS sets --slideshow-nav-media-center-y.
    */
    slideshow-section[data-mobile-content-below="true"]:not(.slideshow--adapt) .swiper-nav.swiper-button-prev,
    slideshow-section[data-mobile-content-below="true"]:not(.slideshow--adapt) .swiper-nav.swiper-button-next {
      top: calc(var(--slide-min-h, 70svh) / 2);
    }
    slideshow-section[data-mobile-content-below="true"].slideshow--adapt .swiper-nav.swiper-button-prev,
    slideshow-section[data-mobile-content-below="true"].slideshow--adapt .swiper-nav.swiper-button-next {
      top: var(--slideshow-nav-media-center-y, 50%);
    }

    /*
      Adapt + mobile + content below OFF: give slides a real height so absolute media can fill.
      (Desktop adapt keeps height: auto on slides for intrinsic media.)
      Spec: blueprint/sections/SLIDESHOW_VIDEO_AND_MOBILE_OVERLAY_PLAN.md
    */
    slideshow-section[data-mobile-content-below="false"].slideshow--adapt .swiper-slide {
      min-height: var(--slideshow-adapt-mobile-overlay-min-h, var(--placeholder-min-h-mobile, 70svh));
      height: var(--slideshow-adapt-mobile-overlay-min-h, var(--placeholder-min-h-mobile, 70svh));
    }
  }
/* END_SECTION:slideshow */

/* START_SECTION:testimonial (INDEX:64) */
/* sections/testimonial.liquid — Phase 3 §17 build.
     Spec: blueprint/skill/HOMEPAGE_SECTIONS_PLAN.md §17
     4 layouts: sticky / slider / grid / flex_slider. Coexists with legacy testimonials.liquid (plural). */

  .testimonial {
    padding-block-start: var(--padding-block-start, 60px);
    padding-block-end: var(--padding-block-end, 60px);
  }

  /* ==========================================================================
     STICKY layout
     ========================================================================== */
  @media (min-width: 750px) {
    .testimonial--sticky .testimonial__inner {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
      gap: 60px;
    }
    .testimonial--sticky .testimonial__header {
      position: sticky;
      top: var(--header-sticky-top, 80px);
      align-self: start;
    }
    .testimonial--sticky .testimonial__cards {
      columns: 2;
      column-gap: 24px;
    }
    .testimonial--sticky .testimonial__cards > * {
      break-inside: avoid;
      margin-block-end: 24px;
      display: block;
    }
  }

  @media (max-width: 749px) {
    .testimonial--sticky .testimonial__header {
      position: static;
      margin-block-end: 24px;
    }
    .testimonial--sticky .testimonial__cards {
      display: flex;
      gap: 16px;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      padding-inline: 16px;
    }
    .testimonial--sticky .testimonial__cards::-webkit-scrollbar { display: none; }
    .testimonial--sticky .testimonial__cards > * {
      flex: 0 0 calc(100% - 4rem);
      scroll-snap-align: start;
    }
    .testimonial--sticky.stack-on-mobile .testimonial__cards {
      display: flex;
      flex-direction: column;
      overflow: visible;
      scroll-snap-type: none;
      padding-inline: 0;
    }
    .testimonial--sticky.stack-on-mobile .testimonial__cards > * {
      flex: 1 1 auto;
      width: 100%;
    }
    /* Equal-height cards in horizontal scroll — override Swiper's height:100% */
    .testimonial--sticky:not(.stack-on-mobile) .testimonial__cards > * {
      height: auto;
    }
  }

  /* ==========================================================================
     SLIDER layout
     ========================================================================== */
  .testimonial--slider .testimonial__top {
    margin-block-end: 24px;
  }
  .testimonial--slider .swiper-slide {
    height: auto;
  }

  /* Navigation — standard swiper-nav contract (SLIDER_DEVELOPMENT_BLUEPRINT §3.3.1) */
  .testimonial .swiper-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    border: 0;
    background: transparent;
    color: var(--color-foreground);
  }
  .testimonial .swiper-nav svg { width: 18px; height: 18px; }
  .testimonial .swiper-nav.swiper-button-prev::after,
  .testimonial .swiper-nav.swiper-button-next::after { display: none; }
  .testimonial .swiper-nav--bg-none { width: auto; height: auto; padding: 4px; }
  .testimonial .swiper-nav--bg-circle { border-radius: 100%; }
  .testimonial .swiper-nav--bg-custom:not(.swiper-nav--bg-none) {
    border-radius: var(--testimonial-slider-nav-radius, 0px);
  }
  .testimonial .swiper-nav--bg-capsule:not(.swiper-nav--bg-none) {
    border-radius: var(--testimonial-slider-nav-radius, 0px);
    width: auto;
    min-width: 5.6rem;
    padding-inline: 1.2rem;
  }
  .testimonial .swiper-nav--solid:not(.swiper-nav--bg-none) {
    background: var(--color-primary-button-background);
    color: var(--color-primary-button-text);
    border-color: var(--color-primary-button-border);
  }
  .testimonial .swiper-nav--solid:not(.swiper-nav--bg-none):hover {
    background: var(--color-primary-button-hover-background);
    color: var(--color-primary-button-hover-text);
    border-color: var(--color-primary-button-hover-border);
  }
  .testimonial .swiper-nav--outline:not(.swiper-nav--bg-none) {
    background: var(--color-secondary-button-background);
    color: var(--color-secondary-button-text);
    border-width: var(--btn-border-width, 1px);
    border-style: solid;
    border-color: var(--color-secondary-button-border);
  }
  .testimonial .swiper-nav--outline:not(.swiper-nav--bg-none):hover {
    background: var(--color-secondary-button-hover-background);
    color: var(--color-secondary-button-hover-text);
    border-color: var(--color-secondary-button-hover-border);
  }
  .testimonial .swiper-nav[disabled] { opacity: 0.4; cursor: default; pointer-events: none; }

  /* ── Header nav (beside_heading): flex row + neutralise Swiper position:absolute ── */
  .testimonial .testimonial__nav--header {
    display: flex;
    gap: 0.8rem;
    flex-shrink: 0;
    align-items: center;
  }
  .testimonial .testimonial__nav--header .swiper-nav {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    inset-inline: auto;
    transform: none;
    width: 4.4rem;
    height: 4.4rem;
    min-width: 4.4rem;
    min-height: 4.4rem;
    max-width: 4.4rem;
    max-height: 4.4rem;
    box-sizing: border-box;
    flex: 0 0 auto;
    align-self: center;
    margin: 0;
    aspect-ratio: 1;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
  }
  .testimonial .testimonial__nav--header .swiper-nav.swiper-nav--bg-none {
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    max-width: none;
    max-height: none;
    aspect-ratio: auto;
    padding: 0.4rem;
  }
  .testimonial .testimonial__nav--header .swiper-nav.swiper-nav--bg-capsule {
    width: auto;
    min-width: 5.6rem;
    max-width: none;
    padding-inline: 1.2rem;
    aspect-ratio: auto;
    @media only screen and (min-width: 750px) {
      min-width: 9rem;
      min-height: 6rem;
    }
    svg {
      width: 1.8rem;
      height: auto;
      @media only screen and (min-width: 750px) {
        width: 2.5rem;
        height: auto;
      }
    }
  }

  /* ── Overlay nav: absolute layer centred over the card area ── */
  .testimonial--slider .testimonial__slider,
  .testimonial--flex-slider .testimonial__slider {
    position: relative;
  }
  .testimonial--slider .testimonial__nav--overlay,
  .testimonial--flex-slider .testimonial__nav--overlay {
    position: absolute;
    inset-block-start: 0;
    inset-block-end: 0;
    inset-inline: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: 0.8rem;
    pointer-events: none;
    z-index: 2;
    box-sizing: border-box;
  }
  .testimonial--slider .testimonial__nav--overlay .swiper-nav,
  .testimonial--flex-slider .testimonial__nav--overlay .swiper-nav {
    pointer-events: auto;
  }

  /* ── Overlay nav: restore flex positioning — Swiper's global position:absolute removes
     buttons from flex flow, breaking justify-content:space-between on the overlay ── */
  .testimonial--slider .testimonial__nav--overlay .swiper-button-prev,
  .testimonial--slider .testimonial__nav--overlay .swiper-button-next,
  .testimonial--flex-slider .testimonial__nav--overlay .swiper-button-prev,
  .testimonial--flex-slider .testimonial__nav--overlay .swiper-button-next {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    margin-top: 0;
  }

  /* on_carousel: keep flex-start on the top row */
  .testimonial--nav-on-carousel .testimonial__top {
    justify-content: flex-start;
  }

  /* ── Desktop: hide overlay when beside_heading is active (header nav takes over) ── */
  @media (min-width: 992px) {
    .testimonial--slider:not(.testimonial--nav-on-carousel) .testimonial__nav--overlay,
    .testimonial--flex-slider:not(.testimonial--nav-on-carousel) .testimonial__nav--overlay {
      display: none !important;
    }
  }

  /* ── Mobile: hide header nav + overflow clip ── */
  @media (max-width: 991px) {
    .testimonial--slider .testimonial__nav--header,
    .testimonial--flex-slider .testimonial__nav--header {
      display: none !important;
    }
    .testimonial--slider {
      overflow-x: hidden;
    }
    @supports (overflow: clip) {
      .testimonial--slider {
        overflow-x: clip;
      }
    }
  }

  /* ── Mobile: overlay default state — opacity:0; visibility:hidden ── */
  @media (max-width: 991px) {
    .testimonial--slider:not(.testimonial--nav-on-carousel)
      .testimonial__nav--overlay
      .swiper-button-prev,
    .testimonial--flex-slider:not(.testimonial--nav-on-carousel)
      .testimonial__nav--overlay
      .swiper-button-prev {
      transform: translateX(calc(-1 * (100% + 2rem)));
      opacity: 0;
      visibility: hidden;
      transition:
        transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.25s ease,
        visibility 0.2s,
        background 0.2s,
        color 0.2s,
        border-color 0.2s;
    }
    .testimonial--slider:not(.testimonial--nav-on-carousel)
      .testimonial__nav--overlay
      .swiper-button-next,
    .testimonial--flex-slider:not(.testimonial--nav-on-carousel)
      .testimonial__nav--overlay
      .swiper-button-next {
      transform: translateX(calc(100% + 2rem));
      opacity: 0;
      visibility: hidden;
      transition:
        transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.25s ease,
        visibility 0.2s,
        background 0.2s,
        color 0.2s,
        border-color 0.2s;
    }
  }

  /* ── Mobile: hover/focus-within on section wrapper → slide buttons in ── */
  @media (max-width: 991px) {
    .testimonial--slider:not(.testimonial--nav-on-carousel):hover
      .testimonial__nav--overlay
      .swiper-button-prev,
    .testimonial--flex-slider:not(.testimonial--nav-on-carousel):hover
      .testimonial__nav--overlay
      .swiper-button-prev,
    .testimonial--slider:not(.testimonial--nav-on-carousel):hover
      .testimonial__nav--overlay
      .swiper-button-next,
    .testimonial--flex-slider:not(.testimonial--nav-on-carousel):hover
      .testimonial__nav--overlay
      .swiper-button-next,
    .testimonial--slider:not(.testimonial--nav-on-carousel):focus-within
      .testimonial__nav--overlay
      .swiper-button-prev,
    .testimonial--flex-slider:not(.testimonial--nav-on-carousel):focus-within
      .testimonial__nav--overlay
      .swiper-button-prev,
    .testimonial--slider:not(.testimonial--nav-on-carousel):focus-within
      .testimonial__nav--overlay
      .swiper-button-next,
    .testimonial--flex-slider:not(.testimonial--nav-on-carousel):focus-within
      .testimonial__nav--overlay
      .swiper-button-next {
      transform: translateX(0);
      opacity: 1;
      visibility: visible;
    }
  }

  /* ── on_carousel: slide + fade on hover/focus ── */
  /* overflow-x: clip contains the translateX without creating a scroll container */
  .testimonial--nav-on-carousel .testimonial__slider {
    overflow-x: clip;
  }
  .testimonial--nav-on-carousel .testimonial__nav--overlay .swiper-button-prev {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-1.2rem);
    transition:
      transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.25s ease,
      visibility 0.2s,
      background 0.2s,
      color 0.2s,
      border-color 0.2s;
  }
  .testimonial--nav-on-carousel .testimonial__nav--overlay .swiper-button-next {
    opacity: 0;
    visibility: hidden;
    transform: translateX(1.2rem);
    transition:
      transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.25s ease,
      visibility 0.2s,
      background 0.2s,
      color 0.2s,
      border-color 0.2s;
  }
  .testimonial--nav-on-carousel .testimonial__slider:hover
    .testimonial__nav--overlay .swiper-button-prev,
  .testimonial--nav-on-carousel .testimonial__slider:hover
    .testimonial__nav--overlay .swiper-button-next,
  .testimonial--nav-on-carousel .testimonial__slider:focus-within
    .testimonial__nav--overlay .swiper-button-prev,
  .testimonial--nav-on-carousel .testimonial__slider:focus-within
    .testimonial__nav--overlay .swiper-button-next {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }

  /* ── Reduced motion ── */
  @media (prefers-reduced-motion: reduce) {
    .testimonial--slider .testimonial__nav--overlay .swiper-button-prev,
    .testimonial--slider .testimonial__nav--overlay .swiper-button-next,
    .testimonial--flex-slider .testimonial__nav--overlay .swiper-button-prev,
    .testimonial--flex-slider .testimonial__nav--overlay .swiper-button-next {
      transition-duration: 0.01ms;
      transform: none !important;
    }
  }

  /* Pre-init fallback: prevents layout jump before Swiper fires (SLIDER_DEVELOPMENT_BLUEPRINT §3.8, Pattern A) */
  .testimonial--slider .swiper:not(.swiper-initialized) .swiper-wrapper,
  .testimonial--flex-slider .swiper:not(.swiper-initialized) .swiper-wrapper {
    display: flex;
    flex-wrap: nowrap;
    box-sizing: border-box;
    gap: var(--testimonial-gap-m, 12px);
  }
  .testimonial--slider .swiper:not(.swiper-initialized) .swiper-slide,
  .testimonial--flex-slider .swiper:not(.swiper-initialized) .swiper-slide {
    flex-shrink: 0;
    width: var(--testimonial-fallback-w-mobile, calc((100% - 12px) / 1.2));
    box-sizing: border-box;
  }
  @media (min-width: 750px) {
    .testimonial--slider .swiper:not(.swiper-initialized) .swiper-wrapper,
    .testimonial--flex-slider .swiper:not(.swiper-initialized) .swiper-wrapper {
      gap: var(--testimonial-gap-d, 16px);
    }
    .testimonial--slider .swiper:not(.swiper-initialized) .swiper-slide,
    .testimonial--flex-slider .swiper:not(.swiper-initialized) .swiper-slide {
      width: var(--testimonial-fallback-w-tablet, calc((100% - 16px) / 2));
    }
  }
  @media (min-width: 1100px) {
    .testimonial--slider .swiper:not(.swiper-initialized) .swiper-slide,
    .testimonial--flex-slider .swiper:not(.swiper-initialized) .swiper-slide {
      width: var(--testimonial-fallback-w-desktop, calc((100% - 32px) / 3));
    }
  }

  /* Pagination row — full-width flex container, handles alignment */
  .testimonial--slider .testimonial__pagination-row,
  .testimonial--flex-slider .testimonial__pagination-row {
    width: 100%;
    display: flex;
    margin-block-start: 4rem;
    box-sizing: border-box;
  }
  .testimonial--slider .testimonial__pagination-row--bottom-left,
  .testimonial--flex-slider .testimonial__pagination-row--bottom-left   { justify-content: flex-start; }
  .testimonial--slider .testimonial__pagination-row--bottom-center,
  .testimonial--flex-slider .testimonial__pagination-row--bottom-center { justify-content: center; }
  .testimonial--slider .testimonial__pagination-row--bottom-right,
  .testimonial--flex-slider .testimonial__pagination-row--bottom-right  { justify-content: flex-end; }

  /* Pagination element — card background, width shrinks to content.
     3-class specificity (0-3-0) beats Swiper's .swiper-pagination-bullets.swiper-pagination-horizontal (0-2-0)
     so width:fit-content wins without !important. */
  .testimonial--slider .testimonial__pagination.swiper-pagination,
  .testimonial--flex-slider .testimonial__pagination.swiper-pagination {
    position: relative;
    inset: auto;
    left: auto;
    right: auto;
    bottom: auto;
    top: auto;
    width: fit-content;
    max-width: 100%;
    margin: 0;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.2rem;
    box-sizing: border-box;
    background: var(--color-background);
    border-radius: 0.8rem;
    padding: 1rem 2rem;
    box-shadow: 0 1px 4px rgb(0 0 0 / 8%);
  }

  /* Dots */
  .testimonial__pagination .swiper-pagination-bullet {
    cursor: pointer;
    margin: 0;
    opacity: 1;
    background: rgb(from var(--color-foreground) r g b / 25%);
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 100%;
    border: 0;
    flex-shrink: 0;
    transition: background 0.2s;
  }
  .testimonial__pagination .swiper-pagination-bullet-active {
    background: var(--color-foreground);
  }

  /* Number bullets */
  .testimonial__pagination .swiper-pagination-bullet--number {
    box-sizing: border-box;
    width: auto;
    height: auto;
    min-width: 2.4rem;
    min-height: 2.4rem;
    margin: 0;
    padding: 0 0.6rem;
    background: transparent;
    border-radius: 100%;
    color: rgb(from var(--color-foreground) r g b / 50%);
    font-size: 1.2rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: color 0.2s;
  }
  .testimonial__pagination .swiper-pagination-bullet--number.swiper-pagination-bullet-active {
    color: var(--color-foreground);
    background: transparent;
  }
  /* Separator line between number bullets */
  .testimonial__pagination .swiper-pagination-bullet--number:not(:last-child)::after {
    content: '';
    display: block;
    width: 2rem;
    height: 1px;
    background: rgb(from var(--color-foreground) r g b / 20%);
    margin-inline-start: 1.2rem;
    flex-shrink: 0;
  }

  /* Counter (fraction) */
  .testimonial__pagination .swiper-pagination-fraction {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.03em;
    color: rgb(from var(--color-foreground) r g b / 75%);
    font-size: 1.2rem;
  }

  /* ==========================================================================
     GRID layout
     ========================================================================== */
  .testimonial--grid .testimonial__cards {
    display: grid;
    grid-template-columns: repeat(var(--cols-desktop, 3), 1fr);
    gap: 24px;
  }
  @media (max-width: 1099px) {
    .testimonial--grid .testimonial__cards {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  .testimonial--grid .testimonial-card__quote {
    display: -webkit-box;
    -webkit-line-clamp: var(--quote-line-clamp, 5);
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .testimonial--grid.no-clamp .testimonial-card__quote {
    -webkit-line-clamp: unset;
    overflow: visible;
  }

  /* Override Swiper's height:100% so CSS Grid's align-items:stretch equalises row heights */
  .testimonial--grid .testimonial__cards > * {
    height: auto;
  }

  /* Mobile: switch from CSS Grid to flex — mirrors Sticky layout behaviour */
  @media (max-width: 749px) {
    /* Stack disabled: horizontal flex scroll */
    .testimonial--grid:not(.stack-on-mobile) .testimonial__cards {
      display: flex;
      gap: 16px;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      padding-inline: 16px;
    }
    .testimonial--grid:not(.stack-on-mobile) .testimonial__cards::-webkit-scrollbar { display: none; }
    .testimonial--grid:not(.stack-on-mobile) .testimonial__cards > * {
      flex: 0 0 calc(100% - 4rem);
      scroll-snap-align: start;
    }

    /* Stack enabled: vertical flex column */
    .testimonial--grid.stack-on-mobile .testimonial__cards {
      display: flex;
      flex-direction: column;
      overflow: visible;
      scroll-snap-type: none;
      padding-inline: 0;
    }
    .testimonial--grid.stack-on-mobile .testimonial__cards > * {
      flex: 1 1 auto;
      width: 100%;
    }
  }

  /* ==========================================================================
     FLEX SLIDER layout — same as Slider but bleeds to viewport right edge
     ========================================================================== */

  /* Contain the bleed without creating a scroll container */
  .testimonial--flex-slider {
    overflow-x: clip;
  }
  @supports not (overflow: clip) {
    .testimonial--flex-slider {
      overflow-x: hidden;
    }
  }

  /* Header row spacing — same as Slider */
  .testimonial--flex-slider .testimonial__top {
    margin-block-end: 2.4rem;
  }

  /* Desktop only: remove right container gap so slider reaches viewport edge */
  @media (min-width: 992px) {
    .testimonial--flex-slider .testimonial__slider {
      margin-inline-end: calc(-1 * (
        max(0px, (100vw - var(--layout-page-width)) / 2)
        + var(--container-padding-inline, 15px)
      ));
    }
  }

  /* Slides must paint beyond the container edge */
  .testimonial--flex-slider .swiper {
    overflow: visible;
  }

  /* Equal-height slides — matches .testimonial--slider .swiper-slide { height: auto } */
  .testimonial--flex-slider .swiper-slide {
    height: auto;
  }

  @media (max-width: 749px) {
    .testimonial {
      padding-block-start: calc(var(--padding-block-start, 60px) * var(--padding-mobile-scale, 0.8));
      padding-block-end: calc(var(--padding-block-end, 60px) * var(--padding-mobile-scale, 0.8));
    }
  }

  /* Editor-only warning for cards that don't match the active layout */
  .testimonial__warning {
    padding: 12px 16px;
    border: 2px dashed var(--color-foreground);
    background: rgb(from var(--color-foreground) r g b / 5%);
    border-radius: 8px;
    font-size: 0.9em;
    color: var(--color-foreground);
  }
/* END_SECTION:testimonial */

/* START_SECTION:video-reels (INDEX:66) */
/* sections/video-reels.liquid — Phase 5 §7 build.
     Centered Swiper slider with center-only autoplay, custom drag cursor,
     per-reel sound + play/pause controls.
     Spec: blueprint/skill/HOMEPAGE_SECTIONS_PLAN.md §7 */

  /* Host is a custom element — default display:inline can let wide Swiper tracks
     inflate document scroll-width. Block + horizontal clip keeps bleed local. */
  .video-reels {
    display: block;
    width: 100%;
    max-width: 100%;
    /* Swiper: equal slide widths → spaceBetween matches Gap settings. Active emphasis is
       scaleY on .video-reel only (full slide width) so horizontal card gaps stay even. */
    --video-reels-active-emphasis: 1.08;
    --swiper-reel-slot-width-active-mobile: var(--reel-width-mobile);
    --swiper-reel-slot-width-inactive-mobile: calc(
      var(--swiper-reel-slot-width-active-mobile) / var(--video-reels-active-emphasis)
    );
    --swiper-reel-slot-width-active-desktop: var(--reel-width);
    --swiper-reel-slot-width-inactive-desktop: calc(
      var(--swiper-reel-slot-width-active-desktop) / var(--video-reels-active-emphasis)
    );
    overflow-x: hidden;
    padding-block-start: var(--padding-block-start, 60px);
    padding-block-end: var(--padding-block-end, 60px);
  }

  /* Prefer clip: avoids odd subpixel scrollbars while still masking horizontal bleed */
  @supports (overflow: clip) {
    .video-reels {
      overflow-x: clip;
    }
  }

  /* Inner bands — split the section-container gutter from the section's own block padding */
  .video-reels__intro-band.section-container,
  .video-reels__track-band.section-container {
    padding-block-start: 0;
    padding-block-end: 0;
  }

  .video-reels__track-band {
    position: relative;
  }
  .video-reels__track-band--flush {
    width: 100%;
    max-width: 100%;
  }

  .video-reels .video-reels__slider {
    /* scaleY emphasis paints past layout — room so top/bottom are not clipped */
    padding-block: 1.6rem;
    box-sizing: border-box;
  }

  .video-reels .swiper {
    box-sizing: border-box;
    overflow-x: clip;
    overflow-y: visible;
  }

  .video-reels .swiper-wrapper {
    align-items: center;
  }

  /*
   * slidesPerView: 'auto' — one width for every slide (inactive footprint) so horizontal spacing
   * tracks section gap settings. Active reel uses scaleY in the block (no slide width change).
   */
  .video-reels .swiper-slide {
    width: var(--swiper-reel-slot-width-inactive-mobile);
    height: auto;
    align-self: center;
    overflow: visible;
    box-sizing: border-box;
    flex-shrink: 0;
    transition: opacity var(--video-reels-slide-ms, 600ms) cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.5;
  }

  .video-reels .swiper-slide-active {
    opacity: 1;
    z-index: 2;
  }

  @media (min-width: 750px) {
    .video-reels .swiper-slide {
      width: var(--swiper-reel-slot-width-inactive-desktop);
    }
  }

  .video-reels .swiper-slide-prev,
  .video-reels .swiper-slide-next {
    opacity: 0.7;
  }

  /* Custom drag cursor — dark disc, light ring (matches reels mock); JS positions fixed */
  .video-reels__cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
    box-sizing: border-box;
    background: rgb(from var(--color-foreground) r g b / 16%);
    color: var(--color-foreground);
    border: 0.15rem solid rgb(from var(--color-foreground) r g b / 55%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    opacity: 0;
    transition: opacity 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
    pointer-events: none;
    z-index: 999;
    will-change: transform, opacity;
  }
  .video-reels__cursor-label {
    white-space: nowrap;
  }
  .video-reels__cursor::before {
    content: '<';
    margin-inline-end: 0.35em;
    opacity: 0.85;
    font-weight: 500;
  }
  .video-reels__cursor::after {
    content: '>';
    margin-inline-start: 0.35em;
    opacity: 0.85;
    font-weight: 500;
  }
  .video-reels[data-cursor-visible="true"] .video-reels__cursor {
    opacity: 1;
  }
  .video-reels[data-reels-dragging="true"][data-cursor-visible="true"] .video-reels__cursor {
    background: rgb(from var(--color-foreground) r g b / 24%);
    border-color: rgb(from var(--color-foreground) r g b / 75%);
  }
  /*
   * Drag cursor: hide system cursor only on the swiper track (not whole __slider).
   * Interactive descendants override with pointer — see _video-reel-item + !important rules below.
   */
  .video-reels[data-cursor-visible="true"] .swiper-wrapper {
    cursor: none;
  }

  .video-reels .swiper-button-prev,
  .video-reels .swiper-button-next {
    cursor: pointer !important;
  }

  .video-reels .video-reel__btn,
  .video-reels .video-reel__commerce-below .button,
  .video-reels .video-reel__commerce-below .product-card-buy a,
  .video-reels .video-reel__commerce-below .product-card-buy button,
  .video-reels .video-reel__commerce-below .gyanpradip-quick-view,
  .video-reels .video-reel__link,
  .video-reels .video-reel-commerce-strip a,
  .video-reels .video-reel-commerce-strip [role='button'] {
    cursor: pointer !important;
  }

  .video-reels .video-reel__commerce-below .product-card-buy__btn:disabled {
    cursor: not-allowed !important;
  }

  @media (max-width: 749px) {
    .video-reels {
      padding-block-start: calc(var(--padding-block-start, 60px) * var(--padding-mobile-scale, 0.8));
      padding-block-end: calc(var(--padding-block-end, 60px) * var(--padding-mobile-scale, 0.8));
    }
    /* Hide the custom cursor on touch devices — the cursor follows the mouse */
    .video-reels__cursor { display: none; }
  }

  /* Reduced motion: emphasis off (scale 1), no slide opacity easing */
  @media (prefers-reduced-motion: reduce) {
    .video-reels {
      --video-reels-active-emphasis: 1;
    }

    .video-reels .swiper-slide,
    .video-reels .swiper-slide-active {
      transition: none;
      opacity: 1;
    }
  }

  /* Navigation buttons — overlay positioning (on-carousel).
     Scoped to .video-reels so multiple carousels never cross-wire.
     blueprint/skill/SLIDER_DEVELOPMENT_BLUEPRINT.md §3.3.1 */
  .video-reels .video-reels__nav--overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: 1.6rem;
    z-index: 5;
  }
  .video-reels .video-reels__nav--overlay .swiper-nav {
    pointer-events: auto;
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    inset-inline: auto;
    width: 4.4rem;
    height: 4.4rem;
    min-width: 4.4rem;
    min-height: 4.4rem;
    max-width: 4.4rem;
    max-height: 4.4rem;
    box-sizing: border-box;
    flex: 0 0 auto;
    align-self: center;
    margin: 0;
    aspect-ratio: 1;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition:
      opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
      background 0.2s,
      color 0.2s,
      border-color 0.2s,
      visibility 0.2s;
    border: 0;
    background: transparent;
    color: var(--color-foreground);
    will-change: transform, opacity;
  }
  .video-reels .video-reels__nav--overlay .swiper-nav svg {
    width: 1.8rem;
    height: 1.8rem;
  }
  .video-reels .video-reels__nav--overlay .swiper-nav--bg-none {
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    max-width: none;
    max-height: none;
    aspect-ratio: auto;
    padding: 0.4rem;
  }
  .video-reels .video-reels__nav--overlay .swiper-nav--bg-square {
    border-radius: 0;
  }
  .video-reels .video-reels__nav--overlay .swiper-nav--bg-circle {
    border-radius: 100%;
  }
  .video-reels .video-reels__nav--overlay .swiper-nav--bg-custom {
    border-radius: var(--video-reels-slider-nav-radius, 8px);
  }
  .video-reels .video-reels__nav--overlay .swiper-nav.swiper-nav--solid:not(.swiper-nav--bg-none) {
    background: var(--color-foreground);
    color: var(--color-background);
  }
  .video-reels .video-reels__nav--overlay .swiper-nav.swiper-nav--solid:not(.swiper-nav--bg-none):hover {
    background: rgb(from var(--color-foreground) r g b / 85%);
  }
  .video-reels .video-reels__nav--overlay .swiper-nav.swiper-nav--outline:not(.swiper-nav--bg-none) {
    background: transparent;
    color: var(--color-foreground);
    border: 0.1rem solid var(--color-foreground);
  }
  .video-reels .video-reels__nav--overlay .swiper-nav.swiper-nav--outline:not(.swiper-nav--bg-none):hover {
    background: var(--color-foreground);
    color: var(--color-background);
  }
  /* Swiper bundle default ::after arrows — hidden when using gyanpradip-icon-slider */
  .video-reels .video-reels__nav .swiper-nav.swiper-button-prev::after,
  .video-reels .video-reels__nav .swiper-nav.swiper-button-next::after {
    display: none;
  }
  .video-reels .video-reels__nav .swiper-nav:focus-visible:not(.swiper-button-disabled) {
    outline: 0.2rem solid var(--color-foreground);
    outline-offset: 0.2rem;
  }
  .video-reels .video-reels__nav .swiper-nav[disabled],
  .video-reels .video-reels__nav .swiper-nav.swiper-button-disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
  }
  .video-reels .video-reels__nav .swiper-nav svg {
    display: block;
  }
/* END_SECTION:video-reels */

/* CSS from block stylesheet tags */
/* START_BLOCK:_accordion-row (INDEX:67) */
.accordion-row {
    display: block;
  }

  .accordion-row__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--row-padding-top, 16px);
    padding-bottom: var(--row-padding-bottom, 16px);
    padding-left: var(--row-padding-left, 0);
    padding-right: var(--row-padding-right, 0);
    cursor: pointer;
    list-style: none;
    gap: 12px;
  }

  .accordion-row__header::-webkit-details-marker {
    display: none;
  }

  .accordion-row__heading {
    margin: 0;
    flex: 1;
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight);
  }

  .accordion-row__content {
    padding-bottom: var(--row-padding-bottom, 16px);
    padding-left: var(--row-padding-left, 0);
    padding-right: var(--row-padding-right, 0);
  }

  .accordion-row__row-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--row-icon-width, 24px);
    height: var(--row-icon-height, 24px);
  }

  .accordion-row__row-icon svg {
    width: 100%;
    height: 100%;
  }

  .accordion-row__row-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
/* END_BLOCK:_accordion-row */

/* START_BLOCK:_bundle-card-badge (INDEX:68) */
/* _bundle-card-badge — sub-block of _bundle-card. Small pill tag, e.g. "Eid special combo". */

  .bundle-card-badge-row {
    display: flex;
  }
  .bundle-card-badge-row--left { justify-content: flex-start; }
  .bundle-card-badge-row--center { justify-content: center; }
  .bundle-card-badge-row--right { justify-content: flex-end; }

  .bundle-card-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 1.2rem;
    border-radius: 999rem;
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--bundle-badge-color, #ffffff);
    background-color: var(--bundle-badge-bg, #1f6e43);
  }
/* END_BLOCK:_bundle-card-badge */

/* START_BLOCK:_bundle-card-buttons (INDEX:69) */
/* _bundle-card-buttons — sub-block of _bundle-card. Reads closest.product.
     Buy now = plain POST to /cart/add with return_to=checkout (no JS required).
     Add to cart = <product-form> (assets/gyanpradip-add-cart-form.js, loaded
     globally from layout/theme.liquid) so it gets the same AJAX cart +
     cart-notification behavior as the rest of the theme. */

  /* On wider cards this sits in its own dedicated, fixed-width grid column
     (see .bundle-card__content in blocks/_bundle-card.liquid) and the buttons
     fill that column edge-to-edge. On narrow cards that column collapses and
     this becomes a full-width row (max-width:480px override sets
     grid-column:1/-1), where the two buttons split the row evenly. */
  .bundle-card-buttons {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
    width: 100%;
  }
  .bundle-card-buttons--row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
  }
  @media (max-width: 480px) {
    .bundle-card-buttons {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: stretch;
    }
  }

  /* Each direct child (Buy-now <form>, <product-form>, or bare button) takes
     the full column width when stacked, or an equal share when side by side. */
  .bundle-card-buttons > * {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
  }
  .bundle-card-buttons--row > * {
    flex: 1 1 0;
    width: auto;
  }
  @media (max-width: 480px) {
    .bundle-card-buttons > * {
      flex: 1 1 0;
      width: auto;
    }
  }

  /* Form / custom-element wrappers must be block-level so 100% width passes
     through to the button they contain (<product-form> defaults to inline). */
  .bundle-card-buttons__buy-now-form,
  .bundle-card-buttons > product-form,
  .bundle-card-buttons__add-form {
    display: block;
    width: 100%;
  }

  .bundle-card-buttons__btn.button {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 3.6rem;
    padding: 0.6rem 1.2rem;
    font-size: 1.15rem;
    white-space: nowrap;
  }
  .bundle-card-buttons__icon {
    display: inline-flex;
    flex-shrink: 0;
  }
  .bundle-card-buttons__icon svg {
    width: 1.3rem;
    height: 1.3rem;
  }
  .bundle-card-buttons__btn.button.loading {
    position: relative;
    pointer-events: none;
    color: transparent !important;
  }
  .bundle-card-buttons__btn.button.loading::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1.8rem;
    height: 1.8rem;
    margin-left: -0.9rem;
    margin-top: -0.9rem;
    animation: loading var(--duration-long) infinite linear;
    border-radius: 100%;
    box-sizing: content-box;
    border: 0.2rem solid rgb(from var(--button-color) r g b / 38%);
    border-left-color: transparent;
  }
/* END_BLOCK:_bundle-card-buttons */

/* START_BLOCK:_bundle-card-description (INDEX:70) */
/* _bundle-card-description — sub-block of _bundle-card. Short blurb under the title. */

  .bundle-card-description {
    margin: 0;
    text-align: var(--desc-align, left);
    font-size: 1.4rem;
    line-height: 1.5;
    opacity: 0.75;
  }
  .bundle-card-description--clamp {
    display: -webkit-box;
    -webkit-line-clamp: var(--desc-line-clamp, 2);
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
/* END_BLOCK:_bundle-card-description */

/* START_BLOCK:_bundle-card-discount-badge (INDEX:71) */
/* _bundle-card-discount-badge — sub-block of _bundle-card. Reads closest.product.

     Corner-pinned savings flag ("40% off"). Positioned against .bundle-card
     itself (which sets position:relative), NOT against .bundle-card__content —
     so it sits in the card's padding area / over the corner rather than
     consuming a grid cell. Because it's absolutely positioned it leaves the
     grid flow entirely, which is why the parent's auto-flow and margin rules
     in _bundle-card.liquid explicitly skip it. */

  .bundle-card-discount-badge {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 1rem;
    border-radius: var(--dbadge-radius, 6px);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    color: var(--dbadge-color, #ffffff);
    background-color: var(--dbadge-bg, #d92d20);
  }

  .bundle-card-discount-badge--top-right {
    inset-block-start: var(--dbadge-offset-y, 12px);
    inset-inline-end: var(--dbadge-offset-x, 12px);
  }
  .bundle-card-discount-badge--top-left {
    inset-block-start: var(--dbadge-offset-y, 12px);
    inset-inline-start: var(--dbadge-offset-x, 12px);
  }
  .bundle-card-discount-badge--bottom-right {
    inset-block-end: var(--dbadge-offset-y, 12px);
    inset-inline-end: var(--dbadge-offset-x, 12px);
  }
  .bundle-card-discount-badge--bottom-left {
    inset-block-end: var(--dbadge-offset-y, 12px);
    inset-inline-start: var(--dbadge-offset-x, 12px);
  }

  .bundle-card-discount-badge__icon {
    display: inline-flex;
    flex-shrink: 0;
  }
  .bundle-card-discount-badge__icon svg {
    width: 1.2rem;
    height: 1.2rem;
  }
/* END_BLOCK:_bundle-card-discount-badge */

/* START_BLOCK:_bundle-card-includes (INDEX:72) */
/* _bundle-card-includes — sub-block of _bundle-card.
     "What's in this bundle" box: heading row (optional icon + label) over a
     list of the items the bundle contains.

     Items are merchant-authored, one per line in a textarea — Shopify theme
     blocks can't repeat a setting group, so the newline-split is how a
     variable-length list is expressed here. Same trick as the multi-line
     settings in blocks/_product-card-swatches.liquid. */

  .bundle-card-includes {
    box-sizing: border-box;
    padding: var(--inc-padding, 12px);
    border: var(--inc-border-width, 1px) solid var(--inc-border-color, rgb(from var(--color-foreground) r g b / 15%));
    border-radius: var(--inc-radius, 8px);
    background: var(--inc-bg, transparent);
  }

  .bundle-card-includes__heading {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 0.6rem;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--inc-heading-color, inherit);
  }
  .bundle-card-includes__heading-icon {
    display: inline-flex;
    flex-shrink: 0;
  }
  .bundle-card-includes__heading-icon svg {
    width: 1.6rem;
    height: 1.6rem;
  }

  .bundle-card-includes__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }

  .bundle-card-includes__item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 1.3rem;
    line-height: 1.4;
  }

  /* The marker is decorative — the <ul>/<li> structure already conveys "list"
     to assistive tech, so a bullet glyph here would be announced as noise. */
  .bundle-card-includes__marker {
    display: inline-flex;
    flex-shrink: 0;
    margin-block-start: 0.2rem;
    color: var(--inc-marker-color, currentColor);
  }
  .bundle-card-includes__marker svg {
    width: 1.3rem;
    height: 1.3rem;
  }
  .bundle-card-includes__marker--dot::before {
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    margin-block-start: 0.45rem;
    border-radius: 50%;
    background: currentColor;
  }

  .bundle-card-includes--none .bundle-card-includes__item {
    padding-inline-start: 0;
  }
/* END_BLOCK:_bundle-card-includes */

/* START_BLOCK:_bundle-card-media (INDEX:73) */
/* _bundle-card-media — sub-block of _bundle-card.
     Single cover image, sized by the parent grid's media column (see
     .bundle-card__content in blocks/_bundle-card.liquid). Reads
     closest.product (set by parent _bundle-card) for the image fallback. */

  .bundle-card-media {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
  }

  /* The frame is what carries the aspect ratio, and it's why the ratio lives
     here rather than on the <img> itself: the block stretches to the card's
     full height (align-self: stretch in the parent grid), so an <img> sized
     width:100% + height:100% has two definite side lengths and `aspect-ratio`
     is ignored outright. The frame instead takes its width from the grid's
     media column, leaves its height auto for the ratio to derive, and the
     image fills it. It's also the positioning context for the overlay, which
     keeps that label pinned to the image's bottom edge rather than to the
     bottom of the (taller) stretched block. */
  .bundle-card-media__frame {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: var(--media-aspect, 3 / 4);
  }

  .bundle-card-media__link {
    display: block;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none;
  }

  .bundle-card-media__img,
  .bundle-card-media__placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--media-radius, 8px);
    background: var(--media-bg, rgb(from var(--color-foreground) r g b / 4%));
    display: block;
  }

  /* Overlay label ("Combo bundle") floating over the bottom of the image.
     Sits outside .bundle-card-media__link so it never becomes part of the
     link's clickable text — the link is already aria-hidden and tabindex=-1,
     and pulling the label into it would hide this text from screen readers. */
  .bundle-card-media__overlay {
    position: absolute;
    inset-inline: 0;
    inset-block-end: var(--overlay-offset, 10px);
    z-index: 1;
    display: flex;
    justify-content: center;
    padding-inline: 0.4rem;
    pointer-events: none;
  }
  .bundle-card-media__overlay--top {
    inset-block-end: auto;
    inset-block-start: var(--overlay-offset, 10px);
  }

  .bundle-card-media__overlay-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 100%;
    padding: 0.4rem 1rem;
    border-radius: 999rem;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    color: var(--overlay-color, #7a4a00);
    background-color: var(--overlay-bg, #f8c94a);
  }
  .bundle-card-media__overlay-icon {
    display: inline-flex;
    flex-shrink: 0;
  }
  .bundle-card-media__overlay-icon svg {
    width: 1.2rem;
    height: 1.2rem;
  }
/* END_BLOCK:_bundle-card-media */

/* START_BLOCK:_bundle-card-price (INDEX:74) */
/* _bundle-card-price — sub-block of _bundle-card. Reads closest.product.
     Combo price line + optional "you save" line under it. */

  .bundle-card-price {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    text-align: var(--price-align, left);
    font-variant-numeric: tabular-nums;
  }
  .bundle-card-price--center { align-items: center; }
  .bundle-card-price--right { align-items: flex-end; }

  .bundle-card-price__row {
    display: flex;
    align-items: baseline;
    gap: 0.8rem;
    flex-wrap: wrap;
  }

  /* Stacked puts the compare-at price on its own line above the current price.
     `align-items: inherit` keeps the column tracking the parent's alignment
     modifier (.bundle-card-price--center/--right) instead of pinning left. */
  .bundle-card-price__row--stacked {
    flex-direction: column;
    align-items: inherit;
    gap: 0.2rem;
  }

  .bundle-card-price__compare {
    text-decoration: line-through;
    opacity: 0.55;
    font-size: 1.3rem;
  }

  .bundle-card-price__current {
    font-weight: 700;
    font-size: 1.6rem;
  }

  .bundle-card-price__savings {
    margin: 0;
    font-size: 1.3rem;
    color: var(--bundle-price-savings-color, #c0392b);
  }
/* END_BLOCK:_bundle-card-price */

/* START_BLOCK:_bundle-card-title (INDEX:75) */
/* _bundle-card-title — sub-block of _bundle-card. Reads closest.product.

     The rendered element is always <h3>: cards sit under the section's own
     <h2> heading, so h3 is the correct next level down and keeps the document
     outline valid no matter what the merchant picks. Visual size is a separate
     `type_preset` class (.h1–.h6/.paragraph from assets/base.css) — same split
     as blocks/_product-card-title.liquid, minus the semantic-tag picker.
     Typography deliberately isn't set here; the preset class owns it. */

  .bundle-card-title {
    margin: 0;
    text-align: var(--title-align, left);
  }
  .bundle-card-title__text {
    color: inherit;
    text-decoration: none;
  }
  .bundle-card-title__text:hover {
    text-decoration: underline;
    text-underline-offset: 0.2rem;
  }
  .bundle-card-title__text:focus-visible {
    outline: 0.2rem solid var(--color-foreground);
    outline-offset: 0.2rem;
    border-radius: 0.2rem;
  }
/* END_BLOCK:_bundle-card-title */

/* START_BLOCK:_bundle-card (INDEX:76) */
/* _bundle-card — private container block for sections/bundle.liquid.
     Each instance is one merchant-added "Add block" card, bound to its own
     bundle product via block.settings.product. Sub-blocks (media, badge,
     title, description, price, buttons) read the product back out through
     closest.product — same re-pass pattern as blocks/_product-card.liquid. */

  .bundle-card {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    padding-block-start: var(--padding-block-start, 20px);
    padding-block-end: var(--padding-block-end, 20px);
    padding-inline-start: var(--padding-inline-start, 20px);
    padding-inline-end: var(--padding-inline-end, 20px);
    background: var(--bundle-card-bg, var(--color-background));
  }

  .bundle-card--placeholder {
    opacity: 0.85;
  }

  .bundle-card__content {
    display: flex;
    flex-direction: column;
    gap: var(--card-gap, 12px);
  }

  /* Three-column layout on larger cards: media | content | buttons.
     Media and buttons each span every declared row (grid-row: 1 / -1) so
     they sit centered against the full height of the content stack, using
     the same "spanning column" technique as .recently-viewed__grid--list in
     sections/recently-viewed-products.liquid (there it's media-only; here
     both edge columns span). Content blocks (badge/title/description/price)
     auto-flow through column 2, row by row. */
  .bundle-card__content:has(> .bundle-card-media) {
    display: grid;
    grid-template-columns: var(--bc-media-size, 120px) 1fr var(--bc-buttons-size, 150px);
    grid-template-rows: repeat(8, auto);
    column-gap: var(--bc-column-gap, 1.6rem);
    row-gap: 0;
  }

  .bundle-card__content:has(> .bundle-card-media) > .bundle-card-media {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: stretch;
  }

  /* Buttons fill their column full-width (justify-self: stretch is the grid
     default; the block itself is width:100%) and sit at the bottom of the
     card, aligned to the baseline of the content stack. */
  .bundle-card__content:has(> .bundle-card-media) > .bundle-card-buttons {
    grid-column: 3;
    grid-row: 1 / -1;
    align-self: end;
    justify-self: stretch;
    margin-block-end: 0;
  }

  /* .bundle-card-discount-badge is excluded throughout: it's absolutely
     positioned against the card, so it's out of the grid flow — but a
     margin-block-end would still offset it away from a bottom-* corner. */
  .bundle-card__content:has(> .bundle-card-media) > :not(.bundle-card-media):not(.bundle-card-buttons):not(.bundle-card-discount-badge) {
    grid-column: 2;
  }

  .bundle-card__content:has(> .bundle-card-media) > :not(.bundle-card-media):not(.bundle-card-buttons):not(.bundle-card-discount-badge):not(:last-child) {
    margin-block-end: var(--card-gap, 12px);
  }

  /* Side-by-side buttons ("Layout: Side by side" on the _bundle-card-buttons
     block, which puts .bundle-card-buttons--row on it) can't live in the
     narrow third column — two buttons next to each other need more width. So
     that choice moves them out of the column and onto their own row under the
     content. They stay in column 2, lining up with the title/price stack above
     instead of running under the image.

     Driven off the child's class via :has() rather than a second card-level
     setting, so there's one control for this and no way for the two to
     disagree. Row 9 lands just past the 8 declared rows, so the buttons stay
     last no matter how many content blocks the merchant adds. */
  .bundle-card__content:has(> .bundle-card-media):has(> .bundle-card-buttons--row) {
    grid-template-columns: var(--bc-media-size, 120px) 1fr;
  }
  .bundle-card__content:has(> .bundle-card-media) > .bundle-card-buttons.bundle-card-buttons--row {
    grid-column: 2;
    grid-row: 9;
    align-self: auto;
    margin-block-start: var(--card-gap, 12px);
  }

  /* Narrow cards: the dedicated buttons column no longer has room, so the
     buttons drop to a full-width row under the content instead. */
  @media (max-width: 480px) {
    .bundle-card__content:has(> .bundle-card-media) {
      grid-template-columns: var(--bc-media-size, 120px) 1fr;
    }

    /* The --row half of this selector list isn't redundant: the desktop rule
       that parks side-by-side buttons in column 2 scores 0,4,0, so without a
       matching-specificity selector here it would keep winning inside this
       media query and squeeze both buttons into the narrow content column. */
    .bundle-card__content:has(> .bundle-card-media) > .bundle-card-buttons,
    .bundle-card__content:has(> .bundle-card-media) > .bundle-card-buttons.bundle-card-buttons--row {
      grid-column: 1 / -1;
      grid-row: 9;
      align-self: auto;
      margin-block-start: var(--card-gap, 12px);
    }

    /* "Mobile layout: Image above content" — on a phone the media column and
       the content column are both too narrow to be readable side by side (a
       120px image next to a ~150px text column wraps titles to one word per
       line), so the card collapses to a single column and the image goes on
       top. Merchants who want the side-by-side look on phones switch this to
       "Image beside content" and get the two-column template above. */
    .bundle-card--mobile-stack .bundle-card__content:has(> .bundle-card-media) {
      grid-template-columns: 1fr;
    }
    .bundle-card--mobile-stack .bundle-card__content:has(> .bundle-card-media) > .bundle-card-media {
      grid-column: 1;
      grid-row: auto;
      margin-block-end: var(--card-gap, 12px);
    }
    /* Column 2 no longer exists once the template is 1fr — leaving `grid-column: 2`
       on these would conjure an implicit second column and undo the stack. */
    .bundle-card--mobile-stack .bundle-card__content:has(> .bundle-card-media) > :not(.bundle-card-media):not(.bundle-card-buttons):not(.bundle-card-discount-badge) {
      grid-column: 1;
    }
  }
/* END_BLOCK:_bundle-card */

/* START_BLOCK:_buy-buttons (INDEX:77) */
/* ── payment button styles ─────────────────────────────────────────────── */
  .shopify-payment-button__button {
    font-family: inherit;
    min-height: 4.6rem;
  }

  .shopify-payment-button__button [role="button"].focused {
    outline: 0.2rem solid rgb(from var(--color-foreground) r g b / 5%) !important;
    outline-offset: 0.3rem;
    box-shadow:
      0 0 0 0.1rem rgb(from var(--color-button) r g b / calc(var(--alpha-button-border) * 100%)),
      0 0 0 0.3rem var(--color-background),
      0 0 0.5rem 0.4rem rgb(from var(--color-foreground) r g b / 3%) !important;
  }

  .shopify-payment-button__button [role="button"]:focus:not(:focus-visible) {
    outline: 0;
    box-shadow: none !important;
  }

  .shopify-payment-button__button [role="button"]:focus-visible {
    outline: 0.2rem solid rgb(from var(--color-foreground) r g b / 5%) !important;
    box-shadow:
      0 0 0 0.1rem rgb(from var(--color-button) r g b / calc(var(--alpha-button-border) * 100%)),
      0 0 0 0.3rem var(--color-background),
      0 0 0.5rem 0.4rem rgb(from var(--color-foreground) r g b / 3%) !important;
  }

  .shopify-payment-button__button--unbranded {
    background-color: rgb(from var(--color-button) r g b / calc(var(--alpha-button-background) * 100%));
    box-shadow: 0 0 0 0.1rem rgb(from var(--color-button) r g b / calc(var(--alpha-button-border) * 100%));
    color: var(--color-button-text);
    font-size: calc(var(--btn-font-size) * 1.6rem);
    line-height: 1;
    letter-spacing: var(--btn-tracking) !important;
    border-radius: var(--btn-radius);
    text-transform: var(--btn-transform);
    padding: 1rem 2rem;
    font-weight: var(--btn-font-weight);
  }

  .shopify-payment-button__button--unbranded::selection {
    background-color: rgb(from var(--color-button-text) r g b / 3%);
  }

  .shopify-payment-button__button--unbranded:hover,
  .shopify-payment-button__button--unbranded:hover:not([disabled]) {
    background-color: rgb(from var(--color-button) r g b / calc(var(--alpha-button-background) * 100%));
  }

  .shopify-payment-button__more-options {
    margin: 1.6rem 0 1rem;
    font-size: 1.2rem;
    line-height: calc(1 + 0.5 / var(--font-body-scale));
    letter-spacing: 0.05rem;
    text-decoration: underline;
    text-underline-offset: 0.3rem;
    color: var(--color-foreground);
  }

  .shopify-payment-button__button + .shopify-payment-button__button--hidden {
    display: none;
  }

  .shopify-payment-button__button {
    font-size: 1.5rem;
    letter-spacing: 0.1rem;
  }

  /* ── product form ──────────────────────────────────────────────────────── */
  .product-form {
    display: block;
  }

  .product-form__error-message-wrapper:not([hidden]) {
    display: flex;
    align-items: flex-start;
    font-size: 1.3rem;
    line-height: 1.4;
    letter-spacing: 0.04rem;
    margin-bottom: 1.5rem;
  }

  .product-form__error-message-wrapper .svg-wrapper {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.7rem;
    margin-top: 0.25rem;
  }

  .product-form__submit[aria-disabled="true"]
    + .shopify-payment-button
    .shopify-payment-button__button[disabled],
  .product-form__submit[disabled]
    + .shopify-payment-button
    .shopify-payment-button__button[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
  }

  @media screen and (forced-colors: active) {
    .product-form__submit[aria-disabled="true"] {
      color: Window;
    }
  }

  /* ── recipient form ────────────────────────────────────────────────────── */
  .recipient-form {
    --recipient-checkbox-margin-top: 0.64rem;
    display: block;
    position: relative;
    max-width: 44rem;
    margin-bottom: 2.5rem;
  }

  .recipient-form-field-label {
    margin: 0.6rem 0;
  }

  .recipient-form-field-label--space-between {
    display: flex;
    justify-content: space-between;
  }

  .recipient-checkbox {
    flex-grow: 1;
    font-size: 1.6rem;
    display: flex;
    word-break: break-word;
    align-items: flex-start;
    max-width: inherit;
    position: relative;
    cursor: pointer;
  }

  .recipient-form > input[type="checkbox"] {
    position: absolute;
    width: 1.6rem;
    height: 1.6rem;
    margin: var(--recipient-checkbox-margin-top) 0;
    top: 0;
    left: 0;
    z-index: -1;
    appearance: none;
    -webkit-appearance: none;
  }

  .recipient-fields__field {
    margin: 0 0 2rem 0;
  }

  .recipient-fields .field__label {
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: calc(100% - 3.5rem);
    overflow: hidden;
  }

  .recipient-checkbox > svg {
    margin-top: var(--recipient-checkbox-margin-top);
    margin-right: 1.2rem;
    flex-shrink: 0;
  }

  .recipient-form .gyanpradip-icon-checkmark {
    visibility: hidden;
    position: absolute;
    left: 0.28rem;
    z-index: 5;
    top: 0.4rem;
    width: 10px;
    height: 9px;
  }

  .recipient-form > input[type="checkbox"]:checked + label .gyanpradip-icon-checkmark {
    visibility: visible;
  }

  .js .recipient-fields {
    display: none;
  }

  .recipient-fields hr {
    margin: 1.6rem auto;
  }

  .recipient-form > input[type="checkbox"]:checked ~ .recipient-fields {
    display: block;
    animation: animateMenuOpen var(--duration-default) ease;
  }

  .recipient-form > input[type="checkbox"]:not(:checked, :disabled) ~ .recipient-fields,
  .recipient-email-label {
    display: none;
  }

  .js .recipient-email-label.required {
    display: inline;
  }

  .recipient-form ul {
    line-height: calc(1 + 0.6 / var(--font-body-scale));
    padding-left: 4.4rem;
    text-align: left;
  }

  .recipient-form ul a {
    display: inline;
  }

  .recipient-form .error-message::first-letter {
    text-transform: capitalize;
  }

  @media screen and (forced-colors: active) {
    .recipient-fields > hr {
      border-top: 0.1rem solid var(--color-background);
    }

    .recipient-checkbox > svg {
      background-color: inherit;
      border: 0.1rem solid var(--color-background);
    }

    .recipient-form > input[type="checkbox"]:checked + label .gyanpradip-icon-checkmark {
      border: none;
    }
  }

  /* ── add to cart button ────────────────────────────────────────────────── */
  .product-form__submit > svg {
    max-width: 2rem;
    margin-right: 0.5rem;
  }

  .product-form__submit {
    min-width: 18rem;
  }

  /* ── quantity rules cart ───────────────────────────────────────────────── */
  .quantity__rules-cart {
    position: relative;
  }

  .product__info-container .loading__spinner:not(.hidden) ~ *,
  .quantity__rules-cart .loading__spinner:not(.hidden) ~ * {
    visibility: hidden;
  }

  .quantity__rules-cart .loading__spinner {
    position: absolute;
    z-index: 1;
    width: 1.8rem;
    top: 0;
    left: 1rem;
  }

  /* ── volume pricing ────────────────────────────────────────────────────── */
  volume-pricing {
    display: block;
    margin-top: 2rem;
  }

  volume-pricing li:nth-child(odd) {
    background: rgb(from var(--color-foreground) r g b / 4%);
  }

  volume-pricing ul {
    margin-top: 1.2rem;
  }

  volume-pricing li {
    font-size: 1.4rem;
    letter-spacing: 0.06rem;
    padding: 0.6rem 0.8rem;
    display: flex;
    justify-content: space-between;
  }

  div.volume-pricing-note {
    margin-top: -2.6rem;
  }

  .product--no-media .volume-pricing-note {
    text-align: center;
  }

  .product--no-media volume-pricing {
    width: 30rem;
  }

  .volume-pricing-note span,
  volume-pricing .label-show-more {
    font-size: 1.2rem;
    letter-spacing: 0.07rem;
  }

  volume-pricing show-more-button {
    margin-top: 0.8rem;
  }

  .product-form__input price-per-item,
  .price-per-item__container {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .product-form__input .price-per-item {
    color: var(--color-foreground);
    font-size: 1.4rem;
    letter-spacing: 0.06rem;
  }

  .price-per-item dl {
    margin: 0;
  }

  .price-per-item dd {
    margin-left: 0;
  }

  .price-per-item__container .variant-item__old-price,
  .price__regular .variant-item__old-price {
    color: rgb(from var(--color-foreground) r g b / 75%);
    font-size: 1.2rem;
    letter-spacing: 0.07rem;
  }

  /* ── buy-buttons block padding ─────────────────────────────────────────── */
  .buy-buttons-block {
    padding-top: var(--bb-pt, 0rem);
    padding-bottom: var(--bb-pb, 0rem);
    padding-left: var(--bb-pl, 0rem);
    padding-right: var(--bb-pr, 0rem);
  }

  @media screen and (max-width: 749px) {
    .buy-buttons-block {
      padding-top: var(--bb-pt-mob, var(--bb-pt, 0rem));
      padding-bottom: var(--bb-pb-mob, var(--bb-pb, 0rem));
      padding-left: var(--bb-pl-mob, var(--bb-pl, 0rem));
      padding-right: var(--bb-pr-mob, var(--bb-pr, 0rem));
    }
  }

  /* ── child blocks row ──────────────────────────────────────────────────── */
  .buy-buttons__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    column-gap: 1rem;
    row-gap: 1rem;
    max-width: 50rem;
}

  /* ── stacked-split layout: quantity on its own row, add-to-cart + accelerated
     checkout split 50/50 on the row below. Opt-in via block setting; the child
     blocks' own default flex-basis (used by every other section) is untouched. */
  .buy-buttons__row--stacked-split > .product-quantity-block {
    flex: 1 1 100%;
  }

  .buy-buttons__row--stacked-split > .product-add-to-cart-block,
  .buy-buttons__row--stacked-split > .product-accelerated-checkout-block {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }

  /* Phones: the two CTAs share one row, so each column is only ~half the screen.
     The Add to cart button's 18rem min-width + grid (icon-over-label) stacking
     squeeze the label onto two lines. Let it fill its column, drop the min-width,
     and lay icon + label in a single centered row that never wraps. */
  @media screen and (max-width: 749px) {
    .buy-buttons__row--stacked-split > .product-add-to-cart-block .product-form__submit {
      width: 100%;
      min-width: 0;
      grid-auto-flow: column;
      justify-content: center;
      align-items: center;
      padding-inline: 1rem;
    }

    .buy-buttons__row--stacked-split > .product-add-to-cart-block .product-form__submit > span {
      white-space: nowrap;
    }
  }

  /* ── pickup availability ───────────────────────────────────────────────── */
  .product__pickup-availabilities {
    margin-top: 1.5rem;
  }

  /* ── pickup availability component ────────────────────────────────────── */
  pickup-availability {
    display: block;
  }

  pickup-availability[available] {
    min-height: 8rem;
  }

  .pickup-availability-preview {
    align-items: flex-start;
    display: flex;
    gap: 0.2rem;
  }

  .pickup-availability-preview .icon {
    flex-shrink: 0;
    height: 1.8rem;
  }

  .pickup-availability-preview .gyanpradip-icon-unavailable {
    height: 1.6rem;
    margin-top: 0.5rem;
    margin-right: 0.5rem;
  }

  .pickup-availability-preview .gyanpradip-icon-map-pin {
    margin-top: 0.3rem;
  }

  .pickup-availability-button {
    background-color: transparent;
    color: rgb(from var(--color-foreground) r g b / 75%);
    letter-spacing: 0.06rem;
    padding: 0 0 0.2rem;
    text-align: left;
    text-decoration: underline;
  }

  .pickup-availability-button:hover {
    color: var(--color-foreground);
  }

  .pickup-availability-info * {
    margin: 0 0 0.6rem;
  }

  /* ── pickup availability drawer ────────────────────────────────────────── */
  pickup-availability-drawer {
    background-color: var(--color-background);
    border: 0.1rem solid rgb(from var(--color-foreground) r g b / 2%);
    height: 100%;
    opacity: 0;
    overflow-y: auto;
    padding: 2rem;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 99;
    transition:
      opacity var(--duration-default) ease,
      transform var(--duration-default) ease;
    transform: translateX(100%);
    width: 100%;
  }

  pickup-availability-drawer[open] {
    transform: translateX(0);
    opacity: 1;
  }

  @media screen and (min-width: 750px) {
    pickup-availability-drawer {
      transform: translateX(100%);
      width: 37.5rem;
    }

    pickup-availability-drawer[open] {
      opacity: 1;
      transform: translateX(0);
      animation: animateDrawerOpen var(--duration-default) ease;
    }
  }

  .pickup-availability-header {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.2rem;
  }

  .pickup-availability-drawer-title {
    margin: 0.5rem 0 0;
  }

  .pickup-availability-header .icon {
    width: 2rem;
  }

  .pickup-availability-drawer-button {
    background-color: transparent;
    border: none;
    color: var(--color-foreground);
    cursor: pointer;
    display: block;
    height: 4.4rem;
    padding: 1.2rem;
    width: 4.4rem;
  }

  .pickup-availability-drawer-button:hover {
    color: rgb(from var(--color-foreground) r g b / 75%);
  }

  .pickup-availability-variant {
    font-size: 1.3rem;
    line-height: 1.2;
    margin: 0 0 1.2rem;
    text-transform: capitalize;
  }

  .pickup-availability-variant > * + strong {
    margin-left: 1rem;
  }

  .pickup-availability-list__item {
    border-bottom: 0.1rem solid rgb(from var(--color-foreground) r g b / 8%);
    padding: 2rem 0;
  }

  .pickup-availability-list__item:first-child {
    border-top: 0.1rem solid rgb(from var(--color-foreground) r g b / 8%);
  }

  .pickup-availability-list__item > * {
    margin: 0;
  }

  .pickup-availability-list__item > * + * {
    margin-top: 1rem;
  }

  .pickup-availability-address {
    font-style: normal;
    font-size: 1.2rem;
    line-height: 1.5;
  }

  .pickup-availability-address p {
    margin: 0;
  }

  .unavailability__location--name {
    display: flex;
  }

  .unavailability__location--name .gyanpradip-icon-unavailable {
    width: 2rem;
    flex-shrink: 0;
    margin-right: 1rem;
  }

  @keyframes animateDrawerOpen {
    0% {
      opacity: 0;
      transform: translateX(100%);
    }

    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }
/* END_BLOCK:_buy-buttons */

/* START_BLOCK:_category-list-card (INDEX:78) */
.category-list .category-list-card {
    list-style: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  .category-list .category-list-card__link,
  .category-list .category-list-card__link--no-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--cl-title-gap, 12px);
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
    color: var(--category-card-accent, var(--color-foreground));
  }

  /* ── Circular / rounded media tile ── */
  .category-list .category-list-card__media {
    position: relative;
    width: min(var(--cl-circle-size, 140px), 100%);
    aspect-ratio: 1;
    margin-inline: auto;
    box-sizing: border-box;
  }

  .category-list .category-list-card__media--has-badge {
    margin-block-end: 1rem;
  }

  /* ── Image aspect ratio (image cards only; icon tiles keep aspect-ratio: 1) ── */
  .category-list .category-list-card__media--ratio-portrait {
    aspect-ratio: 3 / 4;
  }
  .category-list .category-list-card__media--ratio-landscape {
    aspect-ratio: 4 / 3;
  }
  /* Adapt: let the image define the tile height at a fixed width */
  .category-list .category-list-card__media--ratio-adapt {
    aspect-ratio: auto;
  }
  .category-list .category-list-card__media--ratio-adapt .category-list-card__media-inner {
    height: auto;
  }
  .category-list .category-list-card__media--ratio-adapt .category-list-card__img {
    height: auto;
    object-fit: contain;
  }

  .category-list .category-list-card__media-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    background: var(--category-card-bg, rgb(from var(--color-foreground) r g b / 5%));
    color: var(--category-card-accent, var(--color-foreground));
  }

  .category-list .category-list-card__media--circle .category-list-card__media-inner {
    border-radius: 50%;
  }

  .category-list .category-list-card__media--square .category-list-card__media-inner {
    border-radius: var(--cl-card-radius, 16px);
  }

  /* A non-square image ratio can't be a true circle — a 50% radius on a
     portrait/landscape/adapt box just makes a squished ellipse that reads as
     "the aspect ratio did nothing". Use the rounded-corner radius instead so the
     chosen ratio renders as a real rectangle, even when Shape is Circle. */
  .category-list .category-list-card__media--img.category-list-card__media--ratio-portrait .category-list-card__media-inner,
  .category-list .category-list-card__media--img.category-list-card__media--ratio-landscape .category-list-card__media-inner,
  .category-list .category-list-card__media--img.category-list-card__media--ratio-adapt .category-list-card__media-inner {
    border-radius: var(--cl-card-radius, 16px);
  }

  /* Accent ring — white gap between image and the coloured outline */
  .category-list .category-list-card__media--ring .category-list-card__media-inner {
    border: var(--cl-ring-gap, 3px) solid var(--color-background, #fff);
    box-shadow: 0 0 0 var(--cl-ring-width, 3px) var(--category-card-accent, var(--color-foreground));
  }

  /* Simple edge border on the tile */
  .category-list .category-list-card__media--border .category-list-card__media-inner {
    border: var(--cl-border-width, 1px) solid var(--category-card-border, rgb(from var(--color-foreground) r g b / 20%));
  }

  .category-list .category-list-card__img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }

  /* Fixed-ratio image cards (square/portrait/landscape): pin the inner box to fill
     the aspect-ratio tile so the image follows the chosen ratio. In normal flow the
     image's own intrinsic height drives the tile height instead, which is why every
     ratio looked the same. Adapt is excluded — it intentionally sizes to the image. */
  .category-list .category-list-card__media--img:not(.category-list-card__media--ratio-adapt) .category-list-card__media-inner {
    position: absolute;
    inset: 0;
  }

  .category-list .category-list-card__media-inner svg,
  .category-list .category-list-card__media-inner img.category-list-card__img {
    flex-shrink: 0;
  }

  /* Icon glyph sizing inside the tile */
  .category-list .category-list-card__media-inner > svg {
    width: var(--cl-icon-size, 44px);
    height: var(--cl-icon-size, 44px);
    max-width: 60%;
    max-height: 60%;
    object-fit: contain;
  }

  /* ── Focus (keyboard) outline — accessibility ── */
  .category-list a.category-list-card__link:focus-visible {
    outline: none;
  }

  .category-list a.category-list-card__link:focus-visible .category-list-card__media-inner {
    outline: 2px solid var(--category-card-accent, var(--color-foreground));
    outline-offset: 3px;
  }

  /* ── Product-count badge on the tile ── */
  .category-list .category-list-card__badge {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 40%);
    z-index: 1;
    min-width: 2.2rem;
    box-sizing: border-box;
    padding: 0.3rem 0.8rem;
    background: var(--color-background, #fff);
    color: var(--category-card-accent, var(--color-foreground));
    border: 1px solid rgb(from var(--category-card-accent, var(--color-foreground)) r g b / 25%);
    border-radius: 999px;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgb(from var(--color-foreground) r g b / 14%);
  }

  /* ── Title / count label ── */
  .category-list .category-list-card__title {
    display: block;
    font-weight: 600;
    font-size: 1.4rem;
    line-height: 1.3;
    color: var(--category-card-accent, var(--color-foreground));
  }

  .category-list .category-list-card__title-text {
    display: -webkit-box;
    -webkit-line-clamp: var(--category-card-title-lines, 2);
    line-clamp: var(--category-card-title-lines, 2);
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .category-list .category-list-card__count {
    display: block;
    font-weight: 600;
    font-size: 1.2rem;
    margin-block-start: 2px;
    opacity: 0.75;
  }

  @media (max-width: 749px) {
    .category-list .category-list-card__media {
      width: min(var(--cl-circle-size-mobile, 96px), 100%);
    }
    .category-list .category-list-card__title {
      font-size: 1.3rem;
    }
  }
/* END_BLOCK:_category-list-card */

/* START_BLOCK:_collection-banner (INDEX:79) */
.collection-banner {
    position: relative;
    display: flex;
    flex-direction: column;
    /* Neither justify-content nor align-items is set here → they default (flex-start /
       stretch). The content layer fills the banner (100% × 100%) and owns BOTH axes of
       positioning itself, so a Fill-width Group can span the width (row + space-between)
       and multiple stacked children can spread top→bottom (column + space-between). See
       blueprint/collection-banner/GROUP_SPACE_BETWEEN_FULL_WIDTH_FIX.md and
       blueprint/product-card/COLLECTION_BANNER_VERTICAL_ALIGNMENT_LABEL_AND_SPACE_BETWEEN.md */
    height: 100%;
    min-height: var(--banner-min-height, 24rem);
    overflow: hidden;
    border-radius: var(--banner-radius, 0);
    background: var(--color-background);
    isolation: isolate;
  }

  .collection-banner__media,
  .collection-banner__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
  }

  .collection-banner__media--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(from var(--color-foreground) r g b / 6%);
  }
  .collection-banner__media--placeholder svg {
    width: 100%;
    height: 100%;
  }

  .collection-banner__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgb(from var(--banner-overlay-color, var(--color-foreground)) r g b / var(--banner-overlay, 0));
  }

  /* Content layer: sits above the absolutely-positioned media/overlay and fills the FULL
     banner box (100% × 100%) so it owns positioning on both axes:
       - justify-content (--banner-align-block): vertical placement of the stacked children
         — Top/Center/Bottom, or Space between to spread them top→bottom.
       - align-items (--banner-align-inline): horizontal placement — a Fill-width Group can
         span the width (row + space-between) while a Fit Group / bare Text / Button is
         placed left/center/right.
     Full height is what gives Space between a track to distribute along. Stays a flex
     column with a gap so directly-added Text/Button children (no Group wrapper) still stack. */
  .collection-banner__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: var(--banner-align-block, flex-end);
    align-items: var(--banner-align-inline, flex-start);
    gap: 1.2rem;
    width: 100%;
    height: 100%;
    padding: var(--banner-pad, 3.2rem);
  }

  @media (max-width: 767px) {
    .collection-banner {
      min-height: var(--banner-min-height-mobile, 20rem);
    }
    .collection-banner__content { padding: 2rem; }
  }
/* END_BLOCK:_collection-banner */

/* START_BLOCK:_collection-list-card (INDEX:80) */
/* Card styles scoped under .collection-list; per-instance class collection-list-card--BLOCK_ID is set on the root in Liquid. */
  .collection-list .collection-list-card-slide {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    height: auto;
  }

  .collection-list .collection-card-block--list-slot {
    --cc-border-style: none;
    --cc-border-width: 0;
    --cc-pt: 0;
    --cc-pb: 0;
    --cc-pl: 0;
    --cc-pr: 0;
    --cc-mobile-scale: 1;
    width: var(--cc-w, 100%);
    overflow: hidden;
  }

  .collection-list .collection-card-block--list-slot.collection-card-block {
    border-style: var(--cc-border-style, none);
    border-width: var(--cc-border-width, 0);
    border-radius: var(--cc-block-radius, 0);
  }

  .collection-list .collection-card-block__link {
    display: block;
    text-decoration: none;
    color: inherit;
  }

  .collection-list .collection-card-block__image {
    position: relative;
    aspect-ratio: var(--cc-ratio, 1 / 1);
    overflow: hidden;
    border-radius: var(--cc-img-radius, 0);
    width: 100%;
  }

  .collection-list .collection-card-block__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
    display: block;
  }

  .collection-list .collection-card-block__link:hover .collection-card-block__img {
    transform: scale(1.03);
  }

  .collection-list .collection-card-block__overlay-content {
    position: absolute;
    inset: 0;
    display: flex;
    z-index: 1;
    pointer-events: none;
  }

  .collection-list .collection-card-block__overlay-content .collection-card-block__btn,
  .collection-list .collection-card-block__overlay-content .collection-card-block__title {
    pointer-events: auto;
    max-width: calc(100% - 24px);
  }

  .collection-list .collection-card-block__overlay-content--bottom-start {
    align-items: flex-end;
    justify-content: flex-start;
    padding: 1.2rem;
  }

  .collection-list .collection-card-block__overlay-content--center {
    align-items: center;
    justify-content: center;
  }

  .collection-list .collection-card-block__overlay-content .collection-card-block__btn {
    text-transform: uppercase;
    letter-spacing: var(--btn-tracking, var(--tracking-btn, 0.05em));
  }

  .collection-list .collection-card-block__btn-count {
    margin-inline-start: 0.4em;
    font-weight: inherit;
  }

  .collection-list .collection-card-block__image.collection-card-block__image--placeholder {
    background: rgb(var(--placeholder-background));
  }

  .collection-list .collection-card-block__placeholder {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-height: 100%;
    display: block;
    border: none;
    outline: none;
    box-shadow: none;
    object-fit: cover;
    background: rgb(var(--placeholder-background));
    fill: rgb(var(--placeholder-foreground));
  }

  /* Shopify collection-apparel placeholders often ship a light frame rect with stroke;
     drop only rect strokes so illustrated paths (hangers, etc.) stay intact. */
  .collection-list .collection-card-block__placeholder rect {
    stroke: none;
  }

  .collection-list .collection-card-block__image--adapt {
    aspect-ratio: unset;
    min-height: 0;
  }

  .collection-list .collection-card-block__image--adapt.collection-card-block__image--placeholder {
    aspect-ratio: var(--cc-ratio, 1 / 1);
    min-height: 12rem;
  }

  .collection-list .collection-card-block__image--adapt .collection-card-block__placeholder {
    aspect-ratio: 1 / 1;
    height: auto;
    min-height: 12rem;
  }

  .collection-list .collection-card-block__image--adapt .collection-card-block__img--adaptable {
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
    position: relative;
  }

  .collection-list .collection-card-block__title {
    margin: 0;
  }

  .collection-list .collection-card-block__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
  }

  .collection-list .collection-card-block__btn--small {
    padding-block: 0.6rem;
    padding-inline: 1.6rem;
    font-size: 1.2rem;
  }

  .collection-list .collection-card-block__btn--medium {
    padding-block: 1rem;
    padding-inline: 2.4rem;
  }

  .collection-list .collection-card-block__btn--large {
    padding-block: 1.4rem;
    padding-inline: 3.2rem;
    font-size: 1.6rem;
  }

  /* Backdrop blur only — button colors come from color scheme / theme button settings */
  .collection-list .collection-card-block__btn.collection-card-block__btn--backdrop-blur {
    -webkit-backdrop-filter: blur(var(--collection-card-btn-backdrop-blur, 10px));
    backdrop-filter: blur(var(--collection-card-btn-backdrop-blur, 10px));
  }

  @media (prefers-reduced-motion: reduce) {
    .collection-list .collection-card-block__btn.collection-card-block__btn--backdrop-blur {
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
  }

  .collection-list .collection-card-block__info {
    padding-top: 1rem;
  }

  @media screen and (max-width: 749px) {
    .collection-list .collection-card-block--list-slot.collection-card-block {
      width: var(--cc-w-mobile, 100%);
    }
  }
/* END_BLOCK:_collection-list-card */

/* START_BLOCK:_contact-field (INDEX:81) */
.contact-form-block__radio-group {
    border: none;
    padding: 0;
    margin: 0;
  }

  .contact-form-block__radio-group legend {
    margin-bottom: 0.8rem;
    font-size: var(--input-font-size, 1.4rem);
    font-weight: 500;
  }

  .contact-form-block__radio-group--horizontal {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem 1.6rem;
  }

  .contact-form-block__radio-group--vertical {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
  }

  .contact-form-block__radio-group .contact-form-block__radio-label {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    cursor: pointer;
    font-size: var(--input-font-size, 1.4rem);
    user-select: none;
  }

  .contact-form-block__radio-label input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 0.2rem solid var(--color-input-border);
    background-color: var(--color-input-background);
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    margin: 0;
    transition: border-color 0.2s ease, background-color 0.2s ease;
  }

  .contact-form-block__radio-label input[type="radio"]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    background-color: var(--color-foreground);
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.15s ease;
  }

  .contact-form-block__radio-label input[type="radio"]:checked, .contact-form-block__radio-label input[type="radio"]:focus {
    border-color: var(--color-foreground);
    box-shadow: unset;
}

  .contact-form-block__radio-label input[type="radio"]:checked::after {
    transform: translate(-50%, -50%) scale(1);
  }

  .contact-form-block__radio-label:hover input[type="radio"]:not(:checked) {
    border-color: color-mix(in srgb, var(--color-input-border) 40%, var(--color-foreground));
  }

  .contact-form-block__radio-label input[type="radio"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.2rem var(--color-background), 0 0 0 0.4rem var(--color-foreground);
  }
/* END_BLOCK:_contact-field */

/* START_BLOCK:_footer-back-to-top (INDEX:82) */
.footer-btt {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem 0;
  }

  .footer-btt--scroll-reveal {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  .footer-btt--scroll-reveal.footer-btt--visible {
    opacity: 1;
    pointer-events: auto;
  }

  .footer-btt__btn {
    position: relative;
    width: var(--btt-size, 8rem);
    height: var(--btt-size, 8rem);
    border-radius: 50%;
    border: 0.1rem solid rgb(from var(--color-foreground) r g b / 45%);
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--color-foreground);
  }

  .footer-btt__text {
    position: absolute;
    inset: 0;
    animation: footer-btt-spin 10s linear infinite;
  }

  @keyframes footer-btt-spin {
    to { transform: rotate(360deg); }
  }

  .footer-btt__text span {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 1.1rem;
    text-transform: uppercase;
    line-height: 1;
    color: var(--color-foreground);
  }

  .footer-btt__icon {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--btt-size, 10rem) - 4.4rem);
    height: calc(var(--btt-size, 10rem) - 4.4rem);
    border-radius: 50%;
    background: var(--color-background);
    color: var(--color-foreground);
  }

  .footer-btt__icon svg {
    width: var(--btt-icon-size, 2rem);
    height: var(--btt-icon-size, 2rem);
  }
/* END_BLOCK:_footer-back-to-top */

/* START_BLOCK:_footer-column (INDEX:83) */
.footer-column {
    --col-size: calc(
      var(--footer-col-width-raw, 25) * 1%
      - (1 - var(--footer-col-width-raw, 25) / 100)
      * var(--footer-col-gap-h, 2.4rem)
    );
    flex: 0 0 var(--col-size);
    max-width: var(--col-size);
    padding-top: var(--footer-col-pt-d, 0);
    padding-bottom: var(--footer-col-pb-d, 0);
    padding-inline-start: var(--footer-col-pl-d, 0);
    padding-inline-end: var(--footer-col-pr-d, 0);
  }

  @media (max-width: 749px) {
    .footer-column {
      flex: 0 0 100%;
      max-width: 100%;
      padding-top: var(--footer-col-pt-m, 0);
      padding-bottom: var(--footer-col-pb-m, 0);
      padding-inline-start: var(--footer-col-pl-m, 0);
      padding-inline-end: var(--footer-col-pr-m, 0);
    }
  }

  .footer-column__toggle {
    display: none;
    width: 100%;
    background: none;
    border: none;
    border-bottom: 0.1rem solid rgb(from var(--color-foreground) r g b / 15%);
    cursor: pointer;
    justify-content: space-between;
    align-items: center;
    padding: 1.2rem 0;
    color: var(--color-foreground);
    font-weight: 600;
    font-size: 1.6rem;
    text-align: start;
  }

  .footer-column__toggle--borderless {
    border-bottom: none;
  }

  .footer-column__label {
    flex: 1;
  }

  .footer-column__icon {
    font-style: normal;
    font-size: 2rem;
    line-height: 1;
  }

  .footer-column__icon::before {
    content: '+';
  }

  /* ── Column heading ───────────────────────────────────────── */
  .footer-column__heading {
    margin-top: 0;
    margin-bottom: 2.5rem;
  }

  @media (min-width: 750px) {
    .footer-column__heading {
      margin-bottom: 3rem;
    }
  }

  /* ── Collapsible base ─────────────────────────────────────── */
  .footer-column--collapsible .footer-column__inner {
    overflow: hidden;
    height: 0;
  }

  @media (max-width: 749px) {
    .footer-column--collapsible .footer-column__toggle {
      display: flex;
    }

    .footer-column--collapsible.footer-column--open .footer-column__icon::before {
      content: '−';
    }

    /* Heading is shown in the toggle label — hide the in-body duplicate */
    .footer-column--collapsible .footer-column__heading {
      display: none;
    }

    /* Menu block heading also shown via toggle — suppress duplication */
    .footer-column--collapsible .menu-block__heading {
      display: none;
    }

    /* Spacer via ::before — always present, clipped when collapsed.
       Not tied to --open so it cannot disappear before fromHeight is read,
       which was the cause of the visual jump on close. */
    .footer-column--collapsible .footer-column__inner::before {
      content: '';
      display: block;
      height: 1.2rem;
    }
  }

  @media (min-width: 750px) {
    .footer-column--collapsible .footer-column__inner {
      height: auto !important;
      overflow: visible;
    }
  }
/* END_BLOCK:_footer-column */

/* START_BLOCK:_gallery-item (INDEX:84) */
/* _gallery-item — private block (Media gallery section only).
     Spec: blueprint/media-gallery/MEDIA_GALLERY_REBUILD_PLAN.md §3 */

  .gallery-item {
    position: relative;
    isolation: isolate;
    width: 100%;
    aspect-ratio: var(--gallery-aspect, 1);
    overflow: hidden;
    border-radius: var(--border-radius, 8px);
  }

  /* Media layer */
  .gallery-item__media {
    position: absolute;
    inset: 0;
    z-index: 0;
  }
  .gallery-item__image,
  .gallery-item__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .gallery-item__placeholder {
    width: 100%;
    height: 100%;
    display: block;
  }
  .gallery-item__placeholder svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Dark overlay */
  .gallery-item__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgb(0 0 0 / var(--gallery-overlay, 0));
    transition: background-color 0.3s ease;
    pointer-events: none;
  }
  .gallery-item:hover .gallery-item__overlay {
    background: rgb(0 0 0 / calc(var(--gallery-overlay, 0) + 0.1));
  }

  /* Hover icon */
  .gallery-item__hover-icon {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
  }
  .gallery-item:hover .gallery-item__hover-icon {
    opacity: 1;
  }
  .gallery-item__hover-icon svg {
    width: 3.2rem;
    height: 3.2rem;
  }

  /* Full-item link overlay — z-index 4, above product card (z-index 3) */
  .gallery-item__link {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: block;
    text-decoration: none;
    color: inherit;
  }

  /* ── Product card ── z-index 5 sits above the full-item link overlay (z-index 4) */
  .gallery-item__product {
    position: absolute;
    z-index: 5;
    inset-inline: 1.5rem;
    bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem 1rem;
    background: var(--color-background);
    border-radius: 0.8rem;
    box-shadow: 0 2px 12px rgb(0 0 0 / 18%);
    color: var(--color-foreground);
    pointer-events: auto;
  }

  /* Product link — wraps thumbnail + info; stretches to fill the flex row */
  .gallery-item__product-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: inherit;
  }

  /* Position variants */
  .gallery-item__product--top-left,
  .gallery-item__product--top-right {
    bottom: auto;
    top: 1.2rem;
  }
  .gallery-item__product--top-left,
  .gallery-item__product--bottom-left {
    inset-inline-end: auto;
    width: max-content;
    max-width: calc(100% - 3rem);
  }
  .gallery-item__product--top-right,
  .gallery-item__product--bottom-right {
    inset-inline-start: auto;
    width: max-content;
    max-width: calc(100% - 3rem);
  }
  .gallery-item__product--bottom-center {
    inset-inline: 0;
    max-width: calc(100% - 3rem);
    margin-inline: auto;
  }

  /* Product thumbnail */
  .gallery-item__product-thumb-wrap {
    flex-shrink: 0;
    width: 4.8rem;
    height: 4.8rem;
    border-radius: 0.4rem;
    overflow: hidden;
  }
  .gallery-item__product-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .gallery-item__product-thumb-placeholder {
    width: 100%;
    height: 100%;
    background: rgb(from var(--color-foreground) r g b / 8%);
    border-radius: 0.4rem;
  }

  /* Product info column */
  .gallery-item__product-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    gap: 0.6rem;
  }
  .gallery-item__product-name {
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .gallery-item__product-price {
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1;
  }

  /* Action button — icon-only square, outline by default, fills on hover via button--secondary contract */
  .gallery-item__product-action {
    flex-shrink: 0;
  }
  .gallery-item__product-action .gallery-item__atc-btn.button--secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.4rem;
    height: 3.4rem;
    min-width: 3.4rem;
    min-height: 3.4rem;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
    box-sizing: border-box;
  }
  .gallery-item__product-action .gallery-item__atc-btn.button--secondary svg,
  .gallery-item__product-action .gallery-item__atc-btn.button--secondary .icon {
    width: 1.8rem;
    height: 1.8rem;
    flex-shrink: 0;
    pointer-events: none;
  }
  .gallery-item__atc-btn.button--secondary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }
  .gallery-item__atc-btn.button--secondary.loading {
    position: relative;
    pointer-events: none;
    color: transparent !important;
  }
  .gallery-item__atc-btn.button--secondary.loading svg,
  .gallery-item__atc-btn.button--secondary.loading .icon {
    opacity: 0;
    visibility: hidden;
  }
  .gallery-item__atc-btn.button--secondary[aria-busy='true']:not(.loading) {
    opacity: 0.7;
    cursor: wait;
  }

  /* Quick view wrapper — strip its default positioning */
  .gallery-item__product-action .gyanpradip-quick-view {
    position: relative;
    margin: 0;
    z-index: auto;
  }
  .gallery-item__product-action .gyanpradip-quick-view gyanpradip-quick-view-trigger {
    display: block;
  }
/* END_BLOCK:_gallery-item */

/* START_BLOCK:_inventory-status (INDEX:85) */
.product-variant-inventory {
    max-width: 50rem;
  }

  .product-variant-inventory--inner {
    background-color: rgb(from var(--color-foreground) r g b / 6%);
    border-radius: 0.8rem;
    padding: 1.2rem 1.6rem;
  }

  .product__inventory {
    display: flex;
    align-items: center;
    gap: 0.8rem;
  }

  .product__inventory::before {
    content: '';
    display: inline-block;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    background-color: var(--color-foreground);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M6.5 10l2.5 2.5 4.5-5' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C%2Fsvg%3E");
    -webkit-mask-size: contain;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M6.5 10l2.5 2.5 4.5-5' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C%2Fsvg%3E");
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

  .product__inventory > span {
    color: var(--color-foreground);
  }

  .product--no-media .product__inventory {
    justify-content: center;
  }

  /* Keeps container alive during variant swaps to prevent layout shift */
  .product__inventory.visibility-hidden:empty {
    display: block;
  }

  .product__inventory.visibility-hidden:empty::after {
    content: "#";
  }

  .stock__inventgory--status {
    margin-bottom: 5px;
  }

  .stock_countdown_progress {
    width: 100%;
    background: var(--progress-bar-background);
    height: 6px;
    border-radius: 3px;
    margin-top: 0.8rem;
  }

  span.stock_progress_bar {
    display: block;
    background: var(--progress-bar-foreground);
    background-attachment: fixed;
    height: 100%;
    transition: width 2.5s ease;
    border-radius: 3px 0 0 3px;
  }

  /* ── Merged mode: fuses this block onto the bottom of the _price offer box
     directly above it (same tint, radius on the bottom only, flush against it,
     content pushed to the right). See blocks/_price.liquid for the top half. */
  .product-variant-inventory--merged {
    max-width: none;
    margin-top: calc(var(--pd-gap, 1.5rem) * -1);
  }

  .product-variant-inventory--merged .product-variant-inventory--inner {
    background: #eaf7ee;
    border-radius: 0 0 1.2rem 1.2rem;
    padding: 0 1.6rem 1.4rem;
  }

  .product-variant-inventory--merged .product__inventory {
    justify-content: flex-end;
  }

  /* ── JS-enhanced state: product-info.js moves the merged block from below
     the price box (fallback above, for no-JS) into blocks/_price.liquid's
     .price__box_wrapper, so it sits inline on the same row as the price,
     right-aligned and vertically centered — matching the target design. The
     child-combinator selector outranks the fallback rules above regardless
     of source order, so this only takes effect once the move happens. */
  .price__box_wrapper > .product-variant-inventory--merged {
    max-width: none;
    margin-top: 0;
    margin-left: auto;
    flex: 0 0 auto;
  }

  .price__box_wrapper > .product-variant-inventory--merged .product-variant-inventory--inner {
    background: none;
    border-radius: 0;
    padding: 0;
  }

  .price__box_wrapper > .product-variant-inventory--merged .product__inventory {
    white-space: nowrap;
  }

  /* No room for the progress bar inline next to the price row */
  .price__box_wrapper > .product-variant-inventory--merged .stock_countdown_progress {
    display: none;
  }

  /* Hide the merged block until product-info.js has moved it (see
     mergeInventoryIntoPriceBox in assets/product-info.js), so a slow script
     load never shows the below-price fallback layout before it visibly jumps
     into place. <product-info> only matches :defined once that move has
     already run (it happens synchronously in connectedCallback), so the
     fallback layout is never painted. The <noscript> below restores it when
     JS is unavailable. */
  product-info:not(:defined) .product-variant-inventory--merged {
    visibility: hidden;
  }

  /* On narrow phones the price row's own badge wrap (see blocks/_price.liquid)
     pushes this onto its own line below the price — right-aligned there reads
     oddly floating under the badge, so start-align it instead and add
     breathing room above it. */
  @media screen and (max-width: 479px) {
    .price__box_wrapper > .product-variant-inventory--merged {
      margin-left: 0;
      margin-top: 0.8rem;
    }

    .price__box_wrapper > .product-variant-inventory--merged .product__inventory {
      justify-content: flex-start;
    }
  }

  /* ── "Merge next to quantity" mode: fuses this block onto the quantity
     stepper's row (see blocks/product-quantity.liquid), inline and to the
     right, no background/box — mirrors the price-merge mode above but for
     the quantity row instead. product-info.js moves this block from below
     the price (fallback above, for no-JS) into #quantity__row-{{ id }}. */
  .product-quantity-block__row > .product-variant-inventory--merged-quantity {
    max-width: none;
    margin: 0;
  }

  .product-quantity-block__row > .product-variant-inventory--merged-quantity .product-variant-inventory--inner {
    background: none;
    border-radius: 0;
    padding: 0;
  }

  .product-quantity-block__row > .product-variant-inventory--merged-quantity .product__inventory {
    white-space: nowrap;
  }

  /* No room for the progress bar inline next to the quantity stepper */
  .product-quantity-block__row > .product-variant-inventory--merged-quantity .stock_countdown_progress {
    display: none;
  }

  /* Same synchronous-move-before-paint guard as the price-merge mode. */
  product-info:not(:defined) .product-variant-inventory--merged-quantity {
    visibility: hidden;
  }
/* END_BLOCK:_inventory-status */

/* START_BLOCK:_logo-list-item (INDEX:86) */
/* blocks/_logo-list-item.liquid — private block, used only in sections/logo-list.liquid.
     Always renders as .swiper-slide so it works in both Slider and Grid layout modes.
     In Grid mode the .swiper-slide class is inert (no .swiper parent → Swiper CSS never activates). */

  .logo-list-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    overflow: hidden;
  }

  /* Logo images must use contain (not cover) so the full mark is visible without cropping */
  .logo-list-item .image-block {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-height: var(--logo-height, none);
  }
  .logo-list-item .image-block__media {
    max-height: var(--logo-height, none);
    width: 100%;
  }
  .logo-list-item .image-block__img {
    object-fit: contain;
    max-height: var(--logo-height, none);
  }
/* END_BLOCK:_logo-list-item */

/* START_BLOCK:_marquee-double-images (INDEX:87) */
/**
   * Custom properties must live on `.marquee-double-images` (or any ancestor of
   * `__stack`), not on `__stack` itself. Defining `--md-plate-*` on `__stack`
   * replaced inherited values from the inline `style` on the parent and locked
   * size/overlap to the stylesheet defaults (so the range settings had no effect).
   */
  .marquee-double-images {
    --md-plate-w: 4.8rem;
    --md-plate-h: 4.8rem;
    --md-overlap: 0.35;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    font-size: inherit;
  }

  .marquee-double-images__stack {
    position: relative;
    width: calc(var(--md-plate-w) * (2 - var(--md-overlap)));
    height: var(--md-plate-h);
    flex-shrink: 0;
  }

  .marquee-double-images__plate {
    position: absolute;
    top: 0;
    width: var(--md-plate-w);
    height: var(--md-plate-h);
    border-radius: var(--md-radius, 0);
    overflow: hidden;
    background: rgb(from var(--color-foreground) r g b / 6%);
  }

  .marquee-double-images__plate--back {
    left: 0;
    z-index: 0;
  }

  .marquee-double-images__plate--front {
    left: calc(var(--md-plate-w) * (1 - var(--md-overlap)));
    z-index: 1;
  }

  .marquee-double-images__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
/* END_BLOCK:_marquee-double-images */

/* START_BLOCK:_marquee-image (INDEX:88) */
.marquee-image {
    display: block;
    box-sizing: border-box;
    flex-shrink: 0;
    width: var(--marquee-img-w);
    height: var(--marquee-img-h);
    border-radius: var(--marquee-img-radius, 0);
    overflow: hidden;
  }

  .marquee-image--link {
    text-decoration: none;
    color: inherit;
  }

  .marquee-image__media {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .marquee-image__img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  .marquee-image--placeholder .marquee-image__media {
    background: rgb(from var(--color-foreground) r g b / 4%);
  }

  .marquee-image__placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    fill: rgb(from var(--color-foreground) r g b / 60%);
  }

  @media screen and (max-width: 749px) {
    .marquee-image {
      width: var(--marquee-img-w-mobile);
      height: var(--marquee-img-h-mobile);
    }
  }
/* END_BLOCK:_marquee-image */

/* START_BLOCK:_marquee-item (INDEX:89) */
/* _marquee-item — private block (only used inside sections/marquee.liquid).
     Whitelisted children: text, _marquee-image, video, _marquee-double-images.
     Spec: blueprint/skill/HOMEPAGE_SECTIONS_PLAN.md §9 */

  /**
   * `_marquee-image` is a fixed-size tile (`blocks/_marquee-image.liquid`).
   * Constrain flex item so narrow viewports / large settings still lay out predictably.
   */
  .marquee-item > .marquee-image,
  .marquee-item > a.marquee-image {
    min-width: 0;
    max-width: min(100%, 80rem);
  }

  .marquee-item {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: var(--marquee-item-gap, 12px);
    padding-block-start: var(--padding-block-start, 0);
    padding-block-end: var(--padding-block-end, 0);
    padding-inline-start: var(--padding-inline-start, 0);
    padding-inline-end: var(--padding-inline-end, 0);
    margin-inline-end: var(--marquee-item-gap-after, var(--marquee-gap, 40px));
  }

  /* Per-item color overrides — only applied when not inheriting */
  .marquee-item--color-override {
    color: var(--marquee-item-color, inherit);
    background-color: var(--marquee-item-bg, transparent);
  }

  @media (max-width: 749px) {
    .marquee-item {
      margin-inline-end: var(--marquee-item-gap-after-mobile, var(--marquee-gap-mobile, 24px));
    }
  }
/* END_BLOCK:_marquee-item */

/* START_BLOCK:_media-gallery-header (INDEX:90) */
/* _media-gallery-header — static private block (Media gallery section only).
     Holds the section's title + optional description as `text` children.
     Spec: blueprint/media-gallery/MEDIA_GALLERY_REBUILD_PLAN.md §1 */

  .media-gallery-header {
    display: flex;
    flex-direction: column;
    gap: var(--mgh-gap, 12px);
    padding-block-start: var(--mgh-pad-top, 0px);
    padding-block-end: var(--mgh-pad-bottom, 0px);
    padding-inline-start: var(--mgh-pad-left, 0px);
    padding-inline-end: var(--mgh-pad-right, 0px);
  }

  .media-gallery-header--align-left   { align-items: flex-start; text-align: start; }
  .media-gallery-header--align-center { align-items: center;     text-align: center; }
  .media-gallery-header--align-right  { align-items: flex-end;   text-align: end; }

  /* Content column — carries the vertical gap between title and description */
  .media-gallery-header__content {
    display: flex;
    flex-direction: column;
    gap: var(--mgh-gap, 12px);
  }

  /* Row layout when header nav is injected beside the heading */
  .media-gallery-header--has-nav {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
  }
  .media-gallery-header--has-nav .media-gallery-header__content {
    flex: 1;
    min-width: 0;
  }

  /* Alignment modifiers: on --has-nav, target __content not the row itself */
  .media-gallery-header--has-nav.media-gallery-header--align-left   .media-gallery-header__content { align-items: flex-start; }
  .media-gallery-header--has-nav.media-gallery-header--align-center .media-gallery-header__content { align-items: center; }
  .media-gallery-header--has-nav.media-gallery-header--align-right  .media-gallery-header__content { align-items: flex-end; }

  /* Header nav buttons row */
  .media-gallery-header__nav {
    display: flex;
    gap: 0.8rem;
    flex-shrink: 0;
    align-items: center;
  }
  .media-gallery-header__nav .swiper-nav {
    position: relative;
    top: auto; bottom: auto; left: auto; right: auto; inset-inline: auto;
    transform: none;
    width: 4.4rem;
    height: 4.4rem;
    min-width: 4.4rem;
    min-height: 4.4rem;
    max-width: 4.4rem;
    max-height: 4.4rem;
    box-sizing: border-box;
    flex: 0 0 auto;
    align-self: center;
    margin: 0;
    aspect-ratio: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
  }
  .media-gallery-header__nav .swiper-nav.swiper-nav--bg-none {
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    max-width: none;
    max-height: none;
    aspect-ratio: auto;
    padding: 0.4rem;
  }
  .media-gallery-header__nav .swiper-nav.swiper-nav--bg-capsule {
    width: auto;
    min-width: 5.6rem;
    max-width: none;
    padding-inline: 1.2rem;
    aspect-ratio: auto;
    @media only screen and (min-width: 750px) {
      min-width: 9rem;
      min-height: 6rem;
    }
    svg {
      width: 1.8rem;
      height: auto;
      @media only screen and (min-width: 750px) {
        width: 2.5rem;
        height: auto;
      }
    }
  }

  @media (max-width: 749px) {
    .media-gallery-header {
      padding-block-start: var(--mgh-pad-top-mobile, var(--mgh-pad-top, 0px));
      padding-block-end: var(--mgh-pad-bottom-mobile, var(--mgh-pad-bottom, 0px));
      padding-inline-start: var(--mgh-pad-left-mobile, var(--mgh-pad-left, 0px));
      padding-inline-end: var(--mgh-pad-right-mobile, var(--mgh-pad-right, 0px));
    }
    .media-gallery-header--mobile-align-left   { align-items: flex-start; text-align: start; }
    .media-gallery-header--mobile-align-center { align-items: center;     text-align: center; }
    .media-gallery-header--mobile-align-right  { align-items: flex-end;   text-align: end; }
    .media-gallery-header--has-nav.media-gallery-header--mobile-align-left   .media-gallery-header__content { align-items: flex-start; }
    .media-gallery-header--has-nav.media-gallery-header--mobile-align-center .media-gallery-header__content { align-items: center; }
    .media-gallery-header--has-nav.media-gallery-header--mobile-align-right  .media-gallery-header__content { align-items: flex-end; }
  }
/* END_BLOCK:_media-gallery-header */

/* START_BLOCK:_price (INDEX:91) */
/* _price — private PDP block. Price + % OFF badge + tax notice + installments.
     The #price-{section.id} id is hot-swapped by product-info.js on variant change. */

  /* ── Offer box: soft tint card wrapping the price row (screenshot design).
     No existing "success" theme token, so hardcoded fallbacks — same precedent
     as .price__badge-pct/.product__tax below. */
  .price__box_wrapper {
    --offer-box-bg: #eaf7ee;
    background: var(--offer-box-bg);
    border-radius: 1.2rem;
    padding: 1.4rem 1.6rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 0.4rem;
  }

  /* Label + price/badge stack. Left-hand side of the flex row; the merged
     inventory-status block (see blocks/_inventory-status.liquid) is moved in
     here as the right-hand flex item by product-info.js on connect. */
  .price__box_wrapper-left {
    flex: 1 1 auto;
    min-width: 0;
  }

  .price__offer-label {
    display: block;
    font-size: 1.2rem;
    color: rgb(from var(--color-foreground) r g b / 70%);
    margin-bottom: 0.4rem;
  }

  /* ── Base price element ── */
  .price {
    font-size: 1.6rem;
    letter-spacing: 0.1rem;
    line-height: calc(1 + 0.5 / var(--font-body-scale));
    color: var(--color-foreground);
  }

  .price.price--unavailable {
    visibility: hidden;
  }

  .price--end {
    text-align: right;
  }

  .price .price-item {
    display: inline-block;
    margin: 0;
  }

  @media screen and (min-width: 750px) {
    .price {
      margin-bottom: 0;
    }
  }

  /* ── Visibility toggles (on-sale / sold-out states) ── */
  .price--sold-out .price__availability,
  .price__regular {
    display: block;
  }

  .price__sale,
  .price__availability,
  .price .price__badge-sale,
  .price .price__badge-sold-out,
  .price--on-sale .price__regular,
  .price--on-sale .price__availability {
    display: none;
  }

  .price--sold-out .price__badge-sold-out,
  .volume-pricing--sale-badge .price__badge-sale {
    display: inline-block;
  }

  /* ── Sale state: price__sale row ──
     Scoped to .price__box_wrapper (specificity 0,3,0) to beat gyanpradip-price.css's
     `.price--on-sale .price__sale { display: initial }` (0,2,0) which resets flex. */
  .price__box_wrapper .price--on-sale .price__sale {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.5rem;
  }

  /* Tighten line-height on both price items so half-leading doesn't create
     optical misalignment inside the centered flex row. */
  .price__box_wrapper .price--on-sale .price__sale .price-item--sale,
  .price__box_wrapper .price--on-sale .price__sale .price-item--regular {
    line-height: 1.1;
  }

  .price--center {
    display: initial;
    justify-content: center;
  }

  /* ── Price sizes ── */
  .price__box_wrapper .price--large .price-item--sale,
  .price__box_wrapper .price--large .price__regular .price-item--regular {
    font-size: 3.5rem;
    letter-spacing: 0;
  }

  .price__box_wrapper .price--on-sale .price-item--regular {
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: 0;
    text-decoration: line-through;
    text-decoration-color: rgb(from var(--color-foreground) r g b / 40%);
    color: rgb(from var(--color-foreground) r g b / 55%);
  }

  @media screen and (max-width: 749px) {
    .price__box_wrapper .price--large .price-item--sale,
    .price__box_wrapper .price--large .price__regular .price-item--regular {
      font-size: 2.8rem;
    }
    .price__box_wrapper .price--on-sale .price-item--regular {
      font-size: 1.6rem;
    }
  }

  /* On narrow phones the sale price + struck-through price + % OFF badge
     (nowrap above so they read as one price on wider screens) no longer fit
     on one line together with the merged inventory status taking its own
     space in .price__box_wrapper. Let the badge drop to its own line instead
     of squeezing/overflowing. */
  @media screen and (max-width: 479px) {
    .price__box_wrapper .price--on-sale .price__sale {
      flex-wrap: wrap;
      row-gap: 0.2rem;
    }
  }

  /* ── Unit price ── */
  .unit-price {
    display: block;
    font-size: 1.1rem;
    letter-spacing: 0.04rem;
    line-height: calc(1 + 0.2 / var(--font-body-scale));
    margin-top: 0.2rem;
    text-transform: uppercase;
    color: rgb(from var(--color-foreground) r g b / 50%);
  }

  /* ── Discount % OFF badge ── */
  .price__badge-pct {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #e53e3e;
    color: #ffffff;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.05rem;
    line-height: 1;
    padding: 0.8rem 1.4rem;
    border-radius: 0.3rem;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Suppress the generic "SALE" text badge — design uses % badge instead */
  .price__box_wrapper .price__badge-sale {
    display: none !important;
  }

  /* ── Tax / duties notice ── */
  .product__tax {
    color: #38a169;
    font-size: 1.3rem;
    margin-top: 1.5rem;
  }

  /* ── Misc product context rules ── */
  
  .product .price dl {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }

  .product .price--sold-out .price__badge-sale {
    display: none;
  }

  .product--no-media .price {
    text-align: center;
  }
/* END_BLOCK:_price */

/* START_BLOCK:_product-accelerated-checkout (INDEX:92) */
.product-accelerated-checkout-block {
    width: var(--co-w, fit-content);
  }

  @media screen and (max-width: 749px) {
    .product-accelerated-checkout-block {
      width: var(--co-w-mob, var(--co-w, fit-content));
    }
  }
/* END_BLOCK:_product-accelerated-checkout */

/* START_BLOCK:_product-add-to-cart (INDEX:93) */
.product-add-to-cart-block {
    width: var(--atc-w, fit-content);
  }

  @media screen and (max-width: 749px) {
    .product-add-to-cart-block {
      width: var(--atc-w-mob, var(--atc-w, fit-content));
    }
  }
/* END_BLOCK:_product-add-to-cart */

/* START_BLOCK:_product-additional-field (INDEX:94) */
/* _product-additional-field — private PDP block. Engraving text + file upload
     line-item properties. Inputs bind to the product form by id via form="".
     Spec: §7. */
/* END_BLOCK:_product-additional-field */

/* START_BLOCK:_product-author-bio (INDEX:95) */
/* _product-author-bio — private PDP block. Collapsible "About the Author"
     panel: photo + name + bio for EACH linked author, sourced from a LIST
     metaobject-reference metafield (default custom.author) — a book can have
     multiple authors. Mirrors the _product-tab accordion chrome. When
     show_photo is on but an author entry has no photo, a generic
     placeholder circle renders instead so the layout stays aligned. */

  .product-author-bio__entry {
    display: flex;
    gap: 1.6rem;
    align-items: flex-start;
  }

  .product-author-bio__entry + .product-author-bio__entry {
    margin-top: 1.6rem;
    padding-top: 1.6rem;
    border-top: 0.1rem solid rgb(from var(--color-foreground) r g b / 8%);
  }

  .product-author-bio__photo {
    flex-shrink: 0;
    width: 6.4rem;
    height: 6.4rem;
    border-radius: 100%;
    overflow: hidden;
  }

  .product-author-bio__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .product-author-bio__photo--placeholder {
    background: rgb(from var(--color-foreground) r g b / 10%);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .product-author-bio__photo--placeholder svg {
    width: 55%;
    height: 55%;
    fill: rgb(from var(--color-foreground) r g b / 35%);
  }

  .product-author-bio__name {
    margin: 0 0 0.6rem;
  }

  .product-author-bio__text {
    margin: 0;
  }
/* END_BLOCK:_product-author-bio */

/* START_BLOCK:_product-author (INDEX:96) */
/* _product-author — private PDP block. Byline reading "By <Author(s)>",
     sourced from a LIST metaobject-reference metafield (default custom.author)
     — a book can have multiple authors. Each name links to /collections/all
     filtered by that author (same link built by the "Specification" tab's
     author row — see blocks/_product-info-tab-specification.liquid and
     snippets/gyanpradip-authors-joined.liquid). */

  .product-author {
    margin: 0;
    display: block;
  }

  .product-author__prefix {
    opacity: 0.7;
    margin-right: 0.4rem;
  }

  .product-author a {
    text-decoration: none;
  }

  .product-author a:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
    text-underline-offset: 0.2rem;
  }
/* END_BLOCK:_product-author */

/* START_BLOCK:_product-card-buy (INDEX:97) */
/* _product-card-buy — sub-block of _product-card.
     Spec: blueprint/sections/PRODUCT_TABS_IMPLEMENTATION_PLAN.md §6.5
           blueprint/product-cards/PRODUCT_CARD_BUY_OVER_MEDIA_AND_ICON_LAYOUT_PLAN.md */

  /* Overlap buy CTA with media: same grid cell as .product-card-media (capture-once safe). */
  .product-card__content:has(.product-card-buy--over-media:not(.product-card-buy--mobile-flow-below)) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .product-card__content:has(.product-card-buy--over-media:not(.product-card-buy--mobile-flow-below))
    > .product-card-media {
    grid-column: 1;
    grid-row: 1;
  }

  .product-card__content:has(.product-card-buy--over-media:not(.product-card-buy--mobile-flow-below))
    > .product-card-buy.product-card-buy--over-media {
    grid-column: 1;
    grid-row: 1;
    align-self: stretch;
    width: 100%;
    min-height: 0;
  }

  .product-card-buy {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
  }

  /* Button size — sets the CTA height/padding/font-size + compact-icon square size. */
  .product-card-buy--size-small {
    --pcb-btn-min-height: 3.8rem;
    --pcb-btn-padding: 0.6rem 1.2rem;
    --pcb-btn-font-size: 1.2rem;
    --pcb-icon-fit-size: 4.4rem;
  }

  .product-card-buy--size-medium {
    --pcb-btn-min-height: var(--input-height, 5rem);
    --pcb-btn-padding: 1rem 1.6rem;
    --pcb-btn-font-size: 1.4rem;
    --pcb-icon-fit-size: 5.6rem;
  }

  .product-card-buy--size-large {
    --pcb-btn-min-height: 6.2rem;
    --pcb-btn-padding: 1.4rem 2rem;
    --pcb-btn-font-size: 1.6rem;
    --pcb-icon-fit-size: 6.4rem;
  }

  .product-card-buy__media-shell {
    display: block;
    width: 100%;
  }

  .product-card-buy__row {
    display: flex;
    flex-direction: row;
    gap: 0.8rem;
    align-items: stretch;
  }

  /* The buy-now <form> wrapper shouldn't count as its own flex item — its
     button should sit in the row exactly like the primary CTA does. */
  .product-card-buy__buy-now-form {
    display: contents;
  }

  /* Qty column capped at 12rem; CTA grows for the rest (no flex-grow on stepper). */
  .product-card-buy__row quantity-input,
  .product-card-buy__row gyanpradip-quantity-input {
    flex: 0 1 12rem;
    max-width: 12rem;
    min-width: 0;
  }

  .product-card-buy .quantity {
    width: 100%;
    max-width: 12rem;
    min-width: 0;
    align-items: stretch;
  }

  .product-card-buy .quantity .quantity__button {
    width: 3.8rem;
    flex-shrink: 0;
  }

  .product-card-buy .quantity .quantity__button svg,
  .product-card-buy .quantity .quantity__button .svg-wrapper {
    width: 1.2rem;
    height: 1.2rem;
    display: block;
  }

  .product-card-buy .quantity input.quantity__input[type='number'] {
    font-size: clamp(
      1.3rem,
      calc(var(--input-font-size, 1.6rem) * 1.08),
      1.8rem
    );
    padding-inline: 0.4rem;
  }

  .product-card-buy .product-card-buy__btn.button {
    flex: 1 1 auto;
    display: inline-flex;
    width: auto;
    min-width: 0;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: var(--pcb-btn-min-height, var(--input-height, 5rem));
    margin-block: 0;
    padding: var(--pcb-btn-padding, 1rem 1.6rem);
    font-size: var(--pcb-btn-font-size, 1.4rem);
    font-weight: var(--btn-font-weight, 500);
    text-transform: var(--btn-transform);
    letter-spacing: 0.05em;
    gap: 0.6rem;
  }

  .product-card-buy__icon-wrap {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
  }

  /* Icon sizes are in em, relative to the button's own font-size (--pcb-btn-font-size) —
     they grow/shrink automatically with the Button size setting. */
  .product-card-buy__icon-wrap .icon {
    width: 1.286em;
    height: 1.286em;
  }

  .product-card-buy__icon-wrap--plus svg,
  .product-card-buy__icon-wrap--plus .icon {
    width: 1.143em;
    height: 1.143em;
  }

  /* Icon with text — basket slightly larger than plus for legibility vs label. */
  .product-card-buy--content-icon_text .product-card-buy__icon-wrap--basket .icon,
  .product-card-buy--content-icon_text .product-card-buy__icon-wrap--basket svg {
    width: 1.429em;
    height: 1.429em;
  }

  .product-card-buy--content-icon_text .product-card-buy__icon-wrap--plus svg,
  .product-card-buy--content-icon_text .product-card-buy__icon-wrap--plus .icon {
    width: 1.286em;
    height: 1.286em;
  }

  .product-card-buy--content-icon .product-card-buy__icon-wrap .icon,
  .product-card-buy--content-icon .product-card-buy__icon-wrap--plus svg {
    width: 1.714em;
    height: 1.714em;
  }

  .product-card-buy--content-icon:not(.product-card-buy--over-media) .product-card-buy__btn.button,
  .product-card-buy--content-icon.product-card-buy--mobile-flow-below .product-card-buy__btn.button {
    min-width: var(--pcb-icon-fit-size, 5.6rem);
    min-height: var(--pcb-icon-fit-size, 5.6rem);
    padding: 0 1.2rem;
  }

  /* "Show icon only on mobile" (per button — primary and secondary each opt in
     independently). --desk-text means the desktop display is text-only, so the icon
     is present in the markup but hidden above 749px, leaving the label alone. */
  .product-card-buy__btn--mobicon.product-card-buy__btn--desk-text .product-card-buy__icon-wrap {
    display: none;
  }

  @media (max-width: 749px) {
    /* Hide this button's label on phones; reveal the (possibly desktop-hidden) icon
       so only the icon remains. Scoped to the button, so the two toggles don't clash. */
    .product-card-buy__btn--mobicon .product-card-buy__label {
      display: none;
    }

    .product-card-buy__btn--mobicon.product-card-buy__btn--desk-text .product-card-buy__icon-wrap {
      display: inline-flex;
    }
  }

  .product-card-buy__row .product-card-buy__btn:only-child {
    flex: 1 1 100%;
    width: 100%;
  }

  .product-card-buy--icon-full.product-card-buy--over-media:not(.product-card-buy--mobile-flow-below)
    .product-card-buy__row
    > .product-card-buy__btn:only-child {
    width: 100%;
  }

  .product-card-buy--icon-fit.product-card-buy--over-media:not(.product-card-buy--mobile-flow-below)
    .product-card-buy__btn.button {
    width: var(--pcb-icon-fit-size, 5.6rem);
    min-width: var(--pcb-icon-fit-size, 5.6rem);
    height: var(--pcb-icon-fit-size, 5.6rem);
    min-height: var(--pcb-icon-fit-size, 5.6rem);
    padding: 0;
    flex: 0 0 auto;
  }

  /* Compact icon hit-target: Square uses theme button radius; Circle is a full round control. */
  .product-card-buy--compact-shape-circle.product-card-buy--icon-fit.product-card-buy--over-media:not(
      .product-card-buy--mobile-flow-below
    )
    .product-card-buy__btn.button,
  .product-card-buy--compact-shape-circle.product-card-buy--icon-fit.product-card-buy--over-media:not(
      .product-card-buy--mobile-flow-below
    )
    .gyanpradip-quick-view
    gyanpradip-quick-view-trigger
    .product-card-buy__btn.button {
    border-radius: 50%;
  }

  .product-card-buy--icon-fit.product-card-buy--over-media:not(.product-card-buy--mobile-flow-below)
    .product-card-buy__row {
    width: auto;
    justify-content: inherit;
  }

  .product-card-buy .product-card-buy__btn.button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .product-card-buy .product-card-buy__btn.button.loading {
    position: relative;
    pointer-events: none;
    color: transparent !important;
  }

  .product-card-buy .product-card-buy__btn.button.loading .product-card-buy__icon-wrap,
  .product-card-buy .product-card-buy__btn.button.loading .product-card-buy__label {
    opacity: 0;
  }

  .product-card-buy .product-card-buy__btn.button.loading .product-card-buy__icon-wrap {
    visibility: hidden;
  }

  .product-card-buy .product-card-buy__btn.button.loading::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2rem;
    height: 2rem;
    margin-left: -1rem;
    margin-top: -1rem;
    animation: loading var(--duration-long) infinite linear;
    border-radius: 100%;
    box-sizing: content-box;
    display: block;
    border: 0.25rem solid rgb(from var(--button-color) r g b / 38%);
    border-left-color: transparent;
  }

  .product-card-buy__btn[aria-busy='true']:not(.loading) {
    opacity: 0.7;
    cursor: wait;
  }

  .product-card--placeholder .product-card-buy__btn {
    pointer-events: none;
    opacity: 0.6;
  }

  .product-card-buy .gyanpradip-quick-view {
    position: relative;
    grid-row-start: unset;
    margin: 0;
    z-index: 2;
    flex: 1 1 auto;
    display: flex;
    min-width: 0;
    width: auto;
  }

  .product-card-buy--icon-fit.product-card-buy--over-media:not(.product-card-buy--mobile-flow-below)
    .gyanpradip-quick-view {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
  }

  .product-card-buy--icon-fit.product-card-buy--over-media:not(.product-card-buy--mobile-flow-below)
    .gyanpradip-quick-view
    gyanpradip-quick-view-trigger
    .product-card-buy__btn.button {
    width: var(--pcb-icon-fit-size, 5.6rem);
    min-width: var(--pcb-icon-fit-size, 5.6rem);
  }

  .product-card-buy .gyanpradip-quick-view gyanpradip-quick-view-trigger {
    flex: 1 1 auto;
    display: flex;
    min-width: 0;
    width: auto;
  }

  .product-card-buy__row .gyanpradip-quick-view:only-child {
    flex: 1 1 100%;
    width: 100%;
  }

  .product-card-buy .gyanpradip-quick-view gyanpradip-quick-view-trigger .product-card-buy__btn.button {
    width: 100%;
  }

  .product-card-buy__error {
    margin: 0;
    padding: 0.8rem 1rem;
    font-size: 1.2rem;
    line-height: 1.45;
    font-weight: 500;
    border-radius: var(--input-border-radius, 0.4rem);
    border: var(--input-border-width, 0.1rem) solid rgb(from #d97706 r g b / 42%);
    background-color: rgb(from #fff7ed r g b / 100%);
    color: rgb(from #9a3412 r g b / 100%);
    box-sizing: border-box;
  }

  /* Over media: shell covers the image; error drops below the media box */
  .product-card-buy--over-media:not(.product-card-buy--mobile-flow-below),
  .product-card-buy--over-media.product-card-buy--mobile-flow-below {
    position: relative;
  }

  .product-card-buy--over-media:not(.product-card-buy--mobile-flow-below) .product-card-buy__media-shell {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
    padding: 1.5rem 1.6rem;
    box-sizing: border-box;
    pointer-events: none;
    z-index: 3;
  }

  .product-card-buy--over-media:not(.product-card-buy--mobile-flow-below) .product-card-buy__row {
    pointer-events: auto;
    width: 100%;
  }

  .product-card-buy--over-media:not(.product-card-buy--mobile-flow-below)
    .product-card-buy__media-shell--pos-left {
    justify-content: flex-end;
    align-items: flex-start;
  }

  .product-card-buy--over-media:not(.product-card-buy--mobile-flow-below)
    .product-card-buy__media-shell--pos-right {
    justify-content: flex-end;
    align-items: flex-end;
  }

  .product-card-buy--over-media:not(.product-card-buy--mobile-flow-below)
    .product-card-buy__media-shell--pos-top {
    justify-content: flex-start;
    align-items: center;
  }

  .product-card-buy--over-media:not(.product-card-buy--mobile-flow-below)
    .product-card-buy__media-shell--pos-bottom {
    justify-content: flex-end;
    align-items: center;
  }

  .product-card-buy--over-media:not(.product-card-buy--mobile-flow-below)
    .product-card-buy__media-shell--pos-center {
    justify-content: center;
    align-items: center;
  }

  .product-card-buy--over-media:not(.product-card-buy--mobile-flow-below)
    .product-card-buy__error {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-block-start: 0.6rem;
    z-index: 4;
  }

  /* Hover visibility (desktop fine pointer): reveal on card hover / focus-within */
  @media (hover: hover) and (pointer: fine) {
    .product-card-buy--over-media.product-card-buy--visibility-hover:not(.product-card-buy--mobile-flow-below) {
      opacity: 0;
      transition: opacity 0.2s ease;
    }

    .product-card:hover
      .product-card-buy--over-media.product-card-buy--visibility-hover:not(.product-card-buy--mobile-flow-below),
    .product-card:focus-within
      .product-card-buy--over-media.product-card-buy--visibility-hover:not(.product-card-buy--mobile-flow-below) {
      opacity: 1;
    }
  }

  @media (hover: none), (pointer: coarse) {
    .product-card-buy--over-media.product-card-buy--visibility-hover:not(.product-card-buy--mobile-flow-below) {
      opacity: 1;
    }
  }

  /* Mobile reorder: below image — class toggled by gyanpradip-product-card.js */
  .product-card-buy--over-media.product-card-buy--mobile-flow-below .product-card-buy__media-shell {
    position: relative;
    inset: auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    z-index: auto;
  }

  .product-card-buy--over-media.product-card-buy--mobile-flow-below .product-card-buy__error {
    position: relative;
    top: auto;
    margin-block-start: 0;
  }
/* END_BLOCK:_product-card-buy */

/* START_BLOCK:_product-card-media (INDEX:99) */
/* _product-card-media — sub-block of _product-card.
     Reads closest.product. Renders the product's featured image with
     optional hover swap to the second media.
     Spec: blueprint/sections/PRODUCT_TABS_IMPLEMENTATION_PLAN.md §6.6
     Pattern: mirrors Horizon's _product-card-gallery.liquid */

  .product-card-media {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: var(--media-aspect, 3 / 4);
    border-radius: var(--media-radius, 0);
    background: var(--media-bg, rgb(from var(--color-foreground) r g b / 4%));
    isolation: isolate;
  }
  .product-card-media--adapt { aspect-ratio: auto; }

  .product-card-media__image,
  .product-card-media__placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* base.css ships a global `.placeholder-svg { position:absolute; top/left:50%;
     transform: translate(-50%,-50%); max-width:80rem }` reset. placeholder_svg_tag
     emits that class, so the placeholder leaves the flow and the media box collapses
     to 0px in "Adapt to image" mode (no product = no image to give it height).
     Neutralise it here and give adapt mode a fixed ratio to fall back on. */
  .product-card-media .product-card-media__placeholder {
    position: static;
    inset: auto;
    transform: none;
    max-width: none;
  }
  .product-card-media--adapt .product-card-media__placeholder {
    aspect-ratio: 3 / 4;
    height: auto;
  }

  .product-card-media__image--secondary {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
  }
  .product-card-media:hover .product-card-media__image--secondary,
  .product-card-media:focus-within .product-card-media__image--secondary {
    opacity: 1;
  }

  .product-card-media__badges {
    position: absolute;
    top: 1.2rem;
    inset-inline-start: 1.2rem;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    align-items: flex-start;
    pointer-events: none;
  }
  .product-card-media__badge {
    padding: 0.5rem 1rem;
    background-color: var(--color-background);
    color: var(--color-foreground);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 999rem;
  }

  /* Placeholder card: hide the secondary-image hover swap (no second media to swap to) */
  .product-card--placeholder .product-card-media__image--secondary { display: none; }

  /* Product swatches strip: temporarily suppress secondary layer during peek */
  gyanpradip-product-card.product-card--swatch-hover-preview .product-card-media__image--secondary {
    opacity: 0 !important;
  }

  /* No paired secondary for current pack — avoid broken/duplicate hover */
  .product-card-media__image--secondary-hidden {
    display: none !important;
  }

  .product-card-media__link {
    display: block;
    height: 100%;
    position: relative;
    color: inherit;
    text-decoration: none;
  }

  .product-card-media__link:focus {
    outline: none;
  }

  .product-card-media__link:focus-visible {
    outline: 0.2rem solid var(--color-foreground);
    outline-offset: 0.2rem;
    border-radius: var(--media-radius, 0);
  }

  /* Quick view icon — canonical stack: snippets/quick-view.liquid + assets/gyanpradip-quick-view.js */
  .product-card-media__qv-slot {
    position: absolute;
    top: 1.2rem;
    inset-inline-end: 1.2rem;
    z-index: 4;
    pointer-events: none;
  }

  .product-card-media__qv-slot .gyanpradip-quick-view {
    position: relative;
    grid-row-start: unset;
    margin: 0;
    z-index: 1;
    width: auto;
    pointer-events: auto;
  }

  .product-card-media__qv-slot gyanpradip-quick-view-trigger {
    display: flex;
  }

  /* Square control: deliberately not `.button` (theme chrome would fight the overlay spec). */
  .product-card-media__qv-btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: var(--color-foreground);
    background-color: rgb(from var(--color-background) r g b / 100%);
    border: 0.1rem solid rgb(from var(--color-foreground) r g b / 14%);
    border-radius: 0.2rem;
    transition:
      background-color 0.2s ease,
      border-color 0.2s ease,
      color 0.2s ease;
  }

  /* Match `.button:hover` token surface (primary solid) — see assets/base.css */
  .product-card-media__qv-btn:hover {
    color: var(--color-primary-button-hover-text);
    background-color: var(--color-primary-button-hover-background);
    border-color: var(--color-primary-button-hover-border);
  }

  .product-card-media__qv-btn:focus {
    outline: none;
  }

  .product-card-media__qv-btn:focus-visible {
    outline: 0.2rem solid var(--color-foreground);
    outline-offset: 0.2rem;
  }

  /* Loading: GyanpradipQuickView passes `trigger.classList.add("loading")`; hide eye so only spinner shows (see base.css button.loading:after). */
  .product-card-media__qv-btn.loading {
    position: relative;
    pointer-events: none;
  }

  .product-card-media__qv-btn.loading:hover {
    background-color: rgb(from var(--color-background) r g b / 100%);
    border-color: rgb(from var(--color-foreground) r g b / 14%);
    color: var(--color-foreground);
  }

  .product-card-media__qv-btn.loading .product-card-media__qv-icon-wrap {
    opacity: 0;
    visibility: hidden;
  }

  .product-card-media__qv-btn.loading::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2rem;
    height: 2rem;
    margin-left: -1rem;
    margin-top: -1rem;
    animation: loading var(--duration-long) infinite linear;
    border-radius: 100%;
    box-sizing: content-box;
    display: block;
    border: 0.25rem solid rgb(from var(--color-foreground) r g b / 38%);
    border-left-color: transparent;
  }

  .product-card-media__qv-icon-wrap {
    display: flex;
  }

  .product-card-media__qv-icon-wrap .icon {
    width: 1.8rem;
    height: 1.8rem;
  }

  @media (hover: hover) and (pointer: fine) {
    .product-card-media__qv-slot--visibility-hover {
      opacity: 0;
      transition: opacity 0.2s ease;
    }

    .product-card:hover .product-card-media__qv-slot--visibility-hover,
    .product-card:focus-within .product-card-media__qv-slot--visibility-hover {
      opacity: 1;
    }
  }

  @media (hover: none), (pointer: coarse) {
    .product-card-media__qv-slot--visibility-hover {
      opacity: 1;
    }
  }

  .product-card--placeholder .product-card-media__qv-slot {
    display: none;
  }

  /* Compare checkbox overlay — revealed only in compare mode (body.is-comparing).
     Sits in the bottom-left corner so it never collides with the Quick View
     button, which keeps its top-right slot while comparing (compare is a
     distinct task, but the two controls no longer share a corner). */
  .product-card-media__compare {
    position: absolute;
    bottom: 1.2rem;
    inset-inline-start: 1.2rem;
    z-index: 5;
    display: none;
  }
  body.is-comparing .product-card-media__compare {
    display: block;
  }

  .product-card-media__compare-label {
    display: inline-flex;
    cursor: pointer;
  }
  .product-card-media__compare-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    margin: 0;
    pointer-events: none;
  }
  .product-card-media__compare-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 0.1rem solid rgb(from var(--color-foreground) r g b / 25%);
    background: var(--color-background);
    color: transparent;
    transition:
      background-color 0.15s ease,
      border-color 0.15s ease,
      color 0.15s ease;
  }
  .product-card-media__compare-box .gyanpradip-icon-check {
    width: 1.4rem;
    height: 1.4rem;
  }
  .product-card-media__compare-input:checked + .product-card-media__compare-box {
    color: var(--color-background);
    background-color: var(--color-foreground);
    border-color: var(--color-foreground);
  }
  .product-card-media__compare-input:focus-visible + .product-card-media__compare-box {
    outline: 0.2rem solid var(--color-foreground);
    outline-offset: 0.2rem;
  }
  .product-card-media__compare-input:disabled + .product-card-media__compare-box {
    opacity: 0.35;
    cursor: not-allowed;
  }
  .product-card-media__compare-label:has(.product-card-media__compare-input:disabled) {
    cursor: not-allowed;
  }
/* END_BLOCK:_product-card-media */

/* START_BLOCK:_product-card-price (INDEX:100) */
/* _product-card-price — sub-block of _product-card.
     Reads closest.product. Renders price with optional sale strikethrough.
     Spec: blueprint/skill/HOMEPAGE_SECTIONS_PLAN.md §5 (Path B)
     Pattern: mirrors Horizon's price.liquid */

  .product-card-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    text-align: var(--price-align, left);
    font-variant-numeric: tabular-nums;
  }
  .product-card-price--center { justify-content: center; }
  .product-card-price--right  { justify-content: flex-end; }

  .product-card-price__current {
    font-weight: 600;
  }
  .product-card-price__current--on-sale {
    color: var(--product-card-sale-price-color, #d92626);
  }

  .product-card-price__compare {
    text-decoration: line-through;
    opacity: 0.6;
    font-weight: 400;
    font-size: 0.9em;
  }

  .product-card-price__unit {
    font-size: 0.8em;
    opacity: 0.7;
    flex-basis: 100%;
  }
/* END_BLOCK:_product-card-price */

/* START_BLOCK:_product-card-review-stars (INDEX:101) */
/* _product-card-review-stars — private block under _product-card.
     Spec: blueprint/product-cards/PRODUCT_CARD_REVIEW_STARS_PRIVATE_BLOCK_PLAN.md */

  .product-card-review-stars-block {
    --pcrs-star-fill: var(--color-foreground);
    --pcrs-star-empty: rgb(from var(--color-foreground) r g b / 22%);
    --pcrs-star-stroke: var(--color-foreground);
    --pcrs-gap: var(--pcrs-inner-gap, 0.6rem);
  }

  .product-card-review-stars-block__inner {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: var(--pcrs-gap);
    max-width: 100%;
    pointer-events: none;
  }

  /* Below image: full row + align the star cluster (left / center / right). */
  .product-card-review-stars-block--below-media {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: var(--pcrs-justify, flex-start);
  }

  .product-card-review-stars-block--text-left {
    --pcrs-justify: flex-start;
  }
  .product-card-review-stars-block--text-center {
    --pcrs-justify: center;
  }
  .product-card-review-stars-block--text-right {
    --pcrs-justify: flex-end;
  }

  .product-card-review-stars-block__stars {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 0.2rem;
  }

  .product-card-review-stars-block__star {
    flex-shrink: 0;
    width: var(--pcrs-star-size, 1.6rem);
    height: var(--pcrs-star-size, 1.6rem);
    display: block;
  }

  .product-card-review-stars-block__star path {
    vector-effect: non-scaling-stroke;
  }

  .product-card-review-stars-block--multi .product-card-review-stars-block__star {
    width: var(--pcrs-star-size-multi, 1.2rem);
    height: var(--pcrs-star-size-multi, 1.2rem);
  }

  .product-card-review-stars-block--outline .product-card-review-stars-block__star--multi path {
    fill: none;
    stroke: var(--pcrs-star-stroke);
    stroke-width: 0.12rem;
    stroke-linejoin: round;
  }

  .product-card-review-stars-block--outline .product-card-review-stars-block__star--multi.product-card-review-stars-block__star--filled path {
    fill: var(--pcrs-star-fill);
    stroke: var(--pcrs-star-stroke);
  }

  .product-card-review-stars-block--shaded .product-card-review-stars-block__star--multi path {
    fill: var(--pcrs-star-empty);
    stroke: none;
  }

  .product-card-review-stars-block--shaded .product-card-review-stars-block__star--multi.product-card-review-stars-block__star--filled path {
    fill: var(--pcrs-star-fill);
  }

  .product-card-review-stars-block__star--single path {
    fill: none;
    stroke: var(--pcrs-star-stroke);
    stroke-width: 0.12rem;
    stroke-linejoin: round;
  }

  .product-card-review-stars-block--single-shaded .product-card-review-stars-block__star--single path {
    fill: var(--pcrs-star-fill);
    stroke: none;
  }

  .product-card-review-stars-block__numeric {
    margin: 0;
    white-space: nowrap;
    /* base.css `.paragraph:not(.button)` is two classes (0,2,0 specificity) and
       silently wins over a single-class color rule here, so the star color
       setting would appear to do nothing without !important. */
    color: var(--pcrs-star-fill) !important;
  }

  .product-card-review-stars-block__count {
    margin: 0;
    white-space: nowrap;
    color: var(--pcrs-star-fill) !important;
    opacity: 0.85;
  }

  .product-card-review-stars-block__sep {
    opacity: 0.35;
    margin-inline: 0.2rem;
    user-select: none;
  }

  .product-card-review-stars-block__stock {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    /*margin-inline-start: 0.6rem;*/
    white-space: nowrap;
    /* The `.paragraph`/`h*` type-preset classes carry the theme's normal
       (much taller) body line-height. Left alone, the element's line-box —
       and therefore the border-inline-start below — stretches well above
       and below the visible glyphs instead of hugging just this row. */
    line-height: 1;
    /* base.css `.paragraph:not(.button)` is two classes (0,2,0 specificity) and
       silently wins over a single-class color rule here, so the merchant's
       stock color settings would appear to do nothing without !important. */
    color: var(--pcrs-stock-color) !important;
  }

  .product-card-review-stars-block__stock--border::before {
    content: '';
    flex-shrink: 0;
    width: 0.1rem;
    height: 0.7em;
    /* Neutral divider — the card's normal text color, not the stock status color. */
    background-color: rgb(from var(--color-foreground) r g b / 25%);
  }

  .product-card-review-stars-block__stock-dot {
    flex-shrink: 0;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background-color: currentColor;
  }

  /* Over image: pill + corner (grid cell placement from gyanpradip-product-card.css) */
  .product-card-review-stars-block.product-card-review-stars--over-media {
    pointer-events: none;
  }

  .product-card-review-stars-block.product-card-review-stars--over-media.product-card-review-stars--pill
    .product-card-review-stars-block__inner {
    padding-block: 0.4rem;
    padding-inline: 0.9rem;
    border-radius: 999rem;
    background-color: var(--color-background);
    border: 0.1rem solid rgb(from var(--color-foreground) r g b / 12%);
    box-sizing: border-box;
  }

  /* Logical corners — ≥1.5rem inset from media edges (LTR: top left = top + inline-start). */
  .product-card-review-stars-block.product-card-review-stars--over-media.product-card-review-stars--corner-top-inline-start {
    align-self: start;
    justify-self: start;
    margin-block-start: 1.5rem;
    margin-inline-start: 1.5rem;
  }

  .product-card-review-stars-block.product-card-review-stars--over-media.product-card-review-stars--corner-top-inline-end {
    align-self: start;
    justify-self: end;
    margin-block-start: 1.5rem;
    margin-inline-end: 1.5rem;
  }

  .product-card-review-stars-block.product-card-review-stars--over-media.product-card-review-stars--corner-bottom-inline-start {
    align-self: end;
    justify-self: start;
    margin-block-end: 1.5rem;
    margin-inline-start: 1.5rem;
  }

  .product-card-review-stars-block.product-card-review-stars--over-media.product-card-review-stars--corner-bottom-inline-end {
    align-self: end;
    justify-self: end;
    margin-block-end: 1.5rem;
    margin-inline-end: 1.5rem;
  }

  @media (max-width: 749px) {
    .product-card__content
      > .product-card-review-stars-block.product-card-review-stars--over-media.product-card-review-stars--mobile-narrow-below {
      align-self: stretch;
      justify-self: stretch;
      margin-block: 0;
      margin-inline: 0;
      width: 100%;
      z-index: auto;
      display: flex;
      flex-direction: row;
      justify-content: var(--pcrs-justify, flex-start);
    }

    .product-card__content
      > .product-card-review-stars-block.product-card-review-stars--over-media.product-card-review-stars--mobile-narrow-below
      .product-card-review-stars-block__inner {
      padding: 0;
      border: none;
      border-radius: 0;
      background: transparent;
    }

    .product-card__content
      > .product-card-review-stars-block.product-card-review-stars--over-media.product-card-review-stars--mobile-narrow-below.product-card-review-stars--pill
      .product-card-review-stars-block__inner {
      /* keep minimal below image unless merchant chose pill for desktop only — optional: retain pill; plan said minimal flow below */
      padding-block: 0;
      padding-inline: 0;
    }
  }
/* END_BLOCK:_product-card-review-stars */

/* START_BLOCK:_product-card-stock (INDEX:102) */
/* _product-card-stock — sub-block of _product-card.
     Small in-stock / low-stock / sold-out line (e.g. below the rating row).
     Reuses the same locale keys + status logic as _inventory-status.liquid
     (the PDP block) so the wording matches across card and product page. */

  .product-card-stock {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    text-align: var(--pcs-align, left);
    /* base.css `.paragraph:not(.button)` is two classes (0,2,0 specificity)
       and silently wins over a single-class color rule here, so the
       merchant's stock color settings would appear to do nothing without
       !important. */
    color: var(--pcs-color) !important;
  }

  .product-card-stock--center { justify-content: center; }
  .product-card-stock--right  { justify-content: flex-end; }

  .product-card-stock__dot {
    flex-shrink: 0;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    background-color: currentColor;
  }

  .product-card--placeholder .product-card-stock {
    opacity: 0.6;
  }
/* END_BLOCK:_product-card-stock */

/* START_BLOCK:_product-card-swatches (INDEX:103) */
/* _product-card-swatches — native swatch strip + +N link.
     Interaction: blueprint/product-card/PRODUCT_CARD_SWATCHES_PLAN.md
     Styles: blueprint/product-cards/PRODUCT_CARD_SECONDARY_HOVER_AND_SWATCH_PLAN.md §Step 5 */

  .product-card-swatches {
    width: 100%;
    min-width: 0;
    /* Swiper: must not capture horizontal drag from this strip (see product-tabs-slider noSwiping). */
    touch-action: pan-y;
  }

  .product-card-swatches__list {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--product-card-swatches-gap, 0.6rem);
    margin: 0;
    padding: 0;
    justify-content: var(--product-card-swatches-justify, flex-start);
  }

  .product-card-swatches__item {
    flex-shrink: 0;
  }

  /* Stable footprint: same padding + border-width everywhere; only border/background colors change (no jump, centered ring). */
  .product-card-swatches__btn {
    --pcsw-ring-inset: 0.25rem;
    --pcsw-bd-w: 0.15rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    flex-shrink: 0;
    width: calc(var(--product-card-swatches-chip, 2rem) + 2 * (var(--pcsw-ring-inset) + var(--pcsw-bd-w)));
    height: calc(var(--product-card-swatches-chip, 2rem) + 2 * (var(--pcsw-ring-inset) + var(--pcsw-bd-w)));
    padding: var(--pcsw-ring-inset);
    border: var(--pcsw-bd-w) solid transparent;
    border-radius: 50%;
    background-color: transparent;
    cursor: pointer;
    touch-action: manipulation;
    line-height: 0;
    vertical-align: middle;
    transition:
      border-color 0.15s ease,
      background-color 0.15s ease;
  }

  .product-card-swatches__btn .swatch {
    width: var(--product-card-swatches-chip, 2rem);
    height: var(--product-card-swatches-chip, 2rem);
    margin: 0;
    flex-shrink: 0;
    border-radius: 50%;
  }

  .product-card-swatches__btn:hover:not([aria-pressed='true']) {
    border-color: rgb(from var(--color-foreground) r g b / 28%);
  }

  .product-card-swatches__btn[aria-pressed='true'] {
    border-color: var(--color-foreground);
    background-color: var(--color-background);
  }

  .product-card-swatches__btn:focus-visible {
    outline: 0.2rem solid rgb(from var(--color-foreground) r g b / 88%);
    outline-offset: 0.1rem;
  }

  .product-card-swatches__btn[aria-pressed='true']:focus-visible {
    outline-offset: 0.15rem;
  }

  /* Chip-only fallback: same outer circle as `.product-card-swatches__btn` for row alignment */
  .product-card-swatches__chip {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--product-card-swatches-chip, 2rem) + 2 * (0.25rem + 0.15rem));
    height: calc(var(--product-card-swatches-chip, 2rem) + 2 * (0.25rem + 0.15rem));
    padding: 0;
    border-radius: 50%;
    border: none;
    line-height: 0;
    vertical-align: middle;
  }

  .product-card-swatches__chip .swatch {
    width: var(--product-card-swatches-chip, 2rem);
    height: var(--product-card-swatches-chip, 2rem);
    margin: 0;
    border-radius: 50%;
  }

  /* +N: compact chip control — light border, normal weight (readable + clearly tappable) */
  .product-card-swatches__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    --pcsw-more-outer: calc(var(--product-card-swatches-chip, 2rem) + 2 * (0.25rem + 0.15rem));
    width: var(--pcsw-more-outer);
    height: var(--pcsw-more-outer);
    min-width: var(--pcsw-more-outer);
    min-height: var(--pcsw-more-outer);
    padding: 0;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 0.1rem solid rgb(from var(--color-foreground) r g b / 18%);
    background: var(--color-background);
    color: var(--color-foreground);
    font-size: max(1rem, 0.58em + 0.42vw);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition:
      border-color 0.18s ease,
      background 0.18s ease,
      color 0.18s ease;
    box-sizing: border-box;
  }

  .product-card-swatches__more:hover {
    border-color: rgb(from var(--color-foreground) r g b / 40%);
    background: rgb(from var(--color-foreground) r g b / 4%);
    color: var(--color-foreground);
  }

  .product-card-swatches__more:focus-visible {
    outline: 0.2rem solid rgb(from var(--color-foreground) r g b / 88%);
    outline-offset: 0.15rem;
  }

  .product-card-swatches.border-style {
    padding-block-start: var(--padding-block-start, 0);
    padding-block-end: var(--padding-block-end, 0);
    padding-inline-start: var(--padding-inline-start, 0);
    padding-inline-end: var(--padding-inline-end, 0);
    box-sizing: border-box;
  }
/* END_BLOCK:_product-card-swatches */

/* START_BLOCK:_product-card-title (INDEX:104) */
/* _product-card-title — sub-block of _product-card.
     Visible title links to PDP; href stays in sync with variant pickers +
     native swatches via `[data-product-card-pdp-link]` (gyanpradip-product-card.js).

     Spec: blueprint/skill/HOMEPAGE_SECTIONS_PLAN.md §5 (Path B) */

  .product-card-title {
    margin: 0;
    text-align: var(--title-align, left);
  }
  .product-card-title__text {
    color: inherit;
    text-decoration: none;
  }

  /* Clamp long titles to N lines with a trailing ellipsis (…).
     Applied to the link (not the heading) — matches the working pattern in
     _product-recommendations; -webkit-box on the heading itself doesn't clamp
     reliably when it wraps an inline <a>. */
  .product-card-title--clamp .product-card-title__text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--title-max-lines, 2);
    line-clamp: var(--title-max-lines, 2);
    overflow: hidden;
    white-space: normal;
    word-break: break-word;
  }

  .product-card-title__text:focus {
    outline: none;
  }

  .product-card-title__text:focus-visible {
    outline: 0.2rem solid var(--color-foreground);
    outline-offset: 0.2rem;
    border-radius: 0.2rem;
  }
/* END_BLOCK:_product-card-title */

/* START_BLOCK:_product-card-variants (INDEX:105) */
/* _product-card-variants — sub-block of _product-card.
     Thin wrapper around the new context-agnostic variant picker
     (snippets/gyanpradip-product-variant-picker.liquid). Reads block.settings
     and forwards them as direct args to the picker.

     Spec: blueprint/sections/PRODUCT_TABS_IMPLEMENTATION_PLAN.md §6.4 */

  .product-card-variants {
    width: 100%;
  }

  /* Dividers sit outside the picker layout so they never participate in the
     row_equal grid / row_inline flex that uses display:contents on variant-selects. */
  .product-card-variants > .product-card-variants__divider {
    display: block;
    border: 0;
    border-block-start: var(--input-border-width, 0.1rem) solid var(--color-input-border);
    margin: 0;
    height: 0;
    width: 100%;
    flex-shrink: 0;
    box-sizing: border-box;
  }

  /* Outer shell: stack dividers + picker — extra gap so rules don’t crowd controls */
  .product-card-variants--row_equal {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.4rem;
  }

  /* Equal-width option columns — only fieldsets participate in this grid. */
  .product-card-variants--row_equal .product-card-variants__pickers {
    display: grid;
    align-items: start;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 0.8rem;
    min-width: 0;
  }
  .product-card-variants--row_equal .product-card-variants__pickers > variant-selects {
    display: contents;
  }
  .product-card-variants--row_equal .product-card-variants__pickers .product-form__input,
  .product-card-variants--row_equal .product-card-variants__pickers fieldset.product-form__input {
    margin: 0;
    align-self: start;
    min-width: 0;
  }

  .product-card-variants--row_inline {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.4rem;
  }
  .product-card-variants--row_inline .product-card-variants__pickers {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.8rem;
    min-width: 0;
  }
  .product-card-variants--row_inline .product-card-variants__pickers > variant-selects {
    display: contents;
  }
  .product-card-variants--row_inline .product-card-variants__pickers .product-form__input,
  .product-card-variants--row_inline .product-card-variants__pickers fieldset.product-form__input {
    margin: 0;
  }

  .product-card-variants--column {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.4rem;
  }
  .product-card-variants--column .product-card-variants__pickers {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    min-width: 0;
  }
  .product-card-variants--column .product-card-variants__pickers > variant-selects {
    display: contents;
  }
  .product-card-variants--column .product-card-variants__pickers .product-form__input,
  .product-card-variants--column .product-card-variants__pickers fieldset.product-form__input {
    margin: 0;
  }

  /* Dropdown row — align with theme inputs + native swatch slot (design parity). */
  .product-card-variants .product-form__input--dropdown .form__label:not(.visually-hidden) {
    margin-block-end: 0.9rem;
    font-size: 1.2rem;
  }
  .product-card-variants .product-form__input--dropdown .select {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-height: var(--input-height, 4.4rem);
    padding-inline-start: var(--input-padding-inline, 1.2rem);
    padding-inline-end: var(--input-padding-inline, 1.2rem);
    border: var(--input-border-width, 0.1rem) solid var(--color-input-border);
    border-radius: var(--pcb-input-border-radius, var(--input-border-radius, 0.4rem));
    background: var(--color-input-background);
    color: var(--color-input-text);
    box-sizing: border-box;
  }
  .product-card-variants .product-form__input--dropdown .select:focus-within {
    border-color: var(--color-input-border-hover);
  }
  /* Cancel gyanpradip-product-variant-picker.css absolute swatch + rely on flex gap
     (global `.dropdown-swatch { position: absolute }` + select padding was
     neutralized by `padding-inline: 0`, causing overlap). */
  .product-card-variants .product-form__input--dropdown .dropdown-swatch {
    position: static;
    inset: auto;
    z-index: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
  }
  .product-card-variants .product-form__input--dropdown .dropdown-swatch .swatch {
    width: 2rem;
    height: 2rem;
  }
  .product-card-variants .product-form__input--dropdown .select__select {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    padding-inline-start: 0;
    /* Reserve space for absolutely positioned chevron (base `.select__select`). */
    padding-inline-end: calc(var(--input-padding-inline, 1.2rem) + 2.4rem);
    height: auto;
    min-height: 0;
    box-shadow: none;
  }
  .product-card-variants .product-form__input--dropdown .dropdown-swatch + .select__select {
    padding-inline-start: 0;
  }

  /* Trailing chevron: align inset with select padding token (matches original card). */
  .product-card-variants .product-form__input--dropdown .select .gyanpradip-icon-chevron {
    inset-inline-end: var(--input-padding-inline, 1.2rem);
    width: 2rem;
    stroke-width: 1.5;
  }

  /* Visible option titles only — visually-hidden legends/labels stay compact */
  .product-card-variants
    :is(.product-form__input--pill, .product-form__input--swatch)
    .form__label:not(.visually-hidden) {
    margin-block-end: 0.9rem;
    font-size: 1.2rem;
  }

  .product-card-variants .product-form__input--dropdown {
    margin-block-end: 0;
  }

  .product-card-variants fieldset.product-form__input--pill,
  .product-card-variants fieldset.product-form__input--swatch {
    margin: 0;
    padding: 0;
    border: none;
    min-inline-size: 0;
  }

  /* --- Button (pill) style: compact tiles, tight gap, sold-out visible + line-through --- */
  .product-card-variants fieldset.product-form__input--pill {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    row-gap: 1rem;
    column-gap: 0.5rem;
  }

  .product-card-variants fieldset.product-form__input--pill > legend.form__label,
  .product-card-variants fieldset.product-form__input--swatch > legend.form__label {
    flex: 1 1 100%;
    padding: 0;
  }

  .product-card-variants fieldset.product-form__input--pill label {
    touch-action: manipulation;
  }

  .product-card-variants .product-form__input--pill input[type='radio'] + label {
    margin: 0;
    padding: 0.55rem 1rem;
    font-size: 1.2rem;
    letter-spacing: 0.05em;
    line-height: 1.2;
    border: var(--input-border-width, 0.1rem) solid var(--color-input-border);
    border-radius: var(--pcb-variant-button-radius, var(--input-border-radius, 0.4rem));
    background-color: var(--color-background);
    color: var(--color-foreground);
    touch-action: manipulation;
  }

  .product-card-variants .product-form__input--pill input[type='radio']:checked + label {
    background-color: rgb(from var(--color-foreground) r g b / 8%);
    color: var(--color-foreground);
    border-color: transparent;
  }

  .product-card-variants
    .product-form__input--pill
    input[type='radio']:not(:disabled):not(.disabled)
    + label:hover {
    border-color: var(--color-foreground);
  }

  .product-card-variants .product-form__input--pill input[type='radio']:disabled + label,
  .product-card-variants .product-form__input--pill input[type='radio'].disabled + label {
    border-color: var(--color-input-border);
    background-color: var(--color-background);
    color: rgb(from var(--color-foreground) r g b / 55%);
    text-decoration: line-through;
    cursor: default;
  }

  .product-card-variants .product-form__input--pill input[type='radio'].disabled:checked + label,
  .product-card-variants .product-form__input--pill input[type='radio']:disabled:checked + label {
    background-color: rgb(from var(--color-foreground) r g b / 8%);
    color: rgb(from var(--color-foreground) r g b / 55%);
    border-color: var(--color-input-border);
    text-decoration: line-through;
  }

  /* --- Swatch (native) style: row-gap lets wrapped swatch rows breathe --- */
  .product-card-variants fieldset.product-form__input--swatch {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    row-gap: 1.2rem;
    column-gap: 0.7rem;
  }

  .product-card-variants .product-form__input--swatch .swatch-input__input + .swatch-input__label {
    margin: 0;
    --swatch-input--size: 2rem;
    touch-action: manipulation;
  }

  @media screen and (min-width: 750px) {
    .product-card-variants
      .product-form__input--swatch
      .swatch-input__input
      + .swatch-input__label:is(.swatch--shape-md, .swatch--shape-medium) {
      --swatch-input--size: 3.2rem;
    }
    .product-card-variants
      .product-form__input--swatch
      .swatch-input__input
      + .swatch-input__label:is(.swatch--shape-lg, .swatch--shape-large) {
      --swatch-input--size: 3.8rem;
    }
  }


  /* ===== migrated from assets/gyanpradip-product-variant-picker.css ===== */
variant-selects {
  display: block;
}

.product--no-media .product-form__input--pill,
.product--no-media .product-form__input--swatch,
.product--no-media .product-form__input--dropdown {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.product--no-media .product-form__input.product-form__input--pill,
.product--no-media .product-form__input.product-form__input--swatch {
  flex-wrap: wrap;
  margin: 0 auto 1.2rem auto;
}

.product--no-media .product-form__input--dropdown {
  flex-direction: column;
  max-width: 100%;
}

:is(.product-form__input--pill, .product-form__input--swatch) .form__label {
  margin-bottom: 0.2rem;
}

.product-form__input input[type="radio"] {
  clip: rect(0, 0, 0, 0);
  overflow: hidden;
  position: absolute;
  height: 1px;
  width: 1px;
}

.product-form__input
  input[type="radio"]:not(.disabled):not(.visually-disabled)
  + label
  > .label-unavailable {
  display: none;
}

.product-form__input--dropdown {
  --swatch-input--size: 2rem;
  margin-bottom: 1.6rem;
}

.product-form__input--dropdown .dropdown-swatch + select {
  padding-left: calc(2.4rem + var(--swatch-input--size));
}

.product-form__input--dropdown .dropdown-swatch {
  position: absolute;
  left: 1.6rem;
  top: calc(50% - var(--swatch-input--size) / 2);
  width: var(--swatch-input--size);
  height: var(--swatch-input--size);
  z-index: 1;
}

/* Custom styles for Pill display type */
.product-form__input--pill input[type="radio"] + label {
  border: 0.1rem solid rgb(from var(--color-foreground) r g b / 55%);
  background-color: var(--color-background);
  color: var(--color-foreground);
  border-radius: 0.5rem;
  color: var(--color-foreground);
  display: inline-block;
  margin: 0.7rem 0.5rem 0.2rem 0;
  padding: 1rem 1.5rem;
  font-size: 1.4rem;
  letter-spacing: 0.1rem;
  line-height: 1;
  text-align: center;
  transition: border var(--duration-short) ease;
  cursor: pointer;
  position: relative;
}

.product-form__input--pill input[type="radio"] + label:before {
  content: "";
  position: absolute;
  top: calc(var(--variant-pills-border-width) * -1);
  right: calc(var(--variant-pills-border-width) * -1);
  bottom: calc(var(--variant-pills-border-width) * -1);
  left: calc(var(--variant-pills-border-width) * -1);
  z-index: -1;
  border-radius: var(--variant-pills-radius);
  box-shadow: var(--variant-pills-shadow-horizontal-offset)
    var(--variant-pills-shadow-vertical-offset)
    var(--variant-pills-shadow-blur-radius)
    rgb(from var(--color-shadow) r g b / calc(var(--variant-pills-shadow-opacity) * 100%));
}

.product-form__input--pill input[type="radio"] + label:hover {
  border-color: var(--color-foreground);
}

.product-form__input--pill input[type="radio"]:checked + label {
  background-color: var(--color-foreground);
  color: var(--color-background);
}

@media screen and (forced-colors: active) {
  .product-form__input--pill input[type="radio"]:checked + label {
    text-decoration: underline;
  }

  .product-form__input--pill input[type="radio"]:focus-visible + label {
    outline: transparent solid 1px;
    outline-offset: 2px;
  }
}

.product-form__input--pill input[type="radio"]:checked + label::selection {
  background-color: rgb(from var(--color-background) r g b / 3%);
}

.product-form__input--pill input[type="radio"]:disabled + label,
.product-form__input--pill input[type="radio"].disabled + label {
  border-color: rgb(from var(--color-foreground) r g b / 1%);
  color: rgb(from var(--color-foreground) r g b / 6%);
  text-decoration: line-through;
}

.product-form__input--pill input[type="radio"].disabled:checked + label,
.product-form__input--pill input[type="radio"]:disabled:checked + label {
  color: rgb(from var(--color-background) r g b / 6%);
}
.product-form__input--pill input[type="radio"]:focus-visible + label {
  box-shadow: 0 0 0 0.3rem var(--color-background),
    0 0 0 0.5rem rgb(from var(--color-foreground) r g b / 55%);
}

/* Fallback */
.product-form__input--pill input[type="radio"].focused + label {
  box-shadow: 0 0 0 0.3rem var(--color-background),
    0 0 0 0.5rem rgb(from var(--color-foreground) r g b / 55%);
}

/* Custom styles for Swatch display type */
.product-form__input--swatch {
  display: flex;
  flex-wrap: wrap;
}

.product-form__input--swatch .swatch-input__input + .swatch-input__label {
  --swatch-input--size: 3.5rem;

  margin: 0.7rem 1.2rem 0.2rem 0;
}

@media screen and (min-width: 750px) {
  .product-form__input--swatch
    .swatch-input__input
    + .swatch-input__label:is(.swatch--shape-md, .swatch--shape-medium) {
    --swatch-input--size: 5rem;
  }
  .product-form__input--swatch
    .swatch-input__input
    + .swatch-input__label:is(.swatch--shape-lg, .swatch--shape-large) {
    --swatch-input--size: 6.5rem;
  }
}
/* End custom styles for Swatch display type */
/* END_BLOCK:_product-card-variants */

/* START_BLOCK:_product-card-vendor (INDEX:106) */
/* _product-card-vendor — sub-block of _product-card.
     Renders a small-caps label above the title (the "FASHION" / category /
     vendor / first tag / metafield value from the screenshot reference).
     Spec: blueprint/sections/PRODUCT_TABS_IMPLEMENTATION_PLAN.md §6.3 */

  .product-card-vendor {
    margin: 0;
    text-align: var(--vendor-align, left);
    letter-spacing: 0.05em;
    opacity: 0.7;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  /* Scheme subheading swatch; 3-class chain beats `.paragraph:not(.button)` regardless of bundle order. */
  .product-card-vendor.paragraph.subheading,
  .product-card-vendor.h6.subheading {
    color: var(--color, var(--color-foreground-subheading));
  }
  .product-card-vendor--uppercase { text-transform: uppercase; }
  .product-card-vendor--lowercase { text-transform: lowercase; }
  .product-card-vendor--none      { text-transform: none; }

  /* Slightly smaller than the raw h6/paragraph preset. `!important` needed —
     base.css `.h6.h6`/`.paragraph:not(.button)` are (0,2,0) and beat a plain
     single-class font-size rule here. Scaled off the preset's own custom
     property so it still tracks theme typography-scale changes. */
  .product-card-vendor.h6 {
    font-size: calc(var(--text-h6-size) * 0.85) !important;
  }
  .product-card-vendor.paragraph {
    font-size: calc(var(--text-body-size) * 0.85) !important;
  }

  a.product-card-vendor {
    display: block;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 0.2rem;
  }
/* END_BLOCK:_product-card-vendor */

/* START_BLOCK:_product-card (INDEX:107) */
/* _product-card — private block (used inside sections that render products
     via the closest.product loop pattern, e.g. Product Tabs).

     Wrapper element is <gyanpradip-product-card> (a Custom Element registered in
     assets/gyanpradip-product-card.js). The Custom Element scopes per-card
     variant-sync (subscribes to PUB_SUB_EVENTS.optionValueSelectionChange,
     filters by `this.contains(target)`) and delegates [data-add-to-cart]
     clicks to the existing addToCart() in gyanpradip-shopify-fetch.js.

     Children always render — placeholder mode propagates closest.product: null
     down the tree, and each sub-block renders its own placeholder. The wrapper
     does NOT short-circuit to a single SVG (that was the old behavior; see
     PRODUCT_TABS_IMPLEMENTATION_PLAN.md §6.1.1).

     Spec: blueprint/sections/PRODUCT_TABS_IMPLEMENTATION_PLAN.md §6.1, §6.8 */

  .product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-block-start: var(--padding-block-start, 0);
    padding-block-end: var(--padding-block-end, 0);
    padding-inline-start: var(--padding-inline-start, 0);
    padding-inline-end: var(--padding-inline-end, 0);
    isolation: isolate;
  }

  /* Overlay/link/content stacking + keyboard ring: assets/gyanpradip-product-card.css */

  /* Placeholder cards — subtly muted so the merchant can tell at a glance that
     the cards are illustrative until they pick collections. */
  .product-card--placeholder {
    opacity: 0.85;
  }

  /* Qty stepper (product-card-buy): match variant dropdowns + CTA radius;
     --pcb-input-border-radius is set on the host when the card overrides theme. */
  .product-card .quantity {
    border-radius: var(--pcb-input-border-radius, var(--input-border-radius, 0.4rem));
  }

  /* Fill grid/slider cell when Grid footer → Even bottom (_product-card row_content_alignment) */
  .product-card--align-row-actions {
    height: 100%;
    min-height: 0;
  }

  /* Media bleed — image touches the card edges; the configured padding only
     applies to the text/content below it. `overflow: hidden` here (combined
     with the card's own border-radius from .border-style) clips the image
     back to the card's rounded corners even when the media's own corner
     radius is smaller (or zero). Only bleeds when media is the first block —
     if a merchant reorders blocks so media isn't first, bleeding it would
     overlap whatever now sits above it instead of the card's own edge. */
  .product-card--media-bleed {
    overflow: hidden;
  }

  .product-card--media-bleed > .product-card__content > .product-card-media:first-child {
    /* _product-card-media.liquid hardcodes `width: 100%` (a fixed value, not
       `auto`) on the media div. With a fixed width, only margin-inline-start
       shifts the box left — the right edge stays put, so the right-side
       padding never actually gets consumed and shows up as a gap. Reverting
       to `auto` lets this flex item's default `align-self: stretch` compute
       the width as "container width minus margins" (per spec), which is what
       correctly expands the box to cancel the negative margins on both sides. */
    width: auto;
    margin-block-start: calc(-1 * var(--padding-block-start, 0px));
    margin-inline-start: calc(-1 * var(--padding-inline-start, 0px));
    margin-inline-end: calc(-1 * var(--padding-inline-end, 0px));
  }

  /* ===== migrated from assets/gyanpradip-product-card.css ===== */
.product-grid-item {
  text-align: center;
}
.product-grid-item__thumbnail {
  position: relative;
  overflow: hidden;
  padding: 1px;
}
.product-grid-item__badges {
  position: absolute;
  top: 15px;
  left: 15px;
  display: flex;
  justify-content: flex-start;
  z-index: 8;
  pointer-events: none;
}
@media only screen and (max-width: 575px) {
  .product-grid-item__badges {
    top: 10px;
    left: 10px;
  }
}
.product-grid-item__image {
  display: flex;
}
.product-grid-item__image img {
  width: 100%;
  height: auto;
}
.product-grid-item__actions {
  position: absolute;
  bottom: 15px;
  left: 0;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: transparent;
}
.product-grid-item__actions__btn {
  padding: 1rem 2rem;
  text-decoration: none;
  text-transform: var(--btn-transform);
  color: rgba(var(--product-color-button-text));
  border: none;
  border-radius: 3rem;
  background-color: rgba(var(--product-color-button));
  box-shadow: 0 0 1.5rem rgba(var(--product-color-button-text), 0.05);
  display: flex;
  align-items: center;
  position: relative;
}
.product-grid-item__actions__btn span + svg {
  margin-left: 12px;
}
.product-grid-item__actions__btn svg {
  width: 20px;
  height: 20px;
}

/* .product-grid-item__actions__btn:hover,
button.cart--icon-button:hover {
  color: rgba(var(--product-button-hover-text));
  background: rgba(var(--product-button-hover-background));
  box-shadow: 0 5px 10px rgba(var(--product-button-hover-text), 0.15);
} */
.product-grid-item__content {
  padding-top: 20px;
}
h3.product-grid-item__title {
  word-break: break-word;
}
.product-grid-item__title a {
  text-decoration: none;
  color: var(--color-foreground);
}
.product-grid-item__title a:hover {
  color: var(--color-base-text-link-hover);
}
@media only screen and (max-width: 575px) {
  .product-grid-item__title {
    font-size: 1.6rem;
    margin-bottom: 1rem;
  }
}
@media only screen and (max-width: 479px) {
  .product-grid-item__title {
    font-size: 1.6rem;
  }
}
.product-grid-item__price {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  color: var(--color-foreground);
}
.product-grid-item__price .price__compare {
  text-decoration: line-through;
}
@media only screen and (max-width: 575px) {
  .product-grid-item__price {
    font-size: 1.8rem;
  }
}
@media only screen and (max-width: 479px) {
  .product-grid-item__price {
    font-size: 1.6rem;
  }
}

@media screen and (min-width: 990px) {
  .product-grid-item__thumbnail:hover
    .media.media--hover-effect
    > img
    ~ img.secondary__img,
  .product-grid-item__thumbnail:hover
    .media.media--hover-effect
    > img.secondary__img
    + img.secondary__img--new {
    opacity: 1;
    transition: transform var(--duration-long) ease;
  }

  .product-grid-item__thumbnail:hover
    .media.media--hover-effect
    > img:first-child:not(:only-child) {
    opacity: 0;
  }

  .product-grid-item__thumbnail.second--image__hide:hover
    .media.media--hover-effect
    > img:first-child:not(:only-child) {
    opacity: 1;
  }
}
button.product-grid-item__actions__btn.loading {
  background: #fff;
  color: transparent;
  box-shadow: 0 5px 7px rgb(0 0 0 / 20%);
}
ul.product-list-item__actions {
  list-style: none;
  padding: 0;
  display: flex;
}
.grid-col-1 .product__list_view_content.hidden {
  display: block !important;
}
.product-list-item__actions li + li {
  margin-left: 15px;
}

.product-list-item__actions .product-grid-item__actions__btn {
  margin: 0;
}
[hidden] {
  display: none !important;
}
button.product-grid-item__actions__btn.loading:after {
  left: 50%;
  margin-left: -10px;
}
button.cart--icon-button.loading:after {
  left: 50%;
  margin-left: -12px;
  top: 50%;
  margin-top: -13px;
}
button.cart--icon-button {
  color: var(--color-foreground);
  border: none;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 100%;
  position: relative;
  padding: 0;
  background: var(--color-background);
  box-shadow: 0 0 1.5rem rgba(var(--product-color-button-text), 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
}
.cart--icon-button svg {
  width: 1.6rem;
}
/* button.cart--icon-button:hover {
  color: rgba(var(--product-button-hover-text));
  background: rgba(var(--product-button-hover-background));
  box-shadow: 0 5px 10px rgba(var(--product-button-hover-text), 0.15);
} */
button.cart--icon-button.loading:hover:after {
  border: 2.5px solid rgba(var(--product-color-button));
  border-left: 2.5px solid transparent;
}

button.cart--icon-button.loading:after {
  border: 2.5px solid rgba(var(--product-color-button-text));
  border-left: 2.5px solid transparent;
}
@media only screen and (min-width: 750px) {
  .product-grid-item__actions.justify-content-end {
    left: auto;
    right: 15px;
  }
  .product-grid-item__actions.justify-content-start {
    left: 15px;
    right: auto;
  }
  span.product-grid-item__badges.badge--top-right {
    left: auto;
    right: 15px;
  }
  span.product-grid-item__badges.badge--top-center {
    transform: translateX(-50%);
    left: 50%;
  }
  span.product-grid-item__badges.badge--bottom_left {
    top: auto;
    bottom: 15px;
  }
  span.product-grid-item__badges.badge--bottom_center {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    top: auto;
    bottom: 15px;
  }
  span.product-grid-item__badges.badge--bottom_right {
    top: auto;
    bottom: 15px;
    left: auto;
    right: 15px;
  }
  .product-grid-item__actions.top_position {
    top: 25px;
    bottom: auto;
  }
  button.cart--icon-button {
    width: 4rem;
    height: 4rem;
  }
  .cart--icon-button svg {
    width: 1.8rem;
  }
  span.action__btn--text > svg {
    display: none;
  }
}
@media only screen and (max-width: 749px) {
  span.badge--text.h5 {
    font-size: 1.5rem;
  }
  .product-grid-item__actions__btn {
    padding: 0;
    font-size: 1.3rem;
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
  }
  .product-grid-item__actions__btn svg {
    width: 15px;
    height: 15px;
  }
  .product-grid-item__actions {
    left: auto;
    right: 15px;
  }
  .price--on-sale .price__sale {
    line-height: 2.5rem;
  }
  .product-grid-item__actions.justify-content-center,
  .product-grid-item__actions.justify-content-start {
    justify-content: flex-end;
  }
  span.action__btn--text--label {
    display: none;
  }
  span.action__btn--text {
    line-height: 1;
  }
  button.product-grid-item__actions__btn.loading:after,
  button.cart--icon-button.loading:after {
    margin-left: -8px;
  }
  button.product-grid-item__actions__btn.loading:after,
  button.cart--icon-button.loading:after {
    width: 1rem;
    height: 1rem;
  }
  button.cart--icon-button.loading:after {
    margin-top: -9px;
  }
}

@media only screen and (min-width: 750px) and (max-width: 991px) {
  .product-grid-item__actions__btn {
    padding: 1rem;
    font-size: 1.4rem;
  }
  .product-grid-item__actions__btn span + svg {
    margin-left: 5px;
  }
  .product-grid-item__actions__btn svg {
    width: 15px;
    height: 15px;
  }
  ul.product-grid-item__actions.style1.justify-content-end,
  ul.product-grid-item__actions.style1.justify-content-start {
    justify-content: center;
    left: auto;
    right: auto;
  }
}
.media.rounded--image {
  border-radius: 2.5rem;
}
.placeholder_svg_parent.rounded--image {
  border-radius: 2.5rem;
}
.product-grid-item:hover .product-grid-item__title a {
  text-decoration: underline;
}
.placholder__product--title {
  margin-bottom: 1rem;
  display: block;
}
/* Color swatches css  */
.product--color-swatch {
  width: 2.8rem;
  height: 2.8rem;
  display: inline-flex;
  cursor: pointer;
  border: 0.2rem solid transparent;
  padding: 0.2rem;
  border-radius: 100%;
}
.product--color-swatch.checked-color {
  border-color: rgb(from var(--color-foreground) r g b / 7%);
}
.product--color-swatch-wrapper {
  display: flex;
  gap: 0.2rem;
  margin-left: 0.1rem;
  margin-top: 1.5rem;
  align-items: center;
}
.product--color-swatch .swatch--variant-tooltip {
  position: absolute;
  bottom: 100%;
  background: rgb(
    from var(--color-button) r g b / calc(var(--alpha-button-background) * 100%)
  );
  color: var(--color-button-text);
  z-index: 9;
  padding: 6px 12px;
  border-radius: 2px;
  left: 50%;
  transform: translate(-50%, -70%);
  transition-property: opacity, transform;
  transition-duration: 0.3s;
  transition-timing-function: ease;
  pointer-events: none;
  line-height: 1;
  opacity: 0;
  font-size: 1.3rem;
  text-align: center;
}
.product--color-swatch .variant--swatch-color {
  position: relative;
  width: 100%;
  box-shadow: inset 0 0 0 0.1rem rgb(var(--color-foreground), 0.1);
  border-radius: 50%;
  background-color: var(
    --color-swatch-background,
    var(--swatch-background-color)
  );
  background-image: var(--swatch-background-image, var(--background-gradient));
  background-size: cover;
  background-repeat: no-repeat;
}
.product--color-swatch:hover .swatch--variant-tooltip {
  opacity: 1;
  transform: translate(-50%, -50%);
}
.product--color-swatch .swatch--variant-tooltip:after {
  content: "";
  position: absolute;
  bottom: -1.6rem;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 1rem;
  border-color: transparent transparent transparent;
  border-top-color: rgb(
    from var(--color-button) r g b / calc(var(--alpha-button-background) * 100%)
  );
  left: 50%;
  transform: translate(-50%);
}
.swiper-slide
  .product--color-swatch-wrapper
  .product--color-swatch:first-child
  .swatch--variant-tooltip {
  transform: translateY(-70%);
  left: 0;
}
.swiper-slide
  .product--color-swatch-wrapper
  .product--color-swatch:first-child:hover
  .swatch--variant-tooltip {
  transform: translateY(-40%);
}
.swiper-slide
  .product--color-swatch-wrapper
  .product--color-swatch:first-child
  .swatch--variant-tooltip:after {
  left: 10px;
}
.rest__of--color-variants {
  line-height: 1;
  width: 2.7rem;
  height: 2.7rem;
  display: flex;
  align-items: center;
  color: var(--color-foreground);
}
.product--color-swatch .variant--swatch-custom.variant--swatch-image {
  position: relative;
  line-height: 1;
  box-shadow: inset 0 0 0 0.1rem rgb(var(--color-foreground), 0.1);
  border-radius: 100%;
  width: 100%;
}
.product--color-swatch .variant--swatch-custom.variant--swatch-image > img {
  width: 100%;
  height: auto;
  border-radius: 100%;
}
.product--color-swatch.product--color-swatch-image {
  width: 3.5rem;
  height: 3.5rem;
}
.gyanpradip-quick-view__submit.cart--icon-button > * {
  line-height: 1;
}

/* -----------------------------------------------------------------------------
   gyanpradip-product-card — variant row + pickers (snippet path + legacy grids)
   Mirrors blocks/_product-card-variants.liquid when private block CSS is absent.
   -------------------------------------------------------------------------- */
.product-card-variants {
  width: 100%;
}
.product-card-variants > .product-card-variants__divider {
  display: block;
  border: 0;
  border-block-start: var(--input-border-width, 0.1rem) solid var(--color-input-border);
  margin: 0;
  height: 0;
  width: 100%;
  flex-shrink: 0;
  box-sizing: border-box;
}
.product-card-variants--row_equal {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.4rem;
}
.product-card-variants--row_equal .product-card-variants__pickers {
  display: grid;
  align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 0.8rem;
  min-width: 0;
}
.product-card-variants--row_equal .product-card-variants__pickers > variant-selects {
  display: contents;
}
.product-card-variants--row_equal .product-card-variants__pickers .product-form__input,
.product-card-variants--row_equal .product-card-variants__pickers fieldset.product-form__input {
  margin: 0;
  align-self: start;
  min-width: 0;
}
.product-card-variants--row_inline {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.4rem;
}
.product-card-variants--row_inline .product-card-variants__pickers {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.8rem;
  min-width: 0;
}
.product-card-variants--row_inline .product-card-variants__pickers > variant-selects {
  display: contents;
}
.product-card-variants--row_inline .product-card-variants__pickers .product-form__input,
.product-card-variants--row_inline .product-card-variants__pickers fieldset.product-form__input {
  margin: 0;
}
.product-card-variants--column {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.4rem;
}
.product-card-variants--column .product-card-variants__pickers {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  min-width: 0;
}
.product-card-variants--column .product-card-variants__pickers > variant-selects {
  display: contents;
}
.product-card-variants--column .product-card-variants__pickers .product-form__input,
.product-card-variants--column .product-card-variants__pickers fieldset.product-form__input {
  margin: 0;
}
.product-card-variants .product-form__input--dropdown .form__label:not(.visually-hidden) {
  margin-block-end: 0.9rem;
  font-size: 1.2rem;
}
.product-card-variants
  :is(.product-form__input--pill, .product-form__input--swatch)
  .form__label:not(.visually-hidden) {
  margin-block-end: 0.9rem;
  font-size: 1.2rem;
}
.product-card-variants .product-form__input--dropdown .select {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-height: var(--input-height, 4.4rem);
  padding-inline-start: var(--input-padding-inline, 1.2rem);
  padding-inline-end: var(--input-padding-inline, 1.2rem);
  border: var(--input-border-width, 0.1rem) solid var(--color-input-border);
  border-radius: var(--pcb-input-border-radius, var(--input-border-radius, 0.4rem));
  background: var(--color-input-background);
  color: var(--color-input-text);
  box-sizing: border-box;
}
.product-card-variants .product-form__input--dropdown .select:focus-within {
  border-color: var(--color-input-border-hover);
}
.product-card-variants .product-form__input--dropdown .dropdown-swatch {
  position: static;
  inset: auto;
  z-index: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
}
.product-card-variants .product-form__input--dropdown .dropdown-swatch .swatch {
  width: 2rem;
  height: 2rem;
}
.product-card-variants .product-form__input--dropdown .select__select {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  padding-inline-start: 0;
  padding-inline-end: calc(var(--input-padding-inline, 1.2rem) + 2.4rem);
  height: auto;
  min-height: 0;
  box-shadow: none;
}
.product-card-variants .product-form__input--dropdown .dropdown-swatch + .select__select {
  padding-inline-start: 0;
}

.product-card-variants .product-form__input--dropdown .select .gyanpradip-icon-chevron {
  inset-inline-end: var(--input-padding-inline, 1.2rem);
  width: 2rem;
  stroke-width: 1.5;
}

.product-card-variants .product-form__input--dropdown {
  margin-block-end: 0;
}

.product-card-variants fieldset.product-form__input--pill,
.product-card-variants fieldset.product-form__input--swatch {
  margin: 0;
  padding: 0;
  border: none;
  min-inline-size: 0;
}

.product-card-variants fieldset.product-form__input--pill {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  row-gap: 1rem;
  column-gap: 0.5rem;
}

.product-card-variants fieldset.product-form__input--pill > legend.form__label,
.product-card-variants fieldset.product-form__input--swatch > legend.form__label {
  flex: 1 1 100%;
  padding: 0;
}

.product-card-variants fieldset.product-form__input--pill label {
  touch-action: manipulation;
}

.product-card-variants .product-form__input--pill input[type='radio'] + label {
  margin: 0;
  padding: 0.55rem 1rem;
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  line-height: 1.2;
  border: var(--input-border-width, 0.1rem) solid var(--color-input-border);
  border-radius: var(--pcb-variant-button-radius, var(--input-border-radius, 0.4rem));
  background-color: var(--color-background);
  color: var(--color-foreground);
  touch-action: manipulation;
}

.product-card-variants .product-form__input--pill input[type='radio']:checked + label {
  background-color: rgb(from var(--color-foreground) r g b / 8%);
  color: var(--color-foreground);
  border-color: transparent;
}

.product-card-variants
  .product-form__input--pill
  input[type='radio']:not(:disabled):not(.disabled)
  + label:hover {
  border-color: var(--color-foreground);
}

.product-card-variants .product-form__input--pill input[type='radio']:disabled + label,
.product-card-variants .product-form__input--pill input[type='radio'].disabled + label {
  border-color: var(--color-input-border);
  background-color: var(--color-background);
  color: rgb(from var(--color-foreground) r g b / 55%);
  text-decoration: line-through;
  cursor: default;
}

.product-card-variants .product-form__input--pill input[type='radio'].disabled:checked + label,
.product-card-variants .product-form__input--pill input[type='radio']:disabled:checked + label {
  background-color: rgb(from var(--color-foreground) r g b / 8%);
  color: rgb(from var(--color-foreground) r g b / 55%);
  border-color: var(--color-input-border);
  text-decoration: line-through;
}

.product-card-variants fieldset.product-form__input--swatch {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  row-gap: 1.2rem;
  column-gap: 0.7rem;
}

.product-card-variants .product-form__input--swatch .swatch-input__input + .swatch-input__label {
  margin: 0;
  --swatch-input--size: 2rem;
  touch-action: manipulation;
}

@media screen and (min-width: 750px) {
  .product-card-variants
    .product-form__input--swatch
    .swatch-input__input
    + .swatch-input__label:is(.swatch--shape-md, .swatch--shape-medium) {
    --swatch-input--size: 3.2rem;
  }
  .product-card-variants
    .product-form__input--swatch
    .swatch-input__input
    + .swatch-input__label:is(.swatch--shape-lg, .swatch--shape-large) {
    --swatch-input--size: 3.8rem;
  }
}

/*
 * Snippet path (gyanpradip-product-card.liquid): buy column + row + add-to-cart error.
 * Block path duplicates in blocks/_product-card-buy.liquid stylesheet block.
 */
gyanpradip-product-card .product-card-buy {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: 100%;
}

gyanpradip-product-card .product-card-buy__row {
  display: flex;
  flex-direction: row;
  gap: 0.8rem;
  align-items: stretch;
}

gyanpradip-product-card .product-card-buy__row quantity-input,
gyanpradip-product-card .product-card-buy__row gyanpradip-quantity-input {
  flex: 0 1 12rem;
  max-width: 12rem;
  min-width: 0;
}

gyanpradip-product-card .product-card-buy .quantity {
  width: 100%;
  max-width: 12rem;
  min-width: 0;
  align-items: stretch;
}

gyanpradip-product-card .product-card-buy__row .product-card-buy__btn:only-child {
  flex: 1 1 100%;
  width: 100%;
}

gyanpradip-product-card .product-card-buy .product-card-buy__btn.button {
  flex: 1 1 auto;
  display: inline-flex;
  width: auto;
  min-width: 0;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: var(--pcb-btn-min-height, var(--input-height, 5rem));
  margin-block: 0;
  padding: var(--pcb-btn-padding, 1rem 1.6rem);
  font-size: var(--pcb-btn-font-size, 1.4rem);
  font-weight: var(--btn-font-weight, 500);
  text-transform: var(--btn-transform);
  letter-spacing: 0.05em;
  gap: 0.6rem;
}

gyanpradip-product-card .product-card-buy .gyanpradip-quick-view {
  position: relative;
  grid-row-start: unset;
  margin: 0;
  z-index: 2;
  flex: 1 1 auto;
  display: flex;
  min-width: 0;
  width: auto;
}

gyanpradip-product-card .product-card-buy .gyanpradip-quick-view gyanpradip-quick-view-trigger {
  flex: 1 1 auto;
  display: flex;
  min-width: 0;
  width: auto;
}

gyanpradip-product-card .product-card-buy .gyanpradip-quick-view gyanpradip-quick-view-trigger .product-card-buy__btn.button {
  width: 100%;
}

gyanpradip-product-card .product-card-buy__row .gyanpradip-quick-view:only-child {
  flex: 1 1 100%;
  width: 100%;
}

gyanpradip-product-card .product-card-buy .product-card-buy__btn.button.loading {
  position: relative;
  pointer-events: none;
  color: transparent !important;
}

gyanpradip-product-card .product-card-buy .product-card-buy__btn.button.loading .product-card-buy__icon-wrap,
gyanpradip-product-card .product-card-buy .product-card-buy__btn.button.loading .product-card-buy__label {
  opacity: 0;
}

gyanpradip-product-card .product-card-buy .product-card-buy__btn.button.loading .product-card-buy__icon-wrap {
  visibility: hidden;
}

gyanpradip-product-card .product-card-buy .product-card-buy__btn.button.loading::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2rem;
  height: 2rem;
  margin-left: -1rem;
  margin-top: -1rem;
  animation: loading var(--duration-long) infinite linear;
  border-radius: 100%;
  box-sizing: content-box;
  display: block;
  border: 0.25rem solid rgb(from var(--button-color) r g b / 38%);
  border-left-color: transparent;
}

gyanpradip-product-card .product-card-buy__error {
  margin: 0;
  padding: 0.8rem 1rem;
  font-size: 1.2rem;
  line-height: 1.45;
  font-weight: 500;
  border-radius: var(--input-border-radius, 0.4rem);
  border: var(--input-border-width, 0.1rem) solid rgb(from #d97706 r g b / 42%);
  background-color: rgb(from #fff7ed r g b / 100%);
  color: rgb(from #9a3412 r g b / 100%);
  box-sizing: border-box;
}

/* Product card buy — over-media grid (mirrors blocks/_product-card-buy.liquid stylesheet block). */
gyanpradip-product-card
  .product-card__content:has(.product-card-buy--over-media:not(.product-card-buy--mobile-flow-below)) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

gyanpradip-product-card
  .product-card__content:has(.product-card-buy--over-media:not(.product-card-buy--mobile-flow-below))
  > .product-card-media {
  grid-column: 1;
  grid-row: 1;
}

gyanpradip-product-card
  .product-card__content:has(.product-card-buy--over-media:not(.product-card-buy--mobile-flow-below))
  > .product-card-buy.product-card-buy--over-media {
  grid-column: 1;
  grid-row: 1;
  align-self: stretch;
  width: 100%;
  min-height: 0;
}

/* Product card review stars — over-media grid (blocks/_product-card-review-stars.liquid). */
gyanpradip-product-card
  .product-card__content:has(
    > .product-card-review-stars.product-card-review-stars--over-media:not(
      .product-card-review-stars--mobile-narrow-below
    )
  ) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

gyanpradip-product-card
  .product-card__content:has(
    > .product-card-review-stars.product-card-review-stars--over-media:not(
      .product-card-review-stars--mobile-narrow-below
    )
  )
  > .product-card-media {
  grid-column: 1;
  grid-row: 1;
}

gyanpradip-product-card
  .product-card__content:has(
    > .product-card-review-stars.product-card-review-stars--over-media:not(
      .product-card-review-stars--mobile-narrow-below
    )
  )
  > .product-card-review-stars.product-card-review-stars--over-media {
  grid-column: 1;
  grid-row: 1;
  width: auto;
  max-width: 100%;
  min-height: 0;
  z-index: 5;
  pointer-events: none;
}

@media (max-width: 749px) {
  gyanpradip-product-card
    .product-card__content:has(
      > .product-card-review-stars.product-card-review-stars--over-media.product-card-review-stars--mobile-narrow-below
    ):not(
      :has(> .product-card-buy.product-card-buy--over-media:not(.product-card-buy--mobile-flow-below))
    ) {
    display: flex;
    flex-direction: column;
  }

  gyanpradip-product-card
    .product-card__content:has(
      > .product-card-review-stars.product-card-review-stars--over-media.product-card-review-stars--mobile-narrow-below
    )
    > .product-card-review-stars.product-card-review-stars--over-media {
    grid-row: auto;
    grid-column: 1;
    width: 100%;
    min-height: 0;
    z-index: auto;
  }
}

/* -----------------------------------------------------------------------------
   Full-card PDP link (.product-card__link) + .product-card__content shell.
   Blocks (e.g. _product-card), snippets/gyanpradip-product-card, and CSS-loaded pages.
   -------------------------------------------------------------------------- */

.product-card__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  gap: var(--card-gap, 0.8rem);
}

/*
 * Grid row alignment (_product-card row_content_alignment = align_row_actions).
 * Pin the bottom cluster (variants + buy) so dropdowns and CTA share one baseline per grid row.
 * - When .product-card-variants exists: auto margin on variants pulls variants + everything below (buy) to the bottom.
 * - When no variants block: pin buy only (single-variant / buy-only cards).
 * Skip desktop over-media buy overlay (layout uses grid stack on .product-card__content).
 */
.product-card--align-row-actions
  .product-card__content:not(:has(> .product-card-buy.product-card-buy--over-media:not(.product-card-buy--mobile-flow-below))):not(
    :has(
      > .product-card-review-stars.product-card-review-stars--over-media:not(
        .product-card-review-stars--mobile-narrow-below
      )
    )
  )
  > .product-card-variants {
  margin-block-start: auto;
}

.product-card--align-row-actions
  .product-card__content:not(:has(> .product-card-buy.product-card-buy--over-media:not(.product-card-buy--mobile-flow-below))):not(
    :has(
      > .product-card-review-stars.product-card-review-stars--over-media:not(
        .product-card-review-stars--mobile-narrow-below
      )
    )
  ):not(
    :has(> .product-card-variants)
  )
  > .product-card-buy:not(.product-card-buy--over-media:not(.product-card-buy--mobile-flow-below)) {
  margin-block-start: auto;
}

@media (any-pointer: fine) {
  .product-card__content {
    cursor: pointer;
  }
}

.product-card__link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--border-radius, 0);
}

.product-card__link:focus,
.product-card__link:focus-visible {
  outline: none;
}

/* Full-card chrome when focus entered via Tab (data-card-tab-focus from gyanpradip-product-card.js). */
gyanpradip-product-card.product-card[data-card-tab-focus]:focus-within {
  box-shadow: 0 0 0 0.2rem var(--color-background), 0 0 0 0.4rem var(--color-foreground);
  border-radius: var(--border-radius, 0);
}

gyanpradip-product-card .product-card-media__link:focus {
  outline: none;
}

gyanpradip-product-card .product-card-media__link:focus-visible {
  outline: 0.2rem solid var(--color-foreground);
  outline-offset: 0.2rem;
  border-radius: var(--media-radius, 0);
}

/* Snippet-path title link (blocks/_product-card-title sets its own focus ring). */
gyanpradip-product-card .product-card-title__text:focus {
  outline: none;
}

gyanpradip-product-card .product-card-title__text:focus-visible {
  outline: 0.2rem solid var(--color-foreground);
  outline-offset: 0.2rem;
  border-radius: 0.2rem;
}

gyanpradip-product-card.product-card:hover .product-card-title__text {
  text-decoration: underline;
  text-underline-offset: 0.2rem;
}

/* Hover box shadow (Appearance > Shadow on hover). */
.product-card--hover-shadow {
  transition: box-shadow 0.2s ease;
}

@media (hover: hover) {
  .product-card--hover-shadow:hover {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);
  }
}
/* END_BLOCK:_product-card */

/* START_BLOCK:_product-custom-liquid (INDEX:108) */
/* _product-custom-liquid — private PDP block. Raw Liquid escape hatch. Spec: §7. */
/* END_BLOCK:_product-custom-liquid */

/* START_BLOCK:_product-description (INDEX:109) */
/* _product-description — private PDP block. Short/full description, optional
     trim, collapsible accordion, custom bullet color. Reads the product_excerpt
     metafield for the short variant. Spec: §7. */

  /* ── section-gyanpradip-product.css zone 20 (migrated) ─────────────────── */
  .product__description-title {
    font-weight: 600;
  }

  .product__description iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
  }

  .product__description img {
    max-width: 100%;
    height: auto;
  }

  ul.product__media-list.grid {
    margin-bottom: 1rem;
  }

  .product__description-see-more {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.8rem;
  }

  .product__description-see-more .icon {
    width: 1.2rem;
  }
/* END_BLOCK:_product-description */

/* START_BLOCK:_product-details (INDEX:110) */
/* _product-details — private static block: the PDP info column. Accepts child
     blocks (product-private + @theme + @app) and renders them via
     content_for 'blocks', re-passing closest.product so descendants bind to the
     product. Mirrors blocks/_product-card.liquid. Spec: §5, §14. */

  .product-details {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 1.2rem;
    row-gap: var(--pd-gap, 1.5rem);
  }

  /* Every direct child defaults to its own full-width line (unchanged stacked
     layout). A handful of "meta row" blocks opt into flex:0 0 auto below so they
     can sit together on one wrapping line instead. */
  .product-details > * {
    flex: 1 1 100%;
    min-width: 0;
  }

  /* Same font-size across author/rating/sku so the meta row reads as one line
     of text, regardless of each block's own type-preset/heading settings. */
  .product-details > .product-author,
  .product-details > .review-stars-block,
  .product-details > .pdp-meta-row {
    flex: 0 0 auto;
    font-size: 1.4rem;
  }

  /* Pipe separator — only when a meta-row item is actually preceded by another
     one (the "~" general sibling combinator), so a lone item never shows an
     orphaned leading pipe when author/rating are blank/hidden. Sized in em off
     the now-shared 1.3rem so it never reads taller than the surrounding text. */
  .product-details > .product-author ~ .review-stars-block::before,
  .product-details > .product-author ~ .pdp-meta-row::before,
  .product-details > .review-stars-block ~ .pdp-meta-row::before {
    content: '';
    display: inline-block;
    width: 0.1rem;
    height: 1em;
    vertical-align: middle;
    background: rgb(from var(--color-foreground) r g b / 25%);
    margin-inline-end: 1.2rem;
  }

  .product-details .breadcrumbs__wrapper {
    margin-block-end: 0.5rem;
  }

  /* ── section-gyanpradip-product.css zone 5 — product info content (migrated) */
  .product__info-container iframe {
    max-width: 100%;
  }

.product__text {
    margin-bottom: 0;
  }

  a.product__text {
    display: block;
    text-decoration: none;
    color: rgb(from var(--color-foreground) r g b / 75%);
  }

  .product__text.caption-with-letter-spacing {
    text-transform: uppercase;
  }

  .product__title {
    word-break: break-word;
    margin: 0;
  }

  .product__title > * {
    margin: 0;
  }

  .product__title > a {
    display: none;
  }

  .product__title + .product__text.caption-with-letter-spacing {
    margin-top: -1.5rem;
  }

  .product__text.caption-with-letter-spacing + .product__title {
    margin-top: 0;
  }

  @media screen and (min-width: 750px) {
    .product__info-container {
      max-width: 74rem;
    }

    .product__info-container > *:first-child {
      margin-top: 0;
    }
  }

  .product__tax {
    margin-top: 0.5rem;
  }

  /* no-media centering for info-column children */
  .product--no-media .product__title,
  .product--no-media .product__text,
  .product--no-media .product__tax,
  .product--no-media .product__sku,
  .product--no-media shopify-payment-terms {
    text-align: center;
  }

  .product--no-media .product__media-wrapper,
  .product--no-media .product__info-wrapper {
    padding: 0;
  }

  .product--no-media .share-button {
    max-width: 100%;
  }

  .product--no-media .product-form__quantity,
  .product--no-media .share-button,
  .product--no-media .product__view-details,
  .product--no-media .product__pickup-availabilities,
  .product--no-media .product-form {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .product--no-media .product-form {
    flex-direction: column;
  }

  .product--no-media .product-form > .form {
    max-width: 30rem;
    width: 100%;
  }

  .product--no-media .product-form__quantity {
    flex-direction: column;
    max-width: 100%;
  }

  .product-form__quantity .form__label {
    margin-bottom: 0.6rem;
    font-size: 1.3rem;
  }

  .price-per-item__label.form__label {
    margin-bottom: 0rem;
  }

  .product-form__quantity-top .form__label {
    margin-bottom: 1.2rem;
  }

  .product-form__buttons {
    max-width: 44rem;
  }

  .product--no-media .product__info-container > modal-opener {
    display: block;
    text-align: center;
  }

  .product--no-media .product-popup-modal__button {
    padding-right: 0;
  }

  /* ── section-gyanpradip-product.css zone 12 — view details (migrated) ───── */
  .product:not(.featured-product) .product__view-details {
    display: none;
  }

  a.product__view-details {
    display: block;
    text-decoration: none;
    text-align: start;
  }

  .product__view-details:hover {
    text-decoration: underline;
    text-underline-offset: 0.3rem;
  }

  .product__view-details .icon {
    width: 1.2rem;
    margin-left: 1.2rem;
    flex-shrink: 0;
  }

  /* ── section-gyanpradip-product.css zone 14 — icon with text (migrated) ─── */
  .icon-with-text {
    --icon-size: calc(var(--font-heading-scale) * 3rem);
    --icon-spacing: calc(var(--font-heading-scale) * 1rem);
  }

  .icon-with-text--horizontal {
    display: flex;
    justify-content: center;
    column-gap: 3rem;
    flex-direction: row;
  }

  .icon-with-text--vertical {
    --icon-size: calc(var(--font-heading-scale) * 2rem);
  }

  .icon-with-text .svg-wrapper {
    fill: var(--color-foreground);
    height: var(--icon-size);
    width: var(--icon-size);
  }

  .icon-with-text--horizontal .svg-wrapper,
  .icon-with-text--horizontal img {
    margin-bottom: var(--icon-spacing);
  }

  .icon-with-text--vertical .svg-wrapper {
    min-height: var(--icon-size);
    min-width: var(--icon-size);
    margin-right: var(--icon-spacing);
  }

  .icon-with-text img {
    height: var(--icon-size);
    width: var(--icon-size);
    object-fit: contain;
  }

  .icon-with-text--vertical img {
    margin-right: var(--icon-spacing);
  }

  .icon-with-text--horizontal .h4 {
    padding-top: calc(var(--icon-size) + var(--icon-spacing));
    text-align: center;
  }

  .icon-with-text--horizontal .svg-wrapper + .h4,
  .icon-with-text--horizontal img + .h4,
  .icon-with-text--horizontal.icon-with-text--text-only .h4 {
    padding-top: 0;
  }

  .icon-with-text__item {
    display: flex;
    align-items: center;
  }

  .icon-with-text--horizontal .icon-with-text__item {
    flex-direction: column;
    width: 33%;
  }

  .icon-with-text--vertical .icon-with-text__item {
    margin-bottom: var(--icon-size);
  }
/* END_BLOCK:_product-details */

/* START_BLOCK:_product-info-tab-author (INDEX:111) */
/* _product-info-tab-author — private block, child of
     sections/product-info-tabs.liquid ONLY. Renders one <button role="tab">
     + <div role="tabpanel"> pair holding EACH linked author's photo/name/bio
     — the author reference (section.settings.author_metafield_key) is a
     LIST metafield, since a book can have multiple authors. When
     show_photo is on but an author entry has no photo, a generic
     placeholder circle renders instead so the layout stays aligned. */

  .product-content-tabs__author-entry {
    display: flex;
    gap: 1.6rem;
    align-items: flex-start;
  }

  .product-content-tabs__author-entry + .product-content-tabs__author-entry {
    margin-top: 1.6rem;
    padding-top: 1.6rem;
    border-top: 0.1rem solid rgb(from var(--color-foreground) r g b / 8%);
  }

  .product-content-tabs__author-photo {
    flex-shrink: 0;
    width: 6.4rem;
    height: 6.4rem;
    border-radius: 100%;
    overflow: hidden;
  }

  .product-content-tabs__author-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .product-content-tabs__author-photo--placeholder {
    background: rgb(from var(--color-foreground) r g b / 10%);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .product-content-tabs__author-photo--placeholder svg {
    width: 55%;
    height: 55%;
    fill: rgb(from var(--color-foreground) r g b / 35%);
  }

  .product-content-tabs__author-name {
    margin: 0 0 0.6rem;
  }

  .product-content-tabs__author-name a {
    color: inherit;
    text-decoration: none;
  }

  .product-content-tabs__author-name a:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
    text-underline-offset: 0.2rem;
  }
/* END_BLOCK:_product-info-tab-author */

/* START_BLOCK:_product-info-tab-specification (INDEX:112) */
/* _product-info-tab-specification — private block, child of
     sections/product-info-tabs.liquid ONLY. Renders one <button role="tab">
     + <div role="tabpanel"> pair holding a spec table (Title / Author /
     Publisher / ISBN / Edition / Pages / Country / Language / Binding /
     Publish year / Category / Product type). Publisher text (from either
     the metafield or, if use_vendor_as_publisher is on, product.vendor) is
     always run through snippets/gyanpradip-vendor-links.liquid, which
     splits on "&"/"," and links EACH name separately to Shopify's built-in
     /collections/vendors?q=<name> lookup — so a combined value like
     "Jowel Writer & mohin" renders as two independently working links, not
     one broken combined-query link. Category can optionally be swapped for
     product.collections, listed and
     linked to each collection's own page (see use_collections_as_category
     and snippets/gyanpradip-collections-joined.liquid). Reads the shared
     metafield namespace + author reference key from the parent section's
     settings so every tab block in the group stays in sync. */

  .product-content-tabs__table {
    width: 100%;
    border-collapse: collapse;
  }

  .product-content-tabs__table tr:nth-child(even) {
    background: rgb(from var(--color-foreground) r g b / 3%);
  }

  .product-content-tabs__table th,
  .product-content-tabs__table td {
    text-align: left;
    padding: 1.1rem 1.4rem;
    font-size: 1.4rem;
    vertical-align: top;
    border: 0.1rem solid rgb(from var(--color-foreground) r g b / 8%);
  }

  .product-content-tabs__table th {
    width: 35%;
    font-weight: 500;
    color: rgb(from var(--color-foreground) r g b / 65%);
  }

  .product-content-tabs__table td a {
    color: var(--color-primary);
    text-decoration: none;
  }

  .product-content-tabs__table td a:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
    text-underline-offset: 0.2rem;
  }
/* END_BLOCK:_product-info-tab-specification */

/* START_BLOCK:_product-info-tab-summary (INDEX:113) */
/* _product-info-tab-summary — private block, child of
     sections/product-info-tabs.liquid ONLY. Renders one <button role="tab">
     + <div role="tabpanel"> pair; assets/gyanpradip-product-content-tabs.js
     moves every tab-block's button into a shared tablist wrapper on connect,
     regardless of DOM interleaving — see that file's header comment. */
/* END_BLOCK:_product-info-tab-summary */

/* START_BLOCK:_product-media-gallery (INDEX:114) */
/* _product-media-gallery — private static block for the PDP media column.
     Owns all media settings. Renders the existing <media-gallery> markup via
     snippets/product-media-gallery.liquid (unchanged DOM contract for
     media-gallery.js / product-info.js). All new layout CSS is scoped under
     media-gallery[data-media-type] so quick-view / featured-product galleries
     (which never set data-media-type) are untouched. Per-instance numeric values
     ride in as --pmg-* CSS vars; the JS keys off data-media-id/
     -variant-attached/-target. Spec: blueprint/product-page/PRODUCT_PAGE_FIXES_PLAN.md §B. */

  .product__media-wrapper {
    --pmg-grid-gap: 1rem;
  }

  /* Corner radius (corner_radius px range → media rounding) */
  .product__media-wrapper .product__media.rounded--image,
  .product__media-wrapper .rounded--media-thumbnail .thumbnail-list__item {
    border-radius: var(--pmg-radius, 0);
  }

  /* ============================ GRID MODE ============================ */
  /* Grid is a static layout on desktop: no arrow overlay. On mobile the grid
     becomes a horizontal scroll carousel (slider--mobile) so the nav must stay. */
  @media screen and (min-width: 750px) {
    media-gallery[data-media-type="grid"] .main-viewer-navigation { display: none; }
  }

  @media screen and (min-width: 750px) {
    media-gallery[data-media-type="grid"][data-grid-cols="1"] .product--thumbnail-columns,
    media-gallery[data-media-type="grid"][data-grid-cols="2"] .product--thumbnail-columns {
      display: block;
      padding-inline: 7rem;
    }
    }

    /* 1 column — every media full width, stacked vertically */
    media-gallery[data-media-type="grid"][data-grid-cols="1"] .product__media-list {
      display: flex;
      flex-direction: column;
      gap: var(--pmg-grid-gap, 1rem);
      overflow: visible;
      margin: 0;
      width: 100%;
    }
    media-gallery[data-media-type="grid"][data-grid-cols="1"] .product__media-item {
      width: 100% !important;
      max-width: 100% !important;
      margin: 0 !important;
    }

    /* 2 columns — grid */
    media-gallery[data-media-type="grid"][data-grid-cols="2"] .product__media-list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--pmg-grid-gap, 1rem);
      overflow: visible;
      margin: 0;
      width: 100%;
    }
    media-gallery[data-media-type="grid"][data-grid-cols="2"] .product__media-item {
      width: 100% !important;
      max-width: 100% !important;
      margin: 0 !important;
    }
    /* Full width first image (grid 2-col). Targets the first VISIBLE item
       (tagged server-side + by media-gallery.js), not :first-child, so the
       span follows variant/group filtering instead of a hidden DOM child. */
    media-gallery[data-media-type="grid"][data-grid-cols="2"][data-full-first] .product__media-item--full-span {
      grid-column: 1 / -1;
    }

    /* Full-width first image: restore natural aspect ratio when media-fit = cover.
       height:100% from .media-fit-cover equalises paired-row heights, but the
       first item is alone in row 1 — no sibling sets row height — so the
       container collapses to 0. Reset to auto so padding-top drives the ratio. */
    media-gallery[data-media-type="grid"][data-grid-cols="2"][data-full-first] .product__media-item--full-span .product-media-container.media-fit-cover,
    media-gallery[data-media-type="grid"][data-grid-cols="2"][data-full-first] .product__media-item--full-span .product-media-container.media-fit-cover .product__modal-opener,
    media-gallery[data-media-type="grid"][data-grid-cols="2"][data-full-first] .product__media-item--full-span .product-media-container.media-fit-cover .media {
      height: auto;
    }
    media-gallery[data-media-type="grid"][data-grid-cols="2"][data-full-first] .product__media-item--full-span .product-media-container.media-fit-cover .media {
      padding-top: var(--ratio-percent);
    }
  }

  /* ===================== SINGLE-SLIDE MAIN VIEWER ===================== */
  /* Carousel (all thumbnail positions) AND grid-with-thumbnails show ONE image
     in the main viewer; thumbnails act as pagination. */
  @media screen and (min-width: 750px) {
    media-gallery[data-media-type="carousel"] .product__media-list,
    media-gallery[data-grid-cols="thumbnail"] .product__media-list {
      display: flex;
      flex-wrap: nowrap;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      gap: 0;
      margin: 0;
      width: 100%;
    }
    media-gallery[data-media-type="carousel"] .product__media-list > .product__media-item,
    media-gallery[data-grid-cols="thumbnail"] .product__media-list > .product__media-item {
      flex: 0 0 100%;
      width: 100% !important;
      max-width: 100% !important;
      margin: 0 !important;
      scroll-snap-align: start;
    }
  }

  /* ===================== THUMBNAIL POSITIONING ====================== */
  @media screen and (min-width: 750px) {
    /* Bottom — thumbnails below the main media, matching width, 20px gap */
    media-gallery[data-desktop-layout="thumbnail_slider"] .product--thumbnail-columns {
      display: flex;
      flex-direction: column;
      gap: 2rem;
    }

    /* Left & Right — vertical thumbnail rail ~120px, main media takes the rest */
    media-gallery[data-desktop-layout="thumbnail_slider_left"] .product--thumbnail-columns,
    media-gallery[data-desktop-layout="thumbnail_slider_right"] .product--thumbnail-columns {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      gap: 1.5rem;
    }
    media-gallery[data-desktop-layout="thumbnail_slider_left"] .thumbnail-slider,
    media-gallery[data-desktop-layout="thumbnail_slider_right"] .thumbnail-slider {
      /* Single source of rail width (--pmg-rail-width set on the wrapper). The
         old hard 12rem + the dead Zone 26 width:15% are both replaced by this. */
      flex: 0 0 var(--pmg-rail-width, 12rem);
      max-width: var(--pmg-rail-width, 12rem);
      min-width: 0;
    }
    media-gallery[data-desktop-layout="thumbnail_slider_left"] [data-gallery-viewer],
    media-gallery[data-desktop-layout="thumbnail_slider_right"] [data-gallery-viewer] {
      flex: 1 1 auto;
      min-width: 0;
      order: 1;
    }
    media-gallery[data-desktop-layout="thumbnail_slider_left"] .thumbnail-slider { order: 0; }
    media-gallery[data-desktop-layout="thumbnail_slider_right"] .thumbnail-slider { order: 2; }

    /* Carousel nav overlay: position relative to the viewer, not the full sticky column */
    media-gallery[data-media-type="carousel"] [data-gallery-viewer] {
      position: relative;
    }

    /* Vertical thumbnail list fills the narrow rail and scrolls top↔bottom */
    media-gallery[data-desktop-layout="thumbnail_slider_left"] .thumbnail-list.vertical--slider,
    media-gallery[data-desktop-layout="thumbnail_slider_right"] .thumbnail-list.vertical--slider {
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      width: 100%;
    }
    media-gallery[data-desktop-layout="thumbnail_slider_left"] .thumbnail-list.vertical--slider .thumbnail-list__item,
    media-gallery[data-desktop-layout="thumbnail_slider_right"] .thumbnail-list.vertical--slider .thumbnail-list__item {
      width: 100%;
      flex: 0 0 auto;
    }
  }

  /* ===================== NAVIGATION BUTTON STYLES ===================== */

  /* SVG icon sizing */
  media-gallery[data-media-type="carousel"] .main-viewer-button svg {
    width: 2.2rem;
    height: 2.2rem;
    display: block;
    flex-shrink: 0;
  }
  media-gallery[data-media-type="carousel"] .main-viewer-navigation--icon-large-arrow .main-viewer-button svg,
  media-gallery[data-media-type="carousel"] .main-viewer-navigation--icon-large-chevron .main-viewer-button svg {
    width: 3.2rem;
    height: 3.2rem;
  }

  /* Icon background shapes */
  media-gallery[data-media-type="carousel"] .main-viewer-button--bg-circle {
    border-radius: 100%;
  }
  media-gallery[data-media-type="carousel"] .main-viewer-button--bg-square {
    border-radius: 0;
  }
  media-gallery[data-media-type="carousel"] .main-viewer-button--bg-none {
    background: transparent;
    border: 0;
  }

  /* Button styles — solid = primary button, outline = secondary button */
  media-gallery[data-media-type="carousel"] .main-viewer-button--solid:not(.main-viewer-button--bg-none) {
    background: var(--color-primary-button-background);
    color: var(--color-primary-button-text);
    border: var(--btn-border-width, 0.1rem) solid var(--color-primary-button-border);
  }
  media-gallery[data-media-type="carousel"] .main-viewer-button--solid:not(.main-viewer-button--bg-none):hover {
    background: var(--color-primary-button-hover-background);
    color: var(--color-primary-button-hover-text);
    border-color: var(--color-primary-button-hover-border);
  }
  media-gallery[data-media-type="carousel"] .main-viewer-button--outline:not(.main-viewer-button--bg-none) {
    background: var(--color-secondary-button-background);
    color: var(--color-secondary-button-text);
    border: var(--btn-border-width, 0.1rem) solid var(--color-secondary-button-border);
  }
  media-gallery[data-media-type="carousel"] .main-viewer-button--outline:not(.main-viewer-button--bg-none):hover {
    background: var(--color-secondary-button-hover-background);
    color: var(--color-secondary-button-hover-text);
    border-color: var(--color-secondary-button-hover-border);
  }

  /* === GRID + COUNTER: arrow button styling on mobile ================
     On desktop, grid nav is suppressed. On mobile with Counter layout the
     arrows are visible; apply the same icon/bg/colour rules as carousel. */
  @media screen and (max-width: 749px) {
    media-gallery[data-media-type="grid"][data-mobile-style="counter"] .main-viewer-button svg {
      width: 2.2rem;
      height: 2.2rem;
      display: block;
      flex-shrink: 0;
    }
    media-gallery[data-media-type="grid"][data-mobile-style="counter"] .main-viewer-navigation--icon-large-arrow .main-viewer-button svg,
    media-gallery[data-media-type="grid"][data-mobile-style="counter"] .main-viewer-navigation--icon-large-chevron .main-viewer-button svg {
      width: 3.2rem;
      height: 3.2rem;
    }
    media-gallery[data-media-type="grid"][data-mobile-style="counter"] .main-viewer-button--bg-circle {
      border-radius: 100%;
    }
    media-gallery[data-media-type="grid"][data-mobile-style="counter"] .main-viewer-button--bg-square {
      border-radius: 0;
    }
    media-gallery[data-media-type="grid"][data-mobile-style="counter"] .main-viewer-button--bg-none {
      background: transparent;
      border: 0;
    }
    media-gallery[data-media-type="grid"][data-mobile-style="counter"] .main-viewer-button--solid:not(.main-viewer-button--bg-none) {
      background: var(--color-primary-button-background);
      color: var(--color-primary-button-text);
      border: var(--btn-border-width, 0.1rem) solid var(--color-primary-button-border);
    }
    media-gallery[data-media-type="grid"][data-mobile-style="counter"] .main-viewer-button--solid:not(.main-viewer-button--bg-none):hover {
      background: var(--color-primary-button-hover-background);
      color: var(--color-primary-button-hover-text);
      border-color: var(--color-primary-button-hover-border);
    }
    media-gallery[data-media-type="grid"][data-mobile-style="counter"] .main-viewer-button--outline:not(.main-viewer-button--bg-none) {
      background: var(--color-secondary-button-background);
      color: var(--color-secondary-button-text);
      border: var(--btn-border-width, 0.1rem) solid var(--color-secondary-button-border);
    }
    media-gallery[data-media-type="grid"][data-mobile-style="counter"] .main-viewer-button--outline:not(.main-viewer-button--bg-none):hover {
      background: var(--color-secondary-button-hover-background);
      color: var(--color-secondary-button-hover-text);
      border-color: var(--color-secondary-button-hover-border);
    }
  }

  /* ===================== DRAG & SWIPE ===================== */
  /* Grab cursor and pan-x scroll only when an image slide is active.
     :not([data-active-media-type]) covers the initial render before JS runs. */
  media-gallery[data-media-type="carousel"]:not([data-active-media-type]) .product__media-list,
  media-gallery[data-media-type="carousel"][data-active-media-type="image"] .product__media-list {
    touch-action: pan-x;
    cursor: grab;
  }
  media-gallery[data-media-type="carousel"][data-active-media-type="image"] .product__media-list.is-dragging {
    cursor: grabbing;
    user-select: none;
  }
  /* Non-image slides: restore default cursor and free up touch so media
     controls and 3D model rotation/zoom can work without interference. */
  media-gallery[data-media-type="carousel"]:is([data-active-media-type="video"],
                                               [data-active-media-type="external_video"],
                                               [data-active-media-type="model"]) .product__media-list {
    touch-action: auto;
    cursor: auto;
  }
  /* Block native browser ghost-drag on images (fights scroll-drag).
     Videos get -webkit-user-drag only — pointer-events must stay enabled
     so native HTML5 video controls (play, seek, volume) remain clickable. */
  media-gallery[data-media-type="carousel"] .product__media-list img {
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
  }
  media-gallery[data-media-type="carousel"] .product__media-list video {
    -webkit-user-drag: none;
  }

  /* ===================== MOBILE PAGINATION ===================== */
  /* Hide dots + numeric counter by default; reveal only the selected mobile style. */
  media-gallery [data-mobile-style="counter"],
  media-gallery [data-mobile-style="dots"] { display: none; }
  @media screen and (max-width: 749px) {
    media-gallery[data-mobile-style="counter"] .slider-counter[data-mobile-style="counter"] { display: flex; }
    media-gallery[data-mobile-style="dots"] .slider-counter--dots[data-mobile-style="dots"] {
      display: flex;
      gap: 0.4rem;
      align-items: center;
      flex-wrap: wrap;         /* wrap to next line when many media items */
      justify-content: center; /* center dots below the slide */
    }
  }

  /* ── gyanpradip-slider.css (migrated) ───────────────────────────────────── */
  slider-component {
    --desktop-margin-left-first-item: max(
      5rem,
      calc((100vw - var(--page-width) + 10rem - 8px) / 2)
    );
    position: relative;
    display: block;
  }

  slider-component.slider-component-full-width {
    --desktop-margin-left-first-item: 1.5rem;
  }

  @media screen and (max-width: 749px) {
    slider-component.page-width {
      padding: 0 1.5rem;
    }
  }

  @media screen and (min-width: 749px) and (max-width: 992px) {
    slider-component.page-width {
      padding: 0 5rem;
    }
  }

  @media screen and (max-width: 991px) {
    .no-js slider-component .slider {
      padding-bottom: 3rem;
    }
  }

  .slider__slide {
    --focus-outline-padding: 0.5rem;
    --shadow-padding-top: calc(
      var(--shadow-vertical-offset) * -1 + var(--shadow-blur-radius)
    );
    --shadow-padding-bottom: calc(
      var(--shadow-vertical-offset) + var(--shadow-blur-radius)
    );
    scroll-snap-align: start;
    flex-shrink: 0;
    padding-bottom: 0;
  }

  @media screen and (max-width: 749px) {
    .slider.slider--mobile {
      position: relative;
      flex-wrap: inherit;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      scroll-padding-left: 1.5rem;
      -webkit-overflow-scrolling: touch;
    }

    .slider.slider--mobile .slider__slide {
      margin-bottom: 0;
      padding-top: max(var(--focus-outline-padding), var(--shadow-padding-top));
      padding-bottom: max(
        var(--focus-outline-padding),
        var(--shadow-padding-bottom)
      );
    }

    .slider.slider--mobile.contains-card--standard
      .slider__slide:not(.collection-list__item--no-media) {
      padding-bottom: var(--focus-outline-padding);
    }

    .slider.slider--mobile.contains-content-container .slider__slide {
      --focus-outline-padding: 0rem;
    }
  }

  @media screen and (min-width: 750px) {
    .slider.slider--tablet-up:not(.vertical--slider) {
      position: relative;
      flex-wrap: inherit;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      scroll-padding-left: 1rem;
      -webkit-overflow-scrolling: touch;
    }

    .slider.slider--tablet-up .slider__slide {
      margin-bottom: 0;
    }

    .slider.slider--tablet-up.vertical--slider {
      scroll-snap-type: y mandatory;
      overflow-y: auto;
      overflow-x: hidden;
      /* Never wrap: a single proportional column that scrolls vertically. wrap +
         the fixed max-height was what spilled items into a phantom 2nd column
         and collapsed them into slivers. */
      flex-wrap: nowrap;
      /* Exactly N thumbnails tall (computed in Liquid as --pmg-rail-max-height
         from rail width + representative ratio). Falls back to 45rem. */
      max-height: var(--pmg-rail-max-height, 45rem);
      padding: 1px 3px;
      scroll-padding-block-start: 0.5rem;
    }
  }

  @media screen and (max-width: 991px) {
    .slider.slider--tablet {
      position: relative;
      flex-wrap: inherit;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      scroll-padding-left: 1.5rem;
      -webkit-overflow-scrolling: touch;
      margin-bottom: 1rem;
    }

    .slider.slider--tablet .slider__slide {
      margin-bottom: 0;
      padding-top: max(var(--focus-outline-padding), var(--shadow-padding-top));
      padding-bottom: max(
        var(--focus-outline-padding),
        var(--shadow-padding-bottom)
      );
    }

    .slider.slider--tablet.contains-card--standard
      .slider__slide:not(.collection-list__item--no-media) {
      padding-bottom: var(--focus-outline-padding);
    }

    .slider.slider--tablet.contains-content-container .slider__slide {
      --focus-outline-padding: 0rem;
    }
  }

  .slider--everywhere {
    position: relative;
    flex-wrap: inherit;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
  }

  .slider.slider--everywhere .slider__slide {
    margin-bottom: 0;
    scroll-snap-align: center;
  }

  @media screen and (min-width: 992px) {
    .slider-component-desktop.page-width {
      max-width: none;
    }

    .slider--desktop {
      position: relative;
      flex-wrap: inherit;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      margin-bottom: 1rem;
      scroll-padding-left: var(--desktop-margin-left-first-item);
    }

    .slider.slider--desktop .slider__slide {
      margin-bottom: 0;
      padding-top: max(var(--focus-outline-padding), var(--shadow-padding-top));
      padding-bottom: max(
        var(--focus-outline-padding),
        var(--shadow-padding-bottom)
      );
    }

    .slider--desktop .slider__slide:first-child {
      margin-left: var(--desktop-margin-left-first-item);
      scroll-margin-left: var(--desktop-margin-left-first-item);
    }

    .slider.slider--desktop .slider__slide:last-child {
      margin-right: 5rem;
    }

    .slider-component-full-width .slider--desktop {
      scroll-padding-left: 1.5rem;
    }

    .slider-component-full-width .slider--desktop .slider__slide:first-child {
      margin-left: 1.5rem;
      scroll-margin-left: 1.5rem;
    }

    .slider-component-full-width .slider--desktop .slider__slide:last-child {
      margin-right: 1.5rem;
    }

    .slider--desktop.grid--5-col-desktop .grid__item {
      width: calc((100% - var(--desktop-margin-left-first-item)) / 5 - 8px * 2);
    }

    .slider--desktop.grid--4-col-desktop .grid__item {
      width: calc((100% - var(--desktop-margin-left-first-item)) / 4 - 8px * 3);
    }

    .slider--desktop.grid--3-col-desktop .grid__item {
      width: calc((100% - var(--desktop-margin-left-first-item)) / 3 - 8px * 4);
    }

    .slider--desktop.grid--2-col-desktop .grid__item {
      width: calc((100% - var(--desktop-margin-left-first-item)) / 2 - 8px * 5);
    }

    .slider--desktop.grid--1-col-desktop .grid__item {
      width: calc((100% - var(--desktop-margin-left-first-item)) - 8px * 9);
    }

    .slider.slider--desktop.contains-card--standard
      .slider__slide:not(.collection-list__item--no-media) {
      padding-bottom: var(--focus-outline-padding);
    }

    .slider.slider--desktop.contains-content-container .slider__slide {
      --focus-outline-padding: 0rem;
    }
  }

  @media (prefers-reduced-motion) {
    .slider {
      scroll-behavior: auto;
    }
  }

  .slider {
    scrollbar-color: var(--color-foreground)
      rgb(from var(--color-foreground) r g b / 4%);
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .slider::-webkit-scrollbar {
    height: 0.4rem;
    width: 0.4rem;
    display: none;
  }

  .no-js .slider {
    -ms-overflow-style: auto;
    scrollbar-width: auto;
  }

  .no-js .slider::-webkit-scrollbar {
    display: initial;
  }

  .slider::-webkit-scrollbar-thumb {
    background-color: var(--color-foreground);
    border-radius: 0.4rem;
    border: 0;
  }

  .slider::-webkit-scrollbar-track {
    background: rgb(from var(--color-foreground) r g b / 4%);
    border-radius: 0.4rem;
  }

  .slider-counter {
    display: flex;
    justify-content: center;
    min-width: 4.4rem;
  }

  @media screen and (min-width: 750px) {
    .slider-counter--dots {
      margin: 0 1.2rem;
    }
  }

  .slider-counter__link {
    padding: 1rem;
    background: transparent;
    border: none;
    line-height: 0;
    cursor: pointer;
  }

  @media screen and (max-width: 749px) {
    .slider-counter__link {
      padding: 0.5rem;
    }
  }

  .slider-counter__link--dots .dot {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    border: 0.15rem solid rgb(from var(--color-foreground) r g b / 25%);
    padding: 0;
    display: block;
    transition: background-color 0.2s ease, border-color 0.2s ease;
  }

  .slider-counter__link--active.slider-counter__link--dots .dot {
    background-color: var(--color-foreground);
    border-color: var(--color-foreground);
  }

  @media screen and (forced-colors: active) {
    .slider-counter__link--active.slider-counter__link--dots .dot {
      background-color: CanvasText;
    }
  }

  .slider-counter__link--dots:not(.slider-counter__link--active):hover .dot {
    border-color: var(--color-foreground);
  }

  .slider-counter__link--dots .dot,
  .slider-counter__link--numbers {
    transition: transform 0.2s ease-in-out;
  }

  .slider-counter__link--active.slider-counter__link--numbers,
  .slider-counter__link--dots:not(.slider-counter__link--active):hover .dot,
  .slider-counter__link--numbers:hover {
    transform: scale(1.1);
  }

  .slider-counter__link--numbers {
    color: rgb(from var(--color-foreground) r g b / 5%);
    text-decoration: none;
  }

  .slider-counter__link--numbers:hover {
    color: var(--color-foreground);
  }

  .slider-counter__link--active.slider-counter__link--numbers {
    text-decoration: underline;
    color: var(--color-foreground);
  }

  .slider-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  @media screen and (min-width: 750px) {
    .slider:not(.slider--everywhere):not(.slider--desktop) + .slider-buttons {
      display: none;
    }

    .slider:not(.slider--everywhere):not(.slider--desktop)
      + .main-viewer-navigation
      .slider-counter {
      display: none;
    }
  }

  @media screen and (max-width: 991px) {
    .slider--desktop:not(.slider--tablet) + .slider-buttons {
      display: none;
    }
  }

  @media screen and (min-width: 750px) {
    .slider--mobile + .slider-buttons {
      display: none;
    }
  }

  .slider-button {
    color: rgb(from var(--color-foreground) r g b / 75%);
    background: transparent;
    border: none;
    cursor: pointer;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .slider-button:not([disabled]):hover {
    color: var(--color-foreground);
  }

  .slider-button .icon {
    height: 1.5rem;
  }

  .slider-button[disabled] .icon {
    color: rgb(from var(--color-foreground) r g b / 3%);
    cursor: not-allowed;
  }

  .slider-button--next .icon {
    transform: rotate(-90deg);
  }

  .slider-button--prev .icon {
    transform: rotate(90deg);
  }

  .slider-button--next:not([disabled]):hover .icon {
    transform: rotate(-90deg) scale(1.1);
  }

  .slider-button--prev:not([disabled]):hover .icon {
    transform: rotate(90deg) scale(1.1);
  }

  /* ── gyanpradip-deferred-media.css (migrated) ────────────────────────────── */
  .deferred-media__poster {
    background-color: transparent;
    border: none;
    cursor: pointer;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    border-radius: calc(var(--border-radius) - var(--border-width));
  }

  .media > .deferred-media__poster {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .deferred-media__poster img {
    width: auto;
    max-width: 100%;
    height: 100%;
  }

  .deferred-media {
    overflow: hidden;
  }

  .deferred-media:not([loaded]) template {
    z-index: -1;
  }

  .deferred-media[loaded] > .deferred-media__poster {
    display: none;
  }

  .deferred-media__poster:focus-visible {
    outline: none;
    box-shadow: 0 0 0 var(--media-border-width)
        rgb(from var(--color-foreground) r g b / calc(var(--media-border-opacity) * 100%)),
      0 0 0 calc(var(--media-border-width) + 0.3rem) var(--color-background),
      0 0 0 calc(var(--media-border-width) + 0.5rem)
        rgb(from var(--color-foreground) r g b / 5%);
    border-radius: calc(var(--media-radius) - var(--media-border-width));
  }

  .deferred-media__poster:focus {
    outline: none;
    box-shadow: 0 0 0 var(--media-border-width)
        rgb(from var(--color-foreground) r g b / calc(var(--media-border-opacity) * 100%)),
      0 0 0 calc(var(--media-border-width) + 0.3rem) var(--color-background),
      0 0 0 calc(var(--media-border-width) + 0.5rem)
        rgb(from var(--color-foreground) r g b / 5%);
    border-radius: calc(var(--media-radius) - var(--media-border-width));
  }

  .global-media-settings--full-width .deferred-media__poster,
  .global-media-settings--full-width
    .deferred-media__poster:is(:focus, :focus-visible) {
    border-radius: 0;
  }

  @media (forced-colors: active) {
    .deferred-media__poster:focus {
      outline: transparent solid 1px;
    }
  }

  .deferred-media__poster:focus:not(:focus-visible) {
    outline: 0;
    box-shadow: none;
  }

  .deferred-media__poster-button {
    background-color: var(--color-background);
    border: 0.1rem solid rgb(from var(--color-foreground) r g b / 1%);
    border-radius: 50%;
    color: var(--color-foreground);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 6.2rem;
    width: 6.2rem;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(1);
    transition: transform var(--duration-short) ease,
      color var(--duration-short) ease;
    z-index: 1;
  }

  .deferred-media__poster-button:hover {
    transform: translate(-50%, -50%) scale(1.1);
  }

  .deferred-media__poster-button .icon {
    width: 2rem;
    height: 2rem;
  }

  .deferred-media__poster-button .gyanpradip-icon-play {
    margin-left: 0.2rem;
  }

  /* ── section-gyanpradip-product.css zones 6+8+10+11+16+21+23+26+27+28 — media gallery (migrated) ─── */

  /* Zone 6 — Product media list + item styles */
  .product__media-list video {
    border-radius: calc(var(--media-radius) - var(--media-border-width));
  }

  @media screen and (max-width: 749px) {
    .product__media-list {
      margin-left: -2.5rem;
      margin-bottom: 0;
      width: calc(100% + 4rem);
    }

    .product__media-wrapper slider-component:not(.thumbnail-slider--no-slide) {
      margin-left: -1.5rem;
      margin-right: -1.5rem;
    }

    .slider.product__media-list::-webkit-scrollbar {
      height: 0.2rem;
      width: 0.2rem;
    }

    .product__media-list::-webkit-scrollbar-thumb {
      background-color: var(--color-foreground);
    }

    .product__media-list::-webkit-scrollbar-track {
      background-color: rgb(from var(--color-foreground) r g b / 2%);
    }

    .product__media-list .product__media-item {
      width: calc(100% - 3rem - var(--grid-gap-x-mobile)) !important;
    }

    .grid--peek.slider .product__media-item.grid__item:first-of-type {
      margin-left: 1.5rem;
    }

    .product--mobile-columns .product__media-item {
      width: calc(50% - 1.5rem - var(--grid-gap-x-mobile));
    }
  }

  @media screen and (min-width: 750px) {
    .product--thumbnail .product__media-list,
    .product--thumbnail_slider .product__media-list {
      padding-bottom: calc(
        var(--media-shadow-vertical-offset) * var(--media-shadow-visible)
      );
    }

    .product__media-list {
      padding-right: calc(
        var(--media-shadow-horizontal-offset) * var(--media-shadow-visible)
      );
    }

    .product--thumbnail .product__media-item:not(.is-active),
    .product--thumbnail_slider .product__media-item:not(.is-active) {
      display: none;
    }

    .product-media-modal__content
      > .product__media-item--variant.product__media-item--variant {
      display: none;
    }

    .product-media-modal__content > .product__media-item--variant:first-child {
      display: block;
    }
  }

  @media screen and (min-width: 750px) and (max-width: 989px) {
    .product__media-list .product__media-item:first-child {
      padding-left: 0;
    }

    .product--thumbnail_slider .product__media-list {
      margin-left: 0;
    }

    .product__media-list .product__media-item {
      width: 100%;
    }
  }

  .product__media-icon,
  .thumbnail__badge {
    background-color: var(--color-background);
    border-radius: 50%;
    border: 0.1rem solid rgb(from var(--color-foreground) r g b / 1%);
    color: var(--color-foreground);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 5rem;
    width: 5rem;
    position: absolute;
    left: 1.2rem;
    top: 1.2rem;
    z-index: 1;
    transition:
      color var(--duration-short) ease,
      opacity var(--duration-short) ease;
  }

  .product__media-icon .icon {
    width: 2rem;
  }

  .product__media-video .product__media-icon {
    opacity: 1;
  }

  .product__modal-opener--image .product__media-toggle:hover {
    cursor: zoom-in;
  }

  .product__modal-opener:hover .product__media-icon {
    border: 0.1rem solid rgb(from var(--color-foreground) r g b / 1%);
  }

  @media screen and (min-width: 750px) {
    .grid__item.product__media-item--full {
      width: 100%;
    }

    .product--columns
      .product__media-item:not(.product__media-item--single):not(:only-child) {
      max-width: calc(50% - var(--grid-gap-x) / 2);
    }

    .product--large.product--columns
      .product__media-item--full
      .deferred-media__poster-button {
      height: 5rem;
      width: 5rem;
    }

    .product--medium.product--columns
      .product__media-item--full
      .deferred-media__poster-button {
      height: 4.2rem;
      width: 4.2rem;
    }

    .product--medium.product--columns
      .product__media-item--full
      .deferred-media__poster-button
      .icon {
      width: 1.8rem;
      height: 1.8rem;
    }

    .product--small.product--columns
      .product__media-item--full
      .deferred-media__poster-button {
      height: 3.6rem;
      width: 3.6rem;
    }

    .product--small.product--columns
      .product__media-item--full
      .deferred-media__poster-button
      .icon {
      width: 1.6rem;
      height: 1.6rem;
    }
  }

  @media screen and (min-width: 990px) {
    .product--stacked .product__media-item {
      max-width: calc(50% - var(--grid-gap-x) / 2) !important;
    }

    .product:not(.product--columns)
      .product__media-list
      .product__media-item:first-child {
      width: 100% !important;
      max-width: 100% !important;
    }

    .product:not(.product--columns)
      .product__media-list
      .product__media-item--full {
      width: 100%;
      max-width: 100%;
    }

    .product__modal-opener .product__media-icon {
      opacity: 0;
    }

    .product__modal-opener:hover .product__media-icon,
    .product__modal-opener:focus .product__media-icon {
      opacity: 1;
    }
  }

  .product__media-item > * {
    display: block;
    position: relative;
  }

  .product__media-toggle {
    display: flex;
    border: none;
    background-color: transparent;
    color: currentColor;
    padding: 0;
  }

  .product__media-toggle::after {
    content: "";
    cursor: pointer;
    display: block;
    margin: 0;
    padding: 0;
    position: absolute;
    top: calc(var(--border-width) * -1);
    right: calc(var(--border-width) * -1);
    bottom: calc(var(--border-width) * -1);
    left: calc(var(--border-width) * -1);
    z-index: 2;
  }

  .product__media-toggle:focus-visible {
    outline: 0;
    box-shadow: none;
  }

  @media (forced-colors: active) {
    .product__media-toggle:focus-visible,
    .product__media-toggle:focus-visible:after {
      outline: transparent solid 1px;
      outline-offset: 2px;
    }
  }

  .product__media-toggle.focused {
    outline: 0;
    box-shadow: none;
  }

  .product__media-toggle:focus-visible:after {
    box-shadow:
      0 0 0 0.3rem var(--color-background),
      0 0 0rem 0.5rem rgb(from var(--color-foreground) r g b / 5%);
    border-radius: var(--media-radius);
  }

  .product__media-toggle.focused:after {
    box-shadow:
      0 0 0 0.3rem var(--color-background),
      0 0 0rem 0.5rem rgb(from var(--color-foreground) r g b / 5%);
    border-radius: var(--media-radius);
  }

  /* Zone 8 — Product media modal (active post-PhotoSwipe rules) */
  .product-media-modal[open] {
    visibility: visible;
    opacity: 1;
    z-index: 101;
  }

  .product-media-modal__dialog {
    display: flex;
    align-items: center;
    height: 100vh;
  }

  .product-media-modal__content {
    max-height: 100vh;
    width: 100%;
    overflow: auto;
  }

  .product-media-modal__content > *:not(.active),
  .product__media-list .deferred-media {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .product-media-modal__content {
      padding-bottom: 2rem;
    }

    .product-media-modal__content > *:not(.active) {
      display: block;
    }

    .product__modal-opener:not(.product__modal-opener--image) {
      display: none;
    }

    .product__media-list .deferred-media {
      display: block;
    }

    .product-media-container:not(.media-type-image) .product__media {
      display: none;
    }
  }

  @media screen and (max-width: 749px) {
    .product--thumbnail
      .is-active
      .product__modal-opener:not(.product__modal-opener--image),
    .product--thumbnail_slider
      .is-active
      .product-media-container:not(.media-type-image)
      .product__media.media--transparent {
      display: none;
    }

    .product--thumbnail .is-active .deferred-media,
    .product--thumbnail_slider .is-active .deferred-media {
      display: block;
      width: 100%;
    }
  }

  .product-media-modal__content > * {
    display: block;
    height: auto;
    margin: auto;
  }

  .product-media-modal__content .media {
    background: none;
  }

  .product-media-modal__model {
    width: 100%;
  }

  .product-media-modal__toggle {
    background-color: var(--color-background);
    border: 0.1rem solid rgb(from var(--color-foreground) r g b / 1%);
    border-radius: 50%;
    color: rgb(from var(--color-foreground) r g b / 55%);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    right: 2rem;
    padding: 1.2rem;
    position: fixed;
    z-index: 2;
    top: 2rem;
    width: 4rem;
  }

  .product-media-modal__content .deferred-media {
    width: 100%;
  }

  @media screen and (min-width: 750px) {
    .product-media-modal__content {
      padding: 2rem 11rem;
    }

    .product-media-modal__content > * {
      width: 100%;
    }

    .product-media-modal__content > * + * {
      margin-top: 2rem;
    }

    .product-media-modal__toggle {
      right: 5rem;
      top: 2.2rem;
    }
  }

  @media screen and (min-width: 990px) {
    .product-media-modal__content {
      padding: 2rem 11rem;
    }

    .product-media-modal__content > * + * {
      margin-top: 1.5rem;
    }

    .product-media-modal__content {
      padding-bottom: 1.5rem;
    }

    .product-media-modal__toggle {
      right: 5rem;
    }
  }

  .product-media-modal__toggle:hover {
    color: rgb(from var(--color-foreground) r g b / 75%);
  }

  .product-media-modal__toggle .icon {
    height: auto;
    margin: 0;
    width: 2.2rem;
  }

  /* Zone 10 — Thumbnail list */
  .thumbnail-list {
    flex-wrap: wrap;
    grid-gap: 1rem;
  }

  .slider--mobile.thumbnail-list:after {
    content: none;
  }

  @media screen and (min-width: 750px) {
    .product--stacked .thumbnail-list {
      display: none;
    }

    .thumbnail-list {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .thumbnail-list_item--variant:not(:first-child) {
    display: none;
  }

  @media screen and (min-width: 990px) {
    .thumbnail-list {
      grid-template-columns: repeat(4, 1fr);
    }

    .product--medium .thumbnail-list {
      grid-template-columns: repeat(5, 1fr);
    }

    .product--large .thumbnail-list {
      grid-template-columns: repeat(6, 1fr);
    }
  }

  @media screen and (max-width: 749px) {
    .product__media-item {
      display: flex;
      align-items: center;
    }

    .product__modal-opener {
      width: 100%;
    }

    .thumbnail-slider {
      display: flex;
      align-items: center;
    }

    .thumbnail-slider .thumbnail-list.slider {
      display: flex;
      /* Top-align so each thumb keeps its own aspect-ratio height instead of
         being stretched to the tallest item (matters for mixed-ratio media). */
      align-items: flex-start;
      padding: 0.5rem;
      flex: 1;
      scroll-padding-left: 0.5rem;
    }

    /* Mobile thumbnail strip: 4 across. itemWidth = 100%/N − (N−1)·gap/N
       with N=4, gap=1rem. Height follows aspect-ratio, so width drives both. */
    .thumbnail-list__item.slider__slide {
      width: calc(25% - 0.75rem);
    }
  }

  @media screen and (min-width: 750px) {
    .product--thumbnail_slider .thumbnail-slider {
      display: flex;
      align-items: center;
    }

    .thumbnail-slider .thumbnail-list.slider--tablet-up {
      display: flex;
      /* Top-align horizontal (bottom) thumbs so each keeps its aspect-ratio
         height; harmless for the vertical rail (overridden to column below). */
      align-items: flex-start;
      padding: 0.5rem;
      flex: 1;
      scroll-padding-left: 0.5rem;
    }

    .product__media-wrapper
      .slider-mobile-gutter
      .slider-button:not(.main-viewer-button) {
      display: none;
    }

    .thumbnail-list.slider--tablet-up .thumbnail-list__item.slider__slide {
      width: calc(25% - 0.8rem);
    }

    .product--thumbnail_slider .slider-mobile-gutter .slider-button {
      display: flex;
    }

    .thumbnail-list.slider--tablet-up.vertical--slider
      .thumbnail-list__item.slider__slide {
      width: 100%;
    }

    .product--thumbnail_slider
      .product--thumbnails-layout-thumbnail_slider_left
      .thumbnail-slider {
      display: block;
    }
  }

  @media screen and (min-width: 900px) {
    .product--small
      .thumbnail-list.slider--tablet-up
      .thumbnail-list__item.slider__slide {
      width: calc(25% - 0.8rem);
    }

    .thumbnail-list.slider--tablet-up .thumbnail-list__item.slider__slide {
      width: calc(20% - 0.8rem);
    }

    .thumbnail-list.slider--tablet-up.vertical--slider
      .thumbnail-list__item.slider__slide {
      width: 100%;
    }
  }

  /* Zone 11 — Thumbnail button + badge */
  .thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    height: 100%;
    width: 100%;
    padding: 0;
    color: var(--color-foreground);
    cursor: pointer;
    background-color: transparent;
  }

  .thumbnail:hover {
    opacity: 0.7;
  }

  .thumbnail.global-media-settings img {
    border-radius: 0;
  }

  .thumbnail[aria-current] {
    box-shadow: 0 0 0rem 0.1rem var(--color-foreground);
    border-color: var(--color-foreground);
  }

  .product__modal-opener > .loading__spinner {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    display: flex;
    align-items: center;
    height: 48px;
    width: 48px;
  }

  .product__modal-opener .path {
    stroke: var(--color-button);
    opacity: 0.75;
  }

  .js .product__media {
    overflow: hidden !important;
  }

  .thumbnail[aria-current]:focus-visible {
    box-shadow:
      0 0 0 0.3rem var(--color-background),
      0 0 0rem 0.5rem rgb(from var(--color-foreground) r g b / 5%);
  }

  .thumbnail[aria-current]:focus,
  .thumbnail.focused {
    outline: 0;
    box-shadow:
      0 0 0 0.3rem var(--color-background),
      0 0 0rem 0.5rem rgb(from var(--color-foreground) r g b / 5%);
  }

  @media (forced-colors: active) {
    .thumbnail[aria-current]:focus,
    .thumbnail.focused {
      outline: transparent solid 1px;
    }
  }

  .thumbnail[aria-current]:focus:not(:focus-visible) {
    outline: 0;
    box-shadow: 0 0 0 0.1rem var(--color-foreground);
  }

  .thumbnail img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    pointer-events: none;
    padding: 0.5rem;
    border: 1px solid rgb(from var(--color-foreground) r g b / 5%);
  }

  .thumbnail__badge .icon {
    width: 1rem;
    height: 1rem;
  }

  .thumbnail__badge .gyanpradip-icon-3d-model {
    width: 1.2rem;
    height: 1.2rem;
  }

  .thumbnail__badge {
    color: rgb(from var(--color-foreground) r g b / 60%);
    height: 2rem;
    width: 2rem;
    left: auto;
    right: calc(0.4rem + var(--media-border-width));
    top: calc(0.4rem + var(--media-border-width));
  }

  @media screen and (min-width: 750px) {
    .product:not(.product--small) .thumbnail__badge {
      height: 3rem;
      width: 3rem;
    }

    .product:not(.product--small) .thumbnail__badge .icon {
      width: 1.2rem;
      height: 1.2rem;
    }

    .product:not(.product--small) .thumbnail__badge .gyanpradip-icon-3d-model {
      width: 1.4rem;
      height: 1.4rem;
    }
  }

  .thumbnail-list__item {
    position: relative;
    /* Box tracks the media's real aspect ratio (set inline per item as
       --thumb-ratio in product-media-gallery.liquid) instead of the old forced
       1:1 ::before square that cropped portrait/landscape media. Defaults to 1,
       so any thumbnail without the var (legacy / quick-view) is unchanged. */
    aspect-ratio: var(--thumb-ratio, 1);
  }

  /* Zone 16 — Product media container (aspect ratio) */
  .product-media-container {
    --aspect-ratio: var(--preview-ratio);
    --ratio-percent: calc(1 / var(--aspect-ratio) * 100%);
    position: relative;
    width: 100%;
    max-width: calc(100% - calc(var(--media-border-width) * 2));
  }

  .product-media-container.constrain-height {
    --viewport-offset: 400px;
    --constrained-min-height: 300px;
    --constrained-height: max(
      var(--constrained-min-height),
      calc(100vh - var(--viewport-offset))
    );
    margin-right: auto;
    margin-left: auto;
  }

  .product-media-container.constrain-height.media-fit-contain {
    --contained-width: calc(var(--constrained-height) * var(--aspect-ratio));
    width: min(var(--contained-width), 100%);
  }

  .product-media-container .media {
    padding-top: var(--ratio-percent);
  }

  .product-media-container.constrain-height .media {
    padding-top: min(var(--constrained-height), var(--ratio-percent));
  }

  @media screen and (max-width: 749px) {
    .product-media-container.media-fit-cover {
      display: flex;
      align-self: stretch;
    }

    .product-media-container.media-fit-cover .media {
      position: initial;
    }

    .grid__item.product__media-wrapper + .grid__item.product__info-wrapper {
      padding-top: 2em;
    }
  }

  @media screen and (min-width: 750px) {
    .product-media-container {
      max-width: 100%;
    }

    .product-media-container:not(.media-type-image) {
      --aspect-ratio: var(--ratio);
    }

    .product-media-container.constrain-height {
      --viewport-offset: 170px;
      --constrained-min-height: 500px;
    }

    .product-media-container.media-fit-cover,
    .product-media-container.media-fit-cover .product__modal-opener,
    .product-media-container.media-fit-cover .media {
      height: 100%;
    }

    .product-media-container.media-fit-cover .deferred-media__poster img {
      object-fit: cover;
      width: 100%;
    }
  }

  .product-media-container .product__modal-opener {
    display: block;
    position: relative;
  }

  @media screen and (min-width: 750px) {
    .product-media-container
      .product__modal-opener:not(.product__modal-opener--image) {
      display: none;
    }
  }

  /* Zone 21 — Thumbnail gallery slider nav buttons */
  .rounded--media-thumbnail .thumbnail img,
  .rounded--media-thumbnail .thumbnail {
    border-radius: 1rem;
  }

  .thumbnail-slider .slider-button {
    width: 4.5rem;
    height: 4.5rem;
    position: absolute;
    z-index: 9;
    left: -15px;
  }

  .thumbnail-slider button.slider-button--next {
    left: auto;
    right: -15px;
  }

  .thumbnail > svg {
    position: absolute;
    top: 10px;
    left: -5px;
    opacity: 0;
  }

  /* Thumbnail nav icon: a desktop span (Carousel Icon type) + a mobile span
     (dedicated Mobile Icon type) live in each button; CSS shows the right one. */
  .thumbnail-nav-icon { display: inline-flex; }
  .thumbnail-nav-icon--mobile { display: none; }
  .thumbnail-nav-icon svg {
    width: 2.2rem;
    height: 2.2rem;
    display: block;
  }
  @media screen and (max-width: 749px) {
    .thumbnail-nav-icon--desktop { display: none; }
    .thumbnail-nav-icon--mobile { display: inline-flex; }
  }

  /* DESKTOP = the main-viewer design system (bg shape + solid/outline + large
     size). Scoped to ≥750 so the mobile strip is left bare (icon only). */
  @media screen and (min-width: 750px) {
    media-gallery[data-nav-large] .thumbnail-nav-icon--desktop svg {
      width: 3.2rem;
      height: 3.2rem;
    }

    .thumbnail-nav-button--bg-circle { border-radius: 100%; }
    .thumbnail-nav-button--bg-square { border-radius: 0; }
    .thumbnail-nav-button--bg-none { background: transparent; border: 0; }

    .thumbnail-nav-button--solid:not(.thumbnail-nav-button--bg-none) {
      background: var(--color-primary-button-background);
      color: var(--color-primary-button-text);
      border: var(--btn-border-width, 0.1rem) solid var(--color-primary-button-border);
    }
    .thumbnail-nav-button--solid:not(.thumbnail-nav-button--bg-none):hover {
      background: var(--color-primary-button-hover-background);
      color: var(--color-primary-button-hover-text);
      border-color: var(--color-primary-button-hover-border);
    }
    .thumbnail-nav-button--outline:not(.thumbnail-nav-button--bg-none) {
      background: var(--color-secondary-button-background);
      color: var(--color-secondary-button-text);
      border: var(--btn-border-width, 0.1rem) solid var(--color-secondary-button-border);
    }
    .thumbnail-nav-button--outline:not(.thumbnail-nav-button--bg-none):hover {
      background: var(--color-secondary-button-hover-background);
      color: var(--color-secondary-button-hover-text);
      border-color: var(--color-secondary-button-hover-border);
    }
  }

  .thumbnail-slider .slider-button {
    opacity: 0;
  }

  .thumbnail-slider:hover .slider-button {
    opacity: 1;
  }

  .thumbnail-slider:hover button:disabled {
    opacity: 0.5;
  }

  /* ---- MOBILE thumbnail nav: icon-only, contained inside the gutter ---- */
  @media screen and (max-width: 749px) {
    /* Icon only — strip every container decoration; glyph uses foreground. */
    media-gallery[data-mobile-style="thumbnail"] .thumbnail-nav-button {
      background: transparent;
      border: 0;
      border-radius: 0;
      box-shadow: none;
      color: var(--color-foreground);
    }

    /* Larger glyph for the mobile large_* icon types. */
    media-gallery[data-nav-large-mobile] .thumbnail-nav-icon--mobile svg {
      width: 3.2rem;
      height: 3.2rem;
    }

    /* Reveal on touch (no hover) AND contain: in-flow flex sibling flanking the
       strip, sized to the glyph — not the −15px overlay disc. */
    media-gallery[data-mobile-style="thumbnail"] .thumbnail-slider .slider-button {
      opacity: 1;
      position: static;
      flex: 0 0 auto;
      width: auto;
      height: auto;
      min-width: 0;
      padding: 0.4rem;
      inset: auto;
    }

    /* Cancel the −1.5rem edge-bleed so the whole row stays inside the gutter. */
    media-gallery[data-mobile-style="thumbnail"] .thumbnail-slider {
      margin-inline: 0;
      gap: 0.4rem;
    }

    /* Mobile Icon type = None → hide the nav entirely (swipe still works). */
    media-gallery[data-mobile-style="thumbnail"][data-mobile-nav-icon="none"] .thumbnail-slider .slider-button {
      display: none;
    }
  }

  @media only screen and (min-width: 750px) {
    .product--thumbnail .thumbnail-slider button:disabled,
    .product--stacked .thumbnail-slider button:disabled,
    .product--stacked .thumbnail-slider button {
      display: none;
    }
  }

  /* Zone 23 — Placeholder media item */
  .product__media-item-placeholder {
    width: 100%;
    display: block;
    border-radius: var(--pmg-radius, 0);
    overflow: hidden;
  }

  .product__media-item-placeholder
    .product-media-container.global-media-settings.media {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    padding-top: 0;
  }

  /* Zone 26 — Left carousel layout */
  @media screen and (min-width: 750px) {
    .product--thumbnail-columns.product--thumbnails-layout-thumbnail_slider_left {
      display: flex;
      gap: 1.5rem;
    }
    /* Rail width + main-viewer sizing are single-sourced via --pmg-rail-width and
       the [data-gallery-viewer] { flex: 1 1 auto } rule above; the old 15% / 85%
       split is removed so it can't fight the rail-width variable. */
  }

  /* Zone 27 — Main viewer navigation (base + mobile conversion) */
  .main-viewer-navigation {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 5;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
  }

  .main-viewer-navigation.hidden {
    display: none;
  }

  .main-viewer-button {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    background: rgb(
      from var(--color-button) r g b / calc(var(--alpha-button-background) * 100%)
    );
    color: var(--color-button-text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
    transition: opacity 0.3s ease;
    opacity: 0;
  }

  [data-gallery-viewer]:hover .main-viewer-button {
    opacity: 1;
  }

  .main-viewer-button:hover {
    background: rgb(
      from var(--color-button) r g b / calc(var(--alpha-button-background) * 100%)
    );
    color: var(--color-button-text);
  }

  .main-viewer-button.slider--button-square {
    border-radius: 0;
  }

  .main-viewer-button.main-viewer-button--prev {
    margin-right: auto;
  }

  .main-viewer-button.main-viewer-button--next {
    margin-left: auto;
  }

  .main-viewer-button svg {
    width: 1.5rem;
    height: 1.5rem;
  }

  .main-viewer-button--prev svg {
    transform: rotate(0);
  }

  .main-viewer-button--next svg {
    transform: rotate(0);
  }

  @media screen and (max-width: 749px) {
    .main-viewer-button {
      width: 3.5rem;
      height: 3.5rem;
    }

    .main-viewer-button svg {
      width: 1.2rem;
      height: 1.2rem;
    }
  }

  @media screen and (max-width: 749px) {
    .main-viewer-navigation {
      position: static;
      height: auto;
      pointer-events: auto;
      justify-content: center;
      flex-wrap: wrap;
      gap: 0.4rem;
      padding: 0.8rem 0.5rem;
    }

    media-gallery:not([data-mobile-style="counter"]) .main-viewer-button {
      display: none;
    }

    media-gallery[data-mobile-style="counter"] .main-viewer-navigation {
      justify-content: space-between;
      padding: 0.8rem 1rem;
    }

    media-gallery[data-mobile-style="counter"] .main-viewer-button {
      display: flex;
      opacity: 1;
    }

    media-gallery[data-mobile-style="thumbnail"] .main-viewer-navigation {
      display: none;
    }

    media-gallery[data-mobile-style="thumbnail"] .thumbnail-slider {
      margin-top: 0;
    }

    media-gallery[data-media-type="grid"][data-mobile-style="thumbnail"]
      ul.product__media-list {
      margin-bottom: 0;
    }
  }

  @media screen and (min-width: 750px) {
    media-gallery[data-media-type="carousel"][data-desktop-layout="thumbnail_slider"]
      ul.product__media-list {
      margin-bottom: 0;
    }
  }

  /* Zone 28 — Enhanced slider and visibility helpers */
  .product__media-list.slider {
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .product__media-list.slider::-webkit-scrollbar {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .product__media-list.slider {
      scroll-behavior: smooth !important;
    }
  }

  .product__media-item.hidden,
  .thumbnail-list__item.hidden {
    display: none !important;
  }

  .product__media-item,
  .thumbnail-list__item {
    transition: opacity 0.3s ease;
  }

  .product__media-list {
    min-height: 300px;
  }

  @media screen and (min-width: 750px) {
    .product__media-list {
      min-height: 500px;
    }
  }
/* END_BLOCK:_product-media-gallery */

/* START_BLOCK:_product-meta (INDEX:115) */
/* _product-meta — private PDP block. SKU / Barcode / Vendor / Type with
     per-field toggles. Keeps Sku-{section.id} + Barcode-{section.id} ids so
     product-info.js hot-swaps them on variant change. Spec: §7, §14.6. */

  /* ── section-gyanpradip-product.css zone 15 (migrated) ─────────────────── */
  .product__sku.visibility-hidden::after {
    content: "#";
  }

  /* pdp-meta-row: opts this block into the inline author|rating|sku row — see
     .product-details rules in _product-details.liquid (font-size is set there
     too, shared with .product-author/.review-stars-block). */
  .pdp-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
  }

  /* Label→value gap: the vendor field's conditional branch between the label
     and value strips the whitespace that normally separates them, so the gap
     is set explicitly here (covers all four fields for consistency). */
  .pdp-meta-row strong {
    margin-inline-end: 0.4rem;
  }

  /* Pipe separator between sku/barcode/vendor/type — :not(:first-child) tracks
     actual DOM order, so whichever field is visible first (toggles vary) never
     shows a leading pipe. */
  .pdp-meta-row > *:not(:first-child) {
    display: flex;
    align-items: center;
  }

  .pdp-meta-row > *:not(:first-child)::before {
    content: '';
    display: inline-block;
    width: 0.1rem;
    height: 1em;
    margin-inline-end: 0.6rem;
    background: rgb(from var(--color-foreground) r g b / 25%);
  }

  /* Vendor pill — same filled-badge look as _product-tags.liquid's
     .product-tags__pill--accent. */
  .product__vendor-pill {
    display: inline-flex;
    align-items: center;
    font-size: 1.3rem;
    line-height: 1;
    letter-spacing: 0.02rem;
    padding: 0.5rem 1rem;
    border-radius: var(--btn-radius, 0.4rem);
    white-space: nowrap;
    text-decoration: none;
    background: var(--vendor-fill-bg);
    color: var(--vendor-fill-text);
  }

  a.product__vendor-pill:hover {
    opacity: 0.9;
  }
/* END_BLOCK:_product-meta */

/* START_BLOCK:_product-popup (INDEX:116) */
/* _product-popup — private PDP block. One block, three modal types
     (size guide / text / contact form). Renders its opener AND its
     PopupModal-{1,2,3} dialog together (legacy split the modal out of the
     block loop). Reads product_size_guide / product_shipping_policy metafields.
     Spec: §7, §14.5. */

  /* ── section-gyanpradip-product.css zones 9+19 — popup base (migrated) ─── */

  .product-popup-modal {
    box-sizing: border-box;
    opacity: 0;
    position: fixed;
    visibility: hidden;
    z-index: -1;
    margin: 0 auto;
    top: 0;
    left: 0;
    overflow: auto;
    width: 100%;
    background: rgb(from var(--color-foreground) r g b / 2%);
    height: 100%;
  }

  .product-popup-modal[open] {
    opacity: 1;
    visibility: visible;
    z-index: 101;
  }

  .product-popup-modal__content {
    border-radius: var(--popup-corner-radius);
    background-color: var(--color-background);
    overflow: auto;
    height: 80%;
    margin: 0 auto;
    left: 50%;
    transform: translate(-50%);
    margin-top: 5rem;
    width: 92%;
    position: absolute;
    top: 0;
    padding: 1.5rem;
    border-color: rgb(from var(--color-foreground) r g b / calc(var(--popup-border-opacity) * 100%));
    border-style: solid;
    border-width: var(--popup-border-width);
    box-shadow: var(--popup-shadow-horizontal-offset)
      var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius)
      rgb(from var(--color-shadow) r g b / calc(var(--popup-shadow-opacity) * 100%));
    border-radius: 1rem;
  }

  .product-popup-modal__content.focused,
  .product-popup-modal__content:focus-visible {
    box-shadow:
      0 0 0 0.3rem var(--color-background),
      0 0 0.5rem 0.4rem rgb(from var(--color-foreground) r g b / 3%),
      var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset)
        var(--popup-shadow-blur-radius)
        rgb(from var(--color-shadow) r g b / calc(var(--popup-shadow-opacity) * 100%));
  }

  @media screen and (min-width: 750px) {
    .product-popup-modal__content {
      margin-top: 10rem;
      width: 70%;
      padding: 0 3rem;
    }
  }

  .product-popup-modal__content img {
    max-width: 100%;
  }

  @media screen and (max-width: 749px) {
    .product-popup-modal__content table {
      display: block;
      max-width: fit-content;
      overflow-x: auto;
      white-space: nowrap;
      margin: 0;
    }
  }

  .product-popup-modal__opener {
    display: inline-block;
  }

  .product-popup-modal__button {
    font-size: 1.6rem;
    padding-right: 1.3rem;
    padding-left: 0;
    min-height: 4.4rem;
    text-underline-offset: 0.3rem;
    text-decoration-thickness: 0.1rem;
    transition: text-decoration-thickness var(--duration-short) ease;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
  }

  .product-popup-modal__button:hover {
    text-decoration-thickness: 0.2rem;
  }

  .product-popup-modal__content-info:not(.modal--content-space) {
    padding-right: 4.4rem;
  }

  .product-popup-modal__content-info > * {
    height: auto;
    margin: 0 auto;
    max-width: 100%;
    width: 100%;
  }

  @media screen and (max-width: 749px) {
    .product-popup-modal__content-info > * {
      max-height: 100%;
    }
  }

  .product-popup-modal__toggle {
    background-color: var(--color-background);
    border: 0.1rem solid rgb(from var(--color-foreground) r g b / 1%);
    border-radius: 50%;
    color: rgb(from var(--color-foreground) r g b / 55%);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: sticky;
    padding: 1.2rem;
    z-index: 2;
    top: 1.5rem;
    width: 4rem;
    margin: 0 0 0 auto;
  }

  .product-popup-modal__toggle:hover {
    color: rgb(from var(--color-foreground) r g b / 75%);
  }

  .product-popup-modal__toggle .icon {
    height: auto;
    margin: 0;
    width: 2.2rem;
  }

  button.product-popup-modal__button.link {
    font-size: 1.8rem;
    padding-right: 15px;
  }

  button.product-popup-modal__button.link > svg {
    width: 2rem;
    margin-right: 1rem;
  }

  @media screen and (min-width: 992px) {
    .product-popup-modal__content.modal-sm {
      max-width: 550px;
      width: 500px;
      height: auto;
      padding-block-start: 3rem;
      padding-block-end: 3rem;
      border: none;
    }

    .modal__title.modal--header-title {
      font-size: 1.8rem;
    }
  }

  .modal__title.modal--header-title {
    padding-right: 1rem;
    margin: 0;
  }

  .product-popup-modal.is--centered-modal {
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: grid;
    place-items: center;
  }

  .modal-body--inner {
    background-color: var(--color-background);
    width: 90%;
    max-width: 50rem;
    padding: 2rem;
    border-radius: 1rem;
  }

  .modal-header {
    display: flex;
    justify-content: space-between;
    border-bottom: 0.1rem solid rgb(from var(--color-foreground) r g b / 8%);
    align-items: center;
    padding-bottom: 2rem;
  }

  .ask_about_product textarea {
    width: 100%;
    border: 0.1rem solid rgb(from var(--color-foreground) r g b / 8%);
    padding: 10px;
    line-height: 25px;
    font-size: 15px;
    border-radius: var(--btn-radius);
  }

  .product-popup-modal__content:is(.popup--modal-with-header) {
    padding-block: 3rem;
  }

  /* ── Product popup modal — centering ─────────────────────── */

  modal-dialog.product-popup-modal {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    box-sizing: border-box;
  }

  .product-popup-modal .product-popup-modal__content {
    position: relative;
    left: auto;
    margin: 0;
    width: 92%;
    height: auto;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
  }

  @media screen and (min-width: 750px) {
    .product-popup-modal .product-popup-modal__content {
      width: 70%;
    }
  }

  /* ── Animation & overlay ──────────────────────────────────── */

  modal-dialog.product-popup-modal {
    background: transparent;
    transition:
      background-color 0.28s ease,
      opacity          0.28s ease,
      visibility       0.28s ease;
  }

  modal-dialog.product-popup-modal[open] {
    background: rgba(0, 0, 0, 0.6);
  }

  modal-dialog.product-popup-modal.is-closing {
    background: transparent;
    opacity: 0;
  }

  .product-popup-modal .product-popup-modal__content {
    opacity: 0;
    transform: scale(0.92);
    transition:
      transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
      opacity   0.22s ease;
  }

  .product-popup-modal[open] .product-popup-modal__content {
    opacity: 1;
    transform: scale(1);
  }

  .product-popup-modal.is-closing .product-popup-modal__content {
    opacity: 0;
    transform: scale(0.92);
    transition:
      transform 0.25s ease-in,
      opacity   0.25s ease-in;
  }

  .product-popup-modal__toggle svg {
    width: 2rem;
    height: 2rem;
    fill: currentColor;
  }

  @media (prefers-reduced-motion: reduce) {
    .product-popup-modal,
    .product-popup-modal__content {
      transition: none !important;
    }
  }
/* END_BLOCK:_product-popup */

/* START_BLOCK:_product-quantity (INDEX:117) */
.product-quantity-block {
    width: var(--qty-w, fit-content);
  }

  @media screen and (max-width: 749px) {
    .product-quantity-block {
      width: var(--qty-w-mob, var(--qty-w, fit-content));
    }
  }
/* END_BLOCK:_product-quantity */

/* START_BLOCK:_product-recommendations (INDEX:118) */
/* ============================================================
   WRAPPER — padding vars + states
   ============================================================ */
.product-rec-wrapper {
  padding-top:    var(--product-rec-padding-top, 0);
  padding-bottom: var(--product-rec-padding-bottom, 0);
  padding-left:   var(--product-rec-padding-left, 0);
  padding-right:  var(--product-rec-padding-right, 0);
}
@media screen and (max-width: 749px) {
  .product-rec-wrapper {
    padding-top:    calc(var(--product-rec-padding-top, 0px)    * var(--product-rec-mobile-scale, 0.8));
    padding-bottom: calc(var(--product-rec-padding-bottom, 0px) * var(--product-rec-mobile-scale, 0.8));
    padding-left:   calc(var(--product-rec-padding-left, 0px)   * var(--product-rec-mobile-scale, 0.8));
    padding-right:  calc(var(--product-rec-padding-right, 0px)  * var(--product-rec-mobile-scale, 0.8));
  }
}
.product-rec-wrapper.is-empty {
  display: none !important;
}

/* ============================================================
   PRODUCT GRID ITEM — base card chrome
   ============================================================ */
.product-grid-item {
  text-align: center;
}
.product-grid-item__thumbnail {
  position: relative;
  overflow: hidden;
  padding: 1px;
}
.product-grid-item__badges {
  position: absolute;
  top: 15px;
  left: 15px;
  display: flex;
  justify-content: flex-start;
  z-index: 8;
  pointer-events: none;
}
@media only screen and (max-width: 575px) {
  .product-grid-item__badges {
    top: 10px;
    left: 10px;
  }
}
.product-grid-item__image {
  display: flex;
}
.product-grid-item__image img {
  width: 100%;
  height: auto;
}
.product-grid-item__actions {
  position: absolute;
  bottom: 15px;
  left: 0;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: transparent;
}
.product-grid-item__actions__btn {
  padding: 1rem 2rem;
  text-decoration: none;
  text-transform: var(--btn-transform);
  color: rgba(var(--product-color-button-text));
  border: none;
  border-radius: 3rem;
  background-color: rgba(var(--product-color-button));
  box-shadow: 0 0 1.5rem rgba(var(--product-color-button-text), 0.05);
  display: flex;
  align-items: center;
  position: relative;
}
.product-grid-item__actions__btn svg {
  width: 20px;
  height: 20px;
}
.product-grid-item__content {
  padding-top: 20px;
}
h3.product-grid-item__title {
  word-break: break-word;
}
.product-grid-item__title a {
  text-decoration: none;
  color: var(--color-foreground);
}
.product-grid-item__title a:hover {
  color: var(--color-base-text-link-hover);
}
.product-grid-item__price {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  color: var(--color-foreground);
}
.product-grid-item__price .price__compare {
  text-decoration: line-through;
}
@media only screen and (max-width: 575px) {
  .product-grid-item__title {
    font-size: 1.6rem;
    margin-bottom: 1rem;
  }
  .product-grid-item__price {
    font-size: 1.8rem;
  }
}
@media screen and (min-width: 990px) {
  .product-grid-item__thumbnail:hover
    .media.media--hover-effect > img ~ img.secondary__img,
  .product-grid-item__thumbnail:hover
    .media.media--hover-effect > img.secondary__img + img.secondary__img--new {
    opacity: 1;
    transition: transform var(--duration-long) ease;
  }
  .product-grid-item__thumbnail:hover
    .media.media--hover-effect > img:first-child:not(:only-child) {
    opacity: 0;
  }
  .product-grid-item__thumbnail.second--image__hide:hover
    .media.media--hover-effect > img:first-child:not(:only-child) {
    opacity: 1;
  }
}
button.product-grid-item__actions__btn.loading {
  background: #fff;
  color: transparent;
}
button.cart--icon-button {
  color: var(--color-foreground);
  border: none;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 100%;
  position: relative;
  padding: 0;
  background: var(--color-background);
  display: flex;
  justify-content: center;
  align-items: center;
}
.cart--icon-button svg {
  width: 1.6rem;
}
.product-grid-item:hover .product-grid-item__title a {
  text-decoration: underline;
}
@media only screen and (min-width: 750px) {
  .product-grid-item__actions.justify-content-end {
    left: auto;
    right: 15px;
  }
  .product-grid-item__actions.justify-content-start {
    left: 15px;
    right: auto;
  }
  button.cart--icon-button {
    width: 4rem;
    height: 4rem;
  }
  .cart--icon-button svg {
    width: 1.8rem;
  }
}
@media only screen and (max-width: 749px) {
  .product-grid-item__actions__btn {
    padding: 0;
    font-size: 1.3rem;
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
  }
  .product-grid-item__actions {
    left: auto;
    right: 15px;
  }
  span.action__btn--text--label {
    display: none;
  }
}
.media.rounded--image {
  border-radius: 2.5rem;
}

/* ============================================================
   COMPLEMENTARY PRODUCT CARD — compact horizontal layout
   ============================================================ */
.complementary--product-card {
  display: grid;
  grid-template-columns: 8rem auto;
  gap: 1.5rem;
}
.complementary--product-card-content {
  text-align: left;
  display: grid;
  grid-template-columns: auto auto;
  gap: 1.5rem;
  padding-inline-end: 0.2rem;
}
.product__vendor {
  line-height: 1;
  margin-bottom: 0.3rem;
}
.complementary--product-card-content .price {
  font-size: 1.4rem;
}
.complementary--product__cart--btn {
  text-align: right;
  align-self: center;
}
.complementary__product--cart-btn {
  background: transparent;
  font-size: 1.3rem;
  border: 0.1rem solid rgb(from var(--color-foreground) r g b / 20%);
  padding: 0.6rem 1.2rem;
  color: var(--color-foreground);
  line-height: revert;
  border-radius: var(--btn-radius);
  position: relative;
}
.complementary__product--cart-btn:hover {
  box-shadow: 0 0 0 0.1rem var(--color-foreground);
}
.complementary__product--cart-btn-inner {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.complementary__product--cart-btn-inner > svg {
  width: 1rem;
  display: inline-block;
}
.complementary--product-content-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
@media only screen and (min-width: 750px) and (max-width: 1199px),
  (max-width: 599px) {
  .complementary--product-card-content {
    grid-template-columns: auto;
  }
  .complementary--product__cart--btn {
    text-align: left;
  }
}

/* ============================================================
   HEADING ROW — flex: heading left, beside-heading nav right
   ============================================================ */
.product-rec__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
}
.product-rec__nav-head {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-shrink: 0;
}
@media screen and (max-width: 749px) {
  .product-rec__nav-head {
    display: none;
  }
}

/* ============================================================
   HEADING / ACCORDION CHROME
   ============================================================ */
.product-rec-wrapper .summary__title {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.product-rec-wrapper details {
  padding-top: 2rem;
  padding-bottom: 1rem;
}
.product-rec-wrapper details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
}
.product-rec-wrapper details > summary::-webkit-details-marker {
  display: none;
}
/* beside-heading nav inside the collapsible summary: group nav + caret on the right,
   always visible on desktop, never absolute. */
.product-rec-wrapper details > summary .product-rec__summary-end {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.product-rec__nav-head--in-summary {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* ============================================================
   SWIPER NAV SKIN — scoped under .product-rec-wrapper
   Neutralises Swiper bundle defaults, follows SLIDER_DEVELOPMENT_BLUEPRINT §3.3.1
   ============================================================ */
.product-rec-wrapper .swiper-nav {
  /* Reset Swiper's bundled `.swiper-button-prev/next` defaults so beside-heading
     buttons stay in normal flow (right of the heading, always visible). Swiper
     also sets `left/right: 10px` on prev/next — as relative offsets those shove
     the buttons toward each other and overlap them, so clear the insets too.
     Overlay nav edge-positions via the flex container (justify-content:
     space-between), not the buttons' own position. */
  position: relative;
  inset: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  height: 4.4rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s;
  border: 0;
  background: transparent;
  color: var(--color-foreground);
  box-sizing: border-box;
  flex: 0 0 auto;
  align-self: center;
  margin: 0;
  aspect-ratio: 1;
}
.product-rec-wrapper .swiper-nav svg {
  width: 1.8rem;
  height: 1.8rem;
}
.product-rec-wrapper .swiper-nav--bg-none {
  width: auto;
  height: auto;
  padding: 0.4rem;
  aspect-ratio: auto;
  max-width: none;
  max-height: none;
}
.product-rec-wrapper .swiper-nav--bg-circle { border-radius: 100%; }
.product-rec-wrapper .swiper-nav--bg-square { border-radius: 0; }
.product-rec-wrapper .swiper-nav--bg-custom { border-radius: var(--product-rec-nav-radius, 0); }
.product-rec-wrapper .swiper-nav--solid:not(.swiper-nav--bg-none) {
  background: var(--color-foreground);
  color: var(--color-background);
}
.product-rec-wrapper .swiper-nav--solid:not(.swiper-nav--bg-none):hover {
  background: rgb(from var(--color-foreground) r g b / 85%);
}
.product-rec-wrapper .swiper-nav--outline:not(.swiper-nav--bg-none) {
  background: transparent;
  color: var(--color-foreground);
  border: 0.1rem solid var(--color-foreground);
}
.product-rec-wrapper .swiper-nav--outline:not(.swiper-nav--bg-none):hover {
  background: var(--color-foreground);
  color: var(--color-background);
}
.product-rec-wrapper .swiper-nav[disabled],
.product-rec-wrapper .swiper-nav.swiper-button-disabled {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}
.product-rec-wrapper .swiper-nav.swiper-button-prev::after,
.product-rec-wrapper .swiper-nav.swiper-button-next::after {
  display: none;
}
.product-rec-wrapper .swiper-nav:focus-visible:not(.swiper-button-disabled) {
  outline: none;
  box-shadow: 0 0 0 0.2rem var(--color-background), 0 0 0 0.4rem var(--color-foreground);
}

/* ============================================================
   GRID LAYOUT
   ============================================================ */
.product-rec__grid {
  display: grid;
  grid-template-columns: repeat(var(--cols-mobile, 2), 1fr);
  gap: var(--rec-gap, 2rem);
  margin-top: 2.5rem;
}
@media screen and (min-width: 750px) {
  .product-rec__grid {
    grid-template-columns: repeat(var(--cols-desktop, 4), 1fr);
  }
}

/* ============================================================
   SLIDER LAYOUT
   ============================================================ */
.product-rec__slider {
  display: block;
  margin-top: 2.5rem;
}
.product-rec__swiper-pane {
  position: relative;
  overflow: hidden;
}
@supports (overflow: clip) {
  .product-rec__swiper-pane { overflow: clip; }
}
.product-rec__swiper-pane .swiper {
  width: 100%;
}

/* ============================================================
   OVERLAY NAV — left/right edges of swiper pane, hover-revealed
   ============================================================ */
.product-rec__nav--overlay {
  position: absolute;
  inset-block: 0;
  inset-inline: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 0.8rem;
  pointer-events: none;
  z-index: 4;
  box-sizing: border-box;
}
.product-rec__nav--overlay .swiper-nav {
  pointer-events: auto;
}
@media (hover: hover) and (pointer: fine) {
  /* hidden by default */
  .product-rec__nav--overlay .swiper-nav {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease, background 0.2s, color 0.2s;
  }
  /* reveal ENABLED buttons on carousel hover/focus */
  .product-rec__swiper-pane:hover .product-rec__nav--overlay .swiper-nav:not(.swiper-button-disabled),
  .product-rec__swiper-pane:focus-within .product-rec__nav--overlay .swiper-nav:not(.swiper-button-disabled) {
    opacity: 1;
    visibility: visible;
  }
  /* disabled (end of track) — visible but dimmed, never full opacity */
  .product-rec__swiper-pane:hover .product-rec__nav--overlay .swiper-nav.swiper-button-disabled,
  .product-rec__swiper-pane:focus-within .product-rec__nav--overlay .swiper-nav.swiper-button-disabled {
    opacity: 0.5;
    visibility: visible;
  }
}
/* "Beside heading" placement: the overlay is a MOBILE-ONLY mirror of the beside-heading
   buttons. On desktop the real .product-rec__nav-head buttons own the view, so hide the
   mirror. On mobile the @media(hover) gate above never applies, so it stays visible (the
   "On cards" behavior on touch). */
@media screen and (min-width: 750px) {
  .product-rec__nav--overlay-mobile { display: none; }
}

/* ============================================================
   PAGINATION PILL — testimonial style (solid bg, shadow, constrained)
   ============================================================ */
.product-rec__pagination-row {
  width: 100%;
  display: flex;
  margin-block-start: 2rem;
  box-sizing: border-box;
}
.product-rec__pagination-row--bottom-left   { justify-content: flex-start; }
.product-rec__pagination-row--bottom-center { justify-content: center; }
.product-rec__pagination-row--bottom-right  { justify-content: flex-end; }
.product-rec__pagination.swiper-pagination {
  position: relative;
  inset: auto;
  left: auto;
  right: auto;
  bottom: auto;
  top: auto;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem;
  box-sizing: border-box;
  background: var(--color-background);
  border-radius: 0.8rem;
  padding: 1rem 2rem;
  box-shadow: 0 1px 4px rgb(0 0 0 / 8%);
}
.product-rec__pagination .swiper-pagination-bullet {
  cursor: pointer;
  margin: 0;
  opacity: 1;
  background: rgb(from var(--color-foreground) r g b / 25%);
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 100%;
  border: 0;
  flex-shrink: 0;
  transition: background 0.2s;
}
.product-rec__pagination .swiper-pagination-bullet-active {
  background: var(--color-foreground);
}
.product-rec__pagination .swiper-pagination-bullet--number {
  box-sizing: border-box;
  width: auto;
  height: auto;
  min-width: 2.4rem;
  min-height: 2.4rem;
  margin: 0;
  padding: 0 0.6rem;
  background: transparent;
  border-radius: 100%;
  color: rgb(from var(--color-foreground) r g b / 50%);
  font-size: 1.2rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: color 0.2s;
}
.product-rec__pagination .swiper-pagination-bullet--number.swiper-pagination-bullet-active {
  color: var(--color-foreground);
  background: transparent;
}
.product-rec__pagination .swiper-pagination-bullet--number:not(:last-child)::after {
  content: '';
  display: block;
  width: 2rem;
  height: 1px;
  background: rgb(from var(--color-foreground) r g b / 20%);
  margin-inline-start: 1.2rem;
  flex-shrink: 0;
}
.product-rec__pagination .swiper-pagination-fraction {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
  color: rgb(from var(--color-foreground) r g b / 75%);
  font-size: 1.2rem;
}

/* ============================================================
   SKELETON LOADING PLACEHOLDERS
   ============================================================ */
.product-rec__skeleton {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
/* Slider loading state — single-row track that mirrors slides-per-view.
   Flex-basis derived from the slides count (fractional values like 1.2 work),
   overflow clipped so trailing skeletons peek like real slides. */
.product-rec__skeleton-track {
  display: flex;
  gap: var(--rec-gap, 2rem);
  margin-top: 2.5rem;
  overflow: hidden;
}
@supports (overflow: clip) {
  .product-rec__skeleton-track { overflow: clip; }
}
.product-rec__skeleton-track .product-rec__skeleton {
  flex: 0 0 calc((100% - (var(--skel-cols-mobile, 1.2) - 1) * var(--rec-gap, 2rem)) / var(--skel-cols-mobile, 1.2));
  min-width: 0;
}
@media screen and (min-width: 750px) {
  .product-rec__skeleton-track .product-rec__skeleton {
    flex: 0 0 calc((100% - (var(--skel-cols-desktop, 4) - 1) * var(--rec-gap, 2rem)) / var(--skel-cols-desktop, 4));
  }
}
.product-rec__skeleton-media {
  aspect-ratio: 1;
  background: rgb(from var(--color-foreground) r g b / 8%);
  border-radius: 0.4rem;
  animation: product-rec-pulse 1.5s ease-in-out infinite;
}
.product-rec__skeleton-title {
  height: 1.4rem;
  background: rgb(from var(--color-foreground) r g b / 6%);
  border-radius: 0.2rem;
  animation: product-rec-pulse 1.5s ease-in-out infinite 0.2s;
}
.product-rec__skeleton-price {
  height: 1.2rem;
  width: 50%;
  background: rgb(from var(--color-foreground) r g b / 5%);
  border-radius: 0.2rem;
  animation: product-rec-pulse 1.5s ease-in-out infinite 0.4s;
}
/* List skeleton — small media left, content right (mirrors .product-grid-item--list).
   Reuses the media/title/price pulse styles above; only the layout differs. */
.product-rec__skeleton--list {
  display: grid;
  grid-template-columns: var(--rec-list-media, 10rem) 1fr;
  align-items: center;
  gap: 1.5rem;
}
.product-rec__skeleton-media--list {
  aspect-ratio: 1;
  width: 100%;
}
.product-rec__skeleton-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@keyframes product-rec-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* ============================================================
   STANDARD CARD — color-scheme surface, left-aligned content,
   absolute bottom-right cart button. Scoped to .product-grid-item--standard.
   ============================================================ */
.product-grid-item--standard {
  display: block;              /* <gyanpradip-product-card> is a custom element (inline by default);
                                  without this the card surface / scheme background never paints */
  position: relative;          /* positioning context for the full-card overlay link */
  text-align: left;
  background: var(--color-background);
  color: var(--color-foreground);
  border-radius: var(--rec-card-radius, 1.2rem);
  /* Shared card padding (default 0) frames the whole card — media + content pull in from
     the edges together. Driven by the "Card padding" settings; the SAME vars drive the List
     card below, so one settings group controls both styles. */
  padding:
    var(--rec-card-pad-top, 0)
    var(--rec-card-pad-right, 0)
    var(--rec-card-pad-bottom, 0)
    var(--rec-card-pad-left, 0);
  overflow: hidden;            /* clips media to the rounded top corners */
}
/* Mobile: scale all four card paddings by a single percentage (mirrors --product-rec-mobile-scale).
   Shared by both card styles. */
@media screen and (max-width: 749px) {
  .product-grid-item--standard,
  .product-grid-item--list {
    padding:
      calc(var(--rec-card-pad-top, 0)    * var(--rec-card-pad-scale, 1))
      calc(var(--rec-card-pad-right, 0)  * var(--rec-card-pad-scale, 1))
      calc(var(--rec-card-pad-bottom, 0) * var(--rec-card-pad-scale, 1))
      calc(var(--rec-card-pad-left, 0)   * var(--rec-card-pad-scale, 1));
  }
}

/* Full-card PDP overlay link (.product-card__link) — mirrors assets/gyanpradip-product-card.css.
   Covers the card for mouse, single tab stop for keyboard. Real content (media link, title
   link, quick-add) sits above at z-index 2 so it stays independently clickable. */
.product-grid-item--standard .product-card__link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--rec-card-radius, 1.2rem);
}
.product-grid-item--standard .product-card__link:focus,
.product-grid-item--standard .product-card__link:focus-visible {
  outline: none;
}
.product-grid-item--standard .product-grid-item__thumbnail,
.product-grid-item--standard .product-grid-item__content {
  position: relative;
  z-index: 2;
}

/* Full-card ring when focus entered via Tab (data-card-tab-focus from gyanpradip-product-card.js).
   Drawn as an INSET ring on a top pseudo-element rather than an outset box-shadow on the host:
   the card has overflow:hidden and, in the slider, the swiper pane clips anything that extends
   past a slide edge — an outset ring would be cut off. The pseudo stays inside the card box
   (never clipped), sits above the media/content (z-index), and is pointer-transparent. */
.product-grid-item--standard[data-card-tab-focus]:focus-within::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 10;
  border-radius: var(--rec-card-radius, 1.2rem);
  box-shadow: inset 0 0 0 0.2rem var(--color-background), inset 0 0 0 0.4rem var(--color-foreground);
  pointer-events: none;
}

/* media flush to card edges; thumbnail is the positioning context for badge + cart */
.product-grid-item--standard .product-grid-item__thumbnail {
  padding: 0;
}

/* content: only a top gap from the media; horizontal + bottom inset come from the card padding,
   so the image and text pull in together and stay aligned (overrides the .text-center utility). */
.product-grid-item--standard .product-grid-item__content {
  padding: 1.5rem 0 0 0;
  text-align: left;
}

/* vendor / category eyebrow */
.product-grid-item--standard .product__vendor {
  font-size: 1.3rem;
  line-height: 1.2;
  margin-bottom: 0.6rem;
  color: rgb(from var(--color-foreground) r g b / 50%);
}

/* title + price, left aligned (price snippet adds justify-content-center) */
.product-grid-item--standard .product-grid-item__title {
  text-align: left;
  margin-bottom: 0.6rem;
}
.product-grid-item--standard .product-grid-item__title a {
  color: var(--color-foreground);
}
.product-grid-item--standard .product-grid-item__price {
  justify-content: flex-start;
  color: var(--color-foreground);
}

/* SALE badge pill, top-left of media (color from theme sale_badge_color_scheme) */
.product-grid-item--standard .product-grid-item__badges .badge {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
}

/* cart button: absolute, bottom-right of the MEDIA */
.product-grid-item--standard .product-grid-item__actions {
  position: absolute;
  bottom: 1.5rem;
  left: auto;
  right: 1.5rem;
  width: auto;
  justify-content: flex-end;
  z-index: 6;
}
/* Quick Shop button color — driven by the four "Quick shop button" settings via
   wrapper-level vars. Each var falls back to the card color scheme when unset, so an
   un-configured button looks exactly as before. Shared by Standard + List cards. */
:is(.product-grid-item--standard, .product-grid-item--list) .cart--icon-button {
  background: var(--rec-qa-btn-bg, var(--color-background));
  color: var(--rec-qa-btn-text, var(--color-foreground));
  box-shadow: 0 0.2rem 0.8rem rgb(0 0 0 / 12%);
}
/* hover / keyboard focus — hover vars fall back to the rest vars, which fall back to
   the scheme, so configuring only one color still yields a sensible result. */
:is(.product-grid-item--standard, .product-grid-item--list) .cart--icon-button:hover,
:is(.product-grid-item--standard, .product-grid-item--list) .cart--icon-button:focus-visible {
  background: var(--rec-qa-btn-bg-hover, var(--rec-qa-btn-bg, var(--color-background)));
  color: var(--rec-qa-btn-text-hover, var(--rec-qa-btn-text, var(--color-foreground)));
}

/* visibility: hover-only on desktop. Always-visible = no extra rule.
   Touch devices can't hover, so the button stays visible regardless. */
@media (hover: hover) and (pointer: fine) {
  .product-grid-item--standard.quick-add--hover .product-grid-item__actions {
    opacity: 0;
    transform: translateY(0.6rem);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
  }
  .product-grid-item--standard.quick-add--hover:hover .product-grid-item__actions,
  .product-grid-item--standard.quick-add--hover:focus-within .product-grid-item__actions {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

/* Quick-add / Add-to-cart preloader on the Standard + List card circular button.
   Mirrors blocks/_product-card-buy.liquid: gyanpradip-product-card.js toggles .loading. */
:is(.product-grid-item--standard, .product-grid-item--list) .product-rec__qa-btn.loading {
  position: relative;
  pointer-events: none;
  color: transparent !important;
}
:is(.product-grid-item--standard, .product-grid-item--list) .product-rec__qa-btn.loading svg,
:is(.product-grid-item--standard, .product-grid-item--list) .product-rec__qa-btn.loading .svg-wrapper {
  visibility: hidden;
}
:is(.product-grid-item--standard, .product-grid-item--list) .product-rec__qa-btn.loading::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.6rem;
  height: 1.6rem;
  /* border-box so the 0.2rem ring is INCLUDED in the 1.6rem box — the -0.8rem
     margins (half the box) then center it exactly. With content-box the border
     added 0.2rem per side, pushing the spinner down-right of center. */
  box-sizing: border-box;
  margin: -0.8rem 0 0 -0.8rem;
  border: 0.2rem solid rgb(from var(--rec-qa-btn-text, var(--color-foreground)) r g b / 35%);
  border-left-color: transparent;
  border-radius: 100%;
  animation: loading var(--duration-long) infinite linear;
}

/* ============================================================
   LIST CARD — color-scheme surface, horizontal row (media left,
   content right), always-visible static cart button bottom-right
   of the media. Scoped to .product-grid-item--list.
   ============================================================ */
.product-grid-item--list {
  position: relative;          /* positioning context for the full-card overlay link */
  display: grid;
  grid-template-columns: var(--rec-list-media, 10rem) 1fr auto;  /* media · content · Quick Shop */
  align-items: center;
  gap: 1.5rem;
  text-align: left;
  background: var(--color-background);
  color: var(--color-foreground);
  border-radius: var(--rec-card-radius, 1.2rem);
  /* Shared card padding (default 0). The grid `gap` handles the media/content/button
     spacing, so the card padding only frames the outer edge. Same vars as the Standard
     card — driven by the single "Card padding" settings group. Mobile scaling is handled
     by the shared @media rule in the Standard-card section above. */
  padding:
    var(--rec-card-pad-top, 0)
    var(--rec-card-pad-right, 0)
    var(--rec-card-pad-bottom, 0)
    var(--rec-card-pad-left, 0);
  overflow: hidden;            /* clips media to the rounded corners */
}

/* Full-card PDP overlay link — covers the card for mouse, single tab stop for
   keyboard. Real content (media link, title link, cart button) sits above at
   z-index 2 so it stays independently clickable. Mirrors the Standard card. */
.product-grid-item--list .product-card__link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--rec-card-radius, 1.2rem);
}
.product-grid-item--list .product-card__link:focus,
.product-grid-item--list .product-card__link:focus-visible {
  outline: none;
}
.product-grid-item--list .product-grid-item__thumbnail,
.product-grid-item--list .complementary--product-card-content,
.product-grid-item--list .product-grid-item__actions-col {
  position: relative;
  z-index: 2;
}

/* Full-card ring when focus entered via Tab (data-card-tab-focus from gyanpradip-product-card.js). */
.product-grid-item--list[data-card-tab-focus]:focus-within {
  box-shadow: 0 0 0 0.2rem var(--color-background), 0 0 0 0.4rem var(--color-foreground);
  border-radius: var(--rec-card-radius, 1.2rem);
}

/* media column — flush, full height, positioning context for badge + cart button */
.product-grid-item--list .product-grid-item__thumbnail {
  padding: 0;
  height: 100%;
}

/* content column — left aligned. Outer spacing comes from the card padding + grid gap. */
.product-grid-item--list .complementary--product-card-content {
  display: block;
  padding: 0;
  text-align: left;
}
.product-grid-item--list .product__vendor {
  font-size: 1.3rem;
  line-height: 1.2;
  margin-bottom: 0.6rem;
  color: rgb(from var(--color-foreground) r g b / 50%);
}
/* title: wraps up to two lines, left aligned (caps at 2 with ellipsis beyond) */
.product-grid-item--list .product-grid-item__title {
  text-align: left;
  margin-bottom: 0.6rem;
}
.product-grid-item--list .product-grid-item__title a {
  color: var(--color-foreground);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  white-space: normal;
  word-break: break-word;
}
.product-grid-item--list .product-grid-item__price {
  justify-content: flex-start;
  color: var(--color-foreground);
}
.product-grid-item--list .product-grid-item__badges .badge {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
}

/* Quick Shop: ALWAYS visible, STATIC, in its own column on the RIGHT of the card,
   beside the content — never over the media. No hover gate. */
.product-grid-item--list .product-grid-item__actions-col {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.product-grid-item--list .product-grid-item__actions {
  position: static;          /* override the global absolute .product-grid-item__actions */
  inset: auto;
  width: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* List-card Quick Shop button color is handled by the shared
   :is(.product-grid-item--standard, .product-grid-item--list) rule above. */
/* END_BLOCK:_product-recommendations */

/* START_BLOCK:_product-reviews (INDEX:119) */
/* _product-reviews — private PDP block. Full review widget (SPR app metafield
     or custom-liquid) in a collapsible accordion. Distinct from _review-stars
     (the inline summary). Spec: §7, §14.4. */
/* END_BLOCK:_product-reviews */

/* START_BLOCK:_product-separator (INDEX:120) */
/* _product-separator — private PDP child. A horizontal rule placed between
     product detail blocks. Margin = outer gap (adds to the flex column --pd-gap);
     padding = inner box space; the visible line lives on .__line so width/align
     can shrink it without affecting the box. Independent color picker, scheme
     fallback to --color-border. Spec: blueprint/product-details-module/
     SEPARATOR_DIVIDER_BLOCK_PLAN.md */

  .product-separator {
    display: flex;
    justify-content: var(--sep-justify, center);
    padding-block-start: var(--sep-pad-block-start, 0);
    padding-block-end: var(--sep-pad-block-end, 0);
  }

  .product-separator__line {
    width: var(--sep-width, 100%);
    height: 0;
    margin: 0;
    border: 0;
    border-block-start-width: var(--sep-thickness, 1px);
    border-block-start-style: var(--sep-style, solid);
    border-block-start-color: rgb(from var(--sep-color, var(--color-border)) r g b / var(--sep-opacity, 1));
  }

  /* no-media centering parity with _product-details / _trust-badge */
  .product--no-media .product-separator {
    justify-content: center;
  }

  @media screen and (max-width: 749px) {
    .product-separator {
      padding-block-start: calc(var(--sep-pad-block-start, 0) * var(--sep-mobile-scale, 1));
      padding-block-end: calc(var(--sep-pad-block-end, 0) * var(--sep-mobile-scale, 1));
    }
  }
/* END_BLOCK:_product-separator */

/* START_BLOCK:_product-specification (INDEX:122) */
/* _product-specification — private PDP block. Collapsible "Specifications"
     table (ISBN / Publisher / Language / Pages / Binding / Publish year /
     Category / Product type by default) sourced from configurable product
     metafields. Publisher text (from either the metafield or, if
     use_vendor_as_publisher is on, product.vendor) is always run through
     snippets/gyanpradip-vendor-links.liquid, which splits on "&"/"," and
     links EACH name separately to Shopify's built-in
     /collections/vendors?q=<name> lookup — so a combined value like
     "Jowel Writer & mohin" renders as two independently working links, not
     one broken combined-query link. Mirrors the _product-tab accordion
     chrome; row layout mirrors _product-meta. */

  .product-specification__table {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
  }

  .product-specification__row {
    display: flex;
    justify-content: space-between;
    gap: 1.6rem;
    padding-block: 0.6rem;
    border-bottom: 0.1rem solid rgb(from var(--color-foreground) r g b / 8%);
  }

  .product-specification__row:last-child {
    border-bottom: 0;
  }

  .product-specification__label {
    color: rgb(from var(--color-foreground) r g b / 70%);
  }

  .product-specification__value {
    text-align: right;
    font-weight: 600;
  }

  .product-specification__value a {
    color: inherit;
    text-decoration: none;
  }

  .product-specification__value a:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
    text-underline-offset: 0.2rem;
  }
/* END_BLOCK:_product-specification */

/* START_BLOCK:_product-tab (INDEX:123) */
/* _product-tab — private PDP block. Collapsible content tab. Source = custom
     (richtext/page) or the product_unique_content metafield. Replaces the legacy
     collapsible_tab + unique_tab blocks. Spec: §7. */
/* END_BLOCK:_product-tab */

/* START_BLOCK:_product-tags (INDEX:124) */
/* _product-tags — private PDP block. Category/tag pill badges shown above the
     product title. First tag renders filled (accent), the rest outlined. */

  .product-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem;
  }

  .product-tags__pill {
    display: inline-flex;
    align-items: center;
    font-size: 1.3rem;
    line-height: 1;
    letter-spacing: 0.02rem;
    font-width: 500;
    padding: 0.5rem 1rem;
    border-radius: var(--btn-radius, 0.4rem);
    white-space: nowrap;
    text-decoration: none;
  }

  .product-tags__pill--accent {
    background: var(--tag-fill-bg, rgb(from var(--color-button) r g b / calc(var(--alpha-button-background) * 100%)));
    color: var(--tag-fill-text, var(--color-button-text));
  }

  .product-tags__pill--outline {
    background: transparent;
    color: var(--color-foreground);
    border: 0.1rem solid rgb(from var(--color-foreground) r g b / 20%);
  }

  .product--no-media .product-tags {
    justify-content: center;
  }
/* END_BLOCK:_product-tags */

/* START_BLOCK:_product-timer (INDEX:125) */
/* _product-timer — private PDP block. Sale countdown driven by the
     product_countdown metafield. <countdown-timer> custom element preserved.
     Spec: §7. */

  /* ── section-gyanpradip-product.css zone 25 (migrated) ─────────────────── */
  .product__countdown {
    display: flex;
    background-color: transparent;
  }

  .product__details_countdown .product__countdown > div + div {
    margin-left: 10px;
  }

  .product__countdown > * span {
    line-height: 1.8rem;
  }

  .product__details_countdown .product__countdown .countdown__inner {
    display: flex;
    flex-direction: column;
  }

  .product__details_countdown .product__countdown .countdown-item {
    position: relative;
  }

  .product__details_countdown span.countdown__labels {
    font-size: 1.6rem;
  }

  .product__details_countdown .product__countdown > * {
    text-align: center;
    background: var(--countdown-background);
    color: var(--countdown-foreground);
    border-radius: 3px;
    padding: 1rem 1.5rem;
    font-size: 1.8rem;
  }

  span.countdown__label {
    margin-bottom: 1.2rem;
    display: flex;
    align-items: center;
  }

  .timer__icon {
    width: 2.2rem;
    margin-right: 0.8rem;
  }

  .stock_countdown_progress {
    width: 100%;
    background: var(--progress-bar-background);
    height: 6px;
    border-radius: 3px;
  }

  span.stock_progress_bar {
    display: block;
    background: var(--progress-bar-foreground);
    background-attachment: fixed;
    height: 100%;
    transition: width 2.5s ease;
    border-radius: 3px 0 0 3px;
  }
/* END_BLOCK:_product-timer */

/* START_BLOCK:_product-title (INDEX:126) */
/* _product-title — private PDP block. Renders the H1 product title.
     Spec: blueprint/product page §7. */
/* END_BLOCK:_product-title */

/* START_BLOCK:_review-stars (INDEX:127) */
.review-stars-block {
    --rs-star-fill:   var(--color-foreground);
    --rs-star-empty:  rgb(from var(--color-foreground) r g b / 22%);
    --rs-star-stroke: var(--color-foreground);
    --rs-gap:         var(--rs-inner-gap, 0.6rem);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: var(--rs-justify, flex-start);
  }

  .review-stars-block--text-left   { --rs-justify: flex-start; }
  .review-stars-block--text-center { --rs-justify: center; }
  .review-stars-block--text-right  { --rs-justify: flex-end; }

  .review-stars-block__inner {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: var(--rs-gap);
    max-width: 100%;
    pointer-events: none;
  }

  .review-stars-block__stars {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 0.2rem;
  }

  .review-stars-block__star {
    flex-shrink: 0;
    width: var(--rs-star-size, 1.6rem);
    height: var(--rs-star-size, 1.6rem);
    display: block;
  }

  .review-stars-block__star path {
    vector-effect: non-scaling-stroke;
  }

  .review-stars-block--multi .review-stars-block__star {
    width: var(--rs-star-size-multi, 1.4rem);
    height: var(--rs-star-size-multi, 1.4rem);
  }

  /* Single star */
  .review-stars-block__star--single path {
    fill: none;
    stroke: var(--rs-star-stroke);
    stroke-width: 0.12rem;
    stroke-linejoin: round;
  }

  .review-stars-block--single-shaded .review-stars-block__star--single path {
    fill: var(--rs-star-fill);
    stroke: none;
  }

  /* Multi star — outline style */
  .review-stars-block--outline .review-stars-block__star--multi path {
    fill: none;
    stroke: var(--rs-star-stroke);
    stroke-width: 0.12rem;
    stroke-linejoin: round;
  }

  .review-stars-block--outline .review-stars-block__star--multi.review-stars-block__star--filled path {
    fill: var(--rs-star-fill);
    stroke: var(--rs-star-stroke);
  }

  /* Multi star — shaded style */
  .review-stars-block--shaded .review-stars-block__star--multi path {
    fill: var(--rs-star-empty);
    stroke: none;
  }

  .review-stars-block--shaded .review-stars-block__star--multi.review-stars-block__star--filled path {
    fill: var(--rs-star-fill);
  }

  .review-stars-block__numeric {
    margin: 0;
    white-space: nowrap;
    color: var(--rs-star-fill);
  }

  .review-stars-block__count {
    margin: 0;
    white-space: nowrap;
    color: var(--rs-star-fill);
    opacity: 0.85;
  }

  /* Pipe separator — pseudo-element with controlled height */
  .review-stars-block__count--pipe {
    display: inline-flex;
    align-items: center;
  }

  .review-stars-block__count--pipe::before {
    content: '';
    display: block;
    flex-shrink: 0;
    width: 0.1rem;
    height: 0.9em;
    background: rgb(from var(--rs-star-fill) r g b / 30%);
    margin-inline-end: 0.8rem;
  }

  /* Bracket separator — brackets rendered via CSS with spacing */
  .review-stars-block__count--bracket::before {
    content: '(';
    margin-inline-end: 0.25rem;
  }

  .review-stars-block__count--bracket::after {
    content: ')';
    margin-inline-start: 0.25rem;
  }

  @media (forced-colors: active) {
    .review-stars-block {
      display: none;
    }
  }
/* END_BLOCK:_review-stars */

/* START_BLOCK:_slideshow-item (INDEX:128) */
/* _slideshow-item — private block (only used inside sections/slideshow.liquid).
     Group-like container: media background + flex content above.
     Spec: blueprint/skill/HOMEPAGE_SECTIONS_PLAN.md §3 */

  .slideshow-item {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .slideshow-item__media {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .slideshow-item__image,
  .slideshow-item__video,
  .slideshow-item__placeholder {
    /* display:block removes the inline baseline gap that otherwise shows as a thin
       strip under the image in adapt mode (slide height follows the image). */
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--slide-img-pos, center center);
  }

  .slideshow-item__placeholder {
    display: block;
  }

  .slideshow-item__image--mobile {
    display: none;
  }

  @media (max-width: 749px) {
    .slideshow-item:has(.slideshow-item__image--mobile) .slideshow-item__image--desktop {
      display: none;
    }
    .slideshow-item__image--mobile {
      display: block;
    }
  }

  .slideshow-item__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
  }

  .slideshow-item__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: var(--flex-direction, column);
    justify-content: var(--justify-content, center);
    align-items: var(--align-items, flex-start);
    column-gap: var(--column-gap, 12px);
    row-gap: var(--row-gap, 12px);
    height: 100%;
    width: 100%;
    padding-block-start: var(--padding-block-start, 48px);
    padding-block-end: var(--padding-block-end, 48px);
    padding-inline-start: var(--padding-inline-start, 48px);
    padding-inline-end: var(--padding-inline-end, 48px);
    /* Let clicks on empty content area fall through to the full-bleed slide link
       (.slideshow-item__link-overlay) beneath; re-enable pointer events on the
       actual blocks (text, button) so they stay independently clickable. */
    pointer-events: none;
  }
  .slideshow-item__content > * {
    pointer-events: auto;
  }

  /* Mobile: optional flex-direction override + padding scale */
  @media (max-width: 749px) {
    .slideshow-item__content {
      flex-direction: var(--flex-direction-mobile, var(--flex-direction, column));
      padding-block-start: calc(var(--padding-block-start, 48px) * var(--padding-mobile-scale, 0.8));
      padding-block-end: calc(var(--padding-block-end, 48px) * var(--padding-mobile-scale, 0.8));
      padding-inline-start: calc(var(--padding-inline-start, 48px) * var(--padding-mobile-scale, 0.8));
      padding-inline-end: calc(var(--padding-inline-end, 48px) * var(--padding-mobile-scale, 0.8));
    }
  }

  /* Overlay link — inside .slideshow-item__media so it sits above the color
     overlay but below .slideshow-item__content (sibling, z-index 2). Buttons
     and text inside the slide content stay independently clickable. */
  .slideshow-item__link-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    text-indent: -9999px;
    white-space: nowrap;
    overflow: hidden;
  }
  .slideshow-item__link-overlay:focus-visible {
    outline: 2px solid var(--color-foreground);
    outline-offset: -4px;
  }

  /* “Adapt to image” slide-height variant — media is in flow and contributes
     intrinsic height to the slide; content sits absolutely overlaid on top. */
  .slideshow--adapt .slideshow-item__media {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    flex: 1 1 auto;
    min-height: 0;
  }
  .slideshow--adapt .slideshow-item__image,
  .slideshow--adapt .slideshow-item__video {
    width: 100%;
    height: auto;
    object-fit: contain;
  }
  .slideshow--adapt .slideshow-item__content {
    position: absolute;
    inset: 0;
    height: auto;
    min-height: 100%;
  }
  /* Placeholder inside adapt — fill slide (slide min-height set on section). */
  .slideshow--adapt .slideshow-item:has(.slideshow-item__placeholder) .slideshow-item__media {
    min-height: 100%;
    flex: 1 1 auto;
  }
  .slideshow--adapt .slideshow-item__placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /*
    Mobile content-below — SLIDESHOW_MOBILE_CONTENT_BELOW_PLAN.md
    Stacks media → content; pagination moves in sections/slideshow.liquid.
  */
  @media (max-width: 749px) {
    slideshow-section[data-mobile-content-below="true"] .slideshow-item {
      height: auto;
      min-height: 0;
    }

    slideshow-section[data-mobile-content-below="true"] .slideshow-item__media {
      position: relative;
      inset: auto;
      width: 100%;
      height: var(--slide-min-h, 70svh);
      flex: 0 0 auto;
    }

    slideshow-section[data-mobile-content-below="true"].slideshow--adapt .slideshow-item__media {
      height: auto;
    }

    slideshow-section[data-mobile-content-below="true"].slideshow--adapt .slideshow-item__image,
    slideshow-section[data-mobile-content-below="true"].slideshow--adapt .slideshow-item__video {
      height: auto;
    }

    slideshow-section[data-mobile-content-below="true"].slideshow--adapt .slideshow-item:has(.slideshow-item__placeholder) .slideshow-item__media {
      min-height: var(--placeholder-min-h-mobile, 70svh);
      height: auto;
    }

    slideshow-section[data-mobile-content-below="true"].slideshow--adapt .slideshow-item__placeholder {
      width: 100%;
      height: 100%;
      min-height: var(--placeholder-min-h-mobile, 70svh);
      object-fit: cover;
    }

    slideshow-section[data-mobile-content-below="true"] .slideshow-item__content {
      position: relative;
      inset: auto;
      height: auto;
      min-height: 0;
      flex: 1 1 auto;
      background-color: var(--color-background);
      color: var(--color-foreground);
    }

    /*
      Mobile + “content below” OFF + adapt: desktop adapt keeps media in flow (intrinsic ratio).
      Here we restore a fixed hero band and absolute-fill media so video/images fill the slide
      and text overlays the media (same as non-adapt overlay behavior).
      Spec: blueprint/sections/SLIDESHOW_VIDEO_AND_MOBILE_OVERLAY_PLAN.md
    */
    slideshow-section[data-mobile-content-below="false"].slideshow--adapt .slideshow-item__media {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      flex: none;
      min-height: 0;
    }

    slideshow-section[data-mobile-content-below="false"].slideshow--adapt .slideshow-item__image,
    slideshow-section[data-mobile-content-below="false"].slideshow--adapt .slideshow-item__video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: var(--slide-img-pos, center center);
    }

    slideshow-section[data-mobile-content-below="false"].slideshow--adapt .slideshow-item__content {
      position: absolute;
      inset: 0;
      height: auto;
      min-height: 100%;
    }
  }
/* END_BLOCK:_slideshow-item */

/* START_BLOCK:_testimonial-card (INDEX:129) */
/* _testimonial-card — private block, used by Sticky/Slider/Grid layouts.
     Two variants: standard (existing layout) and video (product-top, hover-to-play). */

  .testimonial-card {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: var(--card-padding, 2.4rem);
    background: var(--color-background);
    border-style: var(--border-style, none);
    border-width: var(--border-width, 0);
    border-color: rgb(from var(--color-foreground) r g b / var(--border-opacity, 0.2));
    border-radius: var(--border-radius, 1.2rem);
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
  }

  /* ==========================================================================
     STANDARD card — top row (avatar + author + rating)
     ========================================================================== */

  .testimonial-card__top {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
  }

  .testimonial-card__avatar {
    width: 4.4rem;
    height: 4.4rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
  }

  .testimonial-card__avatar--placeholder {
    background: rgb(from var(--color-foreground) r g b / 10%);
  }

  .testimonial-card__author {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .testimonial-card__name {
    font-weight: 600;
    line-height: 1.2;
  }

  .testimonial-card__bio {
    font-size: 0.9em;
    color: rgb(from var(--color-foreground) r g b / 70%);
  }

  .testimonial-card__rating {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-variant-numeric: tabular-nums;
  }

  .testimonial-card__rating-star {
    width: 1.4rem;
    height: 1.4rem;
    fill: currentColor;
  }

  .testimonial-card__rating-stars {
    display: inline-flex;
    gap: 0.2rem;
  }

  .testimonial-card__rating-star--empty {
    opacity: 0.3;
  }

  /* ==========================================================================
     SHARED — quote
     ========================================================================== */

  .testimonial-card__quote {
    line-height: 1.5;
  }

  /* ==========================================================================
     STANDARD card — product mini-card at bottom
     ========================================================================== */

  .testimonial-card__product {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin-block-start: auto;
    padding-block-start: 1.5rem;
    border-block-start: 1px solid rgb(from var(--color-foreground) r g b / 10%);
    text-decoration: none;
    color: inherit;
    transition: opacity 0.15s ease;
  }

  .testimonial-card__product:hover {
    opacity: 0.75;
  }

  .testimonial-card__product:focus-visible {
    outline: 0.2rem solid var(--color-foreground);
    outline-offset: -0.2rem;
    border-radius: 0.4rem;
  }

  .testimonial-card__product-thumb {
    width: 5.6rem;
    height: 5.6rem;
    border-radius: 0.6rem;
    object-fit: cover;
    flex-shrink: 0;
  }

  .testimonial-card__product-thumb--placeholder {
    background: rgb(from var(--color-foreground) r g b / 5%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .testimonial-card__product-thumb-svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  .testimonial-card__product-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
  }

  .testimonial-card__product-categories {
    font-size: 0.8em;
    color: rgb(from var(--color-foreground) r g b / 60%);
  }

  .testimonial-card__product-name {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .testimonial-card__product-price {
    font-weight: 600;
  }

  /* ==========================================================================
     VIDEO card — product at top (no border separator)
     ========================================================================== */

  .testimonial-card--video .testimonial-card__product--top {
    margin-block-start: 0;
    border-block-start: none;
    padding-block-start: 0;
  }

  /* ==========================================================================
     VIDEO card — footer (signature + author row)
     ========================================================================== */

  .testimonial-card__footer {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    margin-block-start: auto;
  }

  .testimonial-card__signature {
    line-height: 0;
  }

  .testimonial-card__signature img {
    max-width: 14rem;
    height: auto;
    display: block;
  }

  .testimonial-card__bottom-row {
    display: flex;
    align-items: center;
    gap: 1.2rem;
  }

  /* ==========================================================================
     VIDEO card — hover overlay
     ========================================================================== */

  .testimonial-card__video-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
  }

  testimonial-video-card:hover .testimonial-card__video-overlay,
  testimonial-video-card:focus-within .testimonial-card__video-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* Editor: JS adds this attribute when the block is selected */
  .testimonial-card__video-overlay[data-editor-preview] {
    opacity: 1;
    visibility: visible;
  }

  .testimonial-card__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .testimonial-card__video-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to top,
      rgb(0 0 0 / 60%) 0%,
      rgb(0 0 0 / 0%) 50%
    );
    z-index: 1;
    pointer-events: none;
  }

  .testimonial-card__video-author {
    position: absolute;
    z-index: 2;
    inset-inline-start: 2.4rem;
    bottom: 2.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
  }

  .testimonial-card__video-name {
    font-weight: 600;
    font-size: 1.4rem;
    color: #ffffff;
    line-height: 1.2;
  }

  .testimonial-card__video-bio {
    font-size: 1.2rem;
    color: rgb(255 255 255 / 80%);
    line-height: 1.2;
  }

  @media (prefers-reduced-motion: reduce) {
    .testimonial-card__video-overlay {
      transition: none;
    }
  }
/* END_BLOCK:_testimonial-card */

/* START_BLOCK:_testimonial-header (INDEX:130) */
/* _testimonial-header — static private block (Testimonial section only).
     Holds the section's title + optional description as `text` children.
     Spec: blueprint/skill/HOMEPAGE_SECTIONS_PLAN.md §17 */

  .testimonial-header {
    display: flex;
    flex-direction: column;
    gap: var(--header-gap, 12px);
    padding-block-start: var(--th-pad-top, 0px);
    padding-block-end: var(--th-pad-bottom, 0px);
    padding-inline-start: var(--th-pad-left, 0px);
    padding-inline-end: var(--th-pad-right, 0px);
  }

  .testimonial-header--align-left   { align-items: flex-start; text-align: start; }
  .testimonial-header--align-center { align-items: center;     text-align: center; }
  .testimonial-header--align-right  { align-items: flex-end;   text-align: end; }

  /* Content column — carries the vertical gap between title and description */
  .testimonial-header__content {
    display: flex;
    flex-direction: column;
    gap: var(--header-gap, 12px);
  }

  /* Row layout when nav is injected beside the heading */
  .testimonial-header--has-nav {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
  }
  .testimonial-header--has-nav .testimonial-header__content {
    flex: 1;
    min-width: 0;
  }

  /* Alignment modifiers: on --has-nav, target __content not the row itself */
  .testimonial-header--has-nav.testimonial-header--align-left   .testimonial-header__content { align-items: flex-start; }
  .testimonial-header--has-nav.testimonial-header--align-center .testimonial-header__content { align-items: center; }
  .testimonial-header--has-nav.testimonial-header--align-right  .testimonial-header__content { align-items: flex-end; }

  @media (max-width: 749px) {
    .testimonial-header {
      padding-block-start: var(--th-pad-top-mobile, var(--th-pad-top, 0px));
      padding-block-end: var(--th-pad-bottom-mobile, var(--th-pad-bottom, 0px));
      padding-inline-start: var(--th-pad-left-mobile, var(--th-pad-left, 0px));
      padding-inline-end: var(--th-pad-right-mobile, var(--th-pad-right, 0px));
    }
    .testimonial-header--mobile-align-left   { align-items: flex-start; text-align: start; }
    .testimonial-header--mobile-align-center { align-items: center;     text-align: center; }
    .testimonial-header--mobile-align-right  { align-items: flex-end;   text-align: end; }
    .testimonial-header--has-nav.testimonial-header--mobile-align-left   .testimonial-header__content { align-items: flex-start; }
    .testimonial-header--has-nav.testimonial-header--mobile-align-center .testimonial-header__content { align-items: center; }
    .testimonial-header--has-nav.testimonial-header--mobile-align-right  .testimonial-header__content { align-items: flex-end; }
  }
/* END_BLOCK:_testimonial-header */

/* START_BLOCK:_testimonial-reel-card (INDEX:131) */
/* _testimonial-reel-card — private block, used by Testimonial Flex Slider only.
     Two variants: text (white card with avatar+quote+signature+bio) or media (full-bleed photo/video with overlay).
     Spec: blueprint/skill/HOMEPAGE_SECTIONS_PLAN.md §17 */

  .testimonial-reel {
    width: var(--reel-width, 320px);
    border-radius: var(--border-radius, 16px);
    overflow: hidden;
    flex-shrink: 0;
    box-sizing: border-box;
    position: relative;
  }

  /* TEXT VARIANT */
  .testimonial-reel--text {
    background: var(--color-background);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .testimonial-reel__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
  }
  .testimonial-reel__avatar--placeholder {
    background: rgb(from var(--color-foreground) r g b / 10%);
  }

  .testimonial-reel__product-name {
    font-weight: 700;
    font-size: 1.05em;
  }

  .testimonial-reel__stars {
    display: inline-flex;
    gap: 2px;
    color: #f5b800;
  }
  .testimonial-reel__star {
    width: 16px;
    height: 16px;
    fill: currentColor;
  }
  .testimonial-reel__star--empty {
    opacity: 0.3;
  }

  .testimonial-reel__numeric {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-variant-numeric: tabular-nums;
  }

  .testimonial-reel__quote {
    line-height: 1.5;
    flex: 1;
  }

  .testimonial-reel__signature {
    margin-block-start: 8px;
  }
  .testimonial-reel__signature-image {
    max-width: 140px;
    height: auto;
  }
  .testimonial-reel__signature-text {
    font-style: italic;
    font-family: cursive;
    font-size: 1.4em;
  }

  .testimonial-reel__name {
    font-weight: 600;
  }
  .testimonial-reel__bio {
    color: rgb(from var(--color-foreground) r g b / 70%);
    font-size: 0.9em;
  }

  /* MEDIA VARIANT */
  .testimonial-reel--media {
    aspect-ratio: 3 / 4;
    background: rgb(from var(--color-foreground) r g b / 5%);
  }

  .testimonial-reel__media {
    position: absolute;
    inset: 0;
    z-index: 0;
  }
  .testimonial-reel__media img,
  .testimonial-reel__media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .testimonial-reel__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgb(from #000 r g b / var(--reel-overlay-opacity, 0.3));
    pointer-events: none;
  }

  .testimonial-reel__overlay-content {
    position: absolute;
    z-index: 2;
    inset-inline-start: 24px;
    bottom: 24px;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .testimonial-reel__overlay-content .testimonial-reel__signature-text,
  .testimonial-reel__overlay-content .testimonial-reel__signature-image,
  .testimonial-reel__overlay-content .testimonial-reel__name,
  .testimonial-reel__overlay-content .testimonial-reel__bio {
    color: #ffffff;
  }

  .testimonial-reel__product-thumb {
    position: absolute;
    z-index: 3;
    width: 64px;
    height: 64px;
    border-radius: 8px;
    object-fit: cover;
  }
  .testimonial-reel__product-thumb--bottom-right { bottom: 24px; inset-inline-end: 24px; }
  .testimonial-reel__product-thumb--bottom-left  { bottom: 24px; inset-inline-start: 24px; }
  .testimonial-reel__product-thumb--top-right    { top: 24px; inset-inline-end: 24px; }
  .testimonial-reel__product-thumb--top-left     { top: 24px; inset-inline-start: 24px; }
/* END_BLOCK:_testimonial-reel-card */

/* START_BLOCK:_trust-badge (INDEX:132) */
/* _trust-badge — private PDP block. Trust signal shown in the product info
     column: either payment-method icons or a PCI security badge (light/dark).
     Extracted from blocks/_buy-buttons.liquid. Spec:
     blueprint/product-page/TRUST_BADGE_BLOCK_AND_PADDING_PLAN.md */

  .trust-badge {
    margin-block: 0;
  }

  .trust-badge__heading {
    margin: 0 0 1rem;
  }

  .trust-badge__payment {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .trust-badge__payment .product__payment__item {
    display: inline-flex;
  }

  .trust-badge__payment .icon {
    height: 2.4rem;
    width: auto;
  }

  .trust-badge__security {
    display: inline-flex;
    text-decoration: none;
  }

  .trust-badge__security img,
  .trust-badge__security svg {
    max-width: 100%;
    height: auto;
  }

  .trust-badge__custom-text {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin: 0;
    font-size: 1.3rem;
  }

  .trust-badge__custom-text::before {
    content: '';
    flex-shrink: 0;
    display: inline-block;
    width: 1.8rem;
    height: 1.8rem;
    background-color: var(--color-foreground);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l8 3v6c0 5-3.4 8.7-8 11-4.6-2.3-8-6-8-11V5l8-3z' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M8.5 12l2.5 2.5 4.5-5' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l8 3v6c0 5-3.4 8.7-8 11-4.6-2.3-8-6-8-11V5l8-3z' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M8.5 12l2.5 2.5 4.5-5' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

  .product--no-media .trust-badge__custom-text {
    justify-content: center;
  }

  /* no-media centering parity with _product-details rules */
  .product--no-media .trust-badge {
    text-align: center;
  }

  .product--no-media .trust-badge__payment,
  .product--no-media .trust-badge__security {
    justify-content: center;
  }
/* END_BLOCK:_trust-badge */

/* START_BLOCK:_variant-picker (INDEX:133) */
/* _variant-picker — private PDP block. Renders the modern context-agnostic
     picker (snippets/gyanpradip-product-variant-picker.liquid) with
     unique_id = section.id, which reproduces the EXACT wiring product-info.js
     needs: <variant-selects id="variant-selects-{section.id}" data-section>,
     the data-selected-variant JSON, data-option-value-id inputs, and
     form="product-form-{section.id}" binding. Visual UX (pills + swatches +
     layout) is ported from _product-card-variants.liquid, namespaced to
     .product-variant-picker. Swatch sizing/shape relies on the global swatch CSS
     the section already loads. Spec: blueprint/product-page/PRODUCT_PAGE_FIXES_PLAN.md §C. */

  /* ── gyanpradip-swatch.css (migrated) ───────────────────────────────────── */
  .swatch {
    --swatch--size: var(--swatch-input--size, 3.2rem);
    --swatch--border-radius: var(--swatch-input--border-radius, 50%);
    display: block;
    width: var(--swatch--size);
    max-width: 100%;
    aspect-ratio: 1 / 1;
    --custom-background-color: var(
      --background-gradient,
      var(--color-swatch-background)
    );
    background: var(--custom-background-color, var(--swatch--background));
    background-position: var(--swatch-focal-point, initial);
    background-size: cover;
    background-origin: border-box;
    border: 0.1rem solid rgb(from var(--color-foreground) r g b / 15%);
    border-radius: var(--swatch--border-radius);
  }

  .swatch--square {
    --swatch--border-radius: var(--swatch-input--border-radius, 0.2rem);
  }

  .swatch--unavailable {
    border-style: dashed;
    border-color: rgb(from var(--color-foreground) r g b / 5%);
  }

  /* ── gyanpradip-swatch-input.css (migrated) ─────────────────────────────── */
  .swatch-input__input + .swatch-input__label {
    --swatch-input--border-radius: 50%;
    --swatch-selected-gap: 0.12rem;
    --swatch-selected-stroke: 0.1rem;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--swatch-input--size, 3.5rem);
    aspect-ratio: 1;
    max-width: 100%;
    vertical-align: top;
    line-height: 0;
    border-radius: var(--swatch-input--border-radius);
    cursor: pointer;
    outline: none;
    forced-color-adjust: none;
  }

  .swatch-input__input + .swatch-input__label > .swatch {
    flex: 0 0 auto;
    margin: 0;
    transition: box-shadow var(--duration-short) ease;
  }

  .swatch-input__input + .swatch-input__label.swatch-input__label--square {
    --swatch-input--border-radius: 0.2rem;
  }

  .swatch-input__input:not(:checked) + .swatch-input__label:hover > .swatch {
    box-shadow: 0 0 0 0.2rem rgb(from var(--color-foreground) r g b / 4%);
  }

  .swatch-input__input:checked + .swatch-input__label:hover > .swatch {
    box-shadow:
      0 0 0 var(--swatch-selected-gap) var(--color-background),
      0 0 0 calc(var(--swatch-selected-gap) + var(--swatch-selected-stroke))
        var(--color-foreground);
  }

  .swatch-input__input:active:not(:checked) + .swatch-input__label > .swatch {
    box-shadow: 0 0 0 0.2rem rgb(from var(--color-foreground) r g b / 10%);
  }

  .swatch-input__input:checked + .swatch-input__label > .swatch {
    box-shadow:
      0 0 0 var(--swatch-selected-gap) var(--color-background),
      0 0 0 calc(var(--swatch-selected-gap) + var(--swatch-selected-stroke))
        var(--color-foreground);
  }

  .swatch-input__input:focus-visible + .swatch-input__label > .swatch {
    box-shadow:
      0 0 0 0.2rem var(--color-background),
      0 0 0 0.35rem rgb(from var(--color-foreground) r g b / 45%);
  }

  .swatch-input__input:checked:focus-visible + .swatch-input__label > .swatch {
    box-shadow:
      0 0 0 var(--swatch-selected-gap) var(--color-background),
      0 0 0 calc(var(--swatch-selected-gap) + var(--swatch-selected-stroke))
        var(--color-foreground),
      0 0 0
        calc(var(--swatch-selected-gap) + var(--swatch-selected-stroke) + 0.15rem)
        rgb(from var(--color-foreground) r g b / 40%);
  }

  .swatch-input__input.visually-disabled:not(:checked)
    + .swatch-input__label
    > .swatch {
    box-shadow: 0 0 0 0.1rem rgb(from var(--color-foreground) r g b / 28%);
  }

  .swatch-input__input.visually-disabled:not(:active):not(:checked)
    + .swatch-input__label {
    transition: none;
  }

  .swatch-input__input.visually-disabled:not(:active):not(:checked)
    + .swatch-input__label:hover
    > .swatch {
    box-shadow: none;
  }

  .swatch-input__input:disabled + .swatch-input__label {
    pointer-events: none;
  }

  .swatch-input__input:disabled + .swatch-input__label > .swatch,
  .swatch-input__input.visually-disabled + .swatch-input__label > .swatch {
    position: relative;
    overflow: hidden;
  }

  .swatch-input__input:disabled + .swatch-input__label > .swatch,
  .swatch-input__input.visually-disabled + .swatch-input__label > .swatch {
    opacity: 0.4;
  }

  .swatch-input__input:disabled + .swatch-input__label > .swatch::after,
  .swatch-input__input.visually-disabled + .swatch-input__label > .swatch::after {
    --diagonal--size: calc(var(--swatch-input--size) * 1.414);
    --crossed-line--size: 0.1rem;
    content: "";
    position: absolute;
    bottom: calc(var(--crossed-line--size) * -0.5);
    left: 0;
    width: var(--diagonal--size);
    height: var(--crossed-line--size);
    background-color: var(--color-foreground);
    transform: rotate(-45deg);
    transform-origin: left;
  }

  /* ── gyanpradip-product-variant-picker.css (migrated) ───────────────────── */
  variant-selects {
    display: block;
  }

  .product--no-media .product-form__input--pill,
  .product--no-media .product-form__input--swatch,
  .product--no-media .product-form__input--dropdown {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .product--no-media .product-form__input.product-form__input--pill,
  .product--no-media .product-form__input.product-form__input--swatch {
    flex-wrap: wrap;
    margin: 0 auto 1.2rem auto;
  }

  .product--no-media .product-form__input--dropdown {
    flex-direction: column;
    max-width: 100%;
  }

  :is(.product-form__input--pill, .product-form__input--swatch) .form__label {
    margin-bottom: 0.2rem;
  }

  .product-form__input input[type="radio"] {
    clip: rect(0, 0, 0, 0);
    overflow: hidden;
    position: absolute;
    height: 1px;
    width: 1px;
  }

  .product-form__input
    input[type="radio"]:not(.disabled):not(.visually-disabled)
    + label
    > .label-unavailable {
    display: none;
  }

  .product-form__input--dropdown {
    --swatch-input--size: 2rem;
    margin-bottom: 1.6rem;
  }

  .product-form__input--dropdown .dropdown-swatch + select {
    padding-left: calc(2.4rem + var(--swatch-input--size));
  }

  .product-form__input--dropdown .dropdown-swatch {
    position: absolute;
    left: 1.6rem;
    top: calc(50% - var(--swatch-input--size) / 2);
    width: var(--swatch-input--size);
    height: var(--swatch-input--size);
    z-index: 1;
  }

  .product-form__input--pill input[type="radio"] + label {
    border: 0.1rem solid rgb(from var(--color-foreground) r g b / 55%);
    background-color: var(--color-background);
    color: var(--color-foreground);
    border-radius: 0.5rem;
    display: inline-block;
    margin: 0.7rem 0.5rem 0.2rem 0;
    padding: 1rem 1.5rem;
    font-size: 1.4rem;
    letter-spacing: 0.1rem;
    line-height: 1;
    text-align: center;
    transition: border var(--duration-short) ease;
    cursor: pointer;
    position: relative;
  }

  .product-form__input--pill input[type="radio"] + label:before {
    content: "";
    position: absolute;
    top: calc(var(--variant-pills-border-width) * -1);
    right: calc(var(--variant-pills-border-width) * -1);
    bottom: calc(var(--variant-pills-border-width) * -1);
    left: calc(var(--variant-pills-border-width) * -1);
    z-index: -1;
    border-radius: var(--variant-pills-radius);
    box-shadow: var(--variant-pills-shadow-horizontal-offset)
      var(--variant-pills-shadow-vertical-offset)
      var(--variant-pills-shadow-blur-radius)
      rgb(from var(--color-shadow) r g b / calc(var(--variant-pills-shadow-opacity) * 100%));
  }

  .product-form__input--pill input[type="radio"] + label:hover {
    border-color: var(--color-foreground);
  }

  .product-form__input--pill input[type="radio"]:checked + label {
    background-color: var(--color-foreground);
    color: var(--color-background);
  }

  @media screen and (forced-colors: active) {
    .product-form__input--pill input[type="radio"]:checked + label {
      text-decoration: underline;
    }

    .product-form__input--pill input[type="radio"]:focus-visible + label {
      outline: transparent solid 1px;
      outline-offset: 2px;
    }
  }

  .product-form__input--pill input[type="radio"]:checked + label::selection {
    background-color: rgb(from var(--color-background) r g b / 3%);
  }

  .product-form__input--pill input[type="radio"]:disabled + label,
  .product-form__input--pill input[type="radio"].disabled + label {
    border-color: rgb(from var(--color-foreground) r g b / 1%);
    color: rgb(from var(--color-foreground) r g b / 6%);
    text-decoration: line-through;
  }

  .product-form__input--pill input[type="radio"].disabled:checked + label,
  .product-form__input--pill input[type="radio"]:disabled:checked + label {
    color: rgb(from var(--color-background) r g b / 6%);
  }

  .product-form__input--pill input[type="radio"]:focus-visible + label {
    box-shadow: 0 0 0 0.3rem var(--color-background),
      0 0 0 0.5rem rgb(from var(--color-foreground) r g b / 55%);
  }

  .product-form__input--pill input[type="radio"].focused + label {
    box-shadow: 0 0 0 0.3rem var(--color-background),
      0 0 0 0.5rem rgb(from var(--color-foreground) r g b / 55%);
  }

  .product-form__input--swatch {
    display: flex;
    flex-wrap: wrap;
  }

  .product-form__input--swatch .swatch-input__input + .swatch-input__label {
    --swatch-input--size: 3.5rem;
    margin: 0.7rem 1.2rem 0.2rem 0;
  }

  @media screen and (min-width: 750px) {
    .product-form__input--swatch
      .swatch-input__input
      + .swatch-input__label:is(.swatch--shape-md, .swatch--shape-medium) {
      --swatch-input--size: 5rem;
    }

    .product-form__input--swatch
      .swatch-input__input
      + .swatch-input__label:is(.swatch--shape-lg, .swatch--shape-large) {
      --swatch-input--size: 6.5rem;
    }
  }

  .product-variant-picker {
    width: 100%;
  }

  .product-variant-picker > .product-variant-picker__divider {
    display: block;
    border: 0;
    border-block-start: var(--input-border-width, 0.1rem) solid var(--color-input-border);
    margin: 0;
    height: 0;
    width: 100%;
    flex-shrink: 0;
    box-sizing: border-box;
  }

  /* Layout shells */
  .product-variant-picker--row_equal,
  .product-variant-picker--row_inline,
  .product-variant-picker--column {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.4rem;
  }
  .product-variant-picker--row_equal .product-variant-picker__pickers {
    display: grid;
    align-items: start;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 0.8rem;
    min-width: 0;
  }
  .product-variant-picker--row_inline .product-variant-picker__pickers {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.8rem;
    min-width: 0;
  }
  .product-variant-picker--column .product-variant-picker__pickers {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    min-width: 0;
  }
  .product-variant-picker__pickers > variant-selects {
    display: contents;
  }
  .product-variant-picker__pickers .product-form__input,
  .product-variant-picker__pickers fieldset.product-form__input {
    margin: 0;
    align-self: start;
    min-width: 0;
  }

  /* Stacked column: each control fills the full column width (dropdowns must not
     shrink to content). Scoped to the column layout of THIS block only. */
  .product-variant-picker--column .product-variant-picker__pickers .product-form__input,
  .product-variant-picker--column .product-variant-picker__pickers fieldset.product-form__input {
    align-self: stretch;
    width: 100%;
  }
  .product-variant-picker--column .product-form__input--dropdown .select {
    width: 100%;
  }

  /* Dropdown row */
  .product-variant-picker .product-form__input--dropdown .form__label:not(.visually-hidden) {
    margin-block-end: 0.9rem;
    font-size: 1.2rem;
  }
  .product-variant-picker .product-form__input--dropdown .select {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-height: var(--input-height, 4.4rem);
    padding-inline-start: var(--input-padding-inline, 1.2rem);
    padding-inline-end: var(--input-padding-inline, 1.2rem);
    border: var(--input-border-width, 0.1rem) solid var(--color-input-border);
    border-radius: var(--input-border-radius, 0.4rem);
    background: var(--color-input-background);
    color: var(--color-input-text);
    box-sizing: border-box;
  }
  .product-variant-picker .product-form__input--dropdown .select:focus-within {
    border-color: var(--color-input-border-hover);
  }
  .product-variant-picker .product-form__input--dropdown .dropdown-swatch {
    position: static;
    inset: auto;
    z-index: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
  }
  .product-variant-picker .product-form__input--dropdown .dropdown-swatch .swatch {
    width: 2rem;
    height: 2rem;
  }
  .product-variant-picker .product-form__input--dropdown .select__select {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    padding-inline-start: 0;
    padding-inline-end: calc(var(--input-padding-inline, 1.2rem) + 2.4rem);
    height: auto;
    min-height: 0;
    box-shadow: none;
  }
  .product-variant-picker .product-form__input--dropdown .dropdown-swatch + .select__select {
    padding-inline-start: 0;
  }
  .product-variant-picker .product-form__input--dropdown .select .gyanpradip-icon-chevron {
    inset-inline-end: var(--input-padding-inline, 1.2rem);
    width: 2rem;
    stroke-width: 1.5;
  }

  /* Visible option titles */
  .product-variant-picker
    :is(.product-form__input--pill, .product-form__input--swatch)
    .form__label:not(.visually-hidden) {
    margin-block-end: 0.9rem;
    font-size: 1.2rem;
  }
  .product-variant-picker .product-form__input--dropdown {
    margin-block-end: 0;
  }
  .product-variant-picker fieldset.product-form__input--pill,
  .product-variant-picker fieldset.product-form__input--swatch {
    margin: 0;
    padding: 0;
    border: none;
    min-inline-size: 0;
  }

  /* Pill (button) style — sold-out visible + line-through */
  .product-variant-picker fieldset.product-form__input--pill {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    row-gap: 1rem;
    column-gap: 0.5rem;
  }
  .product-variant-picker fieldset.product-form__input--pill > legend.form__label,
  .product-variant-picker fieldset.product-form__input--swatch > legend.form__label {
    flex: 1 1 100%;
    padding: 0;
  }
  .product-variant-picker fieldset.product-form__input--pill label {
    touch-action: manipulation;
  }
  .product-variant-picker .product-form__input--pill input[type='radio'] + label {
    margin: 0;
    padding: 0.9rem 1.6rem;
    font-size: 1.3rem;
    letter-spacing: 0.05em;
    line-height: 1.2;
    border: var(--input-border-width, 0.1rem) solid var(--color-input-border);
    border-radius: var(--pvp-variant-button-radius, var(--input-border-radius, 0.4rem));
    background-color: var(--color-background);
    color: var(--color-foreground);
    touch-action: manipulation;
  }
  .product-variant-picker .product-form__input--pill input[type='radio']:checked + label {
    background-color: var(--color-foreground);
    color: var(--color-background);
    border-color: var(--color-foreground);
  }
  .product-variant-picker
    .product-form__input--pill
    input[type='radio']:not(:disabled):not(.disabled)
    + label:hover {
    border-color: var(--color-foreground);
  }
  .product-variant-picker .product-form__input--pill input[type='radio']:disabled + label,
  .product-variant-picker .product-form__input--pill input[type='radio'].disabled + label {
    border-color: var(--color-input-border);
    background-color: var(--color-background);
    color: rgb(from var(--color-foreground) r g b / 55%);
    text-decoration: line-through;
    cursor: default;
  }
  .product-variant-picker .product-form__input--pill input[type='radio'].disabled:checked + label,
  .product-variant-picker .product-form__input--pill input[type='radio']:disabled:checked + label {
    background-color: rgb(from var(--color-foreground) r g b / 8%);
    color: rgb(from var(--color-foreground) r g b / 55%);
    border-color: var(--color-input-border);
    text-decoration: line-through;
  }

  /* Swatch style — sizing/shape come from the global swatch CSS */
  .product-variant-picker fieldset.product-form__input--swatch {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    row-gap: 1.2rem;
    column-gap: 0.7rem;
  }
  .product-variant-picker .product-form__input--swatch .swatch-input__input + .swatch-input__label {
    margin: 0;
    --swatch-input--size: 2.4rem;
    touch-action: manipulation;
  }
  /* Square swatches honour the Variant button corner radius setting. Overrides
     the global hardcoded 0.2rem on .swatch-input__label--square; the inner
     .swatch / .swatch--square inherit --swatch-input--border-radius, so this one
     rule covers both label and disk, native and custom swatches. Specificity
     (0,4,0) beats the global (0,3,0). Spec: VARIANT_PICKER_SQUARE_SWATCH_RADIUS_PLAN.md */
  .product-variant-picker
    .swatch-input__input
    + .swatch-input__label.swatch-input__label--square {
    --swatch-input--border-radius: var(--pvp-variant-button-radius, 0.2rem);
  }
  @media screen and (min-width: 750px) {
    .product-variant-picker
      .product-form__input--swatch
      .swatch-input__input
      + .swatch-input__label:is(.swatch--shape-md, .swatch--shape-medium) {
      --swatch-input--size: 3.6rem;
    }
    .product-variant-picker
      .product-form__input--swatch
      .swatch-input__input
      + .swatch-input__label:is(.swatch--shape-lg, .swatch--shape-large) {
      --swatch-input--size: 4.4rem;
    }
  }

  /* ── XL swatch size — scale up pill buttons to match ─────── */
  .product-variant-picker--swatch-xl
    :is(.product-form__input--pill, .product-form__input--swatch)
    .form__label:not(.visually-hidden) {
    font-size: 1.4rem;
  }
  .product-variant-picker--swatch-xl fieldset.product-form__input--pill {
    row-gap: 1.2rem;
    column-gap: 0.8rem;
  }
  .product-variant-picker--swatch-xl .product-form__input--pill input[type='radio'] + label {
    padding: 1.4rem 2.4rem;
    font-size: 1.6rem;
  }

  /* ── Extra-Large swatch: portrait image card + colour bar ── */
  .product-variant-picker
    .product-form__input--swatch
    .swatch-input__input
    + .swatch-input__label.swatch--shape-xl {
    aspect-ratio: unset;
    width: 9.6rem;
    height: auto;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.6rem;
    padding: 0;
    --swatch-input--size: 9.6rem;
  }
  .product-variant-picker
    .product-form__input--swatch
    .swatch-input__input
    + .swatch-input__label.swatch--shape-xl
    > .swatch {
    width: 9rem;
    aspect-ratio: 4 / 5;
    flex-shrink: 0;
    border-radius: var(--pvp-variant-button-radius, 0.4rem);
  }
  .product-variant-picker
    .swatch-input__input
    + .swatch-input__label.swatch--shape-xl
    > .pvp-swatch-color-bar {
    display: block;
    width: 4.2rem;
    height: 0.4rem;
    border-radius: 0.2rem;
    background: var(--pvp-swatch-bar-color, var(--color-input-border));
    flex-shrink: 0;
  }

  /* ── Size chart legend layout ─────────────────────────────── */
  .product-variant-picker
    :is(.product-form__input--pill, .product-form__input--swatch)
    legend.form__label.pvp-legend,
  .product-variant-picker
    .product-form__input--dropdown
    label.form__label.pvp-legend {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    width: 100%;
  }
  .product-variant-picker .pvp-legend__label {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    flex: 1 1 auto;
    min-width: 0;
  }
  .product-variant-picker .pvp-size-chart__opener {
    flex-shrink: 0;
  }
  .product-variant-picker .pvp-size-chart__button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.2rem;
    letter-spacing: 0.05em;
    text-transform: var(--pvp-btn-text-case, uppercase);
    color: var(--color-foreground);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    text-decoration: underline;
    text-underline-offset: 0.2rem;
    white-space: nowrap;
  }
  .product-variant-picker .pvp-size-chart__button:hover {
    opacity: 0.7;
  }
  .product-variant-picker .pvp-size-chart__button svg {
    width: 1.4rem;
    height: 1.4rem;
    flex-shrink: 0;
  }
  .product-variant-picker--swatch-xl .pvp-size-chart__button {
    font-size: 1.4rem;
  }

  /* ── Product popup modal — centering ─────────────────────── */

  /* Flexbox centres the panel — specificity 0-1-1 beats section-gyanpradip-product.css */
  modal-dialog.product-popup-modal {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    box-sizing: border-box;
  }

  /* Override position/size rules — specificity 0-2-0 beats section-gyanpradip-product.css */
  .product-popup-modal .product-popup-modal__content {
    position: relative;
    left: auto;
    margin: 0;
    width: 92%;
    height: auto;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
  }

  @media screen and (min-width: 750px) {
    .product-popup-modal .product-popup-modal__content {
      width: 70%;
    }
  }

  /* ── Animation & overlay ──────────────────────────────────── */

  modal-dialog.product-popup-modal {
    background: transparent;
    transition:
      background-color 0.28s ease,
      opacity          0.28s ease,
      visibility       0.28s ease;
  }

  modal-dialog.product-popup-modal[open] {
    background: rgba(0, 0, 0, 0.6);
    /* Must sit above the Quick View modal (z-index: 101) so the size guide
       opens on top when launched from within the Quick View. */
    z-index: 110;
  }

  modal-dialog.product-popup-modal.is-closing {
    background: transparent;
    opacity: 0;
  }

  /* scale() only — no translate(-50%) needed with flexbox centering */
  .product-popup-modal .product-popup-modal__content {
    opacity: 0;
    transform: scale(0.92);
    transition:
      transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
      opacity   0.22s ease;
  }

  .product-popup-modal[open] .product-popup-modal__content {
    opacity: 1;
    transform: scale(1);
  }

  .product-popup-modal.is-closing .product-popup-modal__content {
    opacity: 0;
    transform: scale(0.92);
    transition:
      transform 0.25s ease-in,
      opacity   0.25s ease-in;
  }

  .product-popup-modal__toggle svg {
    width: 2rem;
    height: 2rem;
    fill: currentColor;
  }

  @media (prefers-reduced-motion: reduce) {
    .product-popup-modal,
    .product-popup-modal__content {
      transition: none !important;
    }
  }

  /* ── Size chart modal configurable width ─────────────────── */
  @media screen and (min-width: 750px) {
    .pvp-size-chart-modal .product-popup-modal__content {
      width: min(var(--pvp-modal-max-width, 70rem), 92%);
      max-width: none;
    }
  }
/* END_BLOCK:_variant-picker */

/* START_BLOCK:_video-reel-item (INDEX:134) */
/* _video-reel-item — private block (Video reels). Swiper slide: media column + commerce below (reserved slot). */

  .video-reel-slide {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    height: auto;
    box-sizing: border-box;
  }

  .video-reel-slide__column {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0;
    box-sizing: border-box;
  }

  .video-reel-slide__media-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    flex-shrink: 0;
    overflow: visible;
  }

  /*
   * Emphasis = scaleY only — full slide width keeps Swiper gaps correct.
   * Media and product strip use the same corner radius; spacing between them via commerce-slot margin.
   */
  .video-reel {
    position: relative;
    aspect-ratio: var(--reel-aspect, 3 / 4);
    border-radius: var(--reel-radius, 12px);
    overflow: hidden;
    background: rgb(from var(--color-foreground) r g b / 5%);
    height: auto;
    isolation: isolate;
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    transform-origin: center center;
    transform: translateZ(0) scale(1, 1);
    transition: transform var(--video-reels-slide-ms, 600ms) cubic-bezier(0.4, 0, 0.2, 1);
  }

  .video-reels .swiper-slide-active .video-reel {
    border-radius: var(--reel-radius, 12px);
    transform: translateZ(0) scale(1, var(--video-reels-active-emphasis, 1.08));
  }

  .video-reel__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: rgb(from var(--color-foreground) r g b / 8%);
  }

  .video-reel__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: opacity 0.3s ease;
    pointer-events: none;
  }
  .video-reel--playing .video-reel__poster {
    opacity: 0;
  }

  .video-reel__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(from var(--color-foreground) r g b / 35%);
    padding: 1.2rem;
    box-sizing: border-box;
    background: rgb(from var(--color-foreground) r g b / 4%);
  }

  .video-reel__placeholder-svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }

  .video-reel__caption {
    position: absolute;
    bottom: 0;
    inset-inline: 0;
    padding: 1.6rem 2rem;
    background: linear-gradient(
      to top,
      rgb(from var(--color-background) r g b / 82%),
      transparent
    );
    color: var(--color-foreground);
    z-index: 3;
    pointer-events: none;
  }

  .video-reel__controls {
    position: absolute;
    bottom: 1.6rem;
    inset-inline-end: 1.6rem;
    z-index: 6;
    display: flex;
    gap: 0.8rem;
    opacity: 0;
    transition: opacity var(--video-reels-slide-ms, 600ms) cubic-bezier(0.4, 0, 0.2, 1);
  }
  .swiper-slide-active .video-reel__controls {
    opacity: 1;
  }

  .video-reel__btn {
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
    background: rgb(from var(--color-background) r g b / 90%);
    color: var(--color-foreground);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  .video-reel__btn:hover {
    background: var(--color-background);
  }

  .video-reel__btn svg {
    width: 1.6rem;
    height: 1.6rem;
  }

  .video-reel__btn--icon-on .video-reel__icon-off,
  .video-reel__btn--icon-off .video-reel__icon-on {
    display: none;
  }

  .video-reel__btn--paused .video-reel__icon-pause,
  .video-reel__btn:not(.video-reel__btn--paused) .video-reel__icon-play {
    display: none;
  }

  .video-reel__link {
    position: absolute;
    inset: 0;
    z-index: 1;
    text-decoration: none;
    color: inherit;
  }

  /* Commerce — below media with vertical spacing (merchant-tuned margin) */
  .video-reel__commerce-slot {
    position: relative;
    flex-shrink: 0;
    width: 100%;
    margin: 3.5rem 0 0;
    min-block-size: 10.8rem;
    box-sizing: border-box;
  }

  .video-reel__commerce-below {
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    /* Opacity only — avoids visibility delay fighting layout and removes “snap” on center */
    transition: opacity var(--video-reels-slide-ms, 600ms) cubic-bezier(0.4, 0, 0.2, 1);
  }

  .swiper-slide-active .video-reel__commerce-below {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .video-reel__commerce-below .video-reel-commerce-host {
    pointer-events: auto;
  }

  .video-reel-commerce-strip {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.2rem;
    width: 100%;
    box-sizing: border-box;
    padding: 1.2rem 1.6rem 1.5rem;
    margin: 0;
    border-radius: var(--reel-radius, 12px);
    background: rgb(from var(--color-background) r g b / 96%);
    color: var(--color-foreground);
    border: 0.1rem solid rgb(from var(--color-foreground) r g b / 10%);
  }

  .video-reel-commerce-strip__main {
    flex: 1 1 auto;
    min-width: 0;
    text-align: start;
  }

  .video-reel-commerce-strip__title {
    margin: 0 0 0.4rem;
    font-size: inherit;
    font-weight: 600;
    line-height: 1.35;
    color: inherit;
  }

  .video-reel-commerce-strip__title a {
    color: inherit;
    text-decoration: none;
  }

  .video-reel-commerce-strip__title a:hover {
    text-decoration: underline;
  }

  .video-reel-commerce-strip__price .price {
    margin: 0;
    color: inherit;
  }

  .video-reel__commerce-below .product-card-buy {
    flex: 0 0 auto;
    width: auto;
  }

  /*
    Video reels strip: icon-only ATC / Quick Shop control — 45px (4.5rem).
    Scoped so we beat _product-card-buy mobile-flow-below 5.6rem; icon_text left to default sizing.
  */
  .video-reels .video-reel__commerce-below .product-card-buy--content-icon .product-card-buy__btn.button {
    width: 4.5rem;
    min-width: 4.5rem;
    height: 4.5rem;
    min-height: 4.5rem;
    padding: 0;
    box-sizing: border-box;
  }

  .video-reels
    .video-reel__commerce-below
    .product-card-buy--content-icon
    .gyanpradip-quick-view
    gyanpradip-quick-view-trigger
    .product-card-buy__btn.button {
    width: 4.5rem;
    min-width: 4.5rem;
    height: 4.5rem;
    min-height: 4.5rem;
  }

  .video-reel__commerce-below .product-card-buy__media-shell {
    position: relative;
    inset: auto;
    padding: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    pointer-events: auto;
    z-index: 1;
  }

  .video-reel__commerce-below .product-card-buy--over-media.product-card-buy--mobile-flow-below .product-card-buy__row {
    margin: 0;
  }

  .video-reel-commerce-host__error {
    margin: 0;
    padding: 0.8rem 1.6rem;
  }

  @media (prefers-reduced-motion: reduce) {
    .video-reel {
      transform: translateZ(0) scale(1, 1);
      transition: none;
    }

    .video-reel__commerce-below,
    .swiper-slide-active .video-reel__commerce-below {
      transition: none;
    }
  }
/* END_BLOCK:_video-reel-item */

/* START_BLOCK:_video-reels-intro (INDEX:135) */
/* _video-reels-intro — static private block (Video reels section only).
     Renders the long intro text shown above the reel slider. Accepts a
     single `text` child block so merchants get full text-block typography.
     Spec: blueprint/skill/HOMEPAGE_SECTIONS_PLAN.md §7 */

  .video-reels-intro {
    display: flex;
    flex-direction: column;
    gap: var(--intro-gap, 12px);
    text-align: var(--intro-align, left);
    max-width: var(--intro-max-w, none);
    margin-block-end: 3.2rem;
    width: 100%;
  }
  .video-reels-intro--left {
    margin-inline-start: 0;
    margin-inline-end: auto;
  }
  .video-reels-intro--center {
    margin-inline-start: auto;
    margin-inline-end: auto;
  }
  .video-reels-intro--right {
    margin-inline-start: auto;
    margin-inline-end: 0;
  }
/* END_BLOCK:_video-reels-intro */

/* START_BLOCK:accordion (INDEX:136) */
accordion-group {
    display: block;
    min-width: 0;
    max-width: 100%;
    width: var(--accordion-width, 100%);
  }

  .accordion-block {
    width: 100%;
    padding-top: var(--accordion-padding-top, 0);
    padding-bottom: var(--accordion-padding-bottom, 0);
    padding-left: var(--accordion-padding-left, 0);
    padding-right: var(--accordion-padding-right, 0);
  }

  /* Icon visibility — parent controls which icon children show */
  .accordion--icon-plus .accordion-row__icon--chevron,
  .accordion--icon-plus .accordion-row__icon--caret,
  .accordion--icon-chevron .accordion-row__icon--plus,
  .accordion--icon-chevron .accordion-row__icon--caret,
  .accordion--icon-caret .accordion-row__icon--plus,
  .accordion--icon-caret .accordion-row__icon--chevron {
    display: none;
  }

  /* Row index (01. 02. …) — DOM order matches editor block order */
  .accordion--row-numbers {
    counter-reset: gyanpradip-accordion-row;
  }

  .accordion--row-numbers .accordion-row {
    counter-increment: gyanpradip-accordion-row;
  }

  .accordion--row-numbers .accordion-row__heading::before {
    content: counter(gyanpradip-accordion-row, decimal-leading-zero) '. ';
    color: rgb(from var(--color-foreground) r g b / 45%);
    font-size: 0.78em;
    font-weight: 400;
    margin-inline-start: var(--accordion-row-number-margin-inline-start, 0);
    margin-inline-end: var(--accordion-row-number-margin-inline-end, 0.35em);
  }

  /* Plus: swap minus/plus SVGs (no rotation on the toggle frame) */
  .accordion-row__icon-plus-when-collapsed,
  .accordion-row__icon-plus-when-open {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  details:not([open]) > .accordion-row__header .accordion-row__icon-plus-when-open {
    display: none;
  }

  details[open] > .accordion-row__header .accordion-row__icon-plus-when-collapsed {
    display: none;
  }

  /* Icon toggle frame — transform only inner SVGs for chevron/caret */
  .accordion-row__icon {
    --accordion-toggle-size: 5.6rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--accordion-toggle-size);
    height: var(--accordion-toggle-size);
  }

  .accordion-row__icon svg {
    width: var(--accordion-icon-size, 2rem);
    height: var(--accordion-icon-size, 2rem);
  }

  .accordion-row__icon--chevron svg {
    transition: transform 0.3s ease;
  }

  details[open] > .accordion-row__header .accordion-row__icon--chevron svg {
    transform: rotate(180deg);
  }

  .accordion-row__icon--caret svg {
    width: var(--accordion-icon-size, 2rem);
    height: var(--accordion-icon-size, 2rem);
    transition: transform 0.3s ease;
  }

  details[open] > .accordion-row__header .accordion-row__icon--caret svg {
    transform: rotate(180deg);
  }

  /* Override base.css global rule that positions caret absolutely in summary */
  .accordion-row__header .gyanpradip-icon-caret {
    position: static;
    right: auto;
    top: auto;
    width: var(--accordion-icon-size, 2rem);
    height: var(--accordion-icon-size, 2rem);
  }

  /* Default: no fill, square hit target only */
  .accordion--icon-style-default .accordion-row__icon {
    background: transparent;
    width: auto;
}
  /* Outline + solid: shared corner radius from theme setting */
  .accordion--icon-style-outline .accordion-row__icon,
  .accordion--icon-style-solid .accordion-row__icon {
    border-radius: var(--accordion-toggle-radius, 0);
  }

  /* Outline: bordered control */
  .accordion--icon-style-outline .accordion-row__icon {
    border: 0.1rem solid rgb(from var(--color-foreground) r g b / 35%);
    color: var(--color-foreground);
    background: transparent;
  }

  /* Solid: filled toggle */
  .accordion--icon-style-solid .accordion-row__icon {
    background: rgb(from var(--color-foreground) r g b / 100%);
    color: var(--color-background);
  }

  /* Heading preset — parent class controls child heading appearance.
     Uses Gyanpradip's responsive typography preset variables (same ones base.css
     uses for h1-h6) so sizes stay synced with theme typography settings. */
  .accordion--heading-h1 .accordion-row__heading {
    font-family: var(--text-h1-family);
    font-weight: var(--text-h1-weight);
    font-size: var(--text-h1-size);
    line-height: var(--text-h1-leading);
    letter-spacing: var(--text-h1-tracking);
    text-transform: var(--text-h1-transform);
  }

  .accordion--heading-h2 .accordion-row__heading {
    font-family: var(--text-h2-family);
    font-weight: var(--text-h2-weight);
    font-size: var(--text-h2-size);
    line-height: var(--text-h2-leading);
    letter-spacing: var(--text-h2-tracking);
    text-transform: var(--text-h2-transform);
  }

  .accordion--heading-h3 .accordion-row__heading {
    font-family: var(--text-h3-family);
    font-weight: var(--text-h3-weight);
    font-size: var(--text-h3-size);
    line-height: var(--text-h3-leading);
    letter-spacing: var(--text-h3-tracking);
    text-transform: var(--text-h3-transform);
  }

  .accordion--heading-h4 .accordion-row__heading {
    font-family: var(--text-h4-family);
    font-weight: var(--text-h4-weight);
    font-size: var(--text-h4-size);
    line-height: var(--text-h4-leading);
    letter-spacing: var(--text-h4-tracking);
    text-transform: var(--text-h4-transform);
  }

  .accordion--heading-h5 .accordion-row__heading {
    font-family: var(--text-h5-family);
    font-weight: var(--text-h5-weight);
    font-size: var(--text-h5-size);
    line-height: var(--text-h5-leading);
    letter-spacing: var(--text-h5-tracking);
    text-transform: var(--text-h5-transform);
  }

  .accordion--heading-h6 .accordion-row__heading {
    font-family: var(--text-h6-family);
    font-weight: var(--text-h6-weight);
    font-size: var(--text-h6-size);
    line-height: var(--text-h6-leading);
    letter-spacing: var(--text-h6-tracking);
    text-transform: var(--text-h6-transform);
  }

  .accordion--heading-p .accordion-row__heading {
    font-family: var(--text-body-family);
    font-weight: var(--text-body-weight);
    font-size: var(--text-body-size);
    line-height: var(--text-body-leading);
  }

  /* Border — parent class controls child row borders */
  .accordion--border-solid .accordion-row {
    border-bottom: var(--accordion-border-width, 1px) solid rgb(from var(--color-foreground) r g b / var(--accordion-border-opacity, 12%));
  }

  .accordion--border-solid .accordion-row:first-child {
    border-top: var(--accordion-border-width, 1px) solid rgb(from var(--color-foreground) r g b / var(--accordion-border-opacity, 12%));
  }

  /* Box border — container owns all four sides; rows share dividers via adjacent sibling only */
  .accordion--border-box {
    border: var(--accordion-border-width, 1px) solid rgb(from var(--color-foreground) r g b / var(--accordion-border-opacity, 12%));
    border-radius: var(--accordion-border-radius, 0);
    overflow: hidden;
  }

  .accordion--border-box .accordion-row + .accordion-row {
    border-top: var(--accordion-border-width, 1px) solid rgb(from var(--color-foreground) r g b / var(--accordion-border-opacity, 12%));
  }

  /* Box border — active (open) row heading highlight */
  .accordion--border-box details[open] > .accordion-row__header {
    background-color: var(--accordion-active-heading-bg, transparent);
  }

  .accordion--border-box details[open] > .accordion-row__header .accordion-row__heading {
    color: var(--accordion-active-heading-color, inherit);
  }

  /* Box border — content padding when row is open */
  .accordion--border-box details[open] .accordion-row__content {
    padding-block: 1.5rem;
  }

  /* Box border — icon right-side breathing room against container edge */
  .accordion--border-box .accordion-row__icon {
    padding-inline-end: var(--accordion-box-icon-padding-end, 0);
  }

  /* Card style */
  .accordion--style-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  /* Prevent color scheme from painting the wrapper background */
  .accordion--style-card[class*="color-"] {
    background-color: transparent;
  }

  .accordion--style-card .accordion-row {
    background: var(--color-background);
    color: var(--color-foreground);
    border-radius: var(--accordion-border-radius, 0);
  }

  .accordion--style-card .accordion-row__header {
    padding-top: var(--row-padding-top, 16px);
    padding-bottom: var(--row-padding-bottom, 16px);
    padding-left: calc(var(--row-padding-left, 0px) + 20px);
    padding-right: calc(var(--row-padding-right, 0px) + 20px);
  }

  .accordion--style-card .accordion-row__content {
    padding-top: 0;
    padding-bottom: var(--row-padding-bottom, 16px);
    padding-left: calc(var(--row-padding-left, 0px) + 20px);
    padding-right: calc(var(--row-padding-right, 0px) + 20px);
  }

  /* Card + border solid */
  .accordion--style-card.accordion--border-solid .accordion-row {
    border: var(--accordion-border-width, 1px) solid rgb(from var(--color-foreground) r g b / var(--accordion-border-opacity, 12%));
  }

  /* Card + border solid: remove top/bottom individual borders (full border already applied) */
  .accordion--style-card.accordion--border-solid .accordion-row:first-child {
    border-top: var(--accordion-border-width, 1px) solid rgb(from var(--color-foreground) r g b / var(--accordion-border-opacity, 12%));
  }

  @media screen and (max-width: 749px) {
    accordion-group {
      width: var(--accordion-width-mobile, var(--accordion-width, 100%));
    }

    .accordion-block {
      padding-top: calc(var(--accordion-padding-top, 0) * var(--accordion-mobile-scale, 0.8));
      padding-bottom: calc(var(--accordion-padding-bottom, 0) * var(--accordion-mobile-scale, 0.8));
      padding-left: calc(var(--accordion-padding-left, 0) * var(--accordion-mobile-scale, 0.8));
      padding-right: calc(var(--accordion-padding-right, 0) * var(--accordion-mobile-scale, 0.8));
    }

    .accordion-row__header {
      padding-top: calc(var(--row-padding-top, 16px) * var(--row-mobile-scale, 0.8));
      padding-bottom: calc(var(--row-padding-bottom, 16px) * var(--row-mobile-scale, 0.8));
      padding-left: calc(var(--row-padding-left, 0px) * var(--row-mobile-scale, 0.8));
      padding-right: calc(var(--row-padding-right, 0px) * var(--row-mobile-scale, 0.8));
    }

    .accordion-row__content {
      padding-bottom: calc(var(--row-padding-bottom, 16px) * var(--row-mobile-scale, 0.8));
      padding-left: calc(var(--row-padding-left, 0px) * var(--row-mobile-scale, 0.8));
      padding-right: calc(var(--row-padding-right, 0px) * var(--row-mobile-scale, 0.8));
    }

    .accordion--style-card .accordion-row__header {
      padding-left: calc(calc(var(--row-padding-left, 0px) * var(--row-mobile-scale, 0.8)) + 20px);
      padding-right: calc(calc(var(--row-padding-right, 0px) * var(--row-mobile-scale, 0.8)) + 20px);
    }

    .accordion--style-card .accordion-row__content {
      padding-left: calc(calc(var(--row-padding-left, 0px) * var(--row-mobile-scale, 0.8)) + 20px);
      padding-right: calc(calc(var(--row-padding-right, 0px) * var(--row-mobile-scale, 0.8)) + 20px);
    }

    .accordion--row-numbers .accordion-row__heading::before {
      margin-inline-start: var(
        --accordion-row-number-margin-inline-start-mobile,
        var(--accordion-row-number-margin-inline-start, 0)
      );
      margin-inline-end: var(
        --accordion-row-number-margin-inline-end-mobile,
        var(--accordion-row-number-margin-inline-end, 0.35em)
      );
    }

    .accordion-row__icon {
      --accordion-toggle-size: 4rem;
    }

    /* Heading font-size scales with --accordion-mobile-scale (same variable used for padding) */
    .accordion--heading-h1 .accordion-row__heading { font-size: calc(var(--text-h1-size) * var(--accordion-mobile-scale, 0.8)); }
    .accordion--heading-h2 .accordion-row__heading { font-size: calc(var(--text-h2-size) * var(--accordion-mobile-scale, 0.8)); }
    .accordion--heading-h3 .accordion-row__heading { font-size: calc(var(--text-h3-size) * var(--accordion-mobile-scale, 0.8)); }
    .accordion--heading-h4 .accordion-row__heading { font-size: calc(var(--text-h4-size) * var(--accordion-mobile-scale, 0.8)); }

    .accordion--heading-p .accordion-row__heading  { font-size: calc(var(--text-body-size) * var(--accordion-mobile-scale, 0.8)); }
  }

  /* ── gyanpradip-accordion.css (migrated) ────────────────────────────────── */
  .accordion summary {
    display: flex;
    position: relative;
    line-height: 1;
    padding: 1.5rem 0;
  }

  .accordion .summary__title {
    display: flex;
    flex: 1;
  }

  .accordion + .accordion {
    margin-top: 0;
    border-top: none;
  }

  .accordion {
    margin-top: 2.5rem;
    margin-bottom: 0;
    border-top: 0.1rem solid rgb(from var(--color-foreground) r g b / 8%);
    border-bottom: 0.1rem solid rgb(from var(--color-foreground) r g b / 8%);
  }

  .accordion__title {
    display: inline-block;
    max-width: calc(100% - 6rem);
    min-height: 1.6rem;
    margin: 0;
    word-break: break-word;
  }

  .accordion .gyanpradip-icon-accordion {
    align-self: center;
    min-width: 1.6rem;
    margin-right: 1rem;
    fill: var(--color-foreground);
  }

  .accordion details[open] > summary .gyanpradip-icon-caret {
    transform: rotate(180deg);
  }

  .accordion__content {
    margin-bottom: 1.5rem;
    word-break: break-word;
  }

  .accordion__content img {
    max-width: 100%;
  }

  .accordion__title {
    margin-bottom: 0;
  }

  .product__accordion .accordion__content {
    padding: 0 1rem;
  }
  .main-product__description.product__accordion .accordion__content {
  padding: 0 0rem;
}
  .accordion--border-solid .accordion-row__content {
    padding-block-end: 1.2rem;
  }
/* END_BLOCK:accordion */

/* START_BLOCK:article-card (INDEX:137) */
.article-card-block {
    width: var(--ac-w, fit-content);
    padding-top: var(--ac-pt, 0);
    padding-bottom: var(--ac-pb, 0);
    padding-left: var(--ac-pl, 0);
    padding-right: var(--ac-pr, 0);
  }

  .article-card-block__link {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: var(--ac-radius, 0);
    overflow: hidden;
    border: var(--ac-border, none);
  }

  .article-card-block__image {
    aspect-ratio: var(--ac-ratio, 16 / 9);
    overflow: hidden;
  }

  .article-card-block__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
  }

  .article-card-block__link:hover .article-card-block__img {
    transform: scale(1.03);
  }

  .article-card-block__content {
    padding-top: 1.2rem;
  }

  .article-card-block__title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
  }

  .article-card-block__title {
    margin: 0;
  }

  .article-card-block__arrow {
    display: inline-flex;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    flex-shrink: 0;
  }

  .article-card-block--hover-arrow .article-card-block__link:hover .article-card-block__arrow {
    opacity: 1;
    transform: translateX(0);
  }

  .article-card-block__meta {
    display: flex;
    gap: 0.8rem;
    font-size: 0.75rem;
    opacity: 0.6;
    margin-top: 0.4rem;
  }

  .article-card-block__excerpt {
    margin-top: 0.8rem;
    font-size: 0.875rem;
    opacity: 0.8;
  }

  .article-card-block__comments {
    margin-top: 0.4rem;
    font-size: 0.75rem;
    opacity: 0.6;
  }

  .article-card-block__placeholder-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: rgb(var(--placeholder-background));
    fill: rgb(var(--placeholder-foreground));
  }

  @media screen and (max-width: 749px) {
    .article-card-block {
      width: var(--ac-wm, 100%);
      padding-top: calc(var(--ac-pt, 0) * var(--ac-mobile-scale, 0.8));
      padding-bottom: calc(var(--ac-pb, 0) * var(--ac-mobile-scale, 0.8));
      padding-left: calc(var(--ac-pl, 0) * var(--ac-mobile-scale, 0.8));
      padding-right: calc(var(--ac-pr, 0) * var(--ac-mobile-scale, 0.8));
    }
  }
/* END_BLOCK:article-card */

/* START_BLOCK:contact-form (INDEX:139) */
.contact-form-block {
    width: var(--cf-w, 100%);
    padding-top: var(--cf-pt, 0);
    padding-bottom: var(--cf-pb, 0);
    padding-left: var(--cf-pl, 0);
    padding-right: var(--cf-pr, 0);
  }

  .contact-form-block__fields {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
  }

  .contact-form-block__field {
    flex: 1 1 calc(50% - 0.6rem);
    min-width: 0;
  }

  .contact-form-block__field--full {
    flex: 1 1 100%;
  }

  .contact-form-block__field label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.875rem;
    font-weight: 500;
  }

  .contact-form-block__field .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  /* Inherits global input styles from base.css — only override for border variants */
  .contact-form-block--border-underline .contact-form-block__field input,
  .contact-form-block--border-underline .contact-form-block__field textarea,
  .contact-form-block--border-underline .contact-form-block__field select {
    border: none;
    border-bottom: var(--input-border-width, 1px) solid var(--color-input-border);
    border-radius: 0;
    padding-left: 0;
  }

  .contact-form-block--border-none .contact-form-block__field input,
  .contact-form-block--border-none .contact-form-block__field textarea,
  .contact-form-block--border-none .contact-form-block__field select {
    border: none;
    background: var(--cf-field-bg, var(--color-input-background));
  }

  .contact-form-block__field textarea {
    min-height: 10rem;
    resize: vertical;
  }

  .contact-form-block__submit {
    margin-top: 1.6rem;
  }

  .contact-form-block__success {
    padding: 1rem;
    margin-bottom: 1.2rem;
    background: rgba(from var(--color-foreground) r g b / 0.04);
    border-radius: 0.4rem;
  }

  .contact-form-block__errors {
    padding: 1rem;
    margin-bottom: 1.2rem;
    color: rgb(var(--color-error, 200 0 0));
  }

  @media screen and (max-width: 749px) {
    .contact-form-block {
      width: var(--cf-wm, 100%);
      padding-top: calc(var(--cf-pt, 0) * var(--cf-mobile-scale, 0.8));
      padding-bottom: calc(var(--cf-pb, 0) * var(--cf-mobile-scale, 0.8));
      padding-left: calc(var(--cf-pl, 0) * var(--cf-mobile-scale, 0.8));
      padding-right: calc(var(--cf-pr, 0) * var(--cf-mobile-scale, 0.8));
    }

    .contact-form-block__field {
      flex: 1 1 100%;
    }
  }
  label.contact-form-block__checkbox {
    display: inline-flex;
    align-items: center;
    font-size: 1.4rem;
    gap: 0.5rem;
    cursor: pointer;
  }
/* END_BLOCK:contact-form */

/* START_BLOCK:countdown-timer (INDEX:140) */
.countdown-block {
    display: flex;
    align-items: center;
    padding-top: var(--countdown-pt, 0);
    padding-bottom: var(--countdown-pb, 0);
    padding-left: var(--countdown-pl, 0);
    padding-right: var(--countdown-pr, 0);
  }

  @media screen and (max-width: 749px) {
    .countdown-block {
      padding-top: calc(var(--countdown-pt, 0) * var(--countdown-mobile-scale, 0.8));
      padding-bottom: calc(var(--countdown-pb, 0) * var(--countdown-mobile-scale, 0.8));
      padding-left: calc(var(--countdown-pl, 0) * var(--countdown-mobile-scale, 0.8));
      padding-right: calc(var(--countdown-pr, 0) * var(--countdown-mobile-scale, 0.8));
    }
  }

  .countdown-block .d-flex,
  .countdown-block .countdown-timer-inner {
    display: flex;
    align-items: center;
  }

  .countdown-block .countdown__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .countdown-block .countdown__digit {
    color: var(--color-foreground);
  }

  /* --- Boxed style --- */

  .countdown-block--boxed .countdown-item {
    padding: 0.3rem 0.7rem;
    text-align: center;
    border-radius: 0.5rem;
    position: relative;
    border: 0.1rem solid rgb(from var(--color-foreground) r g b / 19%);
    min-width: 4.5rem;
  }

  .countdown-block--boxed .countdown-item + .countdown-item::before {
    position: absolute;
    content: ":";
    left: calc(var(--countdown-gap, 1rem) / -2);
    top: 50%;
    font-size: 3rem;
    transform: translate(-50%, -50%);
    color: var(--color-foreground);
  }

  .countdown-block--boxed.rte .countdown__digit {
    font-size: 1.6rem;
    line-height: 2.5rem;
  }

  .countdown-block--boxed .countdown__labels {
    font-weight: 500;
    text-transform: uppercase;
    font-size: 1.3rem;
    line-height: 2rem;
  }

  .countdown-block--box-square .countdown-item {
    border-radius: 0;
  }

  @media screen and (min-width: 750px) {
    .countdown-block--boxed .countdown-item {
      padding: 0.5rem 0.8rem;
      min-width: 5rem;
    }
  }

  @media screen and (min-width: 992px) {
    .countdown-block--boxed .countdown-item {
      padding: 0.8rem 1rem;
      min-width: 8.5rem;
    }
    .countdown-block--boxed.rte .countdown__digit {
      font-size: 2.4rem;
    }
    .countdown-block--boxed .countdown__labels {
      font-size: 1.5rem;
    }
  }

  @media screen and (min-width: 1200px) {
    .countdown-block--boxed .countdown-item {
      padding: 0.6rem 1.2rem;
      min-width: 8rem;
    }
    .countdown-block--boxed.rte .countdown__digit {
      font-size: 2.6rem;
    }
    .countdown-block--boxed .countdown__labels {
      font-size: 1.6rem;
    }
  }

  /* --- Divider style --- */

  .countdown-block--divider .countdown-item + .countdown-item {
    border-inline-start: 0.1rem solid rgb(from var(--color-foreground) r g b / 19%);
    padding-inline-start: calc(var(--countdown-gap, 1rem) / 2);
  }

  .countdown-block--divider .countdown__inner {
    gap: 0.5rem;
  }

  .countdown-block--divider.rte .countdown__digit {
    font-size: 2rem;
    line-height: 1.2;
  }

  .countdown-block--divider .countdown__labels {
    font-weight: 500;
    text-transform: uppercase;
    font-size: 1.3rem;
  }

  @media screen and (min-width: 992px) {
    .countdown-block--divider.rte .countdown__digit {
      font-size: 2.4rem;
    }
    .countdown-block--divider .countdown__labels {
      font-size: 1.5rem;
    }
  }

  @media screen and (min-width: 1200px) {
    .countdown-block--divider.rte .countdown__digit {
      font-size: 2.6rem;
    }
    .countdown-block--divider .countdown__labels {
      font-size: 1.6rem;
    }
  }

  /* --- Minimal style --- */

  .countdown-block--minimal .countdown__inner {
    gap: 0.5rem;
  }

  .countdown-block--minimal.rte .countdown__digit {
    font-size: 2rem;
  }

  /* --- Label position --- */
  .countdown-block--label-top .countdown__inner {
    flex-direction: column-reverse;
  }

  /* --- Label text transform --- */
  .countdown-block--label-uppercase .countdown__labels {
    text-transform: uppercase;
  }

  /* --- Typography: custom preset only --- */
  .custom-typography .countdown__digit {
    font-size: var(--custom-font-size);
    font-weight: var(--custom-font-weight);
    line-height: var(--custom-line-height);
    letter-spacing: var(--custom-letter-spacing);
  }

  /* --- Digit size modifiers: sm / md / lg ---
     Chain: .countdown-block → .countdown-digits-* → target
     = specificity (0,3,0), beats rte preset rules by source order  */

  /* Small */
  .countdown-block .countdown-digits-sm .countdown__digit  { font-size: 1.4rem; }
  .countdown-block .countdown-digits-sm .countdown__labels { font-size: 0.9rem; }
  .countdown-block--boxed.countdown-digits-sm .countdown-item { min-width: 3.5rem; }

  @media screen and (min-width: 750px) {
    .countdown-block .countdown-digits-sm .countdown__digit  { font-size: 1.6rem; }
    .countdown-block--boxed.countdown-digits-sm .countdown-item { min-width: 4rem; }
  }
  @media screen and (min-width: 992px) {
    .countdown-block .countdown-digits-sm .countdown__digit  { font-size: 1.8rem; }
    .countdown-block .countdown-digits-sm .countdown__labels { font-size: 1.1rem; }
    .countdown-block--boxed.countdown-digits-sm .countdown-item { min-width: 5rem; }
  }
  @media screen and (min-width: 1200px) {
    .countdown-block .countdown-digits-sm .countdown__digit  { font-size: 2rem; }
    .countdown-block--boxed.countdown-digits-sm .countdown-item { min-width: 5.5rem; }
  }

  /* Medium (default) */
  .countdown-block .countdown-digits-md .countdown__digit  { font-size: 1.8rem; }
  .countdown-block .countdown-digits-md .countdown__labels { font-size: 1.1rem; }
  .countdown-block--boxed.countdown-digits-md .countdown-item { min-width: 4.5rem; }

  @media screen and (min-width: 750px) {
    .countdown-block .countdown-digits-md .countdown__digit  { font-size: 2.2rem; }
    .countdown-block--boxed.countdown-digits-md .countdown-item { min-width: 5rem; }
  }
  @media screen and (min-width: 992px) {
    .countdown-block .countdown-digits-md .countdown__digit  { font-size: 2.6rem; }
    .countdown-block .countdown-digits-md .countdown__labels { font-size: 1.4rem; }
    .countdown-block--boxed.countdown-digits-md .countdown-item { min-width: 7rem; }
  }
  @media screen and (min-width: 1200px) {
    .countdown-block .countdown-digits-md .countdown__digit  { font-size: 3rem; }
    .countdown-block--boxed.countdown-digits-md .countdown-item { min-width: 7.5rem; }
  }

  /* Large */
  .countdown-block .countdown-digits-lg .countdown__digit  { font-size: 2.4rem; }
  .countdown-block .countdown-digits-lg .countdown__labels { font-size: 1.3rem; }
  .countdown-block--boxed.countdown-digits-lg .countdown-item { min-width: 5.5rem; }

  @media screen and (min-width: 750px) {
    .countdown-block .countdown-digits-lg .countdown__digit  { font-size: 3rem; }
    .countdown-block--boxed.countdown-digits-lg .countdown-item { min-width: 7rem; }
  }
  @media screen and (min-width: 992px) {
    .countdown-block .countdown-digits-lg .countdown__digit  { font-size: 3.8rem; }
    .countdown-block .countdown-digits-lg .countdown__labels { font-size: 1.6rem; }
    .countdown-block--boxed.countdown-digits-lg .countdown-item { min-width: 9.5rem; }
  }
  @media screen and (min-width: 1200px) {
    .countdown-block .countdown-digits-lg .countdown__digit  { font-size: 4.4rem; }
    .countdown-block--boxed.countdown-digits-lg .countdown-item { min-width: 10rem; }
  }

  /* Hide units and labels via CSS class */
  .countdown-block--hide-days .countdown-item.Days { display: none; }
  .countdown-block--hide-hours .countdown-item.Hrs { display: none; }
  .countdown-block--hide-minutes .countdown-item.Min { display: none; }
  .countdown-block--hide-seconds .countdown-item.Sec { display: none; }
  .countdown-block--hide-labels .countdown__labels { display: none; }
  .countdown-block--hide-separator .countdown-item + .countdown-item::before { display: none; }
  .countdown-block--boxed:is(.h1,.h2, .h3,.h4,.h5,.h6) {
    margin-block-end: 0;
  }
/* END_BLOCK:countdown-timer */

/* START_BLOCK:counter-up (INDEX:141) */
counter-up {
    display: block;
    text-align: var(--counter-up-text-align, center);
  }
  .counter-up__number {
    display: flex;
    align-items: baseline;
    justify-content: var(--counter-up-align, center);
  }
  .counter-up__prefix,
  .counter-up__suffix {
    flex-shrink: 0;
  }
  .counter-up__value {
    display: inline-flex;
    vertical-align: baseline;
  }
  .counter__group {
    display: inline-block;
    height: 1lh;
    overflow: clip;
    line-height: inherit;
    padding-inline: 0.15em;
    margin-inline: -0.15em;
  }
  .counter__track {
    display: flex;
    flex-direction: column;
    transition: transform var(--counter-duration, 2000ms) cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--counter-duration-offset, 0ms);
  }
  .counter__digit {
    line-height: inherit;
  }
  .counter__char {
    display: inline-block;
  }
  counter-up.is-playing .counter__track {
    transform: translateY(calc(-1lh * var(--counter-steps)));
  }
  .counter-up__heading {
    margin-top: 0.8rem;
    margin-bottom: 0;
  }

  @media screen and (max-width: 749px) {
    counter-up {
      text-align: var(--counter-up-text-align-mobile, var(--counter-up-text-align, center));
    }
    .counter-up__number {
      justify-content: var(--counter-up-align-mobile, var(--counter-up-align, center));
    }
  }
/* END_BLOCK:counter-up */

/* START_BLOCK:gyanpradip-filters (INDEX:143) */
/* Filter / facets / price-widget / layout-switcher CSS.
     Relocated from sections/gyanpradip-main-collection.liquid inline <style> so filter
     styling lives with the module that owns the markup.
     The only remaining dynamic value is the vertical "Sidebar gap" (still an inline
     <style> above); everything else is static and lives here.
     Spec: blueprint/collection-template/MAIN_COLLECTION_PRODUCT_CARD_MIGRATION_PLAN.md section 8 */

  /* Checked / active accent = theme text colour (--color-foreground). Consumed by the
     checked checkbox, the availability toggle and the price slider fill/handles.
     Spec: blueprint/collection-filter/FILTER_COLOR_SETTINGS_SIMPLIFICATION_PLAN.md */
  .gyanpradip-filters-container {
    --gyanpradip-facet-accent: var(--color-foreground);
  }
  .gyanpradip-filters-container .gyanpradip-filter-checked-box {
    --color-background: var(--color-foreground);
  }

  /* Filter mobile/desktop split — tablet is treated as mobile.
     The drawer (mobile) filter UI shows at ≤991px; the desktop UI (vertical
     sidebar, or the drawer-bar Sort) shows only at ≥992px. These mirror the
     theme's global small-hide / medium-hide+large-up-hide utilities but carry
     the filter's own 991/992 boundary so the whole collection-filter experience
     switches together. Swap in place of those global utilities on filter markup:
       small-hide (desktop-only)              → gyanpradip-filter-desktop-only
       medium-hide large-up-hide (mobile-only) → gyanpradip-filter-mobile-only */
  @media screen and (max-width: 991px) {
    .gyanpradip-filter-desktop-only {
      display: none !important;
    }
  }
  @media screen and (min-width: 992px) {
    .gyanpradip-filter-mobile-only {
      display: none !important;
    }
  }

  /* Price filter widget */
  .gyanpradip-price-widget {
    display: flex;
    align-items: center;
  }
  .gyanpradip-price-widget > div {
    flex-grow: 1;
  }
  .price__divider {
    padding: 0 10px;
    margin-top: 27px;
    text-align: center;
  }
  .input__field.gyanpradip-price-filter-input {
    padding-left: 20px;
  }
  .widget__action_display {
    border-bottom: 1px solid rgb(from var(--color-foreground) r g b / 20%);
    padding-bottom: 10px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
  }
  .single__widget {
    width: 100%;
  }
  .single__widget details[open] > summary .icon-caret {
    transform: rotate(180deg);
  }
  .single__widget summary .icon-caret {
    right: 0;
    transition: transform 0.3s ease;
  }
  input.gyanpradip-price-filter-input::-webkit-outer-spin-button,
  input.gyanpradip-price-filter-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  input.gyanpradip-price-filter-input[type="number"] {
    -moz-appearance: textfield;
  }
  input.gyanpradip-price-filter-input::-webkit-input-placeholder {
    color: #ccc;
  }
  input.gyanpradip-price-filter-input:-ms-input-placeholder {
    color: #ccc;
  }
  input.gyanpradip-price-filter-input::placeholder {
    color: #ccc;
  }
  .price__widget .field-currency {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-55%);
    font-size: 16px;
  }

  /* Active facet pills */
  span.active-facets__button-inner:hover {
    background: #000;
    color: #fff;
  }
  span.active-facets__button-inner:hover svg path {
    stroke: #fff;
  }
  .collection-filters__field .select svg {
    right: 15px;
  }

  /* Layout switcher chrome (icons colour from --color-foreground; see .gyanpradip-grid-switcher rules) */
  .gird__column_icon svg {
    height: 15px;
  }
  a.gird__column_icon {
    line-height: 1;
  }
  .product__grid_column_buttons {
    line-height: 1;
    flex-shrink: 0;
  }
  button.gird__column_icon {
    background: transparent;
    border: none;
    padding: 8px;
    border-radius: 3px;
  }

  /* Filter offcanvas / sidebar */
  .offcanvas-filter-sidebar {
    max-width: 350px;
    display: block;
    position: fixed;
    top: 0;
    background: #fff;
    left: 0;
    padding: 30px 20px;
    overflow: auto;
    height: 100%;
    transition: all 0.3s ease 0s;
    z-index: 99;
    transform: translateX(-100%);
    visibility: hidden;
    opacity: 0;
  }
  .offcanvas-filter-sidebar.active {
    transform: translateX(0);
    visibility: visible;
    opacity: 1;
  }
  .collection_filter_sidebar {
    margin-top: 20px;
    display: block;
  }

  /* ===== migrated from assets/gyanpradip-collection-page.css (filter/price portion) ===== */
/* Factes filter custom css */
.disclosure-has-popup[open] > summary + * {
  z-index: 99;
}
@media screen and (max-width: 991px) {
  .gyanpradip-filters-container {
    margin-bottom: 3rem;
  }
}
.product-count__text.mt-10 {
  margin-top: 10px;
}
.price--filter__divider {
  width: 60%;
  height: 1px;
  background: rgb(from var(--color-foreground) r g b / 3%);
  display: block;
  margin: 0 auto;
  min-width: 2rem;
}
input.gyanpradip-price-filter-input[type="number"] {
  border-radius: 1rem;
}
.product-count-vertical,
.product-count {
  position: relative;
}
/* Toolbar */

.product__filter--toolbar {
  padding: 1rem 3rem;
  border-radius: 0.5rem;
}
/* Price slider css  */
.gyanpradip-slider-value {
  position: relative;
  width: 100%;
  height: 6px;
  margin: 2rem 0;
}

.gyanpradip-slider-value input[type="number"] {
  border: 1px solid rgb(from var(--color-foreground) r g b / 15%);
  text-align: center;
  font-size: 1.6em;
  -moz-appearance: textfield;
}

.gyanpradip-slider-value input[type="number"]::-webkit-outer-spin-button,
.gyanpradip-slider-value input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.gyanpradip-slider-value input[type="number"]:invalid,
.gyanpradip-slider-value input[type="number"]:out-of-range {
  border: 2px solid #ff6347;
}

.gyanpradip-slider-value input[type="range"] {
  -webkit-appearance: none;
  position: absolute;
  width: 100%;
  height: 6px;
  top: -1px;
  left: 0;
  background: transparent;
  pointer-events: none;
}

.gyanpradip-slider-value input[type="range"]:focus {
  outline: none;
  box-shadow: 0 0 0 0 var(--color-foreground);
}

/* Price range bar - background track */
.gyanpradip-price-range-bar {
  position: absolute;
  width: 100%;
  height: 4px;
  left: 0;
  top: 2px;
  background: rgb(from var(--color-foreground) r g b / 15%);
  border-radius: 2px;
}

/* Active range indicator */
.gyanpradip-slider-value::before {
  content: "";
  position: absolute;
  height: 4px;
  top: 2px;
  background: var(--color-foreground);
  width: var(--width);
  left: var(--left);
  border-radius: 2px;
  z-index: 1;
}

/* Webkit (Chrome, Safari, Edge) */
.gyanpradip-slider-value input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  background: transparent;
  border-radius: 2px;
}

.gyanpradip-slider-value input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-background);
  border: 2px solid var(--color-foreground);
  cursor: pointer;
  margin-top: -7px;
  position: relative;
  z-index: 3;
  pointer-events: auto;
  box-shadow: 0 1px 4px rgb(from var(--color-foreground) r g b / 20%);
}

.gyanpradip-slider-value input[type="range"]::-webkit-slider-thumb:hover {
  box-shadow: 0 2px 6px rgb(from var(--color-foreground) r g b / 30%);
}

/* Firefox */
.gyanpradip-slider-value input[type="range"]::-moz-range-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  background: transparent;
  border-radius: 2px;
}

.gyanpradip-slider-value input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-background);
  border: 2px solid var(--color-foreground);
  cursor: pointer;
  position: relative;
  z-index: 3;
  pointer-events: auto;
  box-shadow: 0 1px 4px rgb(from var(--color-foreground) r g b / 20%);
}

.gyanpradip-slider-value input[type="range"]::-moz-range-thumb:hover {
  box-shadow: 0 2px 6px rgb(from var(--color-foreground) r g b / 30%);
}

/* IE/Edge */
.gyanpradip-slider-value input[type="range"]::-ms-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}

.gyanpradip-slider-value input[type="range"]::-ms-fill-lower,
.gyanpradip-slider-value input[type="range"]::-ms-fill-upper {
  background: transparent;
  border-radius: 2px;
}

.gyanpradip-slider-value input[type="range"]::-ms-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-background);
  border: 2px solid var(--color-foreground);
  cursor: pointer;
  position: relative;
  z-index: 3;
  pointer-events: auto;
  box-shadow: 0 1px 4px rgb(from var(--color-foreground) r g b / 20%);
}

.gyanpradip-slider-value input[type="range"]::-ms-thumb:hover {
  box-shadow: 0 2px 6px rgb(from var(--color-foreground) r g b / 30%);
}
.input__field.gyanpradip-price-filter-input {
  border-radius: 0;
  height: 40px;
  font-size: 1.4rem;
}
.gyanpradip-price-filter-group {
  flex-grow: 1;
  width: 50%;
}
.gyanpradip-price-widget {
  padding-bottom: 1rem;
}
.single__widget_inner {
  margin-top: 1rem;
}
.filter__price--display {
  padding-top: 1.5rem;
  gap: 1rem;
}

/* ============================================
   Price Input Fields (pill row, below slider)
   ============================================ */

.gyanpradip-price-inputs {
  display: flex;
  gap: 1.2rem;
  margin: 0;
}

.gyanpradip-price-input-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* MIN/MAX labels are hidden visually (design shows none) but kept for screen readers. */
.gyanpradip-price-input-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

.gyanpradip-price-input-field {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border: none;
  border-radius: 2.7rem;
  padding: 0 2rem;
  height: 5.4rem;
  background: rgb(from var(--color-foreground) r g b / 5%);
  transition: box-shadow 0.2s ease;
}

.gyanpradip-price-input-field:focus-within {
  border: none;
  box-shadow: 0 0 0 0.2rem rgb(from var(--color-foreground) r g b / 18%);
}

.gyanpradip-price-input-currency {
  font-size: 1.4rem;
  color: rgb(from var(--color-foreground) r g b / 60%);
  margin: 0;
  flex: none;
  font-weight: 500;
}

/* Scoped under the wrapper (0,2,0) to outrank the global `input[type="text"]`
   rule (0,1,1) in base.css, which would otherwise force a visible border,
   opaque background and padding onto the field. */
.gyanpradip-price-input-field .gyanpradip-price-input {
  flex: 0 1 auto;
  /* Transparent border for layout consistency — never a visible outline. */
  border: 1px solid transparent;
  background: transparent;
  box-shadow: none;
  font-size: 1.4rem;
  color: var(--color-foreground);
  padding: 0;
  width: 100%;
  min-width: 0;
  height: auto;
  font-weight: 500;
  text-align: center;
}

/* Neutralise the global `input:focus` / `*:focus-visible` box-shadow (base.css) —
   the focus indicator lives on the .gyanpradip-price-input-field wrapper (:focus-within),
   not on the input itself. */
.gyanpradip-price-input-field .gyanpradip-price-input:focus,
.gyanpradip-price-input-field .gyanpradip-price-input:focus-visible {
  outline: none;
  border-color: transparent;
  box-shadow: none;
  background: transparent;
}

/* Remove number input spinners */
.gyanpradip-price-input::-webkit-outer-spin-button,
.gyanpradip-price-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.gyanpradip-price-input[type="number"] {
  -moz-appearance: textfield;
}

/* Validation states */
.gyanpradip-price-input-field.is-invalid {
  border-color: #dc3545;
}

.gyanpradip-price-input-field.is-invalid .gyanpradip-price-input {
  color: #dc3545;
}


  /* ===== migrated from assets/gyanpradip-filter-display.css ===== */
.gyanpradip-filters-container {
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-template-rows: repeat(2, auto);
}

.gyanpradip-active-filters-mobile {
  margin-bottom: 0.5rem;
}

.gyanpradip-filters-list {
  overflow-y: auto;
}

@media screen and (min-width: 992px) {
  .gyanpradip-filters-container > * + * {
    margin-top: 0;
  }

  .gyanpradip-filters-form .product-count {
    grid-column-start: 3;
    align-self: flex-start;
  }
}

@media screen and (max-width: 991px) {
  .gyanpradip-filters-container {
    grid-template-columns: auto minmax(0, max-content);
    column-gap: 2rem;
  }
}
.gyanpradip-filter-controls {
  align-items: flex-start;
  display: flex;
  grid-column: 2;
  grid-row: 1;
  padding-left: 2.5rem;
}
@media screen and (min-width: 992px) {
  .gyanpradip-filter-controls {
    padding-left: 3rem;
  }
}
.gyanpradip-filter-controls-label {
  display: block;
  color: var(--color-foreground);
  font-size: 1.4rem;
  margin: 0 1rem 0 0;
}
.gyanpradip-filter-controls__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.4rem;
  cursor: pointer;
  height: 4.5rem;
  padding: 0 1.5rem;
  min-width: 25rem;
  margin-top: 2.4rem;
  border: 0.1rem solid rgb(from var(--color-foreground) r g b / 55%);
}

.gyanpradip-filter-controls__summary::after {
  position: static;
}

.gyanpradip-filter-controls-field {
  align-items: center;
  display: flex;
  flex-grow: 1;
  justify-content: flex-end;
}

.gyanpradip-filter-controls-field .select {
  width: auto;
  /* Sort By pill — background + text follow the global input color scheme
     (--color-input-*). No border/hover styling by design. */
  display: inline-flex;
  align-items: center;
  background: var(--color-input-background);
  color: var(--color-input-text);
  border-radius: 0.8rem;
}

.gyanpradip-filter-controls-field .select:after,
.gyanpradip-filter-controls-field .select:before,
.gyanpradip-filters-sort .select:after,
.gyanpradip-filters-sort .select:before {
  content: none;
}

.gyanpradip-filter-controls-field .select__select,
.gyanpradip-filters-sort .select__select {
  border-radius: 0;
  min-width: auto;
  min-height: auto;
  transition: none;
  border: none;
}

.gyanpradip-filter-controls button {
  margin-left: 2.5rem;
}

.gyanpradip-filter-sort {
  background-color: transparent;
  border: 0;
  border-radius: 0.8rem;
  font-size: 1.4rem;
  height: auto;
  margin: 0;
  padding: 8px 40px 7px 14px !important;
  color: var(--color-input-text);
  cursor: pointer;
}
.gyanpradip-filter-sort + .gyanpradip-icon-caret {
  right: 1rem;
}

@media screen and (forced-colors: active) {
  .gyanpradip-filter-sort {
    border: none;
  }
}

.gyanpradip-filter-sort,
.gyanpradip-filter-sort:hover {
  box-shadow: none;
  filter: none;
  transition: none;
}

.gyanpradip-filters-sort .select__select:focus-visible {
  outline: 0.2rem solid rgb(from var(--color-foreground) r g b / 5%);
  outline-offset: 0.3rem;
  box-shadow: 0 0 0 0.3rem var(--color-background),
    0 0 0.5rem 0.4rem rgb(from var(--color-foreground) r g b / 3%);
}

.gyanpradip-filters-sort .select__select.focused,
.no-js .gyanpradip-filters-sort .select__select:focus {
  outline: 0.2rem solid rgb(from var(--color-foreground) r g b / 5%);
  outline-offset: 0.3rem;
  box-shadow: 0 0 0 0.3rem var(--color-background),
    0 0 0.5rem 0.4rem rgb(from var(--color-foreground) r g b / 3%);
}

.gyanpradip-filter-sort:focus-visible {
  outline: 0.2rem solid rgb(from var(--color-foreground) r g b / 5%);
}

.gyanpradip-filter-sort.focused,
.no-js .gyanpradip-filter-sort:focus {
  outline: 0.2rem solid rgb(from var(--color-foreground) r g b / 5%);
  outline-offset: 1rem;
  box-shadow: 0 0 0 1rem var(--color-background),
    0 0 0.2rem 1.2rem rgb(from var(--color-foreground) r g b / 3%);
}

.no-js .gyanpradip-filter-sort:focus:not(:focus-visible),
.no-js .gyanpradip-filters-sort .select__select:focus:not(:focus-visible) {
  outline: 0;
  box-shadow: none;
}

.gyanpradip-filters {
  display: block;
  grid-column-start: span 2;
}

.gyanpradip-filters-heading {
  display: block;
  color: rgb(from var(--color-foreground) r g b / 85%);
  font-size: 1.4rem;
  margin: -1.5rem 2rem 0 0;
}
.gyanpradip-filters-reset {
  margin-left: auto;
  text-decoration: none;
}

.gyanpradip-filters-summary {
  color: rgb(from var(--color-foreground) r g b / 75%);
  font-size: 1.6rem;
  padding: 0 1.75rem 0 0;
  margin-bottom: 1.5rem;
  cursor: pointer;
}

.gyanpradip-filters-summary:hover {
  color: var(--color-foreground);
}

.gyanpradip-filters-summary span {
  transition: text-decoration var(--duration-short) ease;
  font-weight: 600;
  color: var(--color-foreground);
}
.gyanpradip-filters-summary span.gyanpradip-filters-selected {
  color: rgb(from var(--color-foreground) r g b / 75%);
}
.gyanpradip-filters-summary:hover span {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.gyanpradip-filter-layout-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  text-align: center;
  padding: 1.5rem 0;
  gap: 1.5rem 1rem;
}
.gyanpradip-filter-item {
  display: flex;
  align-items: center;
  color: var(--color-foreground);
}


/* Hover/focus state */
.gyanpradip-filter-layout-list
  .gyanpradip-filter-label:hover
  .gyanpradip-filter-checkbox-text,
.gyanpradip-filter-layout-list input:focus ~ .gyanpradip-filter-checkbox-text {
  text-decoration: underline;
}

.gyanpradip-filter-controls select:hover {
    background-color: transparent;
}

.gyanpradip-filter-layout-grid > * {
  align-items: flex-start;
}

.gyanpradip-filter-layout-grid .gyanpradip-filter-label {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 0;
  height: 100%;
  font-size: 1.3rem;
}

.gyanpradip-filter-item label,
.gyanpradip-filter-item input[type="checkbox"] {
  cursor: pointer;
}

.gyanpradip-filter-checkbox {
  padding: 0;
  flex-grow: 1;
  position: relative;
  font-size: 1.5rem;
  display: flex;
  word-break: break-word;
  line-height: normal;
}

/* Hover, active, and focus states */
:is(
    .gyanpradip-filter-label:hover,
    .gyanpradip-filter-label.active,
    .gyanpradip-filter-label:has(:focus-visible)
  ) {
  color: var(--color-foreground);
}

/* Focus states for older browsers */
@supports not selector(:has(a, b)) {
  .gyanpradip-filter-label:focus-within {
    color: var(--color-foreground);
  }
}

.gyanpradip-filter-checkbox input[type="checkbox"]:not(.swatch-input__input) {
  position: absolute;
  opacity: 1;
  width: 1.6rem;
  height: 1.6rem;
  left: -0.4rem;
  z-index: -1;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
}
.gyanpradip-filter-layout-grid input[type="checkbox"] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  margin: 0;
  opacity: 0;
}

.gyanpradip-filters-visual-display-wrapper {
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}
.no-js .gyanpradip-filter-checkbox input[type="checkbox"] {
  z-index: 0;
}

.gyanpradip-filter-checkbox--disabled {
  color: rgb(from var(--color-foreground) r g b / 4%);
}

.gyanpradip-filters-price {
  display: flex;
  padding: 2rem;
}

.gyanpradip-filters-price .field + .field-currency {
  margin-left: 2rem;
}

.gyanpradip-filters-price .field {
  align-items: center;
}

.gyanpradip-filters-price .field-currency {
  align-self: center;
  margin-right: 0.6rem;
}

.gyanpradip-filters-price .field__label {
  left: 1.5rem;
}

button.gyanpradip-filters-button {
  min-height: 0;
  margin: 0 0 0 0.5rem;
  box-shadow: none;
  padding-top: 1.4rem;
  padding-bottom: 1.4rem;
}

.gyanpradip-filters-button-no-js {
  transform: translateY(-0.6rem);
}

.gyanpradip-active-filters {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: -0.5rem;
}

.gyanpradip-active-filters-button {
  display: block;
  margin-right: 1.5rem;
  margin-top: 1.5rem;
  padding-left: 0.2rem;
  padding-right: 0.2rem;
  text-decoration: none;
}

span.gyanpradip-active-filters-button-inner {
  color: var(--color-foreground);
  box-shadow: 0 0 0 0.1rem var(--color-foreground);
  border-radius: 2.6rem;
  font-size: 1rem;
  min-height: 0;
  min-width: 0;
  padding: 1rem 1.2rem;
  display: flex;
  align-items: stretch;
}

span.gyanpradip-active-filters-button-inner:before,
span.gyanpradip-active-filters-button-inner:after {
  display: none;
}

.gyanpradip-active-filters-button-wrapper {
  align-items: center;
  display: flex;
  justify-content: center;
  padding-top: 1.5rem;
}

.gyanpradip-active-filters-button-wrapper * {
  font-size: 1rem;
}

@media screen and (min-width: 992px) {
  .gyanpradip-active-filters-button {
    margin-right: 1.5rem;
  }

  .gyanpradip-active-filters-button-wrapper *,
  span.gyanpradip-active-filters-button-inner {
    font-size: 1.3rem;
  }
}

@media screen and (max-width: 991px) {
  .gyanpradip-active-filters {
    margin: 0 -1.2rem -1.2rem;
  }

  .gyanpradip-active-filters-button,
  .gyanpradip-active-filters-button-remove {
    margin: 0;
    padding: 1.2rem;
  }

  span.gyanpradip-active-filters-button-inner {
    padding-bottom: 0.3rem;
    padding-top: 0.3rem;
  }

  .gyanpradip-active-filters-button-wrapper {
    padding-top: 0;
    margin-left: 1.2rem;
  }
}

.gyanpradip-active-filters-button:hover .gyanpradip-active-filters-button-inner {
  box-shadow: 0 0 0 0.2rem var(--color-foreground);
}

.gyanpradip-active-filters-button--light .gyanpradip-active-filters-button-inner {
  box-shadow: 0 0 0 0.1rem rgb(from var(--color-foreground) r g b / 2%);
  border-color: transparent;
}

.gyanpradip-active-filters-button--light:hover
  .gyanpradip-active-filters-button-inner {
  box-shadow: unset;
}

a.gyanpradip-active-filters-button:focus-visible {
  outline: none;
  box-shadow: none;
}

a.gyanpradip-active-filters-button.focused,
.no-js a.gyanpradip-active-filters-button:focus {
  outline: none;
  box-shadow: none;
}

a.gyanpradip-active-filters-button:focus-visible
  .gyanpradip-active-filters-button-inner {
  box-shadow: 0 0 0 0.1rem rgb(from var(--color-foreground) r g b / 2%),
    0 0 0 0.2rem var(--color-background), 0 0 0 0.4rem var(--color-foreground);
  outline: none;
}

a.gyanpradip-active-filters-button.focused .gyanpradip-active-filters-button-inner,
.no-js
  a.gyanpradip-active-filters-button:focus
  .gyanpradip-active-filters-button-inner {
  box-shadow: 0 0 0 0.1rem rgb(from var(--color-foreground) r g b / 2%),
    0 0 0 0.2rem var(--color-background), 0 0 0 0.4rem var(--color-foreground);
  outline: none;
}

.gyanpradip-active-filters-button svg {
  align-self: center;
  flex-shrink: 0;
  margin-left: 0.6rem;
  margin-right: -0.2rem;
  pointer-events: none;
  width: 1rem;
}

@media all and (min-width: 992px) {
  .gyanpradip-active-filters-button svg {
    margin-right: -0.4rem;
    margin-top: 0.1rem;
    width: 1rem;
  }
}

.gyanpradip-active-filters gyanpradip-filter-remove:only-child {
  display: none;
}

/* Drawer-desktop pills have no clear-all button, so a single active filter is the
   only child. Don't let the :only-child rule above (meant to hide a lone clear-all)
   hide a real pill — the empty state is handled by :has() on the container. */
.gyanpradip-filters-pill
  .gyanpradip-active-filters
  gyanpradip-filter-remove:only-child {
  display: inline;
}

.gyanpradip-filters-vertical
  .gyanpradip-active-filters
  .gyanpradip-active-filters-vertical:only-child
  > gyanpradip-filter-remove {
  display: none;
}

.gyanpradip-filters-vertical .gyanpradip-active-filters-vertical {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.gyanpradip-filters-vertical
  .gyanpradip-active-filters-vertical
  .gyanpradip-active-filters-button-wrapper {
  padding-top: 0;
  display: flex;
  align-items: flex-start;
}

.gyanpradip-filters-vertical .gyanpradip-active-filters-button {
  margin-top: 0;
}

.gyanpradip-active-filters-button.disabled,
.gyanpradip-filters-mobile-clear.disabled {
  pointer-events: none;
}

.gyanpradip-filters-mobile-clear-wrapper {
  align-items: center;
  display: flex;
  justify-content: center;
}

.gyanpradip-filters-mobile {
  position: fixed;
  top: 0;
  inset-inline: 0;
  bottom: 0;
  z-index: 100;
  background-color: transparent;
  pointer-events: none;
}

/* Drawer stacking fix — lift the section's root stacking context above the site chrome
   WHILE the drawer is open.

   Root cause: the drawer's wrapper (.gyanpradip-filters-section-wrapper) also carries
   .section-container, which is `position: relative; z-index: 1` (assets/base.css).
   That makes the whole collection section a root-level stacking context pinned at
   z-index 1 — BELOW the announcement bar (z-index: 4), sticky header (98), and banner.
   Because the drawer (position: fixed) is trapped inside that context, no z-index on
   the panel itself can raise it above the chrome; the chrome paints over the open drawer.

   Fix: while the drawer <details> is open, promote the wrapper's own z-index to a top
   tier so the entire section — backdrop + panel included — sits above all interactive
   chrome (predictive search = 998) and below the skip-to-content link (9999). When
   closed it reverts to z-index 1, so the sticky header stacks normally again.

   We key off the root drawer's `[open]` attribute (scoped to .gyanpradip-filters-mobile-
   disclosure, NOT the nested .gyanpradip-filter-details groups that also render open),
   because `open` persists for the FULL visible lifetime — including the 300ms slide-out
   close animation, after which the JS removes it. Keying off .gyanpradip-offcanvas--opening
   instead would drop the z-index at the START of the close animation and briefly flash
   the header over the still-closing drawer. `:has()` is already used throughout this
   block; specificity (0,2,0) beats .section-container (0,1,0) with no !important. */
.gyanpradip-filters-section-wrapper:has(.gyanpradip-filters-mobile-disclosure[open]) {
  z-index: 1000;
}

.gyanpradip-filters-mobile-disclosure {
  display: flex;
}

.gyanpradip-filters-mobile-inner {
  background-color: var(--color-background);
  /* Smaller right gutter (was 5rem) → wider drawer, so the footer's equal-width
     Reset all / Apply buttons have enough room to sit on a single line. */
  width: calc(100% - 3rem);
  height: 100%;
  overflow: hidden;
  pointer-events: all;
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  max-width: 37.5rem;
  display: flex;
  flex-direction: column;
  border-top-right-radius: 2rem;
  border-bottom-right-radius: 2rem;
}

/* Drawer slide-in animation from left */
.js .disclosure-has-popup .gyanpradip-filters-mobile-inner {
  transform: translateX(-100%);
}

.js
  .disclosure-has-popup.gyanpradip-offcanvas--opening
  .gyanpradip-filters-mobile-inner {
  transform: translateX(0);
}
.gyanpradip-filters-mobile__arrow svg {
  position: absolute;
  height: auto;
  right: 0;
  top: calc(50% - 0.2rem);
  width: 1.2rem;
}
.gyanpradip-filters-header {
  border-bottom: 0.1rem solid rgb(from var(--color-foreground) r g b / 8%);
  padding: 1rem 2.5rem;
  text-align: center;
  display: flex;
  position: sticky;
  top: 0;
  z-index: 2;
}

.gyanpradip-filters-header-inner {
  flex-grow: 1;
  position: relative;
}

.gyanpradip-filters-mobile-info {
  padding: 0 2.6rem;
}

.gyanpradip-filters-mobile-heading {
  font-size: calc(var(--font-heading-scale) * 1.4rem);
  margin: 0;
}

.gyanpradip-filters-count {
  font-size: 1.3rem;
  margin: 0;
  flex-grow: 1;
}

.gyanpradip-filters-drawer-trigger-wrapper {
  display: inline-block;
}

.gyanpradip-filters-drawer-trigger {
  text-align: left;
  width: 100%;
  display: flex;
  align-items: center;
  color: rgb(from var(--color-link) r g b / calc(var(--alpha-link) * 100%));
  background: rgb(from var(--color-foreground) r g b / 6%);
  padding: 1rem;
  border-radius: 3px;
  cursor: pointer;
}
.gyanpradip-filters-drawer-trigger:hover {
  color: var(--color-link);
}

.gyanpradip-filters-drawer-trigger:hover line,
.gyanpradip-filters-drawer-trigger:hover circle {
  stroke: var(--color-link);
}

.gyanpradip-filters-drawer-trigger-label {
  transition: text-decoration var(--duration-short) ease;
}

.gyanpradip-filters-drawer-trigger:hover .gyanpradip-filters-drawer-trigger-label {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.gyanpradip-filters-drawer-trigger > * + * {
  margin-left: 1rem;
}

.gyanpradip-filters-drawer-trigger svg {
  width: 2rem;
}

.gyanpradip-filters-drawer-trigger line,
.gyanpradip-filters-drawer-trigger circle {
  stroke: rgb(from var(--color-link) r g b / calc(var(--alpha-link) * 100%));
}

.gyanpradip-filters-drawer-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  height: 4.4rem;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.gyanpradip-filters-drawer-close svg {
  width: 1.8rem;
}

.gyanpradip-filters-drawer-close:hover {
  opacity: 0.7;
}

/* Drawer Header - Title and Close Button inline */
.gyanpradip-filters-mobile__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid rgb(from var(--color-foreground) r g b / 10%);
  position: sticky;
  top: 0;
  background: var(--gradient-background);
  z-index: 10;
}

.gyanpradip-filters-mobile__header-inner {
  flex: 1;
  min-width: 0;
}

/* Main scrollable area for filter groups */
.gyanpradip-filters-mobile__main {
  flex: 1;
  overflow-y: scroll;
  min-height: 0;
  /* Firefox - thin subtle scrollbar */
  scrollbar-width: thin;
  scrollbar-color: rgb(from var(--color-foreground) r g b / 15%) transparent;
}

/* Webkit browsers (Chrome, Safari, Edge) - thin subtle scrollbar */
.gyanpradip-filters-mobile__main::-webkit-scrollbar {
  width: 5px;
}

.gyanpradip-filters-mobile__main::-webkit-scrollbar-track {
  background: transparent;
}

.gyanpradip-filters-mobile__main::-webkit-scrollbar-thumb {
  background-color: rgb(from var(--color-foreground) r g b / 15%);
  border-radius: 3px;
}

.gyanpradip-filters-mobile__main::-webkit-scrollbar-thumb:hover {
  background-color: rgb(from var(--color-foreground) r g b / 30%);
}

/* Footer - sticky at bottom of drawer */
.gyanpradip-filters-mobile__footer {
  flex-shrink: 0;
  border-top: 0.1rem solid rgb(from var(--color-foreground) r g b / 8%);
  padding: 2rem;
  display: flex;
  background-color: var(--color-background);
}

.gyanpradip-filters-mobile__footer > * + * {
  margin-left: 1rem;
}

.gyanpradip-filters-mobile__footer > * {
  width: 50%;
}

.gyanpradip-filters-mobile__footer noscript .button {
  width: 100%;
}
/* .gyanpradip-filters-drawer-close {
  align-items: center;
  background-color: transparent;
  font-size: 1.4rem;
  font: inherit;
  letter-spacing: inherit;
  margin-top: 1.5rem;
  padding: 1.2rem 2.6rem;
  text-decoration: none;

  display: grid;
  grid-template-columns: min-content 1fr;
  text-align: start;
} */

.gyanpradip-filters-drawer-close > .gyanpradip-filter-and-helptext {
  grid-column-start: 2;
}

.gyanpradip-filters-drawer-close .gyanpradip-icon-arrow {
  transform: rotate(180deg);
  margin-right: 1rem;
}
.no-js .gyanpradip-filters-drawer-close {
  display: none;
}
.gyanpradip-filter-and-helptext {
  color: rgb(from var(--color-foreground) r g b / 5%);
  font-size: calc(var(--font-heading-scale) * 1.2rem);
  line-height: calc(var(--font-heading-scale) * 1.2rem);
}

.gyanpradip-filters-main {
  padding: 2.7rem 1.5rem 0;
  position: relative;
  z-index: 1;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.gyanpradip-filter-details[open] .gyanpradip-icon-caret {
  transform: rotate(180deg);
}

.no-js .gyanpradip-filter-details {
  border-bottom: 1px solid rgb(from var(--color-foreground) r g b / 4%);
}

.gyanpradip-filters-mobile-highlight {
  opacity: 0;
  visibility: hidden;
}

.gyanpradip-filter-checkbox:checked + .gyanpradip-filters-mobile-highlight {
  visibility: visible;
  opacity: 1;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  display: block;
  background-color: rgb(from var(--color-foreground) r g b / 4%);
}

.gyanpradip-filters-summary {
  padding: 1.3rem 2.5rem;
}

.gyanpradip-filters-summary svg {
  margin-left: auto;
}

.gyanpradip-filters-summary > div,
.gyanpradip-filters-summary > div {
  display: flex;
  align-items: center;
}

.js .gyanpradip-filters-mobile-submenu {
  position: absolute;
  top: 0;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 3;
  transform: translateX(100%);
  visibility: hidden;
  display: flex;
  flex-direction: column;
}

.js details[open] > .gyanpradip-filters-mobile-submenu {
  transition: transform 0.4s cubic-bezier(0.29, 0.63, 0.44, 1),
    visibility 0.4s cubic-bezier(0.29, 0.63, 0.44, 1);
}
.js details[open].gyanpradip-offcanvas--opening > .gyanpradip-filters-mobile-submenu {
  transform: translateX(0);
  visibility: visible;
}
.js .gyanpradip-offcanvas__subpanel .gyanpradip-filters-mobile-submenu {
  overflow-y: auto;
}
.js .gyanpradip-filters-mobile.gyanpradip-offcanvas--subpanel-active {
  visibility: hidden; /* hide menus from screen readers when hidden by submenu */
}
.gyanpradip-filters-mobile-item {
  position: relative;
  padding: 1rem 2rem 1rem 2.5rem;
}
.gyanpradip-filter-layout-grid li.gyanpradip-filter-item {
  padding: 0;
}
input.gyanpradip-filter-checkbox {
  border: 0;
  position: absolute;
  width: 1.6rem;
  height: 1.6rem;
  position: absolute;
  left: 2.1rem;
  top: 1.2rem;
  z-index: 0;
  appearance: none;
  -webkit-appearance: none;
  background-color: transparent;
}
.gyanpradip-filter-label {
  width: 100%;
  transition: background-color 0.2s ease;
  word-break: break-word;
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
}
.gyanpradip-filter-label > svg {
  background-color: var(--color-background);
  position: relative;
  z-index: 2;
  margin-right: 1.2rem;
  flex-shrink: 0;
}
.gyanpradip-filter-label .gyanpradip-icon-checkmark {
  position: absolute;
  top: 2.1rem;
  left: 2.8rem;
  visibility: hidden;
}
input.gyanpradip-filter-checkbox:focus {
  box-shadow: unset;
}
.gyanpradip-filter-label
  > input[type="checkbox"]:checked
  ~ .checkbox__mobile--label
  span.gyanpradip-filter-checked-box {
  opacity: 1;
}
.gyanpradip-filters-mobile-arrow,
.gyanpradip-filters-summary .gyanpradip-icon-caret {
  margin-left: auto;
  display: block;
}
.gyanpradip-filter-label--disabled {
  opacity: 0.5;
}
/* Backdrop overlay is a dedicated element — see the "Drawer backdrop overlay"
   rules further down. The old summary::before overlays were removed. */
.gyanpradip-filters-mobile-label > svg {
  background-color: var(--color-background);
  position: relative;
  z-index: 2;
  margin-right: 1.2rem;
  flex-shrink: 0;
}
ul.gyanpradip-filter-layout {
  padding-block-start: 1.5rem;
  padding-block-end: 1rem;
}
.gyanpradip-filters-mobile-label .gyanpradip-icon-checkmark {
  position: absolute;
  top: 2.1rem;
  left: 2.8rem;
  visibility: hidden;
}
.gyanpradip-filters-mobile__item + .gyanpradip-filters-mobile__item {
  margin-top: 1.2rem;
}
.gyanpradip-filters-mobile-label
  > input[type="checkbox"]:checked
  ~ .checkbox__mobile--label
  span.gyanpradip-filter-checked-box {
  opacity: 1;
}

.gyanpradip-filters-mobile-label--disabled {
  opacity: 0.5;
}

.gyanpradip-filters-mobile-footer {
  border-top: 0.1rem solid rgb(from var(--color-foreground) r g b / 8%);
  padding: 2rem;
  bottom: 0;
  position: sticky;
  display: flex;
  z-index: 2;
  margin-top: auto;
  background-color: var(--color-background);
}

.gyanpradip-filters-mobile-footer > * + * {
  margin-left: 1rem;
}

.gyanpradip-filters-mobile-footer > * {
  width: 50%;
}

.gyanpradip-filters-mobile-footer noscript .button {
  width: 100%;
}

.gyanpradip-filters-sort {
  display: flex;
  justify-content: space-between;
}
.gyanpradip-filters-sort label {
  flex-shrink: 0;
}
.gyanpradip-filters-sort .select {
  width: auto;
}
.no-js .gyanpradip-filters-sort .select {
  position: relative;
  right: -1rem;
}
.gyanpradip-filters-sort .select .gyanpradip-icon-caret {
  right: 0;
}

.gyanpradip-filters-sort .select__select {
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
  filter: none;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  padding-left: 0.5rem;
  padding-right: 1.5rem;
}

.product-count {
  align-self: center;
  position: relative;
  text-align: right;
}

.product-count__text {
  font-size: 1.4rem;
  margin: 0;
}

.product-count__text.loading {
  visibility: hidden;
}

.product-count .loading-overlay__spinner,
.product-count-vertical .loading-overlay__spinner {
  display: none;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1.8rem;
}

.product-count__text.loading + .loading-overlay__spinner {
  display: block;
}

@media screen and (min-width: 992px) {
  .gyanpradip-filters-vertical {
    display: flex;
  }

  .gyanpradip-filters-wrap-vertical {
    border: none;
    margin: 0;
    padding: 0;
  }

  .gyanpradip-filters-form-vertical {
    display: flex;
    flex-direction: column;
    width: 28.5rem;
  }

  .gyanpradip-filters-disclosure-vertical {
    margin-right: 0;
  }

  .gyanpradip-filters-vertical .gyanpradip-filters-summary {
    margin-bottom: 0;
    border-radius: 0.5rem 0.5rem 0 0;
    padding: 1.5rem;
  }

  .gyanpradip-filters-heading--vertical {
    margin: 0 0 1.5rem 0;
    font-size: 1.5rem;
  }

  .gyanpradip-filters-header-vertical {
    padding: 1.5rem 2rem 1.5rem 0;
    font-size: 1.4rem;
  }

  .gyanpradip-filters-display-vertical {
    padding: 1.5rem;
    margin: 0;
  }

  .gyanpradip-filters-vertical .gyanpradip-filters-wrapper {
    padding-right: 2rem;
  }

  .gyanpradip-filters-vertical .gyanpradip-filters-wrapper--no-filters {
    display: none;
  }

  .no-js .gyanpradip-filters-vertical .gyanpradip-filters-wrapper--no-filters {
    display: block;
  }

  .gyanpradip-filters-vertical .gyanpradip-collection-product-grid {
    width: 100%;
  }

  .gyanpradip-filters-vertical-form {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .product-count-vertical {
    margin-left: 2rem;
  }

  .gyanpradip-filters-vertical .gyanpradip-active-filters-button-wrapper {
    margin-bottom: 2rem;
  }

  .gyanpradip-filters-vertical .no-js .gyanpradip-filters-button-no-js {
    transform: none;
    margin-left: 0;
  }

  .gyanpradip-filters-vertical .no-js .gyanpradip-filter-controls-field {
    justify-content: flex-start;
    padding-bottom: 1rem;
    padding-top: 2rem;
  }

  .gyanpradip-filters-vertical .gyanpradip-filters-price {
    padding: 0.5rem 0.5rem 0.5rem 0;
  }

  .gyanpradip-filters-vertical .gyanpradip-filters-price .field:last-of-type {
    margin-left: 1rem;
  }

  .gyanpradip-filters-vertical .gyanpradip-active-filters-button {
    margin-bottom: 1.5rem;
  }

  .no-js .gyanpradip-filters-vertical .gyanpradip-filter-controls.sorting {
    padding-left: 0;
    flex-direction: column;
  }

  .gyanpradip-filters-vertical .gyanpradip-filter-checkbox input[type="checkbox"] {
    z-index: 0;
  }

  .no-js .gyanpradip-filters-vertical .gyanpradip-filters-container {
    display: flex;
    flex-direction: column;
  }

  .gyanpradip-filters-vertical
    .gyanpradip-active-filters
    gyanpradip-filter-remove:last-of-type {
    margin-bottom: 1rem;
  }

  .gyanpradip-filters-vertical .gyanpradip-active-filters {
    margin: 0;
    align-items: flex-start;
  }

  .gyanpradip-filters-disclosure-vertical[open]
    .gyanpradip-filters-summary
    .gyanpradip-icon-caret {
    transform: rotate(180deg);
    right: 1.5rem;
  }

}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .gyanpradip-filters-vertical .gyanpradip-active-filters-button {
    padding: 1rem;
    margin-bottom: 0;
    margin-left: -0.5rem;
  }

  .gyanpradip-filters-vertical .gyanpradip-active-filters-button-remove {
    padding: 0 1rem 1rem;
  }
}
.gyanpradip-icon-arrow {
  width: 1.5rem;
}
.button-show-more.link {
  font-size: 1.5rem;
}
.underlined-link {
  color: rgb(from var(--color-link) r g b / calc(var(--alpha-link) * 100%));
  text-underline-offset: 0.3rem;
  text-decoration-thickness: 0.1rem;
  transition: text-decoration-thickness ease 0.1s;
  text-decoration: underline;
}
/*  Facets checkbox CSS — square box that reveals a checkmark icon on select
    (checkbox icon, not a solid fill). Icon centred inside the box, fades + scales in. */
span.gyanpradip-checkbox-filter-check {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0.1rem solid rgb(from var(--color-foreground) r g b / 70%);
  border-radius: 0.3rem;
  margin-right: 1.6rem;
  flex-shrink: 0;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
span.gyanpradip-checkbox-filter-check > .gyanpradip-icon-check {
  width: 1.2rem;
  height: 1.2rem;
  color: var(--gyanpradip-facet-accent);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
/* On select: keep the box outlined, tint the border, and reveal the checkmark */
.gyanpradip-filter-checkbox
  > input[type="checkbox"]:checked
  ~ span.gyanpradip-checkbox-filter-check {
  background: transparent;
  border-color: var(--gyanpradip-facet-accent);
}
.gyanpradip-filter-checkbox
  > input[type="checkbox"]:checked
  ~ span.gyanpradip-checkbox-filter-check
  > .gyanpradip-icon-check {
  opacity: 1;
  transform: scale(1);
}
/* Checkmark overlays the box and fades in */
span.gyanpradip-filter-checked-box {
  width: 1.8rem;
  height: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
span.gyanpradip-filter-checked-box .icon-checkmark,
span.gyanpradip-filter-checked-box svg {
  width: 1rem;
  height: 1rem;
  color: var(--color-background);
}
/* .gyanpradip-filter-label > span.gyanpradip-filter-checked-box {
  top: 0.8rem;
} */
.gyanpradip-filter-checkbox
  > input[type="checkbox"]:checked
  ~ span.gyanpradip-filter-checked-box {
  opacity: 1;
}
label.gyanpradip-filter-checkbox > input:focus {
  box-shadow: none;
}
.gyanpradip-filter-checkbox
  > input[type="checkbox"]:focus
  ~ span.gyanpradip-checkbox-filter-check {
  border-color: rgb(from var(--color-foreground) r g b / 35%);
}
.gyanpradip-filter-layout-list .gyanpradip-checkbox-filter-label-count {
  flex-shrink: 0;
  margin-left: auto;
  padding: 0 0 0 0.5rem;
}
details.gyanpradip-filters-disclosure-vertical {
  box-shadow: 0 0 0.5rem rgb(from var(--color-foreground) r g b / 1%);
  border-radius: 0.5rem;
}
.gyanpradip-filters-disclosure-vertical + .gyanpradip-filters-disclosure-vertical {
  margin-top: 2rem;
}
.gyanpradip-filter-active-filter-drawer {
  margin-top: 1.5rem;
}
span.checkbox__mobile--label {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
}
.checkbox__mobile--label > .gyanpradip-filter-checked-box {
  top: 0.4rem;
}
.gyanpradip-filters-mobile-submenu .gyanpradip-filters-price {
  padding-top: 0;
}
.gyanpradip-filter-details + .gyanpradip-filter-details {
  border-top: 0.1rem solid rgb(from var(--color-foreground) r g b / 20%);
}
.mobile-gyanpradip-filter-heading {
  margin: 0;
  font-size: 2.8rem;
}
.gyanpradip-filters-mobile__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 2rem;
  padding-block: 1.5rem;
}
.gyanpradip-filter-details {
  padding-inline: 2rem;
  padding-block: 1.5rem;
}
.Mobile--price__with--slider {
  padding: 0 2.5rem;
}
.gyanpradip-filters-disclosure.gyanpradip-price-filter .gyanpradip-price-slider {
  padding: 1.5rem 2rem;
}
.gyanpradip-filters-disclosure.gyanpradip-price-filter
  .price__widget:not(.gyanpradip-price-slider) {
  padding: 1rem 2rem 2rem;
}
.gyanpradip-filters-header--price-max {
  font-size: 1.6rem;
  color: var(--color-foreground);
  margin-bottom: 1rem;
}
.gyanpradip-filters-summary .gyanpradip-icon-caret {
  color: rgb(from var(--color-foreground) r g b / 6%);
  width: 1.5rem;
  top: calc(50% - 0.7rem);
}
.text--bold {
  font-weight: bold;
}
:is(
    .gyanpradip-filter-label:hover,
    .gyanpradip-filter-label.active,
    .gyanpradip-filter-label:has(:focus-visible)
  ) {
  color: var(--color-foreground);
}

.gyanpradip-filter-layout-grid--swatch
  .gyanpradip-filter-label.visual-display-parent--swatch {
  align-items: unset;
}
.gyanpradip-filter-layout-grid .visual-display-parent {
  cursor: pointer;
}
.gyanpradip-filter-label
  > input[type="checkbox"]:checked
  ~ span.gyanpradip-filter-checked-box {
  opacity: 1;
}
.gyanpradip-body-locked--mobile {
  overflow: hidden;
}

/* Details/Summary Accordion Animation
 * Uses modern CSS ::details-content pseudo-element
 * Requires Chrome 131+, fallback: instant toggle in older browsers
 */
@supports (interpolate-size: allow-keywords) {
  :root {
    interpolate-size: allow-keywords;
  }

  .gyanpradip-filter-details {
    overflow: hidden;
  }

  .gyanpradip-filter-details::details-content {
    transition: block-size 0.5s ease-out, content-visibility 0.5s ease-out;
    transition-behavior: allow-discrete;
    block-size: 0;
  }

  .gyanpradip-filter-details[open]::details-content {
    block-size: auto;
  }

  /* Smooth arrow rotation */
  .gyanpradip-filter-details .gyanpradip-icon-caret {
    transition: transform 0.5s ease-out;
  }
}

/* =====================================================
   Gyanpradip Filters Grid Layout System
   Uses :has() selector to detect layout from data-filter-layout attribute
   ===================================================== */

/* Vertical layout: CSS Grid with sidebar + content.
   Two custom properties, deliberately separate:
     --gyanpradip-sidebar-width : the sidebar's resting width. Responsive — 30rem on laptop,
                               40rem on large screens (see the min-width: 1600px block).
     --gyanpradip-sidebar-col   : the grid TRACK width. Equals the resting width normally, but
                               collapses to 0 on Hide Filters. Kept separate so the responsive
                               width override never touches the collapse state, and the sidebar
                               form (fixed at --gyanpradip-sidebar-width) doesn't reflow mid-collapse. */
@media screen and (min-width: 992px) {
  .gyanpradip-filters-grid:has([data-filter-layout="vertical"]) {
    --gyanpradip-sidebar-width: 30rem;
    --gyanpradip-sidebar-col: var(--gyanpradip-sidebar-width);
    display: grid;
    grid-template-columns: var(--gyanpradip-sidebar-col) 1fr;
    grid-template-rows: auto 1fr;
    gap: 3rem var(--gyanpradip-sidebar-gap, 2rem);
    transition: grid-template-columns 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
      column-gap 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  /* Toolbar spans full width (both columns) */
  .gyanpradip-filters-grid:has([data-filter-layout="vertical"]) .filter--toolbar {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  /* Sticky toolbar (opt-in via the "Sticky filter toolbar" block setting). Pins flush to the
     window top (top: 0) when the header is NOT sticky; when the header's "Sticky header" feature
     is on (--header-sticky-active = 1) it pins directly below the fixed header (top: header height,
     no extra gap). Opaque background so products scrolling behind the pinned bar don't bleed
     through; z-index sits above product cards but below the sticky header (98), drawer off-canvas,
     and compare bar. */
  .gyanpradip-filters-grid:has([data-filter-layout="vertical"]) .filter--toolbar--sticky {
    position: sticky;
    top: calc(var(--header-height, 0px) * var(--header-sticky-active, 0));
    z-index: 4;
    background: var(--color-background);
  }

  /* Filter sidebar in left column. Clipped so its fixed-width content doesn't spill
     while the column collapses to 0; overflow-clip-margin gives focus rings room.
     On Hide/Show the sidebar FADES (opacity) while the grid column collapse (owned by the
     grid rule) handles the spatial motion — no translate, which read as an abrupt pop. */
  .gyanpradip-filters-grid:has([data-filter-layout="vertical"])
    .gyanpradip-filters-container-vertical {
    grid-column: 1;
    grid-row: 2;
    overflow: clip;
    overflow-clip-margin: 0.6rem;
    transition: opacity 0.35s ease;
  }

  /* Sticky left sidebar (opt-in via the "Sticky filter sidebar" block setting).
     align-self:start lets the sidebar take its natural height so it has room to travel
     inside its full-height grid area (grid-row 2, as tall as the product grid) — so it
     stays pinned until the whole product grid has scrolled past, then releases naturally.
     Base gap is 15px from the window top. The header height is added ONLY when the header's
     "Sticky header" feature is on — gated by the --header-sticky-active 0/1 flag published on
     :root by header.liquid (mirrors the theme's --transparent-header-show idiom). So a non-sticky
     header contributes nothing; toggling the setting recalculates automatically.
     Pure sticky — no max-height / overflow / scrollbar (those clipped the sidebar's edge).
     overflow is left to the base vertical rule's `clip` (needed only during collapse).
     When the toolbar is ALSO sticky, the sidebar drops below it: the --gyanpradip-toolbar-height
     term (published by JS, measured from .filter--toolbar) is gated by --toolbar-sticky-active
     so a non-sticky toolbar contributes nothing and the offset is unchanged from before. */
  .gyanpradip-filters-grid:has([data-filter-layout="vertical"])
    .gyanpradip-filters-container-vertical--sticky {
    position: sticky;
    top: calc(
      var(--header-height, 0px) * var(--header-sticky-active, 0) +
      var(--gyanpradip-toolbar-height, 0px) * var(--toolbar-sticky-active, 0) + 1.5rem
    );
    align-self: start;
  }

  /* Product grid in right column */
  .gyanpradip-filters-grid:has([data-filter-layout="vertical"])
    .collection-product-layout {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
  }

  /* ---- Collapsed state (Hide Filters) ---- */
  .gyanpradip-filters-grid.gyanpradip-filters--collapsed {
    --gyanpradip-sidebar-col: 0rem;
    column-gap: 0;
  }

  .gyanpradip-filters-grid.gyanpradip-filters--collapsed
    .gyanpradip-filters-container-vertical {
    opacity: 0;
    pointer-events: none;
  }
}

/* Large screens → wider sidebar. Laptops (≤1599px) keep the base 30rem; large monitors
   get 40rem. Only the RESTING width (--gyanpradip-sidebar-width) changes — the collapse state
   (--gyanpradip-sidebar-col: 0) is never touched here, so Hide Filters keeps working at every
   width. Breakpoint at 1600px keeps typical laptops (1366 / 1440 / 1536) at 30rem. */
@media screen and (min-width: 1600px) {
  .gyanpradip-filters-grid:has([data-filter-layout="vertical"]),
  .gyanpradip-filters-grid.gyanpradip-filters-grid--vertical {
    --gyanpradip-sidebar-width: 30rem;
  }
}

/* Reduced motion — collapse/expand instantly, no slide */
@media (prefers-reduced-motion: reduce) {
  .gyanpradip-filters-grid:has([data-filter-layout="vertical"]),
  .gyanpradip-filters-grid:has([data-filter-layout="vertical"])
    .gyanpradip-filters-container-vertical {
    transition: none;
  }
}

/* Fallback for browsers without :has() support */
@supports not selector(:has(a, b)) {
  @media screen and (min-width: 992px) {
    .gyanpradip-filters-grid.gyanpradip-filters-grid--vertical {
      --gyanpradip-sidebar-width: 30rem;
      --gyanpradip-sidebar-col: var(--gyanpradip-sidebar-width);
      display: grid;
      grid-template-columns: var(--gyanpradip-sidebar-col) 1fr;
      grid-template-rows: auto 1fr;
      gap: 3rem var(--gyanpradip-sidebar-gap, 2rem);
    }

    .gyanpradip-filters-grid.gyanpradip-filters-grid--vertical .filter--toolbar {
      grid-column: 1 / -1;
      grid-row: 1;
    }

    .gyanpradip-filters-grid.gyanpradip-filters-grid--vertical .filter--toolbar--sticky {
      position: sticky;
      top: calc(var(--header-height, 0px) * var(--header-sticky-active, 0));
      z-index: 4;
      background: var(--color-background);
    }

    .gyanpradip-filters-grid.gyanpradip-filters-grid--vertical
      .gyanpradip-filters-container-vertical {
      grid-column: 1;
      grid-row: 2;
    }

    .gyanpradip-filters-grid.gyanpradip-filters-grid--vertical
      .gyanpradip-filters-container-vertical--sticky {
      position: sticky;
      top: calc(
        var(--header-height, 0px) * var(--header-sticky-active, 0) +
        var(--gyanpradip-toolbar-height, 0px) * var(--toolbar-sticky-active, 0) + 1.5rem
      );
      align-self: start;
    }

    .gyanpradip-filters-grid.gyanpradip-filters-grid--vertical
      .collection-product-layout {
      grid-column: 2;
      grid-row: 2;
      min-width: 0;
    }
  }
}


  /* ===== migrated from assets/gyanpradip-collection-page-rtl.css ([dir=rtl] scoped) ===== */
[dir="rtl"] .gyanpradip-filters-vertical .gyanpradip-filters-wrapper {
  padding-right: 0;
  padding-left: 3rem;
}
@media screen and (min-width: 992px) {
[dir="rtl"] .gyanpradip-filters-disclosure-vertical[open] .gyanpradip-filters-summary .gyanpradip-icon-caret {
    right: auto;
    left: 1.5rem;
  }
}
[dir="rtl"] span.gyanpradip-filter-checked-box {
  left: auto;
  right: 0.4rem;
}
[dir="rtl"] span.gyanpradip-checkbox-filter-check {
  margin-right: 0;
  margin-left: 1rem;
}
[dir="rtl"] .gyanpradip-filters-mobile-label > svg {
  margin-right: 0;
  margin-left: 1.2rem;
}
[dir="rtl"] span.gyanpradip-checkbox-filter-label-count {
  margin-left: unset;
  margin-right: auto;
}
[dir="rtl"] .slider-price:before {
  left: auto;
  right: var(--left);
}
@media (min-width: 992px) {
[dir="rtl"] .gyanpradip-active-filters-button svg {
    margin-right: 0.6rem;
    margin-left: -0.4rem;
  }
}
@media screen and (min-width: 992px) {
[dir="rtl"] .gyanpradip-filters-tools {
    padding-left: 0;
    padding-right: 3rem;
  }
}
[dir="rtl"] .gyanpradip-filters-tools-label {
  margin: 0 0 0 1rem;
}
[dir="rtl"] .gyanpradip-filters-tools-sort + .gyanpradip-icon-caret {
  right: auto;
  left: 1rem;
}
[dir="rtl"] .gyanpradip-filters-tools-sort {
  padding: 8px 12px 7px 40px !important;
}
[dir="rtl"] .gyanpradip-filter-arrow,
[dir="rtl"] .gyanpradip-filters-summary .gyanpradip-icon-caret {
  margin-left: unset;
  margin-right: auto;
}
[dir="rtl"] .gyanpradip-filters-summary svg {
  margin-left: unset;
  margin-right: auto;
  transform: rotate(-180deg);
}
[dir="rtl"] .gyanpradip-filters-drawer-trigger > * + * {
  margin-left: 0;
  margin-right: 1rem;
}
[dir="rtl"] .gyanpradip-filters-drawer-close .gyanpradip-icon-arrow {
  margin-right: 0;
  margin-left: 1rem;
}
@media screen and (min-width: 992px) {
[dir="rtl"] .gyanpradip-active-filters-button {
    margin-right: 0;
    margin-left: 1.5rem;
  }
}
[dir="rtl"] .gyanpradip-active-filters-button svg {
  margin-left: -0.2rem;
  margin-right: 0.6rem;
}
@media screen and (min-width: 992px) {
[dir="rtl"] .product-count-vertical {
    margin-left: 0;
    margin-right: 2rem;
  }
}

/* RTL: Drawer Filter Header - Swap title and close button positions */
[dir="rtl"] .gyanpradip-filters-mobile__header {
  flex-direction: row-reverse;
}

/* RTL: Footer button margin */
[dir="rtl"] .gyanpradip-filters-mobile__footer > * + * {
  margin-left: 0;
  margin-right: 1rem;
}

/* =====================================================
   Drawer layout — redesigned filter bar (original design)
   ===================================================== */
.gyanpradip-filters-container-drawer {
  display: block;
}

/* Sticky drawer bar (opt-in via the "Sticky filter toolbar" block setting). The drawer
   container wraps only the bar (the product grid is its sibling in .gyanpradip-filters-grid),
   so pinning it keeps the bar in view while products scroll past. Desktop only — mobile
   always uses the drawer bar and must scroll normally. Same header-aware offset + opaque
   background + z-index rationale as the vertical sticky toolbar. */
@media screen and (min-width: 992px) {
  .gyanpradip-filters-container-drawer--sticky {
    position: sticky;
    top: calc(var(--header-height, 0px) * var(--header-sticky-active, 0));
    z-index: 4;
    background: var(--color-background);
  }

  /* Balance the sticky bar: the bar carries padding-bottom (gap above its bottom
     border) but no top padding, so once pinned the content sits flush to the top
     edge — top gap smaller than the bottom. Mirror the bottom padding on top so the
     content is vertically centred while pinned. Only when sticky (both the drawer bar
     and the vertical toolbar bar); non-sticky spacing is owned by the surrounding layout. */
  .gyanpradip-filters-container-drawer--sticky .gyanpradip-filter-bar,
  .filter--toolbar--sticky .gyanpradip-filter-bar {
    padding-top: 1.6rem;
  }
}

.gyanpradip-filter-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem 2rem;
  width: 100%;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid rgb(from var(--color-foreground) r g b / 10%);
}

/* The 4.5rem gap between the filter bar and the product grid is owned by the
   product layout, so it is constant whether or not active filters are shown. */
.gyanpradip-filters-grid:has([data-filter-layout="drawer"]) .collection-product-layout {
  margin-top: 4.5rem;
}

.gyanpradip-filter-bar__left,
.gyanpradip-filter-bar__right {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.gyanpradip-filter-bar__right {
  margin-inline-start: auto;
  gap: 2.5rem;
}

/* Filter trigger — "Show filters" / "Hide filters".
   Both selectors are listed so the trigger looks identical in every context that shows
   it: the drawer bar (.gyanpradip-filter-bar) and the vertical layout's MOBILE fallback,
   which reuses the same snippet but sits outside the bar (direct child of
   .gyanpradip-filters-container-vertical). Without the second selector the vertical mobile
   trigger keeps its base gray-box style (background + padding + radius) and looks
   different from the drawer's plain text+icon. */
.gyanpradip-filter-bar .gyanpradip-filters-mobile-wrapper {
  display: inline-flex;
}

.gyanpradip-filter-bar .gyanpradip-filters-drawer-trigger,
.gyanpradip-filters-container-vertical .gyanpradip-filters-drawer-trigger {
  background: transparent;
  padding: 0;
  border-radius: 0;
  gap: 0.6rem;
  font-weight: 600;
  color: var(--color-foreground);
}

/* Cancel the legacy 1rem left-margin so the icon↔label gap is just the flex gap */
.gyanpradip-filter-bar .gyanpradip-filters-drawer-trigger > * + *,
.gyanpradip-filters-container-vertical .gyanpradip-filters-drawer-trigger > * + * {
  margin-left: 0;
}

.gyanpradip-filter-bar .gyanpradip-filters-drawer-trigger:hover,
.gyanpradip-filters-container-vertical .gyanpradip-filters-drawer-trigger:hover {
  color: var(--color-foreground);
}

.gyanpradip-filter-bar .gyanpradip-filters-drawer-trigger svg,
.gyanpradip-filters-container-vertical .gyanpradip-filters-drawer-trigger svg {
  width: 2rem;
  height: 2rem;
}

/* Vertical mobile: the trigger shares a grid row with the taller compare bar (compare
   toggle + product count stacked on two lines). Center it vertically so "Show filters"
   aligns with the middle of that block instead of hugging the top of the row.
   Mobile-only element, so no media query is needed (display:none on desktop). */
.gyanpradip-filters-container-vertical .gyanpradip-filters-mobile-wrapper {
  align-self: center;
}

.gyanpradip-filters-drawer-label--hide {
  display: none;
}

.gyanpradip-filters-mobile-disclosure[open] .gyanpradip-filters-drawer-label--show {
  display: none;
}

.gyanpradip-filters-mobile-disclosure[open] .gyanpradip-filters-drawer-label--hide {
  display: inline;
}

/* Reset all */
.gyanpradip-filter-reset-all {
  display: inline-flex;
}

.gyanpradip-filter-reset-all__link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: rgb(from var(--color-foreground) r g b / 55%);
  text-decoration: none;
  font-size: 1.4rem;
  white-space: nowrap;
  background: rgb(from var(--color-foreground) r g b / 5%);
  padding: 0.9rem 1.6rem;
  border-radius: 0.8rem;
  transition: background 0.2s ease, color 0.2s ease;
}

.gyanpradip-filter-reset-all__link svg {
  width: 1.6rem;
  height: 1.6rem;
}

.gyanpradip-filter-reset-all:hover .gyanpradip-filter-reset-all__link {
  color: var(--color-foreground);
  background: rgb(from var(--color-foreground) r g b / 9%);
}

/* Product count in the bar */
.product-count--bar {
  text-align: left;
}

.product-count--bar .product-count__text {
  color: rgb(from var(--color-foreground) r g b / 55%);
}

/* Compare toggle */
.gyanpradip-compare {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}

/* Mobile toolbar row: product count (left) + compare toggle (right). Occupies the
   right grid cell of .gyanpradip-filters-container; the toggle pins to the far right. */
.gyanpradip-compare-mobile-bar {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  justify-content: flex-end;
}
.gyanpradip-compare-mobile-bar .product-count {
  margin: 0;
}
.gyanpradip-compare--mobile {
  margin-inline-start: auto;
}

/* ≤450px: with the "Show filters" trigger in the left grid cell, the right cell no
   longer has room for the product count and compare toggle on one line — the count
   text wraps mid-phrase ("19" over "products"). Stack instead: keep the compare
   toggle on the top line (right-aligned, beside the trigger) and drop the product
   count onto its own line below it. order:-1 puts compare first so its existing
   margin-inline-start:auto still pins it to the far right; flex-basis:100% forces
   the count onto the next line. */
@media screen and (max-width: 450px) {
  .gyanpradip-compare-mobile-bar {
    flex-wrap: wrap;
    row-gap: 0.6rem;
  }

  .gyanpradip-compare-mobile-bar .gyanpradip-compare--mobile {
    order: -1;
  }

  .gyanpradip-compare-mobile-bar .product-count {
    flex-basis: 100%;
    text-align: right;
  }
}

.gyanpradip-compare__label {
  font-size: 1.4rem;
  color: var(--color-foreground);
  white-space: nowrap;
}

.gyanpradip-compare__switch {
  position: relative;
  width: 4.4rem;
  height: 2.4rem;
  border: none;
  border-radius: 100px;
  background: rgb(from var(--color-foreground) r g b / 20%);
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s ease;
}

.gyanpradip-compare__thumb {
  position: absolute;
  top: 0.3rem;
  left: 0.3rem;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: var(--color-background);
  transition: transform 0.2s ease;
}

.gyanpradip-compare.is-on .gyanpradip-compare__switch {
  background: var(--color-foreground);
}

.gyanpradip-compare.is-on .gyanpradip-compare__thumb {
  transform: translateX(2rem);
}

[dir="rtl"] .gyanpradip-compare.is-on .gyanpradip-compare__thumb {
  transform: translateX(-2rem);
}

/* Sort By — restyle for the bar */
.gyanpradip-filter-bar .gyanpradip-filters {
  display: inline-flex;
}

.gyanpradip-filter-bar .gyanpradip-filter-controls {
  align-items: center;
  padding-left: 0;
  margin-top: 0;
}

.gyanpradip-filter-bar .gyanpradip-filter-controls-label {
  margin: 0 0.6rem 0 0;
  white-space: nowrap;
}

.gyanpradip-filter-bar .gyanpradip-filter-controls-field {
  flex-grow: 0;
}

/* Grid layout switcher */
.gyanpradip-grid-switcher {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.gyanpradip-grid-switcher__label {
  color: var(--color-foreground);
  margin-right: 0.6rem;
  white-space: nowrap;
}

/* Un-break --color-foreground for switcher icons (the inline style sets a
   comma-separated value that is invalid as a color; inherit the scheme value).
   Gyanpradip-only — the icon color var above is a Gyanpradip customization
   (section "Icon color" setting) with no Gloryio equivalent. */
.gyanpradip-filter-bar .gird__column_icon {
  --color-foreground: inherit;
}

.gyanpradip-grid-switcher .gird__column_icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgb(from var(--color-foreground) r g b / 35%);
  padding: 0.5rem;
  border-radius: 0.6rem;
}

.gyanpradip-grid-switcher .gird__column_icon > span {
  display: inline-flex;
}

.gyanpradip-grid-switcher .gird__column_icon svg {
  display: block;
  width: 2.4rem;
  height: 2.4rem;
  max-width: 24px;
  max-height: 24px;
}

.gyanpradip-grid-switcher .gird__column_icon:hover {
  color: var(--color-foreground);
}

/* Active: filled dark rounded square with a centered light icon (matches original design) */
.gyanpradip-grid-switcher .gird__column_icon.active {
  background: var(--color-foreground);
  color: var(--color-background);
}

/* Divider */
.gyanpradip-filter-divider {
  border: 0;
  height: 1px;
  width: 100%;
  background: rgb(from var(--color-foreground) r g b / 10%);
  margin: 0;
}

/* ---------------------------------------------------------------------------
   Active-filters empty/populated state (reactive to AJAX via :has()).
   The pills container + dividers are always in the DOM so the AJAX renderer
   can swap innerHTML in both directions; these rules collapse them (and the
   bar-level "Reset all" button) whenever there are no active filter pills.
   --------------------------------------------------------------------------- */
.gyanpradip-filter-reset-all,
.gyanpradip-filters-container-drawer .gyanpradip-filter-divider,
.gyanpradip-filters-container-drawer .gyanpradip-filters-pill {
  display: none;
}

.gyanpradip-filters-container-drawer:has(
    .gyanpradip-active-filters-desktop gyanpradip-filter-remove
  )
  .gyanpradip-filter-reset-all {
  display: inline-flex;
}

.gyanpradip-filters-container-drawer:has(
    .gyanpradip-active-filters-desktop gyanpradip-filter-remove
  )
  .gyanpradip-filter-divider {
  display: block;
}

.gyanpradip-filters-container-drawer:has(
    .gyanpradip-active-filters-desktop gyanpradip-filter-remove
  )
  .gyanpradip-filters-pill {
  display: block;
}

/* Active filter pills row — sits in the bar's persistent bottom gap, no extra padding */
.gyanpradip-filters-pill {
  width: 100%;
}

.gyanpradip-filters-pill .gyanpradip-active-filters {
  margin-top: 0;
  /* Vertical spacing for the active-filters row lives on the container itself,
     between the bar border above and the divider below. */
  padding-block: 2rem;
}

.gyanpradip-filters-pill .gyanpradip-active-filters-button {
  margin-top: 0;
}

.gyanpradip-filters-pill .gyanpradip-active-filters-button-inner {
  background: rgb(from var(--color-foreground) r g b / 5%);
  box-shadow: none;
  border-radius: 100px;
  gap: 0.6rem;
  padding: 0.9rem 1.4rem;
}

.gyanpradip-filters-pill
  .gyanpradip-active-filters-button:hover
  .gyanpradip-active-filters-button-inner {
  box-shadow: 0 0 0 0.1rem var(--color-foreground);
}

/* Mobile — collapse the bar to filter trigger + mobile compare bar */
@media screen and (max-width: 991px) {
  /* Keep the filter trigger (left) and the mobile compare bar (right) on ONE row,
     mirroring the vertical layout's 2-column grid. The drawer bar is flex-wrap:wrap
     (needed on desktop when trigger + reset + count + compare + sort + grid overflow),
     but on mobile only the trigger and the compare bar remain — nowrap stops __right
     from dropping onto its own line. The trigger holds its width; the compare bar
     shrinks (min-width:0), letting its product count wrap below the toggle at ≤450px. */
  .gyanpradip-filter-bar {
    gap: 1rem 1.5rem;
    flex-wrap: nowrap;
  }

  .gyanpradip-filter-bar__left {
    flex-shrink: 0;
  }

  .gyanpradip-filter-bar__right {
    margin-inline-start: auto;
    min-width: 0;
  }
}

/* =====================================================
   Drawer filter — redesigned panel (matches original design)
   Shared by the desktop "Drawer" layout and the mobile drawer.
   ===================================================== */

/* When the reveal animation (scroll-trigger animate--fade-in) is enabled, the
   filters container becomes an opacity/animation stacking context. That traps the
   fixed drawer + overlay inside it, so page chrome with a positive root z-index
   (sticky header z-index:98, collection hero text z-index:8) paints on top. While
   the drawer is open, lift the whole container above that chrome so the overlay and
   panel cover everything. Body scroll is locked while open, so this can't clash with
   the sticky header on scroll. Hook on [open] (not the transient --opening class)
   so the lift persists through the 300ms close animation as the panel slides out. */
.gyanpradip-filters-container:has(.gyanpradip-filters-mobile-disclosure[open]) {
  position: relative;
  z-index: 1000;
}

/* --- Backdrop overlay (dedicated element, always renders, click = close) --- */
.gyanpradip-filters-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgb(from var(--color-foreground) r g b / 50%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 1;
}

.gyanpradip-offcanvas--opening .gyanpradip-filters-drawer-overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* --- Panel shell: 45rem cap, square edges, padded content, inset dividers --- */
.gyanpradip-filters-mobile-inner {
  position: relative;
  z-index: 2;
  max-width: 45rem;
  border-radius: 0;
}

.gyanpradip-filters-mobile__main {
  padding-inline: 2rem;
}

/* Padding lives on the scroll area, so the inter-filter border-top spans the
   padded content width (inset from the panel edges), not edge-to-edge. */
.gyanpradip-filter-details {
  padding-inline: 0;
}

.Mobile--price__with--slider {
  padding-inline: 0;
}

/* --- Filter group header (summary) + animated caret --- */
.gyanpradip-filters-mobile__summary {
  list-style: none;
  cursor: pointer;
  padding-block: 0.4rem;
}

.gyanpradip-filters-mobile__summary::-webkit-details-marker {
  display: none;
}

.gyanpradip-filters-mobile__summary > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 1.6rem;
  font-weight: 600;
}

.gyanpradip-filters-mobile__arrow {
  display: inline-flex;
  align-items: center;
  color: rgb(from var(--color-foreground) r g b / 45%);
}

.gyanpradip-filters-mobile__arrow svg {
  position: static;
  width: 1.2rem;
  height: auto;
  transition: transform 0.3s ease;
}

.gyanpradip-filter-details[open] > .gyanpradip-filters-mobile__summary .gyanpradip-filters-mobile__arrow svg {
  transform: rotate(180deg);
}

/* --- Standard checkbox rows: label inline, count hard-right --- */
.gyanpradip-filter-checkbox__text {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  font-size: 1.5rem;
}

.gyanpradip-filter-checkbox__count {
  flex-shrink: 0;
  margin-left: auto;
  color: rgb(from var(--color-foreground) r g b / 55%);
}

/* --- Availability toggle switches --- */
.gyanpradip-filter-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  cursor: pointer;
  padding-block: 0.3rem;
}

/* Hide the native checkbox (kept for form submit/AJAX). High specificity to beat
   the generic .gyanpradip-filter-checkbox input rule that forces opacity:1. */
.gyanpradip-filter-checkbox
  input[type="checkbox"].gyanpradip-filter-toggle-input:not(.swatch-input__input) {
  opacity: 0;
}

.gyanpradip-filter-toggle-row__label {
  flex: 1;
  font-size: 1.5rem;
}

.gyanpradip-filter-toggle-switch {
  position: relative;
  width: 4.4rem;
  height: 2.4rem;
  border-radius: 100px;
  background: rgb(from var(--color-foreground) r g b / 20%);
  flex-shrink: 0;
  transition: background 0.2s ease;
}

.gyanpradip-filter-toggle-thumb {
  position: absolute;
  top: 0.3rem;
  left: 0.3rem;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: var(--color-background);
  transition: transform 0.2s ease;
}

.gyanpradip-filter-toggle-input:checked ~ .gyanpradip-filter-toggle-switch {
  background: var(--gyanpradip-facet-accent);
}

.gyanpradip-filter-toggle-input:checked
  ~ .gyanpradip-filter-toggle-switch
  .gyanpradip-filter-toggle-thumb {
  transform: translateX(2rem);
}

[dir="rtl"] .gyanpradip-filter-toggle-input:checked
  ~ .gyanpradip-filter-toggle-switch
  .gyanpradip-filter-toggle-thumb {
  transform: translateX(-2rem);
}

/* --- Color source swatches: left-aligned list, inline label, count right ---
   Scoped to the shared .gyanpradip-filters-panel so both the drawer (whose __main carries
   the panel class) and the vertical sidebar get identical swatch styling. */
.gyanpradip-filters-panel .gyanpradip-filter-layout-grid--swatch {
  display: block;
}

.gyanpradip-filters-panel
  .gyanpradip-filter-layout-grid--swatch
  .gyanpradip-filter-label {
  flex-direction: row;
  align-items: center;
  gap: 1.5rem;
  /* Inline padding keeps the selected/hover ring off the clipped left edge of
     .gyanpradip-filter-details (overflow: hidden for the accordion animation).
     No block padding — it inflated the perceived gap between swatch rows. */
  padding: 0 0.4rem;
}

.gyanpradip-filters-panel
  .gyanpradip-filter-layout-grid--swatch
  .gyanpradip-filter-checkbox__text {
  flex: 1;
  flex-direction: row;
}

.gyanpradip-filters-panel .swatch-input__input + .swatch-input__label {
  --swatch-input--size: 3.2rem;
}

/* Default border — the base `.swatch` border is only 15% foreground (5% dashed for
   empty/"unavailable" swatches), so white/light swatches (Clear, Multicolor) blend
   into the panel and read as no swatch at all. Bump to a clearly visible strength so
   every swatch's edge is identifiable. Higher specificity than the base
   `.swatch--unavailable` rule, so it also lifts the dashed empty swatches (their
   dashed border-style is preserved — only the color changes). */
.gyanpradip-filters-panel .swatch {
  border-color: rgb(from var(--color-foreground) r g b / 35%);
}

/* Smooth the hover/selected ring:
   1) Ease box-shadow over the default duration (the base swatch rule uses a snappier
      100ms), so the ring fades rather than snaps.
   2) Give the resting (unchecked) swatch a same-structure but fully transparent ring,
      so hovering interpolates as a clean alpha fade instead of growing the spread out
      from `none`. Specificity (0,4,0) beats the base swatch transition rule. */
.gyanpradip-filters-panel
  .swatch-input__input
  + .swatch-input__label
  > .swatch {
  transition: box-shadow var(--duration-default) ease;
}

.gyanpradip-filters-panel
  .swatch-input__input:not(:checked)
  + .swatch-input__label
  > .swatch {
  box-shadow:
    0 0 0 var(--swatch-selected-gap) transparent,
    0 0 0 calc(var(--swatch-selected-gap) + var(--swatch-selected-stroke))
      transparent;
}

/* The swatch checkbox is stretched over the whole row (absolute, inset:0,
   z-index:1, opacity:0 — see `.gyanpradip-filter-layout-grid input[type="checkbox"]`)
   to make the row clickable. That overlay is the element actually hovered, so give
   IT the pointer cursor — `.gyanpradip-filter-label`'s cursor:pointer can't reach it
   (cursor:auto doesn't inherit). */
.gyanpradip-filters-panel
  .gyanpradip-filter-layout-grid--swatch
  .swatch-input__input {
  cursor: pointer;
}

/* Hover on an unselected swatch mirrors the selected ring (gap + full-strength
   foreground stroke) so it's obvious the swatch is clickable. The .swatch already
   has `transition: box-shadow`, so this fades in smoothly and matches the active
   state. Keyed on the overlay INPUT's :hover — the absolutely positioned input
   sits on top of the row and captures hover, so `.swatch-input__label:hover` can
   never match while it does. */
.gyanpradip-filters-panel
  .swatch-input__input:not(:checked):hover
  + .swatch-input__label
  > .swatch {
  box-shadow:
    0 0 0 var(--swatch-selected-gap) var(--color-background),
    0 0 0 calc(var(--swatch-selected-gap) + var(--swatch-selected-stroke))
      var(--color-foreground);
}

/* --- Price: orange handles + active fill, "to" divider between fields --- */
.gyanpradip-slider-value::before {
  background: var(--gyanpradip-facet-accent);
}

.gyanpradip-slider-value input[type="range"]::-webkit-slider-thumb {
  background: var(--gyanpradip-facet-accent);
  border-color: var(--gyanpradip-facet-accent);
}

.gyanpradip-slider-value input[type="range"]::-moz-range-thumb {
  background: var(--gyanpradip-facet-accent);
  border-color: var(--gyanpradip-facet-accent);
}

/* Slider sits first; pill inputs centre-align (labels are hidden). */
.gyanpradip-price-inputs {
  align-items: center;
}

.gyanpradip-price-inputs__divider {
  align-self: center;
  padding-bottom: 0;
  color: rgb(from var(--color-foreground) r g b / 55%);
  font-size: 1.4rem;
  text-transform: lowercase;
}

/* Helper text under the "Price" heading */
.gyanpradip-price-filter-description {
  margin: 0 0 1.6rem;
  font-size: 1.4rem;
  line-height: var(--leading-body-tight, 1.3);
  color: rgb(from var(--color-foreground) r g b / 55%);
  margin-top: 0.8rem;
}

/* The price content lives inside .gyanpradip-filter-details, which is `overflow: hidden`
   for the accordion animation (Chrome 131+). Inset the whole price panel so the pill
   corners AND the slider end-handles clear that clipped edge. One symmetric inset here
   replaces the slider's own side margin/width hack. */
.gyanpradip-price-widget--wrapper {
  padding-inline: 0.9rem;
}

/* Slider renders above the pills and owns the gap down to them (base
   .gyanpradip-slider-value uses `margin: 2rem 0`). Full width within the padded wrapper —
   all children are % of this container, so --width/--left stay aligned. */
.gyanpradip-price-slider .gyanpradip-slider-value {
  margin: 0.5rem 0 2.4rem;
}

/* --- Footer: Reset All + Apply, two-up; Reset disabled when nothing active --- */
.gyanpradip-filters-mobile__footer {
  gap: 1rem;
}

.gyanpradip-filters-mobile__footer > * {
  flex: 1;
  width: auto;
  margin: 0;
}

/* Neutralise the legacy sibling margin — spacing is owned by the flex gap */
.gyanpradip-filters-mobile__footer > * + * {
  margin-left: 0;
}

[dir="rtl"] .gyanpradip-filters-mobile__footer > * + * {
  margin-right: 0;
}

/* Mobile "Sort by" — stack the label above a full-width select. Inline (the default
   flex row inherited from .gyanpradip-filters-mobile__summary > div) squeezed and cut off
   the select on narrow screens. Label full width + left-aligned; select full width. */
@media screen and (max-width: 991px) {
  .gyanpradip-filters-mobile__sort {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.8rem;
  }

  .gyanpradip-filters-mobile__sort > label {
    width: 100%;
    text-align: start;
  }

  .gyanpradip-filters-mobile__sort .select,
  .gyanpradip-filters-mobile__sort .select__select {
    width: 100%;
  }
}

/* The SortBy row is a static .gyanpradip-filter-details (never collapses), but it inherits
   the accordion animation's `overflow: hidden`, which clips the select's focus ring
   (box-shadow: 0 0 0 4px …). It doesn't need the clip — let the ring show in full. */
.gyanpradip-filter-details:has(.gyanpradip-filters-mobile__sort) {
  overflow: visible;
}

.gyanpradip-filters-drawer-reset {
  display: flex;
}

/* Descendant selector (0,2,0) so width:100% beats the base `.button { width: fit-content }`
   (0,1,0) — otherwise the reset link shrinks to its text and looks narrower than Apply,
   even though its wrapper is already an equal-width flex child. */
.gyanpradip-filters-drawer-reset .gyanpradip-filters-drawer-reset__btn {
  width: 100%;
  justify-content: center;
  text-align: center;
}

/* Both footer buttons: equal-width flex halves (from `> * { flex: 1 }`) that stay on a
   single line. Trimmed inline padding + nowrap so "Reset all" can't wrap to two lines. */
.gyanpradip-filters-mobile__footer .button {
  white-space: nowrap;
  padding-inline: 1.2rem;
}

.gyanpradip-filters-mobile:not(:has(.gyanpradip-filters-mobile__main input:checked)):not(
    :has(.gyanpradip-price-input[name])
  )
  .gyanpradip-filters-drawer-reset {
  opacity: 0.4;
  pointer-events: none;
}

/* =====================================================
   Vertical layout — toolbar bar + sidebar
   Reuses the drawer's .gyanpradip-filter-bar / .gyanpradip-filters-panel design; adds the
   inline Show/Hide Filters toggle button (the drawer uses an off-canvas <details>).
   ===================================================== */

/* The bar sits flat above the grid; row spacing is owned by the grid's row-gap. */
.gyanpradip-filter-bar--vertical {
  margin: 0;
}

/* Reset-all in the vertical toolbar reveals only when filters are active. The active
   pills live in the sidebar and the reset button in the toolbar — both under
   .gyanpradip-filters-grid — so drive visibility from the grid's :has(). (The base
   `.gyanpradip-filter-reset-all { display: none }` rule hides it otherwise.) */
.gyanpradip-filters-grid:has(
    .gyanpradip-active-filters-desktop gyanpradip-filter-remove
  )
  .gyanpradip-filter-bar--vertical
  .gyanpradip-filter-reset-all {
  display: inline-flex;
}

/* Show / Hide Filters toggle button */
.gyanpradip-filters-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  min-height: 0;
  cursor: pointer;
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--color-foreground);
  box-shadow: none;
  transition: opacity 0.2s ease;
}

.gyanpradip-filters-toggle:hover {
  color: var(--color-foreground);
  opacity: 0.7;
}

.gyanpradip-filters-toggle:focus-visible {
  outline: 0.2rem solid rgb(from var(--color-foreground) r g b / 40%);
  outline-offset: 0.3rem;
}

.gyanpradip-filters-toggle svg {
  width: 2rem;
  height: 2rem;
}

/* Label swap driven by aria-expanded (default expanded → "Hide filters") */
.gyanpradip-filters-toggle__label--show {
  display: none;
}

.gyanpradip-filters-toggle[aria-expanded="false"] .gyanpradip-filters-toggle__label--hide {
  display: none;
}

.gyanpradip-filters-toggle[aria-expanded="false"] .gyanpradip-filters-toggle__label--show {
  display: inline;
}

/* Sidebar width — the responsive resting width (30rem laptop → 40rem ≥1600px). Scoped to
   the collection vertical container so the shared .gyanpradip-filters-form-vertical rule (also
   used by search) keeps its own width. */
.gyanpradip-filters-container-vertical .gyanpradip-filters-form-vertical {
  /* Fixed at the resting width (NOT --gyanpradip-sidebar-col, which collapses to 0) so the
     form never reflows mid-collapse. Follows the responsive 30rem → 40rem breakpoint. */
  width: var(--gyanpradip-sidebar-width, 30rem);
}

/* Sidebar panel — small inline inset so filter rows and their hover/focus rings
   clear the clipped column edge (the column is overflow:clip for the collapse anim).
   Scoped to .gyanpradip-filters-form-vertical (desktop sidebar only) — NOT the container —
   so it never overrides the mobile drawer's own padding, which renders inside the same
   .gyanpradip-filters-container-vertical in the Vertical layout. */
.gyanpradip-filters-form-vertical .gyanpradip-filters-panel {
  padding-inline: 0.4rem;
}

/* 0.8rem gap between every filter option row (regular list + color swatches).
   Sidebar-scoped so the drawer's own 1.2rem spacing (via .gyanpradip-filters-mobile__item)
   stays untouched. Adjacent-sibling → no leading gap on the first row; hidden show-more
   rows (display:none) don't create phantom gaps. */
.gyanpradip-filters-form-vertical .gyanpradip-filter-item + .gyanpradip-filter-item {
  margin-top: 0.8rem;
}

/* --- Smooth "Show more / Show less" reveal --------------------------------
   show-more.js toggles `.hidden` (display:none !important) on each `.show-more-item`,
   so the default expand/collapse is an instant jump. In the sidebar we keep the extra
   items in flow and animate a grid-row 0fr↔1fr + fade + gap instead, for a smooth
   accordion reveal. The `!important` + higher specificity beats `.hidden`. */
.gyanpradip-filters-form-vertical .gyanpradip-filter-item.show-more-item {
  display: grid !important;
  grid-template-rows: 0fr;
  opacity: 0;
  margin-top: 0;
  transition: grid-template-rows 0.35s ease, opacity 0.3s ease,
    margin-top 0.35s ease;
}

/* The grid child must be able to shrink to 0 and clip while the row collapses. */
.gyanpradip-filters-form-vertical .gyanpradip-filter-item.show-more-item > * {
  min-height: 0;
  overflow: hidden;
}

/* Expanded state = the item no longer carries `.hidden` (removed by show-more.js). */
.gyanpradip-filters-form-vertical
  .gyanpradip-filter-item.show-more-item:not(.hidden) {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 0.8rem;
}

@media (prefers-reduced-motion: reduce) {
  .gyanpradip-filters-form-vertical .gyanpradip-filter-item.show-more-item {
    transition: none;
  }
}

/* Bar-level active-filter pills row + divider (below the toolbar, above the grid).
   Hidden until at least one active filter exists — driven by the grid's :has(). The
   drawer's own gates are scoped to .gyanpradip-filters-container-drawer and don't reach these. */
.gyanpradip-filters-pill--vertical,
.gyanpradip-filter-divider--vertical {
  display: none;
}

.gyanpradip-filters-grid:has(
    .gyanpradip-active-filters-desktop gyanpradip-filter-remove
  )
  .gyanpradip-filters-pill--vertical {
  display: block;
}

.gyanpradip-filters-grid:has(
    .gyanpradip-active-filters-desktop gyanpradip-filter-remove
  )
  .gyanpradip-filter-divider--vertical {
  display: block;
}
/* END_BLOCK:gyanpradip-filters */

/* START_BLOCK:icon (INDEX:144) */
.icon-block {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size, 24px);
    height: var(--icon-size, 24px);
    color: var(--icon-color, var(--color-icon, currentColor));
    flex-shrink: 0;
  }

  .icon-block svg {
    width: 100%;
    height: 100%;
  }

  .icon-block__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .icon-block__link {
    display: inline-flex;
    text-decoration: none;
    color: inherit;
  }
/* END_BLOCK:icon */

/* START_BLOCK:image-card (INDEX:145) */
/* image-card — public block.
     Reference design: blueprint/theme-blocks/image-card-block.png
     Spec: blueprint/skill/HOMEPAGE_SECTIONS_PLAN.md §11 */

  .image-card-link {
    text-decoration: none;
    color: inherit;
    display: contents;
  }

  .image-card {
    position: relative;
    isolation: isolate;
    width: 100%;
    aspect-ratio: var(--image-card-aspect, 3 / 4);
    overflow: hidden;
    /* border-radius / border-* come from visual-style-vars via .border-style */
  }

  .image-card__media {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .image-card__image,
  .image-card__placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--image-card-img-pos, center center);
  }

  .image-card__placeholder {
    background: rgb(from var(--color-foreground) r g b / 5%);
  }

  .image-card__image--mobile {
    display: none;
  }

  @media (max-width: 749px) {
    .image-card:has(.image-card__image--mobile) .image-card__image--desktop {
      display: none;
    }
    .image-card__image--mobile {
      display: block;
    }
  }

  .image-card__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
  }

  .image-card__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: var(--image-card-content-v, space-between);
    align-items: var(--image-card-content-h, flex-start);
    padding-block-start: var(--padding-block-start, 32px);
    padding-block-end: var(--padding-block-end, 32px);
    padding-inline-start: var(--padding-inline-start, 32px);
    padding-inline-end: var(--padding-inline-end, 32px);
    height: 100%;
    width: 100%;
    gap: 12px;
  }

  .image-card__content > * {
    max-width: var(--image-card-content-max-w, 100%);
  }

  @media (max-width: 749px) {
    .image-card__content {
      padding-block-start: calc(var(--padding-block-start, 32px) * var(--padding-mobile-scale, 0.8));
      padding-block-end: calc(var(--padding-block-end, 32px) * var(--padding-mobile-scale, 0.8));
      padding-inline-start: calc(var(--padding-inline-start, 32px) * var(--padding-mobile-scale, 0.8));
      padding-inline-end: calc(var(--padding-inline-end, 32px) * var(--padding-mobile-scale, 0.8));
    }
  }
/* END_BLOCK:image-card */

/* START_BLOCK:image (INDEX:146) */
.image-block {
    width: var(--img-w, fit-content);
    min-width: var(--img-min-w, 0px);
    border-style: var(--img-border-style, none);
    border-width: var(--img-border-width, 0);
    border-color: rgba(from var(--color-border) r g b / var(--img-border-opacity, 1));
    border-radius: var(--img-radius, 0);
    overflow: hidden;
    padding-top: var(--img-pt, 0);
    padding-bottom: var(--img-pb, 0);
    padding-left: var(--img-pl, 0);
    padding-right: var(--img-pr, 0);
  }

  .image-block__link {
    display: block;
    text-decoration: none;
  }

  .image-block__media { position: relative; }

  .image-block__media--ratio {
    aspect-ratio: var(--img-ratio, auto);
  }

  .image-block__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .image-block__media--ratio .image-block__img {
    position: absolute;
    inset: 0;
  }

  .image-block__media--placeholder {
    background: rgb(from var(--color-foreground) r g b / 4%);
    border-radius: var(--img-radius, 0);
    overflow: hidden;
  }

  .image-block__placeholder {
    width: 100%;
    height: 100%;
    fill: rgb(from var(--color-foreground) r g b / 60%);
  }

  .image-block__media--ratio .image-block__placeholder {
    position: absolute;
    inset: 0;
    object-fit: cover;
  }

  .image-block__mobile-only { display: none; }

  @media screen and (max-width: 749px) {
    .image-block {
      width: var(--img-w-mobile, var(--img-w, fit-content));
      min-width: var(--img-min-w-mobile, 0px);
      padding-top: calc(var(--img-pt, 0) * var(--img-mobile-scale, 0.8));
      padding-bottom: calc(var(--img-pb, 0) * var(--img-mobile-scale, 0.8));
      padding-left: calc(var(--img-pl, 0) * var(--img-mobile-scale, 0.8));
      padding-right: calc(var(--img-pr, 0) * var(--img-mobile-scale, 0.8));
    }

    .image-block__mobile-only { display: block; }
    .image-block__mobile-only ~ .image-block__img { display: none; }
  }
/* END_BLOCK:image */

/* START_BLOCK:menu (INDEX:147) */
.menu-block {
    padding-top: var(--menu-block-pt, 0);
    padding-bottom: var(--menu-block-pb, 0);
    padding-inline-start: var(--menu-block-pl, 0);
    padding-inline-end: var(--menu-block-pr, 0);
  }

  @media (max-width: 749px) {
    .menu-block {
      padding-top: calc(var(--menu-block-pt, 0) * var(--menu-block-mobile-scale, 0.8));
      padding-bottom: calc(var(--menu-block-pb, 0) * var(--menu-block-mobile-scale, 0.8));
      padding-inline-start: calc(var(--menu-block-pl, 0) * var(--menu-block-mobile-scale, 0.8));
      padding-inline-end: calc(var(--menu-block-pr, 0) * var(--menu-block-mobile-scale, 0.8));
    }
  }

  .menu-block__heading {
    margin-top: 0;
    margin-bottom: 2.5rem;
  }

  @media (min-width: 750px) {
    .menu-block__heading {
      margin-bottom: 4rem;
    }
  }

  .menu-block__list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .menu-block__item + .menu-block__item {
    margin-top: 2rem;
  }

  .menu-block__link {
    display: block;
    text-decoration: none;
    color: var(--color-foreground);
    transition: padding-inline-start 0.2s ease;
    font-size: 1.6rem;
  }

  .menu-block__link:hover {
    text-decoration: underline;
    text-underline-offset: 0.3rem;
    padding-inline-start: 0.5rem;
  }
/* END_BLOCK:menu */

/* START_BLOCK:newsletter (INDEX:148) */
.newsletter-block {
    width: var(--nl-w, 100%);
    padding-block: var(--nl-pt, 0) var(--nl-pb, 0);
    padding-inline: var(--nl-pl, 0) var(--nl-pr, 0);
    align-self: var(--nl-align, flex-start);
  }

  .newsletter-block--align-flex-start { margin-inline-end: auto; }
  .newsletter-block--align-center { margin-inline: auto; }
  .newsletter-block--align-flex-end { margin-inline-start: auto; }

  /* ── Input group (flex container for field + outside button) ── */
  .newsletter-block__input-group {
    display: flex;
    align-items: center;
  }

  /* ── Field wrap: positioning context for icon + input + inside button ── */
  .newsletter-block__field {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
  }

  /* Input fills the field wrap */
  .newsletter-block input.newsletter-block__input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    border-radius: var(--nl-radius, 3rem);
  }

  /* ── Input border variants ────────────────────────────── */
  /* Box (all borders) — inherits background, text, and border from color scheme via base.css */

  /* Underline — transparent bg, only bottom border */
  .newsletter-block.newsletter--border-underline input.newsletter-block__input {
    background-color: transparent;
    border: none;
    border-block-end: var(--input-border-width, 0.1rem) solid var(--color-input-border);
    border-radius: 0;
    padding-inline-start: 0;
  }

  /* None — merchant-controlled bg + text, no border */
  .newsletter-block.newsletter--border-none input.newsletter-block__input {
    border: none;
    background-color: var(--nl-field-bg, var(--color-input-background));
    color: var(--nl-field-text, var(--color-input-text));
  }

  /* Placeholder follows the field text color in none mode */
  .newsletter-block.newsletter--border-none input.newsletter-block__input::placeholder {
    color: color-mix(in srgb, var(--nl-field-text, var(--color-input-text)) 55%, transparent);
  }

  /* ── Email icon — positioned relative to .field (input only) ── */
  .newsletter-block__input-icon {
    position: absolute;
    inset-inline-start: 1.6rem;
    inset-block-start: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    color: color-mix(in srgb, var(--color-input-text) 50%, transparent);
    pointer-events: none;
    z-index: 1;
  }

  .newsletter-block__input-icon svg {
    width: 1.8rem;
    height: 1.8rem;
    display: block;
  }

  .newsletter--has-icon .newsletter-block__input {
    padding-inline-start: 4.8rem;
  }

  /* Underline + icon: flush-left icon (no leading gap), tighter text padding */
  .newsletter-block.newsletter--border-underline .newsletter-block__input-icon {
    inset-inline-start: 0;
  }

  .newsletter-block.newsletter--border-underline.newsletter--has-icon input.newsletter-block__input {
    padding-inline-start: 3rem;
  }

  /* ── Button: base (specificity boost to beat global .button) ── */
  .newsletter-block .newsletter-block__submit {
    flex-shrink: 0;
    border-radius: var(--nl-btn-radius, 5rem);
  }

  /* ── Button position: outside + stacked (default) ─────── */
  .newsletter--position-outside.newsletter--layout-stacked .newsletter-block__input-group {
    flex-direction: column;
    align-items: stretch;
    gap: 0.8rem;
  }

  .newsletter--position-outside.newsletter--layout-stacked .newsletter-block__submit {
    width: 100%;
    margin: 0;
  }

  /* ── Button position: outside + horizontal ────────────── */
  .newsletter--position-outside.newsletter--layout-horizontal .newsletter-block__input-group {
    flex-direction: row;
    align-items: stretch;
    gap: 0.8rem;
  }

  .newsletter--position-outside.newsletter--layout-horizontal .newsletter-block__submit {
    margin: 0;
    height: auto;
  }

  /* ── Button position: inside (button sits inside the field wrap) ── */
  .newsletter--position-inside .newsletter-block__input {
    padding-inline-end: 6.4rem;
  }

  .newsletter--position-inside.newsletter--display-icon .newsletter-block__input {
    padding-inline-end: 5.6rem;
  }

  .newsletter--position-inside .newsletter-block__submit {
    position: absolute;
    inset-inline-end: 0.4rem;
    inset-block: 0.4rem;
    height: auto;
    margin: 0;
    transform: none;
    padding-block: 0;
    padding-inline: 1.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Icon button inside — square aspect ratio, icon centered */
  .newsletter--position-inside.newsletter--display-icon .newsletter-block__submit {
    aspect-ratio: 1;
    width: auto;
    padding: 0;
  }

  /* SVG size within icon-mode submit button */
  .newsletter--display-icon .newsletter-block__submit svg {
    width: 2rem;
    height: 2rem;
    display: block;
    flex-shrink: 0;
  }

  /* ── Link-style button ────────────────────────────────── */
  .newsletter-block__link-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--color-foreground);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: var(--text-body-size);
    font-weight: 500;
    text-decoration: none;
    transition: opacity 0.2s ease;
  }

  .newsletter-block__link-btn:hover {
    opacity: 0.7;
  }

  /* ── Terms / success / error ──────────────────────────── */
  .newsletter-block__terms {
    margin-block-start: 0.8rem;
    opacity: 0.6;
  }

  .newsletter-block__success,
  .newsletter-block__error {
    margin-block-end: 1rem;
    font-size: 0.875rem;
  }

  /* ── Mobile ───────────────────────────────────────────── */
  @media screen and (max-width: 749px) {
    .newsletter-block {
      width: var(--nl-wm, 100%);
      padding-block:
        calc(var(--nl-pt, 0) * var(--nl-mobile-scale, 0.8))
        calc(var(--nl-pb, 0) * var(--nl-mobile-scale, 0.8));
      padding-inline:
        calc(var(--nl-pl, 0) * var(--nl-mobile-scale, 0.8))
        calc(var(--nl-pr, 0) * var(--nl-mobile-scale, 0.8));
    }
  }
/* END_BLOCK:newsletter */

/* START_BLOCK:page (INDEX:149) */
.page-block {
    padding-top: var(--pg-pt, 0);
    padding-bottom: var(--pg-pb, 0);
    padding-left: var(--pg-pl, 0);
    padding-right: var(--pg-pr, 0);
    background: var(--pg-bg, transparent);
  }

  .page-block__title {
    margin-bottom: 1.2rem;
  }

  @media screen and (max-width: 749px) {
    .page-block {
      padding-top: calc(var(--pg-pt, 0) * var(--pg-mobile-scale, 0.8));
      padding-bottom: calc(var(--pg-pb, 0) * var(--pg-mobile-scale, 0.8));
      padding-left: calc(var(--pg-pl, 0) * var(--pg-mobile-scale, 0.8));
      padding-right: calc(var(--pg-pr, 0) * var(--pg-mobile-scale, 0.8));
    }
  }
/* END_BLOCK:page */

/* START_BLOCK:product-accelerated-checkout (INDEX:150) */
/* Accelerated checkout takes its own full-width row below quantity + add to cart */
  .product-accelerated-checkout-block {
    flex: 1 1 100%;
    width: 100%;
  }

  .product-accelerated-checkout-block .shopify-payment-button,
  .product-accelerated-checkout-block button.shopify-payment-button__button--unbranded {
    width: 100%;
  }

  /* Match the Add to cart button's height (--input-height) so the two sit at
     the same height when split 50/50 on the buy-buttons row. */
  .product-accelerated-checkout-block button.shopify-payment-button__button--unbranded {
    height: var(--input-height, 5rem);
    min-height: var(--input-height, 5rem);
  }
/* END_BLOCK:product-accelerated-checkout */

/* START_BLOCK:product-add-to-cart (INDEX:151) */
/* Add to cart fills the remaining width to the right of the quantity field */
  .product-add-to-cart-block {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Override .button's display:grid — keeps icon + text on one inline row */
  .product-add-to-cart-block .product-form__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    width: 100%;
    min-width: 0;
    height: var(--input-height, 5rem);
    min-height: var(--input-height, 5rem);
  }

  /* SVG sizing; gap on the parent handles spacing so no margin-right needed */
  .product-add-to-cart-block .product-form__submit > svg {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    max-width: none;
    margin-right: 0;
  }

  /* Icon-only: drop side padding; flex centering already handled above */
  .product-add-to-cart-block .product-form__submit.button--icon-only {
    padding-inline: 0;
    padding-block: 0;
  }

  /* ── loading state ─────────────────────────────────────────────────────── */
  /* While the cart request is in flight (JS adds .loading), hide the label and
     icon so only the centered spinner is visible — not text + spinner at once. */
  .product-add-to-cart-block .product-form__submit.loading {
    position: relative;
    pointer-events: none;
  }

  .product-add-to-cart-block .product-form__submit.loading > * {
    visibility: hidden;
  }

  .product-add-to-cart-block .product-form__submit.loading::after {
    border-color: currentColor;
    border-left-color: transparent;
    top: 50%;
    left: 50%;
    margin: -10px 0 0 -10px;
  }
/* END_BLOCK:product-add-to-cart */

/* START_BLOCK:product-assistance (INDEX:152) */
/* product-assistance — public block, addable only inside
     sections/product-info-tabs.liquid (the only section that declares it in
     its schema "blocks"). Renders the aside card next to the tab list
     (delivery / payment / packaging / return info) into
     .product-content-tabs-layout__aside via a filtered content_for 'block'
     call in the parent section — it never joins the tablist/tabpanel group
     the private _product-info-tab-* blocks form. Deliberately NOT prefixed
     with an underscore: unlike those tab blocks, merchants need to add and
     configure this one themselves via "Add block", and private blocks don't
     appear in the theme editor's block picker. */

  .product-assistance {
    background: var(--product-assistance-bg, #f6f3ec);
    border: 0.1rem solid var(--product-assistance-border, rgb(from var(--color-foreground) r g b / 10%));
    border-radius: var(--product-assistance-radius, 0.8rem);
    padding: 2rem 2.2rem;
  }

  .product-assistance__heading {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin: 0 0 1.8rem;
    padding-bottom: 1.4rem;
    border-bottom: 0.1rem solid rgb(from var(--color-foreground) r g b / 10%);
  }

  .product-assistance__heading-icon {
    flex-shrink: 0;
    display: inline-flex;
    width: 2.2rem;
    height: 2.2rem;
  }

  .product-assistance__heading-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .product-assistance__heading-text {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--product-assistance-accent, var(--color-foreground));
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }

  .product-assistance__list {
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .product-assistance__item {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
  }

  .product-assistance__item-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-top: 0.2rem;
  }

  .product-assistance__item-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .product-assistance__item-title {
    margin: 0 0 0.3rem;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--product-assistance-accent, var(--color-foreground));
  }

  .product-assistance__item-text {
    margin: 0;
    font-size: 1.3rem;
    line-height: 1.5;
    color: rgb(from var(--color-foreground) r g b / 65%);
  }

  .product-assistance__item-text p {
    margin: 0;
  }
/* END_BLOCK:product-assistance */

/* START_BLOCK:product-card (INDEX:153) */
.product-card-block {
    width: var(--pcb-w, fit-content);
    padding-top: var(--pcb-pt, 0);
    padding-bottom: var(--pcb-pb, 0);
    padding-left: var(--pcb-pl, 0);
    padding-right: var(--pcb-pr, 0);
    border-style: var(--pcb-border-style, none);
    border-width: var(--pcb-border-width, 0);
    border-color: rgba(from var(--color-border) r g b / var(--pcb-border-opacity, 0.12));
    border-radius: var(--pcb-corner-radius, 0);
    overflow: hidden;
  }

  @media screen and (max-width: 749px) {
    .product-card-block {
      width: var(--pcb-w-mobile, var(--pcb-w, fit-content));
      padding-top: calc(var(--pcb-pt, 0) * var(--pcb-mobile-scale, 0.8));
      padding-bottom: calc(var(--pcb-pb, 0) * var(--pcb-mobile-scale, 0.8));
      padding-left: calc(var(--pcb-pl, 0) * var(--pcb-mobile-scale, 0.8));
      padding-right: calc(var(--pcb-pr, 0) * var(--pcb-mobile-scale, 0.8));
    }
  }
/* END_BLOCK:product-card */

/* START_BLOCK:product-quantity (INDEX:154) */
/* Quantity holds its natural width on the left of the buy-buttons row */
  .product-quantity-block {
    flex: 0 0 auto;
    margin-bottom: 0;
  }

  /* Inline label: label sits left of the stepper on one flex row */
  .product-quantity-block--label-inline {
    display: flex;
    align-items: center;
    gap: 1.2rem;
  }

  .product-quantity-block--label-inline .quantity__label {
    margin-bottom: 0;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Remap input-field tokens → secondary-button tokens so the quantity stepper
     automatically inherits Outline Button colors from the active Color Scheme. */
  .product-quantity-block .quantity {
    --color-input-background: var(--color-secondary-button-background);
    --color-input-border:     var(--color-secondary-button-border);
    --color-input-text:       var(--color-secondary-button-text);
  }

  /* No hover color change on the quantity stepper. */
  .product-quantity-block .quantity:hover {
    background-color: var(--color-secondary-button-background);
  }

  /* Row gains a flex layout only once product-info.js has moved the
     "merge next to quantity" inventory-status block in here (see
     blocks/_inventory-status.liquid) — untouched otherwise, so the
     default above/inline label layouts are unaffected. */
  .product-quantity-block__row:has(> .product-variant-inventory--merged-quantity) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.2rem;
  }
/* END_BLOCK:product-quantity */

/* START_BLOCK:social-media (INDEX:155) */
/* ── Block container ──────────────────────────────────────── */
  .social-media-block {
    width: var(--si-w, 100%);
    padding-top: var(--si-pt, 0);
    padding-bottom: var(--si-pb, 0);
    padding-inline-start: var(--si-pl, 0);
    padding-inline-end: var(--si-pr, 0);
  }

  @media screen and (max-width: 749px) {
    .social-media-block {
      width: var(--si-wm, 100%);
      padding-top: calc(var(--si-pt, 0) * var(--si-mobile-scale, 0.8));
      padding-bottom: calc(var(--si-pb, 0) * var(--si-mobile-scale, 0.8));
      padding-inline-start: calc(var(--si-pl, 0) * var(--si-mobile-scale, 0.8));
      padding-inline-end: calc(var(--si-pr, 0) * var(--si-mobile-scale, 0.8));
    }
  }

  /* ── Icon list layout ─────────────────────────────────────── */
  .social-media-block .list-social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--si-gap, 1rem);
    justify-content: flex-start;
  }

  /* Column constraints — max-width caps the flex row at N button-widths.
     Formula: N × btn-size + (N-1) × gap */
  .social-media-block--cols-2 .list-social {
    max-width: calc(2 * var(--si-btn-size, 4rem) + 1 * var(--si-gap, 1rem));
  }

  .social-media-block--cols-3 .list-social {
    max-width: calc(3 * var(--si-btn-size, 4rem) + 2 * var(--si-gap, 1rem));
  }

  .social-media-block--cols-4 .list-social {
    max-width: calc(4 * var(--si-btn-size, 4rem) + 3 * var(--si-gap, 1rem));
  }

  /* ── Button base — shared by all style variants ───────────── */
  .social-media-block .list-social__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--si-btn-size, 4rem);
    height: var(--si-btn-size, 4rem);
    padding: 0;
    text-decoration: none;
    flex-shrink: 0;
    transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
  }

  /* Suppress the scale-on-hover from gyanpradip-list-social.css */
  .social-media-block .list-social__link:hover svg {
    transform: none;
  }

  /* Icon SVG — target the <svg> directly (not the .icon class) because some
     snippets (twitter, facebook, pinterest) omit .icon and hardcode width/height
     attributes. The CSS width/height here overrides those inline attributes so
     every glyph renders at the same fixed size (default 1.8rem). */
  .social-media-block .list-social__link svg {
    width: var(--si-icon-size, 1.8rem);
    height: var(--si-icon-size, 1.8rem);
    fill: currentColor;
    flex-shrink: 0;
  }

  /* ── Shape variants ───────────────────────────────────────── */
  .social-media-block--circle .list-social__link {
    border-radius: 50%;
  }

  .social-media-block--square .list-social__link {
    border-radius: 0;
  }

  .social-media-block--custom .list-social__link {
    border-radius: var(--si-radius, 0.8rem);
  }

  /* ── Style: Solid — inherits primary button colors ──────────── */
  .social-media-block--solid .list-social__link {
    background-color: var(--color-primary-button-background);
    border: var(--btn-border-width) solid var(--color-primary-button-border);
    /* Override per-icon brand colors set via inline style in social-media.liquid */
    color: var(--color-primary-button-text) !important;
  }

  .social-media-block--solid .list-social__link:hover {
    background-color: var(--color-primary-button-hover-background);
    border-color: var(--color-primary-button-hover-border);
    color: var(--color-primary-button-hover-text) !important;
    opacity: 1;
  }

  /* ── Style: Outline — inherits secondary button colors ───────── */
  .social-media-block--outline .list-social__link {
    background-color: var(--color-secondary-button-background);
    border: var(--btn-border-width) solid var(--color-secondary-button-border);
    /* Override per-icon brand colors for a consistent themed look */
    color: var(--color-secondary-button-text) !important;
  }

  .social-media-block--outline .list-social__link:hover {
    background-color: var(--color-secondary-button-hover-background);
    border-color: var(--color-secondary-button-hover-border);
    color: var(--color-secondary-button-hover-text) !important;
    opacity: 1;
    transform: scale(1.06);
  }
/* END_BLOCK:social-media */

/* START_BLOCK:text (INDEX:156) */
.text-block > * {
      word-break: break-word;
  }
  .text-block>*:last-child {
    margin-block-end: 0;
  }
  .text-block>*:first-child {
    margin-block-start: 0;
}
  .text-block {
    min-width: 0;
    max-width: min(100%, var(--text-block-max-width, 100%));
    overflow: hidden;
    width: var(--text-block-width, fit-content);
    padding-top: var(--text-block-padding-top, 0);
    padding-bottom: var(--text-block-padding-bottom, 0);
    padding-left: var(--text-block-padding-left, 0);
    padding-right: var(--text-block-padding-right, 0);
    text-align: var(--text-block-align, var(--content-text-align, left));
  }
  @media screen and (max-width: 749px) {
    .text-block {
      width: var(--text-block-width-mobile, var(--text-block-width, fit-content));
      padding-top: calc(var(--text-block-padding-top, 0) * var(--text-block-mobile-scale, 0.8));
      padding-bottom: calc(var(--text-block-padding-bottom, 0) * var(--text-block-mobile-scale, 0.8));
      padding-left: calc(var(--text-block-padding-left, 0) * var(--text-block-mobile-scale, 0.8));
      padding-right: calc(var(--text-block-padding-right, 0) * var(--text-block-mobile-scale, 0.8));
      text-align: var(--text-block-align-mobile, var(--text-block-align, var(--content-text-align, left)));
    }
  }

  .text-block--reveal text-layered {
    display: block;
    width: 100%;
  }
/* END_BLOCK:text */

/* START_BLOCK:video (INDEX:157) */
.video-block {
    min-width: 0;
    max-width: 100%;
    width: var(--video-block-width, fit-content);
    padding-top: var(--video-block-padding-top, 0);
    padding-bottom: var(--video-block-padding-bottom, 0);
    padding-left: var(--video-block-padding-left, 0);
    padding-right: var(--video-block-padding-right, 0);
  }

  /**
   * Width "Fit" caps the media box by max-height and derives width from aspect ratio.
   * Definite `width: calc(...)` + `max-width: 100%` avoids cyclic `min(100%, …)` collapse when the
   * video block is shrink-wrapped inside flex rows (e.g. marquee).
   */
  @media screen and (min-width: 750px) {
    .video-block--width-fit .video-block__media--ratio {
      width: calc(var(--video-block-fit-max-height, 4.8rem) * var(--video-block-fit-ar-multiplier, 1.7777777778));
      max-width: 100%;
      max-height: var(--video-block-fit-max-height, 4.8rem);
      height: auto;
      margin-inline: auto;
    }

    .video-block--width-fit .video-block__media--ratio video,
    .video-block--width-fit .video-block__media--ratio iframe {
      object-fit: contain;
    }

    .video-block--width-fit .video-block__media:not(.video-block__media--ratio):not(.video-block__media--placeholder) {
      width: auto;
      max-width: 100%;
      max-height: var(--video-block-fit-max-height, 4.8rem);
    }

    .video-block--width-fit .video-block__media:not(.video-block__media--ratio):not(.video-block__media--placeholder) video {
      width: auto;
      max-width: 100%;
      max-height: var(--video-block-fit-max-height, 4.8rem);
      height: auto;
      object-fit: contain;
    }

    .video-block--width-fit .video-block__play-button {
      width: 4.4rem;
      height: 4.4rem;
    }

    .video-block--width-fit .video-block__play-button .icon {
      width: 1.6rem;
      height: 1.6rem;
    }
  }

  @media screen and (max-width: 749px) {
    .video-block--width-fit-mobile .video-block__media--ratio {
      width: calc(var(--video-block-fit-max-height, 4.8rem) * var(--video-block-fit-ar-multiplier, 1.7777777778));
      max-width: 100%;
      max-height: var(--video-block-fit-max-height, 4.8rem);
      height: auto;
      margin-inline: auto;
    }

    .video-block--width-fit-mobile .video-block__media--ratio video,
    .video-block--width-fit-mobile .video-block__media--ratio iframe {
      object-fit: contain;
    }

    .video-block--width-fit-mobile .video-block__media:not(.video-block__media--ratio):not(.video-block__media--placeholder) {
      width: auto;
      max-width: 100%;
      max-height: var(--video-block-fit-max-height, 4.8rem);
    }

    .video-block--width-fit-mobile .video-block__media:not(.video-block__media--ratio):not(.video-block__media--placeholder) video {
      width: auto;
      max-width: 100%;
      max-height: var(--video-block-fit-max-height, 4.8rem);
      height: auto;
      object-fit: contain;
    }

    .video-block--width-fit-mobile .video-block__play-button {
      width: 4.4rem;
      height: 4.4rem;
    }

    .video-block--width-fit-mobile .video-block__play-button .icon {
      width: 1.6rem;
      height: 1.6rem;
    }
  }

  .video-block--bordered .video-block__media {
    border: var(--video-block-border-thickness, 1px) solid rgb(from var(--color-foreground) r g b / var(--video-block-border-opacity, 0.12));
  }

  .video-block__media {
    position: relative;
    overflow: hidden;
    width: 100%;
    border-radius: var(--video-block-corner-radius, 0);
  }

  .video-block__media video,
  .video-block__media iframe {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: none;
  }

  .video-block__media--ratio {
    aspect-ratio: var(--video-block-aspect-ratio);
  }

  .video-block__media--placeholder {
    aspect-ratio: 16 / 9;
    background: rgb(from var(--color-foreground) r g b / 4%);
    color: var(--color-foreground);
  }

  .video-block__media--placeholder .video-block__placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: currentColor;
    object-fit: cover;
    object-position: center center;
  }

  .video-block__poster {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    background: rgb(from var(--color-foreground) r g b / 6%);
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    z-index: 2;
  }

  .video-block__poster img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .video-block__play-button {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 6.2rem;
    height: 6.2rem;
    border-radius: 50%;
    background-color: var(--color-background);
    border: 0.1rem solid rgb(from var(--color-foreground) r g b / 10%);
    color: var(--color-foreground);
    transition: transform 0.1s ease;
  }

  .video-block__play-button:hover {
    transform: scale(1.1);
  }

  .video-block__play-button .icon {
    width: 2rem;
    height: 2rem;
  }

  .video-block__play-button .icon-play {
    margin-left: 0.2rem;
  }

  .video-block__play-button--static {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    pointer-events: none;
  }

  .video-block__play-button--static:hover {
    transform: translate(-50%, -50%);
  }

  @media screen and (max-width: 749px) {
    .video-block {
      width: var(--video-block-width-mobile, var(--video-block-width, fit-content));
      padding-top: calc(var(--video-block-padding-top, 0) * var(--video-block-mobile-scale, 0.8));
      padding-bottom: calc(var(--video-block-padding-bottom, 0) * var(--video-block-mobile-scale, 0.8));
      padding-left: calc(var(--video-block-padding-left, 0) * var(--video-block-mobile-scale, 0.8));
      padding-right: calc(var(--video-block-padding-right, 0) * var(--video-block-mobile-scale, 0.8));
    }
  }
/* END_BLOCK:video */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:background-video (INDEX:164) */
@media (prefers-reduced-motion: reduce) {
    video-background-component video {
      display: none;
    }
  }
/* END_SNIPPET:background-video */

/* START_SNIPPET:breadcrumb-nav (INDEX:166) */
/* ── breadcrumb-nav.css (migrated) ────────────────────────────────────── */
  .breadcrumbs__list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .breadcrumbs__item + .breadcrumbs__item {
    margin-left: 15px;
    padding-left: 15px;
    position: relative;
  }

  .breadcrumbs__item + .breadcrumbs__item::before {
    position: absolute;
    content: "/";
    left: -4px;
  }

  .breadcrumbs__link:hover {
    text-decoration: underline;
    text-underline-offset: 0.1rem;
  }
/* END_SNIPPET:breadcrumb-nav */

/* START_SNIPPET:button (INDEX:167) */
.button-block:is(.button, .button--secondary) {
    width: var(--button-width-desktop, fit-content);
    text-align: center;
    white-space: nowrap;
    padding-block-start: var(--button-block-padding-block-start, var(--btn-padding-y));
    padding-block-end: var(--button-block-padding-block-end, var(--btn-padding-y));
    padding-inline-start: var(--button-block-padding-inline-start, var(--btn-padding-x));
    padding-inline-end: var(--button-block-padding-inline-end, var(--btn-padding-x));
  }

  .button-block.link {
    width: var(--button-width-desktop, fit-content);
    text-align: center;
    white-space: nowrap;
  }

  @media screen and (max-width: 749px) {
    .button-block:is(.button, .button--secondary) {
      width: var(--button-width-mobile, fit-content);
      padding-block-start: var(
        --button-block-padding-block-start-mobile,
        var(--button-block-padding-block-start, var(--btn-padding-y))
      );
      padding-block-end: var(
        --button-block-padding-block-end-mobile,
        var(--button-block-padding-block-end, var(--btn-padding-y))
      );
      padding-inline-start: var(
        --button-block-padding-inline-start-mobile,
        var(--button-block-padding-inline-start, var(--btn-padding-x))
      );
      padding-inline-end: var(
        --button-block-padding-inline-end-mobile,
        var(--button-block-padding-inline-end, var(--btn-padding-x))
      );
    }

    .button-block.link {
      width: var(--button-width-mobile, fit-content);
    }
  }

  a.button-block.button.button--with-icon,
  a.button-block.button--secondary.button--with-icon,
  a.button-block.link.button--with-icon,
  button.button-block.button.button--with-icon,
  button.button-block.button--secondary.button--with-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    white-space: nowrap;
  }

  .button--with-icon .button__label {
    line-height: 1;
  }

  .button--with-icon .button__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    flex-shrink: 0;
  }

  .button--with-icon .button__icon svg {
    width: 1.6rem;
    height: 1.6rem;
  }

  .button--with-icon .button__icon svg[viewBox='0 0 256 256'] {
    width: 1.45rem;
    height: 1.45rem;
  }

  [dir="rtl"] .button--with-icon .button__icon svg:not(.icon--no-rtl-flip) {
    transform: scaleX(-1);
  }
/* END_SNIPPET:button */

/* START_SNIPPET:custom-text-style (INDEX:181) */
.custom-typography,
  .custom-typography > * {
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    font-size: var(--font-size);
    line-height: var(--line-height);
    letter-spacing: var(--letter-spacing);
    text-transform: var(--text-transform);
    text-wrap: var(--text-wrap);
  }
/* END_SNIPPET:custom-text-style */

/* START_SNIPPET:flex-layout (INDEX:184) */
.flex-container {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: var(--flex-direction, column);
    justify-content: var(--justify-content, flex-start);
    align-items: var(--align-items, flex-start);
    column-gap: var(--column-gap, 12px);
    row-gap: var(--row-gap, 12px);
  }

  @media screen and (max-width: 749px) {
    .flex-container {
      flex-direction: var(--flex-direction-mobile, var(--flex-direction, column));
      justify-content: var(--justify-content-mobile, var(--justify-content, flex-start));
      align-items: var(--align-items-mobile, var(--align-items, flex-start));
    }
  }
/* END_SNIPPET:flex-layout */

/* START_SNIPPET:group (INDEX:188) */
.group-container {
    position: relative;
    width: var(--group-width, 100%);
    height: var(--group-height, fit-content);
    border-radius: var(--border-radius, 0);
    padding-block-start: var(--padding-block-start, 0);
    padding-block-end: var(--padding-block-end, 0);
    padding-inline-start: var(--padding-inline-start, 0);
    padding-inline-end: var(--padding-inline-end, 0);
  }

  /* clip (not hidden) clips to the corner radius WITHOUT creating a scroll
     container, so a radius here never breaks a sticky ancestor/descendant. */
  .group-container--clipped {
    overflow: clip;
  }

  /* Sticky column (desktop only). align-self + fit-content guarantee travel range
     even when the parent row uses align-items: center or the group Height is Fill.
     Requires a taller sibling in the same row to scroll past. */
  @media screen and (min-width: 750px) {
    .group-container--sticky {
      position: sticky;
      top: var(--sticky-offset, 0px);
      align-self: flex-start;
      height: fit-content;
    }
  }

  .group-content {
    position: relative;
    z-index: var(--layer-flat, 2);
    height: 100%;
  }

  .group-link {
    text-decoration: none;
    color: inherit;
    display: contents;
  }

  @media screen and (max-width: 749px) {
    .group-container {
      width: var(--group-width-mobile, var(--group-width, 100%));
      padding-block-start: calc(var(--padding-block-start, 0) * var(--padding-mobile-scale, 1));
      padding-block-end: calc(var(--padding-block-end, 0) * var(--padding-mobile-scale, 1));
      padding-inline-start: calc(var(--padding-inline-start, 0) * var(--padding-mobile-scale, 1));
      padding-inline-end: calc(var(--padding-inline-end, 0) * var(--padding-mobile-scale, 1));
    }
  }
/* END_SNIPPET:group */

/* START_SNIPPET:gyanpradip-compare-bar (INDEX:193) */
/* Sticky compare bar — owned by snippets/gyanpradip-compare-bar.liquid. */

  /* Mobile reserves footer-safe space equal to the bar's live height (set from JS). */
  body {
    padding-bottom: var(--gyanpradip-compare-bar-space, 0);
  }

  .gyanpradip-compare-bar {
    position: fixed;
    z-index: 20;
    left: 50%;
    bottom: 1.6rem;
    width: min(120rem, calc(100% - 3.2rem));
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    padding: 1.6rem 2rem;
    background: var(--color-background);
    color: var(--color-foreground);
    border: 0.1rem solid rgb(from var(--color-foreground) r g b / 12%);
    border-radius: 1.6rem;
    box-shadow: 0 1rem 4rem rgb(from var(--color-foreground) r g b / 14%);
    transform: translate(-50%, calc(100% + 3.2rem));
    transition: transform 0.35s ease, opacity 0.35s ease;
    opacity: 0;
    pointer-events: none;
  }

  body.is-comparing .gyanpradip-compare-bar {
    transform: translate(-50%, 0);
    opacity: 1;
    pointer-events: auto;
  }

  /* Hide near the footer so it doesn't overlap it. Scoped under body.is-comparing so
     it out-specifies `body.is-comparing .gyanpradip-compare-bar` (which would otherwise
     keep the transform at translate(-50%, 0) and the bar would never slide away). */
  body.is-comparing .gyanpradip-compare-bar.is-hidden {
    transform: translate(-50%, calc(100% + 3.2rem));
    opacity: 0;
    pointer-events: none;
  }

  .gyanpradip-compare-bar__primary {
    display: flex;
    align-items: center;
    gap: 1.2rem;
  }

  .gyanpradip-compare-bar__counter {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    white-space: nowrap;
  }

  .gyanpradip-compare-bar__compare {
    margin: 0;
    flex-shrink: 0;
  }

  .gyanpradip-compare-bar__collapse {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    color: var(--color-foreground);
    cursor: pointer;
  }
  .gyanpradip-compare-bar__collapse .icon {
    width: 2rem;
    height: 2rem;
    transition: transform 0.25s ease;
  }
  .gyanpradip-compare-bar.is-expanded .gyanpradip-compare-bar__collapse .icon {
    transform: rotate(180deg);
  }

  .gyanpradip-compare-bar__collapsible {
    display: flex;
    align-items: center;
    gap: 1.6rem;
  }

  .gyanpradip-compare-bar__list {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
  }
  .gyanpradip-compare-bar__list::-webkit-scrollbar {
    height: 0.4rem;
  }
  .gyanpradip-compare-bar__list::-webkit-scrollbar-thumb {
    background: rgb(from var(--color-foreground) r g b / 25%);
    border-radius: 0.4rem;
  }

  .gyanpradip-compare-bar__thumb {
    position: relative;
    flex: 0 0 auto;
    width: 6.4rem;
    height: 6.4rem;
    border-radius: 0.8rem;
    overflow: hidden;
    scroll-snap-align: start;
    background: rgb(from var(--color-foreground) r g b / 4%);
  }
  .gyanpradip-compare-bar__thumb--placeholder {
    border: 0.15rem dashed rgb(from var(--color-foreground) r g b / 25%);
    background: transparent;
  }
  .gyanpradip-compare-bar__thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .gyanpradip-compare-bar__remove {
    position: absolute;
    top: 0.2rem;
    inset-inline-end: 0.2rem;
    width: 2rem;
    height: 2rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: var(--color-background);
    color: var(--color-foreground);
    box-shadow: 0 0.1rem 0.4rem rgb(from var(--color-foreground) r g b / 25%);
    cursor: pointer;
  }
  .gyanpradip-compare-bar__remove .icon,
  .gyanpradip-compare-bar__remove svg {
    width: 1rem;
    height: 1rem;
  }

  .gyanpradip-compare-bar__clear {
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* ---- Desktop: single row ---- */
  @media screen and (min-width: 992px) {
    .gyanpradip-compare-bar {
      flex-direction: row;
      align-items: center;
      gap: 2rem;
    }
    .gyanpradip-compare-bar__primary {
      order: 2;
      gap: 2rem;
    }
    .gyanpradip-compare-bar__collapsible {
      order: 1;
      flex: 1 1 auto;
      min-width: 0;
    }
    .gyanpradip-compare-bar__list {
      order: -1;
    }
    /* Collapse chevron is only for the mobile/tablet layout (≤ 991.98px). */
    .gyanpradip-compare-bar__collapse {
      display: none;
    }
  }

  /* ---- Mobile: full-width bar + collapsible Row B ---- */
  @media screen and (max-width: 991.98px) {
    /* Full width, flush to the screen edges — no left/right/bottom spacing. */
    .gyanpradip-compare-bar {
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      max-width: 100%;
      border-inline: none;
      border-block-end: none;
      border-radius: 1.6rem 1.6rem 0 0;
      /* No horizontal centering when full-width — slide straight down/up. */
      transform: translateY(100%);
    }
    body.is-comparing .gyanpradip-compare-bar {
      transform: translateY(0);
    }
    /* is-hidden is never set on mobile (JS reserves space instead); neutralize defensively. */
    body.is-comparing .gyanpradip-compare-bar.is-hidden {
      transform: translateY(100%);
    }

    /* Balanced top/bottom padding: the collapsed Row B must not add a column gap
       below Row A. Drop the parent gap and re-add it only when expanded. */
    .gyanpradip-compare-bar {
      gap: 0;
    }

    /* Counter stays left; Compare button + chevron pushed to the right edge. */
    .gyanpradip-compare-bar__primary {
      width: 100%;
    }
    .gyanpradip-compare-bar__compare {
      margin-inline-start: auto;
    }
    /* More compact solid button on small screens (out-specifies the base .button padding). */
    button.button.gyanpradip-compare-bar__compare {
      padding: 0.8rem 1.2rem;
    }

    .gyanpradip-compare-bar__collapsible {
      flex-wrap: wrap;
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      transition:
        max-height 0.3s ease,
        opacity 0.3s ease,
        margin-top 0.3s ease;
    }
    .gyanpradip-compare-bar.is-expanded .gyanpradip-compare-bar__collapsible {
      max-height: 40rem;
      opacity: 1;
      /* Equal spacing above (from Row A) and below (bar padding) the list. */
      margin-top: 1.6rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .gyanpradip-compare-bar,
    .gyanpradip-compare-bar__collapsible,
    .gyanpradip-compare-bar__collapse .icon {
      transition: none;
    }
  }
/* END_SNIPPET:gyanpradip-compare-bar */

/* START_SNIPPET:gyanpradip-ebook-badge (INDEX:194) */
/* Over-image pill (context: media) — matches the "+ই-বুক" mockup pill. */
  .gp-ebook-badge--media {
    position: absolute;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.45rem 0.9rem;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--color-background);
    background-color: rgb(from var(--color-foreground) r g b / 0.85);
    border-radius: 999rem;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 0.1rem 0.4rem rgb(from var(--color-foreground) r g b / 0.15);
  }

  .gp-ebook-badge__plus {
    font-weight: 700;
  }

  .gp-ebook-badge--bottom-right { bottom: 1.2rem; inset-inline-end: 1.2rem; }
  .gp-ebook-badge--bottom-left  { bottom: 1.2rem; inset-inline-start: 1.2rem; }
  .gp-ebook-badge--top-right    { top: 1.2rem; inset-inline-end: 1.2rem; }
  .gp-ebook-badge--top-left     { top: 1.2rem; inset-inline-start: 1.2rem; }

  /* Meta-area label (context: meta) — a small pill in the card content flow. */
  .gp-ebook-row {
    display: flex;
    width: 100%;
  }
  .gp-ebook-row--left   { justify-content: flex-start; }
  .gp-ebook-row--center { justify-content: center; }
  .gp-ebook-row--right  { justify-content: flex-end; }

  .gp-ebook-badge--meta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.8rem;
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-foreground);
    background-color: rgb(from var(--color-foreground) r g b / 0.08);
    border-radius: 0.4rem;
    width: fit-content;
  }

  .gp-ebook-badge--meta .gp-ebook-badge__icon {
    display: inline-flex;
  }

  .gp-ebook-badge--meta .gp-ebook-badge__icon svg {
    width: 1.4rem;
    height: 1.4rem;
  }
/* END_SNIPPET:gyanpradip-ebook-badge */

/* START_SNIPPET:overlay (INDEX:305) */
.overlay {
    position: absolute;
    inset: 0;
    z-index: var(--overlay-layer);
    pointer-events: none;
    border-radius: var(--overlay-border-radius, 0px);
  }

  .overlay--solid {
    background: var(--overlay-color);
  }

  .overlay--gradient {
    background: linear-gradient(var(--overlay-direction), var(--overlay-color), var(--overlay-color--end));
  }
/* END_SNIPPET:overlay */

/* START_SNIPPET:section (INDEX:336) */
.section-wrapper {
    --section-height-offset: 0px;
  }

  /* Block padding on .section-scheme (not .section-container) — PAGE_WIDTH_BLUEPRINT §1.7 / §10.6.
     visual-style-vars lives on .section-scheme when not contained; avoids coupling vertical spacing to the page column. */
  .section-scheme {
    position: relative;
    padding-block-start: var(--padding-block-start, 0);
    padding-block-end: var(--padding-block-end, 0);
  }

  /* Contained: `visual-style-vars` + block padding are on `.section--contained` only — do not double-apply. */
  .section-scheme:has(.section--contained) {
    padding-block-start: 0;
    padding-block-end: 0;
  }

  /* clip (not hidden) clips to the corner radius WITHOUT creating a scroll
     container, so a section radius never breaks a sticky descendant (e.g. a
     sticky Group column). */
  .section--clipped {
    overflow: clip;
  }

  .section-background {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .section-container {
    position: relative;
    z-index: 1;
    --section-height-small: 30svh;
    --section-height-medium: 50svh;
    --section-height-large: 70svh;
    min-height: var(--section-min-height);
    padding-inline-start: var(--padding-inline-start, var(--container-padding-inline, 15px));
    padding-inline-end: var(--padding-inline-end, var(--container-padding-inline, 15px));
  }

  .section[data-shopify-visual-preview] {
    min-height: var(--section-preview-height);
    padding-top: 0;
  }

  .section[data-shopify-visual-preview] .section-background {
    display: none;
  }

  body:has(> #header-group > .header-section > #header-component[transparent]):not(
      :has(> #header-group > .header-section + .shopify-section)
    )
    > main
    > .section-wrapper:first-child {
    --section-height-offset: var(--header-group-height, 0);
  }

  .section--contained {
    position: relative;
    min-height: inherit;
    padding-block-start: var(--padding-block-start, 0);
    padding-block-end: var(--padding-block-end, 0);
    padding-inline-start: var(--padding-inline-start, 15px);
    padding-inline-end: var(--padding-inline-end, 15px);
  }

  .custom-section-content {
    position: relative;
    z-index: 2;
    min-height: inherit;
  }

  @media screen and (max-width: 749px) {
    .section-scheme {
      padding-block-start: var(--padding-block-start-mobile,
                              calc(var(--padding-block-start, 0) * var(--padding-mobile-scale, 1)));
      padding-block-end: var(--padding-block-end-mobile,
                            calc(var(--padding-block-end, 0) * var(--padding-mobile-scale, 1)));
    }

    .section-scheme:has(.section--contained) {
      padding-block-start: 0;
      padding-block-end: 0;
    }

    .section-container {
      padding-inline-start: var(--padding-inline-start-mobile,
                                calc(var(--padding-inline-start, 15px) * var(--padding-mobile-scale, 1)));
      padding-inline-end: var(--padding-inline-end-mobile,
                              calc(var(--padding-inline-end, 15px) * var(--padding-mobile-scale, 1)));
    }

    .section--contained {
      padding-block-start: var(--padding-block-start-mobile,
                              calc(var(--padding-block-start, 0) * var(--padding-mobile-scale, 1)));
      padding-block-end: var(--padding-block-end-mobile,
                            calc(var(--padding-block-end, 0) * var(--padding-mobile-scale, 1)));
      padding-inline-start: var(--padding-inline-start-mobile,
                                calc(var(--padding-inline-start, 15px) * var(--padding-mobile-scale, 1)));
      padding-inline-end: var(--padding-inline-end-mobile,
                              calc(var(--padding-inline-end, 15px) * var(--padding-mobile-scale, 1)));
    }
  }
/* END_SNIPPET:section */

/* START_SNIPPET:swatch-input (INDEX:344) */
/* ===== migrated from assets/gyanpradip-swatch-input.css ===== */
/* swatch-input lives in its own file for reusability of the swatch in other areas than the product form context */
.swatch-input__input + .swatch-input__label {
  --swatch-input--border-radius: 50%;
  /* Selected: gap (matches page/scheme background) + outer stroke — mirrors design comp */
  --swatch-selected-gap: 0.12rem;
  --swatch-selected-stroke: 0.1rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--swatch-input--size, 3.5rem);
  aspect-ratio: 1;
  max-width: 100%;
  vertical-align: top;
  line-height: 0;
  border-radius: var(--swatch-input--border-radius);
  cursor: pointer;
  /* Selection/focus rings use box-shadow on .swatch — browser outline on the
     label often renders asymmetrically on circles vs the inner disk. */
  outline: none;
  forced-color-adjust: none;
}

.swatch-input__input + .swatch-input__label > .swatch {
  flex: 0 0 auto;
  margin: 0;
  transition: box-shadow var(--duration-short) ease;
}

.swatch-input__input + .swatch-input__label.swatch-input__label--square {
  --swatch-input--border-radius: 0.2rem;
}

/* Hover — unchecked */
.swatch-input__input:not(:checked) + .swatch-input__label:hover > .swatch {
  box-shadow: 0 0 0 0.2rem rgb(from var(--color-foreground) r g b / 4%);
}

/* Hover — selected (same as selected: gap + stroke) */
.swatch-input__input:checked + .swatch-input__label:hover > .swatch {
  box-shadow:
    0 0 0 var(--swatch-selected-gap) var(--color-background),
    0 0 0 calc(var(--swatch-selected-gap) + var(--swatch-selected-stroke))
      var(--color-foreground);
}

/* Press — unchecked only (avoid a “fake” selected ring while choosing) */
.swatch-input__input:active:not(:checked) + .swatch-input__label > .swatch {
  box-shadow: 0 0 0 0.2rem rgb(from var(--color-foreground) r g b / 10%);
}

/* Selected: uniform gap between color disk and outer border (stacked shadows) */
.swatch-input__input:checked + .swatch-input__label > .swatch {
  box-shadow:
    0 0 0 var(--swatch-selected-gap) var(--color-background),
    0 0 0 calc(var(--swatch-selected-gap) + var(--swatch-selected-stroke))
      var(--color-foreground);
}

/* Keyboard focus — unchecked */
.swatch-input__input:focus-visible + .swatch-input__label > .swatch {
  box-shadow:
    0 0 0 0.2rem var(--color-background),
    0 0 0 0.35rem rgb(from var(--color-foreground) r g b / 45%);
}

/* Keyboard focus — selected (gap + stroke + outer focus halo) */
.swatch-input__input:checked:focus-visible + .swatch-input__label > .swatch {
  box-shadow:
    0 0 0 var(--swatch-selected-gap) var(--color-background),
    0 0 0 calc(var(--swatch-selected-gap) + var(--swatch-selected-stroke))
      var(--color-foreground),
    0 0 0
      calc(var(--swatch-selected-gap) + var(--swatch-selected-stroke) + 0.15rem)
      rgb(from var(--color-foreground) r g b / 40%);
}

/* Visually unavailable (sold out) — faint ring on disk */
.swatch-input__input.visually-disabled:not(:checked)
  + .swatch-input__label
  > .swatch {
  box-shadow: 0 0 0 0.1rem rgb(from var(--color-foreground) r g b / 28%);
}

/* Visually disabled */
.swatch-input__input.visually-disabled:not(:active):not(:checked)
  + .swatch-input__label {
  transition: none;
}

.swatch-input__input.visually-disabled:not(:active):not(:checked)
  + .swatch-input__label:hover
  > .swatch {
  box-shadow: none;
}

/* Actually disabled */
.swatch-input__input:disabled + .swatch-input__label {
  pointer-events: none;
}

/* Overrides for swatch snippet when used inside disabled swatch-input */
.swatch-input__input:disabled + .swatch-input__label > .swatch,
.swatch-input__input.visually-disabled + .swatch-input__label > .swatch {
  position: relative;
  overflow: hidden;
}

/* Disabled styles */
.swatch-input__input:disabled + .swatch-input__label > .swatch,
.swatch-input__input.visually-disabled + .swatch-input__label > .swatch {
  opacity: 0.4;
}

/* Display crossed out line over swatch when input is disabled */
.swatch-input__input:disabled + .swatch-input__label > .swatch::after,
.swatch-input__input.visually-disabled + .swatch-input__label > .swatch::after {
  /* Diagonal of a square = length of the side * sqrt(2)  */
  --diagonal--size: calc(var(--swatch-input--size) * 1.414);
  --crossed-line--size: 0.1rem;
  content: "";
  position: absolute;
  bottom: calc(var(--crossed-line--size) * -0.5);
  left: 0;
  width: var(--diagonal--size);
  height: var(--crossed-line--size);
  background-color: var(--color-foreground);
  transform: rotate(-45deg);
  transform-origin: left;
}
/* END_SNIPPET:swatch-input */

/* START_SNIPPET:swatch (INDEX:345) */
/* ===== migrated from assets/gyanpradip-swatch.css ===== */
/* swatch lives in its own file for reusability of the swatch in swatch-input and dropdown */
.swatch {
  --swatch--size: var(--swatch-input--size, 3.2rem);
  --swatch--border-radius: var(--swatch-input--border-radius, 50%);
  display: block;
  width: var(--swatch--size);
  max-width: 100%;
  aspect-ratio: 1 / 1;
  --custom-background-color: var(
    --background-gradient,
    var(--color-swatch-background)
  );
  background: var(--custom-background-color, var(--swatch--background));
  background-position: var(--swatch-focal-point, initial);
  background-size: cover;
  background-origin: border-box;
  border: 0.1rem solid rgb(from var(--color-foreground) r g b / 15%);
  border-radius: var(--swatch--border-radius);
}
.swatch--square {
  --swatch--border-radius: var(--swatch-input--border-radius, 0.2rem);
}

.swatch--unavailable {
  border-style: dashed;
  border-color: rgb(from var(--color-foreground) r g b / 5%);
}
/* END_SNIPPET:swatch */

/* START_SNIPPET:visual-style-elements (INDEX:350) */
.container-background-media {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .container-bg-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .container-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
  }
/* END_SNIPPET:visual-style-elements */