/* ─────────────────────────────────────────────
   GLOBAL BRAND VARIABLES & CORE RESET
   ───────────────────────────────────────────── */
:root {
  --cream:       #F5F0E8;   /* Main Section Background */
  --cream-warm:  #ECE4D8;   /* Secondary Soft Highlights & Borders */
  --dark:        #382F2D;   /* Brand Primary Text Color */
  --brand:       #8F6D4F;   /* Brand Secondary / Accent Gold */
  --brand-light: #b89576;   /* Light Accent Gold */
  --muted:       #6B5B53;   /* Sub-heading Label Tones */
  --light:       rgba(255, 255, 255, 0.85);
  --hairline:    rgba(56, 47, 45, 0.10);
  --font:        'Montserrat', system-ui, sans-serif;
  --maxw:        1280px;
  --pad-x:       clamp(1.25rem, 4vw, 3rem);
  --section-y:   clamp(4rem, 9vw, 7rem);
  --ease:        cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

body {
  font-family: var(--font);
  background: var(--cream);
  color: var(--dark);
  -webkit-font-smoothing: antialiased;
}


html {
  scroll-behavior: smooth;
}
.product-single .s-fast-checkout-button.outline {
      border-radius: 0px !important;
    background-color: transparent;
    border: 1px solid #906d4f !important;
    color: #906d4f !important;
}

.product-single .s-fast-checkout-button {
  height: 2.9rem !important;
}

.product-single .s-add-product-button-main:not(.w-full)>salla-button {
    width: 100% !important;
}

.product-single .s-add-product-button-main .s-add-product-button-mini-checkout {
  display: none !important;
}

/* Structural placeholder wrapper */
.tabs-sticky-wrapper {
  position: relative;
  width: 100%;
  display: block;
}

@media screen and (min-width: 767px) {
  custom-main-menu #mobile-menu {
    width: 700px !important;
  }
}

.s-product-card-horizontal .s-product-card-content-title a {
      display: block;
    overflow: visible;
}
.s-block__title .right-side:where([dir=ltr],[dir=ltr] *) {
  padding-right: 0px !important;
}
/* 
   When JS activates fixed pinning, we keep a blank physical layout footprint 
   on screen so your products don't awkwardly jump upward behind the bar.
*/
.tabs-sticky-wrapper.is-fixed {
  height: 62px; /* Matches the approximate height of your menu bar */
}

/* Base style for the navigation menu bar */
.sticky-tabs-container {
  background-color: #f8f2ec; 
  padding: 0 50px 40px;
  display: flex;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
  overflow-x: auto; /* Keeps it mobile-scrollable if it overflows screen boundaries */
  white-space: nowrap;
}

/* --- Fixed State adjusted to look for the wrapper parent class --- */
.tabs-sticky-wrapper.is-fixed .sticky-tabs-container {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 999999 !important; /* Forces it over any product grid containers */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); /* Adds visibility shadow when stuck */
}

/* --- Base Tab Button Styles --- */
.tab-btn {
  display: inline-block !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: #1a2b3c !important;
  padding: 10px 20px !important;
  border: 1px solid #8b6e56 !important;
  border-radius: 12px !important;
  background-color: transparent !important;
  transition: all 0.2s ease-in-out !important;
  white-space: nowrap !important;
}

.tab-btn:hover:not(.active) {
  background-color: rgba(139, 110, 86, 0.1) !important;
}
/* 1. Normal state */
.main-menu span {
  color: #000000 !important; /* Forces black color */
  text-decoration: none;     /* Removes any default underlines if it's a link */
}

/* 2. Hover state */
.main-menu:hover span,
.main-menu span:hover {
  color: #000000 !important; /* Keeps it black on hover */
}
/* 1. Target the flex wrapper to allow its items to align properly */
.container > .flex.items-stretch.justify-between {
  justify-content: space-between !important;
}

/* 2. Target the left wrapper (which contains the logo and the menu) */
.container > .flex.items-stretch.justify-between > .flex.items-center:first-child {
  width: 100% !important;
  justify-content: space-between !important;
}

