/** Shopify CDN: Minification failed

Line 127:0 All "@import" rules must come first

**/
/* ============================================================
   RELATED PRODUCTS — related-products.css
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   1. DESIGN TOKENS (fallback defaults)
   ══════════════════════════════════════════════════════════ */
:root {
  --rp-section-bg:              #FFFFFF;
  --rp-section-padding-top:     50px;
  --rp-section-padding-bottom:  50px;

  --rp-container-max-width:     1280px;
  --rp-container-padding-x:     24px;

  --rp-title-font-family:       'DM Sans', system-ui, sans-serif;
  --rp-title-font-size:         22px;
  --rp-title-font-weight:       700;
  --rp-title-color:             #1A1A1A;
  --rp-title-align:             left;
  --rp-title-highlight:         #FF4081;
  --rp-title-letter-spacing:    -0.3px;
  --rp-title-font-weight:       700;
  --rp-title-highlight-style:   italic;
  --rp-title-highlight-decor:   underline;
  --rp-title-highlight-decor-style: solid;
  --rp-title-line-height:       1.2;

  --rp-card-bg:                 #FFFFFF;
  --rp-card-border:             1px solid #EBEBEB;
  --rp-card-border-hover:       1px solid #FF4081;
  --rp-card-radius:             16px;
  --rp-card-shadow:             0 2px 12px rgba(0,0,0,0.06);
  --rp-card-shadow-hover:       0 8px 28px rgba(0,0,0,0.12);
  --rp-card-translate-hover:    -5px;

  --rp-img-bg:                  #FAFAFA;
  --rp-img-aspect-ratio:        1 / 1;
  --rp-img-fit:                 contain;
  --rp-img-scale-hover:         1.05;

  --rp-badge-font-size:         11px;
  --rp-badge-font-weight:       700;
  --rp-badge-padding:           4px 10px;
  --rp-badge-radius:            100px;
  --rp-badge-letter-spacing:    0.4px;
  --rp-badge-sale-bg:           #FF4081;
  --rp-badge-sale-color:        #FFFFFF;
  --rp-badge-new-bg:            #FF4081;
  --rp-badge-new-color:         #FFFFFF;

  --rp-wish-size:               34px;
  --rp-wish-bg:                 rgba(255,255,255,0.95);
  --rp-wish-border:             1px solid #F0F0F0;
  --rp-wish-radius:             50%;
  --rp-wish-icon-color:         #FF4081;
  --rp-wish-icon-active:        #FF4081;

  --rp-body-padding:            14px 16px 16px;
  --rp-body-font-family:        'DM Sans', system-ui, sans-serif;

  --rp-name-font-size:          15px;
  --rp-name-font-weight:        600;
  --rp-name-color:              #1A1A1A;
  --rp-name-hover:              #FF4081;
  --rp-name-line-clamp:         1;
  --rp-name-line-height:        1.4;

  --rp-star-size:               13px;
  --rp-star-count-size:         12px;
  --rp-star-count-color:        #888888;
  --rp-star-filled:             #FF4081;
  --rp-star-empty:              #E0D8CC;

  --rp-price-font-size:         15px;
  --rp-price-font-weight:       700;
  --rp-price-color:             #1A1A1A;
  --rp-was-font-size:           13px;
  --rp-was-color:               #AAAAAA;

  --rp-btn-font-size:           13px;
  --rp-btn-font-weight:         700;
  --rp-btn-padding-y:           11px;
  --rp-btn-radius:              100px;
  --rp-btn-letter-spacing:      0.8px;
  --rp-btn-bg:                  #FFFFFF;
  --rp-btn-color:               #FF4081;
  --rp-btn-border:              2px solid #FF4081;
  --rp-btn-bg-hover:            #FF4081;
  --rp-btn-color-hover:         #FFFFFF;
  --rp-btn-border-hover:        2px solid #FF4081;
  --rp-btn-bg-added:            #1A7A45;
  --rp-btn-color-added:         #FFFFFF;
  --rp-btn-bg-soldout:          #F0F0F0;
  --rp-btn-color-soldout:       #AAAAAA;
  --rp-btn-border-soldout:      1px solid #E0E0E0;

  --rp-nav-size:                40px;
  --rp-nav-bg:                  #FFFFFF;
  --rp-nav-border:              1px solid #E8E8E8;
  --rp-nav-radius:              50%;
  --rp-nav-shadow:              0 2px 10px rgba(0,0,0,0.08);
  --rp-nav-icon-color:          #555555;
  --rp-nav-bg-hover:            #FF4081;
  --rp-nav-icon-hover:          #FFFFFF;

  --rp-dot-size:                6px;
  --rp-dot-active-width:        20px;
  --rp-dot-color:               #DDDDD9;
  --rp-dot-color-active:        #FF4081;
  --rp-dot-radius:              6px;
  --rp-dots-mt:                 20px;

  --rp-slide-gap:               16px;
  --rp-transition:              0.25s ease;
}


