/* ============================================
   DESIGN TOKENS
   ============================================ */
:root {
	/* Brand Colors */
	--color-primary: #6A2C3E;
	--color-secondary: #E6B7C6;
	--color-secondary-light: #F3DBE2;
	--color-accent: #F0929B;

	/* Neutral Colors */
	--color-white: #FFFFFF;
	--color-white-85: rgba(255, 255, 255, 0.85);
	--color-dark: #1A1510;
	--color-gray-100: #E8E8E8;
	--color-gray-900: #1A1A1A;

	/* Semantic Colors */
	--color-text-primary: var(--color-primary);
	--color-text-secondary: var(--color-gray-900);
	--color-text-light: var(--color-white);
	--color-bg-dark: var(--color-dark);
	--color-bg-light: var(--color-white);
	--color-bg-primary: var(--color-primary);
	--color-bg-accent: var(--color-accent);
	--color-border-light: var(--color-gray-100);

	/* Border Radius */
	--radius-small: 8px;
	--radius-medium: 12px;
	--radius-large: 16px;
	--radius-full: 50%;

	/* Spacing Scale */
	--space-2xs: 0.25rem;
	--space-xs: 0.5rem;
	--space-sm: 1rem;
	--space-md: 1.5rem;
	--space-lg: 2rem;
	--space-xl: 3rem;
	--space-banner-gap: 0.75rem;
	--space-banner-gap-mobile: 0.5rem;
	--space-banner-padding-x: 1.75rem;
	--space-banner-padding-x-mobile: 1.125rem;

	/* Typography */
	--font-size-xs: 0.9rem;
	--font-size-sm: 1.4rem;
	--font-weight-bold: 700;
	--letter-spacing-wide: 0.1em;

	/* Transitions */
	--transition-fast: 150ms ease;
	--transition-medium: 300ms ease;

	/* Component Specific */
	--banner-height: 64px;
	--banner-height-mobile: 52px;
	--icon-size: 36px;
	--icon-size-mobile: 28px;
	--icon-svg-size: 18px;
	--icon-svg-size-mobile: 14px;
	--stroke-width: 1.8;
}


/* ============================================
   LAYOUT & CONTAINERS
   ============================================ */
.hero-container,
.banner {
	margin-inline: auto;
	padding-inline: var(--space-sm);
	width: 100%;
	max-width: 100%;
}

@media (min-width: 768px) {

	.hero-container,
	.banner {
		max-width: 100%;
	}
}

@media (min-width: 1280px) {

	.hero-container,
	.banner {
		max-width: 1280px;
	}
}

@media (min-width: 1440px) {

	.hero-container,
	.banner {
		max-width: 1440px;
	}
}


/* ============================================
   HERO SECTION
   ============================================ */
.hero-container img {
	border-radius: var(--radius-medium);
}


/* ============================================
   BRAND VALUE SECTION
   ============================================ */
.brand-value {
	position: relative;
	width: 100%;
	height: 66.67vh;
	min-height: 480px;
	overflow: hidden;
	background: var(--color-bg-dark);
}

.brand-value__track {
	display: flex;
	height: 100%;
	width: max-content;
	will-change: transform;
}

.brand-value__track.running {
	animation: brandScroll var(--dur, 40s) linear infinite;
}

.brand-value__track img {
	display: block;
	height: 100%;
	width: auto;
	flex-shrink: 0;
	object-fit: cover;
}

.brand-value__content {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 2;
	text-align: center;
	padding: var(--space-lg);
	pointer-events: none;
}

.brand-value__subtitle {
	font-weight: 300;
	font-size: clamp(0.85rem, 1.2vw, 1.1rem);
	letter-spacing: 0.18em;
	color: var(--color-white-85);
	margin-bottom: clamp(var(--space-md), 3vh, var(--space-xl));
}

.brand-value__heading {
	font-weight: 400;
	font-size: clamp(2rem, 4.5vw, 4.5rem);
	line-height: 1.35;
	color: var(--color-text-light);
}

@media (max-width: 768px) {
	.brand-value {
		height: 50vh;
		min-height: 360px;
	}
}


/* ============================================
   BANNER / MARQUEE
   ============================================ */
.banner {
	width: 100%;
	overflow: hidden;
	background: var(--color-bg-light);
	border-top: 1px solid var(--color-border-light);
	border-bottom: 1px solid var(--color-border-light);
	display: flex;
	align-items: center;
	height: var(--banner-height);
    margin-bottom: 2rem;
}

