/* ================================================================
   GUILLOCHÉ — Salia Theme | Custom CSS v2
   Optimized: CLS Fixes + Image Performance + Clean Code
   Last updated: Feb 2026
   ================================================================ */

/* ─── GLOBAL BASE ─────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
  text-size-adjust: 100%;
}

body {
  -webkit-overflow-scrolling: touch;
  line-height: 1.5;
  overflow-x: hidden;
}

.app-inner {
  overflow-x: hidden;
}

img,
svg,
video,
canvas,
iframe {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

/* ─── HEADER ──────────────────────────────────────────────────── */
.main-nav-container.fixed-pinned .inner {
  background-color: #ffffff;
  border-bottom: 1px solid #0e1436c9;
  box-shadow: none;
  min-height: 95px;
}

.w-1\/3 {
  width: 38.333333% !important;
}

/* ─── HERO SLIDER ─────────────────────────────────────────────── */
.advanced-slider,
.s-slider-wrapper,
.s-slider-container {
  overflow: hidden;
}

.advanced-slider {
  min-height: var(--mobileSliderHeight, 50vh);
}

@media (min-width: 640px) {
  .advanced-slider {
    min-height: var(--sliderHeight, 70vh);
  }
}

.advanced-slider__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
  transform: translateZ(0);
}

/* Slider caption */
.advanced-slider__caption {
  align-items: flex-end;
  padding-bottom: 32px;
}

.advanced-slider__caption__inner.advanced-slider__caption__inner--center {
  margin: 0 62px !important;
}

.advanced-slider__caption__inner__content {
  width: 100% !important;
}

.advanced-slider__caption__inner__content__button {
  background-color: #ffffff !important;
  backdrop-filter: blur(5px);
  width: 100% !important;
  max-width: 300px;
  border-radius: 4px;
}

.advanced-slider__caption__inner__content__button span {
  color: #0d1335 !important;
  font-weight: 600;
}

.advanced-slider__caption__inner__content__button:hover::before {
  width: 300px;
  border-radius: 4px;
}

/* ─── FIXED BANNER — CLS FIX (padding-top trick) ─────────────── */
/*
  aspect-ratio alone gets overridden by Salla's .wide-placeholder.
  padding-top % method is bulletproof across all browsers.
  617 / 1440 = 42.84%
*/
.s-block--fixed-banner.fixed-banner--2 > .container {
  max-width: 100%;
  padding: 0;
}

.s-block--fixed-banner.fixed-banner--2 .banner {
  position: relative;
  display: block;
  width: 100%;
  padding-top: 42.84%; /* 617/1440 — reserves exact space before load */
  overflow: hidden;
}

.s-block--fixed-banner.fixed-banner--2 .banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  will-change: transform;
  transform: translateZ(0);
}

/* Fallback for other banners */
.s-block--fixed-banner .banner {
  display: block;
  width: 100%;
  overflow: hidden;
}

.s-block--fixed-banner .banner img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 0;
}

/* ─── SPECIAL CATEGORIES ──────────────────────────────────────── */
.special-categories .animated::before {
  visibility: hidden;
}

.special-categories .single-banner a,
.special-categories .banner-image a {
  display: block;
  width: 100%;
  overflow: hidden;
}

/* padding-top trick for category banners too */
.special-categories .single-banner {
  position: relative;
}

.special-categories .single-banner a {
  position: relative;
  padding-top: 100%; /* 1:1 ratio */
}

.special-categories .single-banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
  transform: translateZ(0);
}

.special-categories .group-banner .banner-image {
  position: relative;
}

.special-categories .group-banner .banner-image a {
  position: relative;
  padding-top: 97.3%; /* 360/370 */
}

.special-categories .group-banner .banner-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
  transform: translateZ(0);
}

.special-categories .single-banner .banner-wrapper-infor {
  width: 100%;
  justify-items: center;
}

.special-categories .single-banner .banner-button {
  background: #fff;
  display: inline-block;
  font-size: 18px;
  font-weight: 300;
  line-height: 45px;
  overflow: hidden;
  padding: 0 40px;
  position: relative;
  transition: all 0.3s ease;
  z-index: 1;
}

/* ─── PRODUCT CARDS ───────────────────────────────────────────── */
custom-salla-product-card .product-card__image,
.product-card .product-card__image {
  position: relative;
}

custom-salla-product-card .product-card__image a,
.product-card .product-card__image a {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

custom-salla-product-card .product-card__image img,
.product-card .product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
  transform: translateZ(0);
}

/* Out-of-stock label */
.product-card__out-label {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
}

/* Typography */
.product-card__title {
  margin: 0;
}

.product-card__title a {
  font-weight: 500 !important;
}

.product-card__content {
  padding: 0 0 20px;
}

.starting-or-normal-price .total-price,
.price_is_on_sale .total-price,
.product-card__price .starting-or-normal-price,
.product-card__price .before-price {
  font-weight: 500 !important;
  font-size: 14px !important;
}

/* Hide unused card elements */
.product-card__buttons,
.product-card__actions,
.product-card__addToCart,
.home-block-title,
.lg\:text-3xl,
.brand-logo {
  display: none;
}

/* ─── CART BADGE ──────────────────────────────────────────────── */
.s-cart-summary-count {
  min-width: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ─── ICONS ───────────────────────────────────────────────────── */
.sicon,
.s-social-icon svg {
  flex: 0 0 auto;
}

/* ─── SIZE GUIDE ──────────────────────────────────────────────── */
.s-product-size-guide-wrapper .s-tabs-content {
  max-height: 100vh;
}

/* ─── BELOW-FOLD PERFORMANCE ──────────────────────────────────── */
/* Defer rendering cost of off-screen sections */
.special-categories,
.fixed-products--3,
.fixed-products--4 {
  content-visibility: auto;
  contain-intrinsic-size: 0 600px;
}

/* ─── STICKY PAYMENT BAR (mobile) ────────────────────────────── */
@media (max-width: 640px) {
  .is-sticky-product-bar.has-bottom-nav.product-single .sticky-product-bar {
    bottom: 0;
    padding-bottom: 24px;
  }

  .is-sticky-product-bar .sticky-product-bar {
    gap: 16px;
  }

  .s-modal-padding {
    padding: 24px;
  }
}

/* ─── MOBILE ──────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .selia-bottom-nav {
    display: none;
  }

  /* First section: force 3-column grid */
  .fixed-products--1 > .s-products-list > div {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .fixed-products--1 .s-products-list div .product-card__image {
    height: 180px;
  }

  .product-card--fit-height .product-card__image {
    height: 235px;
  }
}