/* ══════════════════════════════════════════════════════════
   2. FONTS
   ══════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap');


/* ══════════════════════════════════════════════════════════
   3. SECTION & CONTAINER
   ══════════════════════════════════════════════════════════ */
.rp-section {
  background: var(--rp-section-bg);
  padding-top: var(--rp-section-padding-top);
  padding-bottom: var(--rp-section-padding-bottom);
  font-family: var(--rp-body-font-family);
  box-sizing: border-box;
}

.rp-container {
  max-width: var(--rp-container-max-width);
  margin: 0 auto;
  padding-left: var(--rp-container-padding-x);
  padding-right: var(--rp-container-padding-x);
  box-sizing: border-box;
}


/* ══════════════════════════════════════════════════════════
   4. HEADER
   ══════════════════════════════════════════════════════════ */
.rp-header {
  margin-bottom: 28px;
}

.rp-title {
  font-family: var(--rp-title-font-family);
  font-size: var(--rp-title-font-size);
  font-weight: var(--rp-title-font-weight);
  letter-spacing: var(--rp-title-letter-spacing);
  line-height: var(--rp-title-line-height);
  color: var(--rp-title-color);
  margin: 0;
}

.rp-title__highlight {
  font-style: var(--rp-title-highlight-style, italic);
  color: var(--rp-title-highlight);
  text-decoration: var(--rp-title-highlight-decor, underline);
  text-decoration-style: var(--rp-title-highlight-decor-style, solid);
  text-decoration-color: var(--rp-title-highlight);
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
}


/* ══════════════════════════════════════════════════════════
   5. SWIPER WRAPPER
   ══════════════════════════════════════════════════════════ */
.rp-swiper-outer {
  position: relative;
  padding: 0 calc(var(--rp-nav-size) / 2 + 10px);
}

.rp-swiper {
  overflow: hidden;
}

.rp-swiper .swiper-wrapper {
  display: flex;
  align-items: stretch;
}

.rp-swiper .swiper-slide {
  height: auto;
  box-sizing: border-box;
  padding-bottom: 6px;
}


/* ══════════════════════════════════════════════════════════
   6. NAV ARROWS
   ══════════════════════════════════════════════════════════ */
.rp-nav {
  position: absolute;
  top: 50%;
  transform: translateY(calc(-50% - 22px));
  z-index: 10;
  width: var(--rp-nav-size);
  height: var(--rp-nav-size);
  border-radius: var(--rp-nav-radius);
  background: var(--rp-nav-bg);
  border: var(--rp-nav-border);
  box-shadow: var(--rp-nav-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background var(--rp-transition),
    box-shadow var(--rp-transition),
    border var(--rp-transition),
    opacity var(--rp-transition),
    transform var(--rp-transition);
}

/* Hover-only mode: hidden by default, show on parent hover */
.rp-nav--onhover {
  opacity: 0;
  pointer-events: none;
}

.rp-swiper-outer:hover .rp-nav--onhover {
  opacity: 1;
  pointer-events: auto;
}

.rp-nav:hover {
  background: var(--rp-nav-bg-hover);
  border-color: var(--rp-nav-bg-hover);
  box-shadow: 0 4px 16px rgba(255,64,129,0.3);
}

.rp-nav:hover svg {
  stroke: var(--rp-nav-icon-hover);
}

.rp-nav svg {
  width: 17px;
  height: 17px;
  stroke: var(--rp-nav-icon-color);
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke var(--rp-transition);
  display: block;
}

.rp-nav--prev { left: 0; }
.rp-nav--next { right: 0; }

.rp-nav.swiper-button-disabled {
  opacity: 0.25;
  pointer-events: none;
}


/* ══════════════════════════════════════════════════════════
   7. PAGINATION DOTS
   ══════════════════════════════════════════════════════════ */
.rp-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: var(--rp-dots-mt);
}

