/* Our Products responsive carousel. Loaded after the legacy theme overrides. */

/* New wishlist/cart buttons only exist for the mobile/tablet card redesign;
   hidden by default so they never appear on the untouched desktop carousel,
   then switched on inside the home-op-showcase/about-op-showcase scopes below. */
.op-wishlist-btn,
.op-cart-btn {
  display: none;
}

@media (max-width:1024px) {
  .home-op-showcase,
  .about-op-showcase {
    display: block!important;
    overflow: hidden!important;
    padding: 34px 0 38px!important;
    background: #f8f5ed!important;
  }

  .home-op-showcase>.container-xl,
  .about-op-showcase>.container-xl {
    max-width: none!important;
    padding: 0!important;
  }

  .home-op-showcase .op-showcase-heading,
  .about-op-showcase .op-showcase-heading {
    width: 100%!important;
    margin: 0 auto 18px!important;
    padding: 0 20px!important;
    text-align: center!important;
  }

  .home-op-showcase .op-showcase-heading h2,
  .about-op-showcase .op-showcase-heading h2 {
    margin: 0!important;
    color: #3B4834!important;
    font-size: clamp(21px,3vw,29px)!important;
    line-height: 1!important;
    letter-spacing: .04em!important;
    text-transform: uppercase!important;
    white-space: nowrap!important;
  }

  .home-op-showcase .op-heading-diamond,
  .about-op-showcase .op-heading-diamond {
    display: block!important;
    flex: 0 0 6px!important;
    width: 6px!important;
    height: 6px!important;
    margin: 0 9px 0 0!important;
    background: #3B4834!important;
  }

  .home-op-showcase .op-heading-line,
  .about-op-showcase .op-heading-line {
    display: block!important;
    flex: 0 0 58px!important;
    width: 58px!important;
    height: 1px!important;
    margin: 0 12px 0 0!important;
    background: #3B4834!important;
  }

  .home-op-showcase .op-mobile-subtitle,
  .home-op-showcase .op-swipe-hint,
  .about-op-showcase .op-mobile-subtitle,
  .about-op-showcase .op-swipe-hint {
    display: none!important;
  }

  .home-op-showcase .op-showcase-shell,
  .about-op-showcase .op-showcase-shell {
    position: relative!important;
    width: 88%!important;
    max-width: 760px!important;
    margin: 0 auto!important;
    padding: 10px 34px 30px!important;
    overflow: visible!important;
    background: none!important;
  }

  .home-op-showcase .op-showcase-shell:before,
  .about-op-showcase .op-showcase-shell:before {
    content: none!important;
    display: none!important;
  }

  .home-op-showcase .op-arch-frame,
  .about-op-showcase .op-arch-frame {
    display: none!important;
  }

  .home-op-showcase .op-showcase-grid.op-native-scroll-rail,
  .about-op-showcase .op-showcase-grid.op-native-scroll-rail {
    position: relative!important;
    z-index: 1!important;
    display: flex!important;
    visibility: visible!important;
    opacity: 1!important;
    flex-wrap: nowrap!important;
    justify-content: flex-start!important;
    align-items: stretch!important;
    gap: 18px!important;
    width: 100%!important;
    margin: 0!important;
    padding: 0!important;
    overflow-x: auto!important;
    /* Keep this a horizontal-only scroller. A vertically scrollable rail
       can capture the page gesture on mobile and make the next section
       unreachable. */
    overflow-y: hidden!important;
    scroll-snap-type: x mandatory!important;
    scroll-padding-left: 0!important;
    scroll-behavior: smooth!important;
    overscroll-behavior-x: contain!important;
    -webkit-overflow-scrolling: touch!important;
    scrollbar-width: none!important;
    /* Let the browser determine swipe direction: sideways gestures move the
       rail and vertical/diagonal gestures continue scrolling the page. */
    touch-action: pan-x pan-y!important;
  }

  .home-op-showcase .op-showcase-grid.op-native-scroll-rail::-webkit-scrollbar,
  .about-op-showcase .op-showcase-grid.op-native-scroll-rail::-webkit-scrollbar {
    display: none!important;
  }

  .home-op-showcase .op-showcase-grid.op-native-scroll-rail>.op-showcase-item,
  .about-op-showcase .op-showcase-grid.op-native-scroll-rail>.op-showcase-item {
    display: flex!important;
    visibility: visible!important;
    opacity: 1!important;
    float: none!important;
    height: auto!important;
    margin: 0!important;
    padding: 0!important;
    scroll-snap-align: start!important;
    scroll-snap-stop: always!important;
  }

  .home-op-showcase .op-showcase-grid.op-native-scroll-rail .op-card,
  .about-op-showcase .op-showcase-grid.op-native-scroll-rail .op-card {
    display: flex!important;
    visibility: visible!important;
    opacity: 1!important;
    flex: 1 1 auto!important;
    flex-direction: column!important;
    position: relative!important;
    width: 100%!important;
    max-width: none!important;
    height: auto!important;
    min-height: 0!important;
    margin: 5px !important;
    padding: 0!important;
    border: 0!important;
    border-radius: 24px!important;
    background: #fff!important;
    overflow: hidden!important;
    box-shadow: 0 10px 30px rgba(0,0,0,.08)!important;
    transition: transform .3s ease,box-shadow .3s ease!important;
  }

  .home-op-showcase .op-showcase-grid.op-native-scroll-rail .op-card:hover,
  .about-op-showcase .op-showcase-grid.op-native-scroll-rail .op-card:hover {
    transform: translateY(-6px)!important;
    box-shadow: 0 15px 35px rgba(0,0,0,.12)!important;
  }

  .home-op-showcase .op-showcase-grid.op-native-scroll-rail .op-image,
  .about-op-showcase .op-showcase-grid.op-native-scroll-rail .op-image {
    position: relative!important;
    width: 100%!important;
    height: auto!important;
    min-height: 0!important;
    aspect-ratio: 1.42/1!important;
    border-radius: 0!important;
    background: #F1F3EF!important;
    overflow: hidden!important;
  }

  .home-op-showcase .op-wishlist-btn,
  .about-op-showcase .op-wishlist-btn {
    display: flex!important;
    position: absolute!important;
    right: 20px!important;
    top: -20px!important;
    z-index: 5!important;
    width: 40px!important;
    height: 40px!important;
    align-items: center!important;
    justify-content: center!important;
    border: 0!important;
    border-radius: 50%!important;
    background: #3B4834!important;
    color: #fff!important;
    box-shadow: 0 4px 12px rgba(0,0,0,.18)!important;
    transition: background .2s ease,transform .2s ease!important;
  }

  .home-op-showcase .op-wishlist-btn:hover,
  .about-op-showcase .op-wishlist-btn:hover {
    background: #3B4834!important;
    transform: scale(1.05)!important;
  }

  /* A sitewide .wishlist-added rule (built for a different, pill-shaped
     wishlist button) also matches this circular button and flips its
     background to pale pink - overriding it back to the green circle so
     only the heart glyph itself turns red. */
  .home-op-showcase .op-wishlist-btn.wishlist-added,
  .about-op-showcase .op-wishlist-btn.wishlist-added {
    background: #3B4834!important;
    border-color: transparent!important;
  }

  .home-op-showcase .op-wishlist-btn svg,
  .about-op-showcase .op-wishlist-btn svg {
    width: 16px!important;
    height: 16px!important;
    fill: #fff!important;
  }

  .home-op-showcase .op-wishlist-btn.wishlist-added svg,
  .home-op-showcase .op-wishlist-btn.wishlist-added svg path,
  .about-op-showcase .op-wishlist-btn.wishlist-added svg,
  .about-op-showcase .op-wishlist-btn.wishlist-added svg path {
    fill: #e32636!important;
    stroke: #e32636!important;
  }

  .home-op-showcase .op-cart-btn,
  .about-op-showcase .op-cart-btn {
    display: flex!important;
    position: static!important;
    margin-left: auto!important;
    flex: 0 0 auto!important;
    z-index: 2!important;
    width: 34px!important;
    height: 34px!important;
    align-items: center!important;
    justify-content: center!important;
    border: 0!important;
    border-radius: 50%!important;
    background: #3B4834!important;
    color: #fff!important;
    box-shadow: 0 2px 8px rgba(0,0,0,.15)!important;
    transition: background .2s ease,transform .2s ease!important;
  }

  .home-op-showcase .op-cart-btn:hover,
  .about-op-showcase .op-cart-btn:hover {
    background: #3B4834!important;
    transform: scale(1.05)!important;
  }

  .home-op-showcase .op-cart-btn i,
  .about-op-showcase .op-cart-btn i {
    font-size: 15px!important;
    color: #fff!important;
  }

  .home-op-showcase .op-image-action,
  .home-op-showcase .op-price-row .op-btn,
  .about-op-showcase .op-image-action,
  .about-op-showcase .op-price-row .op-btn {
    display: none!important;
  }

  .home-op-showcase .op-showcase-grid.op-native-scroll-rail .op-img-primary,
  .about-op-showcase .op-showcase-grid.op-native-scroll-rail .op-img-primary {
    display: block!important;
    visibility: visible!important;
    opacity: 1!important;
    width: 100%!important;
    height: 100%!important;
    padding: 0!important;
    object-fit: cover!important;
  }

  .home-op-showcase .op-showcase-grid.op-native-scroll-rail .op-img-secondary,
  .about-op-showcase .op-showcase-grid.op-native-scroll-rail .op-img-secondary {
    display: none!important;
  }

  .home-op-showcase .op-image-action,
  .about-op-showcase .op-image-action {
    top: auto!important;
    right: 9px!important;
    bottom: 9px!important;
    left: auto!important;
    width: 32px!important;
    height: 32px!important;
    border: 1px solid rgba(48,69,43,.18)!important;
    border-radius: 50%!important;
    background: #fff!important;
    color: #3B4834!important;
    box-shadow: 0 4px 10px rgba(31,47,27,.13)!important;
  }

  .home-op-showcase .op-image-action i,
  .about-op-showcase .op-image-action i {
    font-size: 14px!important;
  }

  .home-op-showcase .op-badge,
  .about-op-showcase .op-badge {
    top: 9px!important;
    left: auto!important;
    right: 9px!important;
    font-size: 8px!important;
  }

  .home-op-showcase .op-mobile-rating,
  .home-op-showcase .op-description,
  .about-op-showcase .op-mobile-rating,
  .about-op-showcase .op-description {
    display: none!important;
  }

  .home-op-showcase .op-info,
  .about-op-showcase .op-info {
    display: flex!important;
    position: relative!important;
    flex: 1 1 auto!important;
    flex-direction: column!important;
    padding: 20px!important;
    border-radius: 0 0 24px 24px!important;
    background: #fff!important;
    text-align: left!important;
  }

  .home-op-showcase .op-title-row,
  .about-op-showcase .op-title-row {
    display: flex!important;
    align-items: center!important;
    justify-content: space-between!important;
    gap: 8px!important;
    min-height: 0!important;
    margin: 0 0 10px!important;
  }

  .home-op-showcase .op-name,
  .about-op-showcase .op-name {
    display: -webkit-box!important;
    min-width: 0!important;
    margin: 0!important;
    overflow: hidden!important;
    color: #3B4834!important;
    font-size: 20px!important;
    font-weight: 600!important;
    line-height: 1.3!important;
    white-space: normal!important;
    text-transform: none!important;
    -webkit-box-orient: vertical!important;
    -webkit-line-clamp: 2!important;
  }

  .home-op-showcase .op-name a,
  .about-op-showcase .op-name a {
    color: inherit!important;
  }

  .home-op-showcase .op-unit,
  .about-op-showcase .op-unit {
    flex: 0 0 auto!important;
    margin-left: auto!important;
    padding: 0!important;
    border-radius: 0!important;
    background: transparent!important;
    color: #7A7A7A!important;
    font-size: 14px!important;
    font-weight: 500!important;
    white-space: nowrap!important;
  }

  .home-op-showcase .op-price-row,
  .about-op-showcase .op-price-row {
    display: flex!important;
    flex-wrap: nowrap!important;
    align-items: center!important;
    gap: 5px!important;
    width: 100%!important;
    margin-top: auto!important;
  }

  .home-op-showcase .op-mrp-label,
  .about-op-showcase .op-mrp-label {
    flex: 0 0 auto!important;
    font-size: 13px!important;
    color: #E63946!important;
    font-weight: 500!important;
    white-space: nowrap!important;
  }

  .home-op-showcase .op-mrp-label:after,
  .about-op-showcase .op-mrp-label:after {
    content: none;
  }

  .home-op-showcase .op-price-current,
  .about-op-showcase .op-price-current {
    flex: 0 1 auto!important;
    margin: 0!important;
    color: #E63946!important;
    font-size: 18px!important;
    font-weight: 600!important;
    white-space: nowrap!important;
    overflow: hidden!important;
    text-overflow: ellipsis!important;
  }

  .home-op-showcase .op-price-row .op-btn,
  .about-op-showcase .op-price-row .op-btn {
    display: none!important;
    flex: 0 0 auto!important;
    align-items: center!important;
    justify-content: center!important;
    width: auto!important;
    min-width: 82px!important;
    height: 30px!important;
    margin: 0 0 0 auto!important;
    padding: 0 13px!important;
    border-radius: 999px!important;
    background: #3B4834!important;
    color: #fff!important;
    font-size: 9px!important;
    line-height: 1!important;
    box-shadow: none!important;
  }

  .home-op-showcase .op-native-arrow,
  .about-op-showcase .op-native-arrow {
    position: absolute!important;
    top: 44%!important;
    z-index: 12!important;
    display: grid!important;
    visibility: visible!important;
    width: 44px!important;
    height: 44px!important;
    min-height: 44px!important;
    padding: 0!important;
    place-items: center!important;
    transform: translateY(-50%)!important;
    border: 0!important;
    border-radius: 50%!important;
    background: #3B4834!important;
    color: #fff!important;
    box-shadow: 0 5px 13px rgba(35,49,31,.18)!important;
    opacity: 1!important;
    transition: transform .2s ease,opacity .2s ease,background .2s ease!important;
  }

  .home-op-showcase .op-native-arrow:hover,
  .about-op-showcase .op-native-arrow:hover {
    background: #3B4834!important;
  }

  .home-op-showcase .op-native-arrow:active,
  .about-op-showcase .op-native-arrow:active {
    transform: translateY(-50%) scale(.94)!important;
  }

  .home-op-showcase .op-native-arrow:focus-visible,
  .about-op-showcase .op-native-arrow:focus-visible {
    outline: 2px solid #b7954c!important;
    outline-offset: 3px;
  }

  .home-op-showcase .op-native-arrow:disabled,
  .about-op-showcase .op-native-arrow:disabled {
    opacity: .32!important;
    cursor: not-allowed!important;
  }

  .home-op-showcase .op-native-arrow i,
  .about-op-showcase .op-native-arrow i {
    display: block!important;
    color: #fff!important;
    font-size: 18px!important;
  }

  .home-op-showcase .op-native-arrow--prev,
  .about-op-showcase .op-native-arrow--prev {
    left: 5px!important;
  }

  .home-op-showcase .op-native-arrow--next,
  .about-op-showcase .op-native-arrow--next {
    right: 5px!important;
  }

  .home-op-showcase .op-native-dots,
  .about-op-showcase .op-native-dots {
    position: absolute;
    z-index: 3;
    right: 42px;
    bottom: 8px;
    left: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  .home-op-showcase .op-native-dot,
  .about-op-showcase .op-native-dot {
    width: 7px;
    height: 7px;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #cfbc8b;
    cursor: pointer;
    transition: width .2s ease,background .2s ease;
  }

  .home-op-showcase .op-native-dot.is-active,
  .about-op-showcase .op-native-dot.is-active {
    width: 9px;
    height: 9px;
    background: #3B4834;
  }

  .home-op-showcase .op-native-dot:focus-visible,
  .about-op-showcase .op-native-dot:focus-visible {
    outline: 2px solid #3B4834;
    outline-offset: 3px;
  }
}

@media (max-width:767.98px) {
  .home-op-showcase,
  .about-op-showcase {
    padding: 26px 0 32px!important;
  }

  .home-op-showcase .op-showcase-heading,
  .about-op-showcase .op-showcase-heading {
    margin-bottom: 13px!important;
    padding: 0 12px!important;
  }

  .home-op-showcase .op-showcase-heading h2,
  .about-op-showcase .op-showcase-heading h2 {
    font-size: clamp(19px,6vw,24px)!important;
  }

  .home-op-showcase .op-heading-line,
  .about-op-showcase .op-heading-line {
    flex-basis: 42px!important;
    width: 42px!important;
  }

  .home-op-showcase .op-showcase-shell,
  .about-op-showcase .op-showcase-shell {
    width: 100%!important;
    max-width: none!important;
    padding: 10px 0 28px!important;
  }

  .home-op-showcase .op-showcase-grid.op-native-scroll-rail,
  .about-op-showcase .op-showcase-grid.op-native-scroll-rail {
    gap: 0!important;
    padding-left: 0!important;
    padding-right: 0!important;
    scroll-padding-left: 0!important;
  }

  .home-op-showcase .op-showcase-grid.op-native-scroll-rail>.op-showcase-item,
  .about-op-showcase .op-showcase-grid.op-native-scroll-rail>.op-showcase-item {
    display: flex!important;
    align-items: center!important;
    justify-content: center!important;
    flex: 0 0 100vw!important;
    width: 100vw!important;
    min-width: 100vw!important;
    max-width: 100vw!important;
  }

  .home-op-showcase .op-showcase-grid.op-native-scroll-rail .op-card,
  .about-op-showcase .op-showcase-grid.op-native-scroll-rail .op-card {
    flex: 0 0 auto!important;
    width: 85vw!important;
    max-width: 321px!important;
    height: auto!important;
    min-height: 0!important;
    margin: 8px 8px 0 0!important;
  }

  .home-op-showcase .op-showcase-grid.op-native-scroll-rail .op-image,
  .about-op-showcase .op-showcase-grid.op-native-scroll-rail .op-image {
    aspect-ratio: 1.36/1!important;
    height: 300px !important;
  }

  .home-op-showcase .op-native-arrow,
  .about-op-showcase .op-native-arrow {
    top: 43%!important;
    width: 40px!important;
    height: 40px!important;
    min-height: 40px!important;
  }

  .home-op-showcase .op-native-arrow--prev,
  .about-op-showcase .op-native-arrow--prev {
    left: 3px!important;
  }

  .home-op-showcase .op-native-arrow--next,
  .about-op-showcase .op-native-arrow--next {
    right: 3px!important;
  }

  .home-op-showcase .op-native-dots,
  .about-op-showcase .op-native-dots {
    right: 16px;
    bottom: 7px;
    left: 16px;
  }
}

@media (max-width:375px) {
  .home-op-showcase .op-price-row .op-btn,
  .about-op-showcase .op-price-row .op-btn {
    min-width: 74px!important;
    height: 29px!important;
    padding: 0 10px!important;
  }

  .home-op-showcase .op-price-current,
  .about-op-showcase .op-price-current {
    font-size: 13px!important;
  }

  .home-op-showcase .op-native-arrow,
  .about-op-showcase .op-native-arrow {
    width: 38px!important;
    height: 38px!important;
    min-height: 38px!important;
  }
}