.scroll-track {
	flex: 1;
	overflow: hidden;
	position: relative;
	-webkit-mask-image: linear-gradient(90deg,
			transparent 0%,
			#000 3%,
			#000 97%,
			transparent 100%);
	mask-image: linear-gradient(90deg,
			transparent 0%,
			#000 3%,
			#000 97%,
			transparent 100%);
}

.scroll-inner {
	display: flex;
	flex-wrap: nowrap;
	flex-shrink: 0;
	will-change: transform;
}

.scroll-inner.running {
	animation: bannerMarquee var(--dur, 30s) linear infinite;
}

.scroll-item {
	display: flex;
	align-items: center;
	gap: var(--space-banner-gap);
	padding: 0 var(--space-banner-padding-x);
	white-space: nowrap;
	flex-shrink: 0;
}

.scroll-item__icon {
	width: var(--icon-size);
	height: var(--icon-size);
	border-radius: var(--radius-full);
	background: var(--color-bg-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.scroll-item__icon svg {
	width: var(--icon-svg-size);
	height: var(--icon-svg-size);
	fill: none;
	stroke: var(--color-white);
	stroke-width: var(--stroke-width);
	stroke-linecap: round;
	stroke-linejoin: round;
}

.scroll-item__text {
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
	color: var(--color-text-secondary);
}

@media (max-width: 768px) {
	.banner {
		height: var(--banner-height-mobile);
	}

	.scroll-item {
		gap: var(--space-banner-gap-mobile);
		padding: 0 var(--space-banner-padding-x-mobile);
	}

	.scroll-item__icon {
		width: var(--icon-size-mobile);
		height: var(--icon-size-mobile);
	}

	.scroll-item__icon svg {
		width: var(--icon-svg-size-mobile);
		height: var(--icon-svg-size-mobile);
	}

	.scroll-item__text {
		font-size: var(--font-size-xs);
	}
}


/* ============================================
   STORY SECTION
   ============================================ */
.story img,
.story .btn {
	border-radius: var(--radius-medium) !important;
	margin-top: 0 !important;
}

.story img {
	max-height: 30rem !important;
}

.story .btn {
	color: var(--color-text-light) !important;
}


/* ============================================
   INGREDIENTS SECTION
   ============================================ */
.ingredients img {
	max-width: 20rem !important;
}

section.advanced-slider.advanced-slider--6 {
	margin-bottom: 3rem;
}


/* ============================================
   PRODUCT CARD
   ============================================ */
.product-card__addToCart__btn salla-button button {
	background: var(--color-bg-primary);
}


/* ============================================
   SALLA BLOCKS
   ============================================ */
section.s-block.s-block--bundle-html-content {
	margin: 0;
}

salla-html-content-ebtcyq.s-block.s-block-html-content {
	margin: var(--space-sm);
}

.s-block {
	margin-top: 1rem;
}

/* ============================================
   PRODUCT PAGE
   ============================================ */
.s-button-primary {
	color: white !important;
}

div#details_table img {
    border-radius: 12px;
}

.sticky-product-bar__quantity.center-between.mb-5 {
	display: none;
}

@media (max-width: 991px) {
	.product-more-info .more-tab-container .more-info-tabs__nav-link.active {
		color: white !important;
	}

	/* 1. Reset the container height to allow aspect-ratio to work */
	.product-single__main-media {
		height: auto !important;
		min-height: auto !important;
	}

	/* 2. Force the slider and slides to be square */
	.product-single__main-media salla-slider,
	.product-single__main-media .swiper-slide {
		aspect-ratio: 1 / 1 !important;
		height: auto !important;
	}

	/* 3. Ensure the image fits perfectly within the square */
	.product-single__main-media img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
		/* Fills the square without stretching */
		object-position: center;
	}

	/* --- Salla Store Product Slider Overrides --- */

	.product-single__main-media,
	.product-single__main-media .swiper-slide,
	.product-single__main-media img {
		border-radius: 32px !important;
		/* Creates the soft, pill-like rounding from the goal image */
		overflow: hidden !important;
	}

	.product-single__main-media img {
		object-fit: cover !important;
		width: 100% !important;
		height: 100% !important;
	}

	.s-slider-thumbs {
		margin-top: 20px !important;
	}

	.s-slider-thumbs .swiper-slide,
	.s-slider-thumbs img {
		border-radius: 16px !important;
		/* Slightly smaller border radius for the smaller images */
		overflow: hidden !important;
	}

	.s-slider-thumbs img {
		transition: opacity 0.3s ease, border 0.3s ease;
	}

	.s-slider-thumbs .swiper-slide-thumb-active img {
		opacity: 1 !important;
	}

	.s-slider-thumbs .swiper-slide:not(.swiper-slide-thumb-active) img {
		opacity: 0.6 !important;
	}

	.s-slider-thumbs .swiper-slide:not(.swiper-slide-thumb-active):hover img {
		opacity: 0.9 !important;
	}

	.s-slider-thumbs .s-slider-thumbs-container .swiper-slide.swiper-slide-thumb-active:after {
		box-shadow: none !important;
	}
}