/* 3. Push the custom-main-menu perfectly to the absolute center */
custom-main-menu {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 10;
}

#mobile-menu {
  width: 600px;
}
#mainnav .sicon-menu {
  color: #000 !important;
}
.btn--close:where([dir=ltr],[dir=ltr] *) {
  left: 330px !important;
}

/* Pre-emptively kill the red styling across ALL classes on that button */
.close-mobile-menu, 
#mobile-menu .btn--close,
.mm-spn button.close-mobile-menu {
    background: transparent !important;
    background-color: transparent !important;
    color: #333333 !important; /* Forces a standard dark gray cross */
}

/* Ensure the icon itself is forced visible */
.close-mobile-menu::before, 
.sicon-cancel::before {
    color: #333333 !important;
    display: inline-block !important;
}
@media (max-width: 767px) {
  /* .s-user-menu-login-btn {
    width: 1.5rem !important;
    height: 1.5rem !important;
  }
  .header-btn__icon.icon {
    width: 1.5rem !important;
  }
  #mainnav .btn--close {
 display: none !important;
} */

  /* 1. Target the button aggressively, bypassing JS class removals */
#mobile-menu button.close-mobile-menu,
.mm-spn button.close-mobile-menu,
[data-mm-spn-title] button {
    display: flex !important;            /* Overrides display:none and forces visibility */
    align-items: center;
    justify-content: center;
    
    /* Absolute positioning relative to the menu wrapper */
    position: absolute !important;
    top: 0 !important;                  /* Aligns it to the top navbar row */
    right: 0 !important;                /* Aligns it to the far right */
    height: 50px;                       /* Matches standard mobile navbar heights */
    width: 50px;
    z-index: 99999 !important;          /* Forces it above the menu background */
    
    /* Kill the red flash and style the icon */
    background: transparent !important;  /* Eliminates the red background completely */
    background-color: transparent !important;
    color: #333333 !important;           /* Dark gray cross icon */
    border: none !important;
    box-shadow: none !important;
}

/* 2. Ensure the icon font/content inside the button is visible */
#mobile-menu button.close-mobile-menu::before,
.sicon-cancel::before {
    font-size: 24px !important;         /* Makes the cross larger and visible */
    color: #333333 !important;
    display: inline-block !important;
    visibility: visible !important;
}

/* 3. Pre-emptively kill any temporary flash states applied by JS */
.mm-spn--open button, 
.mm-spn--navbar button {
    background: transparent !important;
}
}
/* 4. Ensure it looks clean on desktop and doesn't collide with the logo */
@media (min-width: 1024px) {
  .navbar-brand {
    position: relative;
    z-index: 11;
  }
}

.s-block-simple-section__content,
.s-block-simple-section__title,
.s-block-simple-section__subtitle {
    font-family: 'Montserrat', sans-serif !important;
}
.main-nav-container {
  background-color: #f8f2ec !important;
}

/* ─── Reusable Layout Framework ────────────── */
.section { 
  padding-block: var(--section-y); 
}
.s-trust-badges-wrapper {
  display: none;
}

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--pad-x);
}

.eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brand);
}

/* ─── Reusable Button Components ───────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: var(--dark);
  color: var(--cream);
  border-radius: 2px;
  transition: background 0.4s var(--ease), color 0.4s var(--ease), transform 0.3s var(--ease);
}
.btn:hover { 
  background: var(--brand); 
  transform: translateY(-2px); 
}

.btn--outline {
  background: transparent;
  color: var(--dark);
  border: 1px solid var(--dark);
}
.btn--outline:hover { 
  background: var(--dark); 
  color: var(--cream); 
}

.btn .arr {
  width: 16px; height: 1px;
  background: currentColor;
  position: relative;
  transition: width 0.3s var(--ease);
}
.btn .arr::after {
  content: "";
  position: absolute;
  right: 0; top: -3px;
  width: 7px; height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
.btn:hover .arr { width: 22px; }


/* ─────────────────────────────────────────────
   PLATFORM CUSTOMIZATIONS (SALLA BLOCKS)
   ───────────────────────────────────────────── */
