:root{
  --brand:#7c1e22; --brand-2:#a32a31; --accent:#f4c542;
  --ink:#121212; --muted:#6b7280; --bg:#f8f6f5; --white:#fff;
  --radius:14px; --shadow:0 10px 25px rgba(0,0,0,.08); --tr:all .25s ease;
}
*{box-sizing:border-box} body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,sans-serif;background:var(--bg);color:#333}

/* ============ HEADER (transparent over hero → solid on scroll) ============ */
.header{position:sticky;top:0;z-index:1000;transition:var(--tr)}
.header--overlay{background:transparent}
.header--solid{background:var(--white);box-shadow:0 2px 12px rgba(0,0,0,.08)}
.header-inner{max-width:1200px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:14px 18px}
.header .logo img{height:56px;transition:var(--tr)}
/* nav */
.nav{display:flex;gap:28px}
.nav a{font-weight:600;text-decoration:none;transition:var(--tr)}
/* colors when overlaying hero */
.header--overlay .nav a, .header--overlay .h-icon{color:#fff}
.header--overlay .h-cta{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.25)}
.header--overlay .h-cta:hover{background:rgba(255,255,255,.22)}
/* colors when solid */
.header--solid .nav a, .header--solid .h-icon{color:var(--ink)}
.header--solid .h-cta{background:var(--brand);color:#fff}
.header--solid .h-cta:hover{background:var(--brand-2)}

.h-icons{display:flex;align-items:center;gap:16px}
.h-icon{font-size:20px}
.h-cta{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;font-weight:700;text-decoration:none}

/* mobile drawer */
.menu-toggle{display:none;font-size:26px;cursor:pointer}
@media (max-width:980px){ .nav{display:none} .menu-toggle{display:block} }

.drawer{
  position:fixed;inset:0 0 0 auto;width:min(82vw,360px);
  background:#1b1b1b;color:#eee;transform:translateX(100%);
  transition:var(--tr);box-shadow:-2px 0 18px rgba(0,0,0,.25);
  padding:26px;z-index:1001;display:flex;flex-direction:column;gap:6px
}
.drawer.active{transform:translateX(0)}
.drawer .d-close{align-self:flex-end;font-size:22px;cursor:pointer;color:#fff}
.drawer .logo img{width:160px;opacity:.95;margin:6px 0 10px}
.drawer nav a{display:block;color:#eee;text-decoration:none;font-weight:600;padding:14px 6px;border-bottom:1px solid rgba(255,255,255,.08)}
.drawer nav a:hover{color:#fff}
.backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;visibility:hidden;transition:var(--tr);z-index:1000}
.backdrop.show{opacity:1;visibility:visible}
.ast-woocommerce-container{
	background:#F8EBE6 !important;
}
.header--overlay .nav a{
    color: #000!important;
}

/* ============ PAGE HERO (like homepage) ============ */
.page-hero{
  position:relative;height:42vh;min-height:300px;
  background:url('https://images.unsplash.com/photo-1522335789203-aabd1fc54bc9?q=80&w=2000&auto=format&fit=crop') center/cover no-repeat;
  display:grid;place-items:center;color:#fff;text-align:center
}
.page-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.35))}
.hero-inner{position:relative;z-index:2;padding:0 16px}
.hero-title{font-family: "Playfair Display", Georgia, serif; font-size:clamp(28px,5vw,48px);font-weight:800;margin:4px 0 6px}
.hero-sub{letter-spacing:.35em;text-transform:uppercase;opacity:.9}
.breadcrumb{margin-top:10px;font-weight:600;opacity:.9}
.breadcrumb a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4)}
.breadcrumb a:hover{border-color:#fff}


/* ============ FOOTER (dark, like homepage) ============ */
.footer{background:#111;color:#d1d5db;margin-top:46px}
.footer-inner{max-width:1200px;margin:auto;padding:60px 18px}
.f-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:28px}
.f-col-5{grid-column:span 5}.f-col-3{grid-column:span 3}
@media (max-width:980px){.f-col-5,.f-col-3{grid-column:1/-1}}
.footer .logo img{width:190px;margin-bottom:14px;opacity:.95}
.f-title{color:var(--accent);font-weight:800;margin-bottom:12px}
.f-links{list-style:none;margin:0;padding:0}
.f-links li{margin:8px 0}
.f-links a{color:#d1d5db;text-decoration:none}
.f-links a:hover{color:#fff}
.f-social a{display:inline-block;margin-right:12px;color:#fff;font-size:18px}
.f-bottom{border-top:1px solid rgba(255,255,255,.15);margin-top:30px;padding-top:18px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.f-pay img{height:24px;opacity:.85;margin-left:8px}
.f-pay img:hover{opacity:1}