/** Shopify CDN: Minification failed

Line 19:51 Expected identifier but found whitespace
Line 19:53 Unexpected "{"
Line 19:63 Expected ":"
Line 20:24 Expected identifier but found whitespace
Line 20:26 Unexpected "{"
Line 20:36 Expected ":"
Line 23:23 Expected identifier but found whitespace
Line 23:25 Unexpected "{"
Line 23:35 Expected ":"
Line 24:17 Expected identifier but found whitespace
... and 81 more hidden warnings

**/


/* =============================================   KEMI Theme v2.0 - Beauty E-commerce   Brand: KEMI | Market: Egypt | Lang: Arabic (RTL)   Design: Premium Purple Palette   ============================================= *//* ----- CSS Custom Properties ----- */:root {
/* ---- Brand Core Colors ---- */  --color-primary: {{ settings.color_primary | default: '#B89CF6' }};
  --color-primary-hover: {{ settings.color_primary_hover | default: '#9C7AF2' }};
  --color-primary-light: #D4C4F8;

  --color-primary-dark: {{ settings.color_accent | default: '#7C5CE6' }};
  --color-accent: {{ settings.color_accent | default: '#7C5CE6' }};
  --color-secondary: {{ settings.color_secondary | default: '#2D1B69' }};
  --color-background: {{ settings.color_background | default: '#FCFAFF' }};
  --color-secondary-bg: {{ settings.color_secondary_bg | default: '#F4F0FF' }};
  --color-soft-pink: {{ settings.color_soft_pink | default: '#F8E8F4' }};
  --color-text: {{ settings.color_text | default: '#2B2B2B' }};
  --color-text-light: {{ settings.color_text_light | default: '#6D6D6D' }};
  --color-white: {{ settings.color_white | default: '#FFFFFF' }};
  --color-border: {{ settings.color_border | default: '#E8E4F2' }};
  --color-sale: {{ settings.color_sale | default: '#FF5A5F' }};
  --color-success: {{ settings.color_success | default: '#38A169' }};
  --color-success-bg: #E6F7E6;

  --color-error: {{ settings.color_error | default: '#FF5A5F' }};
  --color-warning: {{ settings.color_warning | default: '#F6AD55' }};

  /* ---- Section Background Colors ---- */  --color-section-hero-bg: {{ settings.color_section_hero_bg | default: '#FCFAFF' }};
  --color-section-hero-overlay: {{ settings.color_section_hero_overlay | default: '#2B2B2B' }};
  --color-section-featured-bg: {{ settings.color_section_featured_bg | default: '#FFFFFF' }};
  --color-section-best-sellers-bg: {{ settings.color_section_best_sellers_bg | default: '#F4F0FF' }};
  --color-section-bundles-bg: {{ settings.color_section_bundles_bg | default: '#F8E8F4' }};
  --color-section-trust-bg: {{ settings.color_section_trust_bg | default: '#FFFFFF' }};
  --color-section-testimonials-bg: {{ settings.color_section_testimonials_bg | default: '#F4F0FF' }};
  --color-section-faq-bg: {{ settings.color_section_faq_bg | default: '#FFFFFF' }};
  --color-section-about-bg: {{ settings.color_section_about_bg | default: '#FCFAFF' }};
  --color-section-contact-bg: {{ settings.color_section_contact_bg | default: '#FFFFFF' }};
  --color-section-blog-bg: {{ settings.color_section_blog_bg | default: '#F4F0FF' }};
  --color-section-footer-bg: {{ settings.color_section_footer_bg | default: '#2B2B2B' }};
  --color-section-divider: {{ settings.color_section_divider | default: '#E8E4F2' }};

  /* ---- Typography ---- */  --font-heading: 'Cairo', sans-serif;

  --font-body: 'Tajawal', sans-serif;

  --font-button: 'Cairo', sans-serif;

  /* ---- Layout ---- */  --page-width: {{ settings.page_width | default: '1200' }}

px;

  --gutter: 20px;

  --gutter-mobile: 16px;

  --header-height: 80px;

  --header-height-mobile: 64px;

  /* ---- Border Radius ---- */  --radius-sm: 8px;

  --radius-md: 12px;

  --radius-lg: 18px;

  --radius-xl: 24px;

  --radius-full: 50%;

  /* ---- Shadows ---- */  --shadow-sm: 0 1px 3px rgba(124, 92, 230, 0.06);

  --shadow-md: 0 4px 16px rgba(124, 92, 230, 0.1);

  --shadow-lg: 0 8px 32px rgba(124, 92, 230, 0.12);

  --shadow-xl: 0 20px 60px rgba(124, 92, 230, 0.15);

  /* ---- Card Shadows ---- */  --shadow-card: 0 2px 12px rgba(124, 92, 230, 0.06);

  --shadow-card-hover: 0 12px 32px rgba(124, 92, 230, 0.12);

  /* ---- Section Divider ---- */  --section-divider-height: 1px;

  --section-padding: clamp(48px, 6vw, 80px);

  --section-padding-mobile: clamp(36px, 4vw, 48px);

  /* ---- Z-Index Scale ---- */  --z-dropdown: 100;

  --z-sticky: 200;

  --z-overlay: 300;

  --z-modal: 400;

  --z-toast: 500;

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

  --transition-base: 300ms ease;

  --transition-slow: 500ms ease;}

/* ----- Reduced Motion ----- */@media (prefers-reduced-motion: reduce) {
*,  *::before,  *::after {
animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;

    scroll-behavior: auto !important;

  }

  html {
scroll-behavior: auto;

  }

  .hero__shape,  .hero__floating-element {
animation: none !important;

    transform: none !important;

  }}

/* ----- RTL Overrides ----- */.rtl {
direction: rtl;

  text-align: right;}

/* ---- Header RTL ---- */[dir="rtl"] .header__nav-list {
padding-right: 0;

 }

[dir="rtl"] .header__actions {
margin-inline-start: auto;

 }

[dir="rtl"] .header__language-dropdown {
left: auto;

 right: 0;

 }

[dir="rtl"] .header__language-option {
text-align: left;

 }

[dir="rtl"] .header__nav-link::after {
transform-origin: right center;

 }

[dir="rtl"] .header__dropdown {
right: auto;

 left: -12px;

 }

[dir="rtl"] .header__dropdown::before {
right: auto;

 left: 24px;

 }

/* Mobile nav slides from left in RTL */[dir="rtl"] .header__mobile-nav {
transform: translateX(-100%);

 left: 0;

 right: auto;

 }

[dir="rtl"] .header__mobile-nav.is-open {
transform: translateX(0);

 }

[dir="rtl"] .header__mobile-sublist {
padding-right: 20px;

 padding-left: 0;

 }

[dir="rtl"] .header__mobile-link:hover {
padding-right: 0;

 padding-left: 8px;

 }

[dir="rtl"] .header__mobile-overlay {
left: auto;

 right: 0;

 }

/* ---- Hero RTL ---- */[dir="rtl"] .hero__text-wrapper--left {
text-align: right;

 }

[dir="rtl"] .hero__trust {
justify-content: center;

 }

[dir="rtl"] .hero__shape--1 {
right: auto;

 left: -10%;

 }

[dir="rtl"] .hero__shape--2 {
left: auto;

 right: -15%;

 }

/* ---- Product Card RTL ---- */[dir="rtl"] .product-card__badge {
left: auto;

 right: 8px;

 }

[dir="rtl"] .product-card__quickview {
right: auto;

 left: 12px;

 }

[dir="rtl"] .product-card__wishlist {
right: 12px;

 left: auto;

 }

[dir="rtl"] .product-info__benefits {
padding-right: 0;

 }

[dir="rtl"] .product-description__spec-label {
text-align: right;

 }

/* ---- Cart Drawer RTL ---- */[dir="rtl"] .cart-drawer__inner {
left: auto;

 right: 0;

 transform: translateX(400px);

 border-left: none;

 border-right: 1px solid rgba(184, 156, 246, 0.2);

 }

[dir="rtl"] .cart-drawer__inner.is-open {
transform: translateX(0);

 }

[dir="rtl"] .cart-drawer__overlay {
left: auto;

 right: 0;

 }

[dir="rtl"] .cart-drawer__item.is-removing {
transform: translateX(-20px);

 }

[dir="rtl"] .cart-drawer__qty-btn:first-child {
border-radius: 0 8px 8px 0;

 }

[dir="rtl"] .cart-drawer__qty-btn:last-child {
border-radius: 8px 0 0 8px;

 }

/* ---- Cart Page RTL ---- */[dir="rtl"] .cart-page__item.is-removing {
transform: translateX(20px);

 }

[dir="rtl"] .cart-page__qty-btn:first-child {
border-radius: 0 8px 8px 0;

 }

[dir="rtl"] .cart-page__qty-btn:last-child {
border-radius: 8px 0 0 8px;

 }

[dir="rtl"] .cart-page__shipping-fill {
background: linear-gradient(270deg, var(--color-primary), var(--color-primary-hover));

 }

[dir="rtl"] .cart-page__shipping-pin {
transform: translateX(50%);

 }

/* ---- Collection / Filter RTL ---- */[dir="rtl"] .collection-grid__layout {
grid-template-columns: 1fr 280px;

 }

[dir="rtl"] .collection-grid__sidebar {
grid-column: 2;

 }

[dir="rtl"] .collection-grid__filters-title {
text-align: right;

 }

[dir="rtl"] .collection-grid__filters-close {
left: 16px;

 right: auto;

 }

/* ---- Footer RTL ---- */[dir="rtl"] .footer__newsletter .footer__submit {
left: 4px;

 right: auto;

 }

[dir="rtl"] .footer__link:hover {
transform: translateX(4px);

 }

[dir="rtl"] .footer__social-link {
margin-left: 0;

 margin-right: 8px;

 }

[dir="rtl"] .footer__bottom {
text-align: center;

 }

/* ---- Pagination RTL ---- */[dir="rtl"] .pagination__item--prev svg {
transform: rotate(180deg);

 }

[dir="rtl"] .pagination__item--next svg {
transform: rotate(180deg);

 }

[dir="rtl"] .pagination__item {
margin-right: 0;

 margin-left: 4px;

 }

/* ---- FAQ RTL ---- */[dir="rtl"] .faq__question svg {
margin-right: auto;

 margin-left: 0;

 }

/* ---- Testimonials RTL ---- */[dir="rtl"] .testimonials__stars {
justify-content: flex-start;

 }

/* ---- Toast / Notification RTL ---- */[dir="rtl"] .cart-toast {
left: 50%;

 transform: translateX(50%) translateY(20px);

 }

[dir="rtl"] .cart-toast.is-visible {
transform: translateX(50%) translateY(0);

 }

/* ---- Quick View Modal RTL ---- */[dir="rtl"] .quickview-modal__close {
right: auto;

 left: 16px;

 }

/* ---- Back to Top RTL ---- */[dir="rtl"] .back-to-top {
right: auto;

 left: 16px;

 }

/* ---- Announcement Bar RTL ---- */[dir="rtl"] .announcement-bar__close {
right: auto;

 left: 12px;

 }

/* ---- Search Overlay RTL ---- */[dir="rtl"] .search-overlay__form-icon {
left: auto;

 right: 0;

 }

[dir="rtl"] .search-overlay__input {
padding-right: 40px;

 padding-left: 100px;

 }

[dir="rtl"] .search-overlay__clear {
right: auto;

 left: 80px;

 }

[dir="rtl"] .search-overlay__submit {
right: auto;

 left: 8px;

 }

/* ---- Contact Form RTL ---- */[dir="rtl"] .contact-section__info-icon {
margin-right: 0;

 margin-left: 12px;

 }

/* ---- Product Page RTL ---- */[dir="rtl"] .product-gallery__thumb {
margin-right: 0;

 margin-left: 8px;

 }

[dir="rtl"] .product-form__qty-btn:first-child {
border-radius: 0 8px 8px 0;

 }

[dir="rtl"] .product-form__qty-btn:last-child {
border-radius: 8px 0 0 8px;

 }

/* ---- Bundles RTL ---- */[dir="rtl"] .bundle__item-check {
margin-right: 0;

 margin-left: 12px;

 }

/* ---- Customer Account RTL ---- */[dir="rtl"] .customer-account__order-number {
direction: ltr;

 text-align: right;

 }

[dir="rtl"] .customer-addresses__default-badge {
left: auto;

 right: 8px;

 }

/* ---- Checkout Page RTL ---- */[dir="rtl"] .checkout-page__step {
flex-direction: row;

 }

[dir="rtl"] .checkout-page__step-number {
margin-right: 0;

 margin-left: 8px;

 }

[dir="rtl"] .checkout-page__trust-icon {
margin-right: 0;

 margin-left: 6px;

 }

/* ---- Newsletter Popup RTL ---- */[dir="rtl"] .newsletter-popup__close {
right: auto;

 left: 12px;

 }

.visually-hidden {
position: absolute;

  width: 1px;

  height: 1px;

  padding: 0;

  margin: -1px;

  overflow: hidden;

  clip: rect(0,0,0,0);

  border: 0;}

/* ----- Reset & Base ----- */*, *::before, *::after {
box-sizing: border-box;

  margin: 0;

  padding: 0;}

html {
scroll-behavior: smooth;

  -webkit-text-size-adjust: 100%;}

body {
font-family: var(--font-body);

  font-size: 16px;

  line-height: 1.6;

  color: var(--color-text);

  background-color: var(--color-background);

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  overflow-x: hidden;}

body.drawer-open {
overflow: hidden;

  position: fixed;

  width: 100%;}

.main-content {
background-color: var(--color-background);

  min-height: 50vh;}

img {
max-width: 100%;

  height: auto;

  display: block;}

a {
color: inherit;

  text-decoration: none;}

button {
font-family: inherit;

  font-size: inherit;

  cursor: pointer;

  border: none;

  background: none;}

input, textarea, select {
font-family: inherit;

  font-size: inherit;}

ul, ol {
list-style: none;}

/* ----- Page Width ----- */.page-width {
max-width: var(--page-width);

  margin: 0 auto;

  padding: 0 var(--gutter);}

@media (max-width: 767px) {
.page-width {
padding: 0 var(--gutter-mobile);

  }}

/* ----- Typography ----- */h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);

  font-weight: 600;

  line-height: 1.3;}

h1, h2, h3 {
text-wrap: balance;}

body {
text-wrap: pretty;}

.section-header {
text-align: center;

  margin-bottom: 40px;}

.section-header__title {
font-size: clamp(1.5rem, 2.5vw, 2rem);

  font-weight: 700;

  color: var(--color-secondary, #2D1B69);

  margin-bottom: 8px;}

.section-header__subtext {
font-size: 16px;

  color: var(--color-text-light);

  max-width: 500px;

  margin: 0 auto;}

.section-header__divider {
display: flex;

  align-items: center;

  justify-content: center;

  gap: 12px;

  margin-top: 16px;}

.section-header__divider-line {
width: 40px;

  height: 1px;

  background: var(--color-primary);

  opacity: 0.5;}

.section-header__divider-dot {
width: 6px;

  height: 6px;

  border-radius: var(--radius-full);

  background: var(--color-primary);

  opacity: 0.7;}

@media (max-width: 767px) {
.section-header {
margin-bottom: 24px;

  }

  .section-header__title {
font-size: 1.5rem;

  }}

/* ----- Buttons ----- */.btn {
display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  padding: 14px 32px;

  border-radius: 18px;

  font-weight: 600;

  font-size: 15px;

  line-height: 1.2;

  text-align: center;

  font-family: var(--font-button);

  transition: all var(--transition-base);

  white-space: nowrap;

  cursor: pointer;}

.btn--primary {
background: linear-gradient(135deg, #B89CF6 0%, #7C5CE6 100%);

  color: var(--color-white);

  border: none;

  box-shadow: 0 4px 14px rgba(124, 92, 230, 0.25);}

.btn--primary:hover {
background: linear-gradient(135deg, #A07CE6 0%, #6B4AD4 100%);

  transform: translateY(-2px);

  box-shadow: 0 8px 24px rgba(124, 92, 230, 0.35);}

.btn--primary:active {
transform: translateY(0);

  box-shadow: 0 4px 14px rgba(124, 92, 230, 0.25);}

.btn--outline {
background: transparent;

  color: #7C5CE6;

  border: 2px solid rgba(124, 92, 230, 0.3);}

.btn--outline:hover {
border-color: #7C5CE6;

  color: #7C5CE6;

  background: rgba(124, 92, 230, 0.06);}

.btn--lg {
padding: 16px 36px;

  font-size: 17px;}

.btn--sm {
padding: 8px 16px;

  font-size: 13px;}

.btn--full {
width: 100%;}

.btn:disabled {
opacity: 0.5;

  cursor: not-allowed;

  transform: none;}

/* ----- Focus Styles ----- */:focus-visible {
outline: 2px solid var(--color-primary);

  outline-offset: 2px;

  border-radius: 4px;}

:focus:not(:focus-visible) {
outline: none;}

a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible {
outline: 2px solid var(--color-primary);

  outline-offset: 2px;

  border-radius: 4px;}

/* ----- Announcement Bar ----- */.announcement-bar {
background-color: var(--color-secondary);

  color: var(--color-white);

  text-align: center;

  padding: 10px 0;

  font-size: 14px;

  position: relative;}

.announcement-bar__wrapper {
display: flex;

  align-items: center;

  justify-content: center;}

.announcement-bar__link {
color: inherit;

  text-decoration: underline;}

.announcement-bar__close {
position: absolute;

  left: 16px;

  top: 50%;

  transform: translateY(-50%);

  color: var(--color-white);

  opacity: 0.7;

  transition: opacity var(--transition-fast);}

.announcement-bar__close:hover {
opacity: 1;}

/* ----- Header ----- */.header {
background: rgba(252, 250, 255, 0.93);

  backdrop-filter: blur(20px);

  -webkit-backdrop-filter: blur(20px);

  border-bottom: 1px solid var(--color-border);

  border-top: 3px solid var(--color-primary);

  position: relative;

  z-index: var(--z-sticky);

  box-shadow: 0 1px 4px rgba(0,0,0,0.04);

  transition: box-shadow var(--transition-base), background var(--transition-base);}

.header--sticky {
position: sticky;

  top: 0;}

.header--sticky.header--scrolled {
box-shadow: 0 4px 24px rgba(124, 92, 230, 0.1);

  background: rgba(255, 255, 255, 0.97);}

.header__wrapper {
display: flex;

  align-items: center;

  height: var(--header-height);

  gap: 28px;}

.header__logo {
flex-shrink: 0;}

.header__logo-text {
font-family: var(--font-heading);

  font-size: 28px;

  font-weight: 700;

  color: var(--color-primary-dark);

  letter-spacing: 2px;}

.header__logo img {
max-height: 50px;

  width: auto;}

.header__nav {
margin-inline-end: auto;}

.header__nav-list {
display: flex;

  gap: 28px;}

.header__nav-link {
font-weight: 600;

  font-size: 14px;

  color: var(--color-text);

  transition: color var(--transition-fast);

  position: relative;

  padding: 8px 4px;

  letter-spacing: 0.03em;}

.header__nav-link:hover {
color: #7C5CE6;}

.header__nav-link.active {
color: #7C5CE6;}

.header__nav-link::after {
content: '';

  position: absolute;

  bottom: 0;

  left: 4px;

  right: 4px;

  height: 2px;

  background: var(--color-primary);

  transform: scaleX(0);

  transform-origin: right center;

  transition: transform var(--transition-base);}

.header__nav-link:hover::after,.header__nav-link.active::after {
transform: scaleX(1);}

.has-dropdown {
position: relative;}

.header__dropdown {
position: absolute;

  top: calc(100% + 8px);

  right: -12px;

  background: #FFFFFF;

  border: 1px solid #E5E7EB;

  border-radius: var(--radius-lg);

  padding: 8px;

  min-width: 220px;

  opacity: 0;

  visibility: hidden;

  transform: translateY(4px) scale(0.96);

  transition: all var(--transition-base);

  box-shadow: 0 10px 25px rgba(0,0,0,0.1);

  z-index: var(--z-dropdown);}

.has-dropdown:hover .header__dropdown {
opacity: 1;

  visibility: visible;

  transform: translateY(0) scale(1);}

.header__dropdown-link {
display: block;

  padding: 10px 16px;

  font-size: 14px;

  border-radius: var(--radius-sm);

  transition: background var(--transition-fast), color var(--transition-fast);}

.header__dropdown-link:hover {
background: var(--color-secondary-bg);

  color: #7C5CE6;}

.header__actions {
display: flex;

  align-items: center;

  gap: 12px;

  margin-inline-start: auto;}

/* ----- Language Switcher ----- */.header__language-switcher {
position: relative;

  display: flex;

  align-items: center;}

.header__language-btn {
display: flex;

  align-items: center;

  gap: 6px;

  padding: 8px 12px;

  border-radius: var(--radius-md);

  background: transparent;

  color: var(--color-text);

  font-size: 14px;

  font-weight: 500;

  cursor: pointer;

  transition: background var(--transition-fast), color var(--transition-fast);}

.header__language-btn svg {
color: var(--color-primary);}

.header__language-btn:hover {
background: var(--color-secondary-bg);

  color: var(--color-primary);}

.header__language-dropdown {
position: absolute;

  top: 100%;

  left: 0;

  min-width: 120px;

  background: var(--color-white);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-md);

  box-shadow: var(--shadow-md);

  opacity: 0;

  visibility: hidden;

  transform: translateY(4px);

  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);

  z-index: var(--z-dropdown);}

.header__language-switcher:hover .header__language-dropdown,.header__language-switcher:focus-within .header__language-dropdown {
opacity: 1;

  visibility: visible;

  transform: translateY(0);}

.header__language-option {
display: block;

  width: 100%;

  padding: 10px 16px;

  text-align: right;

  background: transparent;

  color: var(--color-text);

  font-size: 14px;

  cursor: pointer;

  transition: background var(--transition-fast), color var(--transition-fast);

  border: none;}

.header__language-option:hover,.header__language-option.is-active {
background: var(--color-secondary-bg);

  color: var(--color-primary);

  font-weight: 600;}

/* RTL overrides for language switcher */.rtl .header__language-dropdown {
left: auto;

  right: 0;}

.rtl .header__language-option {
text-align: left;}

/* RTL nav link underline grows from left (reading direction) */.rtl .header__nav-link::after {
transform-origin: left center;}

/* RTL dropdown aligned to the left (forward direction) */.rtl .header__dropdown {
right: auto;

  left: -12px;}

.header__icon {
display: flex;

  align-items: center;

  justify-content: center;

  width: 40px;

  height: 40px;

  border-radius: var(--radius-full);

  color: var(--color-text);

  transition: all var(--transition-fast);

  position: relative;}

.header__icon:hover {
background: rgba(124, 92, 230, 0.08);

  color: #7C5CE6;

  transform: scale(1.05);}

.header__cart-count {
position: absolute;

  top: 2px;

  right: 2px;

  background: var(--color-primary-dark);

  color: var(--color-white);

  font-size: 10px;

  font-weight: 700;

  width: 20px;

  height: 20px;

  border-radius: var(--radius-full);

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: 0 2px 6px rgba(124, 92, 230, 0.3);}

/* Cart icon always in brand color */.header__cart-btn {
color: var(--color-primary-dark);}

.header__menu-toggle {
display: none;

  width: 40px;

  height: 40px;

  align-items: center;

  justify-content: center;

  border-radius: var(--radius-sm);

  transition: background var(--transition-fast);}

.header__menu-toggle:hover {
background: var(--color-secondary-bg);}

.header__menu-icon {
display: flex;

  flex-direction: column;

  gap: 5px;}

.header__menu-icon span {
display: block;

  width: 22px;

  height: 2px;

  background: #2B2B2B;

  border-radius: 2px;

  transition: all var(--transition-fast);}

/* Hamburger → X animation */.header__menu-toggle[aria-expanded="true"] .header__menu-icon span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);}

.header__menu-toggle[aria-expanded="true"] .header__menu-icon span:nth-child(2) {
opacity: 0;}

.header__menu-toggle[aria-expanded="true"] .header__menu-icon span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px);}

/* Mobile Nav */.header__mobile-nav {
position: fixed;

  top: 0;

  right: 0;

  width: 320px;

  max-width: 85vw;

  height: 100vh;

  background: #FFFFFF;

  z-index: var(--z-overlay);

  padding: 20px;

  display: none;

  transform: translateX(100%);

  transition: transform 350ms cubic-bezier(0.4, 0, 0.2, 1);

  overflow-y: auto;}

.header__mobile-nav.is-open {
display: block;

  transform: translateX(0);}

.rtl .header__mobile-nav {
right: auto;

  left: 0;

  transform: translateX(-100%);

  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;}

.rtl .header__mobile-nav.is-open {
transform: translateX(0);}