.product-single__info .flex.items-center.justify-between.mb-5 {
    display: none;
}

nav.breadcrumbs.w-full.py-5 {
    display: none;
}

.more-info-tabs__nav-link.mobile span {
    color: white;
}

.product-more-info .more-tab-container .more-info-tabs__nav-link:after {
    color: white;
}


/* <style> */
  .s-payments-list {
    direction: rtl;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    max-width: 1000px;
    margin: 20px auto;
    color: #2d3436;
  }

  /* Grid Layout */
  .s-review-grid {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
  }

  /* The "Review" Card Style */
  .s-trust-card {
    flex: 1;
    background: #ffffff;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    transition: transform 0.2s ease;
  }

  .s-trust-card:hover {
    transform: translateY(-3px);
  }

  /* Header: Avatar + Title + Verified Badge */
  .s-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
  }

  .s-avatar-circle {
    width: 40px;
    height: 40px;
    background: #f8f9fa;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
  }

  .s-card-meta h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
  }

  .s-verified-tag {
    font-size: 0.75rem;
    color: #00b894; /* Trusted Green */
    display: flex;
    align-items: center;
    gap: 4px;
  }

  /* The Familiar Stars */
  .s-stars {
    color: #fdcb6e; /* Star Gold */
    font-size: 0.85rem;
    margin-bottom: 10px;
    display: flex;
    gap: 2px;
  }

  .s-card-body {
    font-size: 0.88rem;
    color: #636e72;
    line-height: 1.5;
    margin: 0;
  }

  /* Bottom Payment Banner */
  .s-payment-footer {
    background-color: #fcfcfc;
    border: 1px dashed #e0e0e0;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .s-payment-text {
    font-size: 1rem;
    font-weight: 500;
  }

  .s-payment-text b {
    color: #000;
    font-weight: 800;
  }

  .s-provider-wrap {
    display: flex;
    gap: 12px;
    align-items: center;
  }

  .s-provider-btn {
    background: white;
    border: 1px solid #eee;
    padding: 6px 16px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 1.1rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
  }

  @media (max-width: 768px) {
    .s-review-grid { flex-direction: column; }
  }
/* </style> */

/* Feature a specific card (Asymmetry) */
@media (min-width: 768px) {
    .review-item.featured {
        grid-row: span 2;
        background: var(--tayfi-accent);
        padding: 50px 40px;
    }
    .review-item.featured .review-content {
        font-size: 20px;
    }
}

/* Mobile adjustments */
@media (max-width: 767px) {
    .review-item {
        border-radius: 30px;
        padding: 25px;
    }
    .main-title { font-size: 26px; }
}

  .s-payments-list {
  direction: rtl;
  max-width: 680px; /* reduced from 900px */
  margin: 16px auto;
  color: #333;
}


.s-payments-list {
  direction: rtl;
  max-width: 680px; /* reduced from 900px */
  margin: 16px auto;
  color: #333;
}