.rp-pagination .swiper-pagination-bullet {
  width: var(--rp-dot-size);
  height: var(--rp-dot-size);
  border-radius: var(--rp-dot-radius);
  background: var(--rp-dot-color);
  opacity: 1;
  transition: width 0.3s ease, background 0.3s ease;
  cursor: pointer;
}

.rp-pagination .swiper-pagination-bullet-active {
  width: var(--rp-dot-active-width);
  background: var(--rp-dot-color-active);
}

/* When pagination is hidden from schema, element simply won't render */


/* ══════════════════════════════════════════════════════════
   8. PRODUCT CARD
   ══════════════════════════════════════════════════════════ */
.rp-card {
  background: var(--rp-card-bg);
  border: var(--rp-card-border);
  border-radius: var(--rp-card-radius);
  box-shadow: var(--rp-card-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition:
    transform var(--rp-transition),
    border var(--rp-transition),
    box-shadow var(--rp-transition);
}

.rp-card:hover {
  transform: translateY(var(--rp-card-translate-hover));
  border: var(--rp-card-border-hover);
  box-shadow: var(--rp-card-shadow-hover);
}


/* ── Image ───────────────────────────────────────────────── */
.rp-card__img-wrap {
  position: relative;
  aspect-ratio: var(--rp-img-aspect-ratio);
  background: var(--rp-img-bg);
  overflow: hidden;
  display: block;
  flex-shrink: 0;
}

.rp-card__img {
  width: 100%;
  height: 100%;
  object-fit: var(--rp-img-fit);
  display: block;
  padding: 12px;
  box-sizing: border-box;
  transition: transform 0.4s ease;
}

.rp-card:hover .rp-card__img {
  transform: scale(var(--rp-img-scale-hover));
}

.rp-card__img-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rp-card__img-placeholder svg {
  width: 48px;
  height: 48px;
  opacity: 0.12;
}


/* ── Badge ───────────────────────────────────────────────── */
.rp-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: var(--rp-badge-font-size);
  font-weight: var(--rp-badge-font-weight);
  padding: var(--rp-badge-padding);
  border-radius: var(--rp-badge-radius);
  letter-spacing: var(--rp-badge-letter-spacing);
  line-height: 1.5;
  pointer-events: none;
  z-index: 2;
  text-transform: uppercase;
}

.rp-badge--sale {
  background: var(--rp-badge-sale-bg);
  color: var(--rp-badge-sale-color);
}

.rp-badge--new {
  background: var(--rp-badge-new-bg);
  color: var(--rp-badge-new-color);
}