.header__mobile-header {
display: flex;

  align-items: center;

  justify-content: space-between;

  margin: -20px -20px 24px;

  padding: 20px 20px 16px;

  background: #FFFFFF;

  border-bottom: 1px solid #E5E7EB;

  border-radius: 0 0 var(--radius-lg) var(--radius-lg);}

.header__mobile-title {
font-family: var(--font-heading);

  font-weight: 700;

  font-size: 18px;

  color: #2D1B69;}

.header__mobile-close {
display: flex;

  align-items: center;

  justify-content: center;

  width: 36px;

  height: 36px;

  border-radius: var(--radius-full);

  color: var(--color-primary-dark);

  transition: background var(--transition-fast), transform var(--transition-fast);}

.header__mobile-close:hover {
background: rgba(124, 92, 230, 0.1);

  transform: rotate(90deg);}

.header__mobile-list {
display: flex;

  flex-direction: column;

  gap: 4px;}

.header__mobile-link {
display: block;

  padding: 14px 0;

  font-weight: 500;

  font-size: 15px;

  border-bottom: 1px solid var(--color-border);

  transition: color var(--transition-fast), padding-right var(--transition-fast);}

.header__mobile-link:hover {
color: var(--color-primary);

  padding-right: 8px;}

.rtl .header__mobile-link:hover {
padding-right: 0;

  padding-left: 8px;}

.header__mobile-item.has-children {
display: flex;

  flex-wrap: wrap;

  align-items: center;

  justify-content: space-between;}

.header__mobile-toggle {
padding: 12px;

  border-radius: var(--radius-sm);

  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);}

.header__mobile-toggle:hover {
background: var(--color-secondary-bg);

  color: var(--color-primary);}

.header__mobile-toggle svg {
transition: transform var(--transition-fast);}

.header__mobile-toggle.is-open svg {
transform: rotate(90deg);}

.header__mobile-sublist {
width: 100%;

  display: none;

  padding-right: 16px;}

.header__mobile-sublist.is-open {
display: block;}

.header__mobile-sublink {
display: block;

  padding: 8px 0;

  font-size: 14px;

  color: var(--color-text-light);

  transition: color var(--transition-fast);}

.header__mobile-sublink:hover {
color: var(--color-primary);}

.header__overlay {
position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(0,0,0,0.4);

  z-index: calc(var(--z-overlay) - 1);

  opacity: 0;

  pointer-events: none;

  transition: opacity var(--transition-base);}

.header__overlay.is-open {
opacity: 1;

  pointer-events: auto;}

@media (max-width: 1023px) {
.header__nav {
display: none;

 }

  .header__menu-toggle {
display: flex;

 }

  .header__wrapper {
height: var(--header-height-mobile);

 gap: 12px;

 }

  .header__logo-text {
font-size: 22px;

 }

  .header__language-switcher {
display: none;

 }

  .header__actions {
gap: 4px;

 }}

/* ----- Section Divider Base ----- */.section-divider {
height: var(--section-divider-height);

  background: var(--color-section-divider);

  opacity: 0.4;}

