/* ام تي ثيمس صاحبة الحق الحصري في هذا التصميم.
   النشر مقتصر على واجهة بـاجس فقط، وأي نسخ تجاري
   أو إعادة استعمال يُعتبر مخالفة كاملة للحقوق المحفوظة. */


/* ==================================================================
   Global section helpers
   ================================================================== */
 .slick-dots {
  flex-wrap: wrap;
 }
 
.bags-section .container,
.bags-section .container-fluid {
  padding-inline: 20px;
  width: 100%;
  max-width: 100%;
}

@media (min-width: 1200px) {
  .bags-section .container {
    /* Inner content = 1320px (Figma); add 60px padding on each side → 1440 max */
    max-width: 1440px;
    margin-inline: auto;
  }
}


/* Firefox */

html {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb-color, var(--primary-color, #c8b35b)) var(--scrollbar-bg-color, #1a1502);
}


/* WebKit (Chrome, Safari, Edge) */

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background-color: var(--scrollbar-bg-color, #1a1502);
}

::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb-color, var(--primary-color, #c8b35b));
  border-radius: 10px;
  border: 2px solid var(--scrollbar-bg-color, #1a1502);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-hover-color, #d6c372);
}

::-webkit-scrollbar-corner {
  background-color: var(--scrollbar-bg-color, #1a1502);
}

.bags-section .slick-dots {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  list-style: none;
  margin: 24px 0 0 0;
  padding: 0;
  bottom: auto !important;
  position: relative !important;
}

.bags-section .slick-dots li {
  width: auto;
  height: auto;
  margin: 0;
  display: inline-flex;
}

.bags-section .slick-dots li button {
  width: 15px;
  height: 5px;
  padding: 0;
  background-color: rgba(26, 21, 2, 0.25);
  border: 0;
  border-radius: 5px;
  font-size: 0;
  text-indent: -9999px;
  transition: width 0.3s ease, background-color 0.3s ease;
  cursor: pointer;
}

.bags-section .slick-dots li button::before {
  display: none;
}

.bags-section .slick-dots li.slick-active button {
  width: 44px;
  background-color: #1a1502;
}

.bags-section .slick-dots li button:hover {
  background-color: rgba(26, 21, 2, 0.5);
}

.bags-section {
  position: relative;
  width: 100%;
  isolation: isolate;
  overflow: hidden;
  /* Skip layout/paint for off-screen sections until they're near the viewport.
     The hero is in a different wrapper (.bags-hero-slider) so it isn't affected.
     `contain-intrinsic-size` reserves an approximate slot to keep the scrollbar
     stable while sections hydrate. */
  content-visibility: auto;
  contain-intrinsic-size: auto 700px;
}


/* ===== Section background image + overlay (used by all sections) ===== */

.bags-section__bg-image {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}

.bags-section__bg-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}


/* ==================================================================
   Hero Slider
   ================================================================== */

.bags-hero-slider {
  font-family: inherit;
}

.bags-hero-slider__viewport {
  position: relative;
  width: 100%;
  height: var(--hero-h-d, 950px);
  overflow: hidden;
}

@media (max-width: 767px) {
  .bags-hero-slider__viewport {
    height: var(--hero-h-m, 80vh);
  }
}

.bags-hero-slider__track {
  height: 100%;
}

.bags-hero-slider__track .slick-list,
.bags-hero-slider__track .slick-track {
  height: 100%;
}

.bags-hero-slider__slide {
  position: relative;
  height: 100%;
  outline: none;
}


/* === Background media === */

.bags-hero-slider__media {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.bags-hero-slider__image,
.bags-hero-slider__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.bags-bg-video-yt {
  position: absolute;
  top: 50%;
  right: 50%;
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  aspect-ratio: 16 / 9;
  transform: translate(50%, -50%);
  border: 0;
  pointer-events: none;
}

.bags-hero-slider__image--mobile {
  display: none !important;
}

@media (max-width: 767px) {
  .bags-hero-slider__image--mobile {
    display: block !important;
  }
  /* When BOTH a desktop and a mobile image are provided, hide the desktop one on mobile */
  .bags-hero-slider__media:has(.bags-hero-slider__image--mobile) .bags-hero-slider__image--desktop {
    display: none !important;
  }
}

.bags-hero-slider__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.bags-hero-slider__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: var(--slide-content-y, center);
}

.bags-hero-slider__slide[data-content-y="flex-end"] .bags-hero-slider__inner {
  padding-block-end: 120px;
}

@media (max-width: 767px) {
  .bags-hero-slider__slide[data-content-y="flex-end"] .bags-hero-slider__inner {
    padding-block-end: 70px;
  }
}

.bags-hero-slider__container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: var(--slide-content-y, center);
  justify-content: var(--slide-content-x, flex-start);
}

.bags-hero-slider__content {
  max-width: 904px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-block: 60px;
  align-items: var(--slide-content-x, flex-start);
  text-align: var(--slide-content-x, start);
}

.bags-hero-slider__subtitle {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.5px;
  line-height: 1.4;
}

.bags-hero-slider__slide .bags-hero-slider__subtitle,
.bags-hero-slider__slide .bags-hero-slider__title,
.bags-hero-slider__slide .bags-hero-slider__btn {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.bags-hero-slider__slide.slick-active .bags-hero-slider__subtitle,
.bags-hero-slider__slide.slick-active .bags-hero-slider__title,
.bags-hero-slider__slide.slick-active .bags-hero-slider__btn {
  opacity: 1;
  transform: translateY(0);
}


/* Staggered entrance delays — each element comes in slightly after the previous */

.bags-hero-slider__slide.slick-active .bags-hero-slider__subtitle {
  transition-delay: 0.2s;
}

.bags-hero-slider__slide.slick-active .bags-hero-slider__title {
  transition-delay: 0.4s;
}

.bags-hero-slider__slide.slick-active .bags-hero-slider__btn {
  transition-delay: 0.65s;
}


/* Respect users who prefer reduced motion */

@media (prefers-reduced-motion: reduce) {
  .bags-hero-slider__slide .bags-hero-slider__subtitle,
  .bags-hero-slider__slide .bags-hero-slider__title,
  .bags-hero-slider__slide .bags-hero-slider__btn {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.bags-hero-slider__title {
  margin: 0;
  font-size: var(--slide-title-d, 60px);
  line-height: 0.96;
  font-weight: 500;
  letter-spacing: -0.01em;
}

@media (max-width: 767px) {
  .bags-hero-slider__title {
    font-size: var(--slide-title-m, 42px);
    line-height: 1.05;
  }
  .bags-hero-slider__content {
    gap: 16px;
    padding-block: 40px;
  }
}


/* === Button (Find More style) === */

.bags-hero-slider__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 36px;
  border-radius: 90px;
  border: 2px solid currentColor;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
  width: max-content;
  font-family: "Plus Jakarta Sans", inherit;
  margin-block-start: 16px;
}

@media (max-width: 767px) {
  .bags-hero-slider__btn {
    margin-block-start: 10px;
  }
}

.bags-hero-slider__btn svg {
  flex-shrink: 0;
  margin-block-start: -1px;
}

[dir="rtl"] .bags-hero-slider__btn svg {
  transform: scaleX(-1);
}


/* === Slider arrows (right cluster on desktop, top-right) === */

.bags-hero-slider__arrows {
  position: absolute;
  inset-inline-end: 60px;
  inset-block-end: 130px;
  z-index: 5;
  display: flex;
  gap: 22px;
  align-items: center;
}

.bags-hero-slider__arrow {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--hero-arrow-color, #000);
  transition: transform 0.25s ease, background-color 0.3s ease;
  padding: 0;
}

.bags-hero-slider__arrow--prev,
.bags-hero-slider__arrow--next {
  background-color: var(--hero-arrow-inactive, #1a1502);
  color: var(--hero-arrow-active, var(--primary-color, #c8b35b));
}

.bags-hero-slider__arrow--prev:hover,
.bags-hero-slider__arrow--next:hover {
  background-color: var(--hero-arrow-active, var(--primary-color, #c8b35b));
  color: var(--hero-arrow-color, #000);
}

.bags-hero-slider__arrow:hover {
  transform: scale(1.05);
}

[dir="rtl"] .bags-hero-slider__arrow svg {
  transform: scaleX(-1);
}

@media (max-width: 991px) {
  .bags-hero-slider__arrows {
    inset-inline-end: 24px;
    inset-block-end: 80px;
    gap: 14px;
  }
  .bags-hero-slider__arrow {
    width: 40px;
    height: 40px;
  }
  .bags-hero-slider__arrow svg {
    width: 18px;
    height: 18px;
  }
}

@media (max-width: 575px) {
  /* Center arrows on small mobile (Figma 1:1754) */
  .bags-hero-slider__arrows {
    inset-inline-end: 50%;
    transform: translateX(-50%);
    inset-block-end: 50px;
    gap: 12px;
  }
  [dir="rtl"] .bags-hero-slider__arrows {
    transform: translateX(50%);
  }
  .bags-hero-slider__arrow {
    width: 40px;
    height: 40px;
  }
  .bags-hero-slider__progress-num {
    inset-inline-start: 0;
    font-size: 14px;
  }
  .bags-hero-slider__progress-fill {
    max-width: 60px;
  }
}

.bags-hero-slider__progress {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 38px;
  z-index: 4;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (max-width: 767px) {
  .bags-hero-slider__progress {
    inset-block-end: 20px;
  }
}

.bags-hero-slider__progress-num-wrap {
  display: flex;
}

.bags-hero-slider__progress-num {
  font-size: 21px;
  font-weight: 500;
  color: var(--hero-progress-num, #fff);
  position: relative;
  inset-inline-start: 80px;
  align-self: flex-start;
}


/* Track: spans the full viewport (edge-to-edge), matching Figma node 1:840 */

.bags-hero-slider__progress-track {
  position: relative;
  width: 100%;
  height: 4px;
  background-color: var(--hero-progress-track, #000);
}

.bags-hero-slider__progress-fill {
  --hero-progress-side: 60px;
  --hero-progress-step: 0;
  /* current slide index — set by JS */
  --hero-progress-total: 1;
  /* total number of slides — set by JS */
  position: absolute;
  inset-block-start: 0;
  height: 100%;
  background-color: var(--hero-progress-fill, var(--primary-color, #c8b35b));
  width: calc((100% - var(--hero-progress-side) * 2) / var(--hero-progress-total));
  inset-inline-start: calc( var(--hero-progress-side) + var(--hero-progress-step) * (100% - var(--hero-progress-side) * 2) / var(--hero-progress-total));
  transition: inset-inline-start 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 991px) {
  .bags-hero-slider__progress-num {
    inset-inline-start: 24px;
    font-size: 16px;
  }
  .bags-hero-slider__progress-fill {
    --hero-progress-side: 24px;
  }
}


/* © mT themes — bagS exclusive license.
   Any commercial reuse breaches mT themes IP rights. */


/* Keep the progress and arrows visible above slick fade */

.bags-hero-slider__track .slick-slide {
  position: relative;
}


/* ==================================================================
   Marquee
   ================================================================== */

.bags-marquee {
  padding-top: var(--m-pad-top-d, 0);
  padding-bottom: var(--m-pad-bottom-d, 0);
  overflow: hidden;
  width: 100%;
}

@media (max-width: 767px) {
  .bags-marquee {
    padding-top: var(--m-pad-top-m, 0);
    padding-bottom: var(--m-pad-bottom-m, 0);
  }
}

.bags-marquee__band {
  width: 100%;
  overflow: hidden;
  transform: rotate(var(--m-rotate, 0deg));
  display: block;
  padding-block: 14px;
  text-decoration: none;
  color: inherit;
}

a.bags-marquee__band {
  cursor: pointer;
}

.bags-marquee__sep {
  color: var(--m-sep-color, currentColor);
}

.bags-marquee__track {
  display: inline-flex;
  white-space: nowrap;
  will-change: transform;
  animation: bags-marquee-scroll var(--m-speed, 25s) linear infinite;
}

.bags-marquee__track[data-direction="right"] {
  animation-direction: reverse;
}

.bags-marquee__chunk {
  display: inline-block;
  font-size: var(--m-size-d, 60px);
  font-weight: var(--m-weight, 700);
  color: var(--m-text, #1a1502);
  line-height: 1;
  padding-inline: 6px;
}

@media (max-width: 767px) {
  .bags-marquee__chunk {
    font-size: var(--m-size-m, 50px);
  }
}


/* Outlined text — fill goes transparent and `--m-text` paints the stroke.
   The separator (.bags-marquee__sep) is a child of the chunk so by
   default it inherits the outline; we reset it back to its filled color
   so merchants can keep solid stars/dots while only the WORDS are
   outlined. Adding `is-sep-outline` switches the separator to outline
   as well, allowing any combination. */

.bags-marquee.is-outline .bags-marquee__chunk {
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.5px var(--m-text, #1a1502);
  text-stroke: 1.5px var(--m-text, #1a1502);
}

.bags-marquee.is-outline .bags-marquee__sep {
  color: var(--m-sep-color, currentColor);
  -webkit-text-fill-color: var(--m-sep-color, currentColor);
  -webkit-text-stroke: 0;
  text-stroke: 0;
}

.bags-marquee.is-sep-outline .bags-marquee__sep {
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.5px var(--m-sep-color, currentColor);
  text-stroke: 1.5px var(--m-sep-color, currentColor);
}

/* The track contains <originals><duplicates> in DOM order. For a seamless
   loop the animation MUST translate toward the duplicated side — i.e.
   translateX(-50%) — so when the animation jumps back to 0 the duplicates
   that were filling the right side hand off to the originals, and there's
   no gap. translateX(+50%) on the LTR side broke this: it pushed the
   originals right and left an ever-growing empty stripe on the left until
   the animation snapped back. Both LTR and RTL now use the same keyframe.
   For "scroll right", `data-direction="right"` reverses playback below. */
@keyframes bags-marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}


/* Pause on hover — only when the section opts in via `is-pausable` */

.bags-marquee.is-pausable:hover .bags-marquee__track {
  animation-play-state: paused;
}


/* ==================================================================
   Product Card
   ================================================================== */

.bags-pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  direction: ltr;
  font-family: inherit;
  background: #ffffff;
  border: 1px solid var(--all-borders, #e6e6e6);
  padding: 25px;
  gap: 24px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.bags-pcard:hover {
  border-color: var(--bags-accent, var(--primary-color, #c8b35b));
}

.bags-pcard.is-out-of-stock {
  opacity: 0.7;
}


/* === Media wrap (image area) === */

.bags-pcard__media-wrap {
  position: relative;
  width: 100%;
}

.bags-pcard__media-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.bags-pcard__media {
  position: relative;
  width: 100%;
  aspect-ratio: 350 / 415;
  background-color: #e6e6e6;
  overflow: hidden;
}

.bags-pcard__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.5s ease, opacity 0.3s ease;
}

.bags-pcard__image--main {
  z-index: 1;
}

.bags-pcard__image--hover {
  z-index: 2;
  opacity: 0;
}

.bags-pcard__media-wrap:hover .bags-pcard__image--main {
  transform: scale(1.03);
}

.bags-pcard__media-wrap:has(.bags-pcard__image--hover):hover .bags-pcard__image--main {
  opacity: 0;
}

.bags-pcard__media-wrap:hover .bags-pcard__image--hover {
  opacity: 1;
}

.bags-pcard__labels {
  position: absolute;
  inset-block-start: 16px;
  inset-inline-start: 16px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  pointer-events: none;
}

.bags-pcard__label {
  padding: 5px 14px;
  border-radius: 30px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  letter-spacing: 0.2px;
}


/* Discount: red bg, white text — matches Figma "16%" pill */

.bags-pcard__label--discount {
  background-color: #ff8284;
  color: #ffffff;
}


/* Custom product badge */

.bags-pcard__label--badge {
  background-color: var(--bags-accent, var(--primary-color, #c8b35b));
  color: #ffffff;
}


/* "Available in several options", "Tax free", etc. */

.bags-pcard__label--info {
  background-color: rgba(0, 0, 0, 0.75);
  color: #ffffff;
}


/* Out-of-stock takes priority — wider pill with darker bg */

.bags-pcard__label--stock {
  background-color: #1a1502;
  color: #ffffff;
  padding: 6px 16px;
}

.bags-pcard .bags-pcard__countdown {
  position: absolute;
  inset-inline: 16px;
  inset-block-end: 16px;
  z-index: 5;
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 0;
  margin: 0;
  list-style: none;
  background: transparent;
  pointer-events: none;
}

.bags-pcard .bags-pcard__countdown li {
  flex: 0 1 auto;
  min-width: 54px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 10px;
  background-color: rgba(26, 21, 2, 0.88);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(200, 179, 91, 0.35);
  border-radius: 10px;
  color: #ffffff;
}

.bags-pcard .bags-pcard__countdown .count-number {
  width: auto;
  height: auto;
  background: none;
  font-family: "Manrope", inherit;
  font-size: 16px;
  font-weight: 700;
  color: var(--bags-accent, var(--primary-color, #c8b35b));
  line-height: 1;
  letter-spacing: 0.3px;
  margin: 0;
}

.bags-pcard .bags-pcard__countdown .count-name {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 0.7);
  text-transform: lowercase;
  margin: 0;
}


/* Tablet — one notch down so the badge stays balanced as cards shrink. */

@media (max-width: 991px) {
  .bags-pcard .bags-pcard__countdown {
    inset-inline: 12px;
    inset-block-end: 12px;
    gap: 5px;
  }
  .bags-pcard .bags-pcard__countdown li {
    min-width: 46px;
    padding: 6px 8px;
  }
  .bags-pcard .bags-pcard__countdown .count-number {
    font-size: 14px;
  }
  .bags-pcard .bags-pcard__countdown .count-name {
    font-size: 9px;
  }
}


/* Mobile — smallest variant since the card itself is tight. */

@media (max-width: 575px) {
  .bags-pcard .bags-pcard__countdown {
    inset-inline: 8px;
    inset-block-end: 8px;
    gap: 3px;
  }
  .bags-pcard .bags-pcard__countdown li {
    min-width: 36px;
    padding: 4px 5px;
    border-radius: 7px;
  }
  .bags-pcard .bags-pcard__countdown .count-number {
    font-size: 11px;
  }
  .bags-pcard .bags-pcard__countdown .count-name {
    font-size: 7.5px;
  }
}


/* === Color variant swatches (top center under badge, fade in on hover) === */

.bags-pcard__colors {
  position: absolute;
  inset-block-end: 16px;
  inset-inline-start: 50%;
  transform: translateX(50%) translateY(8px);
  z-index: 5;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 30px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

[dir="rtl"] .bags-pcard__colors {
  transform: translateX(-50%) translateY(8px);
}

.bags-pcard__media-wrap:hover .bags-pcard__colors {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(50%) translateY(0);
}

[dir="rtl"] .bags-pcard__media-wrap:hover .bags-pcard__colors {
  transform: translateX(-50%) translateY(0);
}

.bags-pcard__color-swatch {
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 0, 0, 0.12);
  background-color: transparent;
  cursor: pointer;
  position: relative;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bags-pcard__color-swatch:hover {
  transform: scale(1.15);
}

.bags-pcard__color-swatch.is-active {
  border-color: #1a1502;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 3.5px var(--primary-color, #c8b35b);
  transform: scale(1.05);
}

.bags-pcard__color-swatch-inner {
  display: none;
}


/* === Body (name + price + actions) === */

.bags-pcard__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  height: stretch;
  justify-content: space-between;
}

.bags-pcard__row-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.bags-pcard__name-price {
  flex: 1 1 auto;
  min-width: 0;
}

.bags-pcard__name {
  margin: 0 0 4px 0;
  font-size: 28px;
  line-height: 1.4;
  font-weight: 400;
  color: #000000;
}

.bags-pcard__name a {
  color: inherit;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bags-pcard__price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.bags-pcard__price {
  font-size: 22px;
  font-weight: 600;
  color: var(--primary-color, #c8b35b);
}

.bags-pcard__price-old {
  font-size: 16px;
  color: #999;
  text-decoration: line-through;
}

.bags-pcard__discount {
  background-color: #ff8284;
  color: #ffffff;
  padding: 4px 14px;
  border-radius: 60px;
  font-size: 13px;
  font-weight: 500;
  flex-shrink: 0;
  white-space: nowrap;
}

.bags-pcard__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bags-pcard__cart-btn {
  position: relative;
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 20px;
  background: #ffffff;
  border: 1px solid #dbdbdb;
  border-radius: 130px;
  color: #000000;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.bags-pcard__cart-btn:hover:not(.is-disabled) {
  background-color: var(--primary-color, #c8b35b);
  border-color: var(--primary-color, #c8b35b);
  color: #000;
}

.bags-pcard__cart-btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.bags-pcard__cart-btn svg {
  flex-shrink: 0;
}

.bags-pcard__cart-btn .add-to-cart-progress {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-color, #c8b35b);
  color: #ffffff;
  z-index: 2;
  border-radius: inherit;
}

.bags-pcard__cart-btn .add-to-cart-progress.d-none {
  display: none !important;
}

.bags-pcard__wishlist-btn {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid #dbdbdb;
  background: #ffffff;
  color: #000000;
  cursor: pointer;
  padding: 0;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.bags-pcard__wishlist-btn:hover {
  background-color: var(--primary-color, #c8b35b);
  border-color: var(--primary-color, #c8b35b);
  color: #ffffff;
}

.bags-pcard__wishlist-btn.in-wishlist,
.bags-pcard__wishlist-btn.is-active,
.bags-pcard__wishlist-btn.filled {
  background-color: var(--primary-color, #c8b35b);
  border-color: var(--primary-color, #c8b35b);
  color: #ffffff;
}

.bags-pcard__wishlist-btn.filled svg path {
  fill: currentColor;
  fill-opacity: 1;
}

.bags-pcard__wishlist-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bags-pcard__wishlist-wrap .bags-pcard__wishlist-btn.loader {
  cursor: wait;
}

.bags-pcard__wishlist-wrap .bags-pcard__wishlist-btn.loader i {
  font-size: 16px;
}

.bags-pcard__wishlist-wrap .d-none {
  display: none !important;
}

@media (max-width: 575px) {
  .bags-pcard {
    padding: 16px;
    gap: 16px;
  }
  .bags-pcard__name {
    font-size: 20px;
  }
  .bags-pcard__price {
    font-size: 18px;
  }
  .bags-pcard__cart-btn {
    padding: 12px 16px;
    font-size: 13px;
    gap: 8px;
  }
  .bags-pcard__cart-btn svg {
    width: 18px;
    height: 18px;
  }
  .bags-pcard__wishlist-btn {
    width: 44px;
    height: 44px;
  }
  .bags-pcard__wishlist-btn svg {
    width: 18px;
    height: 18px;
  }
  .bags-pcard__color-swatch {
    width: 18px;
    height: 18px;
  }
  .bags-pcard__label {
    font-size: 10px;
    padding: 4px 10px;
  }
}


/* On touch devices, always show colour swatches (no hover trigger). */

@media (hover: none) {
  .bags-pcard__colors {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(50%) translateY(0);
  }
  [dir="rtl"] .bags-pcard__colors {
    transform: translateX(-50%) translateY(0);
  }
}


/* ==================================================================
   Products Section
   ================================================================== */

.bags-products-section {
  padding-top: var(--ps-pad-top-d, 70px);
  padding-bottom: var(--ps-pad-bottom-d, 70px);
  background-color: var(--ps-bg, transparent);
  background-image: var(--ps-bg-image, none);
  background-size: cover;
  background-position: center;
  position: relative;
}

@media (max-width: 767px) {
  .bags-products-section {
    padding-top: var(--ps-pad-top-m, 40px);
    padding-bottom: var(--ps-pad-bottom-m, 40px);
  }
}

.bags-products-section__container {
  max-width: var(--bags-container-max, 1320px);
  margin-inline: auto;
}

.bags-products-section__header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-block-end: 40px;
  flex-wrap: wrap;
}

.bags-products-section__heading {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  text-align: var(--ps-title-align, start);
}

.bags-products-section__subtitle {
  margin: 0;
  font-size: 16px;
  color: var(--ps-title-color, #1a1502);
  opacity: 0.8;
  font-weight: 500;
}

.bags-products-section__title {
  margin: 0;
  font-size: var(--ps-title-size, 97px);
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ps-title-color, #1a1502);
}

.bags-products-section__controls {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.bags-products-section__arrows {
  display: flex;
  gap: 14px;
}

.bags-products-section__arrow {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.25s ease;
  padding: 0;
}

.bags-products-section__arrow--prev,
.bags-products-section__arrow--next {
  background-color: var(--ps-arrow-inactive, #1a1502);
  color: var(--ps-arrow-active, var(--primary-color, #c8b35b));
  transition: all 0.3s ease;
}

.bags-products-section__arrow--prev:hover,
.bags-products-section__arrow--next:hover {
  background-color: var(--ps-arrow-active, var(--primary-color, #c8b35b));
  color: var(--ps-arrow-color, #000);
}

.bags-products-section__arrow:hover {
  transform: scale(1.05);
}

/* LTR-authored SVGs mirrored in RTL to match the slider's RTL flow direction. */
[dir="rtl"] .bags-products-section__arrow svg { transform: scaleX(-1); }

.bags-products-section__view-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 90px;
  border: 1.5px solid var(--ps-title-color, #1a1502);
  color: var(--ps-title-color, #1a1502);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.bags-products-section__view-all:hover {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: #000;
}

[dir="rtl"] .bags-products-section__view-all svg {
  transform: scaleX(-1);
}


/* Grid (non-slider) layout */

.bags-products-section__grid:not(.is-slider) {
  display: grid;
  grid-template-columns: repeat(var(--ps-cols-d, 3), 1fr);
  gap: 24px;
}

@media (max-width: 991px) {
  .bags-products-section__grid:not(.is-slider) {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .bags-products-section__grid:not(.is-slider) {
    grid-template-columns: repeat(var(--ps-cols-m, 2), 1fr);
    gap: 12px;
  }
}


/* Slider items spacing */

.bags-products-section__grid.is-slider .slick-slide {
  margin-inline: 12px;
  height: auto;
}

.bags-products-section__grid.is-slider .slick-list {
  margin-inline: -12px;
}

.bags-products-section__grid.is-slider .slick-track {
  display: flex;
  align-items: stretch;
}

.bags-products-section__grid.is-slider .slick-slide > * {
  height: 100%;
}

.bags-products-section__grid.is-slider .bags-pcard {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.bags-products-section__grid.is-slider .bags-pcard__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.bags-products-section__grid.is-slider .bags-pcard__actions {
  margin-top: auto;
}

.bags-products-section__grid .slick-dots {
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
      flex-wrap: wrap;
}

.bags-products-section__grid .slick-dots li {
  line-height: 0;
}

.bags-products-section__grid .slick-dots li button {
  font-size: 0;
  width: 16px;
  height: 5px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  background-color: #E0E0E0;
  cursor: pointer;
  transition: background-color 0.25s ease, width 0.25s ease;
}

.bags-products-section__grid .slick-dots li.slick-active button {
  width: 44px;
  background-color: var(--primary-color, #c8b35b);
}

.bags-products-section__empty {
  padding: 60px 20px;
  text-align: center;
  color: #999;
  font-size: 16px;
}

@media (max-width: 991px) {
  .bags-products-section__title {
    font-size: clamp(36px, 7vw, 60px);
  }
  .bags-products-section__arrow {
    width: 50px;
    height: 50px;
  }
  .bags-products-section__arrow svg {
    width: 18px;
    height: 18px;
  }
  .bags-products-section__header {
    margin-block-end: 24px;
  }
}


/* ==================================================================
   Cards Collection
   ================================================================== */

.bags-cards-collection {
  padding-top: var(--cc-pad-top-d, 70px);
  padding-bottom: var(--cc-pad-bottom-d, 70px);
  background-color: var(--cc-bg, transparent);
  background-image: var(--cc-bg-image, none);
  background-size: cover;
  background-position: center;
}

@media (max-width: 767px) {
  .bags-cards-collection {
    padding-top: var(--cc-pad-top-m, 40px);
    padding-bottom: var(--cc-pad-bottom-m, 40px);
  }
}

.bags-cards-collection__container {
  max-width: var(--bags-container-max, 1320px);
  margin-inline: auto;
}

.bags-cards-collection__title {
  margin: 0 0 24px 0;
  font-size: 48px;
  line-height: 1.1;
  font-weight: 600;
}

.bags-cards-collection__grid:not(.is-slider) {
  display: grid;
  grid-template-columns: repeat(var(--cc-cols-d, 3), 1fr);
  gap: 24px;
}

@media (max-width: 991px) {
  .bags-cards-collection__grid:not(.is-slider) {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .bags-cards-collection__grid:not(.is-slider) {
    grid-template-columns: repeat(var(--cc-cols-m, 1), 1fr);
  }
}

.bags-cards-collection__grid.is-slider .slick-slide {
  margin-inline: 12px;
}

.bags-cards-collection__grid.is-slider .slick-list {
  margin-inline: -12px;
}

.bags-cards-collection__card {
  position: relative;
  display: block;
  height: var(--cc-card-h-d, 168px);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  isolation: isolate;
}

@media (max-width: 575px) {
  .bags-cards-collection__card {
    height: var(--cc-card-h-m, 140px);
  }
}

.bags-cards-collection__card-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  transition: transform 0.6s ease;
}

.bags-cards-collection__card:hover .bags-cards-collection__card-image {
  transform: scale(1.05);
}

.bags-cards-collection__card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(-90deg, color-mix(in srgb, var(--ovc, #1a1502) 90%, transparent) 0%, color-mix(in srgb, var(--ovc, #1a1502) 50%, transparent) 60%, transparent 100%);
  z-index: 2;
}

[dir="ltr"] .bags-cards-collection__card-overlay {
  background: linear-gradient(-270deg, transparent 0%, color-mix(in srgb, var(--ovc, #1a1502) 50%, transparent) 60%, color-mix(in srgb, var(--ovc, #1a1502) 90%, transparent) 100%);
}

.bags-cards-collection__card-body {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  padding: 24px 32px;
}

.bags-cards-collection__card-body[data-align="center"] {
  align-items: center;
  text-align: center;
}

.bags-cards-collection__card:has(.bags-cards-collection__card-body[data-align="center"]) .bags-cards-collection__card-overlay[data-style="gradient"] {
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--ovc, #1a1502) 75%, transparent) 0%, color-mix(in srgb, var(--ovc, #1a1502) 55%, transparent) 60%, color-mix(in srgb, var(--ovc, #1a1502) 30%, transparent) 100%) !important;
}

.bags-cards-collection__card-overlay[data-style="solid"] {
  background: var(--ovc, #1a1502) !important;
}

.bags-cards-collection__card-badge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 30px;
  font-size: 12px;
  font-weight: 700;
}

.bags-cards-collection__card-title {
  margin: 0;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 600;
}

.bags-cards-collection__card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  margin-block-start: 4px;
}

[dir="rtl"] .bags-cards-collection__card-cta svg {
  transform: scaleX(-1);
}

@media (max-width: 575px) {
  .bags-cards-collection__card-title {
    font-size: 22px;
  }
  .bags-cards-collection__card-body {
    padding: 16px 20px;
  }
}


/* ==================================================================
   Text Banner
   ================================================================== */

.bags-text-banner {
  padding-top: var(--tb-pad-top-d, 0);
  padding-bottom: var(--tb-pad-bottom-d, 0);
  background-color: var(--tb-bg, transparent);
}

@media (max-width: 767px) {
  .bags-text-banner {
    padding-top: var(--tb-pad-top-m, 0);
    padding-bottom: var(--tb-pad-bottom-m, 0);
  }
}


/* الجهة المالكة: ام تي - ثيمس. الإذن مقتصر على B aGs.
   نقل الكود لمتجر آخر يُعد خرقاً مكتملاً للحقوق الفكرية. */

.bags-text-banner__inner {
  position: relative;
  width: 100%;
  height: var(--tb-h-d, 700px);
  overflow: hidden;
}

@media (max-width: 767px) {
  .bags-text-banner__inner {
    height: var(--tb-h-m, 500px);
  }
}

.bags-text-banner__media {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.bags-text-banner__image,
.bags-text-banner__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bags-text-banner__image--mobile {
  display: none;
}

@media (max-width: 767px) {
  .bags-text-banner__image--mobile {
    display: block;
  }
  .bags-text-banner__media:has(.bags-text-banner__image--mobile) .bags-text-banner__image--desktop {
    display: none;
  }
}

.bags-text-banner__container {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
}

.bags-text-banner__container[data-pos-x="start"] {
  justify-content: flex-start;
}

.bags-text-banner__container[data-pos-x="center"] {
  justify-content: center;
}

.bags-text-banner__container[data-pos-x="end"] {
  justify-content: flex-end;
}

.bags-text-banner__container[data-pos-y="top"] {
  align-items: flex-start;
}

.bags-text-banner__container[data-pos-y="bottom"] {
  align-items: flex-end;
}

@media(max-width:991px) {
  .bags-text-banner__container {
    padding-top: 35px;
  }
}

@media(max-width:480px) {
  .bags-text-banner__box {
    width: 100%;
    max-width: 100%;
  }
}

.bags-text-banner__box {
  max-width: 680px;
  padding: 60px 60px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  border-radius: 0;
}

@media (max-width: 767px) {
  .bags-text-banner__box {
    padding: 32px 24px;
    gap: 14px;
  }
}

.bags-text-banner__subtitle {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.bags-text-banner__title {
  margin: 0;
  font-size: var(--tb-title-size, 80px);
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.01em;
}

@media (max-width: 767px) {
  .bags-text-banner__title {
    font-size: clamp(36px, 9vw, 60px);
  }
}

.bags-text-banner__description {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}

.bags-text-banner__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  padding: 16px 32px;
  border-radius: 90px;
  border: 2px solid currentColor;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.25s ease;
  margin-block-start: 12px;
  font-family: "Plus Jakarta Sans", inherit;
}

[dir="rtl"] .bags-text-banner__btn svg {
  transform: scaleX(-1);
}


/* ==================================================================
   Featured Banner
   ================================================================== */

.bags-featured-banner {
  padding-top: var(--fb-pad-top-d, 60px);
  padding-bottom: var(--fb-pad-bottom-d, 60px);
  background-color: var(--fb-bg, #fcf6d0);
  overflow: hidden;
  /* clip the marquee that extends beyond the section horizontally */
}

@media (max-width: 767px) {
  .bags-featured-banner {
    padding-top: var(--fb-pad-top-m, 60px);
    padding-bottom: var(--fb-pad-bottom-m, 60px);
  }
}

.bags-featured-banner__head {
  text-align: center;
  margin-block-end: 40px;
}

.bags-featured-banner__title {
  margin: 0;
  font-size: var(--fb-title-size, 60px);
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.01em;
}

@media (max-width: 767px) {
  .bags-featured-banner__title {
    font-size: clamp(40px, 9vw, 64px);
  }
}

.bags-featured-banner__stage {
  display: flex;
  justify-content: center;
}

.bags-featured-banner__visual {
  position: relative;
  width: 100%;
  max-width: 1320px;
  /* Responsive aspect ratios — capped heights so the image never gets too tall. */
  aspect-ratio: 1320 / 636;
}

@media (max-width: 991px) {
  .bags-featured-banner__visual {
    aspect-ratio: 4 / 3;
    max-height: 520px;
  }
}

@media (max-width: 767px) {
  .bags-featured-banner__visual {
    aspect-ratio: 4 / 5;
    max-height: 460px;
  }
}

@media (max-width: 480px) {
  .bags-featured-banner__visual {
    max-height: 400px;
  }
}


/* Wrapper that DOES clip — keeps the rounded corners on the image */

.bags-featured-banner__media-wrap {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  overflow: hidden;
  isolation: isolate;
  z-index: 1;
}

.bags-featured-banner__media {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.bags-featured-banner__image,
.bags-featured-banner__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 40px;
}

.bags-featured-banner__image--mobile {
  display: none;
}

@media (max-width: 767px) {
  .bags-featured-banner__image--mobile {
    display: block;
  }
  .bags-featured-banner__media:has(.bags-featured-banner__image--mobile) .bags-featured-banner__image--desktop {
    display: none;
  }
}


/* Image overlay — tints the banner image (separate from section bg overlay) */

.bags-featured-banner__image-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 40px;
  z-index: 2;
}

.bags-featured-banner__circular {
  position: absolute;
  top: var(--fb-circular-top, 31%);
  right: var(--fb-circular-x, 50%);
  transform: translate(50%, -50%);
  z-index: 4;
  width: clamp(140px, 19%, 260px);
  aspect-ratio: 1;
  color: var(--fb-circular-color, #ffffff);
  animation: bags-fb-circular-rotate 22s linear infinite;
  pointer-events: none;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.5));
}

.bags-featured-banner__circular svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}


/* On tablet (square image), keep circle around the upper third */

@media (max-width: 991px) {
  .bags-featured-banner__circular {
    top: var(--fb-circular-top, 28%);
  }
}

@media (max-width: 767px) {
  .bags-featured-banner__circular {
    top: var(--fb-circular-top, 25%);
    /* Cap absolute size on mobile so it doesn't dominate the narrow screen */
    width: clamp(120px, 38vw, 200px);
  }
}

@keyframes bags-fb-circular-rotate {
  from {
    transform: translate(50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(50%, -50%) rotate(-360deg);
  }
}

.bags-featured-banner__marquee {
  position: absolute;
  top: var(--fb-marquee-position, 70%);
  right: 50%;
  transform: translate(50%, -50%);
  width: 100vw;
  z-index: 3;
  overflow: hidden;
  padding-block: 18px;
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  /* belt-and-suspenders — also set direction in CSS */
  direction: rtl;
}

@media (max-width: 991px) {
  .bags-featured-banner__marquee {
    top: 62%;
    padding-block: 14px;
  }
  .bags-featured-banner__marquee-text {
    font-size: clamp(34px, 5vw, 52px);
  }
}

@media (max-width: 767px) {
  .bags-featured-banner__marquee {
    top: 64%;
    /* matches Figma mobile: marquee center at ~64% of image */
    padding-block: 10px;
  }
}

.bags-featured-banner__marquee-track {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  animation: bags-fb-marquee var(--fb-marquee-speed, 30s) linear infinite;
  will-change: transform;
}

.bags-featured-banner__marquee-half {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  flex-shrink: 0;
  gap: 56px;
  /* Figma spec — matches the "56" markers in design */
  padding-inline: 28px;
}

.bags-featured-banner__marquee-text {
  font-size: var(--fb-marquee-text-size, 64px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1px;
  white-space: nowrap;
  text-transform: uppercase;
}


/* Logo (custom image — <img> tag) inside the marquee */

img.bags-featured-banner__marquee-logo {
  height: calc(var(--fb-marquee-text-size, 64px) * 0.85);
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
  display: inline-block;
}

svg.bags-featured-banner__marquee-logo--default {
  height: calc(var(--fb-marquee-text-size, 64px) * 0.85) !important;
  width: calc(var(--fb-marquee-text-size, 64px) * 3.12) !important;
  flex-shrink: 0;
  display: inline-block;
  color: inherit;
  /* explicit — so currentColor inside the SVG = strip color */
}

@media (max-width: 767px) {
  svg.bags-featured-banner__marquee-logo--default {
    height: clamp(24px, 7vw, 42px) !important;
    width: calc(clamp(24px, 7vw, 42px) * 3.67) !important;
  }
}

@media (max-width: 767px) {
  .bags-featured-banner__marquee {
    padding-block: 10px;
  }
  .bags-featured-banner__marquee-text {
    font-size: clamp(28px, 8vw, 48px);
  }
  .bags-featured-banner__marquee-logo {
    height: clamp(20px, 6vw, 34px);
  }
  .bags-featured-banner__marquee-half {
    gap: 24px;
  }
}

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


/* === Button — overlays the lower part of the image, below the marquee === */

.bags-featured-banner__btn {
  position: absolute;
  bottom: 8%;
  right: 50%;
  transform: translateX(50%);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  padding: 14px 28px;
  border-radius: 90px;
  border: 1.5px solid currentColor;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  font-family: "Plus Jakarta Sans", inherit;
  /* Hover styles inherited from the unified CTA block at the bottom of this file. */
}

@media (max-width: 991px) {
  .bags-featured-banner__btn {
    bottom: 7%;
    padding: 11px 22px;
    font-size: 13px;
  }
}

@media (max-width: 767px) {
  .bags-featured-banner__btn {
    bottom: 6%;
    padding: 10px 20px;
    font-size: 13px;
  }
}

[dir="rtl"] .bags-featured-banner__btn svg {
  transform: scaleX(-1);
}


/* ==================================================================
   Offer Product
   ================================================================== */

.bags-offer-product {
  padding-top: var(--op-pad-top-d, 100px);
  padding-bottom: var(--op-pad-bottom-d, 100px);
  background-color: var(--op-bg, #faf7e9);
}

@media (max-width: 767px) {
  .bags-offer-product {
    padding-top: var(--op-pad-top-m, 60px);
    padding-bottom: var(--op-pad-bottom-m, 60px);
  }
}

.bags-offer-product__head {
  position: relative;
  display: inline-block;
  width: 100%;
  text-align: center;
  margin-block-end: 40px;
}

.bags-offer-product__title {
  margin: 0;
  font-size: clamp(40px, 7vw, 90px);
  line-height: 1.1;
  font-weight: 400;
}

.bags-offer-product__badge {
  display: inline-block;
  margin-block-start: 8px;
  padding: 4px 20px;
  border-radius: 60px;
  font-size: 18px;
  font-weight: 500;
}

.bags-offer-product__slider-wrap {
  position: relative;
}


/* When Slick initializes the slider it adds
   `.slick-initialized .slick-slide { display: block }` which overrides
   our grid layout. Bump specificity (and use !important on display) so
   the two-column card layout survives slick init. */

.bags-offer-product__slider .bags-offer-product__card,
.bags-offer-product__card {
  background-color: var(--op-card-bg, #3b3007);
  border-radius: 50px;
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  overflow: hidden;
  padding: 60px;
}

@media (max-width: 991px) {
  .bags-offer-product__slider .bags-offer-product__card,
  .bags-offer-product__card {
    grid-template-columns: 1fr;
    padding: 32px;
    gap: 24px;
    border-radius: 32px;
  }
}

.bags-offer-product__image-wrap {
  display: block;
  position: relative;
  border-radius: 30px;
  /* Match Figma Frame 31: 570 × 507 → ratio 570/507 ≈ 1.124. */
  aspect-ratio: 570 / 507;
  overflow: hidden;
}


/* Labels stacked top-start over the image. Same visual language as
   the product card so users get a consistent look across sections. */

.bags-offer-product__labels {
  position: absolute;
  inset-block-start: 16px;
  inset-inline-start: 16px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  pointer-events: none;
}

.bags-offer-product__label {
  padding: 5px 14px;
  border-radius: 30px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  letter-spacing: 0.2px;
}

.bags-offer-product__label--badge {
  background-color: var(--primary-color, #c8b35b);
  color: #ffffff;
}

.bags-offer-product__label--info {
  background-color: rgba(0, 0, 0, 0.75);
  color: #ffffff;
}

.bags-offer-product__label--stock {
  background-color: #1a1502;
  color: #ffffff;
  padding: 6px 16px;
}


/* Discount pill placed in col 2 / row 2 of the top grid — sits in the
   same column as the wishlist heart above it. Right-aligned (in RTL:
   visually flush left) to mirror the heart icon's position. */

.bags-offer-product__discount {
  justify-self: end;
  background-color: #ff8284;
  color: #ffffff;
  padding: 4px 14px;
  border-radius: 60px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  margin-right: 15px;
}

.bags-offer-product__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bags-offer-product__info {
  display: flex;
  flex-direction: column;
  gap: 24px;
  justify-content: space-between;
}


/* 2×2 grid keeps the discount pill aligned in the same column as the
   wishlist button (col 2), one row below the heart. */

.bags-offer-product__top {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 16px;
  row-gap: 12px;
  align-items: center;
}

.bags-offer-product__name {
  margin: 0;
  font-size: 50px;
  line-height: 1.1;
  font-weight: 400;
  color: var(--op-name, #ffffff);
}

.bags-offer-product__name a {
  color: inherit;
  text-decoration: none;
}

.bags-offer-product__wishlist {
  width: 74px;
  height: 74px;
  border-radius: 65px;
  border: 1px solid #dbdbdb;
  background: transparent;
  color: var(--op-name, #ffffff);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  flex-shrink: 0;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.bags-offer-product__wishlist img {
  width: 22px;
  height: 19px;
}

.bags-offer-product__wishlist:hover {
  background-color: var(--op-btn-hover-bg, var(--primary-color, #c8b35b));
  border-color: transparent;
}

.bags-offer-product__price-row {
  display: flex;
  align-items: center;
  gap: 11px;
}

.bags-offer-product__price {
  font-size: 30px;
  font-weight: 600;
  color: var(--op-price, var(--primary-color, #c8b35b));
}

.bags-offer-product__price-old {
  font-size: 20px;
  color: var(--op-price-old, #b1b1b1);
  text-decoration: line-through;
  font-weight: 600;
}

.bags-offer-product__description {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  font-weight: 500;
  color: var(--op-desc, #bcbcbc);
}


/* Countdown — Figma Frame 97-100 exact spec:
   cell 84×115, padding 30 20, border-radius 150 (full pill), bg #4B3E0E.
   Number: Manrope 24/28.8 (700), label: Manrope 16/19.2 (400), both white.
   Rules are scoped under `.bags-offer-product` to beat the global
   `.offer-counter li` / `.offer-counter .count-number` styles in
   general.rtl.css (which target the same elements via the JS plugin's
   required classes). */

.bags-offer-product .bags-offer-product__countdown {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 11px;
  flex-wrap: wrap;
}

.bags-offer-product .bags-offer-product__cd-cell {
  background-color: var(--op-cd-bg, #4b3e0e);
  color: var(--op-cd-color, #ffffff);
  border-radius: 150px;
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 95px;
  height: 115px;
  box-sizing: border-box;
}

.bags-offer-product .bags-offer-product__cd-num,
.bags-offer-product .bags-offer-product__cd-label {
  width: 100%;
  height: auto;
  margin: 0;
  background: none;
  text-align: center;
  color: var(--op-cd-color, #ffffff);
  font-family: "Manrope", inherit;
}

.bags-offer-product .bags-offer-product__cd-num {
  font-size: 24px;
  font-weight: 700;
  line-height: 28.8px;
}

.bags-offer-product .bags-offer-product__cd-label {
  font-size: 16px;
  font-weight: 400;
  line-height: 19.2px;
}

.bags-offer-product__actions {
  display: flex;
  gap: 12px;
  margin-block-start: 8px;
}


/* Both buttons share the SAME default style (transparent + bordered).
   On hover both fill with the active color. */

.bags-offer-product__btn {
  position: relative;
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 22px 51px;
  border-radius: 130px;
  font-size: 20px;
  font-weight: 600;
  background: transparent;
  border: 1px solid var(--op-btn-border, #ffffff);
  color: var(--op-btn-color, #ffffff);
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  overflow: hidden;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.bags-offer-product__btn .add-to-cart-progress {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--op-btn-hover-bg, var(--primary-color, #c8b35b));
  color: var(--op-btn-hover-color, #1a1502);
  z-index: 2;
  border-radius: inherit;
  font-size: 22px;
}

.bags-offer-product__btn .add-to-cart-progress.d-none {
  display: none !important;
}


/* Wishlist wrapper for offer-product card — keeps the loader and the active
   button stacked in the same slot inside the 2x2 info grid. */

.bags-offer-product__wishlist-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bags-offer-product__wishlist-wrap .d-none {
  display: none !important;
}

.bags-offer-product__wishlist.filled {
  background-color: var(--op-btn-hover-bg, var(--primary-color, #c8b35b));
  border-color: transparent;
}

.bags-offer-product__wishlist.loader {
  font-size: 22px;
  color: var(--op-name, #ffffff);
}

.bags-offer-product__btn img {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

.bags-offer-product__btn:hover:not(:disabled) {
  background-color: var(--op-btn-hover-bg, var(--primary-color, #c8b35b));
  color: var(--op-btn-hover-color, #1a1502);
  border-color: var(--op-btn-hover-bg, var(--primary-color, #c8b35b));
}

.bags-offer-product__btn:hover:not(:disabled) img {
  /* Invert the white icon on hover so it stays visible on the gold fill. */
  filter: brightness(0);
}

.bags-offer-product__btn:disabled {
  opacity: 0.6;
  cursor: wait;
}


/* Side arrows — same pattern as testimonials section. */

.bags-offer-product__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 0;
  background-color: var(--op-arrow-inactive, #1a1502);
  color: var(--op-arrow-color, #ffffff);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.bags-offer-product__arrow:hover {
  background-color: var(--op-arrow-active, var(--primary-color, #c8b35b));
  transform: translateY(-50%) scale(1.05);
}

.bags-offer-product__arrow--prev {
  inset-inline-start: -28px;
}

.bags-offer-product__arrow--next {
  inset-inline-end: -28px;
}

/* LTR-authored SVGs mirrored in RTL to match the slider's RTL flow direction. */
[dir="rtl"] .bags-offer-product__arrow svg { transform: scaleX(-1); }

@media (max-width: 991px) {
  .bags-offer-product__name {
    font-size: 36px;
  }
  .bags-offer-product__price {
    font-size: 24px;
  }
  .bags-offer-product__btn {
    padding: 16px 28px;
    font-size: 16px;
    gap: 10px;
  }
  .bags-offer-product__btn img {
    width: 22px;
    height: 22px;
  }
  .bags-offer-product .bags-offer-product__cd-cell {
    padding: 24px 14px;
    width: 77px;
    height: 96px;
  }
  .bags-offer-product .bags-offer-product__cd-num {
    font-size: 22px;
    line-height: 26.4px;
  }
  .bags-offer-product .bags-offer-product__cd-label {
    font-size: 14px;
    line-height: 16.8px;
  }
  .bags-offer-product__wishlist {
    width: 56px;
    height: 56px;
    padding: 12px;
  }
  .bags-offer-product__arrow {
    width: 44px;
    height: 44px;
  }
  .bags-offer-product__arrow--prev {
    inset-inline-start: 8px;
  }
  .bags-offer-product__arrow--next {
    inset-inline-end: 8px;
  }
}

@media (max-width: 575px) {
  .bags-offer-product__actions {
    flex-direction: column;
  }
  .bags-offer-product__name {
    font-size: 28px;
  }
  /* Shrink countdown cells so all four fit on one row inside the
     mobile card width (Sec/Min/Hours/Days side by side). */
  .bags-offer-product .bags-offer-product__countdown {
    gap: 6px;
    flex-wrap: nowrap;
  }
  .bags-offer-product .bags-offer-product__cd-cell {
    padding: 14px 8px;
    width: 54px;
    height: 72px;
    gap: 4px;
  }
  .bags-offer-product .bags-offer-product__cd-num {
    font-size: 18px;
    line-height: 21.6px;
  }
  .bags-offer-product .bags-offer-product__cd-label {
    font-size: 11px;
    line-height: 13.2px;
  }
  /* On mobile the discount pill drops out of col-2 onto its own row
     so the price + old price stay on a single horizontal line. The
     pill aligns to the row start (visually right in RTL, left in LTR). */
  .bags-offer-product__price-row {
    grid-column: 1 / -1;
    flex-wrap: nowrap;
    white-space: nowrap;
  }
  .bags-offer-product__discount {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

.bags-offer-product__empty {
  padding: 60px 20px;
  text-align: center;
  color: #999;
}


/* ==================================================================
   Categories
   ================================================================== */

.bags-cats {
  padding-top: var(--cats-pad-top-d, 60px);
  padding-bottom: var(--cats-pad-bottom-d, 60px);
  background-color: var(--cats-bg, #fff8d9);
  background-image: var(--cats-bg-image, none);
  background-size: cover;
  background-position: center;
  position: relative;
}

@media (max-width: 767px) {
  .bags-cats {
    padding-top: var(--cats-pad-top-m, 60px);
    padding-bottom: var(--cats-pad-bottom-m, 60px);
  }
}

.bags-cats__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
}

@media (max-width: 767px) {
  .bags-cats__container {
    gap: 40px;
  }
}

.bags-cats__title {
  margin: 0;
  font-size: var(--cats-title-size, 100px);
  line-height: 1.2;
  font-weight: 500;
  color: var(--cats-title-color, #000);
  text-align: center;
}

@media (max-width: 991px) {
  .bags-cats__title {
    font-size: clamp(40px, 8vw, 80px);
  }
}

.bags-cats__viewport {
  position: relative;
  width: 100%;
}

.bags-cats__grid:not(.is-slider) {
  display: grid;
  grid-template-columns: repeat(var(--cats-cols-d, 4), 1fr);
  column-gap: 24px;
  row-gap: 48px;
  justify-content: center;
}

@media (max-width: 991px) {
  .bags-cats__grid:not(.is-slider) {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 575px) {
  .bags-cats__grid:not(.is-slider) {
    grid-template-columns: repeat(var(--cats-cols-m, 2), 1fr);
    column-gap: 12px;
    row-gap: 32px;
  }
}

.bags-cats--dark .bags-cats__grid:not(.is-slider) {
  column-gap: 0;
  row-gap: 0;
}

.bags-cats--dark .bags-cats__grid:not(.is-slider)[data-cols-d="4"] .bags-cats__card:not(:nth-child(-n+4)),
.bags-cats--dark .bags-cats__grid:not(.is-slider)[data-cols-d="3"] .bags-cats__card:not(:nth-child(-n+3)),
.bags-cats--dark .bags-cats__grid:not(.is-slider)[data-cols-d="2"] .bags-cats__card:not(:nth-child(-n+2)) {
  border-block-start: 0;
}

@media (max-width: 991px) {
  .bags-cats--dark .bags-cats__grid:not(.is-slider) .bags-cats__card:not(: nth-child(-n+3)) {
    border-block-start: 0;
  }
}

@media (max-width: 575px) {
  .bags-cats--dark .bags-cats__grid:not(.is-slider)[data-cols-m="3"] .bags-cats__card:not(: nth-child(-n+3)), .bags-cats--dark .bags-cats__grid:not(.is-slider)[data-cols-m="2"] .bags-cats__card:not(: nth-child(-n+2)) {
    border-block-start: 0;
  }
}

.bags-cats__grid.is-slider .owl-stage-outer {
  overflow: hidden;
  position: relative;
}

.bags-cats__grid.is-slider .owl-item > a {
  display: block;
}

.bags-cats--dark .bags-cats__grid.is-slider .owl-item {
  margin-inline-end: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.bags-cats--dark .bags-cats__grid.is-slider .owl-stage-outer {
  box-shadow: inset -1px 0 0 0 var(--cats-card-border-dark, var(--primary-color, #c8b35b));
}

[dir="ltr"] .bags-cats--dark .bags-cats__grid.is-slider .owl-stage-outer {
  box-shadow: inset 1px 0 0 0 var(--cats-card-border-dark, var(--primary-color, #c8b35b));
}

.bags-cats__grid.is-slider:not(.owl-loaded) {
  display: grid;
  grid-template-columns: repeat(var(--cats-cols-d, 4), 1fr);
  gap: 24px;
}

@media (max-width: 991px) {
  .bags-cats__grid.is-slider:not(.owl-loaded) {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 575px) {
  .bags-cats__grid.is-slider:not(.owl-loaded) {
    grid-template-columns: repeat(var(--cats-cols-m, 2), 1fr);
    gap: 12px;
  }
}

.bags-cats__card {
  display: flex !important;
  flex-direction: column;
  text-decoration: none;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s ease;
  position: relative;
}


/* مرجع الحقوق: مؤسسة m_t themes — صلاحية النشر مقتصرة على بـ-اج-س.
   كل تجاوز يُعد انتهاكاً مكتملاً للحقوق الفكرية لـ m_t themes. */

.bags-cats__card-image-wrap {
  width: 100%;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bags-cats__card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.bags-cats__card:hover .bags-cats__card-image {
  transform: scale(1.05);
}

.bags-cats__card-image-wrap.is-noimage .bags-cats__card-image {
  width: 40%;
  height: 40%;
  object-fit: contain;
  opacity: 0.35;
}

.bags-cats__card:hover .bags-cats__card-image-wrap.is-noimage .bags-cats__card-image {
  transform: none;
}

.bags-cats__card-name {
  margin: 0;
  font-size: 25px;
  line-height: 36px;
  font-weight: 500;
  text-align: center;
  transition: color 0.3s ease;
}

@media (max-width: 575px) {
  .bags-cats__card-name {
    font-size: 17px;
    line-height: 28px;
  }
}


/* ===== Design 1 — Light cream ===== */

.bags-cats--light .bags-cats__card {
  background-color: var(--cats-card-bg, #ffffff);
  border-radius: 30px;
  padding-bottom: 30px;
  gap: 0;
}

.bags-cats--light .bags-cats__card .bags-cats__card-name {
  margin-block-start: 30px;
}

.bags-cats--light .bags-cats__card-image-wrap {
  aspect-ratio: 256 / 185;
  width: 100%;
  height: auto;
  border-radius: 30px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin: 0;
}

.bags-cats--light .bags-cats__card-image {
  border-radius: 20px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.bags-cats--light .bags-cats__card-name {
  color: var(--cats-card-text-light, #161202);
  padding-inline: 12px;
}

.bags-cats--light .bags-cats__card.is-active,
.bags-cats--light .bags-cats__card:hover {
  background-color: var(--cats-card-bg-active-light, var(--primary-color, #c8b35b));
}


/* ===== Design 2 — Dark olive =====
   Border strategy: each card draws ONLY its inline-end + block-end
   sides; the grid container draws the missing inline-start + block-start
   on its perimeter. Result: every grid line is exactly one 1px border,
   so the outermost edge doesn't look heavier than the dividers between
   cells (which used to be two overlapping 1px borders). */

.bags-cats--dark .bags-cats__grid:not(.is-slider) {
  border-block-start: 1px solid var(--cats-card-border-dark, var(--primary-color, #c8b35b));
  border-inline-start: 1px solid var(--cats-card-border-dark, var(--primary-color, #c8b35b));
}

.bags-cats--dark .bags-cats__card {
  background-color: transparent;
  border: 0;
  border-inline-end: 1px solid var(--cats-card-border-dark, var(--primary-color, #c8b35b));
  border-block-end: 1px solid var(--cats-card-border-dark, var(--primary-color, #c8b35b));
  padding: 30px 0;
  gap: 0;
  align-items: center;
}

.bags-cats--dark .bags-cats__card .bags-cats__card-name {
  margin-block-start: 17px;
}


/* Slider variant still needs each slide to be self-contained since
   the grid border doesn't wrap individual slides. */

.bags-cats--dark .bags-cats__grid.is-slider .bags-cats__card {
  border: 1px solid var(--cats-card-border-dark, var(--primary-color, #c8b35b));
}

.bags-cats--dark .bags-cats__grid.is-slider .owl-item:last-child .bags-cats__card {
  margin-inline-end: 0;
}

.bags-cats--dark .bags-cats__card-image-wrap {
  width: 166px;
  height: 166px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
}

@media (max-width: 575px) {
  .bags-cats--dark .bags-cats__card-image-wrap {
    width: 110px;
    height: 110px;
  }
}

.bags-cats--dark .bags-cats__card-image {
  border-radius: 50%;
}

.bags-cats--dark .bags-cats__card-name {
  color: var(--cats-card-text-dark, #79640d);
}

.bags-cats--dark .bags-cats__card.is-active,
.bags-cats--dark .bags-cats__card:hover {
  background-color: var(--cats-card-bg-active-dark, var(--primary-color, #c8b35b));
}

.bags-cats--dark .bags-cats__card.is-active .bags-cats__card-name,
.bags-cats--dark .bags-cats__card:hover .bags-cats__card-name {
  color: var(--cats-card-text-dark, #79640d);
}


/* ===== Arrows ===== */

.bags-cats__arrows-below {
  display: flex;
  gap: 24px;
  justify-content: center;
}

.bags-cats__arrow {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.25s ease;
}

.bags-cats__arrow--prev,
.bags-cats__arrow--next {
  background-color: var(--cats-arrow-inactive, #1a1502);
  color: var(--cats-arrow-color-inactive, var(--primary-color, #c8b35b));
}

.bags-cats__arrow--prev:hover,
.bags-cats__arrow--next:hover {
  background-color: var(--cats-arrow-active, var(--primary-color, #c8b35b));
  color: var(--cats-arrow-color-active, #000);
}

.bags-cats__arrow:hover {
  transform: scale(1.05);
}

/* SVGs are authored with LTR semantics (--prev ←, --next →). In RTL, mirror
   them so the visible direction matches the slider's RTL flow. */
[dir="rtl"] .bags-cats__arrow svg { transform: scaleX(-1); }


/* Side arrows (positioned on viewport edges) */

.bags-cats__arrow--side {
  position: absolute;
  inset-block-start: 50%;
  z-index: 5;
  width: 64px;
  height: 64px;
}

.bags-cats__arrow--side.bags-cats__arrow--prev {
  inset-inline-start: -32px;
  transform: translateY(-50%);
}

.bags-cats__arrow--side.bags-cats__arrow--next {
  inset-inline-end: -32px;
  transform: translateY(-50%);
}

.bags-cats__arrow--side:hover {
  transform: translateY(-50%) scale(1.05);
}

@media (max-width: 991px) {
  .bags-cats__arrow {
    width: 56px;
    height: 56px;
  }
  .bags-cats__arrow svg {
    width: 24px;
    height: 24px;
  }
  .bags-cats__arrow--side.bags-cats__arrow--prev {
    inset-inline-start: 0;
  }
  .bags-cats__arrow--side.bags-cats__arrow--next {
    inset-inline-end: 0;
  }
}


/* ===== View All button (Design 2) ===== */

.bags-cats__view-all-wrap {
  display: flex;
  justify-content: center;
}

.bags-cats__view-all {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  background-color: var(--cats-view-all-bg, var(--primary-color, #c8b35b));
  color: var(--cats-view-all-color, #000);
  border-radius: 90px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.25s ease;
  font-family: "Plus Jakarta Sans", inherit;
}

.bags-cats__view-all:hover {
  transform: translateY(-2px);
  color: var(--cats-view-all-color, #000);
}

[dir="rtl"] .bags-cats__view-all svg {
  transform: scaleX(-1);
}


/* Hide legacy bags-cats-list selectors */


/* ==================================================================
   Categories List
   ================================================================== */

.bags-cats-list {
  padding-top: var(--cl-pad-top-d, 60px);
  padding-bottom: var(--cl-pad-bottom-d, 60px);
  background-color: var(--cl-bg, transparent);
}

@media (max-width: 767px) {
  .bags-cats-list {
    padding-top: var(--cl-pad-top-m, 30px);
    padding-bottom: var(--cl-pad-bottom-m, 30px);
  }
}

.bags-cats-list--cards-dark {
  background-color: #1a1502;
  color: #eee8cf;
}

.bags-cats-list__title {
  margin: 0 0 32px 0;
  font-size: var(--cl-title-size, 64px);
  text-align: var(--cl-title-align, center);
  font-weight: 500;
}

.bags-cats-list--cards-dark .bags-cats-list__title {
  color: #eee8cf;
}

.bags-cats-list__grid:not(.is-slider) {
  display: grid;
  grid-template-columns: repeat(var(--cl-cols-d, 4), 1fr);
  gap: 24px;
}

@media (max-width: 991px) {
  .bags-cats-list__grid:not(.is-slider) {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 575px) {
  .bags-cats-list__grid:not(.is-slider) {
    grid-template-columns: repeat(var(--cl-cols-m, 2), 1fr);
  }
}

.bags-cats-list__grid.is-slider .slick-slide > a {
  margin-inline: 12px;
  display: block;
}

.bags-cats-list__grid.is-slider .slick-list {
  margin-inline: -12px;
}

.bags-cats-list__card {
  display: block;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: all 0.25s ease;
}

.bags-cats-list__card:hover {
  transform: translateY(-4px);
}

.bags-cats-list--cards-dark .bags-cats-list__card {
  background: #2a2105;
  color: #eee8cf;
}

.bags-cats-list--circle .bags-cats-list__card {
  border-radius: 50%;
  aspect-ratio: 1;
}

.bags-cats-list--square .bags-cats-list__card {
  border-radius: 0;
}

.bags-cats-list__card.is-highlight {
  background: var(--primary-color, #c8b35b);
  color: #1a1502;
}

.bags-cats-list__card-image-wrap {
  width: 100%;
  aspect-ratio: 1.6;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.04);
}

.bags-cats-list__card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.6s ease;
}

.bags-cats-list__card:hover .bags-cats-list__card-image {
  transform: scale(1.05);
}

.bags-cats-list__card-name {
  margin: 0;
  padding: 18px 20px;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}

.bags-cats-list__view-all-wrap {
  text-align: center;
  margin-block-start: 32px;
}

.bags-cats-list__view-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: 90px;
  background-color: var(--primary-color, #c8b35b);
  color: #1a1502;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
}

.bags-cats-list__view-all:hover {
  transform: translateY(-2px);
}

[dir="rtl"] .bags-cats-list__view-all svg {
  transform: scaleX(-1);
}

.bags-cats-list__arrows {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-block-start: 24px;
}

.bags-cats-list__arrow {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  background: transparent;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.bags-cats-list__arrow:hover {
  background-color: var(--primary-color, #c8b35b);
  border-color: var(--primary-color, #c8b35b);
  color: #1a1502;
}

[dir="rtl"] .bags-cats-list__arrow svg {
  transform: scaleX(-1);
}


/* Text list variant */

.bags-cats-list__text-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 720px;
  margin-inline: auto;
}

.bags-cats-list__text-item {
  border-block-end: 1px solid rgba(0, 0, 0, 0.08);
  padding-block: 24px;
  text-align: center;
}

.bags-cats-list__text-item:last-child {
  border-block-end: 0;
}

.bags-cats-list__text-item a {
  color: inherit;
  text-decoration: none;
  font-size: 28px;
  font-weight: 500;
  transition: color 0.2s ease;
}

.bags-cats-list__text-item a:hover {
  color: var(--primary-color, #c8b35b);
}

@media (max-width: 575px) {
  .bags-cats-list__text-item a {
    font-size: 22px;
  }
  .bags-cats-list__text-item {
    padding-block: 18px;
  }
}


/* ==================================================================
   Testimonials
   ================================================================== */

.bags-testi {
  padding-top: var(--tt-pad-top-d, 100px);
  padding-bottom: var(--tt-pad-bottom-d, 100px);
  background-color: var(--tt-bg, transparent);
}

@media (max-width: 767px) {
  .bags-testi {
    padding-top: var(--tt-pad-top-m, 60px);
    padding-bottom: var(--tt-pad-bottom-m, 60px);
  }
}

.bags-testi__head {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-block-end: 40px;
}

.bags-testi__title {
  margin: 0;
  font-size: var(--tt-title-size, 64px);
  line-height: 1.1;
  font-weight: 500;
}


/* Slider wrap: relative container so the side arrows can position
   absolutely against the cards row. */

.bags-testi__slider-wrap {
  position: relative;
}

.bags-testi__arrow {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 0;
  background-color: var(--tt-arrow-inactive, #1a1502);
  color: var(--tt-arrow-color, #ffffff);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.bags-testi__arrow:hover {
  background-color: var(--tt-arrow-active, #c8b35b);
  transform: scale(1.05);
}

.bags-testi__arrow--active {
  background-color: var(--tt-arrow-active, #c8b35b);
}

/* LTR-authored SVGs mirrored in RTL to match the slider's RTL flow direction. */
[dir="rtl"] .bags-testi__arrow svg { transform: scaleX(-1); }


/* Side arrows — pinned to the left/right edges of the cards row,
   vertically centered. Translated outward so they sit just OUTSIDE
   the cards rather than overlapping them. */

.bags-testi__arrow--side {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
}

.bags-testi__arrow--side.bags-testi__arrow--prev {
  inset-inline-start: -28px;
}

.bags-testi__arrow--side.bags-testi__arrow--next {
  inset-inline-end: -28px;
}

.bags-testi__arrow--side:hover {
  transform: translateY(-50%) scale(1.05);
}


/* Full-width mode: zero out container padding and push arrows inward
   so they stay visible inside the viewport. */

.bags-testi > .container-fluid {
  padding-right: 0;
  padding-left: 0;
}

.bags-testi > .container-fluid .bags-testi__arrow--side.bags-testi__arrow--prev {
  inset-inline-start: 20px;
}

.bags-testi > .container-fluid .bags-testi__arrow--side.bags-testi__arrow--next {
  inset-inline-end: 20px;
}

@media (max-width: 991px) {
  .bags-testi__arrow--side {
    display: none;
  }
}

.bags-testi__grid:not(.is-slider) {
  display: grid;
  grid-template-columns: repeat(var(--tt-cols-d, 3), 1fr);
  gap: 24px;
}

@media (max-width: 991px) {
  .bags-testi__grid:not(.is-slider) {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .bags-testi__grid:not(.is-slider) {
    grid-template-columns: 1fr;
  }
}

.bags-testi__grid.is-slider .slick-slide {
  margin-inline: 12px;
  height: auto;
}

.bags-testi__grid.is-slider .slick-list {
  margin-inline: -12px;
}

.bags-testi__grid.is-slider .slick-track {
  display: flex;
  align-items: stretch;
}


/* NOTE: Slick adds `.slick-slide` directly to our <article> element,
   not in a wrapping div. So `.slick-slide > *` would target our INNER
   icon/text divs (and stretch them) — DO NOT use that selector here. */

.bags-testi__card {
  background-color: var(--tt-card-bg, #f9f6eb);
  color: var(--tt-card-text, #1a1502);
  border-radius: 0;
  padding: 40px;
  /* Slick injects an inline `display: inline-block` on each slide, so
     force flex with !important to keep the layout. */
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 33px;
  text-align: center;
  height: auto;
}

.bags-testi__icon-wrap {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background-color: var(--tt-icon-bg, #c8b35b);
  color: var(--tt-icon-color, #1a1502);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.bags-testi__icon-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bags-testi__icon-svg {
  width: 48px;
  height: 56px;
}

.bags-testi__text {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bags-testi__name {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--tt-card-name, #1a1502);
}

.bags-testi__role {
  margin: 0;
  font-size: 14px;
  opacity: 0.65;
}

.bags-testi__feedback {
  margin: 0;
  font-size: 22px;
  line-height: 1.55;
}

@media (max-width: 1199px) {
  .bags-testi__card {
    padding: 32px;
    gap: 24px;
  }
  .bags-testi__icon-wrap {
    width: 88px;
    height: 88px;
  }
  .bags-testi__icon-svg {
    width: 38px;
    height: 44px;
  }
  .bags-testi__name {
    font-size: 24px;
  }
  .bags-testi__feedback {
    font-size: 18px;
  }
}


/* Bottom controls (mobile + tablet) — prev | dots | next */

.bags-testi__controls {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-block-start: 32px;
}

.bags-testi__controls .bags-testi__arrow {
  width: 44px;
  height: 44px;
}

.bags-testi__dots-slot {
  display: inline-flex;
}

.bags-testi__dots-slot .slick-dots {
  position: static;
  display: flex !important;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bags-testi__dots-slot .slick-dots li {
  line-height: 0;
}

.bags-testi__dots-slot .slick-dots li button {
  font-size: 0;
  width: 16px;
  height: 5px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  background-color: #E0E0E0;
  cursor: pointer;
  transition: background-color 0.25s ease, width 0.25s ease;
}

.bags-testi__dots-slot .slick-dots li.slick-active button {
  width: 36px;
  background-color: var(--primary-color, #c8b35b);
}


/* On phones/tablets: show the bottom controls row. */

@media (max-width: 991px) {
  .bags-testi__controls {
    display: flex;
  }
  .bags-testi__title {
    font-size: clamp(36px, 7vw, 56px);
  }
  .bags-testi__head {
    margin-block-end: 28px;
  }
}

@media (max-width: 575px) {
  .bags-testi__card {
    padding: 32px 22px 28px;
  }
  .bags-testi__name {
    font-size: 20px;
  }
  .bags-testi__feedback {
    font-size: 14px;
  }
}


/* ==================================================================
   Cards Collection — header
   ================================================================== */

.bags-cards-collection__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-block-end: 48px;
}

@media (max-width: 767px) {
  .bags-cards-collection__header {
    margin-block-end: 32px;
  }
}

.bags-cards-collection__header .bags-cards-collection__title {
  margin: 0;
}

.bags-cards-collection__arrows {
  display: flex;
  gap: 14px;
  justify-content: flex-end;
  margin-block-end: 0;
}

.bags-cards-collection__arrow {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
  padding: 0;
}

.bags-cards-collection__arrow--prev,
.bags-cards-collection__arrow--next {
  background-color: #1a1502;
  color: var(--primary-color, #c8b35b);
}

.bags-cards-collection__arrow--prev:hover,
.bags-cards-collection__arrow--next:hover {
  background-color: var(--primary-color, #c8b35b);
  color: #000;
}

/* LTR-authored SVGs mirrored in RTL to match the slider's RTL flow direction. */
[dir="rtl"] .bags-cards-collection__arrow svg { transform: scaleX(-1); }


/* ==================================================================
   Banner + Products
   ================================================================== */

.bags-banner-products {
  padding-top: var(--bp-pad-top-d, 60px);
  padding-bottom: var(--bp-pad-bottom-d, 60px);
  background-color: var(--bp-bg, transparent);
}


/* Sticky banner needs an unclipped scroll chain. `.bags-section` (the
   base helper) sets `overflow: hidden` which kills position:sticky for
   any descendant. Re-enable visibility on this section in grid mode so
   the banner can stick while the products column scrolls past. */

@media (min-width: 992px) {
  .bags-banner-products[data-display-mode="grid"] {
    overflow: visible;
  }
}

@media (max-width: 767px) {
  .bags-banner-products {
    padding-top: var(--bp-pad-top-m, 60px);
    padding-bottom: var(--bp-pad-bottom-m, 60px);
  }
}

.bags-banner-products__layout {
  display: grid;
  grid-template-columns: 484fr 934fr;
  gap: 25px;
  align-items: start;
}


/* Banner position = end → put banner column AFTER products in flow */

.bags-banner-products[data-banner-pos="end"] .bags-banner-products__layout {
  grid-template-columns: 934fr 484fr;
}

.bags-banner-products[data-banner-pos="end"] .bags-banner-products__banner {
  order: 2;
}

@media (max-width: 991px) {
  .bags-banner-products[data-banner-pos="start"] .bags-banner-products__layout,
  .bags-banner-products[data-banner-pos="end"] .bags-banner-products__layout {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .bags-banner-products[data-banner-pos="end"] .bags-banner-products__banner {
    order: 0;
  }
}


/* === Banner block === */

.bags-banner-products__banner {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: 484 / 726;
  align-self: start;
}

@media (min-width: 992px) {
  .bags-banner-products[data-display-mode="grid"] .bags-banner-products__banner {
    position: sticky;
    top: 110px;
  }
}

@media (max-width: 991px) {
  .bags-banner-products__banner {
    aspect-ratio: 4 / 5;
  }
}

.bags-banner-products__banner-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  border: 0;
}

.bags-banner-products__banner-youtube {
  position: absolute;
  inset: 0;
  min-width: 100%;
  min-height: 100%;
  width: 177.78vh;
  /* 16:9 vs viewport height — keeps cover ratio */
  height: 56.25vw;
  /* 16:9 vs viewport width */
  max-width: none;
  max-height: none;
  right: 50%;
  top: 50%;
  transform: translate(50%, -50%);
  pointer-events: none;
  z-index: 1;
}


/* Pick the desktop-vs-mobile media variant based on breakpoint. */

.bags-banner-products__banner-image--mobile {
  display: none;
}

@media (max-width: 991px) {
  .bags-banner-products__banner-image--desktop {
    display: none;
  }
  .bags-banner-products__banner-image--mobile {
    display: block;
  }
}

.bags-banner-products__banner-mask {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 2;
}

.bags-banner-products__banner-content {
  position: absolute;
  inset-block-start: 31px;
  width: 422px;
  max-width: calc(100% - 62px);
  z-index: 3;
  background-color: #1a1500;
  padding: 60px 40px;
  display: flex;
  direction: ltr;
  flex-direction: column;
  align-items: flex-start;
  gap: 61px;
  box-sizing: border-box;
}

@media (max-width: 1199px) {
  .bags-banner-products__banner-content {
    inset-block-start: 20px;
    inset-inline-start: 24px;
    width: auto;
    max-width: calc(100% - 48px);
    padding: 40px 28px;
    gap: 40px;
  }
}

@media (max-width: 991px) {
  .bags-banner-products__banner-content {
    inset-block-start: 0px;
    inset-inline-start: 0px;
    width: auto;
    max-width: 100%;
    gap: 24px;
    padding: 32px 24px;
    align-items: center;
    text-align: center;
  }
}

.bags-banner-products__banner-subtitle {
  margin: 0;
  font-family: "Manrope", inherit;
  font-size: 30px;
  font-weight: 400;
  line-height: 36px;
}

@media (max-width: 1199px) {
  .bags-banner-products__banner-subtitle {
    font-size: 22px;
    line-height: 30px;
  }
}

@media (max-width: 575px) {
  .bags-banner-products__banner-subtitle {
    font-size: 18px;
    line-height: 26px;
  }
}

.bags-banner-products__banner-title {
  margin: 0;
  font-family: "Manrope", inherit;
  font-size: 52px;
  font-weight: 500;
  line-height: 56px;
}

@media (max-width: 1199px) {
  .bags-banner-products__banner-title {
    font-size: 38px;
    line-height: 44px;
  }
}

@media (max-width: 575px) {
  .bags-banner-products__banner-title {
    font-size: 28px;
    line-height: 34px;
  }
}

.bags-banner-products__banner-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  border-radius: 90px;
  border: 1.5px solid currentColor;
  font-family: "Plus Jakarta Sans", inherit;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.bags-banner-products__banner-btn:hover {
  transform: translateY(-2px);
}

[dir="rtl"] .bags-banner-products__banner-btn svg {
  transform: scaleX(-1);
}

.bags-banner-products__products {
  min-width: 0;
}

.bags-banner-products__item {
  min-width: 0;
}

.bags-banner-products__products--grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  align-items: start;
}

@media (max-width: 575px) {
  .bags-banner-products__products--grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.bags-banner-products[data-display-mode="slider"] .bags-banner-products__layout {
  align-items: stretch;
}

.bags-banner-products__products--slider {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
  height: 100%;
}

.bags-banner-products__slider {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
}

/* Owl handles direction internally via its `rtl` option (which adds `.owl-rtl`
   and re-positions slides). Forcing a different `direction` on the container
   here would conflict with owl's transform math and push slides off-canvas. */

.bags-banner-products__slider.owl-carousel,
.bags-banner-products__slider .owl-stage-outer {
  height: 100%;
  overflow: hidden;
}

.bags-banner-products__slider .owl-stage {
  height: 100%;
  display: flex;
  align-items: stretch;
}

.bags-banner-products__slider.owl-rtl .owl-stage {
  padding-left: 0 !important;
  padding-right: 50px !important;
}

.bags-banner-products__slider.owl-carousel:not(.owl-rtl) .owl-stage {
  padding-right: 0 !important;
  padding-left: 50px !important;
}

@media (max-width: 767px) {
  .bags-banner-products__slider.owl-rtl .owl-stage {
    padding-right: 40px !important;
  }
  .bags-banner-products__slider.owl-carousel:not(.owl-rtl) .owl-stage {
    padding-left: 40px !important;
  }
}

.bags-banner-products__slider .owl-item {
  display: flex;
  height: 100%;
}

.bags-banner-products__slider .bags-banner-products__item {
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  margin: 0 3px;
}

.bags-banner-products__slider .bags-pcard {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.bags-banner-products[data-display-mode="slider"] .bags-pcard__media-wrap {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
}

.bags-banner-products[data-display-mode="slider"] .bags-pcard__media-link {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  width: 100%;
}

.bags-banner-products[data-display-mode="slider"] .bags-pcard__media {
  flex: 1 1 auto;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: auto;
}

.bags-banner-products[data-display-mode="slider"][data-show-arrows="true"] .bags-pcard__media-wrap {
  aspect-ratio: 360 / 360;
}

.bags-banner-products[data-display-mode="slider"][data-show-arrows="false"] .bags-pcard__media-wrap {
  aspect-ratio: 364 / 452;
}

.bags-banner-products[data-display-mode="slider"] .bags-pcard__body {
  flex: 0 0 auto;
  height: auto;
  justify-content: flex-start;
}

.bags-banner-products__arrows {
  flex-shrink: 0;
  display: flex;
  gap: 12px;
  justify-content: center;
}

.bags-banner-products__arrow {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1.5px solid var(--bags-accent, var(--primary-color, #c8b35b));
  background: transparent;
  color: var(--bags-accent, var(--primary-color, #c8b35b));
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.bags-banner-products__arrow:hover {
  background-color: var(--bags-accent, var(--primary-color, #c8b35b));
  color: #1a1502;
  transform: scale(1.05);
}

/* LTR-authored SVGs mirrored in RTL to match the slider's RTL flow direction. */
[dir="rtl"] .bags-banner-products__arrow svg { transform: scaleX(-1); }

.bags-banner-products__slider .owl-dots {
  display: none;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 10px;
  gap: 8px;
  margin-top: 32px;
}

.bags-banner-products__slider .owl-dot {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: background-color 0.2s ease, width 0.2s ease;
}

.bags-banner-products__slider .owl-dot span {
  display: block;
  width: 16px;
  height: 5px;
  margin: 0 !important;
  border-radius: 999px;
  background-color: #E0E0E0 !important;
  transition: background-color 0.25s ease, width 0.25s ease;
}

.bags-banner-products__slider .owl-dot.active span {
  width: 44px;
  background-color: var(--bags-accent, var(--primary-color, #c8b35b)) !important;
}

@media (max-width: 991px) {
  .bags-banner-products[data-display-mode="slider"] .bags-banner-products__layout {
    align-items: start;
  }
  .bags-banner-products__products--slider {
    height: auto;
    gap: 12px;
  }
  .bags-banner-products__slider {
    flex: none;
    height: auto;
    min-height: 0;
  }
  .bags-banner-products[data-display-mode="slider"] .bags-pcard__media-wrap {
    flex: 0 0 auto;
    aspect-ratio: 1 / 1;
  }
  .bags-banner-products[data-display-mode="slider"] .bags-pcard__media-link,
  .bags-banner-products[data-display-mode="slider"] .bags-pcard__media {
    flex: 1 1 auto;
    height: auto;
  }
  .bags-banner-products__arrows {
    display: none;
  }
  .bags-banner-products__slider .owl-dots {
    display: flex;
  }
}


/* ==================================================================
   Two Banners
   ================================================================== */

.bags-two-banners {
  padding-top: var(--t2-pad-top-d, 100px);
  padding-bottom: var(--t2-pad-bottom-d, 100px);
  background-color: var(--t2-bg, transparent);
}

@media (max-width: 767px) {
  .bags-two-banners {
    padding-top: var(--t2-pad-top-m, 60px);
    padding-bottom: var(--t2-pad-bottom-m, 60px);
  }
}

.bags-two-banners__heading {
  margin: 0 0 48px 0;
  font-size: 48px;
  line-height: 1.1;
  font-weight: 600;
}

.bags-two-banners__heading.is-center {
  text-align: center;
}

@media (max-width: 991px) {
  .bags-two-banners__heading {
    font-size: 40px;
    margin-bottom: 36px;
  }
}

@media (max-width: 767px) {
  .bags-two-banners__heading {
    font-size: 32px;
    margin-bottom: 28px;
    text-align: center;
  }
}

.bags-two-banners__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

@media (max-width: 767px) {
  .bags-two-banners__grid:not(.is-slider) {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.bags-two-banners__grid.is-slider {
  display: block;
}

.bags-two-banners__grid.is-slider .slick-slide {
  margin: 0 12px;
}

.bags-two-banners__grid.is-slider .slick-list {
  margin: 0 -12px;
}

.bags-two-banners__grid .slick-dots {
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.bags-two-banners__grid .slick-dots li {
  line-height: 0;
}

.bags-two-banners__grid .slick-dots li button {
  font-size: 0;
  width: 16px;
  height: 5px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  background-color: #E0E0E0;
  cursor: pointer;
  transition: background-color 0.25s ease, width 0.25s ease;
}

.bags-two-banners__grid .slick-dots li.slick-active button {
  width: 44px;
  background-color: var(--bags-accent, var(--primary-color, #c8b35b));
}


/* Per-breakpoint dot visibility — driven by the section's data attrs. */

@media (min-width: 768px) {
  .bags-two-banners[data-hide-dots-d="true"] .slick-dots {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .bags-two-banners[data-hide-dots-m="true"] .slick-dots {
    display: none !important;
  }
}

.bags-two-banners__card {
  position: relative;
  display: block;
  height: var(--t2-h-d, 528px);
  /* Square corners per the Figma — no rounding on the card or media. */
  border-radius: 0;
  overflow: hidden;
  text-decoration: none;
  isolation: isolate;
  background: #1a1502;
}

@media (max-width: 767px) {
  .bags-two-banners__card {
    height: var(--t2-h-m, 340px);
  }
}

.bags-two-banners__media {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.bags-two-banners__image,
.bags-two-banners__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.bags-two-banners__card:hover .bags-two-banners__image,
.bags-two-banners__card:hover .bags-two-banners__video {
  transform: scale(1.05);
}

.bags-two-banners__full-link {
  position: absolute;
  inset: 0;
  z-index: 3;
}

.bags-two-banners__content {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
  z-index: 3;
  width: 76%;
  max-width: 490px;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-decoration: none;
  color: inherit;
  padding-bottom: 40px;
  background-color: #79640d;
}

.bags-two-banners__content:hover {
  background-color: #302704b8;
}

.bags-two-banners__box {
  width: 100%;
  padding: 40px 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  max-width: 88%;
  margin-top: 20px;
  transition: padding-top 0.3s ease, background-color 0.3s ease;
}

.bags-two-banners__content:hover .bags-two-banners__box {
  margin-top: 0px;
  padding-top: 30px;
  background-color: var(--t2-box-bg, #79640d);
}

.bags-two-banners__title {
  margin: 0;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--t2-title-color, #ffffff);
  transition: color 0.3s ease;
}

a.bags-two-banners__content:hover .bags-two-banners__title {
  color: var(--t2-title-hover-color, var(--primary-color, #c8b35b));
}

.bags-two-banners__subtitle {
  margin: 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.3;
}

.bags-two-banners__arrow-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 1.3px solid currentColor;
  background: transparent;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.bags-two-banners__arrow-btn svg {
  width: 28px;
  height: 28px;
}

a.bags-two-banners__content:hover .bags-two-banners__arrow-btn {
  background-color: #3b3007;
  border-color: #3b3007 !important;
  color: #ffffff !important;
}


/* The up-right arrow is symmetric for both directions — no RTL flip. */

@media (max-width: 767px) {
  .bags-two-banners__title {
    font-size: 28px;
    line-height: 1.2;
  }
  .bags-two-banners__subtitle {
    font-size: 16px;
  }
  /* Figma mobile (1:1855): box hugs its content + sits in the lower
     portion of the card. Drop the desktop min-height, reduce padding
     and gap, and pull the box down so the image is visible on top. */
  .bags-two-banners__content {
    width: 95%;
    min-height: 0;
    top: auto;
    bottom: 20px;
    transform: translateX(50%);
    padding-bottom: 24px;
    gap: 14px;
  }
  .bags-two-banners__box {
    padding: 24px 22px;
    margin-top: 14px;
    gap: 4px;
  }
  .bags-two-banners__arrow-btn {
    width: 40px;
    height: 40px;
  }
  .bags-two-banners__arrow-btn svg {
    width: 16px;
    height: 16px;
  }
}

@media (max-width: 575px) {
  .bags-two-banners__title {
    font-size: 24px;
  }
  .bags-two-banners__subtitle {
    font-size: 15px;
  }
  .bags-two-banners__content {
    width: 95%;
    padding-bottom: 20px;
  }
  .bags-two-banners__box {
    padding: 20px 18px;
    margin-top: 10px;
  }
  .bags-two-banners__arrow-btn {
    width: 36px;
    height: 36px;
  }
  .bags-two-banners__arrow-btn svg {
    width: 14px;
    height: 14px;
  }
}


/* ==================================================================
   Promo Banner
   ================================================================== */

.bags-promo-banner {
  padding-top: var(--pb-pad-top-d, 0);
  padding-bottom: var(--pb-pad-bottom-d, 0);
}

@media (max-width: 767px) {
  .bags-promo-banner {
    padding-top: var(--pb-pad-top-m, 0);
    padding-bottom: var(--pb-pad-bottom-m, 0);
  }
}

.bags-promo-banner__viewport {
  position: relative;
  width: 100%;
  height: var(--pb-h-d, 635px);
  overflow: hidden;
}

@media (max-width: 767px) {
  .bags-promo-banner__viewport {
    height: var(--pb-h-m, 450px);
  }
}

.bags-promo-banner__track,
.bags-promo-banner__track .slick-list,
.bags-promo-banner__track .slick-track,
.bags-promo-banner__slide {
  height: 100%;
}

.bags-promo-banner__slide {
  position: relative;
  outline: none;
}

.bags-promo-banner__media {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.bags-promo-banner__image,
.bags-promo-banner__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bags-promo-banner__image--mobile {
  display: none;
}

@media (max-width: 767px) {
  .bags-promo-banner__image--mobile {
    display: block;
  }
  .bags-promo-banner__media:has(.bags-promo-banner__image--mobile) .bags-promo-banner__image--desktop {
    display: none;
  }
}

.bags-promo-banner__overlay {
  position: absolute;
  inset: 0;
}

.bags-promo-banner__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
}


/* Full-width mode: container-fluid only has the global 20px side padding,
   which leaves the big title hugging the viewport edge. Bump it up so
   the content keeps breathing room from the screen edges and the side
   arrows don't crowd it. */

.bags-promo-banner__inner.container-fluid {
  padding-inline: clamp(24px, 6vw, 80px);
}


/* Mobile: side arrows are 44px wide + 12px from edge = 56px reserved
   on each side. Push the inner content past that so the title and
   subtitle never sit underneath the arrow circles. Applied to both
   container modes since the arrows ignore container choice. */

@media (max-width: 767px) {
  .bags-promo-banner__inner,
  .bags-promo-banner__inner.container,
  .bags-promo-banner__inner.container-fluid {
    padding-inline: 70px;
  }
}

.bags-promo-banner__slide[data-content-align="start"] .bags-promo-banner__inner {
  justify-content: flex-start;
}

.bags-promo-banner__slide[data-content-align="center"] .bags-promo-banner__inner {
  justify-content: center;
}

.bags-promo-banner__slide[data-content-align="end"] .bags-promo-banner__inner {
  justify-content: flex-end;
}

.bags-promo-banner__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  text-align: center;
  max-width: 720px;
}

.bags-promo-banner__slide[data-content-align="start"] .bags-promo-banner__content {
  align-items: flex-start;
  text-align: start;
}

.bags-promo-banner__slide[data-content-align="end"] .bags-promo-banner__content {
  align-items: flex-end;
  text-align: end;
}

.bags-promo-banner__title {
  margin: 0;
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -0.01em;
  display: flex;
  flex-direction: column;
  gap: 0.05em;
}

.bags-promo-banner__title-part {
  display: block;
}

@media (max-width: 767px) {
  .bags-promo-banner__title {
    font-size: clamp(36px, 9vw, 60px) !important;
  }
}

.bags-promo-banner__subtitle {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}

.bags-promo-banner__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 90px;
  border: 2px solid currentColor;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  margin-block-start: 12px;
  font-family: "Plus Jakarta Sans", inherit;
  transition: all 0.25s ease;
  width: max-content;
}

.bags-promo-banner__btn:hover {
  transform: translateY(-2px);
}

[dir="rtl"] .bags-promo-banner__btn svg {
  transform: scaleX(-1);
}


/* Side arrows on the section edges */

.bags-promo-banner__arrow {
  position: absolute;
  inset-block-start: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 64px;
  height: 64px;
  border-radius: 0;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.25s ease;
}

.bags-promo-banner__arrow--prev,
.bags-promo-banner__arrow--next {
  background-color: var(--pb-arrow-inactive, #1a1502);
  color: var(--pb-arrow-active, var(--primary-color, #c8b35b));
}

.bags-promo-banner__arrow--prev:hover,
.bags-promo-banner__arrow--next:hover {
  background-color: var(--pb-arrow-active, var(--primary-color, #c8b35b));
  color: var(--pb-arrow-color, #000);
}

.bags-promo-banner__arrow--prev {
  inset-inline-end: auto;
  inset-inline-start: 0;
}

.bags-promo-banner__arrow--next {
  inset-inline-start: auto;
  inset-inline-end: 0;
}

.bags-promo-banner__arrow:hover {
  transform: translateY(-50%) scale(1.05);
}

/* LTR-authored SVGs mirrored in RTL to match the slider's RTL flow direction. */
[dir="rtl"] .bags-promo-banner__arrow svg { transform: scaleX(-1); }

@media (max-width: 767px) {
  .bags-promo-banner__arrow {
    width: 44px;
    height: 44px;
  }
  .bags-promo-banner__arrow--prev {
    inset-inline-start: 12px;
  }
  .bags-promo-banner__arrow--next {
    inset-inline-end: 12px;
  }
}


/* ==================================================================
   Products Tabs
   ================================================================== */

.bags-ptabs {
  padding-top: var(--pt-pad-top-d, 60px);
  padding-bottom: var(--pt-pad-bottom-d, 60px);
  background-color: var(--pt-section-bg, #ffffff);
}

@media (max-width: 767px) {
  .bags-ptabs {
    padding-top: var(--pt-pad-top-m, 60px);
    padding-bottom: var(--pt-pad-bottom-m, 60px);
  }
}

.bags-ptabs__list {
  display: flex;
  flex-direction: column;
}

.bags-ptabs__item {
  border-block-end: 1px solid var(--pt-tab-separator, --all-borders);
  background-color: transparent;
  transition: background-color var(--pt-transition, 500ms) ease;
}

.bags-ptabs__item:last-child {
  border-block-end: 0;
}

.bags-ptabs__item.is-open {
  background-color: var(--pt-section-bg-open, #1a1500);
  border-block-end-color: transparent;
}


/* === Closed-state title row === */

.bags-ptabs__title {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0 24px;
  height: var(--pt-tab-height-d, 168px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Manrope", inherit;
  font-size: var(--pt-tab-size-d, 80px);
  font-weight: var(--pt-tab-weight, 400);
  color: var(--pt-tab-color, #000);
  cursor: pointer;
  transition: color 0.35s ease;
  line-height: 1.2;
  letter-spacing: -0.5px;
}

@media (max-width: 991px) {
  .bags-ptabs__title {
    font-size: 48px;
    height: 120px;
  }
}

@media (max-width: 767px) {
  .bags-ptabs__title {
    font-size: 28px;
    height: auto;
    padding: 20px 0;
  }
}

.bags-ptabs__title:hover {
  color: var(--pt-tab-hover, var(--primary-color, #c8b35b));
}

.bags-ptabs__title {
  position: relative;
  justify-content: center;
}

.bags-ptabs__item.is-open .bags-ptabs__title {
  color: var(--pt-tab-open-color, var(--primary-color, #c8b35b));
  justify-content: flex-start;
  padding-inline-start: 60px;
  padding-inline-end: 140px;
  /* clearance for the absolute-positioned arrow */
}

@media (max-width: 767px) {
  .bags-ptabs__item.is-open .bags-ptabs__title {
    padding-inline-start: 16px;
    padding-inline-end: 72px;
  }
}

.bags-ptabs__title-text {
  display: inline-block;
  will-change: transform;
}

.bags-ptabs__title-arrow {
  position: absolute;
  top: 50%;
  inset-inline-end: 60px;
  width: 60px;
  height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  color:#000;
  transform: translate3d(30px, -50%, 0);
  transition: opacity 0.45s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  z-index: 2;
}

.bags-ptabs__item.is-open .bags-ptabs__title-arrow {
  opacity: 1;
  transform: translate3d(0, -50%, 0);
  pointer-events: auto;
  color: var(--pt-tab-open-color, var(--primary-color, #c8b35b));
}

@media (max-width: 767px) {
  .bags-ptabs__title-arrow {
    inset-inline-end: 16px;
    width: 40px;
    height: 40px;
  }
  .bags-ptabs__title-arrow svg {
    width: 32px;
    height: 32px;
  }
}

.bags-ptabs__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--pt-transition, 500ms) cubic-bezier(0.22, 1, 0.36, 1);
}

.bags-ptabs__panel-inner {
  display: flex;
  flex-direction: column;
  gap: 60px;
  padding: 20px 60px 60px;
}

@media (max-width: 767px) {
  .bags-ptabs__panel-inner {
    gap: 32px;
    padding: 16px 16px 32px;
  }
}


/* === Slider wrap (prev | products | next) === */

.bags-ptabs__slider-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
}

.bags-ptabs__slider {
  flex: 1 1 0;
  min-width: 0;
}

.bags-ptabs__slider .owl-stage-outer {
  overflow: hidden;
  position: relative;
}

.bags-ptabs__product .bags-pcard {
  background: transparent;
  border-color: #2f2606;
  margin: 2px;
  transition: background-color 0.3s ease;
}

.bags-ptabs__product .bags-pcard:hover {
  background-color: #584e26;
}

.bags-ptabs__product .bags-pcard__name,
.bags-ptabs__product .bags-pcard__name a {
  color: #ffffff;
}

.bags-ptabs__product .bags-pcard__price {
  color: var(--pt-tab-open-color, var(--primary-color, #c8b35b));
}

.bags-ptabs__product .bags-pcard__cart-btn,
.bags-ptabs__product .bags-pcard__wishlist-btn {
  background-color: #2c2405;
  border: 0;
  color: var(--pt-tab-open-color, var(--primary-color, #c8b35b));
}

.bags-ptabs__product .bags-pcard__wishlist-btn {
  color: var(--pt-tab-open-color, var(--primary-color, #c8b35b));
  background: none;
  border: 1px solid #fff;
}

.bags-ptabs__product .bags-pcard__wishlist-btn svg path {
  fill: var(--pt-tab-open-color, var(--primary-color, #c8b35b));
}

.bags-ptabs__product .bags-pcard__cart-btn:hover:not(.is-disabled),
.bags-ptabs__product .bags-pcard__wishlist-btn:hover {
  background-color: var(--pt-tab-open-color, #483f19);
  color: var(--pt-section-bg-open, #1a1500);
  border-color: var(--pt-tab-open-color, var(--primary-color, #c8b35b));
}

.bags-ptabs__product .bags-pcard__wishlist-btn:hover svg path {
  fill: var(--pt-section-bg-open, #1a1500);
}

.bags-ptabs__slider-arrow {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

@media (max-width: 991px) {
  .bags-ptabs__slider-arrow {
    width: 52px;
    height: 52px;
  }
  .bags-ptabs__slider-arrow svg {
    width: 22px;
    height: 22px;
  }
}

.bags-ptabs__slider-arrow--prev,
.bags-ptabs__slider-arrow--next {
  background-color: var(--pt-arrow-inactive, #ffffff);
  color: var(--pt-arrow-color, #000);
}

.bags-ptabs__slider-arrow--prev:hover,
.bags-ptabs__slider-arrow--next:hover {
  background-color: var(--pt-arrow-active, var(--primary-color, #c8b35b));
}

.bags-ptabs__slider-arrow:hover {
  transform: scale(1.05);
}

/* LTR-authored SVGs mirrored in RTL to match the slider's RTL flow direction. */
[dir="rtl"] .bags-ptabs__slider-arrow svg { transform: scaleX(-1); }

.bags-ptabs__slider .owl-dots {
  display: none;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  row-gap: 10px;
  margin-top: 24px;
}

.bags-ptabs__slider .owl-dot {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

.bags-ptabs__slider .owl-dot span {
  display: block;
  width: 16px;
  height: 5px;
  margin: 0 !important;
  border-radius: 999px;
  background-color: #E0E0E0 !important;
  transition: background-color 0.25s ease, width 0.25s ease;
}

.bags-ptabs__slider .owl-dot.active span {
  width: 44px;
  background-color: var(--pt-tab-open-color, var(--primary-color, #c8b35b)) !important;
}

@media (max-width: 767px) {
  .bags-ptabs__slider-wrap {
    gap: 0;
  }
  .bags-ptabs__slider-arrow {
    display: none;
  }
  .bags-ptabs__slider .owl-dots {
    display: flex;
  }
}


/* === Find More button (centered below the slider) === */

.bags-ptabs__find-more-wrap {
  display: flex;
  justify-content: center;
}

.bags-ptabs__find-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  border-radius: 90px;
  border: 1.5px solid var(--pt-find-more-border, #ffffff);
  color: var(--pt-find-more-color, #ffffff);
  font-family: "Plus Jakarta Sans", inherit;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.bags-ptabs__find-more:hover {
  background-color: var(--pt-find-more-color, #ffffff);
  color: var(--pt-section-bg-open, #1a1500);
  transform: translateY(-2px);
}

[dir="rtl"] .bags-ptabs__find-more svg {
  transform: scaleX(-1);
}

.bags-ptabs__empty {
  padding: 60px 20px;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 16px;
}

.bags-hero-slider__btn,
.bags-featured-banner__btn,
.bags-banner-products__banner-btn,
.bags-promo-banner__btn,
.bags-text-banner__btn,
.bags-ptabs__find-more {
  --cta-hover-bg: var(--primary-color, #c8b35b);
  /* Gold/olive hover background */
  --cta-hover-text: #1a1502;
  /* Dark text on hover (deep bags brown) */
  gap: 10px;
  transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease;
}


/* Transition the text span too — both label AND icon will move on hover */

.bags-hero-slider__btn > span,
.bags-featured-banner__btn > span,
.bags-banner-products__banner-btn > span,
.bags-promo-banner__btn > span,
.bags-text-banner__btn > span,
.bags-ptabs__find-more > span {
  display: inline-block;
  transition: transform 0.5s ease;
}

.bags-hero-slider__btn svg,
.bags-featured-banner__btn svg,
.bags-banner-products__banner-btn svg,
.bags-promo-banner__btn svg,
.bags-text-banner__btn svg,
.bags-ptabs__find-more svg {
  width: 1.15em !important;
  height: 1.15em !important;
  flex-shrink: 0;
  transition: transform 0.5s ease;
}


/* ---- Hover state: solid gold + dark text. Button size stays identical. ---- */

.bags-hero-slider__btn:hover,
.bags-hero-slider__btn:focus-visible,
.bags-featured-banner__btn:hover,
.bags-featured-banner__btn:focus-visible,
.bags-banner-products__banner-btn:hover,
.bags-banner-products__banner-btn:focus-visible,
.bags-promo-banner__btn:hover,
.bags-promo-banner__btn:focus-visible,
.bags-text-banner__btn:hover,
.bags-text-banner__btn:focus-visible,
.bags-ptabs__find-more:hover,
.bags-ptabs__find-more:focus-visible {
  background-color: var(--cta-hover-bg) !important;
  color: var(--cta-hover-text) !important;
  border-color: var(--cta-hover-bg) !important;
}


/* ==================================================================
   Instagram
   ================================================================== */

.bags-instagram-rio {
  padding-top: var(--insta-pad-top-d, 100px);
  padding-bottom: var(--insta-pad-bottom-d, 100px);
  background-color: var(--insta-bg, transparent);
}

@media (max-width: 767px) {
  .bags-instagram-rio {
    padding-top: var(--insta-pad-top-m, 60px);
    padding-bottom: var(--insta-pad-bottom-m, 60px);
  }
}

.bags-instagram-rio > .container-fluid {
  padding-right: 0;
  padding-left: 0;
}

.bags-instagram-rio__title {
  margin: 0 0 48px 0;
  font-size: 48px;
  line-height: 1.1;
  font-weight: 600;
  color: var(--text-color, #1a1502);
}

.bags-instagram-rio__title.is-center {
  text-align: center;
}

@media (max-width: 991px) {
  .bags-instagram-rio__title {
    font-size: 40px;
  }
}

@media (max-width: 767px) {
  .bags-instagram-rio__title {
    font-size: 32px;
    margin-bottom: 32px;
    text-align: center;
  }
}

.bags-instagram-rio .insta-style {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}

.bags-instagram-rio .insta-style img {
  width: 100%;
  height: var(--insta-img-h-d, 300px);
  object-fit: cover;
}

@media (max-width: 767px) {
  .bags-instagram-rio .insta-style img {
    height: var(--insta-img-h-m, 245px);
  }
}

.bags-instagram-rio .insta-style .insta-icon {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%) scale(0);
  opacity: 0;
  visibility: hidden;
  font-size: 20px;
  text-shadow: none;
  padding: 15px 35px;
  text-transform: uppercase;
  font-weight: 800;
  color: #07080a;
  background: rgb(238 220 179 / 0.8);
  border: 3px solid #fff;
  min-width: 200px;
  text-align: center;
}

@media (max-width: 767px) {
  .bags-instagram-rio .insta-style .insta-icon {
    padding-right: 15px;
    padding-left: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

.bags-instagram-rio .insta-style:hover .insta-icon {
  opacity: 1;
  visibility: visible;
  transform: translate(50%, -50%) scale(1);
}

.bags-instagram-rio .insta-style .insta-icon:hover {
  background: #eedcb3;
}


/* ==================================================================
   Best Offers — Figma 1:890
   Section that combines a marquee strip with horizontal banner cards
   and bottom prev/next arrows. The marquee uses :nth-of-type(odd|even)
   to alternate two colors across repeated text spans.
   ================================================================== */

.bags-bestoffers {
  padding-top: var(--bo-pad-top-d, 100px);
  padding-bottom: var(--bo-pad-bottom-d, 50px);
  background-color: var(--bo-bg, #1a1500);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  overflow: hidden;
}

@media (max-width: 767px) {
  .bags-bestoffers {
    padding-top: var(--bo-pad-top-m, 60px);
    padding-bottom: var(--bo-pad-bottom-m, 30px);
    gap: 30px;
  }
}


/* ----- Marquee strip ----- */

.bags-bestoffers__marquee {
  width: 100%;
  background-color: var(--bo-marquee-bg, #201900);
  /* Padding adds breathing room above/below the text without changing
     its line-box. Merchants set --bo-marquee-pad-y from the schema. */
  padding-block: var(--bo-marquee-pad-y, 0);
  overflow: hidden;
  display: flex;
  align-items: center;
}

.bags-bestoffers__marquee-track {
  display: flex;
  align-items: center;
  gap: 60px;
  white-space: nowrap;
  flex-shrink: 0;
  animation: bags-bestoffers-marquee var(--bo-marquee-speed, 40s) linear infinite;
}

.bags-bestoffers__marquee-text {
  font-family: "Manrope", inherit;
  font-weight: var(--bo-marquee-weight, 400);
  font-size: var(--bo-marquee-size-d, 120px);
  line-height: 144px;
  text-transform: uppercase;
  white-space: nowrap;
}


/* Two alternating colors per Figma. Odd siblings = color 1, even = color 2. */

.bags-bestoffers__marquee-text:nth-of-type(odd) {
  color: var(--bo-marquee-color-1, #433707);
}

.bags-bestoffers__marquee-text:nth-of-type(even) {
  color: var(--bo-marquee-color-2, #74610d);
}


/* Outline variant — fill is transparent and the stroke uses each text
   span's color (so the two-tone effect is preserved on the border). */

.bags-bestoffers.is-marquee-outline .bags-bestoffers__marquee-text {
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.bags-bestoffers.is-marquee-outline .bags-bestoffers__marquee-text:nth-of-type(odd) {
  -webkit-text-stroke: 1.5px var(--bo-marquee-color-1, #433707);
  text-stroke: 1.5px var(--bo-marquee-color-1, #433707);
}

.bags-bestoffers.is-marquee-outline .bags-bestoffers__marquee-text:nth-of-type(even) {
  -webkit-text-stroke: 1.5px var(--bo-marquee-color-2, #74610d);
  text-stroke: 1.5px var(--bo-marquee-color-2, #74610d);
}

[dir="rtl"] .bags-bestoffers__marquee-track {
  animation-name: bags-bestoffers-marquee-rtl;
}

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

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

@media (max-width: 767px) {
  .bags-bestoffers__marquee-text {
    font-size: var(--bo-marquee-size-m, 56px);
    line-height: 80px;
  }
  .bags-bestoffers__marquee-track {
    gap: 30px;
  }
}


/* ----- Slider wrap + cards ----- */

.bags-bestoffers__slider-wrap {
  width: 100%;
  box-sizing: border-box;
}


/* Full-width mode: zero out container-fluid padding so the slider sits
   flush against the viewport edges (per merchant request). */

.bags-bestoffers > .container-fluid.bags-bestoffers__slider-wrap {
  padding-right: 0;
  padding-left: 0;
}

.bags-bestoffers__slider .slick-list {
  margin: 0 -12px;
  /* 20% trailing padding turns 2-per-view into 2.5-per-view:
       slide width = (100% - 20%) / 2 = 40%
       2 slides = 80% visible, 3rd peeks by 20% (half of 40%). */
  padding-inline-end: 20% !important;
}

.bags-bestoffers__slider .slick-slide {
  padding: 0 12px;
}


/* Equal-height cards: force the track into flex layout so every slide
   stretches to the tallest sibling. Without this slides keep their
   natural height and shorter cards look stunted next to taller ones. */

.bags-bestoffers__slider .slick-track {
  display: flex !important;
  align-items: stretch;
}

.bags-bestoffers__slider .slick-slide {
  height: auto;
}


/* The .item wrapper IS the slick-slide. Its only job is to host the
   Slick padding that creates the gap between cards. The card itself
   keeps a clean 30px internal padding without fighting Slick's rules. */

.bags-bestoffers__item {
  height: 100%;
  box-sizing: border-box;
}

.bags-bestoffers__card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 30px;
  background-color: var(--bo-card-bg, #141000);
  padding: 30px;
  height: 100%;
  box-sizing: border-box;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.25s ease;
}

.bags-bestoffers__card:hover {
  background-color: var(--bo-card-hover-bg, #201900);
}


/* Badge fills with the border color on card hover so it pops against
   the lightened card bg. Text color flips for contrast. */

.bags-bestoffers__card:hover .bags-bestoffers__card-badge {
  background-color: var(--bo-badge-hover-bg, var(--bo-badge-color, #c8b35b));
  border-color: var(--bo-badge-hover-bg, var(--bo-badge-color, #c8b35b));
  color: var(--bo-badge-hover-color, #1a1500);
}

.bags-bestoffers__card-image-wrap {
  flex-shrink: 0;
  width: 237px;
  height: 207px;
  overflow: hidden;
}

.bags-bestoffers__card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bags-bestoffers__card-content {
  display: flex;
  flex-direction: column;
  gap: 38px;
  align-items: flex-start;
  flex: 1;
  min-width: 0;
}

.bags-bestoffers__card-head {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
  width: 100%;
}

.bags-bestoffers__card-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--bo-badge-color, #c8b35b);
  border-radius: 100px;
  padding: 1px 20px;
  font-family: "Manrope", inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 28.8px;
  color: var(--bo-badge-color, #c8b35b);
  background-color: transparent;
  text-align: center;
  white-space: nowrap;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.bags-bestoffers__card-title {
  margin: 0;
  font-family: "Manrope", inherit;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--bo-title-color, #b7ae8b);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.bags-bestoffers__card-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Plus Jakarta Sans", "Manrope", inherit;
  font-size: 16px;
  font-weight: 700;
  color: var(--bo-cta-color, #b7ae8b);
}

[dir="rtl"] .bags-bestoffers__card-cta svg {
  transform: scaleX(-1);
}


/* Mobile/tablet (≤991px) matches Figma 1:1832: single card per view,
   square 140×140 image, tighter content gaps, smaller title and arrows.
   slidesToShow drops to 1 in the slick responsive config so the trailing
   peek (20%) is removed here to give the single card the full width. */

@media (max-width: 991px) {
  .bags-bestoffers {
    gap: 24px;
  }
  .bags-bestoffers__slider .slick-list {
    padding-inline-end: 0 !important;
    margin: 0 -6px;
  }
  .bags-bestoffers__slider .slick-slide {
    padding: 0 6px;
  }
  .bags-bestoffers__card {
    padding: 30px;
    gap: 24px;
  }
  .bags-bestoffers__card-image-wrap {
    width: 140px;
    height: 140px;
  }
  .bags-bestoffers__card-content {
    gap: 16px;
  }
  .bags-bestoffers__card-head {
    gap: 16px;
  }
  .bags-bestoffers__card-title {
    font-size: 28px;
    line-height: 33.6px;
  }
  .bags-bestoffers__arrow {
    width: 40px;
    height: 40px;
  }
  .bags-bestoffers__arrow svg {
    width: 18px;
    height: 18px;
  }
  .bags-bestoffers__arrows {
    gap: 12px;
    margin-top: 24px;
  }
}


/* ----- Bottom arrows ----- */

.bags-bestoffers__arrows {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 40px;
}

.bags-bestoffers__arrow {
  width: 80px;
  height: 82px;
  border-radius: 50%;
  border: 1px solid var(--bo-arrow-inactive-border, #5a4a14);
  background-color: var(--bo-arrow-inactive-bg, #1a1500);
  color: var(--bo-arrow-inactive-color, #b7ae8b);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.bags-bestoffers__arrow:hover {
  transform: scale(1.05);
  background-color: var(--bo-arrow-active-bg, #c8b35b);
  border-color: var(--bo-arrow-active-bg, #c8b35b);
  color: var(--bo-arrow-active-color, #1a1500);
}

/* LTR-authored SVGs mirrored in RTL to match the slider's RTL flow direction. */
[dir="rtl"] .bags-bestoffers__arrow svg { transform: scaleX(-1); }

@media (max-width: 575px) {
  .bags-bestoffers__arrow {
    width: 60px;
    height: 60px;
  }
  .bags-bestoffers__arrow svg {
    width: 22px;
    height: 22px;
  }
}

.bags-bestoffers__empty {
  color: var(--bo-title-color, #b7ae8b);
  text-align: center;
  padding: 40px 20px;
}

/* ==================================================================
   Multi Banners
   ------------------------------------------------------------------
   Card visual is the same banner unit used by "Banner + Products".
   Layout adapts to the banner count:
     1 → full width, 2 → 50/50, 3 → 3 cols, 4+ → slider (always).
   ================================================================== */

.bags-multi-banners {
  padding-top: var(--mb-pad-top-d, 100px);
  padding-bottom: var(--mb-pad-bottom-d, 100px);
  background-color: var(--mb-bg, transparent);
}

@media (max-width: 767px) {
  .bags-multi-banners {
    padding-top: var(--mb-pad-top-m, 60px);
    padding-bottom: var(--mb-pad-bottom-m, 60px);
  }
}

.bags-multi-banners__heading {
  margin: 0 0 48px 0;
  font-size: 48px;
  font-weight: 500;
  line-height: 1.2;
}
.bags-multi-banners__heading.is-center { text-align: center; }
@media (max-width: 991px) {
  .bags-multi-banners__heading { font-size: 40px; margin-bottom: 36px; }
}
@media (max-width: 575px) {
  .bags-multi-banners__heading { font-size: 32px; margin-bottom: 28px; text-align: center; }
}

.bags-multi-banners__wrap {
  position: relative;
}

/* Grid mode: 1 / 2 / 3 columns set via --mb-cols. */
.bags-multi-banners__grid:not(.is-slider) {
  display: grid;
  grid-template-columns: repeat(var(--mb-cols, 1), 1fr);
  gap: var(--mb-gap, 25px);
  align-items: stretch;
}

@media (max-width: 991px) {
  /* 3-col layouts collapse to 2 on tablet, single banners stay 1. */
  .bags-multi-banners__grid:not(.is-slider) {
    grid-template-columns: repeat(min(var(--mb-cols, 1), 2), 1fr);
    gap: 16px;
  }
}
@media (max-width: 575px) {
  .bags-multi-banners__grid:not(.is-slider) {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* Slider mode — slick takes over the layout, so undo the grid. */
.bags-multi-banners__grid.is-slider { display: block; }
.bags-multi-banners__grid.is-slider .slick-slide {
  margin: 0 calc(var(--mb-gap, 25px) / 2);
  height: auto;
}
.bags-multi-banners__grid.is-slider .slick-list {
  margin: 0 calc(var(--mb-gap, 25px) / -2);
}
.bags-multi-banners__grid.is-slider .slick-track {
  display: flex;
  align-items: stretch;
}

.bags-multi-banners__grid.is-slider .bags-multi-banners__item {
  height: 100%;
}

/* Slider dots — same pill style as the other sections. */
.bags-multi-banners__grid .slick-dots {
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.bags-multi-banners__grid .slick-dots li { line-height: 0; }
.bags-multi-banners__grid .slick-dots li button {
  font-size: 0;
  width: 16px;
  height: 5px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  background-color: #E0E0E0;
  cursor: pointer;
  transition: background-color 0.25s ease, width 0.25s ease;
}
.bags-multi-banners__grid .slick-dots li.slick-active button {
  width: 44px;
  background-color: var(--bags-accent, var(--primary-color, #c8b35b));
}

/* === Banner card (same visual as Banner + Products banner) === */
/* Aspect ratio is calibrated per column count so cards stay reasonably
   sized at any breakpoint — a 484:726 portrait calibrated for a 1/3-width
   card becomes a 900px-tall monster when stretched to 50% of the page. */
.bags-multi-banners__item {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* 1 banner full-width → cinematic hero. */
.bags-multi-banners[data-cols="1"] .bags-multi-banners__item { aspect-ratio: 16 / 7; }
/* 2 banners 50/50 → near-square so each card stays balanced. */
.bags-multi-banners[data-cols="2"] .bags-multi-banners__item { aspect-ratio: 5 / 4; }
/* 3 banners or slider → matches the banner-products portrait shape. */
.bags-multi-banners[data-cols="3"] .bags-multi-banners__item { aspect-ratio: 484 / 580; }

@media (max-width: 991px) {
  .bags-multi-banners[data-cols="1"] .bags-multi-banners__item,
  .bags-multi-banners[data-cols="2"] .bags-multi-banners__item,
  .bags-multi-banners[data-cols="3"] .bags-multi-banners__item { aspect-ratio: 4 / 5; }
}

.bags-multi-banners__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  border: 0;
}

.bags-multi-banners__youtube {
  position: absolute;
  inset: 0;
  min-width: 100%;
  min-height: 100%;
  width: 177.78vh;
  height: 56.25vw;
  max-width: none;
  max-height: none;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
}

.bags-multi-banners__media--mobile { display: none; }
@media (max-width: 991px) {
  .bags-multi-banners__media--desktop { display: none; }
  .bags-multi-banners__media--mobile { display: block; }
}

.bags-multi-banners__mask {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 2;
}

.bags-multi-banners__full-link {
  position: absolute;
  inset: 0;
  z-index: 4;
}

.bags-multi-banners__content {
  position: absolute;
  inset-block-start: 31px;
  inset-inline-start: 24px;
  /* Fixed natural width per column count (set below) — the title wraps
     inside this box instead of stretching the box to fit the title. */
  width: 422px;
  max-width: calc(100% - 48px);
  z-index: 3;
  background-color: #1a1500;
  padding: 60px 40px;
  display: flex;
  direction: ltr;
  flex-direction: column;
  align-items: flex-start;
  gap: 61px;
  box-sizing: border-box;
}

/* Narrower cards need a narrower box so the image stays visible behind it. */
.bags-multi-banners[data-cols="2"] .bags-multi-banners__content { width: 320px; }
.bags-multi-banners[data-cols="3"] .bags-multi-banners__content { width: 260px; }

@media (max-width: 1199px) {
  .bags-multi-banners__content {
    inset-block-start: 20px;
    inset-inline-start: 24px;
    padding: 40px 28px;
    gap: 40px;
  }
  .bags-multi-banners[data-cols="2"] .bags-multi-banners__content { width: 280px; }
  .bags-multi-banners[data-cols="3"] .bags-multi-banners__content { width: 240px; }
}

@media (max-width: 991px) {
  .bags-multi-banners__content,
  .bags-multi-banners[data-cols="2"] .bags-multi-banners__content,
  .bags-multi-banners[data-cols="3"] .bags-multi-banners__content {
    /* Mobile: match banner-products — box spans the full top of the card. */
    inset-block-start: 0;
    inset-inline-start: 0;
    width: auto;
    max-width: 100%;
    gap: 24px;
    padding: 32px 24px;
    align-items: center;
    text-align: center;
  }
}

.bags-multi-banners__subtitle {
  margin: 0;
  font-family: "Manrope", inherit;
  font-size: 30px;
  font-weight: 400;
  line-height: 36px;
}
@media (max-width: 1199px) { .bags-multi-banners__subtitle { font-size: 22px; line-height: 30px; } }
@media (max-width: 575px) { .bags-multi-banners__subtitle { font-size: 18px; line-height: 26px; } }

.bags-multi-banners__title {
  margin: 0;
  font-family: "Manrope", inherit;
  font-size: 52px;
  font-weight: 500;
  line-height: 56px;
}
@media (max-width: 1199px) { .bags-multi-banners__title { font-size: 38px; line-height: 44px; } }
@media (max-width: 575px) { .bags-multi-banners__title { font-size: 28px; line-height: 34px; } }

.bags-multi-banners[data-cols="2"] .bags-multi-banners__title,
.bags-multi-banners[data-cols="3"] .bags-multi-banners__title {
  font-size: 38px;
  line-height: 44px;
}
.bags-multi-banners[data-cols="2"] .bags-multi-banners__subtitle,
.bags-multi-banners[data-cols="3"] .bags-multi-banners__subtitle {
  font-size: 22px;
  line-height: 30px;
}
/* Desktop-only — the 991px mobile rule above resets these to top-start
   full-width, and we don't want this re-override to leak into mobile. */
@media (min-width: 992px) {
  .bags-multi-banners[data-cols="2"] .bags-multi-banners__content,
  .bags-multi-banners[data-cols="3"] .bags-multi-banners__content {
    padding: 40px 28px;
    gap: 40px;
    inset-block-start: 20px;
    inset-inline-start: 24px;
  }
}

.bags-multi-banners__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  border-radius: 90px;
  border: 1.5px solid currentColor;
  font-family: "Plus Jakarta Sans", inherit;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.bags-multi-banners__btn:hover { transform: translateY(-2px); }

[dir="rtl"] .bags-multi-banners__btn svg { transform: scaleX(-1); }

/* === Arrows (slider mode) === */
.bags-multi-banners__arrows {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 32px;
}

.bags-multi-banners__arrow {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1.5px solid var(--bags-accent, var(--primary-color, #c8b35b));
  background: transparent;
  color: var(--bags-accent, var(--primary-color, #c8b35b));
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.bags-multi-banners__arrow:hover {
  background-color: var(--bags-accent, var(--primary-color, #c8b35b));
  color: #1a1502;
  transform: scale(1.05);
}

/* LTR-authored SVGs mirrored in RTL to match the slider's RTL flow direction. */
[dir="rtl"] .bags-multi-banners__arrow svg { transform: scaleX(-1); }

@media (max-width: 991px) {
  .bags-multi-banners__arrows { display: none; }
}