/* =====================================================================
   Jalal Sons Cloth House - Storefront theme (v2, light "boutique" layout)
   Brand frame from the business card: black header, hero and footer with
   metallic gold. Shopping area: warm cream background, white product
   cards, dark text, so garment photos pop and prices are easy to read.
   Mobile-first from 360px; works on iPhone, Android, iPad, laptops.
   ===================================================================== */
:root, [data-bs-theme="light"] {
  /* Brand */
  --js-black: #0B0B0C;
  --js-charcoal: #151517;
  --js-gold: #C9A227;          /* slightly deeper gold for contrast on cream */
  --js-gold-bright: #D4AF37;
  --js-gold-light: #F1D98A;
  --js-gold-deep: #9A7B2C;
  --js-gold-gradient: linear-gradient(135deg, #F1D98A 0%, #D4AF37 45%, #9A7B2C 100%);
  /* Light surfaces */
  --js-cream: #FAF7F0;         /* page background */
  --js-white: #FFFFFF;         /* cards */
  --js-sand: #F1EBDD;          /* soft panels */
  --js-line: #E6DFD0;          /* borders */
  --js-graphite: #E6DFD0;      /* alias kept for templates that reference it as a border */
  /* Text */
  --js-ink: #1C1A16;
  --js-ivory: #F4ECD8;         /* text on black panels */
  --js-muted: #6F675A;
  /* Jewel accents (badges only) */
  --js-maroon: #6E1E3A;
  --js-emerald: #1E4D3B;
  --js-blush: #E6B8B0;
  /* Status */
  --js-in-stock: #2E8B57;
  --js-low-stock: #C9731F;
  --js-out-stock: #C0392B;

  /* Bootstrap overrides */
  --bs-body-bg: var(--js-cream);
  --bs-body-color: var(--js-ink);
  --bs-body-font-family: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-body-font-size: 1rem;
  --bs-body-line-height: 1.6;
  --bs-secondary-color: var(--js-muted);
  --bs-border-color: var(--js-line);
  --bs-link-color: var(--js-gold-deep);
  --bs-link-hover-color: #7a6122;
  --bs-link-color-rgb: 154, 123, 44;
  --bs-link-hover-color-rgb: 122, 97, 34;
  --bs-heading-color: var(--js-ink);
  --bs-border-radius: 4px;
  --bs-border-radius-sm: 3px;
  --bs-border-radius-lg: 8px;
  --bs-primary: var(--js-gold-bright);
  --bs-primary-rgb: 212, 175, 55;
  --bs-focus-ring-color: rgba(212, 175, 55, .45);
}
html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
body { background: var(--js-cream); color: var(--js-ink); overflow-x: hidden; min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
img, svg, video, iframe { max-width: 100%; }
h1, h2, h3, h4, h5, .display-font { font-family: "Cinzel", Georgia, serif; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--js-ink); }
h1 { font-size: clamp(1.4rem, 1rem + 2vw, 2.3rem); }
h2 { font-size: clamp(1.15rem, .9rem + 1.4vw, 1.7rem); }
h3 { font-size: 1.05rem; }
.accent-font, .tagline { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 500; letter-spacing: .01em; text-transform: none; }
.tagline { color: var(--js-gold-deep); font-size: clamp(1.15rem, 1rem + 1vw, 1.6rem); }
a { text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .2em; }
:focus-visible { outline: 2px solid var(--js-gold-bright); outline-offset: 2px; box-shadow: none !important; }
.text-gold { color: var(--js-gold-deep) !important; }
.text-muted-js { color: var(--js-muted) !important; }
.icon { width: 1.25em; height: 1.25em; vertical-align: -.25em; flex: none; }
.container { --bs-gutter-x: 2rem; }
@media (min-width: 1400px) { .container { max-width: 1280px; } }

/* ---------- Buttons (44px tap targets) ---------- */
.btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; font-size: .85rem; border-radius: 4px; padding: .55rem 1.25rem; }
.btn:hover { text-decoration: none; }
.btn-gold { background: var(--js-gold-gradient); color: #0B0B0C; border: 0; box-shadow: 0 6px 16px -8px rgba(154,123,44,.7); }
.btn-gold:hover, .btn-gold:focus-visible { color: #000; filter: brightness(1.06); transform: translateY(-1px); }
.btn-gold:active { filter: brightness(.92); color: #000; transform: none; }
.btn-gold:disabled { background: var(--js-line); color: var(--js-muted); opacity: 1; box-shadow: none; }
.btn-outline-gold { border: 1.5px solid var(--js-ink); color: var(--js-ink); background: transparent; }
.btn-outline-gold:hover, .btn-outline-gold:focus-visible { background: var(--js-ink); color: var(--js-gold-light); border-color: var(--js-ink); }
.btn-whatsapp { background: #25D366; color: #073b1f; border: 0; }
.btn-whatsapp:hover { background: #1fbd5a; color: #052a16; }
.btn-sm { min-height: 36px; font-size: .75rem; padding: .35rem .9rem; }
.btn-icon { width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); color: var(--js-gold-light); background: transparent; display: inline-flex; align-items: center; justify-content: center; position: relative; }
.btn-icon:hover { border-color: var(--js-gold-bright); color: #fff; }

/* ---------- Divider ornament ---------- */
.js-divider { display: flex; align-items: center; gap: .75rem; margin: .75rem auto 1.75rem; max-width: 300px; }
.js-divider span { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--js-gold-bright)); }
.js-divider span:last-child { background: linear-gradient(90deg, var(--js-gold-bright), transparent); }
.js-divider i { width: 9px; height: 9px; background: var(--js-gold-bright); transform: rotate(45deg); display: block; box-shadow: 0 0 0 3px var(--js-cream), 0 0 0 4px var(--js-gold-deep); }
.section-head { text-align: center; margin-bottom: .25rem; }
.section-head .eyebrow { display: block; font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; color: var(--js-gold-deep); font-size: 1.15rem; margin-bottom: .2rem; }
.section { padding: 2.75rem 0; }
@media (min-width: 992px) { .section { padding: 4rem 0; } }
.section-alt { background: var(--js-sand); }

/* ---------- Announcement bar & top strip ---------- */
.announcement-bar { background: var(--js-gold-gradient); color: #0B0B0C; text-align: center; font-size: .82rem; font-weight: 600; letter-spacing: .06em; padding: .45rem 1rem; }
.top-strip { background: var(--js-black); border-bottom: 1px solid #222; font-size: .8rem; color: var(--js-ivory); }
.top-strip .container { display: flex; align-items: center; gap: 1rem; min-height: 32px; }
.top-strip a { color: var(--js-gold-light); display: inline-flex; align-items: center; gap: .3rem; }

/* ---------- Header (black brand panel) ---------- */
.site-header { position: sticky; top: 0; z-index: 1030; background: rgba(11,11,12,.96); backdrop-filter: blur(8px); border-bottom: 2px solid var(--js-gold-deep); color: var(--js-ivory); }
.header-row { display: flex; align-items: center; gap: .75rem; min-height: 68px; }
.brand { display: flex; align-items: center; gap: .65rem; color: var(--js-gold-bright); }
.brand:hover { text-decoration: none; }
.brand img { width: 46px; height: 46px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-family: "Cinzel", serif; font-weight: 700; letter-spacing: .12em; font-size: .95rem; text-transform: uppercase; white-space: nowrap; color: var(--js-gold-bright); }
.brand-sub { font-family: "Cinzel", serif; font-size: .62rem; letter-spacing: .3em; color: var(--js-ivory); opacity: .8; text-transform: uppercase; }
@media (min-width: 576px) { .brand-name { font-size: 1.1rem; } }
.main-nav { display: none; }
@media (min-width: 992px) {
  .main-nav { display: flex; align-items: center; gap: .15rem; margin-left: auto; padding-left: 1rem; }
  .main-nav > a, .main-nav .dropdown > a { color: var(--js-ivory); padding: .5rem .6rem; font-size: .74rem; white-space: nowrap; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; display: inline-flex; align-items: center; min-height: 44px; border-bottom: 2px solid transparent; }
  .main-nav > a:hover, .main-nav > a.active, .main-nav .dropdown > a:hover { color: var(--js-gold-light); text-decoration: none; border-bottom-color: var(--js-gold-bright); }
  .main-nav > a.sale { color: var(--js-gold-light); }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .header-row { flex-wrap: wrap; padding-bottom: 0; }
  .main-nav { order: 3; flex-basis: 100%; justify-content: center; margin-left: 0; border-top: 1px solid #222; min-height: 44px; }
  .header-actions { margin-left: auto; }
}
@media (min-width: 1360px) { .main-nav > a, .main-nav .dropdown > a { padding: .5rem .75rem; font-size: .8rem; } }
@media (min-width: 1300px) { .search-form { display: flex; } .search-form .form-control { width: 170px; } }
.dropdown-menu { background: var(--js-white); border: 1px solid var(--js-line); border-top: 2px solid var(--js-gold-bright); border-radius: 0 0 6px 6px; padding: .5rem 0; box-shadow: 0 12px 30px -12px rgba(0,0,0,.25); }
.dropdown-item { color: var(--js-ink); padding: .55rem 1.25rem; font-size: .9rem; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--js-sand); color: var(--js-gold-deep); }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: .4rem; }
@media (min-width: 992px) { .header-actions { margin-left: 1rem; } }
.cart-count { position: absolute; top: -4px; right: -4px; background: var(--js-gold-bright); color: #000; font-size: .68rem; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; }
.cart-count:empty, .cart-count[data-count="0"] { display: none; }
.search-form { display: none; }
.site-header .search-form .form-control { background: #1d1d20; border-color: #333; color: var(--js-ivory); }
.site-header .search-form .form-control::placeholder { color: #8a8375; }
.offcanvas { background: var(--js-white); color: var(--js-ink); }
.offcanvas .nav-link { color: var(--js-ink); padding: .8rem 0; border-bottom: 1px solid var(--js-line); font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; }
.offcanvas .nav-link.sub { padding-left: 1rem; text-transform: none; letter-spacing: 0; color: var(--js-muted); }
.offcanvas .nav-link:hover { color: var(--js-gold-deep); }

/* ---------- Forms ---------- */
.form-control, .form-select { background-color: var(--js-white); border: 1px solid var(--js-line); color: var(--js-ink); min-height: 44px; border-radius: 4px; }
.form-control:focus, .form-select:focus { background-color: var(--js-white); color: var(--js-ink); border-color: var(--js-gold-bright); box-shadow: 0 0 0 .2rem rgba(212,175,55,.25); }
.form-control::placeholder { color: #9a9283; }
.form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239A7B2C' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right .75rem center; background-size: 16px 12px; }
.form-control-sm, .form-select-sm { min-height: 38px; }
.form-label { color: var(--js-muted); font-size: .85rem; letter-spacing: .04em; }
.form-check-input { border-color: var(--js-gold-deep); }
.form-check-input:checked { background-color: var(--js-gold-bright); border-color: var(--js-gold-bright); }
.alert { border-radius: 4px; }
.alert-success { background: #E9F6EE; border-color: #BFE3CC; color: #1f5f3a; }
.alert-danger { background: #FBE9E7; border-color: #F2C2BD; color: #8a2a27; }
.alert-warning { background: #FBF0DF; border-color: #F0D7A8; color: #7a4e12; }
.alert-info { background: #F6F0DC; border-color: #E6D39A; color: #6b5316; }

/* ---------- Hero (black card panel) ---------- */
.hero { position: relative; overflow: hidden; background: radial-gradient(ellipse at 70% 30%, #1d1b16 0%, var(--js-black) 60%); color: var(--js-ivory); }
.hero::before { /* diagonal gold ribbon across the top-right corner, as on the card */
  content: ""; position: absolute; top: 60px; right: -100px; width: 380px; height: 26px; background: var(--js-gold-gradient);
  transform: rotate(45deg); transform-origin: center; box-shadow: 0 10px 0 -4px var(--js-black), 0 16px 0 -4px var(--js-gold-deep); opacity: .95; z-index: 0;
}
@media (max-width: 575.98px) { .hero::before { top: 30px; right: -120px; width: 300px; height: 18px; } }
.hero-inner { position: relative; z-index: 1; display: grid; gap: 2rem; padding: 2.5rem 0; align-items: center; }
@media (min-width: 992px) { .hero-inner { grid-template-columns: 1.1fr 1fr; padding: 4rem 0; gap: 3rem; } }
.hero-copy .eyebrow { font-family: "Cormorant Garamond", serif; font-style: italic; color: var(--js-gold-light); font-size: 1.35rem; margin-bottom: .5rem; display: block; }
.hero-copy h1 { font-size: clamp(1.7rem, 1.2rem + 3vw, 3.2rem); line-height: 1.1; margin-bottom: .35rem; color: var(--js-gold-bright); }
.hero-copy .sub { font-family: "Cinzel", serif; letter-spacing: .32em; color: var(--js-ivory); font-size: clamp(.8rem, .7rem + .6vw, 1.1rem); text-transform: uppercase; margin-bottom: 1.25rem; }
.hero-copy .tagline { color: var(--js-gold-light); }
.hero-copy p.lead { color: #cfc6b2; font-size: 1.05rem; max-width: 46ch; }
.hero .btn-outline-gold { border-color: var(--js-gold-bright); color: var(--js-gold-light); }
.hero .btn-outline-gold:hover { background: rgba(212,175,55,.15); color: #fff; border-color: var(--js-gold-light); }
.hero-media { position: relative; }
.hero-media .frame { border-radius: 200px 200px 8px 8px; padding: 4px; background: var(--js-gold-gradient); display: block; max-width: 440px; margin: 0 auto; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
.hero-media img, .hero-media .placeholder { display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 196px 196px 6px 6px; background: var(--js-charcoal); }
.hero-media .placeholder { display: grid; place-items: center; }
.sprig { position: absolute; width: 90px; height: 90px; color: var(--js-gold-deep); opacity: .7; pointer-events: none; }
.sprig.tl { top: 12px; left: 8px; } .sprig.br { bottom: 12px; right: 8px; transform: rotate(180deg); }
@media (max-width: 575.98px) { .sprig { width: 56px; height: 56px; } }
.hero-stats { display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; margin-top: 1.5rem; font-size: .8rem; color: #cfc6b2; letter-spacing: .04em; }
.hero-stats strong { display: block; font-family: "Cinzel", serif; color: var(--js-gold-light); font-size: 1.1rem; letter-spacing: .06em; }

/* ---------- Trust row ---------- */
.trust-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; padding: 1.25rem 0; }
@media (min-width: 768px) { .trust-row { grid-template-columns: repeat(4, 1fr); gap: 1rem; } }
.trust-item { display: flex; align-items: center; gap: .75rem; background: var(--js-white); border: 1px solid var(--js-line); border-radius: 8px; padding: .8rem 1rem; }
.trust-item .icon { width: 1.7em; height: 1.7em; color: var(--js-gold-deep); }
.trust-item strong { display: block; font-size: .85rem; letter-spacing: .02em; }
.trust-item span { font-size: .75rem; color: var(--js-muted); }

/* ---------- Category tiles (with product photos) ---------- */
.line-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 768px) { .line-tiles { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } }
.line-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: .7rem; padding: 1.1rem .5rem 1.25rem; color: var(--js-ink); background: var(--js-white); border: 1px solid var(--js-line); border-radius: 10px; transition: border-color .2s, transform .2s, box-shadow .2s; overflow: hidden; }
.line-tile:hover { border-color: var(--js-gold-bright); text-decoration: none; transform: translateY(-3px); color: var(--js-ink); box-shadow: 0 18px 30px -20px rgba(0,0,0,.3); }
.ring { width: 76px; height: 76px; border-radius: 50%; border: 2px solid var(--js-gold-bright); display: grid; place-items: center; color: var(--js-gold-deep); background: var(--js-sand); }
.ring .icon { width: 34px; height: 34px; }
.line-tile .label { font-family: "Cinzel", serif; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--js-ink); text-align: center; }
.line-tile .count { font-size: .75rem; color: var(--js-muted); margin-top: -.4rem; }
.cat-tile { position: relative; display: block; border-radius: 10px; overflow: hidden; aspect-ratio: 4/5; background: var(--js-charcoal); color: #fff; }
.cat-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.cat-tile:hover img { transform: scale(1.05); }
.cat-tile .cap { position: absolute; inset: auto 0 0 0; padding: 2.5rem 1rem 1rem; background: linear-gradient(transparent, rgba(0,0,0,.85)); display: flex; flex-direction: column; gap: .2rem; }
.cat-tile .cap .label { font-family: "Cinzel", serif; letter-spacing: .14em; text-transform: uppercase; font-size: .85rem; color: var(--js-gold-light); }
.cat-tile .cap .count { font-size: .75rem; color: #d8d0bc; }
.cat-tile:hover { text-decoration: none; }

/* ---------- Product cards ---------- */
.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; }
@media (min-width: 768px) { .product-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
@media (min-width: 1200px) { .product-grid { grid-template-columns: repeat(4, 1fr); } }
.product-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .product-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }
.product-card { background: var(--js-white); border: 1px solid var(--js-line); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; transition: border-color .2s, transform .2s, box-shadow .2s; position: relative; height: 100%; }
.product-card:hover { border-color: var(--js-gold-bright); transform: translateY(-3px); box-shadow: 0 20px 32px -24px rgba(0,0,0,.35); }
.product-card .media { position: relative; display: block; aspect-ratio: 3/4; background: var(--js-sand); overflow: hidden; }
.product-card .media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.product-card:hover .media img { transform: scale(1.04); }
.product-card .badges { position: absolute; top: .5rem; left: .5rem; display: flex; flex-direction: column; gap: .3rem; }
.badge-js { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; padding: .3rem .5rem; border-radius: 3px; }
.badge-js.new { background: var(--js-emerald); color: #e5f6ec; }
.badge-js.sale { background: var(--js-maroon); color: #fbe2ea; }
.badge-js.soldout { background: #fff; color: var(--js-muted); border: 1px solid var(--js-line); }
.badge-js.low { background: #FBF0DF; color: #8a5a14; }
.product-card.soldout .media img { filter: grayscale(.7) brightness(.95); }
.product-card .body { padding: .85rem .9rem 1rem; display: flex; flex-direction: column; gap: .25rem; flex: 1; }
.product-card .brand-label { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--js-gold-deep); }
.product-card .name { color: var(--js-ink); font-weight: 500; font-size: .95rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-card .name:hover { color: var(--js-gold-deep); text-decoration: none; }
.product-card .quick { position: absolute; left: .6rem; right: .6rem; bottom: .6rem; transform: translateY(120%); transition: transform .25s; opacity: 0; }
@media (hover: hover) { .product-card:hover .quick { transform: none; opacity: 1; } }
.price { color: var(--js-ink); font-weight: 700; font-size: 1.05rem; }
.price .unit { color: var(--js-muted); font-weight: 400; font-size: .8rem; }
.price-old { color: var(--js-muted); text-decoration: line-through; font-size: .85rem; margin-left: .35rem; }
.price-wrap { margin-top: auto; display: flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .25rem; }
.save-tag { font-size: .72rem; color: var(--js-maroon); font-weight: 600; }

/* ---------- Stock indicator ---------- */
.stock-indicator { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; font-size: .9rem; }
.stock-indicator::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(0,0,0,.05); }
.stock-indicator.in { color: var(--js-in-stock); }
.stock-indicator.low { color: var(--js-low-stock); }
.stock-indicator.out { color: var(--js-out-stock); }

/* ---------- Shop page ---------- */
.shop-layout { display: grid; gap: 1.5rem; }
@media (min-width: 992px) { .shop-layout { grid-template-columns: 260px 1fr; gap: 2rem; } }
.filter-panel { background: var(--js-white); border: 1px solid var(--js-line); border-radius: 10px; padding: 1.25rem; }
.filter-panel h3 { font-size: .78rem; letter-spacing: .18em; color: var(--js-gold-deep); margin-bottom: .75rem; }
.filter-group + .filter-group { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--js-line); }
.filter-check { display: flex; align-items: center; gap: .5rem; min-height: 36px; font-size: .92rem; color: var(--js-ink); }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { display: inline-flex; align-items: center; gap: .35rem; background: var(--js-white); border: 1px solid var(--js-line); color: var(--js-ink); font-size: .78rem; padding: .3rem .6rem; border-radius: 999px; }
.chip a { color: var(--js-gold-deep); }
.shop-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: 1.25rem; }
.empty-state { text-align: center; padding: 3rem 1rem; border: 1px dashed var(--js-line); border-radius: 10px; color: var(--js-muted); background: var(--js-white); }
.pagination { --bs-pagination-bg: var(--js-white); --bs-pagination-color: var(--js-ink); --bs-pagination-border-color: var(--js-line); --bs-pagination-hover-bg: var(--js-sand); --bs-pagination-hover-color: var(--js-gold-deep); --bs-pagination-active-bg: var(--js-ink); --bs-pagination-active-border-color: var(--js-ink); --bs-pagination-active-color: var(--js-gold-light); --bs-pagination-disabled-bg: var(--js-cream); --bs-pagination-disabled-color: #b3ab9b; --bs-pagination-disabled-border-color: var(--js-line); margin-top: 2rem; }
.page-link { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.breadcrumb { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; --bs-breadcrumb-divider-color: var(--js-gold-deep); }
.breadcrumb a { color: var(--js-muted); }
.breadcrumb-item.active { color: var(--js-gold-deep); }

/* ---------- Product page ---------- */
.gallery { display: grid; gap: .75rem; }
@media (min-width: 576px) { .gallery.has-thumbs { grid-template-columns: 72px 1fr; } .gallery.has-thumbs .thumbs { order: -1; flex-direction: column; } }
.gallery .main { position: relative; background: var(--js-white); border: 1px solid var(--js-line); border-radius: 10px; overflow: hidden; aspect-ratio: 3/4; }
.gallery .main img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; transition: transform .3s; transform-origin: var(--zx, 50%) var(--zy, 50%); }
.gallery .main.zoomed img { transform: scale(2); cursor: zoom-out; }
@media (hover: none) { .gallery .main img { cursor: default; } .gallery .main.zoomed img { transform: none; } }
.gallery .thumbs { display: flex; gap: .5rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 2px; }
.gallery .thumbs button { flex: none; width: 64px; aspect-ratio: 3/4; padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; background: var(--js-white); scroll-snap-align: start; }
.gallery .thumbs button.active { border-color: var(--js-gold-bright); }
.gallery .thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-title { font-size: clamp(1.3rem, 1rem + 1.5vw, 1.9rem); line-height: 1.2; }
.spec-list { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; font-size: .92rem; margin: 0; }
.spec-list dt { color: var(--js-muted); font-weight: 400; }
.spec-list dd { margin: 0; }
.option-group { margin-bottom: 1.1rem; }
.option-group .label { display: block; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--js-muted); margin-bottom: .5rem; }
.option-group .label strong { color: var(--js-ink); letter-spacing: 0; text-transform: none; }
.swatches { display: flex; flex-wrap: wrap; gap: .5rem; }
.swatch { min-width: 44px; min-height: 44px; padding: .4rem .8rem; border: 1px solid var(--js-line); background: var(--js-white); color: var(--js-ink); border-radius: 6px; font-size: .9rem; display: inline-flex; align-items: center; gap: .45rem; position: relative; }
.swatch .dot { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); display: inline-block; }
.swatch[aria-pressed="true"] { border-color: var(--js-ink); box-shadow: inset 0 0 0 1px var(--js-ink); background: var(--js-sand); }
.swatch:disabled, .swatch.unavailable { color: #b3ab9b; border-style: dashed; cursor: not-allowed; }
.swatch:disabled::after, .swatch.unavailable::after { content: ""; position: absolute; left: 10%; right: 10%; top: 50%; height: 1px; background: #b3ab9b; transform: rotate(-12deg); }
.qty-input { display: inline-flex; border: 1px solid var(--js-line); border-radius: 6px; overflow: hidden; background: var(--js-white); }
.qty-input button { width: 44px; height: 44px; background: var(--js-white); color: var(--js-ink); border: 0; font-size: 1.2rem; }
.qty-input input { width: 56px; text-align: center; border: 0; border-left: 1px solid var(--js-line); border-right: 1px solid var(--js-line); border-radius: 0; -moz-appearance: textfield; }
.qty-input input::-webkit-outer-spin-button, .qty-input input::-webkit-inner-spin-button { -webkit-appearance: none; }
.buy-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.buy-row .btn { flex: 1 1 200px; }
.buy-box { background: var(--js-white); border: 1px solid var(--js-line); border-radius: 10px; padding: 1.25rem; }
.accordion { --bs-accordion-bg: var(--js-white); --bs-accordion-border-color: var(--js-line); --bs-accordion-btn-color: var(--js-ink); --bs-accordion-active-bg: var(--js-sand); --bs-accordion-active-color: var(--js-ink); --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(212,175,55,.25); --bs-accordion-color: var(--js-ink); --bs-accordion-border-radius: 10px; --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%239A7B2C'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); --bs-accordion-btn-active-icon: var(--bs-accordion-btn-icon); }
.accordion-button { text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; font-weight: 600; }
.size-guide-table { font-size: .85rem; }
.table { --bs-table-bg: transparent; --bs-table-color: var(--js-ink); --bs-table-border-color: var(--js-line); --bs-table-striped-bg: rgba(0,0,0,.02); }
.table thead th { color: var(--js-muted); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }

/* ---------- Cart & checkout ---------- */
.cart-line { display: grid; grid-template-columns: 72px 1fr; gap: 1rem; padding: 1rem; border: 1px solid var(--js-line); border-radius: 10px; background: var(--js-white); margin-bottom: .75rem; }
@media (min-width: 768px) { .cart-line { grid-template-columns: 90px 1fr auto auto; align-items: center; } }
.cart-line img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 6px; border: 1px solid var(--js-line); }
.cart-line a.fw-semibold { color: var(--js-ink); }
.summary-card { background: var(--js-white); border: 1px solid var(--js-line); border-top: 3px solid var(--js-gold-bright); border-radius: 10px; padding: 1.25rem; }
.summary-card .row-line { display: flex; justify-content: space-between; padding: .4rem 0; font-size: .95rem; }
.summary-card .row-line.total { border-top: 1px solid var(--js-line); margin-top: .5rem; padding-top: .75rem; font-size: 1.15rem; color: var(--js-ink); font-weight: 700; }
.steps { display: flex; gap: .5rem; justify-content: center; margin-bottom: 1.5rem; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--js-muted); flex-wrap: wrap; }
.steps .active { color: var(--js-gold-deep); font-weight: 600; }

/* ---------- Visit block, static pages & footer ---------- */
.visit-grid { display: grid; gap: 1.5rem; }
@media (min-width: 992px) { .visit-grid { grid-template-columns: 1fr 1.2fr; } }
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; }
.contact-list li { display: flex; gap: .75rem; align-items: flex-start; }
.contact-list .icon { color: var(--js-gold-deep); width: 1.4em; height: 1.4em; margin-top: .1em; }
.map-frame { border: 1px solid var(--js-line); border-radius: 10px; overflow: hidden; background: var(--js-white); aspect-ratio: 16/10; }
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.card-dark { background: var(--js-white); border: 1px solid var(--js-line); border-radius: 10px; padding: 1.5rem; }
.prose { max-width: 72ch; color: var(--js-ink); }
.prose p { color: #3d382f; }
.page-head { padding: 2.5rem 0 1rem; text-align: center; }
.error-page { text-align: center; padding: 5rem 1rem; }
.error-page .code { font-family: "Cinzel", serif; font-size: clamp(4rem, 15vw, 8rem); line-height: 1; background: var(--js-gold-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.site-footer { position: relative; background: var(--js-black); border-top: 3px solid var(--js-gold-deep); padding: 3rem 0 1.5rem; margin-top: 3rem; color: #b8b09d; font-size: .92rem; overflow: hidden; }
.site-footer h4 { font-size: .78rem; letter-spacing: .2em; margin-bottom: 1rem; color: var(--js-gold-bright); }
.site-footer a { color: var(--js-ivory); }
.site-footer a:hover { color: var(--js-gold-light); }
.site-footer .tagline { color: var(--js-gold-light); }
.site-footer .btn-outline-gold { border-color: var(--js-gold-deep); color: var(--js-gold-light); }
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.footer-bottom { border-top: 1px solid #222; margin-top: 2rem; padding-top: 1.25rem; font-size: .8rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; }
.social-links { display: flex; gap: .5rem; }

/* ---------- Ads & sponsor banner ---------- */
.ad-slot { margin: 1.5rem auto; text-align: center; }
.ad-slot .ad-label { display: block; font-size: .65rem; letter-spacing: .16em; text-transform: uppercase; color: #b3ab9b; margin-bottom: .35rem; }
.ad-slot .adsbygoogle { display: block; min-height: 90px; }
.sponsor-banner { display: block; border: 1px solid var(--js-line); border-radius: 10px; overflow: hidden; background: var(--js-white); max-width: 970px; margin: 0 auto; }
.sponsor-banner img { width: 100%; height: auto; display: block; }
.ad-slot.sidebar .adsbygoogle { min-height: 250px; }

/* ---------- Floating WhatsApp & mobile buy bar ---------- */
.float-wa { position: fixed; right: 1rem; bottom: 1rem; z-index: 1025; width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px -8px rgba(0,0,0,.45); }
.float-wa .icon { width: 28px; height: 28px; }
.float-wa:hover { background: #1fbd5a; color: #fff; text-decoration: none; transform: scale(1.05); }
body.has-mobile-cta .float-wa { bottom: 84px; }
@media (min-width: 768px) { body.has-mobile-cta .float-wa { bottom: 1rem; } }
.mobile-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1020; display: flex; gap: .5rem; padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom)); background: rgba(255,255,255,.97); border-top: 1px solid var(--js-line); backdrop-filter: blur(8px); box-shadow: 0 -8px 24px -16px rgba(0,0,0,.3); }
.mobile-cta .btn { flex: 1; min-height: 46px; }
@media (min-width: 768px) { .mobile-cta { display: none; } }
body.has-mobile-cta main { padding-bottom: 80px; }

/* ---------- Toasts ---------- */
.toast { background: var(--js-ink); color: var(--js-ivory); border: 0; border-left: 3px solid var(--js-gold-bright); }
.toast .btn-close { filter: invert(1); }
.toast.danger { border-left-color: var(--js-out-stock); }