/* ── Wishlist ────────────────────────────────────────────── */
.rp-wishlist {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: var(--rp-wish-size);
  height: var(--rp-wish-size);
  border-radius: var(--rp-wish-radius);
  background: var(--rp-wish-bg);
  border: var(--rp-wish-border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color var(--rp-transition), background var(--rp-transition);
  backdrop-filter: blur(4px);
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.rp-wishlist:hover {
  border-color: var(--rp-wish-icon-color);
  background: #FFF5F8;
}

.rp-wishlist svg {
  width: 16px;
  height: 16px;
  stroke: var(--rp-wish-icon-color);
  fill: none;
  stroke-width: 2;
  transition: stroke var(--rp-transition), fill var(--rp-transition);
}

.rp-wishlist.is-active svg {
  stroke: var(--rp-wish-icon-active);
  fill: var(--rp-wish-icon-active);
}


/* ── Card Body ───────────────────────────────────────────── */
.rp-card__body {
  padding: var(--rp-body-padding);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 6px;
  font-family: var(--rp-body-font-family);
}

/* ── Stars ───────────────────────────────────────────────── */
.rp-stars {
  display: flex;
  align-items: center;
  gap: 2px;
}

.rp-star {
  width: var(--rp-star-size);
  height: var(--rp-star-size);
  flex-shrink: 0;
}

.rp-star--filled {
  fill: var(--rp-star-filled);
  stroke: none;
}

.rp-star--empty {
  fill: none;
  stroke: var(--rp-star-empty);
  stroke-width: 1.5;
}

.rp-stars__count {
  font-size: var(--rp-star-count-size);
  color: var(--rp-star-count-color);
  margin-left: 4px;
  font-family: var(--rp-body-font-family);
}


/* ── Product Name ────────────────────────────────────────── */
.rp-card__name {
  font-size: var(--rp-name-font-size);
  font-weight: var(--rp-name-font-weight);
  color: var(--rp-name-color);
  line-height: var(--rp-name-line-height);
  margin: 0;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  transition: color var(--rp-transition);
}

.rp-card__name:hover {
  color: var(--rp-name-hover);
}


/* ── Footer: Price + Button ──────────────────────────────── */
.rp-card__footer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-top: auto;
  padding-top: 10px;
}

.rp-price {
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
}

.rp-price__now {
  font-size: var(--rp-price-font-size);
  font-weight: var(--rp-price-font-weight);
  color: var(--rp-price-color);
  line-height: 1.1;
  font-family: var(--rp-body-font-family);
  white-space: nowrap;
}

.rp-price__was {
  font-size: var(--rp-was-font-size);
  color: var(--rp-was-color);
  text-decoration: line-through;
  line-height: 1.2;
  font-family: var(--rp-body-font-family);
}

/* ── Add to Cart Button ──────────────────────────────────── */
.rp-cart-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: var(--rp-btn-padding-y) 16px;
  border-radius: var(--rp-btn-radius);
  font-family: var(--rp-body-font-family);
  font-size: var(--rp-btn-font-size);
  font-weight: var(--rp-btn-font-weight);
  letter-spacing: var(--rp-btn-letter-spacing);
  background: var(--rp-btn-bg);
  color: var(--rp-btn-color);
  border: var(--rp-btn-border);
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
  text-transform: uppercase;
  transition:
    background var(--rp-transition),
    color var(--rp-transition),
    border var(--rp-transition),
    transform 0.1s ease,
    box-shadow var(--rp-transition);
}

.rp-cart-btn:hover:not(:disabled) {
  background: var(--rp-btn-bg-hover);
  color: var(--rp-btn-color-hover);
  border: var(--rp-btn-border-hover);
  box-shadow: 0 4px 16px rgba(255,64,129,0.3);
  transform: translateY(-1px);
}

.rp-cart-btn:active:not(:disabled) {
  transform: scale(0.97) translateY(0);
}

.rp-cart-btn.is-added {
  background: #1A7A45 !important;
  color: #FFFFFF !important;
  border-color: #1A7A45 !important;
  pointer-events: none;
}

.rp-cart-btn--soldout,
.rp-cart-btn:disabled:not(.is-added) {
  background: var(--rp-btn-bg-soldout, #F0F0F0);
  color: var(--rp-btn-color-soldout, #AAAAAA);
  border: var(--rp-btn-border-soldout, 1px solid #E0E0E0);
  cursor: not-allowed;
}

.rp-cart-btn svg { display: none; }


/* ══════════════════════════════════════════════════════════
   9. RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
  :root { --rp-container-padding-x: 20px; }
}

@media (max-width: 1024px) {
  .rp-swiper-outer {
    padding: 0 calc(var(--rp-nav-size) / 2 + 4px);
  }
}

@media (max-width: 768px) {
  :root {
    --rp-section-padding-top:    36px;
    --rp-section-padding-bottom: 36px;
    --rp-title-font-size:        20px;
    --rp-container-padding-x:    16px;
    --rp-nav-size:               34px;
  }

  .rp-swiper-outer { padding: 0 2px; }

  /* On mobile: arrows always hidden, swipe instead */
  .rp-nav { display: none !important; }
}

@media (max-width: 480px) {
  :root { --rp-title-font-size: 18px; }
}