#main-content { background: #f5f0e8; }
.s-block--tabs-produtcs { background: #f5f0e8; padding: 0; }
.s-block { margin-top: 0rem; }
..s-button-outline:hover { border-color: #916d4f !important; }
.s-block--bundle-photos-album { margin-top: 0px !important; }
.s-block--fixed-banner .container { padding: 0; }
.s-block--fixed-banner .container img { border-radius: 0px; }
.s-block-photos-album__main { gap: 0px !important; }
.s-block-photos-album__large-image-wrapper { border-radius: 0px !important; }

.s-block-photos-album__content {
  border-radius: 0px !important;
  background-color: #f8f2ec !important;
  color: #916d4f !important;
  font-family: cursive !important;
  font-size: 6rem !important;
}
.s-block__title { justify-content: center; }
.s-block__title h2 { font-size: 26px; }
.s-block-simple-section__content h2 {
    font-size: 32px !important;
}
.s-button-outline { border-color: #916d4f; }
.s-button-text span, .sicon-shopping-bag { color: #916d4f; }
.s-slider-block__title h2 { font-size: 30px; }
.s-products-slider-wrapper salla-slider { margin-bottom: 2rem; }
.s-comments-product { display: none !important; }

/* Navbar & Footer Overrides */
.top-navbar { background-color: #916d4f !important; }
.s-search-icon svg { fill: #fff; }
.s-search-input::placeholder { color: #fff; opacity: 1; }
.s-contacts-topnav-link, .s-localization-modal-trigger-btn { color: #fff; }
.main-nav-container .container { background-color: #f8f2ec !important; }
.footer-is-light .store-footer { margin-top: 0px !important; }
.footer-is-light .store-footer .store-footer__inner { background-color: #f8f2ec !important; }


/* ─────────────────────────────────────────────
   HERO SECTION
   ───────────────────────────────────────────── */
.hero {
  position: relative;
  padding-top: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(4rem, 8vw, 7rem);
  overflow: hidden;
}
.hero__inner {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  position: relative;
  z-index: 2;
}
.hero__text { padding-block: 2rem; }
.hero h1 {
  font-size: clamp(3.2rem, 8vw, 6.5rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 0.95;
  color: var(--dark);
  margin-block: 22px;
}
.hero h1 em {
  font-style: italic;
  font-weight: 500;
  color: var(--brand);
}
.hero__lead {
  max-width: 38ch;
  font-size: 15px;
  color: var(--muted);
  margin-bottom: 32px;
  font-weight: 400;
  line-height: 1.75;
}
.hero__cta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}
.hero__visual {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: 4px;
  overflow: hidden;
}
.hero__visual img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.5s var(--ease);
}
.hero__visual:hover img { transform: scale(1.03); }

/* Decorative Background Ring Element */
.o-mark {
  position: absolute;
  pointer-events: none;
  opacity: 0.08;
  z-index: 1;
}
.o-mark--hero {
  width: clamp(260px, 32vw, 460px);
  right: -8%; top: 8%;
  color: var(--brand);
}

/* Floating Price Promo Badge */
.hero__badge {
  position: absolute;
  bottom: 22px; left: 22px;
  width: 108px; height: 108px;
  background: var(--brand);
  color: var(--cream);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-direction: column;
  gap: 2px;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  z-index: 3;
  box-shadow: 0 6px 24px rgba(56,47,45,0.18);
}
.hero__badge .price {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1;
  margin-block: 2px;
}


/* ─────────────────────────────────────────────
   MARQUEE TEXT STRIP
   ───────────────────────────────────────────── */
.marquee {
  background: var(--dark);
  color: var(--cream);
  padding: 22px 0;
  overflow: hidden;
  border-block: 1px solid rgba(143, 109, 79, 0.2);
  margin-bottom: 30px;
}
.marquee__track {
  display: flex;
  gap: 60px;
  white-space: nowrap;
  width: max-content;
  animation: scroll-x 38s linear infinite; 
}
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 60px;
  font-size: 13px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 400;
}
.marquee__item .dot {
  color: var(--brand) !important;
  font-size: 20px;
  display: inline-block;
}

@keyframes scroll-x {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}


/* ─────────────────────────────────────────────
   STORY SECTION
   ───────────────────────────────────────────── */
.story {
  background: var(--cream-warm);
  position: relative;
  overflow: hidden;
}
.story__inner {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}
.story__image {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: 4px;
  overflow: hidden;
}
.story__image img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.story__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(56,47,45,0.15));
  pointer-events: none;
}
.story__text h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 18px 0 24px;
  color: var(--dark);
}
.story__text h2 em {
  font-style: italic;
  font-weight: 500;
  color: var(--brand);
}
.story__text p {
  color: var(--muted);
  margin-bottom: 18px;
  font-size: 15px;
  line-height: 1.85;
}
.story__text p + p { font-size: 14px; }
.story__sig {
  margin-top: 28px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dark);
  font-weight: 500;
}
.story__sig .line {
  width: 36px; height: 1px;
  background: var(--brand);
}


/* ─────────────────────────────────────────────
   FEATURE BANNER
   ───────────────────────────────────────────── */
.banner {
  background: var(--dark);
  color: var(--cream);
  position: relative;
  overflow: hidden;
  padding-block: clamp(5rem, 10vw, 9rem);
}
.banner__pattern {
  position: absolute;
  inset: 0;
  opacity: 0.06;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 14px;
  padding: 14px;
  align-content: center;
  pointer-events: none;
}
.banner__pattern .o {
  aspect-ratio: 1;
  color: var(--brand-light);
}
.banner__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}
.banner__image {
  aspect-ratio: 4/5;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.banner__image img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.banner__text { padding-block: 2rem; }
.banner__text h2 {
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin: 18px 0 24px;
  color: var(--cream);
}
.banner__text h2 em {
  font-style: italic;
  font-weight: 500;
  color: var(--brand-light);
}
.banner__text p {
  color: var(--light);
  max-width: 42ch;
  margin-bottom: 32px;
  font-size: 15px;
  line-height: 1.8;
}


/* ─────────────────────────────────────────────
   VISIT / LOCATION SECTION
   ───────────────────────────────────────────── */
.visit { background: var(--cream); }
.visit__inner {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: stretch;
}
.visit__info {
  padding-block: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.visit__info h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 16px 0 28px;
  color: var(--dark);
}
.visit__info h2 em {
  font-style: italic;
  font-weight: 500;
  color: var(--brand);
}
.visit__details {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-bottom: 32px;
}
.detail {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.detail__icon {
  width: 38px; height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--cream-warm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
}
.detail__icon svg { width: 16px; height: 16px; }
.detail__label {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 4px;
  font-weight: 500;
}
.detail__value {
  font-size: 14px;
  color: var(--dark);
  font-weight: 400;
  line-height: 1.6;
}
.detail__value a:hover { color: var(--brand); }
.visit__map {
  aspect-ratio: 4/3;
  background: var(--cream-warm);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.visit__map iframe {
  width: 100%; height: 100%;
  border: 0;
  filter: saturate(0.85) contrast(0.95);
}


/* ─────────────────────────────────────────────
   VALUES GRID SECTION
   ───────────────────────────────────────────── */
.values {
  background: var(--cream);
  padding-block: clamp(3rem, 6vw, 5rem);
  border-block: 1px solid var(--hairline);
}
.values__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
}
.value {
  text-align: center;
  padding-inline: 1rem;
}
.value__icon {
  width: 52px; height: 52px;
  border: 1px solid var(--brand);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  color: var(--brand);
}
.value__icon svg { width: 22px; height: 22px; }
.value h3 {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dark);
  margin-bottom: 8px;
}
.value p {
  font-size: 13px;
  color: var(--muted);
  max-width: 22ch;
  margin: 0 auto;
  line-height: 1.7;
}


/* ─────────────────────────────────────────────
   RESPONSIVE MEDIA QUERIES
   ───────────────────────────────────────────── */
@media (max-width: 980px) {
  .hero__inner, .story__inner, .banner__inner, .visit__inner, .values__grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .hero__visual {
    order: -1;
    aspect-ratio: 1;
  }
  .hero__badge {
    width: 92px; height: 92px;
    bottom: 16px; left: 16px;
    font-size: 8px;
  }
  .hero__badge .price { font-size: 18px; }
  .hero h1 { font-size: clamp(2.4rem, 11vw, 4rem); }
  .story__image, .banner__image { aspect-ratio: 4/4; }
}

@media (max-width: 560px) {
  .hero__cta { width: 100%; }
  .hero__cta .btn { flex: 1; justify-content: center; }
}




/* 1. Container Grid Layout */
.s-products-list-wrapper.s-products-list-horizontal-cards {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 24px !important;
    padding: 16px !important;
   
}

/* Responsive fix for smaller screens */
@media (max-width: 991px) {
    .s-products-list-wrapper.s-products-list-horizontal-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 600px) {
  .s-product-card-content-main font {
  font-size: 14px !important;
}
    .s-products-list-wrapper.s-products-list-horizontal-cards {
       grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
       gap: 5px !important;
       padding-left: 0px !important;
       padding-right: 0px !important;
    }
}

/* 2. Product Card Reset & Vertical Alignment */
custom-salla-product-card.s-product-card-horizontal {
    display: flex !important;
    flex-direction: column !important;
    background-color: #fbf8f2 !important;
    border-radius: 0px !important; /* Sharp corners like the image */
    overflow: hidden !important;
    box-shadow: none !important;
    height: 100% !important;
}

/* 3. Image Section Styling */
custom-salla-product-card.s-product-card-horizontal .s-product-card-image {
    width: 100% !important;
    height: auto !important;
   
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

custom-salla-product-card.s-product-card-horizontal .s-product-card-image img {
    width: 100% !important;
    height: 100% !important;
     aspect-ratio: 1 / 1 !important; /* Forces a perfect square */
   
    object-fit: cover !important;
}

/* 4. Content Area Styling (Text and Pricing) */
custom-salla-product-card.s-product-card-horizontal .s-product-card-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* Centers text like reference */
    padding: 24px 10px !important;
    text-align: center !important;
    flex-grow: 1 !important;
}

/* Title Styling */
custom-salla-product-card.s-product-card-horizontal .s-product-card-content-title a {
  
    font-size: 18px !important;
    font-weight: 500 !important;
    color: #1a1a1a !important;
    text-decoration: none !important;
}

/* Sub-info (Pieces counter text if it separates inside your theme) */
custom-salla-product-card.s-product-card-horizontal .s-product-card-content-main {
    margin-bottom: 12px !important;
}

/* Price Styling */
custom-salla-product-card.s-product-card-horizontal .s-product-card-price {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #333333 !important;
    margin-top: 8px !important;
    margin-bottom: 20px !important;
}

/* 5. Footer & Buttons Styling */
custom-salla-product-card.s-product-card-horizontal .s-product-card-content-footer {
    width: 100% !important;
    margin-top: auto !important; /* Pushes the button to the absolute bottom */
    display: flex !important;
    justify-content: center !important;
}

/* Specific styling target for Salla's Add to Cart button container */
custom-salla-product-card.s-product-card-horizontal salla-add-product-button, 
custom-salla-product-card.s-product-card-horizontal .w-full {
    width: 100% !important;
}

/* Reference Button: Sharp border, transparent/light background, uppercase text */
custom-salla-product-card.s-product-card-horizontal button.s-button-element {
    width: 100% !important;
    background-color: transparent !important;
    border: 1px solid #1a1a1a !important;
    color: #1a1a1a !important;
    border-radius: 0px !important; /* Sharp rect style */
    padding: 12px 0 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-weight: 500 !important;
    transition: background 0.3s ease, color 0.3s ease !important;
}

/* Add a sleek hover effect to the button */
custom-salla-product-card.s-product-card-horizontal button.s-button-element:hover {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
}

/* 6. Hide/Clean components not visible in reference (e.g. wishlist heart icon) */
custom-salla-product-card.s-product-card-horizontal .s-product-card-wishlist-btn {
    display: none !important;
}

.s-product-card-content-sub {
justify-content: center !important;
}

.s-product-card-horizontal .s-product-card-image:where([dir=ltr],[dir=ltr] *) {
    border-bottom-left-radius: 0px;
   border-top-left-radius: 0px; 
}
/* Sticky Tabs Style */
#featured-products-style2-3 {
    position: relative; /* Establishes the boundary context for the sticky tabs */
}

#featured-products-style2-3 .tabs {
    position: sticky !important;
    top: 0; /* Adjust this value if you have a sticky header (e.g., top: 60px;) */
    z-index: 50; /* Ensures the tabs slide over the product cards cleanly */
    background-color: #f3f4f6 !important; /* Matches bg-gray-100 to mask elements scrolling underneath */
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
   }

/* Optional: Ensures mobile touch scrolling behaves nicely if tabs overflow horizontally */
#featured-products-style2-3 .tabs.hide-scroll {
    overflow-x: auto !important;
    display: flex !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch;
  
  background-color: #f5f0e8 !important;
  
}

@media (max-width: 639px) {
    /* Title Styling */
custom-salla-product-card.s-product-card-horizontal .s-product-card-content-title a {
  
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #1a1a1a !important;
    text-decoration: none !important;
} 
  .sticky-tabs-container {
  background-color: #f8f2ec; 
  padding: 0 15px 40px;
  
}
  .s-product-card-content-main, .s-product-card-content-title {
    margin-bottom: 0px !important;
  }
  custom-salla-product-card.s-product-card-horizontal .s-product-card-price {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #333333 !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
  }

    /* Optional: Ensures the horizontal flex card behaves nicely in a tighter 2-column grid */
    .s-product-card-horizontal {
        flex-direction: column !important; 
        align-items: flex-start !important;
    }
    
    .s-product-card-horizontal .s-product-card-image {
        width: 100% !important; /* Makes image take full width of the half-column */
        max-width: 100% !important;
    }
    .s-block__title h2 { font-size: 20px !important; }
.footer-is-light .store-footer .contact-social {
  padding: 0 !important;
}
  .s-block-simple-section__content h2 {
    font-size: 26px !important;
}

}




@media (max-width: 767px) {
    /* 1. Add safe spacing to the main header container edges */
    #mainnav .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* 2. Shrink the hamburger menu icon and add spacing after it */
    .mburger {
        margin-right: 8px !important;
    }
    .mburger .sicon-menu {
        font-size: 1.25rem !important; /* Makes hamburger icon smaller */
    }

    /* 3. Scale down the logo image slightly so it doesn't crowd the icons */
    .navbar-brand img {
        max-height: 28px !important;
        width: auto !important;
    }

    /* 4. Shrink the User Profile Icon */
    .s-user-menu-login-btn svg {
        width: 22px !important;
        height: 22px !important;
    }

    /* 5. Shrink the Shopping Bag Icon */
    #s-cart-icon svg, 
    .s-cart-summary-icon svg {
        width: 20px !important;
        height: 22px !important;
    }

    /* 6. Adjust the red notification badge position and size */
    .s-cart-summary-count {
        font-size: 9px !important;
        min-width: 14px !important;
        height: 14px !important;
        line-height: 14px !important;
        top: -4px !important;
        right: -4px !important;
    }

    /* 7. Shrink the "0 AED" text size */
    .s-cart-summary-total {
        font-size: 11px !important;
    }

    /* 8. Fix the overall spacing and margins between the profile and cart */
    .main-nav-container .flex.items-center.justify-end {
        margin-top: 4px !important;
        margin-bottom: 4px !important;
        gap: 10px !important; /* Creates a clean, uniform gap between components */
    }

    /* Eliminate forced heavy margins from the component wrapper */
    salla-cart-summary {
        margin-left: 0px !important;
        margin-right: 0px !important;
    }
    
    .s-cart-summary-wrapper {
        padding: 5px 4px !important; /* Trims down excessive internal padding */
    }
  .sicon-shopping-bag {
    width: 30px !important;
    height: 30px !important;
  }
  .navbar-brand {
    margin-right: 18px;
  }
}



/* Responsive fix for smaller screens */
@media (max-width: 991px) {
    .container--products-list .s-products-list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 600px) {
 
    .container--products-list .s-products-list {
       grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
       gap: 5px !important;
       padding-left: 0px !important;
       padding-right: 0px !important;
    }
}

/* 3. Image Section Styling */
.s-product-card-image {
    width: 100% !important;
    height: auto !important;
   
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.s-product-card-image img {
    width: 100% !important;
    height: 100% !important;
     aspect-ratio: 1 / 1 !important; /* Forces a perfect square */
   
    object-fit: cover !important;
}

.s-product-card-vertical .s-product-card-image {
      border-bottom-left-radius: 0px;
    border-top-left-radius: 0px;
      border-top-right-radius: 0;
}
.s-product-card-entry {
    display: flex !important;
    flex-direction: column !important;
    background-color: #fbf8f2 !important;
    border-radius: 0px !important; /* Sharp corners like the image */
    overflow: hidden !important;
    box-shadow: none !important;
    height: 100% !important;
}






/* 3. Image Section Styling */
.s-product-card-entry .s-product-card-image {
    width: 100% !important;
    height: auto !important;
   
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.s-product-card-entry .s-product-card-image img {
    width: 100% !important;
    height: 100% !important;
     aspect-ratio: 1 / 1 !important; /* Forces a perfect square */
   
    object-fit: cover !important;
}

/* 4. Content Area Styling (Text and Pricing) */
.s-product-card-entry .s-product-card-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* Centers text like reference */
    padding: 24px 16px !important;
    text-align: center !important;
   
}

/* Title Styling */
.s-product-card-entry .s-product-card-content-title a {
  
    font-size: 18px !important;
    font-weight: 500 !important;
    color: #1a1a1a !important;
    text-decoration: none !important;
}

/* Sub-info (Pieces counter text if it separates inside your theme) */
.s-product-card-entry .s-product-card-content-main {
    margin-bottom: 12px !important;
}

/* Price Styling */
.s-product-card-entry .s-product-card-price {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #333333 !important;
    margin-top: 8px !important;
    margin-bottom: 20px !important;
}

/* 5. Footer & Buttons Styling */
.s-product-card-entry .s-product-card-content-footer {
    width: 100% !important;
    margin-top: auto !important; /* Pushes the button to the absolute bottom */
    display: flex !important;
    justify-content: center !important;
}

/* Specific styling target for Salla's Add to Cart button container */
.s-product-card-entry salla-add-product-button, 
.s-product-card-entry .w-full {
    width: 100% !important;
}

/* Reference Button: Sharp border, transparent/light background, uppercase text */
.s-product-card-entry button.s-button-element {
    width: 100% !important;
    background-color: transparent !important;
    border: 1px solid #1a1a1a !important;
    color: #1a1a1a !important;
    border-radius: 0px !important; /* Sharp rect style */
    padding: 12px 0 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-weight: 500 !important;
    transition: background 0.3s ease, color 0.3s ease !important;
}

/* Add a sleek hover effect to the button */
.s-product-card-entry button.s-button-element:hover {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
}
.s-product-card-entry button.s-button-element:hover .s-button-text {
  color: #fff !important;
}
custom-salla-product-card.s-product-card-horizontal button.s-button-element:hover {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
}
custom-salla-product-card.s-product-card-horizontal button.s-button-element:hover .s-button-text {
  
    color: #ffffff !important;
}
/* 6. Hide/Clean components not visible in reference (e.g. wishlist heart icon) */
.s-product-card-entry .s-product-card-wishlist-btn {
    display: none !important;
}
/* Ensure both text and bag icon invert beautifully to white on hover */
custom-salla-product-card.s-product-card-horizontal button.s-button-element:hover .s-button-text,
custom-salla-product-card.s-product-card-horizontal button.s-button-element:hover .s-button-text i,
custom-salla-product-card.s-product-card-horizontal button.s-button-element:hover .s-button-text span,
custom-salla-product-card.s-product-card-vertical button.s-button-element:hover .s-button-text,
custom-salla-product-card.s-product-card-vertical button.s-button-element:hover .s-button-text i,
custom-salla-product-card.s-product-card-vertical button.s-button-element:hover .s-button-text span {
    color: #ffffff !important;
    fill: #ffffff !important; /* Safety fallback for SVG rendering engines */
}
.s-product-card-content-sub {
justify-content: center !important;
}

.s-product-card-entry .s-product-card-image:where([dir=ltr],[dir=ltr] *) {
    border-bottom-left-radius: 0px;
   border-top-left-radius: 0px; 
}
/* 1. Base Styling for Toast Buttons */
salla-add-product-toast .s-add-product-actions button.s-button-element,
salla-add-product-toast .s-add-product-toast__actions button.s-button-element {
    width: 100% !important;
    background-color: transparent !important;
    border: 1px solid #1a1a1a !important;
    color: #1a1a1a !important;
    border-radius: 0px !important;
    padding: 12px 0 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-weight: 500 !important;
    transition: background 0.3s ease, color 0.3s ease !important;
}

/* 2. Hover Background Logic */
salla-add-product-toast .s-add-product-toast__actions button.s-button-element:hover {
    background-color: #1a1a1a !important;
}

/* 3. Text and SVG Color Inversion on Hover */
salla-add-product-toast .s-add-product-toast__actions button.s-button-element:hover .s-button-text,
salla-add-product-toast .s-add-product-toast__actions button.s-button-element:hover .s-button-text span,
salla-add-product-toast .s-add-product-toast__actions button.s-button-element:hover .s-button-text svg,
salla-add-product-toast .s-add-product-toast__actions button.s-button-element:hover .s-button-text svg path {
    color: #ffffff !important;
    stroke: #ffffff !important; /* Crucial for these specific SVGs */
    fill: none !important; /* Keeps the SVGs from turning into solid blocks */
}
/* 1. Base Styling for the Submit Order button */
button.s-button-element.s-button-solid.s-button-primary.s-button-loader-center {
    width: 100% !important;
    background-color: transparent !important;
    border: 1px solid #1a1a1a !important;
    color: #1a1a1a !important;
    border-radius: 0px !important;
    padding: 12px 0 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-weight: 500 !important;
    transition: background 0.3s ease, color 0.3s ease !important;
}

/* 2. Hover Background Logic */
button.s-button-element.s-button-solid.s-button-primary.s-button-loader-center:hover {
    background-color: #1a1a1a !important;
}

/* 3. Text Color Inversion on Hover */
button.s-button-element.s-button-solid.s-button-primary.s-button-loader-center:hover .s-button-text,
button.s-button-element.s-button-solid.s-button-primary.s-button-loader-center:hover .s-button-text span {
    color: #ffffff !important;
}
.s-user-menu-trigger {
  background: none !important;
  padding: 0;
}
.s-contacts-list-vertical > div:first-child {
    display: none !important;
}

.s-cart-summary-content {
  width: 65px;
}

.text-primary {
  color: #916d4f !important;
}




.cart .items-start {
  justify-content: center !important;
}



@media screen and (max-width: 767px;) {
  .s-user-menu-login-btn {
    width: 30px !important;
    height: 30px !important;
  }
}