/* Top Features Grid */
.s-features-grid {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.s-feature-card {
  flex: 1;
  background-color: #f9f9f9;
  border-radius: 16px;
  padding: 18px 10px; /* reduced from 25px 15px */
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.s-feature-card img {
  width: 32px;   /* reduced from 40px */
  height: 32px;
  margin-bottom: 8px;
  color: #333;
}

.s-feature-card h3 {
  margin: 0;
  font-size: 0.95rem; /* reduced from 1.1rem */
  font-weight: 700;
}

.s-feature-card p {
  margin: 0;
  font-size: 0.78rem; /* reduced from 0.9rem */
  color: #777;
  line-height: 1.4;
}

/* Bottom Installment Banner */
.s-installment-banner {
  background-color: #f9f9f9;
  border-radius: 12px;
  padding: 14px 16px; /* reduced from 20px */
  text-align: center;
}

.s-installment-text {
  font-size: 0.95rem; /* reduced from 1.1rem */
  margin-bottom: 10px;
  font-weight: 500;
}

.s-installment-text span {
  font-weight: 800;
}

.s-logos-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.s-logo-box {
  background: white;
  padding: 6px 16px;
  border-radius: 4px;
  font-weight: bold;
  font-size: 1rem; /* reduced from 1.2rem */
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  display: flex;
  align-items: center;
}

.s-or-divider {
  font-size: 0.85rem;
  color: #666;
}

/* Mobile: keep 3-col layout, just tighten spacing & text */
@media (max-width: 480px) {
  .s-features-grid {
    gap: 6px;
  }

  .s-feature-card {
    padding: 12px 6px;
    border-radius: 12px;
  }

  .s-feature-card img {
    margin-bottom: 5px;
  }

  .s-feature-card h3 {
    font-size: 0.72rem;
  }

  .s-feature-card p {
    font-size: 0.65rem;
  }

  .s-installment-text {
    font-size: 0.82rem;
  }

  .bnpl-logo {
    width: 7rem;
  }
}




/****/
/* ── Option Cards ─────────────────────────── */

.s-product-options-thumbnails-wrapper {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.s-product-options-thumbnails-wrapper > div {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--color-white);
  border: 1.5px solid var(--color-border-light);
  border-radius: var(--radius-medium);
  padding: 12px 10px 14px;
  gap: 4px;
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  flex: 1;
  min-width: 0;
}

.s-product-options-thumbnails-wrapper > div:has(input:checked) {
  border-color: var(--color-primary);
}

.s-product-options-thumbnails-wrapper > div {
  overflow: clip
}

.s-product-options-thumbnails-wrapper div input[type=radio]:checked+label:before {
  opacity: 0 !important;
}

.s-product-options-thumbnails-wrapper p {
  font-size: 13px;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-secondary);
  margin: 6px 0 2px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

body .s-product-options-thumbnails-wrapper div input[type=radio]+label img {
    -o-object-fit: contain;
    object-fit: contain;
}

/* ── Injected by JS ───────────────────────── */

/* Discount badge */
.tsm-badge {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--color-primary);
  color: var(--color-white);
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  padding: 3px 9px;
  border-radius: 0 0 var(--radius-small) 0;
  border-top-right-radius: var(--radius-medium); /* RTL: top-left corner */
  letter-spacing: 0.3px;
  line-height: 1.5;
}

/* Sub-label */
.tsm-sub {
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-accent);
  text-align: center;
  width: 100%;
}

/* Price row */
.tsm-price-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-xs);
  margin-top: var(--space-2xs);
  width: 100%;
}

.tsm-price-row b {
  font-size: 15px;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.tsm-price-row s {
  font-size: 12px;
  color: var(--color-secondary);
  text-decoration: line-through;
  white-space: nowrap;
}

/* Make the label stretch to fill the entire card */
.s-product-options-thumbnails-wrapper label.go-to-slide {
  position: absolute;
  inset: 0;
  z-index: 0;
  cursor: pointer;
}

/* Lift content above the label so it's visible but non-blocking */
.s-product-options-thumbnails-wrapper img,
.s-product-options-thumbnails-wrapper p,
.tsm-badge,
.tsm-sub,
.tsm-price-row {
  position: relative;
  z-index: 1;
  pointer-events: none;
}

label.go-to-slide {
    background-color: #F1F0EC;
}

/* ============================================
   UTILITIES & OVERRIDES
   ============================================ */
section#about-3 {
	margin-top: calc(-1 * var(--space-lg));
}

.top-navbar {
    display: none;
}

header.store-header {
    padding-top: 1rem;
}

salla-product-options.s-product-options-wrapper.hydrated {
    padding: 0;
}

.s-product-options-thumbnails-wrapper > div {
    padding: 0;
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes brandScroll {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(var(--offset));
	}
}

@keyframes bannerMarquee {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(var(--offset));
	}
}