/* ================================
   THIRDWAVE — Beige/Black + Logo Pattern
   Paste in: Salla > Theme > Custom CSS
   Replace YOUR_LOGO_URL below.
   ================================ */

/* -------- Brand Tokens -------- */
:root{
  --bg:#f5f0e6;         /* beige */
  --bg-2:#efe7d8;       /* section beige */
  --ink:#111111;        /* deep black */
  --muted:#6f6458;      /* warm coffee text */
  --line:#dfd5c3;       /* borders */
  --brand:#111111;      /* buttons/accents */
  --brand-2:#2a2a2a;    /* hover */
  --logo-url: url("YOUR_LOGO_URL"); /* <<< replace with your uploaded logo URL */
  --logo-size: 72px;    /* small logo tile size */
  --logo-opacity: .055; /* watermark intensity (0.03–0.09 works best) */
}

/* -------- Global + Background Pattern -------- */
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Poppins","Cairo",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  letter-spacing:.2px;
  position:relative;
}

/* Tiled logo watermark on every page */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;                      /* behind everything */
  pointer-events:none;
  background-color:var(--bg);      /* base beige */
  background-image: var(--logo-url);
  background-repeat: repeat;
  background-size: var(--logo-size) auto;  /* small logos */
  background-position: top left;
  opacity: var(--logo-opacity);    /* subtle! */
}

/* Optional: slightly stronger pattern only in hero/above-the-fold
.hero, .hero-banner { background-color: transparent } */

/* -------- Header / Menu (beige) -------- */
header, .navbar, .site-header, .header-main, .navbar-container{
  background:var(--bg)!important;
  color:var(--ink)!important;
  border-bottom:1px solid var(--line)!important;
  box-shadow:0 6px 18px rgba(0,0,0,.05);
}
header a, .navbar a, .site-header a{
  color:var(--ink)!important;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.35px;
}
header a:hover, .navbar a:hover, .site-header a:hover{ color:var(--muted)!important }
.navbar-logo img, header .logo img{ max-height:56px; filter:contrast(1.05) }

/* Sticky nuance */
.site-header, .navbar{ transition: all .25s ease }
.is-sticky .site-header, .is-sticky .navbar{
  background:var(--bg-2)!important;
  box-shadow:0 10px 22px rgba(0,0,0,.08);
}

/* -------- Typography -------- */
h1,h2,h3,h4{ color:var(--ink); margin:0 0 .5rem }
h1{ font-size:clamp(28px,3.5vw,44px); font-weight:800; letter-spacing:.4px }
h2{ font-size:clamp(22px,2.4vw,32px); font-weight:700 }
h3{ font-size:clamp(18px,1.8vw,22px); font-weight:700 }
p,li{ color:var(--muted); line-height:1.7 }
.section-title{ position:relative; display:inline-block; padding-bottom:.35rem }
.section-title::after{
  content:""; position:absolute; left:0; bottom:0;
  width:64px; height:3px; background:var(--ink); border-radius:2px;
}

/* -------- Buttons -------- */
button,.btn,.s-button,.add-to-cart,.buy-now{
  background:var(--brand)!important; color:var(--bg)!important;
  border:none!important; border-radius:999px!important;
  padding:.85rem 1.25rem!important; font-weight:800!important;
  text-transform:uppercase; letter-spacing:.45px; transition:all .25s ease;
}
button:hover,.btn:hover,.s-button:hover,.add-to-cart:hover,.buy-now:hover{
  background:var(--brand-2)!important; transform:translateY(-1px);
}
.btn-ghost{ background:transparent!important; color:var(--ink)!important; border:1px solid var(--ink)!important }
.btn-ghost:hover{ background:var(--ink)!important; color:var(--bg)!important }

/* -------- Cards / Product Grid -------- */
.product-card, .product-item, .card, .s-card{
  background:rgba(255,255,255,.65);     /* sit nicely on patterned beige */
  backdrop-filter:saturate(1.05) blur(0px);
  border:1px solid var(--line)!important;
  border-radius:22px!important;
  box-shadow:0 10px 26px rgba(0,0,0,.06);
  transition:transform .25s ease, box-shadow .25s ease;
}
.product-card:hover, .product-item:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 30px rgba(0,0,0,.1);
}
.products-grid, .products, .grid{ gap:22px!important }
.product-card .product-title, .product-item .product-title{
  color:var(--ink)!important; font-weight:800; font-size:1.06rem; line-height:1.35;
}
.product-card .product-price, .product-item .price, .price{
  color:var(--ink)!important; font-weight:800; font-size:1.12rem;
}
.product-card .compare-price, .old-price{
  color:#8c8174; text-decoration:line-through; font-weight:600; margin-inline-start:.4rem;
}
.product-card .thumb img, .product-item img{
  aspect-ratio:1/1; object-fit:cover; border-bottom:1px solid var(--line);
}

/* Badges */
.badge{
  display:inline-block; padding:.25rem .6rem; font-size:.75rem; font-weight:700;
  border-radius:999px; border:1px solid var(--line); background:#fff; color:var(--muted);
}
.badge--new{border-color:#c5b79e; color:#715b3e}
.badge--best{background:rgba(31,157,85,.08); color:#1f9d55; border-color:rgba(31,157,85,.3)}
.badge--promo{background:rgba(180,83,9,.08); color:#b45309; border-color:rgba(180,83,9,.3)}

/* -------- Forms / Inputs -------- */
input, select, textarea{
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:.8rem 1rem;
}
label{ font-weight:700; color:var(--ink) }

/* -------- Mini-Cart / Drawer -------- */
.mini-cart, .drawer, .side-cart{
  background:#ffffff; border-left:1px solid var(--line);
  box-shadow:-12px 0 28px rgba(0,0,0,.08)
}
.mini-cart .total, .drawer .total{ font-weight:800; color:var(--ink) }

/* -------- Footer -------- */
footer{
  background:var(--ink)!important; color:var(--bg)!important; border-top:1px solid var(--line)
}
footer a{ color:var(--bg)!important }
footer a:hover{ opacity:.85; text-decoration:underline }

/* -------- Tables / Policy Pages -------- */
table{ border-collapse:separate; border-spacing:0; width:100%; background:#fff;
  border:1px solid var(--line); border-radius:14px; overflow:hidden }
th,td{ padding:14px 16px; border-bottom:1px solid var(--line) }
th{ background:var(--bg-2); color:var(--ink); font-weight:800 }
tr:last-child td{ border-bottom:none }

/* -------- RTL polish -------- */
html[dir="rtl"] .section-title::after{ left:auto; right:0 }
html[dir="rtl"] .product-card .compare-price{ margin-inline-start:0; margin-inline-end:.4rem }

/* -------- Responsive -------- */
@media (max-width:1024px){
  .products-grid{ gap:18px!important }
  .navbar a{ font-size:.95rem }
}
@media (max-width:640px){
  h1{ font-size:26px }
  .product-card,.product-item{ border-radius:18px }
  button,.btn,.s-button{ padding:.75rem 1rem!important }
}