/* Add custom CSS styles below */ 

/* ==================================================
   FINAL CSS – OPTIMIZED (NO LAYOUT CHANGE)
   Performance-focused for Salla
================================================== */

/* ===============================
   ROOT COLORS
================================ */
:root {
  --bg-main: #CBB89A;
  --bg-card: #E6DAC4;
  --glass-bg: rgba(255,255,255,0.35);
  --glass-strong: rgba(0,0,0,0.35);
  --text-dark: #2b2621;
  --brown-glass: rgba(86,60,38,0.75);
  --border-soft: rgba(0,0,0,0.12);
}

/* ===============================
   GLOBAL BACKGROUND (PERF FIX)
================================ */
html,
body {
  background-color: var(--bg-main) !important;
  background-image: url("grain-strong.png") !important;
  background-repeat: repeat;
  background-blend-mode: overlay;
  color: var(--text-dark);
  font-size: 13px;
  line-height: 1.6;
}

main,
section,
.s-app,
.s-content {
  background: transparent !important;
}

/* ===============================
   HEADER (UNIFIED + LIGHT)
================================ */
header,
.s-header,
.s-header *,
.s-header__inner,
.s-header__toolbar,
.s-header__nav,
.s-header__actions,
.s-header__search {
  background-color: var(--bg-main) !important;
  background-image: url("grain-strong.png");
  background-repeat: repeat;
  background-blend-mode: overlay;
  box-shadow: none !important;
  border: none !important;
}

/* Search */
.s-search,
.s-search__wrapper,
.s-search input {
  background-color: rgba(255,255,255,0.25) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 18px;
  border: none !important;
}

/* ===============================
   PRODUCT CARDS – GLASS (OPTIMIZED)
================================ */
.s-product-card,
.product-card,
.s-block,
.cart-wrapper {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border-radius: 22px;
  border: 1px solid var(--border-soft);
  box-shadow: 0 25px 60px rgba(0,0,0,0.25);
  contain: layout paint;
  will-change: transform;
}

/* ===============================
   PRODUCT IMAGES (CLS + PERF)
================================ */
.s-product-card__image,
.product-card__image,
.s-product-image,
.s-product-card__image-wrapper,
.s-product-card__image-container {
  background: rgba(255,255,255,0.25) !important;
  border-radius: 18px;
  border: none !important;
  box-shadow: none !important;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.s-product-card__image img,
.product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  content-visibility: auto;
  contain-intrinsic-size: 300px 300px;
}

/* Remove pseudo borders */
.s-product-card__image::before,
.s-product-card__image::after,
.product-card__image::before,
.product-card__image::after {
  display: none !important;
  content: none !important;
}

/* ===============================
   BUTTONS – DARK GLASS
================================ */
.s-button--primary,
.s-add-to-cart,
button {
  background: var(--brown-glass) !important;
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  color: #F3EEE6 !important;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.25);
  font-size: 12.5px;
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.35),
    0 18px 40px rgba(0,0,0,0.45);
}

.s-button--primary:hover,
.s-add-to-cart:hover {
  background: rgba(74,50,30,0.85) !important;
}

/* ===============================
   ICONS CLEAN
================================ */
.s-user-menu,
.s-cart,
.s-user-menu *,
.s-cart * {
  background: transparent !important;
  box-shadow: none !important;
}

/* ===============================
   LOGIN
================================ */
.s-auth,
.s-login,
.s-auth-modal,
.s-login__container,
.s-login__header,
.s-login__body {
  background: rgba(203,184,154,0.9) !important;
  backdrop-filter: blur(16px);
  border: none !important;
}

.s-login input,
.s-login__input {
  background: rgba(255,255,255,0.55) !important;
  border-radius: 14px;
  font-size: 12.5px;
}

.s-login button,
.s-login .s-button {
  background: var(--brown-glass) !important;
  color: #fff !important;
}

/* ===============================
   OVERLAY
================================ */
.s-overlay,
.s-modal-overlay,
.s-auth-overlay,
[class*="overlay"] {
  background-color: rgba(0,0,0,0.35) !important;
}

/* ===============================
   SAFE WHITE CLEAN (NO *)
================================ */
[style*="background-color: white"],
[style*="background-color:#fff"] {
  background-color: transparent !important;
}

/* ===============================
   FOOTER
================================ */
footer,
.s-footer,
.s-footer__inner,
.s-footer-system {
  background-color: var(--bg-main) !important;
  color: var(--text-dark);
  font-size: 12px;
  contain: layout paint;
}

/* ===============================
   CLEAN GLOW – LOGO & ACCOUNT
================================ */
.s-header__logo,
.s-user-menu {
  position: relative !important;
  z-index: 2;
}

.s-header__logo::after,
.s-user-menu::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}

.s-header__logo::after {
  width: 110%;
  height: 110%;
  background: radial-gradient(circle,
    rgba(255,240,210,0.6),
    rgba(255,240,210,0.3),
    transparent 70%);
  filter: blur(14px);
}

.s-user-menu::after {
  width: 120%;
  height: 120%;
  background: radial-gradient(circle,
    rgba(255,240,210,0.45),
    rgba(255,240,210,0.25),
    transparent 70%);
  filter: blur(12px);
}

/* ===============================
   HOME CONTAINER FIX
================================ */
.page-home .container {
  padding: 0 !important;
}