/* ----- Hero Section ----- */.hero {
position: relative;

  height: var(--hero-height, 100vh);

  min-height: var(--hero-min-height, 500px);

  overflow: hidden;

  background-color: #FCFAFF;}

.hero__slide {
position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;}

.hero__image-wrapper,.hero__video-wrapper {
position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;}

.hero__image {
width: 100%;

  height: 100%;

  object-fit: cover;}

.hero__video {
width: 100%;

  height: 100%;

  object-fit: cover;}

.hero__placeholder {
position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  overflow: hidden;}

.hero__decorative-shapes {
position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  pointer-events: none;

  overflow: hidden;

  z-index: 0;}

.hero__shape {
position: absolute;}

.hero__shape--1 {
top: -10%;

  right: -5%;

  width: 300px;

  height: 300px;}

.hero__shape--2 {
bottom: -8%;

  left: -8%;

  width: 200px;

  height: 200px;}

.hero__shape--3 {
top: 50%;

  left: 15%;

  width: 120px;

  height: 120px;

  animation: heroShapeFloat 6s ease-in-out infinite;}

@keyframes heroShapeFloat {
0%, 100% {
transform: rotate(45deg) translateY(0);

 }

  50% {
transform: rotate(45deg) translateY(-15px);

 }}

@media (max-width: 767px) {
.hero__shape--1 {
width: 180px;

 height: 180px;

 top: -5%;

 right: -10%;

 }

  .hero__shape--2 {
width: 120px;

 height: 120px;

 bottom: -5%;

 left: -15%;

 }

  .hero__shape--3 {
display: none;

 }}

.hero__overlay {
position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: var(--overlay-color, var(--color-section-hero-overlay));

  opacity: var(--overlay-opacity, 0.3);}

.hero__content {
position: relative;

  z-index: 2;

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;}

.hero__text-wrapper {
max-width: 700px;

  text-align: center;}

.hero__text-wrapper--center {
text-align: center;

 }

.hero__text-wrapper--left {
text-align: left;

 }

.hero__subheading {
display: inline-block;

  font-size: 14px;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 2px;

  color: var(--color-primary);

  background: rgba(255,255,255,0.9);

  padding: 6px 16px;

  border-radius: 20px;

  margin-bottom: 16px;}

.hero__heading {
font-size: clamp(2rem, 5vw, 3.25rem);

  font-weight: 800;

  color: var(--color-white);

  line-height: 1.15;

  margin-bottom: 16px;

  text-shadow: 0 2px 10px rgba(0,0,0,0.3);

  text-wrap: balance;}

.hero__text {
font-size: 18px;

  color: rgba(255,255,255,0.9);

  margin-bottom: 32px;

  line-height: 1.6;}

.hero__actions {
display: flex;

  gap: 16px;

  justify-content: center;

  flex-wrap: wrap;}

.hero__btn--secondary {
border-color: var(--color-white);

  color: var(--color-white);}

.hero__btn--secondary:hover {
background: rgba(255,255,255,0.15);

  border-color: var(--color-white);

  color: var(--color-white);}

.hero__trust {
display: flex;

  justify-content: center;

  gap: 24px;

  margin-top: 32px;

  flex-wrap: wrap;}

.hero__trust-item {
display: flex;

  align-items: center;

  gap: 6px;

  font-size: 14px;

  color: rgba(255,255,255,0.85);}

.hero__trust-item svg {
color: var(--color-primary);

  width: 14px;

  height: 14px;}

@media (max-width: 767px) {
.hero {
min-height: 85vh;

 }

  .hero__heading {
font-size: 2rem;

 }

  .hero__text {
font-size: 15px;

 }

  .hero__subheading {
font-size: 12px;

 }

  .hero__actions {
flex-direction: column;

 align-items: center;

 }

  .hero__btn {
width: 100%;

 max-width: 280px;

 }

  .hero__trust {
gap: 16px;

 }

  .hero__trust-item {
font-size: 12px;

 }

    /* Fix hero shapes overflow on mobile */  .hero__shape--1 {
right: -15%;

 }

  .hero__shape--2 {
left: -20%;

 }}

/* ----- Featured Categories ----- */.featured-categories {
padding: var(--section-padding) 0;

  background-color: #FFFFFF;

  position: relative;}

.featured-categories::after {
content: '';

  position: absolute;

  bottom: 0;

  left: 10%;

  right: 10%;

  height: var(--section-divider-height);

  background: var(--color-section-divider);

  opacity: 0.3;}

.featured-categories__grid {
display: grid;

  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

  gap: 24px;}

.featured-categories__card {
position: relative;

  border-radius: var(--radius-lg);

  overflow: hidden;

  aspect-ratio: 3/4;

  display: flex;

  align-items: flex-end;

  transition: transform var(--transition-base), box-shadow var(--transition-base);}

.featured-categories__card:hover {
transform: translateY(-4px);

  box-shadow: var(--shadow-lg);}

.featured-categories__image-wrapper {
position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;}

.featured-categories__image {
width: 100%;

  height: 100%;

  object-fit: cover;}

.featured-categories__placeholder {
width: 100%;

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  position: relative;

  overflow: hidden;}

.featured-categories__content {
position: relative;

  z-index: 2;

  padding: 24px;

  width: 100%;

  background: linear-gradient(transparent, rgba(0,0,0,0.7));}

.featured-categories__title {
color: var(--color-white);

  font-size: clamp(1.125rem, 2vw, 1.375rem);

  font-weight: 700;

  margin-bottom: 4px;

  text-wrap: balance;}

.featured-categories__description {
color: rgba(255,255,255,0.8);

  font-size: 14px;

  margin-bottom: 12px;}

.featured-categories__cta {
display: inline-flex;

  align-items: center;

  gap: 6px;

  color: var(--color-primary);

  font-weight: 600;

  font-size: 14px;

  transition: gap var(--transition-base);}

.featured-categories__cta::after {
content: '←';}

.featured-categories__card:hover .featured-categories__cta {
gap: 10px;}

@media (max-width: 767px) {
.featured-categories {
padding: var(--section-padding-mobile) 0;

 }

  .featured-categories__grid {
grid-template-columns: repeat(2, 1fr);

 gap: 16px;

 }}

/* ----- Product Grid / Cards ----- */.product-grid {
display: grid;

  gap: 20px;}

.product-grid--2-cols {
grid-template-columns: repeat(2, 1fr);

 }

.product-grid--3-cols {
grid-template-columns: repeat(3, 1fr);

 }

.product-grid--4-cols {
grid-template-columns: repeat(4, 1fr);

 }

@media (max-width: 1023px) {
.product-grid--4-cols {
grid-template-columns: repeat(3, 1fr);

 }

  .product-grid--3-cols {
grid-template-columns: repeat(2, 1fr);

 }}

@media (max-width: 767px) {
.product-grid--4-cols,  .product-grid--3-cols,  .product-grid--2-cols {
grid-template-columns: repeat(2, 1fr);

    gap: 12px;

  }}

.product-card {
background: var(--color-white);

  border-radius: var(--radius-md);

  overflow: hidden;

  transition: transform var(--transition-base), box-shadow var(--transition-base);

  display: flex;

  flex-direction: column;

  box-shadow: var(--shadow-card);

  border: 1px solid rgba(184, 156, 246, 0.12);}

.product-card:hover {
transform: translateY(-4px);

  box-shadow: 0 12px 32px rgba(124, 92, 230, 0.12);

  border-color: rgba(184, 156, 246, 0.25);}

.product-card__image-wrapper {
position: relative;

  aspect-ratio: 1;

  overflow: hidden;

  background: var(--color-background);}

.product-card__image {
position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  object-fit: contain;

  padding: 8px;

  transition: transform var(--transition-slow);}

.product-card:hover .product-card__image {
transform: scale(1.05);}

.product-card__image-hover {
position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  opacity: 0;

  transition: opacity var(--transition-base);}

.product-card:hover .product-card__image-hover {
opacity: 1;}

.product-card__placeholder {
width: 100%;

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  background: linear-gradient(135deg, #F4F0FF 0%, #D4C4F8 50%, #FCFAFF 100%);

  position: relative;

  overflow: hidden;}

.product-card__placeholder::before {
content: '';

  position: absolute;

  top: -30%;

  right: -20%;

  width: 60%;

  height: 60%;

  background: radial-gradient(circle, rgba(184, 156, 246, 0.2) 0%, transparent 60%);

  border-radius: 50%;

  pointer-events: none;}

.product-card__placeholder::after {
content: '';

  position: absolute;

  bottom: -20%;

  left: -15%;

  width: 50%;

  height: 50%;

  background: radial-gradient(circle, rgba(124, 92, 230, 0.15) 0%, transparent 50%);

  border-radius: 50%;

  pointer-events: none;}

.product-card__placeholder-svg {
width: 55%;

  height: 55%;

  position: relative;

  z-index: 1;

  mix-blend-mode: multiply;

  opacity: 0.6;}

.product-card__wishlist {
position: absolute;

  top: 8px;

  left: 8px;

  z-index: 3;

  width: 36px;

  height: 36px;

  border-radius: var(--radius-full);

  background: var(--color-white);

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: var(--shadow-sm);

  color: var(--color-text-light);

  transition: all var(--transition-fast);}

.product-card__wishlist:hover {
color: var(--color-sale);

  box-shadow: var(--shadow-md);

  transform: scale(1.1);}

.product-card__wishlist.is-active {
color: var(--color-sale);

  fill: var(--color-sale);}

.product-card__wishlist.is-active svg {
fill: var(--color-sale);}

.product-card__badge {
position: absolute;

  top: 8px;

  right: 8px;

  padding: 4px 10px;

  border-radius: 4px;

  font-size: 12px;

  font-weight: 700;

  z-index: 2;}

.product-card__badge--sale {
background: var(--color-sale);

  color: var(--color-white);}

.product-card__badge--sold-out {
background: var(--color-text);

  color: var(--color-white);}

.product-card__info {
padding: 14px 14px 10px;

  flex: 1;

  display: flex;

  flex-direction: column;

  gap: 6px;}

.product-card__title {
font-size: 14px;

  font-weight: 600;

  color: var(--color-secondary, #2D1B69);

  line-height: 1.4;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

  transition: color var(--transition-fast);}

.product-card__title:hover {
color: #7C5CE6;}

.product-card__add-to-cart {
margin: 0 14px 14px;

  border-radius: 10px;

  padding: 10px 16px !important;

  font-size: 13px !important;

  font-weight: 700 !important;

  background: linear-gradient(135deg, #B89CF6 0%, #7C5CE6 100%) !important;

  border: none !important;

  color: #FFFFFF !important;

  box-shadow: 0 3px 10px rgba(124, 92, 230, 0.25) !important;

  transition: all var(--transition-fast) !important;}

.product-card__add-to-cart:hover {
transform: translateY(-1px) !important;

  box-shadow: 0 5px 16px rgba(124, 92, 230, 0.35) !important;}

.product-card__add-to-cart.is-added {
background: #38A169 !important;

  box-shadow: 0 3px 10px rgba(56, 161, 105, 0.3) !important;}

.product-card__buy-now {
margin: 0 14px 14px;

  border-radius: 10px;

  padding: 10px 16px !important;

  font-size: 13px !important;

  font-weight: 700 !important;

  background: linear-gradient(135deg, #D4A574 0%, #B8845A 100%) !important;

  border: none !important;

  color: #FFFFFF !important;

  box-shadow: 0 3px 10px rgba(184, 132, 90, 0.25) !important;

  transition: all var(--transition-fast) !important;}

.product-card__buy-now:hover {
transform: translateY(-1px) !important;

  box-shadow: 0 5px 16px rgba(184, 132, 90, 0.35) !important;}

.product-card__buy-now:disabled {
opacity: 0.5 !important;

  cursor: not-allowed !important;

  transform: none !important;

  box-shadow: none !important;}

/* ----- Product Price ----- */.product-price {
display: flex;

  align-items: center;

  gap: 8px;

  flex-wrap: wrap;}

.product-price__current {
font-size: 16px;

  font-weight: 700;

  color: var(--color-text);}

.product-price__current--sale {
color: var(--color-sale);}

.product-price__compare {
font-size: 13px;

  color: var(--color-text-light);

  text-decoration: line-through;}

.product-price__free {
color: var(--color-success);

  font-weight: 600;}

/* ----- Best Sellers ----- */.best-sellers {
padding: var(--section-padding) 0;

  background-color: #F4F0FF;

  position: relative;}

.best-sellers__cta {
text-align: center;

  margin-top: 40px;}

@media (max-width: 767px) {
.best-sellers {
padding: var(--section-padding-mobile) 0;

 }}

/* ----- Trust Badges ----- */.trust-badges {
padding: var(--section-padding) 0;

  background-color: #FFFFFF;}

.trust-badges__grid {
display: grid;

  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

  gap: 32px;

  text-align: center;}

.trust-badges__item {
padding: 32px 24px;

  background: var(--color-white);

  border-radius: var(--radius-lg);

  transition: transform var(--transition-base), box-shadow var(--transition-base);

  box-shadow: 0 1px 4px rgba(0,0,0,0.04);}

.trust-badges__item:hover {
transform: translateY(-2px);

  box-shadow: var(--shadow-card-hover);}

.trust-badges__icon {
width: 64px;

  height: 64px;

  margin: 0 auto 16px;

  display: flex;

  align-items: center;

  justify-content: center;

  background: var(--color-background);

  border-radius: var(--radius-full);

  color: var(--color-primary);}

.trust-badges__title {
font-size: clamp(1rem, 1.5vw, 1.125rem);

  font-weight: 700;

  margin-bottom: 8px;

  text-wrap: balance;}

.trust-badges__text {
font-size: 14px;

  color: var(--color-text-light);

  line-height: 1.6;}

@media (max-width: 767px) {
.trust-badges {
padding: var(--section-padding-mobile) 0;

 }

  .trust-badges__grid {
grid-template-columns: repeat(2, 1fr);

 gap: 16px;

 }}

/* ----- Testimonials ----- */.testimonials {
padding: var(--section-padding) 0;

  background-color: #F4F0FF;

  position: relative;}

.testimonials::after {
content: '';

  position: absolute;

  bottom: 0;

  left: 10%;

  right: 10%;

  height: var(--section-divider-height);

  background: var(--color-section-divider);

  opacity: 0.3;}

.testimonials__grid {
display: grid;

  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

  gap: 24px;}

.testimonials__card {
background: var(--color-white);

  border-radius: var(--radius-lg);

  padding: 28px;

  transition: transform var(--transition-base), box-shadow var(--transition-base);

  box-shadow: var(--shadow-card);}

.testimonials__card:hover {
transform: translateY(-2px);

  box-shadow: var(--shadow-card-hover);}

.testimonials__stars {
display: flex;

  gap: 4px;

  margin-bottom: 16px;}

.testimonials__text {
font-size: 15px;

  line-height: 1.7;

  color: var(--color-text);

  margin-bottom: 20px;

  font-style: italic;}

.testimonials__author {
display: flex;

  align-items: center;

  gap: 12px;}

.testimonials__author-image {
width: 44px;

  height: 44px;

  border-radius: var(--radius-full);

  object-fit: cover;}

.testimonials__author-name {
font-weight: 600;

  font-size: 14px;

  font-style: normal;

  display: block;}

.testimonials__author-title {
font-size: 12px;

  color: var(--color-text-light);}

@media (max-width: 767px) {
.testimonials {
padding: var(--section-padding-mobile) 0;

 }}

/* ----- Footer ----- */.footer {
background: linear-gradient(180deg, #1A1A2E 0%, #111122 100%);

  color: rgba(255,255,255,0.85);

  padding: 64px 0 0;

  position: relative;

  overflow: hidden;}

.footer::before {
content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 3px;

  background: linear-gradient(90deg, #7C5CE6, #B89CF6, #7C5CE6);

  background-size: 200% 100%;

  animation: shimmer 4s ease-in-out infinite;}

@keyframes shimmer {
0%, 100% {
background-position: 0% 50%;

 }

  50% {
background-position: 100% 50%;

 }}

.footer__grid {
display: grid;

  grid-template-columns: 1.5fr 1fr 1fr 1.5fr;

  gap: 40px;

  padding-bottom: 40px;

  border-bottom: 1px solid rgba(184, 156, 246, 0.12);}

.footer__heading {
font-size: 16px;

  font-weight: 700;

  color: #B89CF6;

  margin-bottom: 20px;

  letter-spacing: 0.5px;}

.footer__heading::after {
content: '';

  display: block;

  width: 30px;

  height: 2px;

  background: linear-gradient(90deg, #B89CF6, transparent);

  margin-top: 8px;

  border-radius: 2px;}

.footer__logo {
max-width: 120px;

  margin-bottom: 12px;}

.footer__text {
font-size: 14px;

  line-height: 1.7;

  opacity: 0.75;

  margin-bottom: 16px;}

.footer__list {
display: flex;

  flex-direction: column;

  gap: 10px;}

.footer__link {
font-size: 14px;

  opacity: 0.75;

  transition: all var(--transition-fast);

  padding: 2px 0;

  display: inline-block;}

.footer__link:hover {
opacity: 1;

  color: #B89CF6;

  transform: translateX(-4px);}

[dir="rtl"] .footer__link:hover {
transform: translateX(4px);}

.footer__contact {
display: flex;

  flex-direction: column;

  gap: 14px;}

.footer__contact-item {
display: flex;

  align-items: center;

  gap: 10px;

  font-size: 14px;

  opacity: 0.8;}

.footer__contact-item svg {
flex-shrink: 0;

  color: #B89CF6;

  width: 18px;

  height: 18px;}

.footer__contact-item a:hover {
opacity: 1;

  color: #B89CF6;}

.footer__social {
margin-top: 16px;}

.footer__social-label {
display: block;

  font-size: 13px;

  opacity: 0.7;

  margin-bottom: 12px;}

.footer__social-icons {
display: flex;

  gap: 12px;}

.footer__social-icons a {
width: 38px;

  height: 38px;

  display: flex;

  align-items: center;

  justify-content: center;

  background: rgba(255,255,255,0.06);

  border-radius: var(--radius-full);

  color: var(--color-white);

  transition: all var(--transition-fast);

  border: 1px solid rgba(255,255,255,0.08);}

.footer__social-icons a:hover {
background: linear-gradient(135deg, #7C5CE6, #B89CF6);

  border-color: transparent;

  transform: translateY(-2px);

  box-shadow: 0 4px 12px rgba(124, 92, 230, 0.3);}

.footer__newsletter {
display: flex;

  gap: 8px;}

.footer__input {
flex: 1;

  padding: 12px 16px;

  border: 1px solid rgba(184, 156, 246, 0.2);

  border-radius: 10px;

  background: rgba(255,255,255,0.05);

  color: var(--color-white);

  font-size: 14px;

  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);}

.footer__input:focus {
outline: none;

  border-color: #B89CF6;

  box-shadow: 0 0 0 3px rgba(184, 156, 246, 0.15);}

.footer__input::placeholder {
color: rgba(255,255,255,0.4);}

.footer__submit {
white-space: nowrap;

  border-radius: 10px !important;

  padding: 12px 20px !important;

  background: linear-gradient(135deg, #B89CF6, #7C5CE6) !important;

  color: #FFFFFF !important;

  border: none !important;

  font-weight: 700;}

.footer__submit:hover {
box-shadow: 0 4px 16px rgba(124, 92, 230, 0.4) !important;

  transform: translateY(-1px);}

.footer__success {
color: #4ADE80;

  font-size: 14px;}

.footer__bottom {
display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 20px 0;

  font-size: 13px;

  opacity: 0.6;}

.footer__payment {
display: flex;

  align-items: center;

  gap: 12px;}

.footer__payment-label {
font-size: 12px;}

.footer__payment-icons {
display: flex;

  gap: 8px;}

.footer__payment-icons svg {
color: rgba(255,255,255,0.5);

  transition: color var(--transition-fast);}

.footer__payment-icons svg:hover {
color: #B89CF6;}

@media (max-width: 1023px) {
.footer__grid {
grid-template-columns: repeat(2, 1fr);

 gap: 32px;

 }}

@media (max-width: 767px) {
.footer {
padding: 40px 0 0;

 }

  .footer__grid {
grid-template-columns: 1fr;

 gap: 24px;

 }

  .footer__bottom {
flex-direction: column;

 gap: 12px;

 text-align: center;

 }}

/* ----- Product Gallery ----- */.product-gallery {
position: sticky;

  top: calc(var(--header-height) + 20px);}

.product-gallery__featured {
border-radius: var(--radius-md);

  overflow: hidden;

  margin-bottom: 12px;}

.product-gallery__media-wrapper {
display: none;

  aspect-ratio: 1;

  background: var(--color-background);}

.product-gallery__media-wrapper.is-active {
display: block;}

.product-gallery__media {
width: 100%;

  height: 100%;

  object-fit: contain;

  padding: 12px;}

.product-gallery__thumbs {
display: flex;

  gap: 8px;

  overflow-x: auto;

  padding-bottom: 4px;}

.product-gallery__thumb {
width: 72px;

  height: 72px;

  border-radius: var(--radius-sm);

  overflow: hidden;

  border: 2px solid transparent;

  transition: border-color var(--transition-fast);

  flex-shrink: 0;}

.product-gallery__thumb.is-active {
border-color: var(--color-primary);}

.product-gallery__thumb-image {
width: 100%;

  height: 100%;

  object-fit: cover;}

.product-gallery__placeholder {
aspect-ratio: 1;

  background: var(--color-background);

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: var(--radius-md);}

.product-gallery__placeholder-svg {
width: 60%;

  height: 60%;

  color: var(--color-border);}

/* ----- Product Info ----- */.product-info {
padding: 0 20px;}

.product-info__badges {
display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-bottom: 16px;}

.badge {
display: inline-flex;

  align-items: center;

  gap: 4px;

  padding: 4px 10px;

  font-size: 12px;

  font-weight: 600;

  border-radius: 4px;}

.badge--cod {
background: #E8F5E9;

  color: #2E7D32;}

.badge--shipping {
background: #E3F2FD;

  color: #1565C0;}

.badge--guarantee {
background: #FFF3E0;

  color: #E65100;}

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

  color: var(--color-white);}

.product-info__title {
font-size: 28px;

  font-weight: 700;

  line-height: 1.3;

  margin-bottom: 12px;}

.product-info__price {
display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 20px;}

.product-info__price-current {
font-size: 28px;

  font-weight: 800;

  color: var(--color-text);}

.product-info__price-compare {
font-size: 18px;

  color: var(--color-text-light);

  text-decoration: line-through;}

.product-info__benefits {
display: flex;

  flex-direction: column;

  gap: 8px;

  margin-bottom: 24px;

  padding: 16px;

  background: var(--color-background);

  border-radius: var(--radius-md);}

.product-info__benefit {
display: flex;

  align-items: center;

  gap: 8px;

  font-size: 14px;}

.product-info__benefit svg {
color: var(--color-success);

  flex-shrink: 0;}

.product-info__variants {
margin-bottom: 24px;}

.product-info__option {
margin-bottom: 12px;}

.product-info__option-label {
display: block;

  font-size: 14px;

  font-weight: 600;

  margin-bottom: 8px;}

.product-info__option-values {
display: flex;

  flex-wrap: wrap;

  gap: 8px;}

.product-info__option-btn {
padding: 8px 20px;

  border: 2px solid var(--color-border);

  border-radius: var(--radius-sm);

  font-size: 14px;

  background: var(--color-white);

  transition: all var(--transition-fast);}

.product-info__option-btn:hover,.product-info__option-btn.is-active {
border-color: var(--color-primary);

  background: var(--color-primary);

  color: var(--color-white);}

.product-info__actions {
display: flex;

  gap: 16px;

  margin-bottom: 16px;}

.product-info__quantity {
flex-shrink: 0;}

.product-info__quantity label {
display: block;

  font-size: 13px;

  font-weight: 600;

  margin-bottom: 6px;}

.product-info__qty-selector {
display: flex;

  align-items: center;

  border: 2px solid var(--color-border);

  border-radius: var(--radius-sm);

  overflow: hidden;}

.product-info__qty-btn {
width: 40px;

  height: 44px;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: background var(--transition-fast);}

.product-info__qty-btn:hover {
background: var(--color-background);}

.product-info__qty-input {
width: 48px;

  height: 44px;

  text-align: center;

  border: none;

  border-left: 2px solid var(--color-border);

  border-right: 2px solid var(--color-border);

  font-weight: 600;

  -moz-appearance: textfield;}

.product-info__qty-input::-webkit-outer-spin-button,.product-info__qty-input::-webkit-inner-spin-button {
-webkit-appearance: none;}

.product-info__submit {
flex: 1;

  gap: 8px;}

.product-info__payment-badges {
text-align: center;

  padding: 16px;

  border-top: 1px solid var(--color-border);}

.product-info__payment-badges span {
display: block;

  font-size: 12px;

  color: var(--color-text-light);

  margin-bottom: 8px;}

.product-info__payment-icons {
display: flex;

  justify-content: center;

  gap: 8px;}

.product-gallery__featured {
max-height: 420px;

  display: flex;

  align-items: center;

  justify-content: center;}

@media (max-width: 1023px) {
.product-gallery {
position: static;

 }

  .product-gallery__featured {
max-height: 320px;

 }

  .product-info {
padding: 20px 0;

 }

  .product-info__title {
font-size: 22px;

 }}

/* ----- Product Description ----- */.product-description {
padding: 60px 0;

  background-color: var(--color-white);

  position: relative;}

.product-description::after {
content: '';

  position: absolute;

  bottom: 0;

  left: 10%;

  right: 10%;

  height: var(--section-divider-height);

  background: var(--color-section-divider);

  opacity: 0.3;}

.product-description__tabs {
display: flex;

  border-bottom: 2px solid var(--color-border);

  margin-bottom: 32px;

  gap: 0;}

.product-description__tab {
padding: 14px 28px;

  font-weight: 600;

  font-size: 15px;

  color: var(--color-text-light);

  border-bottom: 2px solid transparent;

  margin-bottom: -2px;

  transition: all var(--transition-fast);}

.product-description__tab.is-active {
color: var(--color-primary);

  border-bottom-color: var(--color-primary);}

.product-description__tab:hover {
color: var(--color-text);}

.product-description__panel {
display: none;}

.product-description__panel.is-active {
display: block;}

.product-description__content {
line-height: 1.8;

  font-size: 15px;}

.product-description__specs {
display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 12px;}

.product-description__spec {
display: flex;

  justify-content: space-between;

  padding: 12px 16px;

  background: var(--color-background);

  border-radius: var(--radius-sm);}

.product-description__spec-label {
font-weight: 600;

  font-size: 14px;}

.product-description__spec-value {
font-size: 14px;

  color: var(--color-text-light);}

@media (max-width: 767px) {
.product-description__tabs {
overflow-x: auto;

 }

  .product-description__specs {
grid-template-columns: 1fr;

 }}

/* ----- Related Products ----- */.related-products {
padding: 80px 0;

  background-color: var(--color-section-best-sellers-bg);

  position: relative;}

.related-products::after {
content: '';

  position: absolute;

  bottom: 0;

  left: 10%;

  right: 10%;

  height: var(--section-divider-height);

  background: var(--color-section-divider);

  opacity: 0.3;}

/* ----- Cart Drawer ----- */.cart-drawer__overlay {
position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: linear-gradient(135deg, rgba(45, 27, 105, 0.7) 0%, rgba(30, 16, 80, 0.75) 50%, rgba(45, 27, 105, 0.7) 100%);

  z-index: 300;

  opacity: 0;

  visibility: hidden;

  transition: all var(--transition-base);

  backdrop-filter: blur(6px);

  -webkit-backdrop-filter: blur(6px);}

@supports not (backdrop-filter: blur(4px)) {
.cart-drawer__overlay {
background: rgba(0, 0, 0, 0.65);

  }}

.cart-drawer__overlay.is-open {
opacity: 1;

  visibility: visible;}

.cart-drawer__inner {
position: fixed;

  top: 0;

  left: -400px;

  width: 400px;

  max-width: 90vw;

  height: 100vh;

  background: linear-gradient(180deg, #FCFAFF 0%, #FFFFFF 40%, #FBFAFF 100%);

  z-index: 350;

  display: flex;

  flex-direction: column;

  transition: left var(--transition-base);

  box-shadow: -8px 0 40px rgba(45, 27, 105, 0.12), -2px 0 12px rgba(45, 27, 105, 0.06);

  border-left: 1px solid rgba(184, 156, 246, 0.2);}

.cart-drawer__inner.is-open {
left: 0;}

[dir="rtl"] .cart-drawer__inner {
left: auto;

  right: -400px;

  box-shadow: 8px 0 40px rgba(45, 27, 105, 0.12), 2px 0 12px rgba(45, 27, 105, 0.06);

  border-left: none;

  border-right: 1px solid rgba(184, 156, 246, 0.2);}

[dir="rtl"] .cart-drawer__inner.is-open {
left: auto;

  right: 0;}

.cart-drawer__header {
display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 20px;

  border-bottom: 1px solid rgba(184, 156, 246, 0.15);

  background: linear-gradient(135deg, #FCFAFF 0%, #F5F0FF 100%);}

.cart-drawer__title {
font-size: 20px;

  font-weight: 700;

  color: var(--color-secondary, #2D1B69);}

.cart-drawer__count {
font-size: 14px;

  font-weight: 400;

  color: #7C5CE6;

  background: rgba(124, 92, 230, 0.08);

  padding: 2px 10px;

  border-radius: 12px;

  margin-left: 8px;}

.cart-drawer__close {
transition: all var(--duration-fast);}

.cart-drawer__close:hover {
color: #7C5CE6;

  transform: rotate(90deg);}

.cart-drawer__items {
flex: 1;

  overflow-y: auto;

  padding: 12px 16px;}

.cart-drawer__item {
display: flex;

  gap: 12px;

  padding: 12px;

  margin-bottom: 8px;

  background: #FFFFFF;

  border: 1px solid rgba(184, 156, 246, 0.1);

  border-radius: 12px;

  position: relative;

  transition: all var(--transition-fast);

  box-shadow: 0 1px 3px rgba(124, 92, 230, 0.04);}

.cart-drawer__item:hover {
border-color: rgba(184, 156, 246, 0.25);

  box-shadow: 0 3px 12px rgba(124, 92, 230, 0.06);}

.cart-drawer__item-image {
width: 72px;

  height: 72px;

  flex-shrink: 0;

  border-radius: 10px;

  overflow: hidden;

  background: var(--color-background);

  border: 1px solid rgba(184, 156, 246, 0.08);}

.cart-drawer__img {
width: 100%;

  height: 100%;

  object-fit: cover;}

.cart-drawer__item-details {
flex: 1;

  display: flex;

  flex-direction: column;

  gap: 3px;

  min-width: 0;

  position: relative;}

.cart-drawer__item-title-row {
display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 8px;}

.cart-drawer__item-title {
font-weight: 600;

  font-size: 14px;

  color: var(--color-secondary, #2D1B69);

  text-decoration: none;

  line-height: 1.3;

  flex: 1;

  min-width: 0;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;}

.cart-drawer__item-title:hover {
color: #7C5CE6;}

.cart-drawer__item-variant {
font-size: 12px;

  color: var(--color-text-light);}

.cart-drawer__item-price {
font-size: 12px;

  color: var(--color-text-light);

  font-weight: 500;

  background: rgba(184, 156, 246, 0.06);

  padding: 1px 8px;

  border-radius: 10px;

  display: inline-block;

  width: fit-content;}

.cart-drawer__item-qty {
display: flex;

  align-items: center;

  gap: 0;

  border: 1px solid rgba(184, 156, 246, 0.2);

  border-radius: 8px;

  width: fit-content;

  overflow: hidden;

  background: #FFFFFF;}

.cart-drawer__item-qty:focus-within {
border-color: #7C5CE6;

  box-shadow: 0 0 0 2px rgba(124, 92, 230, 0.1);}

.cart-drawer__qty-btn {
width: 28px;

  height: 28px;

  display: flex;

  align-items: center;

  justify-content: center;

  border: none;

  background: transparent;

  cursor: pointer;

  color: #7C5CE6;

  transition: all var(--transition-fast);

  font-size: 14px;

  font-weight: 600;}

.cart-drawer__qty-btn:hover {
background: rgba(184, 156, 246, 0.1);

  color: var(--color-secondary, #2D1B69);}

.cart-drawer__qty-btn:active {
background: rgba(184, 156, 246, 0.2);}

.cart-drawer__qty-input {
width: 32px;

  height: 28px;

  text-align: center;

  border: none;

  border-left: 1px solid rgba(184, 156, 246, 0.15);

  border-right: 1px solid rgba(184, 156, 246, 0.15);

  font-size: 13px;

  font-weight: 700;

  color: var(--color-secondary, #2D1B69);

  -moz-appearance: textfield;

  background: transparent;}

.cart-drawer__qty-input::-webkit-outer-spin-button,.cart-drawer__qty-input::-webkit-inner-spin-button {
-webkit-appearance: none;}

.cart-drawer__item-remove {
display: flex;

  align-items: center;

  justify-content: center;

  width: 28px;

  height: 28px;

  border-radius: 8px;

  border: none;

  background: transparent;

  color: var(--color-text-light);

  cursor: pointer;

  transition: all var(--transition-fast);

  flex-shrink: 0;}

.cart-drawer__item-remove:hover {
background: rgba(124, 92, 230, 0.08);

  color: #7C5CE6;}

.cart-drawer__footer {
padding: 20px;

  border-top: 1px solid rgba(184, 156, 246, 0.15);

  display: flex;

  flex-direction: column;

  gap: 12px;

  background: linear-gradient(180deg, #FCFAFF 0%, #F5F0FF 100%);}

.cart-drawer__subtotal {
display: flex;

  justify-content: space-between;

  font-weight: 700;

  font-size: 16px;

  color: var(--color-secondary, #2D1B69);}

.cart-drawer__note textarea {
width: 100%;

  padding: 10px 12px;

  border: 1px solid rgba(184, 156, 246, 0.2);

  border-radius: 10px;

  font-size: 13px;

  resize: vertical;

  background: #FFFFFF;

  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);}

.cart-drawer__note textarea:focus {
outline: none;

  border-color: #7C5CE6;

  box-shadow: 0 0 0 3px rgba(124, 92, 230, 0.1);}

.cart-drawer__checkout {
border-radius: 12px !important;

  padding: 14px 20px !important;

  font-size: 15px !important;

  font-weight: 700 !important;

  background: linear-gradient(135deg, #B89CF6 0%, #7C5CE6 100%) !important;

  border: none !important;

  color: #FFFFFF !important;

  box-shadow: 0 4px 14px rgba(124, 92, 230, 0.3) !important;

  transition: all var(--transition-fast) !important;}

.cart-drawer__checkout:hover {
transform: translateY(-1px);

  box-shadow: 0 6px 20px rgba(124, 92, 230, 0.4) !important;}

.cart-drawer__continue {
border-radius: 12px !important;

  font-weight: 600 !important;

  color: #7C5CE6 !important;

  border: 1px solid rgba(184, 156, 246, 0.3) !important;

  transition: all var(--duration-fast) !important;}

.cart-drawer__continue:hover {
background: rgba(124, 92, 230, 0.06) !important;

  border-color: #7C5CE6 !important;}

.cart-drawer__empty {
display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 20px;

  height: 100%;

  padding: 40px;}

.cart-drawer__empty-icon {
color: #B89CF6;

  opacity: 0.5;

  margin-bottom: 8px;}

.cart-drawer__empty-text {
font-size: 16px;

  font-weight: 600;

  color: var(--color-secondary, #2D1B69);}

.cart-drawer__empty-subtext {
font-size: 14px;

  color: var(--color-text-light);

  text-align: center;}

.cart-drawer__empty .btn--primary {
background: linear-gradient(135deg, #B89CF6 0%, #7C5CE6 100%);

  border: none;

  color: #FFFFFF;

  border-radius: 12px;

  padding: 12px 28px;

  font-weight: 600;

  box-shadow: 0 4px 14px rgba(124, 92, 230, 0.3);}

/* ---- Cart Drawer Shipping ---- */.cart-drawer__shipping-bar {
padding: 8px 20px 16px;

  text-align: center;}

.cart-drawer__shipping-bar--success {
display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  padding: 10px 20px;

  background: #E6F7E6;

  color: #2E7D32;

  border-radius: 12px;

  font-size: 13px;

  font-weight: 600;

  margin: 0 20px 12px;

  border: 1px solid rgba(56, 161, 105, 0.2);}

.cart-drawer__shipping-track {
width: 100%;

  height: 6px;

  background: rgba(184, 156, 246, 0.2);

  border-radius: 3px;

  overflow: hidden;

  margin-bottom: 6px;}

.cart-drawer__shipping-fill {
height: 100%;

  background: linear-gradient(90deg, #B89CF6, #7C5CE6);

  border-radius: 3px;

  transition: width 0.5s ease;}

.cart-drawer__shipping-text {
font-size: 12px;

  color: var(--color-text-light);}

/* Discount row */.cart-drawer__discount {
display: flex;

  justify-content: space-between;

  font-size: 13px;

  color: #38A169;

  font-weight: 600;

  background: rgba(56, 161, 105, 0.06);

  padding: 4px 8px;

  border-radius: 8px;}

/* View cart button */.cart-drawer__view-cart {
border-radius: 12px !important;

  color: #7C5CE6 !important;

  font-weight: 600 !important;

  border: 1px solid rgba(184, 156, 246, 0.3) !important;}

.cart-drawer__view-cart:hover {
background: rgba(124, 92, 230, 0.06) !important;

  border-color: #7C5CE6 !important;}

/* Item loading spinner */.cart-drawer__item {
position: relative;

  transition: opacity 0.3s ease, transform 0.3s ease;}

.cart-drawer__item.is-removing {
opacity: 0;

  transform: translateX(20px);

  pointer-events: none;}

.cart-drawer__item-loader {
position: absolute;

  inset: 0;

  background: rgba(255,255,255,0.7);

  display: flex;

  align-items: center;

  justify-content: center;

  opacity: 0;

  visibility: hidden;

  transition: all var(--transition-fast);

  z-index: 2;

  border-radius: var(--radius-sm);}

.cart-drawer__item-loader.is-active {
opacity: 1;

  visibility: visible;}

.cart-drawer__item-loader span {
width: 20px;

  height: 20px;

  border: 2px solid var(--color-border);

  border-top-color: var(--color-primary);

  border-radius: 50%;

  animation: cartSpin 0.6s linear infinite;}

@keyframes cartSpin {
to {
transform: rotate(360deg);

 }}

/* Item line total */.cart-drawer__item-actions {
display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 8px;

  margin-top: 4px;}

.cart-drawer__item-line-total {
font-size: 14px;

  font-weight: 700;

  color: var(--color-primary);

  white-space: nowrap;}

/* Loading overlay for entire drawer */.cart-drawer__loading {
position: absolute;

  inset: 0;

  background: rgba(255,255,255,0.8);

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: 100;

  opacity: 0;

  visibility: hidden;

  transition: all var(--transition-fast);}

.cart-drawer__loading.is-active {
opacity: 1;

  visibility: visible;}

.cart-drawer__spinner {
width: 40px;

  height: 40px;

  border: 3px solid var(--color-border);

  border-top-color: var(--color-primary);

  border-radius: 50%;

  animation: cartSpin 0.8s linear infinite;}

/* Cart Toast Notification */.cart-toast {
position: fixed;

  bottom: 24px;

  left: 50%;

  transform: translateX(-50%) translateY(20px);

  background: var(--color-text, #1a1a1a);

  color: #fff;

  padding: 12px 24px;

  border-radius: var(--radius-sm);

  font-size: 14px;

  font-weight: 500;

  z-index: var(--z-toast);

  opacity: 0;

  visibility: hidden;

  transition: all 0.3s ease;

  white-space: nowrap;

  box-shadow: var(--shadow-lg);}

.cart-toast.is-visible {
opacity: 1;

  visibility: visible;

  transform: translateX(-50%) translateY(0);}

/* Cart count badge pulse */.header__cart-count {
transition: transform 0.15s ease;}

.cart-count--pulse {
animation: badgePulse 0.4s ease;}

@keyframes badgePulse {
0% {
transform: scale(1);

 }

  50% {
transform: scale(1.35);

 }

  100% {
transform: scale(1);

 }}

/* Drawer open body lock */body.drawer-open {
overflow: hidden;}

/* =============================================   CART PAGE — Redesigned   ============================================= */.cart-page {
padding: 30px 20px 80px;

  background: var(--color-white, #FFFFFF);

  min-height: 60vh;}

.cart-page--empty {
display: flex;

  align-items: center;

  justify-content: center;

  min-height: 60vh;}

/* ─── Hero / Header ─── */.cart-page__hero {
display: flex;

  align-items: center;

  justify-content: space-between;

  flex-wrap: wrap;

  gap: 16px;

  margin-bottom: 32px;

  padding: 24px 28px;

  background: linear-gradient(135deg, #FCFAFF 0%, #F5F0FF 100%);

  border: 1px solid rgba(184, 156, 246, 0.2);

  border-radius: 16px;}

.cart-page__title {
display: flex;

  align-items: center;

  gap: 12px;

  font-size: 26px;

  margin: 0;

  color: var(--color-secondary, #2D1B69);}

.cart-page__title-icon {
color: var(--color-primary);}

.cart-page__title-count {
font-size: 15px;

  font-weight: 500;

  color: #7C5CE6;

  background: rgba(124, 92, 230, 0.1);

  padding: 4px 14px;

  border-radius: 20px;

  border: 1px solid rgba(124, 92, 230, 0.15);}

/* ─── Layout ─── */.cart-page__layout {
display: grid;

  grid-template-columns: 1fr 380px;

  gap: 40px;

  align-items: start;}

@media (max-width: 900px) {
.cart-page__layout {
grid-template-columns: 1fr;

  }

  .cart-page__hero {
flex-direction: column;

    align-items: flex-start;

  }}

/* ─── Items Container ─── */.cart-page__items {
background: #FFFFFF;

  border: 1px solid rgba(184, 156, 246, 0.15);

  border-radius: 16px;

  padding: 4px 20px;

  box-shadow: 0 2px 12px rgba(124, 92, 230, 0.06);}

/* ─── Shipping Card ─── */.cart-page__shipping-card {
display: flex;

  align-items: center;

  gap: 14px;

  padding: 16px 20px;

  background: linear-gradient(135deg, #FCFAFF 0%, #F8F4FF 100%);

  border: 1px solid rgba(184, 156, 246, 0.2);

  border-radius: 12px;

  margin-bottom: 4px;

  margin-top: 4px;}

.cart-page__shipping-card-icon {
flex-shrink: 0;

  width: 40px;

  height: 40px;

  display: flex;

  align-items: center;

  justify-content: center;

  background: linear-gradient(135deg, #B89CF6 0%, #A07CE6 100%);

  border-radius: 10px;

  color: #FFFFFF;

  box-shadow: 0 2px 8px rgba(184, 156, 246, 0.3);}

.cart-page__shipping-card-content {
flex: 1;

  min-width: 0;}

.cart-page__shipping-card-text {
display: block;

  font-size: 13px;

  color: var(--color-text, #1a1a1a);

  font-weight: 500;

  margin-bottom: 6px;}

.cart-page__shipping-track {
width: 100%;

  height: 6px;

  background: rgba(184, 156, 246, 0.2);

  border-radius: 3px;

  overflow: hidden;}

.cart-page__shipping-fill {
height: 100%;

  background: linear-gradient(90deg, #B89CF6, #7C5CE6);

  border-radius: 3px;

  transition: width 0.6s ease;}

.cart-page__shipping-success {
display: flex;

  align-items: center;

  gap: 8px;

  color: #38A169;

  font-weight: 600;

  font-size: 14px;}

/* ─── Item Card ─── */.cart-page__item {
display: flex;

  gap: 16px;

  padding: 20px;

  margin: 8px -4px;

  background: #FFFFFF;

  border: 1px solid rgba(184, 156, 246, 0.12);

  border-radius: 12px;

  position: relative;

  transition: all 0.3s ease;

  box-shadow: 0 1px 4px rgba(124, 92, 230, 0.04);}

.cart-page__item:hover {
border-color: rgba(184, 156, 246, 0.25);

  box-shadow: 0 4px 16px rgba(124, 92, 230, 0.08);}

.cart-page__item.is-updating {
opacity: 0.6;}

.cart-page__item.is-removing {
opacity: 0;

  transform: translateX(-20px);

  pointer-events: none;}

.cart-page__item-image {
width: 100px;

  flex-shrink: 0;

  position: relative;}

.cart-page__item-image a {
display: block;}

.cart-page__item-image img {
width: 100%;

  border-radius: 10px;

  background: var(--color-section-hero-bg);

  border: 1px solid rgba(184, 156, 246, 0.1);}

.cart-page__item-remove-mobile {
display: none;

  position: absolute;

  top: -8px;

  right: -8px;

  width: 28px;

  height: 28px;

  border-radius: 50%;

  background: #FFFFFF;

  border: 1px solid rgba(184, 156, 246, 0.2);

  color: #7C5CE6;

  cursor: pointer;

  align-items: center;

  justify-content: center;

  box-shadow: 0 2px 8px rgba(124, 92, 230, 0.12);

  transition: all var(--duration-fast);

  z-index: 2;}

.cart-page__item-remove-mobile:hover {
background: rgba(124, 92, 230, 0.1);

  border-color: #7C5CE6;}

.cart-page__item-body {
flex: 1;

  display: flex;

  gap: 16px;

  min-width: 0;}

.cart-page__item-info {
flex: 1;

  min-width: 0;}

.cart-page__item-title {
display: block;

  font-weight: 600;

  font-size: 15px;

  color: var(--color-secondary, #2D1B69);

  text-decoration: none;

  margin-bottom: 4px;

  line-height: 1.3;}

.cart-page__item-title:hover {
color: #7C5CE6;}

.cart-page__item-variant {
font-size: 13px;

  color: var(--color-text-light);

  margin-bottom: 3px;}

.cart-page__item-price {
font-size: 13px;

  color: var(--color-text-light);

  font-weight: 500;

  display: inline-flex;

  align-items: center;

  gap: 4px;

  background: rgba(184, 156, 246, 0.08);

  padding: 2px 10px;

  border-radius: 20px;}

.cart-page__item-props {
display: flex;

  flex-wrap: wrap;

  gap: 4px 12px;

  margin-top: 4px;}

.cart-page__item-prop {
font-size: 11px;

  color: var(--color-text-light);}

.cart-page__item-controls {
display: flex;

  flex-direction: column;

  align-items: flex-end;

  gap: 8px;

  flex-shrink: 0;}

/* Quantity controls */.cart-page__item-qty {
display: flex;

  align-items: center;

  gap: 0;

  border: 1px solid rgba(184, 156, 246, 0.25);

  border-radius: 8px;

  overflow: hidden;

  background: #FFFFFF;}

.cart-page__item-qty:focus-within {
border-color: #7C5CE6;

  box-shadow: 0 0 0 3px rgba(124, 92, 230, 0.1);}

.cart-page__qty-btn {
width: 36px;

  height: 36px;

  display: flex;

  align-items: center;

  justify-content: center;

  border: none;

  background: transparent;

  cursor: pointer;

  color: #7C5CE6;

  transition: all var(--duration-fast);

  font-size: 16px;

  font-weight: 600;}

.cart-page__qty-btn:hover {
background: rgba(184, 156, 246, 0.1);

  color: var(--color-secondary, #2D1B69);}

.cart-page__qty-btn:active {
background: rgba(184, 156, 246, 0.2);}

.cart-page__qty-input {
width: 44px;

  height: 36px;

  text-align: center;

  border: none;

  border-left: 1px solid rgba(184, 156, 246, 0.15);

  border-right: 1px solid rgba(184, 156, 246, 0.15);

  font-size: 14px;

  font-weight: 700;

  color: var(--color-secondary, #2D1B69);

  -moz-appearance: textfield;

  background: transparent;}

.cart-page__qty-input::-webkit-outer-spin-button,.cart-page__qty-input::-webkit-inner-spin-button {
-webkit-appearance: none;

  margin: 0;}

/* Item total */.cart-page__item-total {
text-align: right;

  display: flex;

  flex-direction: column;

  align-items: flex-end;}

.cart-page__item-line-price {
font-weight: 700;

  font-size: 16px;

  color: #7C5CE6;}

.cart-page__item-line-compare {
font-size: 13px;

  color: var(--color-text-light);

  text-decoration: line-through;}

/* Remove button */.cart-page__item-remove {
display: inline-flex;

  align-items: center;

  gap: 4px;

  background: none;

  border: none;

  color: var(--color-text-light);

  font-size: 12px;

  cursor: pointer;

  padding: 4px 8px;

  border-radius: 6px;

  transition: all var(--duration-fast);}

.cart-page__item-remove:hover {
color: #7C5CE6;

  background: rgba(124, 92, 230, 0.08);}

.cart-page__item-remove svg {
transition: transform var(--duration-fast);}

.cart-page__item-remove:hover svg {
transform: scale(1.1);}

/* Item loader */.cart-page__item-loader {
position: absolute;

  inset: 0;

  background: rgba(255,255,255,0.6);

  display: flex;

  align-items: center;

  justify-content: center;

  opacity: 0;

  visibility: hidden;

  transition: all var(--transition-fast);

  z-index: 2;

  border-radius: var(--radius-md);}

.cart-page__item-loader.is-active {
opacity: 1;

  visibility: visible;}

.cart-page__item-loader span {
width: 24px;

  height: 24px;

  border: 2px solid var(--color-border);

  border-top-color: var(--color-primary);

  border-radius: 50%;

  animation: cartSpin 0.6s linear infinite;}

/* Actions + Update button */.cart-page__actions {
padding: 12px 0;

  text-align: right;}

.cart-page__update-btn {
font-size: 13px;}

/* ─── Cart Summary ─── */.cart-page__summary {
background: linear-gradient(180deg, #FCFAFF 0%, #F5F0FF 100%);

  border: 1px solid rgba(184, 156, 246, 0.2);

  border-radius: 16px;

  padding: 28px;

  position: sticky;

  top: 100px;

  box-shadow: 0 4px 20px rgba(124, 92, 230, 0.08);}

.cart-page__summary-title {
font-size: 18px;

  font-weight: 700;

  color: var(--color-secondary, #2D1B69);

  margin-bottom: 16px;

  padding-bottom: 12px;

  border-bottom: 1px solid rgba(184, 156, 246, 0.15);}

.cart-page__summary-rows {
display: flex;

  flex-direction: column;

  gap: 2px;}

.cart-page__summary-row {
display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 8px 0;

  font-size: 14px;

  color: var(--color-text);}

.cart-page__summary-discount {
color: #38A169;

  font-weight: 600;}

.cart-page__summary-shipping {
font-size: 13px;}

.cart-page__summary-free {
color: #38A169;

  font-weight: 600;}

.cart-page__summary-divider {
height: 1px;

  background: rgba(184, 156, 246, 0.15);

  margin: 12px 0;}

.cart-page__summary-total {
font-size: 22px;

  font-weight: 800;

  padding: 8px 0 16px;

  color: var(--color-secondary, #2D1B69);}

.cart-page__summary-total-label {
font-size: 15px;

  font-weight: 600;}

.cart-page__note {
margin: 16px 0;}

.cart-page__note label {
display: block;

  font-size: 13px;

  font-weight: 600;

  margin-bottom: 6px;

  color: var(--color-text);}

.cart-page__note-input {
width: 100%;

  border: 1px solid rgba(184, 156, 246, 0.2);

  border-radius: 10px;

  padding: 10px 12px;

  font-size: 14px;

  resize: vertical;

  font-family: inherit;

  background: #FFFFFF;

  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);}

.cart-page__note-input:focus {
outline: none;

  border-color: #7C5CE6;

  box-shadow: 0 0 0 3px rgba(124, 92, 230, 0.1);}

/* Coupon badge */.cart-page__coupon-badge {
display: flex;

  align-items: center;

  gap: 6px;

  padding: 8px 12px;

  background: #E6F7E6;

  color: #2E7D32;

  border-radius: var(--radius-sm);

  font-size: 13px;

  font-weight: 500;

  margin: 12px 0;}

/* Checkout button */.cart-page__checkout {
margin: 16px 0 12px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  font-size: 16px !important;

  padding: 16px 24px !important;

  border-radius: 12px !important;

  background: linear-gradient(135deg, #B89CF6 0%, #7C5CE6 100%) !important;

  border: none !important;

  color: #FFFFFF !important;

  font-weight: 700 !important;

  letter-spacing: 0.3px;

  box-shadow: 0 4px 14px rgba(124, 92, 230, 0.3) !important;

  transition: all var(--transition-fast) !important;}

.cart-page__checkout:hover {
transform: translateY(-1px);

  box-shadow: 0 6px 20px rgba(124, 92, 230, 0.4) !important;}

.cart-page__checkout:active {
transform: translateY(0);}

/* Secure badge */.cart-page__secure-badge {
display: flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

  font-size: 12px;

  color: var(--color-text-light);

  margin-bottom: 16px;}

/* Continue shopping */.cart-page__continue {
display: flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

  font-size: 14px;

  color: #7C5CE6 !important;

  transition: all var(--duration-fast);}

.cart-page__continue:hover {
color: var(--color-secondary, #2D1B69) !important;

  gap: 10px;}

/* RTL adjustments */.rtl .cart-page__item-total {
text-align: left;

  align-items: flex-start;}

.rtl .cart-page__item-remove-mobile {
right: auto;

  left: -6px;}

.rtl .cart-page__item-controls {
align-items: flex-start;}

.rtl .cart-page__actions {
text-align: left;}

/* ─── Empty State ─── */.cart-page__empty {
text-align: center;

  padding: 80px 20px;

  background: linear-gradient(135deg, #FCFAFF 0%, #F8F4FF 100%);

  border: 1px solid rgba(184, 156, 246, 0.15);

  border-radius: 16px;}

.cart-page__empty-icon {
margin-bottom: 24px;

  color: #B89CF6;}

.cart-page__empty-icon svg {
opacity: 0.6;}

.cart-page__empty-title {
font-size: 24px;

  margin-bottom: 8px;

  color: var(--color-secondary, #2D1B69);}

.cart-page__empty-text {
color: var(--color-text-light);

  margin-bottom: 28px;

  font-size: 15px;}

/* ─── Mobile Responsive ─── */@media (max-width: 768px) {
.cart-page__item {
flex-direction: column;

    gap: 12px;

  }

  .cart-page__item-image {
width: 100%;

    max-width: 120px;

  }

  .cart-page__item-remove-mobile {
display: flex;

  }

  .cart-page__item-body {
flex-direction: column;

    gap: 12px;

  }

  .cart-page__item-controls {
flex-direction: row;

    align-items: center;

    justify-content: space-between;

    width: 100%;

  }

  .cart-page__item-total {
flex-direction: row;

    gap: 6px;

    align-items: center;

  }

  .cart-page__item-remove span {
display: none;

  }

  .rtl .cart-page__item-controls {
align-items: center;

  }

  .rtl .cart-page__item-total {
text-align: left;

  }}

/* Product card "added" state */.product-card__add-to-cart.is-added {
background: var(--color-success, #2e7d32) !important;

  color: #fff !important;}

.btn__spinner {
display: inline-block;

  width: 14px;

  height: 14px;

  border: 2px solid rgba(255,255,255,0.3);

  border-top-color: #fff;

  border-radius: 50%;

  animation: cartSpin 0.6s linear infinite;

  vertical-align: middle;

  margin-left: 6px;}

/* ----- Collection ----- */.collection-banner {
margin-bottom: 40px;}

.collection-banner__wrapper {
position: relative;

  min-height: 250px;

  display: flex;

  align-items: center;}

.collection-banner__image-wrapper {
position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;}

.collection-banner__image {
width: 100%;

  height: 100%;

  object-fit: cover;}

.collection-banner__overlay {
position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(0,0,0,0.3);}

.collection-banner__content {
position: relative;

  z-index: 2;

  padding: 60px 0;

  color: var(--color-white);}

.collection-banner__title {
font-size: 36px;

  font-weight: 800;

  margin-bottom: 8px;}

.collection-banner__description {
font-size: 16px;

  opacity: 0.9;}

.collection-grid {
padding: 0 0 80px;

  background-color: var(--color-section-featured-bg);

  position: relative;}

.collection-grid::after {
content: '';

  position: absolute;

  bottom: 0;

  left: 10%;

  right: 10%;

  height: var(--section-divider-height);

  background: var(--color-section-divider);

  opacity: 0.3;}

.collection-grid__layout {
display: grid;

  grid-template-columns: 280px 1fr;

  gap: 32px;}

.collection-grid__sidebar {
position: sticky;

  top: calc(var(--header-height) + 20px);

  height: fit-content;

  background: #FFFFFF;

  border: 1px solid rgba(184, 156, 246, 0.15);

  border-radius: 16px;

  padding: 24px 20px;

  box-shadow: 0 2px 12px rgba(124, 92, 230, 0.06);}

.collection-grid__filters-header {
display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 20px;

  padding-bottom: 12px;

  border-bottom: 1px solid rgba(184, 156, 246, 0.15);}

.collection-grid__filters-title {
font-size: 18px;

  font-weight: 700;

  color: var(--color-secondary, #2D1B69);}

.collection-grid__filters-close {
display: none;}

.collection-grid__filter-group {
border-bottom: 1px solid rgba(184, 156, 246, 0.12);

  padding-bottom: 14px;

  margin-bottom: 14px;}

.collection-grid__filter-group:last-of-type {
border-bottom: none;

  margin-bottom: 0;

  padding-bottom: 0;}

.collection-grid__filter-toggle {
display: flex;

  align-items: center;

  justify-content: space-between;

  width: 100%;

  font-weight: 700;

  font-size: 14px;

  padding: 4px 0;

  color: var(--color-secondary, #2D1B69);

  transition: color var(--transition-fast);}

.collection-grid__filter-toggle:hover {
color: #7C5CE6;}

.collection-grid__filter-toggle svg {
transition: transform var(--transition-fast);

  color: #7C5CE6;}

.collection-grid__filter-toggle[aria-expanded="false"] + .collection-grid__filter-options {
display: none;}

.collection-grid__filter-options {
margin-top: 12px;}

.collection-grid__filter-list {
display: flex;

  flex-direction: column;

  gap: 8px;}

.collection-grid__filter-label {
display: flex;

  align-items: center;

  gap: 8px;

  font-size: 14px;

  cursor: pointer;

  padding: 6px 10px;

  border-radius: 8px;

  transition: background var(--transition-fast);

  color: var(--color-text, #2B2B2B);}

.collection-grid__filter-label:hover {
background: rgba(184, 156, 246, 0.06);}

.collection-grid__filter-checkbox {
width: 18px;

  height: 18px;

  accent-color: #7C5CE6;

  border-radius: 4px;

  cursor: pointer;}

.collection-grid__filter-count {
color: var(--color-text-light);

  font-size: 12px;

  margin-right: auto;}

.collection-grid__price-range {
display: flex;

  flex-direction: column;

  gap: 10px;}

.collection-grid__price-inputs {
display: flex;

  align-items: center;

  gap: 8px;}

.collection-grid__price-field {
flex: 1;}

.collection-grid__price-field label {
display: block;

  font-size: 12px;

  margin-bottom: 4px;

  color: var(--color-text-light);}

.collection-grid__price-input {
width: 100%;

  padding: 10px 8px;

  border: 1px solid rgba(184, 156, 246, 0.2);

  border-radius: 8px;

  font-size: 14px;

  background: #FFFFFF;

  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);}

.collection-grid__price-input:focus {
outline: none;

  border-color: #7C5CE6;

  box-shadow: 0 0 0 3px rgba(124, 92, 230, 0.1);}

.collection-grid__price-apply {
align-self: flex-start;}

.collection-grid__clear {
width: 100%;

  margin-top: 16px;

  border-radius: 10px !important;}

.collection-grid__toolbar {
display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 24px;

  padding: 16px 20px;

  background: #FFFFFF;

  border: 1px solid rgba(184, 156, 246, 0.1);

  border-radius: 14px;

  box-shadow: 0 1px 4px rgba(124, 92, 230, 0.04);}

.collection-grid__filter-toggle-mobile {
display: none;

  align-items: center;

  gap: 8px;

  font-weight: 700;

  font-size: 14px;

  color: #7C5CE6;

  transition: color var(--duration-fast);}

.collection-grid__filter-toggle-mobile:hover {
color: var(--color-secondary, #2D1B69);}

.collection-grid__sort {
display: flex;

  align-items: center;

  gap: 8px;}

.collection-grid__sort label {
font-size: 14px;

  color: var(--color-text-light);

  font-weight: 500;}

.collection-grid__sort-select {
padding: 10px 14px;

  border: 1px solid rgba(184, 156, 246, 0.2);

  border-radius: 10px;

  font-size: 14px;

  background: #FFFFFF;

  color: var(--color-secondary, #2D1B69);

  font-weight: 500;

  cursor: pointer;

  transition: border-color var(--duration-fast);}

.collection-grid__sort-select:focus {
outline: none;

  border-color: #7C5CE6;

  box-shadow: 0 0 0 3px rgba(124, 92, 230, 0.08);}

.collection-grid__empty {
grid-column: 1 / -1;

  text-align: center;

  padding: 80px 20px;

  color: var(--color-text-light);

  background: #FFFFFF;

  border: 1px solid rgba(184, 156, 246, 0.1);

  border-radius: 16px;}

/* ---- Collection Grid Mobile Responsive ---- */@media (max-width: 1023px) {
.collection-grid__layout {
grid-template-columns: 1fr;

  }

  .collection-grid__sidebar {
position: fixed;

    top: 0;

    left: 0;

    width: 300px;

    max-width: 85vw;

    height: 100vh;

    z-index: var(--z-overlay);

    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;

    transform: translateX(-100%);

    transition: transform 350ms cubic-bezier(0.4, 0, 0.2, 1);

    overflow-y: auto;

    padding-top: 24px;

  }

  .rtl .collection-grid__sidebar {
left: auto;

    right: 0;

    border-radius: var(--radius-lg) 0 0 var(--radius-lg);

    transform: translateX(100%);

  }

  .collection-grid__sidebar.is-open {
transform: translateX(0);

  }

  .collection-grid__filters-close {
display: flex;

  }

  .collection-grid__filter-toggle-mobile {
display: inline-flex;

  }

  .collection-grid__toolbar {
flex-wrap: wrap;

    gap: 12px;

  }}

/* Collection sidebar overlay */.collection-grid__sidebar-overlay {
display: none;

  position: fixed;

  inset: 0;

  background: rgba(0,0,0,0.4);

  z-index: calc(var(--z-overlay) - 1);

  opacity: 0;

  transition: opacity var(--transition-base);}

.collection-grid__sidebar-overlay.is-open {
display: block;

  opacity: 1;}

/* ----- Blog ----- */.blog-header {
padding: 60px 0;

  text-align: center;

  background-color: #F4F0FF;

  position: relative;}

.blog-header::after {
content: '';

  position: absolute;

  bottom: 0;

  left: 10%;

  right: 10%;

  height: var(--section-divider-height);

  background: var(--color-section-divider);

  opacity: 0.3;}

.blog-header__title {
font-size: 36px;

  font-weight: 800;

  margin-bottom: 8px;}

.blog-header__description {
font-size: 16px;

  color: var(--color-text-light);

  max-width: 500px;

  margin: 0 auto;}

.blog-posts {
padding: 80px 0;

  background-color: #F4F0FF;}

.blog-posts__grid {
display: grid;

  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

  gap: 24px;}

.blog-card {
background: var(--color-white);

  border-radius: var(--radius-md);

  overflow: hidden;

  transition: transform var(--transition-base), box-shadow var(--transition-base);

  box-shadow: var(--shadow-card);

  border: 1px solid rgba(184, 156, 246, 0.12);}

.blog-card:hover {
transform: translateY(-4px);

  box-shadow: 0 12px 32px rgba(124, 92, 230, 0.12);

  border-color: rgba(184, 156, 246, 0.25);}

.blog-card__image-wrapper {
display: block;

  aspect-ratio: 16/10;

  overflow: hidden;

  background: #F4F0FF;}

.blog-card__image {
width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform var(--transition-slow);}

.blog-card:hover .blog-card__image {
transform: scale(1.05);}

.blog-card__placeholder {
width: 100%;

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--color-border);}

.blog-card__placeholder-svg {
width: 50%;

  height: 50%;}

.blog-card__content {
padding: 20px;}

.blog-card__date {
display: block;

  font-size: 13px;

  color: var(--color-text-light);

  margin-bottom: 8px;}

.blog-card__title {
font-size: 18px;

  font-weight: 700;

  margin-bottom: 8px;

  line-height: 1.4;}

.blog-card__title a {
color: var(--color-secondary, #2D1B69);

  text-decoration: none;

  transition: color var(--transition-fast);}

.blog-card__title a:hover {
color: #7C5CE6;}

.blog-card__excerpt {
font-size: 14px;

  color: var(--color-text-light);

  line-height: 1.6;

  margin-bottom: 16px;}

@media (max-width: 767px) {
.blog-header {
padding: 40px 0;

 }

  .blog-header__title {
font-size: 26px;

 }

  .blog-posts {
padding: 48px 0;

 }

  .blog-posts__grid {
grid-template-columns: 1fr;

 gap: 16px;

 }}

/* ----- Pagination ----- */.pagination {
margin-top: 40px;}

.pagination__list {
display: flex;

  justify-content: center;

  align-items: center;

  gap: 4px;}

.pagination__link {
display: flex;

  align-items: center;

  justify-content: center;

  width: 40px;

  height: 40px;

  border-radius: var(--radius-sm);

  font-size: 14px;

  font-weight: 500;

  transition: all var(--transition-fast);}

.pagination__item--active .pagination__link {
background: var(--color-primary);

  color: var(--color-white);}

.pagination__item:not(.pagination__item--active) .pagination__link:hover {
background: var(--color-background);}

/* ----- FAQ ----- */.faq {
padding: 60px 0;

  background-color: #FFFFFF;}

.faq__list {
max-width: 700px;

  margin: 0 auto;}

.faq__item {
border-bottom: 1px solid var(--color-border);}

.faq__question {
display: flex;

  align-items: center;

  justify-content: space-between;

  width: 100%;

  padding: 20px 0;

  font-weight: 600;

  font-size: 16px;

  text-align: right;

  transition: color var(--transition-fast);}

.faq__question:hover {
color: var(--color-primary);}

.faq__question[aria-expanded="true"] .faq__icon {
transform: rotate(45deg);}

.faq__icon {
transition: transform var(--transition-base);

  flex-shrink: 0;}

.faq__answer {
overflow: hidden;

  transition: max-height var(--transition-base);}

.faq__answer-content {
padding-bottom: 20px;

  font-size: 15px;

  line-height: 1.7;

  color: var(--color-text-light);}

/* ----- About Pages ----- */.about-hero {
padding: 80px 0;

  text-align: center;

  background-color: #FCFAFF;

  position: relative;

  overflow: hidden;}

.about-hero::before {
content: '';

  position: absolute;

  top: -50%;

  left: -50%;

  width: 200%;

  height: 200%;

  background: radial-gradient(ellipse at 30% 50%, var(--color-primary-light) 0%, transparent 60%),              radial-gradient(ellipse at 70% 50%, var(--color-primary-light) 0%, transparent 60%);

  opacity: 0.5;

  pointer-events: none;}

.about-hero__title {
font-size: 42px;

  font-weight: 800;

  margin-bottom: 12px;}

.about-hero__subtitle {
font-size: 18px;

  color: var(--color-text-light);}

.about-content {
padding: 80px 0;

  background-color: var(--color-white);

  position: relative;}

.about-content::after {
content: '';

  position: absolute;

  bottom: 0;

  left: 10%;

  right: 10%;

  height: var(--section-divider-height);

  background: var(--color-section-divider);

  opacity: 0.3;}

.about-content__grid {
display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 48px;

  align-items: center;}

.about-content__image-wrapper {
border-radius: var(--radius-lg);

  overflow: hidden;}

.about-content__image {
width: 100%;

  height: auto;

  aspect-ratio: 4/3;

  object-fit: cover;}

.about-content__title {
font-size: 32px;

  font-weight: 700;

  margin-bottom: 20px;}

.about-content__text {
line-height: 1.8;

  font-size: 16px;

  color: var(--color-text-light);}

.about-values {
padding: 80px 0;

  background-color: #FCFAFF;}

.about-values__grid {
display: grid;

  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

  gap: 24px;}

.about-values__card {
background: var(--color-white);

  border-radius: var(--radius-lg);

  padding: 32px;

  text-align: center;

  transition: transform var(--transition-base), box-shadow var(--transition-base);

  box-shadow: var(--shadow-card);}

.about-values__card:hover {
transform: translateY(-4px);

  box-shadow: var(--shadow-card-hover);}

.about-values__icon {
width: 64px;

  height: 64px;

  margin: 0 auto 16px;

  display: flex;

  align-items: center;

  justify-content: center;

  background: var(--color-background);

  border-radius: var(--radius-full);

  color: var(--color-primary);}

.about-values__title {
font-size: 18px;

  font-weight: 700;

  margin-bottom: 8px;}

.about-values__text {
font-size: 14px;

  color: var(--color-text-light);

  line-height: 1.6;}

@media (max-width: 767px) {
.about-hero {
padding: 48px 0;

 }

  .about-hero__title {
font-size: 28px;

 }

  .about-content {
padding: 48px 0;

 }

  .about-content__grid {
grid-template-columns: 1fr;

 gap: 24px;

 }

  .about-values {
padding: 48px 0;

 }}

/* ----- Policy Pages ----- */.policy-hero {
padding: 80px 0 60px;

  text-align: center;

  background-color: var(--color-background);

  position: relative;

  overflow: hidden;}

.policy-hero::before {
content: '';

  position: absolute;

  top: -50%;

  left: -50%;

  width: 200%;

  height: 200%;

  background: radial-gradient(ellipse at 30% 50%, var(--color-primary-light) 0%, transparent 60%),              radial-gradient(ellipse at 70% 50%, var(--color-primary-light) 0%, transparent 60%);

  opacity: 0.4;

  pointer-events: none;}

.policy-hero__content {
position: relative;

  z-index: 1;}

.policy-hero__title {
font-size: 38px;

  font-weight: 800;

  margin-bottom: 12px;

  text-wrap: balance;}

.policy-hero__subtitle {
font-size: 18px;

  color: var(--color-text-light);

  max-width: 600px;

  margin: 0 auto;}

.policy-content {
padding: 0 0 80px;

  background-color: var(--color-white);}

.policy-content__body {
max-width: 720px;

  margin: 0 auto;

  line-height: 1.9;

  font-size: 16px;

  color: var(--color-text);}

.policy-content__body p {
margin-bottom: 18px;}

.policy-content__body ul,.policy-content__body ol {
padding-right: 24px;

  margin-bottom: 20px;}

.policy-content__body li {
margin-bottom: 12px;

  line-height: 1.8;}

.policy-content__body strong {
font-weight: 700;

  color: var(--color-text);}

.policy-content__body .policy-section {
margin-bottom: 32px;}

.policy-content__body .policy-section__title {
font-size: 20px;

  font-weight: 700;

  font-family: var(--font-heading);

  margin-bottom: 12px;}

@media (max-width: 767px) {
.policy-hero {
padding: 48px 0 36px;

 }

  .policy-hero__title {
font-size: 28px;

 }

  .policy-content {
padding: 0 0 48px;

 }

  .policy-content__body {
font-size: 15px;

 }}

/* ----- Contact ----- */.contact-section {
padding: 80px 0;

  background-color: #FFFFFF;}

.contact-section__grid {
display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 48px;}

.contact-section__title {
font-size: 32px;

  font-weight: 700;

  margin-bottom: 32px;}

.contact-section__field {
margin-bottom: 20px;}

.contact-section__field label {
display: block;

  font-weight: 600;

  font-size: 14px;

  margin-bottom: 6px;}

.contact-section__input,.contact-section__textarea {
width: 100%;

  padding: 12px 16px;

  border: 1px solid var(--color-border);

  border-radius: var(--radius-sm);

  font-size: 15px;

  transition: border-color var(--transition-fast);

  background: var(--color-white);}

.contact-section__input:focus,.contact-section__textarea:focus {
outline: none;

  border-color: var(--color-primary);}

.contact-section__submit {
border-radius: var(--radius-sm);}

.contact-section__success {
color: var(--color-success);

  font-weight: 600;

  margin-bottom: 16px;}

.contact-section__info-card {
background: var(--color-background);

  border-radius: var(--radius-lg);

  padding: 40px;}

.contact-section__info-card h3 {
font-size: 22px;

  font-weight: 700;

  margin-bottom: 24px;}

.contact-section__info-item {
display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 16px;

  font-size: 15px;}

.contact-section__info-item svg {
color: var(--color-primary);

  flex-shrink: 0;}

.contact-section__info-item a:hover {
color: var(--color-primary);}

.contact-section__whatsapp {
margin-top: 24px;

  width: 100%;

  border-radius: var(--radius-sm);}

@media (max-width: 767px) {
.contact-section {
padding: 48px 0;

 }

  .contact-section__grid {
grid-template-columns: 1fr;

 gap: 32px;

 }

  .contact-section__title {
font-size: 24px;

 }}

/* ----- Back to top ----- */.back-to-top {
position: fixed;

  bottom: 24px;

  right: 24px;

  width: 44px;

  height: 44px;

  background: var(--color-primary);

  color: var(--color-white);

  border-radius: var(--radius-full);

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: var(--shadow-md);

  opacity: 0;

  visibility: hidden;

  transform: translateY(20px);

  transition: all var(--transition-base);

  z-index: 50;}

.back-to-top.is-visible {
opacity: 1;

  visibility: visible;

  transform: translateY(0);}

.back-to-top:hover {
background: var(--color-primary-dark);

  transform: translateY(-2px);}

/* ----- WhatsApp Float ----- */.whatsapp-float {
position: fixed;

  bottom: 24px;

  left: 24px;

  width: 52px;

  height: 52px;

  background: #25D366;

  color: var(--color-white);

  border-radius: var(--radius-full);

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: 0 4px 16px rgba(37,211,102,0.3);

  z-index: 50;

  transition: transform var(--transition-fast);}

.whatsapp-float:hover {
transform: scale(1.1);}

/* ----- Skip to content ----- */.skip-to-content {
position: absolute;

  top: -100%;

  left: 0;

  z-index: 1000;

  transition: top var(--transition-fast);}

.skip-to-content:focus {
top: 0;}

/* ----- RTE (Rich Text) ----- */.rte p {
margin-bottom: 16px;}

.rte ul, .rte ol {
padding-right: 20px;

  margin-bottom: 16px;}

.rte ul {
list-style: disc;

 }

.rte ol {
list-style: decimal;

 }

.rte li {
margin-bottom: 8px;}

.rte h2 {
font-size: 24px;

 margin: 24px 0 12px;

 }

.rte h3 {
font-size: 20px;

 margin: 20px 0 10px;

 }

/* ----- Utility ----- *//* ----- Product Card Rating ----- */.product-card__rating {
display: flex;

  align-items: center;

  gap: 6px;

  margin-bottom: 4px;}

.product-card__stars {
display: flex;

  gap: 2px;}

.product-card__stars svg {
display: block;}

.product-card__rating-count {
font-size: 11px;

  color: var(--color-text-light);}

.text-center {
text-align: center;

 }

.text-right {
text-align: right;

 }

.mt-16 {
margin-top: 16px;

 }

.mt-24 {
margin-top: 24px;

 }

.mt-32 {
margin-top: 32px;

 }

.mb-16 {
margin-bottom: 16px;

 }

.mb-24 {
margin-bottom: 24px;

 }

/* ----- 404 Page ----- */.page-404 {
padding: 80px 0 120px;

  min-height: 60vh;

  display: flex;

  align-items: center;}

.page-404__wrapper {
text-align: center;

  max-width: 560px;

  margin: 0 auto;}

.page-404__visual {
display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  margin-bottom: 32px;}

.page-404__number {
font-size: 120px;

  font-weight: 800;

  line-height: 1;

  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;}

.page-404__icon {
animation: float 3s ease-in-out infinite;}

@keyframes float {
0%, 100% {
transform: translateY(0);

 }

  50% {
transform: translateY(-10px);

 }}

.page-404__title {
font-size: 32px;

  font-weight: 700;

  margin-bottom: 12px;}

.page-404__text {
font-size: 16px;

  color: var(--color-text-light);

  line-height: 1.7;

  margin-bottom: 32px;}

.page-404__actions {
display: flex;

  gap: 16px;

  justify-content: center;

  flex-wrap: wrap;

  margin-bottom: 48px;}

.page-404__actions .btn {
display: inline-flex;

  align-items: center;

  gap: 8px;}

.page-404__suggestions {
border-top: 1px solid var(--color-border);

  padding-top: 32px;}

.page-404__suggestions-title {
font-size: 18px;

  font-weight: 600;

  margin-bottom: 20px;

  color: var(--color-text-light);}

.page-404__links {
display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 12px;}

.page-404__link {
display: flex;

  align-items: center;

  gap: 10px;

  padding: 16px;

  background: var(--color-background);

  border-radius: var(--radius-md);

  transition: all var(--transition-fast);

  font-size: 14px;

  font-weight: 500;}

.page-404__link:hover {
background: var(--color-primary);

  color: var(--color-white);

  transform: translateY(-2px);}

.page-404__link:hover .page-404__link-icon {
color: inherit;}

.page-404__link-icon {
width: 40px;

  height: 40px;

  display: flex;

  align-items: center;

  justify-content: center;

  background: var(--color-white);

  border-radius: var(--radius-full);

  color: var(--color-primary);

  flex-shrink: 0;}

@media (max-width: 767px) {
.page-404 {
padding: 48px 0 80px;

 }

  .page-404__number {
font-size: 80px;

 }

  .page-404__title {
font-size: 24px;

 }

  .page-404__links {
grid-template-columns: 1fr;

 }}

/* ----- Testimonials placeholder avatar ----- */.testimonials__author-image--placeholder {
width: 44px;

  height: 44px;

  border-radius: var(--radius-full);

  background: var(--color-primary-light);

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--color-primary);

  font-weight: 700;

  font-size: 16px;

  flex-shrink: 0;}

/* ----- Section placeholder styles (beauty illustrations) ----- *//* ---- Hero Placeholder: Premium salon atmosphere ---- */.hero__placeholder {
position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background:    /* Base gradient: deep purple to soft pink */    linear-gradient(160deg, #2D1B69 0%, #5B3B8C 25%, #7C5CE6 45%, #B89CF6 65%, #F4F0FF 85%, #FCFAFF 100%);

  overflow: hidden;}

.hero__placeholder-pattern {
position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-image:    /* Large ambient glow spots */    radial-gradient(ellipse at 15% 30%, rgba(184, 156, 246, 0.35) 0%, transparent 50%),    radial-gradient(ellipse at 85% 20%, rgba(124, 92, 230, 0.3) 0%, transparent 50%),    radial-gradient(ellipse at 50% 70%, rgba(45, 27, 105, 0.25) 0%, transparent 50%),    /* Subtle sparkle pattern */    radial-gradient(1px 1px at 20% 15%, rgba(255,255,255,0.4) 0%, transparent 100%),    radial-gradient(1.5px 1.5px at 45% 25%, rgba(255,255,255,0.3) 0%, transparent 100%),    radial-gradient(1px 1px at 70% 10%, rgba(255,255,255,0.35) 0%, transparent 100%),    radial-gradient(1.5px 1.5px at 30% 60%, rgba(255,255,255,0.25) 0%, transparent 100%),    radial-gradient(1px 1px at 75% 55%, rgba(255,255,255,0.3) 0%, transparent 100%),    radial-gradient(1px 1px at 50% 85%, rgba(255,255,255,0.2) 0%, transparent 100%);

  animation: placeholderShimmer 8s ease-in-out infinite alternate;}

@keyframes placeholderShimmer {
0% {
opacity: 0.7;

 }

  100% {
opacity: 1;

 }}

/* Wave overlay at bottom of hero */.hero__placeholder::after {
content: '';

  position: absolute;

  bottom: -2px;

  left: 0;

  width: 100%;

  height: 120px;

  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120'%3E%3Cpath fill='%23FCFAFF' d='M0,32L48,37.3C96,43,192,53,288,58.7C384,64,480,64,576,58.7C672,53,768,43,864,48C960,53,1056,75,1152,80C1248,85,1344,75,1392,69.3L1440,64L1440,120L1392,120C1344,120,1248,120,1152,120C1056,120,960,120,864,120C768,120,672,120,576,120C480,120,384,120,288,120C192,120,96,120,48,120L0,120Z' opacity='0.9'/%3E%3C/svg%3E") no-repeat bottom / cover;

  pointer-events: none;}

/* ---- Featured Categories: Rich gradient cards ---- */.featured-categories__placeholder {
width: 100%;

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  position: relative;

  overflow: hidden;}

.featured-categories__placeholder svg {
opacity: 0.15;

  width: 80px;

  height: 80px;

  color: #FFFFFF;

  position: relative;

  z-index: 1;}

/* Per-card alternating gradients (fallback for placeholder cards) */.featured-categories__card:nth-child(1) .featured-categories__placeholder {
background: linear-gradient(135deg, #7C5CE6 0%, #B89CF6 50%, #D4C4F8 100%);}

.featured-categories__card:nth-child(2) .featured-categories__placeholder {
background: linear-gradient(135deg, #5B3B8C 0%, #8B6FD8 50%, #C4B0F0 100%);}

.featured-categories__card:nth-child(3) .featured-categories__placeholder {
background: linear-gradient(135deg, #2D1B69 0%, #5B3B8C 50%, #9C7AF2 100%);}

.featured-categories__card:nth-child(4) .featured-categories__placeholder {
background: linear-gradient(135deg, #B89CF6 0%, #D4C4F8 50%, #F4F0FF 100%);}

.featured-categories__card:nth-child(5) .featured-categories__placeholder {
background: linear-gradient(135deg, #8B6FD8 0%, #B89CF6 50%, #E8DCFC 100%);}

.featured-categories__card:nth-child(6) .featured-categories__placeholder {
background: linear-gradient(135deg, #6B4AD4 0%, #9C7AF2 50%, #D4C4F8 100%);}

/* Decorative overlay pattern for category cards */.featured-categories__placeholder::before {
content: '';

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-image:     radial-gradient(circle at 30% 40%, rgba(255,255,255,0.15) 0%, transparent 40%),    radial-gradient(circle at 70% 60%, rgba(255,255,255,0.1) 0%, transparent 35%);

  pointer-events: none;}

/* =============================================   CART PAGE   ============================================= *//* =============================================   SEARCH PAGE   ============================================= */.search-page {
padding: 40px 20px 80px;}

.search-page__header {
text-align: center;

  margin-bottom: 40px;}

.search-page__title {
font-size: 28px;

  margin-bottom: 24px;}

.search-page__form {
max-width: 600px;

  margin: 0 auto;}

.search-page__input-wrapper {
display: flex;

  align-items: center;

  gap: 0;

  background: var(--color-white);

  border: 1px solid var(--color-border);

  border-radius: 12px;

  overflow: hidden;

  transition: border-color var(--duration-fast);}

.search-page__input-wrapper:focus-within {
border-color: var(--color-primary);}

.search-page__input-icon {
flex-shrink: 0;

  margin: 0 12px;

  color: var(--color-text-light);

  opacity: 0.5;}

.search-page__input {
flex: 1;

  border: none;

  padding: 14px 0;

  font-size: 16px;

  font-family: inherit;

  background: transparent;

  color: var(--color-text);}

.search-page__input::placeholder {
color: var(--color-text-light);

 opacity: 0.6;

 }

.search-page__input:focus {
outline: none;

 }

.search-page__submit {
border-radius: 0;

  height: 52px;

  padding: 0 32px;}

.search-page__results-header {
margin-bottom: 24px;

  padding-bottom: 16px;

  border-bottom: 1px solid var(--color-border);}

.search-page__results-count {
color: var(--color-text-light);

  font-size: 14px;}

.search-page__grid {
display: grid;

  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));

  gap: 24px;}

.search-page__article {
background: var(--color-white);

  border-radius: 12px;

  overflow: hidden;

  box-shadow: var(--shadow-card);

  transition: box-shadow var(--duration-normal);}

.search-page__article:hover {
box-shadow: var(--shadow-card-hover);}

.search-page__article-link {
text-decoration: none;

  color: inherit;

  display: block;}

.search-page__article-image {
aspect-ratio: 4/3;

  overflow: hidden;}

.search-page__article-image img {
width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform var(--duration-normal);}

.search-page__article:hover .search-page__article-image img {
transform: scale(1.05);}

.search-page__article-content {
padding: 16px;}

.search-page__article-title {
font-size: 16px;

  margin-bottom: 8px;

  color: var(--color-secondary);}

.search-page__article-excerpt {
font-size: 13px;

  color: var(--color-text-light);

  line-height: 1.6;

  margin-bottom: 8px;}

.search-page__article-date {
font-size: 12px;

  color: var(--color-text-light);

  opacity: 0.7;}

.search-page__no-results,.search-page__initial {
text-align: center;

  padding: 60px 20px;}

.search-page__no-results svg,.search-page__initial svg {
margin-bottom: 20px;

  color: var(--color-primary);}

.search-page__no-results h2 {
font-size: 20px;

  margin-bottom: 24px;}

.search-page__tips {
max-width: 400px;

  margin: 0 auto;

  text-align: left;}

.rtl .search-page__tips {
text-align: right;

 }

.search-page__tips h3 {
font-size: 16px;

  margin-bottom: 12px;

  color: var(--color-secondary);}

.search-page__tips ul {
list-style: none;

  padding: 0;}

.search-page__tips li {
padding: 6px 0;

  font-size: 14px;

  color: var(--color-text-light);}

.search-page__tips li::before {
content: '•';

  color: var(--color-primary);

  margin-left: 8px;}

.rtl .search-page__tips li::before {
margin-left: 0;

  margin-right: 8px;}

.search-page__pagination {
margin-top: 40px;}

/* =============================================   CUSTOMER AUTH (Login / Register / Reset)   ============================================= */.customer-auth {
min-height: 70vh;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 60px 20px;}

.customer-auth__form-wrapper {
width: 100%;

  max-width: 420px;

  background: var(--color-white);

  border-radius: 12px;

  box-shadow: var(--shadow-card);

  padding: 40px;}

.customer-auth__title {
font-size: 24px;

  text-align: center;

  margin-bottom: 8px;}

.customer-auth__intro {
text-align: center;

  color: var(--color-text-light);

  font-size: 14px;

  margin-bottom: 24px;

  line-height: 1.6;}

.customer-auth__field {
margin-bottom: 16px;}

.customer-auth__field label {
display: block;

  font-size: 13px;

  font-weight: 600;

  margin-bottom: 6px;

  color: var(--color-text);}

.customer-auth__input {
width: 100%;

  padding: 12px 14px;

  border: 1px solid var(--color-border);

  border-radius: 8px;

  font-size: 14px;

  font-family: inherit;

  background: var(--color-white);

  transition: border-color var(--duration-fast);

  color: var(--color-text);}

.customer-auth__input:focus {
outline: none;

  border-color: var(--color-primary);}

.customer-auth__links {
display: flex;

  justify-content: space-between;

  margin-top: 16px;

  font-size: 13px;}

.customer-auth__links a {
color: var(--color-primary);

  text-decoration: none;}

.customer-auth__links a:hover {
text-decoration: underline;}

.customer-auth .btn {
margin-top: 8px;}

/* =============================================   CUSTOMER ACCOUNT DASHBOARD   ============================================= */.customer-account {
padding: 40px 20px 80px;}

.customer-account__header {
display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 12px;

  margin-bottom: 40px;

  padding-bottom: 20px;

  border-bottom: 1px solid var(--color-border);}

.customer-account__title {
font-size: 28px;

  margin: 0;}

.customer-account__greeting {
color: var(--color-text-light);

  font-size: 14px;

  flex: 1;}

.customer-account__logout {
margin-right: auto;}

.rtl .customer-account__logout {
margin-right: 0;

  margin-left: auto;}

.customer-account__grid {
display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 40px;}

@media (max-width: 768px) {
.customer-account__grid {
grid-template-columns: 1fr;

 }}

.customer-account__section-title {
display: flex;

  align-items: center;

  gap: 8px;

  font-size: 18px;

  margin-bottom: 20px;

  padding-bottom: 12px;

  border-bottom: 1px solid var(--color-border);}

.customer-account__section-title svg {
color: var(--color-primary);}

.customer-account__orders {
display: flex;

  flex-direction: column;

  gap: 8px;}

.customer-account__order {
display: flex;

  align-items: center;

  gap: 12px;

  padding: 14px;

  background: var(--color-section-hero-bg);

  border-radius: 8px;

  text-decoration: none;

  color: inherit;

  transition: background var(--duration-fast);}

.customer-account__order:hover {
background: var(--color-section-featured-bg);}

.customer-account__order-info {
flex: 1;}

.customer-account__order-number {
display: block;

  font-weight: 600;

  font-size: 14px;}

.customer-account__order-date {
font-size: 12px;

  color: var(--color-text-light);}

.customer-account__order-meta {
display: flex;

  align-items: center;

  gap: 12px;}

.customer-account__order-status {
font-size: 12px;

  padding: 2px 8px;

  border-radius: 4px;}

.customer-account__order-total {
font-weight: 600;

  font-size: 14px;

  white-space: nowrap;}

.customer-account__order svg {
color: var(--color-text-light);

  opacity: 0.5;}

.customer-account__view-all {
display: block;

  text-align: center;

  margin-top: 12px;

  font-size: 14px;

  color: var(--color-primary);

  text-decoration: none;}

.customer-account__empty {
text-align: center;

  padding: 32px;

  color: var(--color-text-light);}

.customer-account__empty p {
margin-bottom: 16px;}

.customer-account__addresses {
display: flex;

  flex-direction: column;

  gap: 12px;}

.customer-account__address {
padding: 14px;

  background: var(--color-section-hero-bg);

  border-radius: 8px;

  font-size: 13px;

  line-height: 1.6;}

.customer-account__address p {
margin: 0;

 }

.customer-account__address-badge {
display: inline-block;

  font-size: 11px;

  font-weight: 600;

  background: var(--color-primary);

  color: var(--color-white);

  padding: 2px 8px;

  border-radius: 4px;

  margin-bottom: 6px;}

/* =============================================   CUSTOMER ADDRESSES   ============================================= */.customer-addresses {
padding: 40px 20px 80px;}

.customer-addresses__header {
display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 24px;}

.customer-addresses__title {
font-size: 28px;

  margin: 0;}

.customer-addresses__add-btn {
margin-bottom: 24px;}

.customer-addresses__grid {
display: grid;

  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));

  gap: 20px;

  margin-bottom: 40px;}

.customer-addresses__card {
background: var(--color-white);

  border: 1px solid var(--color-border);

  border-radius: 12px;

  padding: 20px;

  position: relative;}

.customer-addresses__default-badge {
position: absolute;

  top: -8px;

  right: 12px;

  font-size: 11px;

  font-weight: 600;

  background: var(--color-success);

  color: var(--color-white);

  padding: 2px 10px;

  border-radius: 4px;}

.rtl .customer-addresses__default-badge {
right: auto;

  left: 12px;}

.customer-addresses__content {
line-height: 1.8;

  font-size: 14px;

  margin-bottom: 16px;}

.customer-addresses__actions {
display: flex;

  gap: 8px;

  flex-wrap: wrap;}

.customer-addresses__delete {
color: var(--color-sale) !important;}

.customer-addresses__form-wrapper {
max-width: 600px;

  background: var(--color-white);

  border: 1px solid var(--color-border);

  border-radius: 12px;

  padding: 28px;

  margin-bottom: 40px;}

.customer-addresses__form-wrapper h2 {
font-size: 18px;

  margin-bottom: 20px;}

.customer-addresses__form-grid {
display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 12px;}

@media (max-width: 600px) {
.customer-addresses__form-grid {
grid-template-columns: 1fr;

 }}

.customer-addresses__field-full {
grid-column: 1 / -1;}

.customer-addresses__form-actions {
display: flex;

  gap: 12px;

  margin-top: 16px;}

/* =============================================   CUSTOMER ORDER DETAILS   ============================================= */.customer-order {
padding: 40px 20px 80px;

  max-width: 800px;}

.customer-order__header {
margin-bottom: 32px;}

.customer-order__title {
font-size: 28px;

  margin-bottom: 12px;}

.customer-order__meta {
display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 12px;

  font-size: 14px;

  color: var(--color-text-light);

  margin-bottom: 16px;}

.customer-order__items {
border: 1px solid var(--color-border);

  border-radius: 12px;

  overflow: hidden;

  margin-bottom: 32px;}

.customer-order__items-header {
display: grid;

  grid-template-columns: 1fr 100px 80px 100px;

  gap: 12px;

  padding: 14px 20px;

  background: var(--color-section-hero-bg);

  font-size: 12px;

  font-weight: 600;

  color: var(--color-text-light);

  text-transform: uppercase;

  letter-spacing: 0.5px;}

.customer-order__item {
display: grid;

  grid-template-columns: 1fr 100px 80px 100px;

  gap: 12px;

  padding: 16px 20px;

  align-items: center;

  border-top: 1px solid var(--color-border);

  font-size: 14px;}

.customer-order__item-info {
display: flex;

  align-items: center;

  gap: 12px;}

.customer-order__item-image {
width: 60px;

  height: 60px;

  flex-shrink: 0;

  border-radius: 8px;

  overflow: hidden;

  background: var(--color-section-hero-bg);}

.customer-order__item-image img {
width: 100%;

  height: 100%;

  object-fit: cover;}

.customer-order__item-title {
display: block;

  font-weight: 600;

  font-size: 14px;}

.customer-order__item-variant,.customer-order__item-selling-plan {
display: block;

  font-size: 12px;

  color: var(--color-text-light);}

.customer-order__item-price,.customer-order__item-qty,.customer-order__item-total {
text-align: center;

  font-size: 14px;}

.customer-order__item-total {
font-weight: 600;}

.customer-order__summary {
max-width: 380px;

  margin-right: auto;

  margin-bottom: 32px;}

.rtl .customer-order__summary {
margin-right: 0;

  margin-left: auto;}

.customer-order__summary-row {
display: flex;

  justify-content: space-between;

  padding: 8px 0;

  font-size: 14px;}

.customer-order__summary-discount {
color: var(--color-success);

 }

.customer-order__summary-divider {
height: 1px;

  background: var(--color-border);

  margin: 8px 0;}

.customer-order__summary-total {
font-weight: 700;

  font-size: 18px;

  padding: 12px 0;}

.customer-order__address {
margin-top: 24px;}

.customer-order__address h3 {
font-size: 16px;

  margin-bottom: 12px;}

.customer-order__address-card {
background: var(--color-section-hero-bg);

  border-radius: 8px;

  padding: 16px;

  font-size: 14px;

  line-height: 1.8;}

/* =============================================   BADGE COMPONENT (for order statuses)   ============================================= */.badge {
display: inline-block;

  font-size: 11px;

  font-weight: 600;

  padding: 3px 10px;

  border-radius: 20px;

  text-transform: uppercase;

  letter-spacing: 0.3px;}

.badge--fulfilled,.badge--paid {
background: #e8f5e9;

 color: #2e7d32;

 }

.badge--partial,.badge--partially-paid {
background: #fff3e0;

 color: #e65100;

 }

.badge--unfulfilled,.badge--pending {
background: #fff8e1;

 color: #f57f17;

 }

.badge--cancelled,.badge--refunded {
background: #fbe9e7;

 color: #c62828;

 }

.badge--restocked {
background: #e3f2fd;

 color: #1565c0;

 }

/* =============================================   PAGE (default page template)   ============================================= */.page__content {
max-width: 800px;

  margin: 0 auto;

  padding: 60px 20px;

  line-height: 1.8;}

.page__content h1 {
font-size: 32px;

  margin-bottom: 24px;}

.page__content h2 {
font-size: 24px;

  margin: 32px 0 16px;}

.page__content p {
margin-bottom: 16px;

  color: var(--color-text);}

.page__content ul, .page__content ol {
margin-bottom: 16px;

  padding-right: 20px;}

.rtl .page__content ul,.rtl .page__content ol {
padding-right: 20px;

  padding-left: 0;}

.page__content li {
margin-bottom: 8px;}

.page__content a {
color: var(--color-primary);}

/* =============================================   NEWSLETTER POPUP   ============================================= */.newsletter-popup {
position: fixed;

  inset: 0;

  z-index: var(--z-modal);

  display: flex;

  align-items: center;

  justify-content: center;

  background: rgba(0,0,0,0.5);

  opacity: 0;

  visibility: hidden;

  transition: opacity 0.3s ease, visibility 0.3s ease;}

.newsletter-popup[hidden] {
opacity: 0;

  visibility: hidden;}

.newsletter-popup:not([hidden]) {
opacity: 1;

  visibility: visible;}

.newsletter-popup__overlay {
position: absolute;

  inset: 0;

  background: #000;

  opacity: 0.5;}

.newsletter-popup__container {
position: relative;

  max-width: 500px;

  width: 90%;

  max-height: 85vh;

  display: flex;

  flex-direction: column;

  background: var(--color-white);

  border-radius: var(--radius-lg);

  overflow: hidden;

  box-shadow: var(--shadow-xl);

  z-index: 2;}

.newsletter-popup__close {
position: absolute;

  top: 16px;

  right: 16px;

  width: 36px;

  height: 36px;

  display: flex;

  align-items: center;

  justify-content: center;

  background: transparent;

  border: none;

  color: var(--color-text-light);

  transition: color 0.2s ease;

  z-index: 3;}

.newsletter-popup__close:hover {
color: var(--color-text);}

.newsletter-popup__content {
flex: 1;

  display: flex;

  gap: 24px;

  padding: 32px;

  overflow: hidden;}

@media (max-width: 768px) {
.newsletter-popup__content {
flex-direction: column;

    text-align: center;

  }}

.newsletter-popup__visual {
flex: 0 0 200px;

  display: flex;

  align-items: center;

  justify-content: center;}

@media (max-width: 768px) {
.newsletter-popup__visual {
flex: 0 0 120px;

  }}

.newsletter-popup__image {
width: 100%;

  height: auto;

  max-height: 300px;

  object-fit: contain;}

.newsletter-popup__illustration {
display: flex;

  align-items: center;

  justify-content: center;

  padding: 24px;}

.newsletter-popup__text {
flex: 1;

  display: flex;

  flex-direction: column;

  gap: 16px;}

.newsletter-popup__badge {
display: inline-block;

  background: var(--color-success-bg, #e6f7e6);

  color: var(--color-success, #2e7d32);

  padding: 4px 12px;

  border-radius: 12px;

  font-size: 12px;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 0.5px;}

.newsletter-popup__title {
margin: 0;

  font-size: 24px;

  font-weight: 700;

  color: var(--color-text);

  line-height: 1.3;}

.newsletter-popup__subtitle {
margin: 0;

  font-size: 16px;

  color: var(--color-text-light);

  line-height: 1.5;}

.newsletter-popup__benefits {
list-style: none;

  padding: 0;

  margin: 8px 0 0;

  display: flex;

  flex-direction: column;

  gap: 8px;}

.newsletter-popup__benefits li {
display: flex;

  align-items: center;

  gap: 8px;

  font-size: 14px;

  color: var(--color-text-light);}

.newsletter-popup__benefits li svg {
flex-shrink: 0;

  width: 18px;

  height: 18px;}

.newsletter-popup__input-wrapper {
position: relative;

  display: flex;

  gap: 8px;}

.newsletter-popup__input {
flex: 1;

  padding: 14px 16px;

  border: 1px solid var(--color-border);

  border-radius: var(--radius-sm);

  font-size: 14px;

  font-weight: 400;

  transition: border-color 0.2s ease;}

.newsletter-popup__input:focus {
outline: none;

  border-color: var(--color-primary);}

.newsletter-popup__submit {
flex: 0 0 auto;

  padding: 14px 24px;

  font-size: 14px;

  font-weight: 600;

  transition: background 0.2s ease;}

.newsletter-popup__submit:hover:not(:disabled) {
background: var(--color-primary-hover, #8b6f47);}

.newsletter-popup__submit:disabled {
opacity: 0.6;

  cursor: not-allowed;}

.newsletter-popup__success {
display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

  padding: 32px;}

.newsletter-popup__success-icon {
width: 64px;

  height: 64px;

  margin-bottom: 16px;

  display: flex;

  align-items: center;

  justify-content: center;}

.newsletter-popup__success-icon svg {
width: 100%;

  height: 100%;}

.newsletter-popup__success-title {
margin: 0 0 8px;

  font-size: 20px;

  font-weight: 700;

  color: var(--color-text);}

.newsletter-popup__success-text {
margin: 0;

  font-size: 16px;

  color: var(--color-text-light);

  line-height: 1.5;}

.newsletter-popup__secondary {
margin-top: 24px;

  font-size: 14px;

  color: var(--color-text-light);

  text-align: center;}

/* Related Products - use existing product-card styles *//* ----- Product Card Quick View Button ----- */.product-card__quickview {
position: absolute;

  top: 8px;

  right: 8px;

  z-index: 3;

  width: 36px;

  height: 36px;

  border-radius: var(--radius-full);

  background: var(--color-white);

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: var(--shadow-sm);

  color: var(--color-text-light);

  transition: all var(--transition-fast);

  opacity: 0;

  transform: translateY(-4px);}

.product-card:hover .product-card__quickview {
opacity: 1;

  transform: translateY(0);}

.product-card__quickview:hover {
color: var(--color-primary);

  box-shadow: var(--shadow-md);

  transform: scale(1.1);}

/* ----- Quick View Modal ----- */.quickview-modal {
display: none;

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 1000;

  align-items: center;

  justify-content: center;}

.quickview-modal.is-open {
display: flex;}

.quickview-modal__overlay {
position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(0,0,0,0.5);}

.quickview-modal__content {
position: relative;

  width: 90%;

  max-width: 900px;

  max-height: 90vh;

  background: var(--color-white);

  border-radius: var(--radius-lg);

  overflow: hidden;

  display: flex;

  flex-direction: column;

  z-index: 1;

  box-shadow: var(--shadow-xl);}

.quickview-modal__close {
position: absolute;

  top: 16px;

  left: 16px;

  z-index: 2;

  width: 40px;

  height: 40px;

  border-radius: var(--radius-full);

  background: var(--color-white);

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: var(--shadow-md);

  color: var(--color-text);

  transition: all var(--transition-fast);}

.quickview-modal__close:hover {
color: var(--color-sale);

  transform: scale(1.1);}

.quickview-modal__body {
flex: 1;

  overflow-y: auto;

  padding: 32px;}

.quickview-modal__loader {
display: flex;

  align-items: center;

  justify-content: center;

  min-height: 300px;}

.quickview-modal__spinner {
width: 40px;

  height: 40px;

  border: 3px solid var(--color-border);

  border-top-color: var(--color-primary);

  border-radius: 50%;

  animation: qvSpinner 0.6s linear infinite;}

@keyframes qvSpinner {
to {
transform: rotate(360deg);

 }}

.quickview-modal__grid {
display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 32px;}

.quickview-modal__image-wrapper {
aspect-ratio: 1;

  background: var(--color-background);

  border-radius: var(--radius-md);

  overflow: hidden;

  display: flex;

  align-items: center;

  justify-content: center;}

.quickview-modal__image {
max-width: 100%;

  max-height: 420px;

  object-fit: contain;}

.quickview-modal__title {
font-size: 24px;

  font-weight: 700;

  margin-bottom: 12px;}

.quickview-modal__price {
display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 20px;}

.quickview-modal__price-current {
font-size: 24px;

  font-weight: 800;

  color: var(--color-text);}

.quickview-modal__price-compare {
font-size: 16px;

  color: var(--color-text-light);

  text-decoration: line-through;}

.quickview-modal__description {
font-size: 14px;

  line-height: 1.7;

  color: var(--color-text-light);

  margin-bottom: 24px;

  max-height: 120px;

  overflow-y: auto;}

.quickview-modal__actions {
display: flex;

  gap: 16px;}

.quickview-modal__add-to-cart {
flex: 1;

  gap: 8px;}

.quickview-modal__view-details {
white-space: nowrap;}

@media (max-width: 767px) {
.quickview-modal__grid {
grid-template-columns: 1fr;

    gap: 20px;

  }

  .quickview-modal__body {
padding: 20px;

 }

  .quickview-modal__image {
max-height: 280px;

 }

  .quickview-modal__title {
font-size: 20px;

 }}

/* ----- Image Lightbox ----- */.lightbox {
display: none;

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 1100;

  background: rgba(0,0,0,0.9);

  align-items: center;

  justify-content: center;}

.lightbox.is-open {
display: flex;}

.lightbox__image {
max-width: 90%;

  max-height: 90%;

  object-fit: contain;}

.lightbox__close {
position: absolute;

  top: 20px;

  right: 20px;

  width: 48px;

  height: 48px;

  border-radius: var(--radius-full);

  background: rgba(255,255,255,0.2);

  color: var(--color-white);

  display: flex;

  align-items: center;

  justify-content: center;

  transition: background var(--transition-fast);}

.lightbox__close:hover {
background: rgba(255,255,255,0.4);}

.lightbox__nav {
position: absolute;

  top: 50%;

  transform: translateY(-50%);

  width: 48px;

  height: 48px;

  border-radius: var(--radius-full);

  background: rgba(255,255,255,0.2);

  color: var(--color-white);

  display: flex;

  align-items: center;

  justify-content: center;

  transition: background var(--transition-fast);}

.lightbox__nav:hover {
background: rgba(255,255,255,0.4);}

.lightbox__nav--prev {
right: 20px;}

.lightbox__nav--next {
left: 20px;}

/* ----- Recently Viewed ----- */.recently-viewed {
padding: 60px 0;

  background-color: var(--color-section-featured-bg);}

.recently-viewed .product-card {
box-shadow: var(--shadow-card);}

@media (max-width: 767px) {
.recently-viewed {
padding: 40px 0;

 }}

/* =============================================   PRODUCT PAGE — Premium Redesign   ============================================= *//* ---- 2-Column Product Layout (Desktop) ---- */body.template-product #MainContent {
max-width: var(--page-width);

  margin: 0 auto;

  padding: 40px var(--gutter);

  background: transparent;}

body.template-product #MainContent > .shopify-section:first-child,body.template-product #MainContent > .shopify-section:nth-child(2) {
display: inline;}

@media (min-width: 1024px) {
body.template-product #MainContent {
display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 48px;

    align-items: start;

  }

  body.template-product #MainContent > .shopify-section:nth-child(n+3) {
grid-column: 1 / -1;

    max-width: 100%;

  }}

@media (min-width: 1200px) {
body.template-product #MainContent {
gap: 64px;

  }}

@media (max-width: 1023px) {
body.template-product #MainContent {
padding: 20px var(--gutter-mobile);

  }}

/* ---- Product Gallery (New) ---- */.product-gallery {
position: sticky;

  top: calc(var(--header-height) + 24px);}

.product-gallery__main {
position: relative;}

.product-gallery__featured {
position: relative;

  border-radius: var(--radius-lg);

  overflow: hidden;

  background: var(--color-background);

  aspect-ratio: 1 / 1;

  cursor: crosshair;}

.product-gallery__slide {
position: absolute;

  inset: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  opacity: 0;

  visibility: hidden;

  transition: opacity var(--transition-base), visibility var(--transition-base);}

.product-gallery__slide.is-active {
opacity: 1;

  visibility: visible;

  position: relative;}

.product-gallery__image-wrap {
position: relative;

  width: 100%;

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;}

.product-gallery__image {
max-width: 100%;

  max-height: 100%;

  width: 100%;

  height: 100%;

  object-fit: contain;

  padding: 16px;

  transition: opacity var(--transition-fast);

  user-select: none;

  -webkit-user-drag: none;}

.product-gallery__image-wrap:hover .product-gallery__image {
cursor: crosshair;}

/* Zoom lens */.product-gallery__zoom-lens {
display: none;

  position: absolute;

  width: 120px;

  height: 120px;

  border: 2px solid var(--color-primary);

  background: rgba(255,255,255,0.2);

  pointer-events: none;

  z-index: 5;

  border-radius: 50%;}

.product-gallery__zoom-result {
display: none;

  position: fixed;

  top: 0;

  right: 0;

  width: 400px;

  height: 400px;

  border: 1px solid var(--color-border);

  background-repeat: no-repeat;

  z-index: 1000;

  border-radius: var(--radius-md);

  box-shadow: var(--shadow-xl);

  background-color: var(--color-white);

  pointer-events: none;}

@media (max-width: 1023px) {
.product-gallery__zoom-lens,  .product-gallery__zoom-result {
display: none !important;

 }}

/* Video */.product-gallery__media-video {
position: relative;

  width: 100%;

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  background: #000;}

.product-gallery__video {
width: 100%;

  height: 100%;

  object-fit: contain;}

.product-gallery__video-play {
position: absolute;

  inset: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  background: transparent;

  transition: opacity var(--transition-fast);}

.product-gallery__video-play:hover svg circle {
fill: rgba(0,0,0,0.7);}

/* Thumbnail row */.product-gallery__thumbs-wrap {
display: flex;

  align-items: center;

  gap: 8px;

  margin-top: 12px;

  position: relative;}

.product-gallery__thumbs {
display: flex;

  gap: 8px;

  overflow-x: auto;

  scroll-behavior: smooth;

  -webkit-overflow-scrolling: touch;

  scrollbar-width: none;

  flex: 1;

  padding: 2px;}

.product-gallery__thumbs::-webkit-scrollbar {
display: none;

 }

.product-gallery__thumb {
flex-shrink: 0;

  width: 64px;

  height: 64px;

  border-radius: var(--radius-md);

  overflow: hidden;

  border: 2px solid transparent;

  background: var(--color-background);

  cursor: pointer;

  transition: border-color var(--transition-fast), opacity var(--transition-fast);

  padding: 0;

  opacity: 0.6;}

.product-gallery__thumb:hover {
opacity: 0.85;

 }

.product-gallery__thumb.is-active {
border-color: var(--color-primary);

  opacity: 1;}

.product-gallery__thumb-img-wrap {
width: 100%;

  height: 100%;

  position: relative;}

.product-gallery__thumb-img {
width: 100%;

  height: 100%;

  object-fit: cover;}

.product-gallery__thumb-video-icon {
position: absolute;

  bottom: 2px;

  right: 2px;

  width: 18px;

  height: 18px;

  border-radius: 50%;

  background: rgba(0,0,0,0.5);

  color: white;

  display: flex;

  align-items: center;

  justify-content: center;}

.product-gallery__thumb-arrow {
flex-shrink: 0;

  width: 28px;

  height: 28px;

  border-radius: var(--radius-full);

  background: var(--color-secondary-bg);

  color: var(--color-text);

  display: flex;

  align-items: center;

  justify-content: center;

  transition: background var(--transition-fast);

  cursor: pointer;

  border: none;}

.product-gallery__thumb-arrow:hover {
background: var(--color-primary-light);}

.product-gallery__thumb-arrow:disabled {
opacity: 0.3;

  cursor: default;}

/* Dot indicators (mobile) */.product-gallery__dots {
display: none;

  justify-content: center;

  gap: 6px;

  margin-top: 12px;}

.product-gallery__dot {
width: 8px;

  height: 8px;

  border-radius: var(--radius-full);

  background: var(--color-border);

  cursor: pointer;

  transition: background var(--transition-fast), transform var(--transition-fast);

  border: none;

  padding: 0;}

.product-gallery__dot.is-active {
background: var(--color-primary);

  transform: scale(1.3);}

@media (max-width: 767px) {
.product-gallery {
position: static;

    margin: 0 calc(-1 * var(--gutter-mobile));

    border-radius: 0;

  }

  .product-gallery__featured {
border-radius: 0;

    aspect-ratio: 1 / 1;

  }

  .product-gallery__image {
padding: 12px;

 }

  .product-gallery__thumbs-wrap {
display: none;

 }

  .product-gallery__dots {
display: flex;

 }

  .product-gallery__thumb {
width: 48px;

 height: 48px;

 }}

@media (min-width: 768px) {
.product-gallery__dots {
display: none;

 }}

/* Placeholder */.product-gallery__placeholder {
aspect-ratio: 1;

  background: var(--color-background);

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: var(--radius-lg);}

.product-gallery__placeholder-svg {
width: 60%;

  height: 60%;

  color: var(--color-border);}

/* ---- Product Info (New) ---- */.product-info {
padding: 0;}

.product-info__wrapper {
display: flex;

  flex-direction: column;

  gap: 0;}

.product-info__title {
font-size: 28px;

  font-weight: 700;

  line-height: 1.25;

  margin-bottom: 12px;

  color: var(--color-text);}

/* Rating */.product-info__rating {
display: flex;

  align-items: center;

  gap: 8px;

  margin-bottom: 16px;}

.product-info__stars {
display: flex;

  gap: 3px;}

.product-info__stars svg {
width: 16px;

  height: 16px;}

.product-info__rating-text {
display: flex;

  align-items: center;

  gap: 6px;

  font-size: 14px;

  color: var(--color-text-light);}

.product-info__rating-average {
font-weight: 700;

  color: var(--color-text);}

.product-info__rating-divider {
color: var(--color-border);

  font-weight: 300;}

.product-info__rating-count {
cursor: pointer;

  text-decoration: underline;

  text-underline-offset: 2px;

  text-decoration-color: var(--color-border);

  transition: color var(--transition-fast);}

.product-info__rating-count:hover {
color: var(--color-primary);}

/* Price */.product-info__price {
display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 16px;

  flex-wrap: wrap;}

.product-info__price-current {
font-size: 30px;

  font-weight: 800;

  color: var(--color-text);

  line-height: 1.1;}

.product-info__price-compare {
font-size: 18px;

  color: var(--color-text-light);

  text-decoration: line-through;}

.product-info__price-save {
display: inline-flex;

  align-items: center;

  padding: 4px 12px;

  background: rgba(255, 90, 95, 0.1);

  color: var(--color-sale);

  border-radius: 20px;

  font-size: 13px;

  font-weight: 700;

  letter-spacing: 0.5px;}

/* Badges Row */.product-info__badges {
display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-bottom: 16px;}

.product-info__badge {
display: inline-flex;

  align-items: center;

  gap: 6px;

  padding: 6px 14px;

  border-radius: 20px;

  font-size: 13px;

  font-weight: 600;}

.product-info__badge--cod {
background: #E8F5E9;

  color: #2E7D32;}

.product-info__badge--shipping {
background: #E3F2FD;

  color: #1565C0;}

.product-info__badge--returns {
background: #FFF3E0;

  color: #E65100;}

/* Availability */.product-info__availability {
display: flex;

  align-items: center;

  gap: 8px;

  margin-bottom: 20px;

  padding: 10px 16px;

  background: var(--color-background);

  border-radius: var(--radius-md);}

.product-info__availability-dot {
width: 8px;

  height: 8px;

  border-radius: 50%;

  flex-shrink: 0;}

.product-info__availability-dot--in-stock {
background: var(--color-success);

  box-shadow: 0 0 6px rgba(56, 161, 105, 0.4);}

.product-info__availability-dot--out-of-stock {
background: var(--color-sale);}

.product-info__availability-text {
font-size: 14px;

  font-weight: 600;}

/* Variants */.product-info__variants {
margin-bottom: 20px;}

.product-info__option {
margin-bottom: 12px;}

.product-info__option:last-child {
margin-bottom: 0;}

.product-info__option-label {
display: block;

  font-size: 13px;

  font-weight: 600;

  margin-bottom: 8px;

  text-transform: uppercase;

  letter-spacing: 0.5px;

  color: var(--color-text-light);}

.product-info__option-values {
display: flex;

  flex-wrap: wrap;

  gap: 8px;}

.product-info__option-btn {
padding: 10px 22px;

  border: 2px solid var(--color-border);

  border-radius: var(--radius-md);

  font-size: 14px;

  font-weight: 500;

  background: var(--color-white);

  color: var(--color-text);

  cursor: pointer;

  transition: all var(--transition-fast);

  min-height: 44px;}

.product-info__option-btn:hover {
border-color: var(--color-primary);

  color: var(--color-primary);}

.product-info__option-btn.is-active {
border-color: var(--color-primary);

  background: var(--color-primary);

  color: var(--color-white);}

/* Purchase Section */.product-info__purchase {
display: flex;

  flex-direction: column;

  gap: 12px;

  margin-bottom: 24px;

  padding: 20px;

  background: var(--color-background);

  border-radius: var(--radius-lg);

  border: 1px solid var(--color-border);}

/* Quantity */.product-info__quantity {
display: flex;

  align-items: center;

  gap: 12px;}

.product-info__qty-label {
font-size: 14px;

  font-weight: 600;

  color: var(--color-text);

  flex-shrink: 0;}

.product-info__qty-selector {
display: flex;

  align-items: center;

  border: 2px solid var(--color-border);

  border-radius: var(--radius-md);

  overflow: hidden;

  background: var(--color-white);}

.product-info__qty-btn {
width: 42px;

  height: 44px;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  transition: background var(--transition-fast), color var(--transition-fast);

  color: var(--color-text);

  border: none;

  background: transparent;}

.product-info__qty-btn:hover {
background: var(--color-secondary-bg);

  color: var(--color-primary);}

.product-info__qty-input {
width: 50px;

  height: 44px;

  text-align: center;

  border: none;

  border-left: 2px solid var(--color-border);

  border-right: 2px solid var(--color-border);

  font-weight: 700;

  font-size: 16px;

  -moz-appearance: textfield;

  background: transparent;}

.product-info__qty-input::-webkit-outer-spin-button,.product-info__qty-input::-webkit-inner-spin-button {
-webkit-appearance: none;

  margin: 0;}

/* Buttons */.product-info__buttons {
display: flex;

  gap: 10px;}

.product-info__atc {
flex: 1;

  gap: 8px;

  padding: 16px 24px;

  font-size: 16px;}

.product-info__buy-now {
flex: 1;

  gap: 8px;

  padding: 16px 24px;

  font-size: 16px;}

@media (max-width: 400px) {
.product-info__buttons {
flex-direction: column;

  }}

/* Wishlist button */.product-info__wishlist-btn {
display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  padding: 12px;

  border: 2px solid var(--color-border);

  border-radius: var(--radius-md);

  background: var(--color-white);

  color: var(--color-text-light);

  font-size: 14px;

  font-weight: 600;

  cursor: pointer;

  transition: all var(--transition-fast);

  width: 100%;}

.product-info__wishlist-btn:hover {
border-color: var(--color-sale);

  color: var(--color-sale);

  background: rgba(255, 90, 95, 0.04);}

.product-info__wishlist-btn.is-active {
border-color: var(--color-sale);

  color: var(--color-sale);

  background: rgba(255, 90, 95, 0.08);}

.product-info__wishlist-btn.is-active svg {
fill: var(--color-sale);}

/* Benefits */.product-info__benefits {
margin-bottom: 24px;}

.product-info__benefits-title {
font-size: 15px;

  font-weight: 700;

  margin-bottom: 12px;

  color: var(--color-text);}

.product-info__benefits-list {
display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 10px;}

@media (max-width: 400px) {
.product-info__benefits-list {
grid-template-columns: 1fr;

  }}

.product-info__benefit {
display: flex;

  align-items: flex-start;

  gap: 10px;

  padding: 12px;

  background: var(--color-background);

  border-radius: var(--radius-md);}

.product-info__benefit-icon {
flex-shrink: 0;

  width: 20px;

  height: 20px;

  color: var(--color-primary);

  margin-top: 1px;}

.product-info__benefit-text {
font-size: 13px;

  line-height: 1.4;

  color: var(--color-text);}

/* Trust Section */.product-info__trust {
display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 12px;

  margin-bottom: 20px;}

@media (max-width: 400px) {
.product-info__trust {
grid-template-columns: 1fr;

  }}

.product-info__trust-item {
display: flex;

  align-items: center;

  gap: 10px;

  padding: 12px;

  background: var(--color-white);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-md);}

.product-info__trust-icon {
flex-shrink: 0;

  width: 20px;

  height: 20px;

  color: var(--color-primary);}

.product-info__trust-content {
display: flex;

  flex-direction: column;}

.product-info__trust-content strong {
font-size: 13px;

  font-weight: 700;

  color: var(--color-text);}

.product-info__trust-content span {
font-size: 11px;

  color: var(--color-text-light);

  line-height: 1.3;}

/* Payment badges */.product-info__payment {
display: flex;

  align-items: center;

  gap: 12px;

  padding: 16px;

  border: 1px solid var(--color-border);

  border-radius: var(--radius-md);

  margin-bottom: 12px;}

.product-info__payment-label {
font-size: 12px;

  color: var(--color-text-light);

  font-weight: 500;

  white-space: nowrap;}

.product-info__payment-icons {
display: flex;

  gap: 6px;}

.product-info__payment-icons svg {
width: 32px;

  height: 20px;

  color: var(--color-text-light);

  opacity: 0.6;}

/* Share */.product-info__share {
margin-bottom: 0;}

.product-info__share-btn {
display: inline-flex;

  align-items: center;

  gap: 6px;

  padding: 6px 14px;

  border-radius: 20px;

  font-size: 13px;

  font-weight: 500;

  color: var(--color-text-light);

  cursor: pointer;

  transition: all var(--transition-fast);

  border: 1px solid var(--color-border);

  background: transparent;}

.product-info__share-btn:hover {
border-color: var(--color-primary);

  color: var(--color-primary);

  background: var(--color-secondary-bg);}

@media (max-width: 1023px) {
.product-info__title {
font-size: 22px;

 }

  .product-info__price-current {
font-size: 24px;

 }

  .product-info__purchase {
padding: 16px;

 }

  .product-info__benefits-list {
grid-template-columns: 1fr;

 }}

/* ---- Product Description Accordion ---- */.product-desc {
padding: 40px 0 60px;

  background: var(--color-white);}

.product-desc__inner {
max-width: 800px;

  margin: 0 auto;}

.product-desc__accordion {
border-bottom: 1px solid var(--color-border);}

.product-desc__accordion:first-child {
border-top: 1px solid var(--color-border);}

.product-desc__trigger {
display: flex;

  align-items: center;

  justify-content: space-between;

  width: 100%;

  padding: 18px 0;

  font-size: 15px;

  font-weight: 600;

  color: var(--color-text);

  background: transparent;

  border: none;

  cursor: pointer;

  text-align: start;

  transition: color var(--transition-fast);

  gap: 16px;}

.product-desc__trigger:hover {
color: var(--color-primary);}

.product-desc__trigger-text {
flex: 1;}

.product-desc__trigger-icon {
flex-shrink: 0;

  transition: transform var(--transition-base);

  color: var(--color-text-light);}

.product-desc__trigger[aria-expanded="true"] .product-desc__trigger-icon {
transform: rotate(180deg);}

.product-desc__panel {
overflow: hidden;

  transition: max-height var(--transition-slow), opacity var(--transition-base);}

.product-desc__panel[hidden] {
display: block;

  max-height: 0;

  opacity: 0;

  padding: 0;

  overflow: hidden;}

.product-desc__panel:not([hidden]) {
max-height: 2000px;

  opacity: 1;}

.product-desc__content {
padding-bottom: 24px;}

.product-desc__rte {
font-size: 15px;

  line-height: 1.8;

  color: var(--color-text);}

.product-desc__rte p {
margin-bottom: 12px;}

.product-desc__rte ul,.product-desc__rte ol {
padding-right: 20px;

  margin-bottom: 12px;}

.product-desc__rte li {
margin-bottom: 6px;}

/* Specs in accordion */.product-desc__specs {
display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 10px;}

@media (max-width: 767px) {
.product-desc__specs {
grid-template-columns: 1fr;

 }}

.product-desc__spec {
display: flex;

  justify-content: space-between;

  padding: 12px 16px;

  background: var(--color-background);

  border-radius: var(--radius-sm);}

.product-desc__spec-label {
font-weight: 600;

  font-size: 13px;

  color: var(--color-text);}

.product-desc__spec-value {
font-size: 13px;

  color: var(--color-text-light);}

@media (max-width: 767px) {
.product-desc {
padding: 24px 0 40px;

 }}

/* ---- Sticky Purchase Bar ---- */.product-sticky {
position: fixed;

  bottom: 0;

  left: 0;

  right: 0;

  z-index: 500;

  background: var(--color-white);

  border-top: 1px solid var(--color-border);

  box-shadow: 0 -4px 20px rgba(0,0,0,0.08);

  transform: translateY(100%);

  transition: transform var(--transition-base);

  will-change: transform;}

.product-sticky.is-visible {
transform: translateY(0);}

.product-sticky__inner {
display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

  max-width: var(--page-width);

  margin: 0 auto;

  padding: 12px var(--gutter);}

.product-sticky__info {
display: flex;

  align-items: center;

  gap: 12px;

  min-width: 0;}

.product-sticky__title {
font-size: 14px;

  font-weight: 600;

  color: var(--color-text);

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  max-width: 200px;}

.product-sticky__price {
font-size: 16px;

  font-weight: 800;

  color: var(--color-text);

  white-space: nowrap;}

.product-sticky__compare {
font-size: 13px;

  color: var(--color-text-light);

  text-decoration: line-through;

  white-space: nowrap;}

.product-sticky__actions {
display: flex;

  align-items: center;

  gap: 12px;

  flex-shrink: 0;}

.product-sticky__qty {
display: flex;

  align-items: center;

  border: 1px solid var(--color-border);

  border-radius: var(--radius-sm);

  overflow: hidden;}

.product-sticky__qty-btn {
width: 32px;

  height: 36px;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  border: none;

  background: transparent;

  color: var(--color-text);

  transition: background var(--transition-fast);}

.product-sticky__qty-btn:hover {
background: var(--color-secondary-bg);}

.product-sticky__qty-input {
width: 36px;

  height: 36px;

  text-align: center;

  border: none;

  border-left: 1px solid var(--color-border);

  border-right: 1px solid var(--color-border);

  font-weight: 700;

  font-size: 14px;

  -moz-appearance: textfield;

  background: transparent;}

.product-sticky__qty-input::-webkit-outer-spin-button,.product-sticky__qty-input::-webkit-inner-spin-button {
-webkit-appearance: none;}

.product-sticky__atc {
white-space: nowrap;

  padding: 10px 24px;

  font-size: 14px;

  border-radius: var(--radius-md);}

@media (max-width: 767px) {
.product-sticky__inner {
padding: 10px var(--gutter-mobile);

  }

  .product-sticky__title {
max-width: 120px;

 font-size: 13px;

 }

  .product-sticky__price {
font-size: 14px;

 }

  .product-sticky__qty {
display: none;

 }

  .product-sticky__atc {
flex: 1;

 padding: 10px 16px;

 font-size: 13px;

 }}

/* Reduced motion */@media (prefers-reduced-motion: reduce) {
.product-gallery__slide,  .product-desc__panel,  .product-sticky,  .product-gallery__thumb {
transition: none !important;

  }

  .product-desc__trigger-icon {
transition: none !important;

  }

  .product-sticky {
transition: none !important;

  }}

/* =============================================   Checkout Page — COD Payment + Delivery Form   ============================================= */.checkout-page {
padding: 40px 0 80px;}

.checkout-page.page-width {
padding-left: 32px;}

[dir="rtl"] .checkout-page.page-width {
padding-left: 32px;}

.rtl .checkout-page.page-width {
padding-left: 32px;}

/* ---- Header & Steps ---- *//* ---- Checkout Page Header ---- */.checkout-page__header {
text-align: center;

  margin-bottom: 40px;}

.checkout-page__title {
font-size: clamp(1.5rem, 2.8vw, 2rem);

  font-weight: 800;

  color: var(--color-secondary, #2D1B69);

  margin-bottom: 20px;}

.checkout-page__steps {
display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  flex-wrap: wrap;}

.checkout-page__step {
display: inline-flex;

  align-items: center;

  gap: 6px;

  padding: 6px 14px;

  border-radius: 20px;

  font-size: 13px;

  font-weight: 500;

  color: var(--color-text-light);

  background: var(--color-white);

  border: 1px solid rgba(184, 156, 246, 0.1);

  transition: all var(--transition-fast);}

.checkout-page__step--active {
color: #7C5CE6;

  background: rgba(124, 92, 230, 0.06);

  border-color: #7C5CE6;

  font-weight: 700;

  box-shadow: 0 2px 8px rgba(124, 92, 230, 0.08);}

.checkout-page__step-icon {
font-size: 14px;

  line-height: 1;}

.checkout-page__step-label {
white-space: nowrap;}

.checkout-page__step-arrow {
color: rgba(184, 156, 246, 0.3);

  display: flex;

  align-items: center;}

.checkout-page__step-arrow svg {
display: block;}

/* ---- Layout ---- */.checkout-page__layout {
display: grid;

  grid-template-columns: 1fr 400px;

  gap: 32px;

  align-items: start;}

@media (max-width: 1023px) {
.checkout-page__layout {
grid-template-columns: 1fr;

    gap: 24px;

  }

  .checkout-page__summary-column {
order: -1;

  }}

/* ---- Cards ---- */.checkout-page__card {
background: #FFFFFF;

  border: 1px solid rgba(184, 156, 246, 0.12);

  border-radius: 16px;

  padding: 28px;

  box-shadow: 0 2px 12px rgba(124, 92, 230, 0.06);

  transition: box-shadow var(--transition-base);}

.checkout-page__card:hover {
box-shadow: 0 4px 20px rgba(124, 92, 230, 0.1);}

.checkout-page__card-title {
font-size: 16px;

  font-weight: 700;

  color: var(--color-secondary, #2D1B69);

  margin-bottom: 24px;

  display: flex;

  align-items: center;

  gap: 8px;}

.checkout-page__card-title svg {
color: #7C5CE6;

  flex-shrink: 0;}

/* ---- Form Fields ---- */.checkout-page__form {
display: flex;

  flex-direction: column;

  gap: 16px;}

.checkout-page__field {
display: flex;

  flex-direction: column;

  gap: 6px;}

.checkout-page__label {
font-size: 14px;

  font-weight: 600;

  color: var(--color-text, #2B2B2B);}

.checkout-page__required {
color: #FF5A5F;}

.checkout-page__input {
padding: 14px 16px;

  border: 2px solid var(--color-border, #E8E4F2);

  border-radius: 12px;

  font-size: 15px;

  font-family: var(--font-body);

  color: var(--color-text, #2B2B2B);

  background: #FFFFFF;

  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);

  outline: none;

  width: 100%;

  text-align: start;}

.checkout-page__input::placeholder {
color: var(--color-text-light, #6D6D6D);

  opacity: 0.6;

  text-align: start;}

.checkout-page__input:hover {
border-color: rgba(184, 156, 246, 0.35);}

.checkout-page__input:focus,.checkout-page__input:focus-visible {
border-color: #7C5CE6;

  box-shadow: 0 0 0 3px rgba(124, 92, 230, 0.12);}

.checkout-page__input.is-error {
border-color: #FF5A5F;

  box-shadow: 0 0 0 3px rgba(255, 90, 95, 0.1);}

.checkout-page__select {
appearance: none;

  -webkit-appearance: none;

  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%237C5CE6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  background-repeat: no-repeat;

  background-position: left 16px center;

  padding-left: 40px;

  cursor: pointer;

  text-align: start;}

.checkout-page__textarea {
resize: vertical;

  min-height: 80px;}

.checkout-page__field-error {
font-size: 12px;

  color: #FF5A5F;

  min-height: 0;

  overflow: hidden;

  transition: all var(--transition-fast);

  opacity: 0;

  margin: 0;}

.checkout-page__field-error.is-visible {
opacity: 1;

  min-height: 18px;}

/* ---- Payment Method ---- */.checkout-page__payment {
margin-top: 8px;

  padding-top: 20px;

  border-top: 1px solid rgba(184, 156, 246, 0.12);}

.checkout-page__payment-heading {
font-size: 15px;

  font-weight: 700;

  color: var(--color-secondary, #2D1B69);

  margin-bottom: 16px;

  display: flex;

  align-items: center;

  gap: 8px;}

.checkout-page__payment-heading svg {
color: #7C5CE6;

  flex-shrink: 0;}

.checkout-page__payment-option {
display: flex;

  align-items: center;

  gap: 14px;

  padding: 16px 20px;

  background: linear-gradient(135deg, #F4F0FF 0%, #FCFAFF 100%);

  border: 2px solid rgba(184, 156, 246, 0.3);

  border-radius: 12px;}

.checkout-page__payment-option--selected {
border-color: #7C5CE6;

  background: linear-gradient(135deg, #F4F0FF 0%, #FCFAFF 100%);

  box-shadow: 0 0 0 3px rgba(124, 92, 230, 0.08);}

.checkout-page__payment-radio {
color: #7C5CE6;

  flex-shrink: 0;}

.checkout-page__payment-radio svg {
display: block;}

.checkout-page__payment-info {
flex: 1;

  min-width: 0;}

.checkout-page__payment-title {
font-size: 15px;

  font-weight: 700;

  color: var(--color-secondary, #2D1B69);

  margin-bottom: 2px;}

.checkout-page__payment-desc {
font-size: 13px;

  color: #7C5CE6;

  line-height: 1.5;

  margin-bottom: 6px;}

.checkout-page__payment-badge {
display: inline-block;

  font-size: 11px;

  font-weight: 700;

  color: #7C5CE6;

  background: rgba(124, 92, 230, 0.1);

  padding: 2px 10px;

  border-radius: 10px;}

.checkout-page__payment-icon {
flex-shrink: 0;}

/* ---- Trust Badges ---- */.checkout-page__trust {
display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 10px;

  margin-top: 20px;}

.checkout-page__trust-item {
display: flex;

  align-items: center;

  gap: 8px;

  font-size: 13px;

  font-weight: 500;

  color: var(--color-text-light, #6D6D6D);

  padding: 10px 14px;

  background: rgba(184, 156, 246, 0.06);

  border: 1px solid rgba(184, 156, 246, 0.08);

  border-radius: 10px;}

.checkout-page__trust-icon {
color: #7C5CE6;

  flex-shrink: 0;

  display: flex;

  align-items: center;}

@media (max-width: 767px) {
.checkout-page__trust {
grid-template-columns: repeat(2, 1fr);

    gap: 8px;

  }

  .checkout-page__trust-item {
font-size: 12px;

    padding: 8px 10px;

  }}

/* ---- Submit Button ---- */.checkout-page__submit {
margin-top: 20px;

  padding: 18px 36px;

  font-size: 17px;

  border-radius: 18px !important;

  background: linear-gradient(135deg, #B89CF6, #7C5CE6) !important;

  color: #FFFFFF !important;

  border: none !important;

  font-weight: 700 !important;

  position: relative;

  transition: all var(--transition-base);

  width: 100%;}

.checkout-page__submit:hover:not(:disabled) {
transform: translateY(-2px);

  box-shadow: 0 12px 32px rgba(124, 92, 230, 0.35) !important;}

.checkout-page__submit:disabled {
opacity: 1;

  background: linear-gradient(135deg, #9C7AF2, #6B4AD8) !important;

  cursor: wait;}

.checkout-page__submit-loading {
display: inline-flex;

  align-items: center;

  gap: 10px;}

.checkout-page__submit-loading[hidden] {
display: none !important;}

.checkout-page__disclaimer {
display: flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

  font-size: 12px;

  color: var(--color-text-light, #6D6D6D);

  margin-top: 12px;

  text-align: center;}

.checkout-page__disclaimer svg {
flex-shrink: 0;

  opacity: 0.5;}

/* ---- Spinner ---- */.checkout-page__spinner {
width: 20px;

  height: 20px;

  border: 2px solid rgba(255,255,255,0.3);

  border-top-color: var(--color-white);

  border-radius: 50%;

  animation: checkoutSpin 0.6s linear infinite;}

@keyframes checkoutSpin {
to {
transform: rotate(360deg);

 }}

/* ---- Order Summary (Right Column) ---- */.checkout-page__summary-card {
position: sticky;

  top: calc(var(--header-height) + 20px);

  background: #FFFFFF;

  border: 1px solid rgba(184, 156, 246, 0.15);

  border-radius: 16px;

  padding: 24px;

  box-shadow: 0 4px 24px rgba(124, 92, 230, 0.08);}

.checkout-page__summary-title {
margin-bottom: 20px;

  font-size: 16px;

  font-weight: 700;

  color: var(--color-secondary, #2D1B69);}

.checkout-page__summary-count {
font-weight: 400;

  font-size: 14px;

  color: var(--color-text-light, #6D6D6D);}

/* Items */.checkout-page__items {
display: flex;

  flex-direction: column;

  gap: 8px;

  margin-bottom: 16px;}

.checkout-page__item {
display: flex;

  gap: 12px;

  padding: 12px;

  background: #FFFFFF;

  border: 1px solid rgba(184, 156, 246, 0.1);

  border-radius: 12px;

  box-shadow: 0 1px 4px rgba(124, 92, 230, 0.03);

  transition: border-color var(--transition-fast);}

.checkout-page__item:hover {
border-color: rgba(184, 156, 246, 0.2);}

.checkout-page__item:last-child {
margin-bottom: 0;}

.checkout-page__item-image {
width: 64px;

  height: 64px;

  border-radius: 10px;

  overflow: hidden;

  flex-shrink: 0;

  background: var(--color-background, #FCFAFF);

  border: 1px solid rgba(184, 156, 246, 0.08);}

.checkout-page__item-img {
width: 100%;

  height: 100%;

  object-fit: cover;}

.checkout-page__item-placeholder {
width: 100%;

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--color-border, #E8E4F2);}

.checkout-page__item-info {
flex: 1;

  min-width: 0;

  display: flex;

  flex-direction: column;

  gap: 4px;}

.checkout-page__item-title {
font-size: 14px;

  font-weight: 600;

  color: var(--color-secondary, #2D1B69);

  line-height: 1.3;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;}

.checkout-page__item-variant {
font-size: 12px;

  color: var(--color-text-light, #6D6D6D);}

.checkout-page__item-meta {
display: flex;

  align-items: center;

  justify-content: space-between;

  font-size: 13px;

  color: var(--color-text-light, #6D6D6D);

  margin-top: auto;}

.checkout-page__item-price {
font-weight: 700;

  color: #7C5CE6;}

/* Totals */.checkout-page__totals {
padding-top: 16px;

  border-top: 1px solid rgba(184, 156, 246, 0.15);}

.checkout-page__total-row {
display: flex;

  justify-content: space-between;

  align-items: center;

  font-size: 14px;

  color: var(--color-text, #2B2B2B);

  padding: 6px 0;}

.checkout-page__total-row--discount {
color: #38A169;

  font-weight: 500;}

.checkout-page__total-free {
color: #38A169;

  font-weight: 600;}

.checkout-page__total-divider {
height: 1px;

  background: rgba(184, 156, 246, 0.12);

  margin: 8px 0;}

.checkout-page__total-row--final {
font-size: 18px;

  font-weight: 800;

  padding: 8px 0 0;}

.checkout-page__total-amount {
color: #7C5CE6;}

/* Summary COD badge */.checkout-page__summary-cod {
display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  margin-top: 20px;

  padding: 12px;

  background: linear-gradient(135deg, rgba(184, 156, 246, 0.1) 0%, rgba(124, 92, 230, 0.06) 100%);

  border: 1px solid rgba(184, 156, 246, 0.15);

  border-radius: 10px;

  font-size: 14px;

  font-weight: 600;

  color: #7C5CE6;}

.checkout-page__summary-cod svg {
flex-shrink: 0;}

/* Help */.checkout-page__help {
margin-top: 16px;

  padding: 16px 20px;

  background: rgba(184, 156, 246, 0.04);

  border: 1px solid rgba(184, 156, 246, 0.08);

  border-radius: 12px;

  text-align: center;

  font-size: 13px;

  color: var(--color-text-light, #6D6D6D);}

.checkout-page__help-whatsapp {
display: inline-flex;

  align-items: center;

  gap: 6px;

  margin-top: 8px;

  padding: 10px 20px;

  background: #25D366;

  color: var(--color-white);

  border-radius: 10px;

  font-weight: 700;

  font-size: 13px;

  transition: all var(--transition-fast);}

.checkout-page__help-whatsapp:hover {
background: #1DA851;

  transform: translateY(-1px);

  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);}

.checkout-page__help-whatsapp svg {
width: 16px;

  height: 16px;}

/* ---- Success Overlay ---- */.checkout-page__success-overlay {
position: fixed;

  inset: 0;

  background: linear-gradient(135deg, rgba(45, 27, 105, 0.85) 0%, rgba(30, 16, 80, 0.9) 100%);

  z-index: var(--z-modal);

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 24px;

  animation: checkoutFadeIn 0.3s ease;

  backdrop-filter: blur(6px);

  -webkit-backdrop-filter: blur(6px);}

.checkout-page__success-overlay[hidden] {
display: none !important;}

.checkout-page__success-modal {
background: #FFFFFF;

  border: 1px solid rgba(184, 156, 246, 0.15);

  border-radius: 20px;

  padding: 40px 32px;

  text-align: center;

  max-width: 400px;

  width: 100%;

  box-shadow: 0 20px 60px rgba(45, 27, 105, 0.3);

  animation: checkoutScaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);}

.checkout-page__success-icon {
margin-bottom: 16px;}

.checkout-page__success-title {
font-size: 22px;

  font-weight: 800;

  color: var(--color-secondary, #2D1B69);

  margin-bottom: 8px;}

.checkout-page__success-text {
font-size: 15px;

  color: var(--color-text-light, #6D6D6D);

  line-height: 1.6;

  margin-bottom: 24px;}

.checkout-page__success-spinner {
display: flex;

  justify-content: center;}

.checkout-page__success-spinner .checkout-page__spinner {
width: 24px;

  height: 24px;

  border-color: rgba(124, 92, 230, 0.2);

  border-top-color: #7C5CE6;}

@keyframes checkoutFadeIn {
from {
opacity: 0;

 }

  to {
opacity: 1;

 }}

@keyframes checkoutScaleIn {
from {
transform: scale(0.9);

 opacity: 0;

 }

  to {
transform: scale(1);

 opacity: 1;

 }}

/* ---- Error Toast ---- */.checkout-page__error-toast {
position: fixed;

  bottom: 24px;

  inset-inline-start: 50%;

  transform: translateX(-50%);

  display: flex;

  align-items: center;

  gap: 8px;

  padding: 14px 24px;

  background: #FFF0F0;

  border: 1px solid #FFCDD2;

  border-radius: 12px;

  color: #FF5A5F;

  font-size: 14px;

  font-weight: 500;

  z-index: var(--z-toast);

  box-shadow: 0 8px 24px rgba(255, 90, 95, 0.15);

  animation: checkoutSlideUp 0.3s ease;

  max-width: 90vw;

  white-space: nowrap;}

.checkout-page__error-toast[hidden] {
display: none !important;}

.checkout-page__error-toast svg {
flex-shrink: 0;}

@keyframes checkoutSlideUp {
from {
transform: translateX(-50%) translateY(20px);

 opacity: 0;

 }

  to {
transform: translateX(-50%) translateY(0);

 opacity: 1;

 }}

/* =============================================   Progress Tracker (shared: cart → checkout → confirm)   ============================================= */.progress-tracker {
display: flex;

  align-items: center;

  justify-content: center;

  gap: 0;

  margin-bottom: 32px;

  padding: 16px 0;}

.progress-tracker__step {
display: flex;

  flex-direction: column;

  align-items: center;

  gap: 8px;

  position: relative;}

.progress-tracker__dot {
width: 32px;

  height: 32px;

  border-radius: 50%;

  border: 2px solid var(--color-border);

  background: var(--color-white);

  display: flex;

  align-items: center;

  justify-content: center;

  transition: all var(--transition-fast);}

.progress-tracker__dot-inner {
width: 10px;

  height: 10px;

  border-radius: 50%;

  background: var(--color-primary);

  transition: all var(--transition-fast);}

.progress-tracker__step--active .progress-tracker__dot {
border-color: var(--color-primary);

  box-shadow: 0 0 0 4px rgba(184, 156, 246, 0.15);}

.progress-tracker__step--active .progress-tracker__dot-inner {
background: var(--color-primary);}

.progress-tracker__step--done .progress-tracker__dot {
border-color: #7C5CE6;

  background: rgba(124, 92, 230, 0.08);}

.progress-tracker__step--done .progress-tracker__dot-inner {
display: none;}

.progress-tracker__step--done .progress-tracker__dot::after {
content: '';

  width: 12px;

  height: 12px;

  background: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 6L5 8.5L10 3.5' stroke='%237C5CE6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;}

.progress-tracker__label {
font-size: 12px;

  font-weight: 500;

  color: var(--color-text-light);

  white-space: nowrap;}

.progress-tracker__step--active .progress-tracker__label {
color: #7C5CE6;

  font-weight: 700;}

.progress-tracker__step--done .progress-tracker__label {
color: #7C5CE6;

  font-weight: 600;}

.progress-tracker__line {
width: 60px;

  height: 2px;

  background: var(--color-border);

  margin: -16px 8px 0;}

.progress-tracker__line--done {
background: #7C5CE6;}

@media (max-width: 767px) {
.progress-tracker {
padding: 12px 0;

    margin-bottom: 20px;

  }

  .progress-tracker__line {
width: 32px;

    margin: -16px 4px 0;

  }

  .progress-tracker__dot {
width: 28px;

    height: 28px;

  }

  .progress-tracker__label {
font-size: 10px;

  }}

/* =============================================   Order Confirmation Page   ============================================= */.order-confirm {
padding: 40px 0 80px;

  max-width: 680px;

  margin: 0 auto;}

/* ---- Steps ---- */.order-confirm__steps {
display: flex;

  align-items: center;

  justify-content: center;

  gap: 0;

  margin-bottom: 40px;}

.order-confirm__step {
display: flex;

  flex-direction: column;

  align-items: center;

  gap: 8px;}

.order-confirm__step-dot {
width: 36px;

  height: 36px;

  border-radius: 50%;

  border: 2px solid var(--color-border);

  background: var(--color-white);

  display: flex;

  align-items: center;

  justify-content: center;

  transition: all var(--transition-fast);}

.order-confirm__step--done .order-confirm__step-dot {
border-color: #7C5CE6;

  background: rgba(124, 92, 230, 0.08);}

.order-confirm__step--done svg {
color: #7C5CE6;}

.order-confirm__step--active .order-confirm__step-dot {
border-color: #7C5CE6;

  background: rgba(124, 92, 230, 0.06);

  box-shadow: 0 0 0 4px rgba(124, 92, 230, 0.12);}

.order-confirm__step--active svg {
color: #7C5CE6;}

.order-confirm__step-label {
font-size: 13px;

  font-weight: 500;

  color: var(--color-text-light);

  white-space: nowrap;}

.order-confirm__step--active .order-confirm__step-label {
color: var(--color-primary-dark);

  font-weight: 700;}

.order-confirm__step--done .order-confirm__step-label {
color: var(--color-success);

  font-weight: 600;}

.order-confirm__step-line {
width: 80px;

  height: 2px;

  background: var(--color-border);

  margin-bottom: 28px;}

.order-confirm__step-line--done {
background: var(--color-success);}

/* ---- Hero ---- */.order-confirm__hero {
text-align: center;

  margin-bottom: 40px;}

.order-confirm__hero-icon {
margin-bottom: 20px;}

.order-confirm__hero-title {
font-size: clamp(1.5rem, 3vw, 2.2rem);

  font-weight: 800;

  color: var(--color-text);

  margin-bottom: 8px;

  line-height: 1.3;}

.order-confirm__hero-text {
font-size: 16px;

  color: var(--color-text-light);

  margin-bottom: 20px;}

.order-confirm__order-num {
display: inline-flex;

  flex-direction: column;

  align-items: center;

  padding: 16px 32px;

  background: var(--color-secondary-bg);

  border-radius: var(--radius-lg);

  border: 2px dashed var(--color-primary);

  margin-bottom: 8px;}

.order-confirm__order-num-label {
font-size: 12px;

  color: var(--color-text-light);

  margin-bottom: 4px;}

.order-confirm__order-num-value {
font-size: 24px;

  font-weight: 800;

  color: var(--color-primary-dark);

  letter-spacing: 2px;}

.order-confirm__order-date {
font-size: 14px;

  color: var(--color-text-light);}

/* ---- Info Cards ---- */.order-confirm__info-cards {
display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 16px;

  margin-bottom: 32px;}

@media (max-width: 767px) {
.order-confirm__info-cards {
grid-template-columns: 1fr;

  }}

.order-confirm__info-card {
display: flex;

  flex-direction: column;

  gap: 8px;

  padding: 20px;

  background: var(--color-white);

  border-radius: var(--radius-lg);

  box-shadow: var(--shadow-card);}

.order-confirm__info-icon {
width: 40px;

  height: 40px;

  border-radius: var(--radius-sm);

  display: flex;

  align-items: center;

  justify-content: center;}

.order-confirm__info-icon--cod {
background: #E8F5E9;

  color: #2E7D32;}

.order-confirm__info-icon--ship {
background: #E3F2FD;

  color: #1565C0;}

.order-confirm__info-content {
display: flex;

  flex-direction: column;

  gap: 2px;}

.order-confirm__info-label {
font-size: 12px;

  color: var(--color-text-light);}

.order-confirm__info-value {
font-size: 15px;

  font-weight: 700;

  color: var(--color-text);}

.order-confirm__info-badge {
display: inline-block;

  align-self: flex-start;

  font-size: 11px;

  font-weight: 600;

  color: #2E7D32;

  background: rgba(46, 125, 50, 0.08);

  padding: 3px 10px;

  border-radius: 10px;}

/* ---- Sections ---- */.order-confirm__section {
background: var(--color-white);

  border-radius: var(--radius-lg);

  padding: 28px;

  box-shadow: var(--shadow-card);

  margin-bottom: 20px;}

.order-confirm__section-title {
font-size: 16px;

  font-weight: 700;

  color: var(--color-text);

  margin-bottom: 20px;

  display: flex;

  align-items: center;

  gap: 8px;}

.order-confirm__section-title svg {
color: var(--color-primary);

  flex-shrink: 0;}

/* ---- Items ---- */.order-confirm__items {
display: flex;

  flex-direction: column;}

.order-confirm__item {
display: flex;

  align-items: center;

  gap: 14px;

  padding: 12px 0;

  border-bottom: 1px solid var(--color-border);}

.order-confirm__item:last-child {
border-bottom: none;}

.order-confirm__item-image {
width: 56px;

  height: 56px;

  border-radius: var(--radius-sm);

  overflow: hidden;

  flex-shrink: 0;

  background: var(--color-background);}

.order-confirm__item-img {
width: 100%;

  height: 100%;

  object-fit: cover;}

.order-confirm__item-placeholder {
width: 100%;

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--color-border);}

.order-confirm__item-info {
flex: 1;

  min-width: 0;}

.order-confirm__item-title {
font-size: 14px;

  font-weight: 600;

  color: var(--color-text);

  line-height: 1.3;}

.order-confirm__item-variant {
font-size: 12px;

  color: var(--color-text-light);

  margin-top: 2px;}

.order-confirm__item-qty {
font-size: 14px;

  color: var(--color-text-light);

  flex-shrink: 0;}

.order-confirm__item-total {
font-size: 14px;

  font-weight: 700;

  color: var(--color-text);

  flex-shrink: 0;

  min-width: 80px;

  text-align: end;}

/* ---- Totals ---- */.order-confirm__totals {
padding-top: 16px;

  border-top: 1px solid var(--color-border);}

.order-confirm__total-row {
display: flex;

  justify-content: space-between;

  font-size: 14px;

  color: var(--color-text);

  padding: 6px 0;}

.order-confirm__total-row--discount {
color: var(--color-success);

  font-weight: 500;}

.order-confirm__total-free {
color: var(--color-success);

  font-weight: 600;}

.order-confirm__total-divider {
height: 1px;

  background: var(--color-border);

  margin: 8px 0;}

.order-confirm__total-row--final {
font-size: 18px;

  font-weight: 800;}

.order-confirm__total-amount {
color: var(--color-success);}

/* COD badge in section */.order-confirm__cod-badge {
display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  margin-top: 20px;

  padding: 12px;

  background: linear-gradient(135deg, #E8F5E9 0%, #F1FAF2 100%);

  border-radius: var(--radius-sm);

  font-size: 14px;

  font-weight: 700;

  color: #2E7D32;}

/* ---- Address Card ---- */.order-confirm__address-card {
padding: 16px 20px;

  background: var(--color-background);

  border-radius: var(--radius-md);

  line-height: 1.7;}

.order-confirm__address-name {
font-weight: 700;

  font-size: 15px;

  color: var(--color-text);}

.order-confirm__address-phone {
font-size: 14px;

  color: var(--color-text);

  direction: ltr;

  text-align: start;}

.order-confirm__address-detail {
font-size: 14px;

  color: var(--color-text-light);}

/* ---- Timeline ---- */.order-confirm__timeline {
display: flex;

  flex-direction: column;

  gap: 0;

  padding-right: 0;}

.order-confirm__timeline-item {
display: flex;

  gap: 14px;

  padding-bottom: 24px;

  position: relative;}

.order-confirm__timeline-item:last-child {
padding-bottom: 0;}

.order-confirm__timeline-dot {
width: 28px;

  height: 28px;

  border-radius: 50%;

  border: 2px solid var(--color-border);

  background: var(--color-white);

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  position: relative;

  z-index: 1;}

.order-confirm__timeline-item--done .order-confirm__timeline-dot {
border-color: var(--color-success);

  background: #E8F5E9;}

.order-confirm__timeline-item--done svg {
color: var(--color-success);}

.order-confirm__timeline-item--active .order-confirm__timeline-dot {
border-color: var(--color-primary);

  background: var(--color-secondary-bg);

  box-shadow: 0 0 0 4px rgba(184, 156, 246, 0.15);}

.order-confirm__timeline-item--active .order-confirm__timeline-dot span {
width: 8px;

  height: 8px;

  border-radius: 50%;

  background: var(--color-primary);}

.order-confirm__timeline-item::before {
content: '';

  position: absolute;

  top: 28px;

  left: 13px;

  width: 2px;

  height: calc(100% - 4px);

  background: var(--color-border);}

.order-confirm__timeline-item:last-child::before {
display: none;}

.order-confirm__timeline-item--done::before {
background: var(--color-success);}

.order-confirm__timeline-content {
display: flex;

  flex-direction: column;

  gap: 2px;

  padding-top: 2px;}

.order-confirm__timeline-title {
font-size: 14px;

  font-weight: 600;

  color: var(--color-text);}

.order-confirm__timeline-desc {
font-size: 13px;

  color: var(--color-text-light);

  line-height: 1.5;}

/* ---- Footer / Actions ---- */.order-confirm__footer {
margin-top: 32px;

  text-align: center;}

.order-confirm__trust {
display: flex;

  justify-content: center;

  gap: 24px;

  margin-bottom: 28px;

  flex-wrap: wrap;}

.order-confirm__trust-item {
display: flex;

  align-items: center;

  gap: 6px;

  font-size: 13px;

  font-weight: 500;

  color: var(--color-text-light);}

.order-confirm__trust-icon {
color: var(--color-primary);

  flex-shrink: 0;

  display: flex;

  align-items: center;}

.order-confirm__actions {
display: flex;

  gap: 16px;

  justify-content: center;

  flex-wrap: wrap;}

.order-confirm__actions .btn svg {
flex-shrink: 0;}

/* ---- Mobile ---- */@media (max-width: 767px) {
.order-confirm {
padding: 24px 0 60px;

  }

  .order-confirm__steps {
margin-bottom: 24px;

  }

  .order-confirm__step-line {
width: 40px;

  }

  .order-confirm__section {
padding: 20px;

  }

  .order-confirm__hero-icon svg {
width: 48px;

    height: 48px;

  }

  .order-confirm__order-num {
padding: 12px 24px;

  }

  .order-confirm__order-num-value {
font-size: 20px;

  }

  .order-confirm__item-total {
min-width: auto;

  }

  .order-confirm__trust {
gap: 16px;

  }

  .order-confirm__actions {
flex-direction: column;

    align-items: stretch;

  }

  .order-confirm__actions .btn {
width: 100%;

  }}

/* ---- RTL Overrides for order ---- */.rtl .order-confirm__timeline-item::before {
left: auto;

  right: 13px;}

.rtl .order-confirm__address-phone {
direction: ltr;

  text-align: start;}

/* ---- Empty State ---- */.checkout-page__empty {
text-align: center;

  padding: 80px 20px;

  max-width: 500px;

  margin: 0 auto;}

.checkout-page__empty-icon {
color: var(--color-border);

  margin-bottom: 24px;}

.checkout-page__empty-title {
font-size: 24px;

  font-weight: 700;

  color: var(--color-text);

  margin-bottom: 12px;}

.checkout-page__empty-text {
font-size: 16px;

  color: var(--color-text-light);

  margin-bottom: 32px;

  line-height: 1.6;}

/* ---- Mobile Responsive ---- */@media (max-width: 767px) {
.checkout-page {
padding: 16px 0 60px;

  }

  .checkout-page__header {
margin-bottom: 24px;

  }

  .checkout-page__title {
font-size: 22px;

    margin-bottom: 16px;

  }

  .checkout-page__steps {
gap: 4px;

  }

  .checkout-page__step {
padding: 4px 10px;

    font-size: 11px;

  }

  .checkout-page__step-label {
display: none;

  }

  .checkout-page__step--active .checkout-page__step-label {
display: inline;

  }

  .checkout-page__card {
padding: 20px;

    border-radius: 14px;

  }

  .checkout-page__card-title {
font-size: 15px;

    margin-bottom: 16px;

  }

  .checkout-page__form {
gap: 14px;

  }

  .checkout-page__input {
padding: 12px 14px;

    font-size: 16px;

 /* Prevent iOS zoom */  }

  .checkout-page__payment-option {
padding: 14px;

  }

  .checkout-page__summary-card {
position: static;

    padding: 20px;

    border-radius: 14px;

  }

  .checkout-page__item {
padding: 10px;

    gap: 10px;

  }

  .checkout-page__item-image {
width: 56px;

    height: 56px;

  }

  .checkout-page__item-title {
font-size: 13px;

  }

  .checkout-page__submit {
padding: 16px 24px;

    font-size: 16px;

    border-radius: 14px !important;

  }

  .checkout-page__total-row--final {
font-size: 16px;

  }

  .checkout-page__empty {
padding: 60px 20px;

  }

  .checkout-page__empty-title {
font-size: 20px;

  }

  .checkout-page__success-modal {
padding: 32px 24px;

    border-radius: 16px;

  }

  .checkout-page__error-toast {
font-size: 13px;

    padding: 12px 16px;

    max-width: calc(100vw - 32px);

  }}

/* ---- RTL Overrides for Checkout ---- */[dir="rtl"] .checkout-page__step-arrow svg {
transform: rotate(180deg);}

[dir="rtl"] .checkout-page__select {
background-position: right 16px center;

  padding-left: 16px;

  padding-right: 40px;}

[dir="rtl"] .checkout-page__help-whatsapp svg {
margin-left: 0;

  margin-right: 0;}

[dir="rtl"] .checkout-page__trust-item {
text-align: right;}

[dir="rtl"] .checkout-page__summary-cod {
flex-direction: row;}

.rtl .checkout-page__step-arrow svg {
transform: rotate(180deg);}

.rtl .checkout-page__select {
background-position: right 16px center;

  padding-left: 16px;

  padding-right: 40px;}

.rtl .checkout-page__help-whatsapp svg {
margin-left: 0;

  margin-right: 0;}

.rtl .checkout-page__trust-item {
text-align: right;}

.rtl .checkout-page__summary-cod {
flex-direction: row;}

/* ---- Reduced Motion ---- */@media (prefers-reduced-motion: reduce) {
.checkout-page__success-overlay {
animation: none;

  }

  .checkout-page__success-modal {
animation: none;

  }

  .checkout-page__error-toast {
animation: none;

  }

  .checkout-page__spinner {
animation-duration: 0.01ms;

  }}

/* ============================================   🔍 Predictive Search Overlay — Simplified   ============================================ */.search-overlay {
position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: calc(var(--z-modal) + 10);

  display: flex;

  flex-direction: column;

  background: #FFFFFF;

  opacity: 0;

  visibility: hidden;

  transition: opacity 250ms ease, visibility 250ms ease;}

.search-overlay.is-open {
opacity: 1;

  visibility: visible;}

.search-overlay__backdrop {
position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(43, 43, 43, 0.35);

  z-index: calc(var(--z-modal) + 9);

  opacity: 0;

  visibility: hidden;

  transition: opacity 250ms ease, visibility 250ms ease;}

.search-overlay__backdrop.is-open {
opacity: 1;

  visibility: visible;}

/* ── Wrapper: centered slim column ── */.search-overlay__wrapper {
max-width: 640px;

  width: 100%;

  margin: 0 auto;

  padding: 0 var(--gutter);

  display: flex;

  flex-direction: column;

  height: 100%;}

/* ── Top bar: no border, clean spacing ── */.search-overlay__header {
display: flex;

  align-items: center;

  gap: 12px;

  padding: 32px 0 20px;

  flex-shrink: 0;}

.search-overlay__form {
flex: 1;

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 0 0 0 4px;

  border-bottom: 2px solid #E8E4F2;

  transition: border-color 150ms ease;}

.search-overlay__form:focus-within {
border-color: #B89CF6;}

.search-overlay__icon {
color: #6D6D6D;

  flex-shrink: 0;

  opacity: 0.5;}

.search-overlay__input {
flex: 1;

  border: none;

  background: transparent;

  padding: 16px 0;

  font-size: 18px;

  color: #2B2B2B;

  outline: none;

  font-family: 'Tajawal', sans-serif;

  font-weight: 500;}

.search-overlay__input::placeholder {
color: #6D6D6D;

  opacity: 0.5;}

.search-overlay__clear {
display: flex;

  align-items: center;

  justify-content: center;

  width: 32px;

  height: 32px;

  border-radius: 50%;

  color: #6D6D6D;

  transition: background 150ms ease, color 150ms ease;

  flex-shrink: 0;}

.search-overlay__clear:hover {
background: #E8E4F2;

  color: #2B2B2B;}

.search-overlay__close {
display: flex;

  align-items: center;

  justify-content: center;

  width: 40px;

  height: 40px;

  border-radius: 50%;

  color: #6D6D6D;

  transition: background 150ms ease, color 150ms ease;

  flex-shrink: 0;}

.search-overlay__close:hover {
background: #F4F0FF;

  color: #2B2B2B;}

/* ── Body ── */.search-overlay__body {
flex: 1;

  overflow-y: auto;

  padding: 12px 0 32px;

  position: relative;}

/* ── Loading ── */.search-overlay__loading {
display: flex;

  align-items: center;

  justify-content: center;

  padding: 48px 0;}

.search-overlay__spinner {
width: 28px;

  height: 28px;

  border: 2px solid #E8E4F2;

  border-top-color: #B89CF6;

  border-radius: 50%;

  animation: searchSpin 0.6s linear infinite;}

@keyframes searchSpin {
to {
transform: rotate(360deg);

 }}

/* ── Results ── */.search-overlay__section {
margin-bottom: 20px;}

.search-overlay__section-title {
font-size: 12px;

  font-weight: 700;

  color: #6D6D6D;

  text-transform: uppercase;

  letter-spacing: 1.2px;

  margin-bottom: 10px;

  padding: 0 4px;

  opacity: 0.6;}

.search-overlay__products {
display: flex;

  flex-direction: column;

  gap: 4px;}

.search-overlay__product {
display: flex;

  align-items: center;

  gap: 14px;

  padding: 10px 12px;

  border-radius: 8px;

  transition: background 150ms ease;

  text-decoration: none;

  color: inherit;}

.search-overlay__product:hover {
background: #F4F0FF;}

.search-overlay__product.is-highlighted {
background: #F4F0FF;}

.search-overlay__product-image {
width: 56px;

  height: 56px;

  border-radius: 8px;

  object-fit: cover;

  background: #F4F0FF;

  flex-shrink: 0;}

.search-overlay__product-placeholder {
width: 56px;

  height: 56px;

  border-radius: 8px;

  background: #F4F0FF;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #E8E4F2;

  flex-shrink: 0;}

.search-overlay__product-info {
flex: 1;

  min-width: 0;}

.search-overlay__product-title {
font-size: 14px;

  font-weight: 600;

  color: #2B2B2B;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  margin-bottom: 2px;}

.search-overlay__product-price {
font-size: 13px;

  color: #6D6D6D;

  display: flex;

  align-items: center;

  gap: 6px;}

.search-overlay__product-price .product-price__current {
font-size: 13px;}

.search-overlay__product-price .product-price__compare {
font-size: 11px;}

/* ── View All — clean text link ── */.search-overlay__view-all {
display: flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

  padding: 16px 0;

  color: #7C5CE6;

  font-weight: 600;

  font-size: 14px;

  text-decoration: none;

  transition: opacity 150ms ease, gap 150ms ease;

  opacity: 0.8;}

.search-overlay__view-all:hover {
opacity: 1;

  gap: 10px;}

[dir="rtl"] .search-overlay__view-all svg {
transform: rotate(180deg);}

/* ── Empty State ── */.search-overlay__empty {
display: flex;

  flex-direction: column;

  align-items: center;

  gap: 8px;

  padding: 48px 0;

  color: #6D6D6D;

  text-align: center;}

.search-overlay__empty p {
font-size: 15px;

  opacity: 0.7;}

/* ── Initial State ── */.search-overlay__initial {
display: flex;

  flex-direction: column;

  align-items: center;

  gap: 20px;

  padding: 40px 0;

  text-align: center;}

.search-overlay__initial-text {
font-size: 15px;

  color: #6D6D6D;

  opacity: 0.5;}

.search-overlay__quick-links {
display: flex;

  flex-wrap: wrap;

  gap: 10px;

  justify-content: center;}

.search-overlay__quick-link {
display: inline-block;

  padding: 8px 20px;

  border: 1px solid #E8E4F2;

  border-radius: 20px;

  font-size: 14px;

  color: #2B2B2B;

  text-decoration: none;

  transition: border-color 150ms ease, background 150ms ease;}

.search-overlay__quick-link:hover {
border-color: #D4C4F8;

  background: #F4F0FF;}

/* ── Mobile tweaks ── */@media (max-width: 767px) {
.search-overlay__wrapper {
padding: 0 16px;

  }

  .search-overlay__header {
padding: 20px 0 16px;

    gap: 8px;

  }

  .search-overlay__close {
width: 36px;

    height: 36px;

  }

  .search-overlay__input {
font-size: 16px;

    padding: 14px 0;

  }

  .search-overlay__body {
padding: 8px 0 24px;

  }

  .search-overlay__product {
padding: 8px 8px;

  }

  .search-overlay__initial {
padding: 24px 0;

  }

  .search-overlay__empty {
padding: 32px 0;

  }}

.payment-badge {
display: inline-flex;

  align-items: center;

  justify-content: center;

  height: 24px;

  padding: 0 8px;

  border-radius: 4px;

  border: 1px solid var(--color-border);

  font-size: 11px;

  font-weight: 600;

  white-space: nowrap;

  background: var(--color-white);

  color: var(--color-text);

  line-height: 1;}

.product-info__payment-icons .payment-badge,.footer__payment-icons .payment-badge {
height: 22px;

  padding: 0 7px;

  font-size: 10px;}

.payment-badge--vodafone {
border-color: #E60000;

  color: #E60000;}

.payment-badge--etisalat {
border-color: #7C3AED;

  color: #7C3AED;}

.payment-badge--instapay {
border-color: #00A3E0;

  color: #00A3E0;}

/* =============================================
   MOBILE RESPONSIVENESS FIXES
   ============================================= */

html {
overflow-x: hidden;

  width: 100%;

}

body {
overflow-x: hidden;

  width: 100%;

  max-width: 100vw;

}

.main-content {
overflow-x: hidden;

  width: 100%;

}

.page-width {
overflow: hidden;

}

@media (max-width: 1023px) {
body.template-product #MainContent {
padding: 20px var(--gutter-mobile);

  }}

@media (max-width: 767px) {
.hero {
overflow: hidden;

    width: 100%;

    max-width: 100vw;

  }

  .hero__slide {
width: 100%;

    overflow: hidden;

  }

  .hero__image-wrapper {
width: 100%;

    overflow: hidden;

  }

  .hero__decorative-shapes {
overflow: hidden;

  }

  .header {
overflow: hidden;

  }

  .header__wrapper {
overflow: hidden;

  }

  .featured-categories {
overflow: hidden;

  }

  .featured-categories__grid {
overflow: hidden;

  }

  .product-grid {
overflow: hidden;

  }

  .footer {
overflow: hidden;

  }

  .shopify-section {
overflow: hidden;

  }

  body.template-product .shopify-section:first-child {
overflow: hidden;

  }

  .product-gallery {
overflow: hidden;

  }

  .product-gallery__featured {
overflow: hidden;

  }

  .product-gallery__zoom-result {
display: none !important;

  }

  .product-gallery__zoom-lens {
display: none !important;

  }

  .product-info__wrapper {
overflow: hidden;

  }

  .product-info__purchase {
overflow: hidden;

  }

  .product-desc {
overflow: hidden;

  }

  .product-sticky {
max-width: 100vw;

    overflow: hidden;

  }

  .product-sticky__inner {
overflow: hidden;

  }

  .related-products {
overflow: hidden;

  }

  .recently-viewed {
overflow: hidden;

  }

  img {
max-width: 100%;

    height: auto;

  }

  .btn {
max-width: 100%;

  }

  h1, h2, h3, h4, h5, h6 {
word-wrap: break-word;

    overflow-wrap: break-word;

  }}