/* =========================================================
   JFC — Your Fried Chicken Corner
   Front-end demo stylesheet
   ========================================================= */

:root{
  --red: #D4321F;
  --red-dark: #A9270F;
  --red-light: #F8DAD5;
  --gold: #F4A825;
  --gold-dark: #C9860F;
  --cream: #FFFBF2;
  --cream-dim: #FBF3E3;
  --brown: #3B2412;
  --heading: #3B2412;
  --brown-soft: #6B4B34;
  --ink: #2A1B10;
  --muted: #8A7A6C;
  --line: #EEE1CE;
  --white: #FFFFFF;
  --card-bg: #FFFFFF;
  --green: #2E9E5B;

  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 26px;
  --shadow-sm: 0 2px 8px rgba(59,36,18,.06);
  --shadow: 0 14px 34px rgba(59,36,18,.12);
  --shadow-lg: 0 24px 50px rgba(59,36,18,.18);

  --container: 1180px;
  --header-h: 76px;

  --font-display: 'Poppins', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;

  color-scheme: light;
}

[data-theme="dark"]{
  --red: #E6472F;
  --red-dark: #C2381F;
  --red-light: #3A231D;
  --gold: #F7B944;
  --gold-dark: #D99A26;
  --cream: #17110B;
  --cream-dim: #1E170F;
  --brown: #0F0B07;
  --heading: #F3E7D8;
  --brown-soft: #C9AF94;
  --ink: #F3E7D8;
  --muted: #A8927B;
  --line: #322820;
  --white: #241B13;
  --card-bg: #221A12;
  --green: #47C07C;
  --shadow-sm: 0 2px 10px rgba(0,0,0,.35);
  --shadow: 0 14px 34px rgba(0,0,0,.45);
  --shadow-lg: 0 24px 55px rgba(0,0,0,.55);
  color-scheme: dark;
}
body{ transition: background-color .25s ease, color .25s ease; }

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
svg{ display:block; height:auto; max-width:100%; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; font-size:15px; }
h1,h2,h3,h4{ font-family:var(--font-display); color:var(--heading); margin:0 0 .4em; line-height:1.2; }

.container{ max-width:var(--container); margin:0 auto; padding:0 24px; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 26px; border-radius:999px; border:none; font-weight:600;
  font-size:15px; letter-spacing:.2px; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:linear-gradient(180deg,var(--red) 0%,var(--red-dark) 100%); color:#fff; box-shadow:0 10px 22px rgba(212,50,31,.32); }
.btn-primary:hover{ box-shadow:0 14px 28px rgba(212,50,31,.4); transform:translateY(-1px); }
.btn-gold{ background:linear-gradient(180deg,var(--gold) 0%,var(--gold-dark) 100%); color:var(--heading); box-shadow:0 10px 22px rgba(244,168,37,.35); }
.btn-gold:hover{ transform:translateY(-1px); box-shadow:0 14px 28px rgba(244,168,37,.42); }
.btn-outline{ background:var(--card-bg); color:var(--heading); border:1.5px solid var(--line); }
.btn-outline:hover{ border-color:var(--red); color:var(--red); }
.btn-dark{ background:var(--brown); color:#fff; }
.btn-dark:hover{ background:var(--ink); }
.btn-block{ width:100%; }
.btn-sm{ padding:9px 18px; font-size:13.5px; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

.link-accent{ color:var(--red); font-weight:600; }
.link-accent:hover{ text-decoration:underline; }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:100; background:var(--cream);
  opacity:.98; backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.header-inner{ display:flex; align-items:center; gap:28px; height:var(--header-h); }
.brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.brand-logo{ width:46px; height:46px; object-fit:contain; flex-shrink:0; filter:drop-shadow(0 3px 6px rgba(0,0,0,.25)); }
.brand-badge{
  width:42px; height:42px; border-radius:50%; background:linear-gradient(155deg,var(--gold) 0%,var(--gold-dark) 100%);
  display:flex; align-items:center; justify-content:center; box-shadow:0 6px 14px rgba(201,134,15,.35);
}
.brand-badge span{ font-family:var(--font-display); font-weight:700; color:var(--heading); font-size:15px; letter-spacing:.5px; }
.brand-text{ display:flex; flex-direction:column; line-height:1.05; }
.brand-text b{ font-family:var(--font-display); font-size:16.5px; color:var(--heading); }
.brand-text small{ font-size:10.5px; color:var(--muted); letter-spacing:.4px; text-transform:uppercase; }

.main-nav{ display:flex; align-items:center; gap:26px; margin-left:8px; }
.main-nav a{ font-size:14.5px; font-weight:600; color:var(--brown-soft); padding:8px 2px; position:relative; }
.main-nav a.active, .main-nav a:hover{ color:var(--red); }
.main-nav a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:3px; border-radius:3px; background:var(--red);
}

.header-actions{ display:flex; align-items:center; gap:14px; margin-left:auto; }
.theme-toggle{
  width:42px; height:42px; border-radius:50%; border:1.5px solid var(--line); background:var(--card-bg);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; position:relative; transition:border-color .15s;
}
.theme-toggle:hover{ border-color:var(--gold); }
.theme-toggle svg{ width:19px; height:19px; stroke:var(--brown-soft); position:absolute; transition:opacity .2s, transform .3s; }
.theme-toggle .i-sun{ opacity:0; transform:rotate(-40deg) scale(.6); }
.theme-toggle .i-moon{ opacity:1; transform:rotate(0) scale(1); }
[data-theme="dark"] .theme-toggle .i-sun{ opacity:1; transform:rotate(0) scale(1); }
[data-theme="dark"] .theme-toggle .i-moon{ opacity:0; transform:rotate(40deg) scale(.6); }
.icon-btn{
  width:42px; height:42px; border-radius:50%; border:1.5px solid var(--line); background:var(--card-bg);
  display:flex; align-items:center; justify-content:center; position:relative; transition:border-color .15s, transform .15s;
  flex-shrink:0;
}
.icon-btn:hover{ border-color:var(--red); transform:translateY(-1px); }
.icon-btn svg{ width:19px; height:19px; stroke:var(--heading); }
.cart-badge{
  position:absolute; top:-4px; right:-4px; background:var(--red); color:#fff; font-size:10.5px; font-weight:700;
  min-width:18px; height:18px; border-radius:999px; display:flex; align-items:center; justify-content:center;
  padding:0 4px; border:2px solid var(--cream);
}
.search-box{
  display:flex; align-items:center; gap:8px; background:var(--card-bg); border:1.5px solid var(--line); border-radius:999px;
  padding:9px 16px; width:220px; transition:border-color .15s, width .2s;
}
.search-box:focus-within{ border-color:var(--red); width:250px; }
.search-box svg{ width:16px; height:16px; stroke:var(--muted); flex-shrink:0; }
.search-box input{ border:none; outline:none; background:none; width:100%; font-size:13.8px; color:var(--ink); }

.hamburger{ display:none; }

.header-account{ display:flex; align-items:center; gap:10px; }
.header-account a{ font-size:14px; font-weight:600; }

/* mobile nav drawer */
.mobile-nav{
  display:none; position:fixed; inset:0; z-index:200; background:rgba(42,27,16,.45);
}
.mobile-nav.open{ display:block; }
.mobile-nav-panel{
  position:absolute; top:0; right:0; width:82%; max-width:340px; height:100%; background:var(--cream);
  padding:26px 22px; box-shadow:var(--shadow-lg); display:flex; flex-direction:column; gap:22px;
  animation:slideIn .22s ease;
}
@keyframes slideIn{ from{ transform:translateX(100%);} to{ transform:translateX(0);} }
.mobile-nav-close{ align-self:flex-end; width:36px; height:36px; border-radius:50%; border:1.5px solid var(--line); background:var(--card-bg); }
.mobile-nav-panel a{ font-family:var(--font-display); font-weight:600; font-size:18px; color:var(--heading); padding:6px 0; }
.mobile-nav-panel .btn{ margin-top:8px; }

/* ---------- hero ---------- */
.hero{
  position:relative; overflow:hidden; background:linear-gradient(150deg,var(--brown) 0%,#241407 100%);
  color:#fff; padding:78px 0 90px;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(circle at 82% 20%, rgba(244,168,37,.35), transparent 45%),
              radial-gradient(circle at 12% 85%, rgba(212,50,31,.35), transparent 40%);
  pointer-events:none;
}
.hero-inner{ position:relative; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:50px; }
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:8px; background:rgba(244,168,37,.16); border:1px solid rgba(244,168,37,.4);
  color:var(--gold); font-size:12.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
  padding:7px 16px; border-radius:999px; margin-bottom:20px;
}
.hero h1{ color:#fff; font-size:clamp(32px,4.6vw,54px); margin-bottom:18px; letter-spacing:-.5px; }
.hero h1 em{ font-style:normal; color:var(--gold); }
.hero p{ color:#E9D9C7; font-size:17px; max-width:460px; margin-bottom:30px; }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; }
.hero-note{ display:flex; align-items:center; gap:10px; margin-top:26px; color:#C9B49D; font-size:13.5px; }
.hero-note svg{ width:16px; height:16px; stroke:var(--gold); flex-shrink:0; }
.hero-eyebrow svg{ width:15px; height:15px; }

.hero-art{ position:relative; display:flex; align-items:center; justify-content:center; }
.hero-plate{
  width:100%; max-width:400px; aspect-ratio:1/1; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #FFE7B8, #F4A825 55%, #C9860F 100%);
  box-shadow:0 30px 60px rgba(0,0,0,.35), inset 0 -10px 30px rgba(0,0,0,.15);
  display:flex; align-items:center; justify-content:center; position:relative;
}
.hero-plate .drumstick{ width:52%; }
.hero-chip{
  position:absolute; background:var(--card-bg); color:var(--heading); border-radius:16px; padding:12px 16px;
  box-shadow:var(--shadow); display:flex; align-items:center; gap:10px; font-size:13px; font-weight:700;
}
.hero-chip.c1{ top:6%; left:-4%; }
.hero-chip.c2{ bottom:8%; right:-6%; }
.hero-chip svg{ width:20px; height:20px; stroke:var(--red); }
.hero-plate svg{ width:54%; height:auto; stroke:#3B2412; }

/* ---------- sections ---------- */
section{ padding:70px 0; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:36px; flex-wrap:wrap; }
.section-tag{ color:var(--red); font-weight:700; font-size:12.5px; letter-spacing:1.2px; text-transform:uppercase; margin-bottom:8px; display:block; }
.section-head h2{ font-size:clamp(24px,3vw,34px); margin-bottom:6px; }
.section-head p{ color:var(--muted); max-width:520px; }
.section-alt{ background:var(--cream-dim); }

/* ---------- category pills ---------- */
.cat-row{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:36px; }
.cat-pill{
  display:inline-flex; align-items:center; gap:8px; padding:10px 20px; border-radius:999px; border:1.5px solid var(--line);
  background:var(--card-bg); font-weight:600; font-size:14px; color:var(--brown-soft); transition:all .15s;
}
.cat-pill:hover{ border-color:var(--gold); }
.cat-pill.active{ background:var(--brown); border-color:var(--brown); color:#fff; }

/* ---------- product grid / cards ---------- */
.grid-products{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:26px; }
.card{
  background:var(--card-bg); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm);
  border:1px solid var(--line); transition:transform .18s ease, box-shadow .18s ease;
  display:flex; flex-direction:column;
}
.card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.card-media{
  aspect-ratio:4/3; position:relative; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(155deg,#FCEFD2,#F6D693); overflow:hidden;
}
.card-media svg{ width:46%; height:46%; }
.card-media img.card-photo{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.card:hover .card-photo{ transform:scale(1.06); }
.card-badge{
  position:absolute; top:12px; left:12px; background:var(--brown); color:#fff; font-size:11px; font-weight:700;
  padding:5px 11px; border-radius:999px; letter-spacing:.3px;
}
.card-fav{
  position:absolute; top:10px; right:10px; width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.9);
  display:flex; align-items:center; justify-content:center; border:none;
}
.card-fav svg{ width:16px; height:16px; stroke:var(--red); fill:none; }
.card-body{ padding:18px 18px 20px; display:flex; flex-direction:column; gap:8px; flex:1; }
.card-body h3{ font-size:17px; margin:0; }
.card-desc{ color:var(--muted); font-size:13.3px; min-height:34px; }
.card-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:10px; }
.price{ font-family:var(--font-display); font-weight:700; color:var(--red); font-size:17px; }
.price.tbc{ color:var(--muted); font-size:13px; font-weight:600; }
.card-actions{ display:flex; gap:8px; padding:0 18px 18px; }
.card-actions .btn{ flex:1; padding:11px 14px; font-size:13.3px; }

/* ---------- how it works ---------- */
.steps-row{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; }
.step{ text-align:center; padding:26px 16px; background:var(--card-bg); border-radius:var(--radius); border:1px solid var(--line); }
.step-num{
  width:44px; height:44px; border-radius:50%; background:var(--red); color:#fff; font-family:var(--font-display);
  font-weight:700; display:flex; align-items:center; justify-content:center; margin:0 auto 14px; font-size:16px;
}
.step h4{ font-size:14.5px; margin-bottom:4px; }
.step p{ font-size:12.5px; color:var(--muted); margin:0; }

/* ---------- why order online ---------- */
.why-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; }
.why-card{ background:var(--card-bg); border-radius:var(--radius); padding:24px 18px; border:1px solid var(--line); text-align:center; }
.why-card .icon-wrap{
  width:52px; height:52px; border-radius:16px; background:var(--red-light); display:flex; align-items:center; justify-content:center;
  margin:0 auto 14px;
}
.why-card svg{ width:24px; height:24px; stroke:var(--red); }
.why-card h4{ font-size:14.5px; margin-bottom:4px; }
.why-card p{ font-size:12.3px; color:var(--muted); margin:0; }

/* ---------- footer ---------- */
.site-footer{ background:var(--brown); color:#E9D9C7; padding:56px 0 0; margin-top:40px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:36px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.1); }
.footer-brand .brand-text b{ color:#fff; }
.footer-brand p{ font-size:13.5px; color:#C9B49D; margin:14px 0 0; max-width:280px; }
.footer-brand p svg{ width:16px; height:16px; stroke:none; fill:currentColor; flex-shrink:0; }
.footer-col li svg{ width:14px; height:14px; stroke:currentColor; vertical-align:-2px; margin-right:4px; }
.footer-col h5{ font-family:var(--font-display); color:#fff; font-size:13.5px; letter-spacing:.4px; text-transform:uppercase; margin-bottom:16px; }
.footer-col a, .footer-col li{ display:block; font-size:13.8px; color:#C9B49D; margin-bottom:10px; }
.footer-col a:hover{ color:var(--gold); }
.footer-note{ font-size:12px; color:#A38F76; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding:20px 0; font-size:12.5px; color:#A38F76; flex-wrap:wrap; gap:10px; }
.tbc{ color:var(--gold); font-weight:600; }

/* ---------- generic page header (non-home pages) ---------- */
.page-head{ background:var(--cream-dim); padding:42px 0; border-bottom:1px solid var(--line); }
.breadcrumb{ font-size:13px; color:var(--muted); margin-bottom:8px; }
.breadcrumb a{ color:var(--red); font-weight:600; }
.page-head h1{ font-size:clamp(24px,3.4vw,32px); margin:0; }

/* ---------- menu page ---------- */
.menu-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap; }
.menu-toolbar .search-box{ width:280px; }
.sort-select{ border:1.5px solid var(--line); border-radius:999px; padding:10px 18px; background:var(--card-bg); font-size:13.8px; font-weight:600; color:var(--brown-soft); }
.empty-state{ text-align:center; padding:60px 20px; color:var(--muted); }

/* ---------- product details ---------- */
.pd-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:54px; align-items:flex-start; }
.pd-media{ background:linear-gradient(155deg,#FCEFD2,#F6D693); border-radius:var(--radius-lg); aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-sm); overflow:hidden; }
.pd-media svg{ width:56%; height:56%; }
.pd-media img.card-photo{ width:100%; height:100%; object-fit:cover; }
.pd-info .cat-pill{ margin-bottom:16px; pointer-events:none; }
.pd-info h1{ font-size:30px; margin-bottom:10px; }
.pd-price{ font-size:26px; color:var(--red); font-family:var(--font-display); font-weight:700; margin-bottom:18px; }
.pd-desc{ color:var(--brown-soft); margin-bottom:26px; }
.qty-row{ display:flex; align-items:center; gap:16px; margin-bottom:26px; }
.qty-control{ display:flex; align-items:center; border:1.5px solid var(--line); border-radius:999px; overflow:hidden; }
.qty-control button{ width:42px; height:42px; border:none; background:var(--card-bg); font-size:18px; font-weight:700; color:var(--heading); }
.qty-control button:hover{ background:var(--cream-dim); }
.qty-control span{ width:42px; text-align:center; font-weight:700; }
.pd-actions{ display:flex; gap:14px; margin-bottom:30px; flex-wrap:wrap; }
.pd-meta{ display:flex; gap:22px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:20px; }
.pd-meta div{ font-size:12.6px; color:var(--muted); display:flex; align-items:center; gap:7px; }
.pd-meta svg{ width:16px; height:16px; stroke:var(--gold-dark); }
.related-row{ margin-top:60px; }

/* ---------- cart page ---------- */
.cart-grid{ display:grid; grid-template-columns:1.7fr 1fr; gap:40px; align-items:flex-start; }
.cart-items{ background:var(--card-bg); border-radius:var(--radius); border:1px solid var(--line); overflow:hidden; }
.cart-item{ display:grid; grid-template-columns:74px 1fr auto auto; gap:16px; align-items:center; padding:18px 20px; border-bottom:1px solid var(--line); }
.cart-item:last-child{ border-bottom:none; }
.cart-thumb{ width:74px; height:74px; border-radius:14px; background:linear-gradient(155deg,#FCEFD2,#F6D693); display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; }
.cart-thumb svg{ width:60%; height:60%; }
.cart-thumb img.card-photo{ width:100%; height:100%; object-fit:cover; }
.cart-item h4{ font-size:15px; margin:0 0 4px; }
.cart-item .unit{ font-size:12.5px; color:var(--muted); }
.cart-item .line-total{ font-family:var(--font-display); font-weight:700; color:var(--heading); width:70px; text-align:right; }
.cart-remove{ width:34px; height:34px; border-radius:50%; border:1.5px solid var(--line); background:var(--card-bg); display:flex; align-items:center; justify-content:center; }
.cart-remove svg{ width:15px; height:15px; stroke:var(--muted); }
.cart-remove:hover{ border-color:var(--red); } .cart-remove:hover svg{ stroke:var(--red); }
.cart-empty{ padding:70px 20px; text-align:center; color:var(--muted); }
.cart-empty svg{ width:56px; height:56px; stroke:var(--line); margin-bottom:16px; }

.summary-card{ background:var(--card-bg); border-radius:var(--radius); border:1px solid var(--line); padding:24px; position:sticky; top:100px; }
.summary-card h3{ font-size:17px; margin-bottom:18px; }
.summary-row{ display:flex; justify-content:space-between; font-size:14px; color:var(--brown-soft); margin-bottom:12px; }
.summary-row.total{ font-family:var(--font-display); font-weight:700; color:var(--heading); font-size:18px; border-top:1px solid var(--line); padding-top:14px; margin-top:6px; }
.promo-row{ display:flex; gap:8px; margin:18px 0; }
.promo-row input{ flex:1; border:1.5px solid var(--line); border-radius:10px; padding:10px 12px; }

/* ---------- forms / checkout ---------- */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.field label{ font-size:13px; font-weight:600; color:var(--brown-soft); }
.field input, .field select, .field textarea{
  border:1.5px solid var(--line); border-radius:12px; padding:13px 15px; background:var(--card-bg); color:var(--ink); outline:none;
  transition:border-color .15s;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--red); }
.field small{ color:var(--muted); font-size:11.6px; }
.field-error{ border-color:var(--red) !important; }
.error-text{ color:var(--red); font-size:11.8px; display:none; }
.error-text.show{ display:block; }

.check-panel{ background:var(--card-bg); border-radius:var(--radius); border:1px solid var(--line); padding:26px; margin-bottom:22px; }
.check-panel h3{ display:flex; align-items:center; gap:10px; font-size:16px; margin-bottom:18px; }
.check-panel h3 span.num{ width:26px; height:26px; border-radius:50%; background:var(--red); color:#fff; font-size:12.5px; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); }

.radio-row{ display:flex; gap:14px; flex-wrap:wrap; }
.radio-card{
  flex:1; min-width:150px; border:1.5px solid var(--line); border-radius:14px; padding:14px 16px; display:flex; align-items:center; gap:10px;
  cursor:pointer; background:var(--card-bg);
}
.radio-card input{ accent-color:var(--red); width:16px; height:16px; }
.radio-card.selected{ border-color:var(--red); background:var(--red-light); }
.radio-card small{ display:block; color:var(--muted); font-size:11.5px; }
.radio-card svg{ width:18px; height:18px; stroke:var(--red); vertical-align:-4px; }

.checkout-grid{ display:grid; grid-template-columns:1.6fr 1fr; gap:36px; align-items:flex-start; }
.order-line{ display:flex; justify-content:space-between; font-size:13.6px; margin-bottom:10px; color:var(--brown-soft); }
.tbc-note{ background:#FDF3E0; border:1px dashed var(--gold-dark); color:var(--brown-soft); font-size:12.6px; padding:12px 14px; border-radius:12px; margin-top:10px; }

/* ---------- order success ---------- */
.success-wrap{ max-width:640px; margin:0 auto; text-align:center; padding:70px 0; }
.success-icon{
  width:88px; height:88px; border-radius:50%; background:#E4F5EA; border:2px solid var(--green);
  display:flex; align-items:center; justify-content:center; margin:0 auto 24px;
}
.success-icon svg{ width:40px; height:40px; stroke:var(--green); }
.order-card{ background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius); padding:28px; text-align:left; margin:30px 0; }
.order-card .order-id{ font-family:var(--font-display); font-weight:700; font-size:20px; color:var(--red); margin-bottom:4px; }
.order-card dl{ display:grid; grid-template-columns:auto 1fr; gap:8px 18px; margin:18px 0; font-size:13.8px; }
.order-card dt{ color:var(--muted); }
.order-card dd{ margin:0; font-weight:600; color:var(--heading); text-align:right; }
.order-card .order-items{ border-top:1px solid var(--line); padding-top:16px; margin-top:8px; }

/* ---------- tracking timeline ---------- */
.tracker{ display:flex; justify-content:space-between; align-items:flex-start; margin:50px 0 30px; position:relative; }
.tracker::before{
  content:""; position:absolute; top:19px; left:5%; right:5%; height:3px; background:var(--line); z-index:0;
}
.tracker .fill{ position:absolute; top:19px; left:5%; height:3px; background:var(--red); z-index:1; transition:width .4s ease; }
.t-step{ position:relative; z-index:2; flex:1; text-align:center; }
.t-dot{
  width:40px; height:40px; border-radius:50%; background:var(--card-bg); border:3px solid var(--line); margin:0 auto 12px;
  display:flex; align-items:center; justify-content:center;
}
.t-dot svg{ width:16px; height:16px; stroke:#fff; display:none; }
.t-step.done .t-dot{ background:var(--red); border-color:var(--red); }
.t-step.done .t-dot svg{ display:block; }
.t-step.current .t-dot{ border-color:var(--red); box-shadow:0 0 0 5px var(--red-light); }
.t-step h4{ font-size:12.6px; margin:0; color:var(--brown-soft); }
.t-step.done h4, .t-step.current h4{ color:var(--heading); font-weight:700; }
.track-lookup{ display:flex; gap:10px; max-width:440px; margin:0 auto 10px; }
.track-lookup input{ flex:1; border:1.5px solid var(--line); border-radius:999px; padding:13px 20px; }
.track-card{ background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius); padding:30px; max-width:720px; margin:0 auto; }
.demo-controls{ text-align:center; margin-top:26px; }
.demo-controls p{ font-size:12px; color:var(--muted); }

/* ---------- auth pages ---------- */
.auth-wrap{ min-height:calc(100vh - var(--header-h)); display:flex; align-items:center; justify-content:center; padding:60px 20px; background:linear-gradient(150deg,var(--brown),#241407); }
.auth-card{ background:var(--card-bg); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); width:100%; max-width:440px; padding:40px 36px; }
.auth-card .brand{ justify-content:center; margin-bottom:22px; }
.auth-tabs{ display:flex; background:var(--cream-dim); border-radius:999px; padding:4px; margin-bottom:26px; }
.auth-tabs a{ flex:1; text-align:center; padding:10px; border-radius:999px; font-weight:700; font-size:13.6px; color:var(--muted); }
.auth-tabs a.active{ background:var(--card-bg); color:var(--red); box-shadow:var(--shadow-sm); }
.auth-card h2{ text-align:center; font-size:21px; }
.auth-sub{ text-align:center; color:var(--muted); font-size:13.3px; margin-bottom:24px; }
.auth-foot{ text-align:center; font-size:13.4px; color:var(--muted); margin-top:18px; }
.pw-row{ position:relative; }
.pw-toggle{ position:absolute; right:14px; top:38px; background:none; border:none; font-size:11.5px; font-weight:700; color:var(--red); }

/* ---------- account / dashboard ---------- */
.dash-grid{ display:grid; grid-template-columns:240px 1fr; gap:32px; align-items:flex-start; }
.dash-side{ background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius); padding:22px; position:sticky; top:100px; }
.dash-profile{ display:flex; align-items:center; gap:12px; margin-bottom:20px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.avatar{ width:46px; height:46px; border-radius:50%; background:var(--gold); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; color:var(--heading); }
.dash-nav a{ display:flex; align-items:center; gap:10px; padding:11px 10px; border-radius:10px; font-size:14px; font-weight:600; color:var(--brown-soft); margin-bottom:4px; }
.dash-nav a svg{ width:17px; height:17px; stroke:currentColor; }
.dash-nav a.active, .dash-nav a:hover{ background:var(--cream-dim); color:var(--red); }
.dash-panel{ background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius); padding:28px; margin-bottom:22px; }
.dash-panel h3{ font-size:17px; margin-bottom:18px; }
.stat-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:24px; }
.stat-card{ background:var(--cream-dim); border-radius:14px; padding:18px; }
.stat-card b{ display:block; font-family:var(--font-display); font-size:22px; color:var(--heading); }
.stat-card span{ font-size:12.3px; color:var(--muted); }

.order-row{ display:flex; align-items:center; justify-content:space-between; padding:16px 0; border-bottom:1px solid var(--line); gap:14px; flex-wrap:wrap; }
.order-row:last-child{ border-bottom:none; }
.order-row .oid{ font-weight:700; color:var(--heading); }
.order-row .odate{ font-size:12.3px; color:var(--muted); }
.status-chip{ padding:6px 14px; border-radius:999px; font-size:11.6px; font-weight:700; }
.status-chip.placed{ background:#FDF3E0; color:var(--gold-dark); }
.status-chip.progress{ background:#FDEBD8; color:var(--red-dark); }
.status-chip.ready{ background:#E4F0FD; color:#2A63A8; }
.status-chip.done{ background:#E4F5EA; color:var(--green); }

/* ---------- about / contact ---------- */
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; }
.about-art{ background:linear-gradient(155deg,#FCEFD2,#F6D693); border-radius:var(--radius-lg); aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; }
.about-art svg{ width:44%; }
.value-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:20px; }
.value-card{ background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius); padding:22px; }
.value-card svg{ width:26px; height:26px; stroke:var(--red); margin-bottom:12px; }

.contact-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:44px; }
.contact-info-card{ background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius); padding:26px; margin-bottom:16px; display:flex; gap:14px; }
.contact-info-card svg{ width:22px; height:22px; stroke:var(--red); flex-shrink:0; }
.contact-info-card h4{ font-size:14.5px; margin:0 0 4px; }
.contact-info-card p{ margin:0; font-size:13.3px; color:var(--muted); }
.map-box{ background:var(--cream-dim); border:1px dashed var(--line); border-radius:var(--radius); height:220px; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:13px; margin-top:16px; }

/* ---------- admin ---------- */
.admin-shell{ display:grid; grid-template-columns:230px 1fr; min-height:calc(100vh - var(--header-h)); }
.admin-side{ background:var(--brown); color:#E9D9C7; padding:26px 18px; }
.admin-side .brand-text b, .admin-side .brand-text small{ color:#fff; }
.admin-nav{ margin-top:26px; }
.admin-nav a{ display:flex; align-items:center; gap:10px; padding:12px 12px; border-radius:10px; font-size:13.8px; font-weight:600; color:#D8C4AC; margin-bottom:4px; }
.admin-nav a svg{ width:16px; height:16px; stroke:currentColor; }
.admin-nav a.active, .admin-nav a:hover{ background:rgba(255,255,255,.08); color:#fff; }
.admin-main{ padding:30px 34px; background:var(--cream-dim); }
.admin-topbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:26px; }
.admin-table{ width:100%; border-collapse:collapse; background:var(--card-bg); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); }
.admin-table th{ text-align:left; background:var(--cream-dim); font-size:12px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); padding:14px 16px; }
.admin-table td{ padding:14px 16px; font-size:13.6px; border-top:1px solid var(--line); }
.badge-tbc{ background:#FDF3E0; color:var(--gold-dark); padding:4px 10px; border-radius:999px; font-size:11px; font-weight:700; }

/* ---------- misc ---------- */
.disclaimer-banner{ background:#FDF3E0; border-bottom:1px solid var(--gold); color:var(--brown-soft); font-size:12.6px; text-align:center; padding:9px 16px; }
.toast{
  position:fixed; bottom:26px; left:50%; transform:translate(-50%,20px); background:var(--brown); color:#fff;
  padding:14px 22px; border-radius:999px; font-size:13.6px; font-weight:600; box-shadow:var(--shadow-lg); z-index:400;
  opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; display:flex; align-items:center; gap:10px;
}
.toast.show{ opacity:1; transform:translate(-50%,0); }
.toast svg{ width:16px; height:16px; stroke:var(--gold); }


/* =========================================================
   UI / UX refinement layer  (same structure, better polish)
   ========================================================= */
:root{
  --muted:#6F6152;               /* stronger contrast on cream */
  --brown-soft:#5A3E2A;
  --line:#E6D6BE;
  --focus:0 0 0 3px rgba(212,50,31,.28);
  --section-y:clamp(48px,7vw,88px);
  --gutter:clamp(16px,4vw,28px);
  --ease:cubic-bezier(.2,.7,.2,1);
}
[data-theme="dark"]{ --muted:#B5A08A; --brown-soft:#D2BAA0; --line:#3A2E24; --focus:0 0 0 3px rgba(247,185,68,.35); }
@media (min-width:1600px){ :root{ --container:1360px; } }

html{ -webkit-text-size-adjust:100%; }
body{ font-size:16px; line-height:1.6; overflow-x:hidden; text-rendering:optimizeLegibility; }
img,video{ max-width:100%; height:auto; }
h1,h2,h3,h4{ letter-spacing:-.01em; text-wrap:balance; }
p{ text-wrap:pretty; }
.container{ padding-left:var(--gutter); padding-right:var(--gutter); width:100%; }
section{ padding:var(--section-y) 0; }
.section-head h2{ font-size:clamp(24px,3.2vw,36px); }
.section-head p{ font-size:clamp(14.5px,1.6vw,16px); }
.page-head{ padding:clamp(28px,5vw,48px) 0; }
.page-head h1{ font-size:clamp(26px,4vw,38px); }
p,li,dd,dt,h1,h2,h3,h4,td{ overflow-wrap:anywhere; }

/* focus + keyboard */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .radio-card:focus-within{
  outline:2px solid var(--red); outline-offset:2px; box-shadow:var(--focus);
}
::selection{ background:var(--gold); color:#2A1B10; }

/* ---------- buttons ---------- */
.btn{ min-height:48px; padding:12px 26px; font-size:15px; line-height:1.2; transition:transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s, border-color .18s, color .18s; }
.btn-sm{ min-height:44px; padding:10px 18px; font-size:14px; }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0) scale(.98); }
.btn-primary:active{ box-shadow:0 4px 10px rgba(212,50,31,.3); }
.btn-outline:hover{ background:var(--cream-dim); }
.btn[disabled], .btn.is-disabled{ opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }
.btn.is-loading{ pointer-events:none; opacity:.8; }
.link-accent{ text-underline-offset:3px; }

/* ---------- header ---------- */
.brand{ gap:12px; min-width:0; }
.brand-logo{
  width:auto; height:52px; max-width:none; padding:3px 6px; background:#fff; border-radius:12px;
  border:1px solid var(--line); box-shadow:var(--shadow-sm); filter:none; object-fit:contain;
}
.brand-text b{ font-size:clamp(15px,2vw,17px); }
.header-inner{ gap:clamp(12px,2vw,28px); height:auto; min-height:var(--header-h); padding-top:8px; padding-bottom:8px; }
.main-nav a{ padding:10px 4px; min-height:44px; display:inline-flex; align-items:center; }
.icon-btn, .theme-toggle, .hamburger{ width:46px; height:46px; transition:transform .18s var(--ease), border-color .18s, background-color .18s; }
.icon-btn:hover, .theme-toggle:hover, .hamburger:hover{ transform:translateY(-1px); }
.icon-btn:active, .theme-toggle:active, .hamburger:active{ transform:scale(.94); }
.search-box{ min-height:46px; }
.search-box input{ font-size:15px; min-width:0; }
.header-account a{ padding:12px 6px; display:inline-block; }
.header-actions{ gap:10px; min-width:0; }

@media (max-width:1180px){ .search-box{ width:180px; } .search-box:focus-within{ width:210px; } .main-nav{ gap:16px; } }
@media (max-width:980px){
  .main-nav, .header-actions > .search-box, .header-account{ display:none; }
  .hamburger{ display:flex; align-items:center; justify-content:center; border:1.5px solid var(--line); border-radius:50%; background:var(--card-bg); }
  .hamburger svg{ width:20px; height:20px; stroke:var(--heading); }
}
@media (max-width:380px){ .brand-text small{ display:none; } .brand-logo{ height:44px; } .header-actions{ gap:6px; } .icon-btn,.theme-toggle,.hamburger{ width:42px; height:42px; } }

/* mobile drawer */
.mobile-nav-panel{ overflow-y:auto; overscroll-behavior:contain; padding:20px 20px 28px; gap:14px; width:min(88%,360px); }
.mobile-nav-panel a:not(.btn){ padding:12px 4px; min-height:48px; display:flex; align-items:center; border-bottom:1px solid var(--line); font-size:17px; }
.mobile-nav-close{ width:46px; height:46px; }
.drawer-search{ width:100% !important; display:flex !important; }
.drawer-search:focus-within{ width:100% !important; }

/* ---------- hero ---------- */
.hero{ padding:clamp(44px,7vw,84px) 0 clamp(52px,8vw,96px); }
.hero h1{ font-size:clamp(30px,5.2vw,56px); line-height:1.1; }
.hero p{ font-size:clamp(15.5px,1.8vw,18px); line-height:1.65; }
.hero-cta .btn{ min-height:52px; padding-left:30px; padding-right:30px; }
.hero-note{ line-height:1.5; }
.hero-plate{ max-width:min(400px,80vw); }
@media (max-width:1024px){
  .hero-inner{ grid-template-columns:1fr; gap:34px; text-align:left; }
  .hero-art{ order:-1; }
  .hero-plate{ max-width:min(340px,72vw); }
}
@media (max-width:640px){
  .hero-cta{ flex-direction:column; align-items:stretch; }
  .hero-cta .btn{ width:100%; }
  .hero-chip{ font-size:12px; padding:9px 12px; }
  .hero-chip.c1{ top:2%; left:0; } .hero-chip.c2{ bottom:2%; right:0; }
}
@media (max-height:520px) and (orientation:landscape){
  .hero{ padding:28px 0 34px; } .hero-inner{ grid-template-columns:1.1fr .9fr; gap:24px; } .hero-art{ order:0; }
  .hero-plate{ max-width:200px; } .hero h1{ font-size:28px; }
  .hero-cta{ flex-direction:row; } .hero-cta .btn{ width:auto; }
}

/* ---------- cards / grids ---------- */
.grid-products{ grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr)); gap:clamp(16px,2.4vw,28px); }
@media (min-width:1500px){ .grid-products{ grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); } }
.card{ border-radius:20px; transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s; }
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--gold); }
.card-media{ aspect-ratio:4/3; background-color:#1a120b; }
.card-body{ padding:18px 18px 12px; gap:8px; }
.card-body h3{ font-size:clamp(16px,1.6vw,18px); line-height:1.3; }
.card-desc{ font-size:14px; line-height:1.5; min-height:0; color:var(--muted); }
.price{ font-size:clamp(18px,2vw,20px); }
.card-actions{ padding:4px 18px 18px; gap:10px; }
.card-actions .btn{ min-height:46px; padding:10px 12px; font-size:14px; }
@media (max-width:479px){ .card-actions{ flex-direction:column; } .card-actions .btn{ width:100%; } }
.cat-pill{ min-height:44px; padding:10px 20px; transition:all .18s var(--ease); font-size:14.5px; }
.cat-pill:active{ transform:scale(.97); }
.cat-pill svg{ width:17px; height:17px; flex-shrink:0; }
.cat-row{ gap:10px; }
@media (max-width:640px){ .cat-row{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px; margin-left:calc(var(--gutter) * -1); margin-right:calc(var(--gutter) * -1); padding-left:var(--gutter); padding-right:var(--gutter); scrollbar-width:none; } .cat-row::-webkit-scrollbar{ display:none; } .cat-pill{ flex-shrink:0; white-space:nowrap; } }
.steps-row{ grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); }
.why-grid{ grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); }
.step, .why-card{ transition:transform .2s var(--ease), box-shadow .2s; }
.step:hover, .why-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-sm); }
.step p, .why-card p{ font-size:13.5px; line-height:1.5; }
@media (max-width:640px){ .steps-row, .why-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:420px){ .steps-row, .why-grid{ grid-template-columns:1fr; } }

/* ---------- forms ---------- */
.field{ margin-bottom:18px; gap:7px; }
.field label{ font-size:14px; font-weight:600; color:var(--heading); }
.field input, .field select, .field textarea, .sort-select, .promo-row input{
  min-height:50px; font-size:16px; padding:12px 16px; border-radius:12px; border:1.5px solid var(--line);
  background:var(--card-bg); color:var(--ink); width:100%; max-width:100%; transition:border-color .18s, box-shadow .18s, background-color .18s;
}
.field textarea{ min-height:130px; resize:vertical; line-height:1.5; }
.field input::placeholder, .field textarea::placeholder{ color:var(--muted); opacity:.75; }
.field input:hover, .field select:hover, .field textarea:hover{ border-color:var(--gold-dark); }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--red); box-shadow:var(--focus); outline:none; }
.field input:disabled, .field select:disabled{ opacity:.55; cursor:not-allowed; background:var(--cream-dim); }
.field-error{ border-color:var(--red) !important; background:rgba(212,50,31,.06) !important; }
.sort-select{ width:auto; min-width:200px; border-radius:999px; }
.form-grid{ gap:0 18px; }
input[type="date"], input[type="time"]{ min-width:0; -webkit-appearance:none; appearance:none; }
input[type="radio"], input[type="checkbox"]{ width:20px; height:20px; accent-color:var(--red); flex-shrink:0; }
.pw-toggle{ top:38px; min-height:44px; padding:0 8px; right:8px; }
.pw-row input{ padding-right:74px; }
.radio-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); gap:14px; }
.radio-card{ min-width:0; min-height:64px; padding:16px 18px; gap:12px; transition:border-color .18s, background-color .18s, transform .18s var(--ease); }
.radio-card:hover{ border-color:var(--gold-dark); }
.radio-card:active{ transform:scale(.99); }
.radio-card div{ min-width:0; }
.radio-card b{ font-size:15.5px; }
.radio-card small{ margin-top:2px; font-size:12.5px; line-height:1.4; }
.check-panel{ padding:clamp(18px,3vw,28px); border-radius:20px; }
.check-panel h3{ font-size:17px; }
.tbc-note{ line-height:1.5; font-size:13px; }
.qty-control button{ width:46px; height:46px; transition:background-color .15s, transform .12s; }
.qty-control button:active{ transform:scale(.9); }
.qty-control span{ width:44px; }

/* ---------- product details ---------- */
.pd-grid{ gap:clamp(24px,5vw,54px); }
.pd-info h1{ font-size:clamp(26px,4vw,36px); }
.pd-price{ font-size:clamp(24px,3vw,30px); }
.pd-actions .btn{ flex:1 1 200px; }
.pd-meta{ gap:14px 22px; }
.pd-media{ width:100%; }
@media (max-width:1024px){ .pd-media{ aspect-ratio:4/3; max-height:460px; } }

/* ---------- cart ---------- */
.cart-grid{ gap:clamp(22px,4vw,40px); }
.cart-item{ transition:background-color .15s; }
.cart-item:hover{ background:var(--cream-dim); }
.cart-item h4{ font-size:16px; }
.cart-remove{ width:44px; height:44px; transition:border-color .15s, transform .12s; }
.cart-remove:active{ transform:scale(.92); }
.summary-card{ padding:clamp(20px,3vw,28px); border-radius:20px; }
.summary-row.total{ font-size:19px; }
@media (max-width:1024px){ .summary-card{ position:static; } }
@media (max-width:640px){
  .cart-item{
    grid-template-columns:72px minmax(0,1fr) auto; grid-template-areas:"thumb info remove" "thumb info total";
    gap:6px 12px; padding:16px; align-items:start;
  }
  .cart-thumb{ grid-area:thumb; width:72px; height:72px; }
  .cart-item > div:nth-child(2){ grid-area:info; min-width:0; }
  .cart-item .line-total{ grid-area:total; text-align:right; width:auto; align-self:end; font-size:16px; }
  .cart-item .cart-remove{ grid-area:remove; justify-self:end; }
  .qty-control button{ width:42px; height:42px; } .qty-control span{ width:36px; }
}
@media (max-width:360px){ .cart-item{ grid-template-columns:60px minmax(0,1fr) auto; padding:12px; } .cart-thumb{ width:60px; height:60px; } .qty-control button{ width:40px; height:40px; } .qty-control span{ width:30px; } }

/* ---------- checkout / success / tracking ---------- */
.checkout-grid{ gap:clamp(22px,4vw,36px); }
.success-wrap{ padding:clamp(40px,8vw,70px) 0; }
.order-card{ padding:clamp(18px,3vw,28px); }
.order-card dl{ grid-template-columns:auto minmax(0,1fr); }
.order-card dd{ text-align:right; }
.order-line{ gap:12px; } .order-line span:last-child{ text-align:right; flex-shrink:0; }
.success-wrap .hero-cta{ flex-wrap:wrap; }
@media (max-width:480px){ .success-wrap .hero-cta .btn{ width:100%; } }
.track-lookup input{ min-height:50px; font-size:16px; }
.track-card{ padding:clamp(18px,3vw,30px); }
@media (max-width:520px){ .track-lookup{ flex-direction:column; } .track-lookup .btn{ width:100%; } }
.tracker .fill{ width:var(--pct,0%); }
.t-step h4{ font-size:13px; line-height:1.3; padding:0 2px; }
@media (max-width:720px){
  .tracker{ flex-direction:column; gap:0; margin:28px 0 12px; padding-left:6px; }
  .tracker::before{ top:20px; bottom:20px; left:25px; right:auto; width:3px; height:auto; }
  .tracker .fill{ top:20px; left:25px; width:3px; height:var(--pct,0%); max-height:calc(100% - 40px); transition:height .4s ease; }
  .t-step{ display:flex; align-items:center; gap:14px; text-align:left; padding:10px 0; flex:none; }
  .t-dot{ margin:0; flex-shrink:0; }
  .t-step h4{ font-size:15px; }
}

/* ---------- auth ---------- */
.auth-wrap{ min-height:calc(100vh - var(--header-h)); min-height:calc(100dvh - var(--header-h)); padding:clamp(24px,6vw,60px) var(--gutter); }
.auth-card{ padding:clamp(24px,5vw,40px) clamp(20px,5vw,36px); }
.auth-tabs a{ min-height:44px; display:flex; align-items:center; justify-content:center; }

/* ---------- account / orders ---------- */
.dash-grid{ gap:clamp(20px,3vw,32px); }
.dash-panel{ padding:clamp(18px,3vw,28px); border-radius:20px; }
.dash-nav a{ min-height:46px; }
@media (max-width:1024px){ .dash-nav{ display:flex; flex-wrap:wrap; gap:6px; } .dash-nav a{ flex:1 1 150px; border:1px solid var(--line); } }
.order-row > *{ min-width:0; }
@media (max-width:640px){ .order-row{ flex-direction:column; align-items:flex-start; } .order-row .btn{ width:100%; } }
.status-chip{ display:inline-block; white-space:normal; line-height:1.3; }

/* ---------- about / contact ---------- */
.about-grid, .contact-grid{ gap:clamp(24px,5vw,50px); }
.value-row{ grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); }
.contact-info-card{ padding:20px; }
.contact-info-card > div{ min-width:0; }
.map-box{ height:200px; text-align:center; padding:16px; }
.about-art{ overflow:hidden; }

/* ---------- admin ---------- */
.table-wrap{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.table-wrap .admin-table{ min-width:640px; box-shadow:none; }
.admin-table th, .admin-table td{ padding:14px 16px; }
.admin-main{ padding:clamp(18px,3vw,34px); min-width:0; }
.admin-topbar{ gap:14px; flex-wrap:wrap; }
.stat-row{ grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); }
@media (max-width:1024px){
  .admin-shell{ grid-template-columns:1fr; }
  .admin-side{ display:block; padding:14px var(--gutter); }
  .admin-side .brand{ display:none; }
  .admin-nav{ margin-top:0; display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; }
  .admin-nav::-webkit-scrollbar{ display:none; }
  .admin-nav a{ flex-shrink:0; white-space:nowrap; min-height:44px; margin:0; }
}
@media (max-width:640px){ .admin-topbar .field{ width:100%; } .admin-topbar .sort-select{ width:100%; } }

/* ---------- footer ---------- */
.footer-grid{ grid-template-columns:1.4fr 1fr 1fr 1.3fr; gap:clamp(24px,4vw,36px); }
.footer-col a{ padding:4px 0; min-height:32px; display:block; }
.footer-col li{ list-style:none; line-height:1.5; }
@media (max-width:1024px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } .footer-bottom{ flex-direction:column; align-items:flex-start; } }
.site-footer .brand-logo{ border-color:transparent; }

/* ---------- misc ---------- */
.toast{ max-width:calc(100vw - 32px); text-align:left; bottom:max(20px, env(safe-area-inset-bottom)); }
.menu-toolbar{ gap:14px; }
.menu-toolbar .search-box{ flex:1 1 260px; max-width:420px; width:auto; }
@media (max-width:560px){ .menu-toolbar{ flex-direction:column; align-items:stretch; } .menu-toolbar .search-box{ max-width:none; } .sort-select{ width:100%; } }
.empty-state{ padding:60px 16px; }

@media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } }

/* ---------- layout collapse points (min-width:0 keeps grid tracks from stretching) ---------- */
.checkout-grid{ grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); }
.cart-grid{ grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); }
.pd-grid{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); }
.about-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.contact-grid{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); }
.dash-grid{ grid-template-columns:240px minmax(0,1fr); }
.admin-shell{ grid-template-columns:230px minmax(0,1fr); }
.form-grid > *, .checkout-grid > *, .cart-grid > *, .dash-grid > *, .contact-grid > *, .about-grid > *, .pd-grid > *{ min-width:0; }
@media (max-width:900px){
  .checkout-grid, .cart-grid, .pd-grid, .about-grid, .contact-grid, .dash-grid, .admin-shell{ grid-template-columns:minmax(0,1fr); }
  .dash-side{ position:static; }
}
@media (max-width:640px){ .form-grid{ grid-template-columns:minmax(0,1fr); } .stat-row{ gap:12px; } }
@media (max-width:1024px){
  .footer-col a{ min-height:44px; display:flex; align-items:center; padding:4px 0; }
  .footer-brand p a{ min-height:44px; }
}
.card-body h3 a{ display:inline-block; padding:4px 0; }
@media (max-width:480px){ .brand-text small{ display:none; } .brand-logo{ height:46px; } }
.card-body h3{ margin:-6px 0 0; } .card-body h3 a{ padding:10px 0; }
@media (max-width:560px){ .menu-toolbar .search-box{ flex:0 0 auto; width:100%; max-width:none; } }
@media (max-width:1024px){ .hero-art{ width:100%; max-width:460px; margin:0 auto; } .hero-chip.c1{ left:0; } .hero-chip.c2{ right:0; } }
.card-actions{ flex-wrap:wrap; }
.card-actions .btn{ flex:1 1 105px; min-width:0; white-space:normal; }

/* =========================================================
   JFC UI refresh — dark / gold premium look (screenshot reference)
   Appended block: overrides only, existing structure untouched.
   ========================================================= */
[data-theme="dark"]{
  --cream:#0B0907; --cream-dim:#110D09; --card-bg:#17110C; --line:#2B2119;
  --gold:#FFC629; --gold-dark:#E5A800;
}
[data-theme="dark"] body{ background:#0B0907; }
[data-theme="dark"] .site-header{ background:rgba(8,6,4,.92); border-bottom:1px solid #1d1610; backdrop-filter:blur(10px); }
.brand-logo{ background:none !important; border:0 !important; border-radius:0 !important; width:auto !important; height:54px !important; max-width:64px; object-fit:contain; }
.brand-text b{ color:#fff; }
[data-theme="dark"] .btn-primary{ background:linear-gradient(180deg,#FFCE3D,#F5B800); color:#1a1205; box-shadow:0 10px 26px rgba(255,198,41,.28); }
[data-theme="dark"] .btn-outline{ border-color:rgba(255,198,41,.55); color:#fff; }
.hero{ background:radial-gradient(circle at 78% 30%,rgba(255,150,30,.28),transparent 48%),linear-gradient(150deg,#0B0907 0%,#150d06 100%); }
.hero-eyebrow{ background:var(--gold); color:#1a1205; font-weight:700; }
.hero h1 em{ font-style:italic; color:var(--gold); text-decoration:underline; text-decoration-thickness:3px; text-underline-offset:8px; }
.hero-trust{ list-style:none; margin:28px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:14px 26px; color:#E9D9C7; font-size:13.5px; }
.hero-trust li{ position:relative; padding-left:16px; max-width:190px; line-height:1.35; }
.hero-trust li::before{ content:""; position:absolute; left:0; top:.45em; width:8px; height:8px; border-radius:50%; background:var(--gold); }

/* hero product: only this element carries the rotating video */
.hero-product{ position:relative; width:100%; max-width:min(460px,86vw); aspect-ratio:1/1; margin:0 auto; border-radius:24px; overflow:hidden; box-shadow:0 30px 70px rgba(0,0,0,.55); background:#0B0907; }
.hero-product-img, .hero-product-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.hero-product-video{ opacity:0; transition:opacity .5s ease; }
.hero-product.has-video .hero-product-video{ opacity:1; }
@media (max-width:1024px){ .hero-product{ max-width:min(380px,80vw); } }

/* cards */
[data-theme="dark"] .card{ background:var(--card-bg); border:1px solid var(--line); }
.card{ cursor:pointer; overflow:hidden; }
.card-media{ overflow:hidden; }
.card-media img.card-photo{ transition:transform .4s cubic-bezier(.2,.8,.2,1); }
@media (hover:hover){
  .card:hover{ transform:translateY(-6px); box-shadow:0 18px 40px rgba(0,0,0,.5); border-color:var(--gold); }
  .card:hover .card-photo{ transform:scale(1.05); }
}
.card:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.card-body h3{ color:var(--heading); }
[data-theme="dark"] .price{ color:var(--gold); }

/* product click zoom */
.pz-overlay{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(0,0,0,0); transition:background .3s ease; overflow-y:auto; }
.pz-overlay.show{ background:rgba(0,0,0,.78); }
.pz-modal{ position:relative; display:grid; grid-template-columns:1.1fr 1fr; width:min(880px,100%); max-height:calc(100dvh - 32px); background:var(--card-bg); border:1px solid var(--line); border-radius:22px; overflow:hidden; opacity:0; transform:scale(.97); transition:opacity .3s ease, transform .3s ease; }
.pz-overlay.show .pz-modal{ opacity:1; transform:none; }
.pz-media{ background:#120d08; min-height:260px; display:flex; align-items:center; justify-content:center; will-change:transform; }
.pz-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.pz-media svg{ width:46%; height:46%; }
.pz-info{ padding:28px 26px; display:flex; flex-direction:column; gap:10px; overflow-y:auto; }
.pz-info h3{ margin:0; font-size:clamp(20px,3vw,26px); color:var(--heading); }
.pz-price{ font-size:26px; font-weight:800; color:var(--gold); }
.pz-info p{ color:var(--muted); margin:0; line-height:1.6; }
.pz-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:auto; padding-top:12px; }
.pz-actions .btn{ flex:1 1 130px; }
.pz-close{ position:absolute; top:10px; right:12px; z-index:2; width:40px; height:40px; border-radius:50%; border:0; background:rgba(0,0,0,.6); color:#fff; font-size:24px; line-height:1; cursor:pointer; }
body.pz-open{ overflow:hidden; }
@media (max-width:680px){ .pz-modal{ grid-template-columns:1fr; overflow-y:auto; } .pz-media{ aspect-ratio:4/3; min-height:0; } }
@media (prefers-reduced-motion:reduce){ .pz-media,.pz-modal,.pz-overlay,.card,.card-photo{ transition:none !important; } }

/* map + store photos */
.map-wrap{ margin-top:16px; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); aspect-ratio:16/10; min-height:240px; }
.map-frame{ width:100%; height:100%; border:0; display:block; }
.map-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.map-actions .btn{ flex:1 1 130px; text-align:center; }
.store-gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr)); gap:18px; }
.store-gallery figure{ margin:0; border-radius:18px; overflow:hidden; border:1px solid var(--line); background:#120d08; }
.store-gallery img{ width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; display:block; transition:transform .4s ease; }
@media (hover:hover){ .store-gallery figure:hover img{ transform:scale(1.04); } }
html,body{ max-width:100%; overflow-x:hidden; }
.hero-product{ aspect-ratio:514/630; max-width:min(400px,80vw); }
.hero-product-img{ object-fit:contain; background:#0B0907; }
[data-theme="dark"] .main-nav a.active, [data-theme="dark"] .main-nav a:hover{ color:var(--gold); }
[data-theme="dark"] .main-nav a.active::after{ background:var(--gold); }
[data-theme="dark"] .section-tag{ color:var(--gold); }
.hero-product-img{ object-fit:cover; transform:scale(1.14); transform-origin:50% 50%; }


/* =========================================================
   JFC UI v2 — matched to the reference screenshot
   (premium dark restaurant UI, gold accent, cinematic hero).
   Overrides only: HTML structure + functionality untouched.
   ========================================================= */

/* ---------- page entrance: every page pops into view ---------- */
@keyframes jfcPageIn{ from{ opacity:0; transform:translateY(12px) scale(.98); } to{ opacity:1; transform:translateY(0) scale(1); } }
body > *:not(.site-header):not(.mobile-nav):not(.toast):not(script):not(.pz-overlay){
  animation:jfcPageIn .42s cubic-bezier(.2,.7,.2,1) backwards;
}

/* ---------- header ---------- */
[data-theme="dark"] .site-header{ background:rgba(7,6,5,.94); border-bottom:1px solid #1b1713; }
.header-inner{ min-height:74px; gap:clamp(14px,2.2vw,34px); }
.brand-logo{ height:58px !important; max-width:70px; filter:drop-shadow(0 4px 10px rgba(0,0,0,.45)); }
.brand-text b{ font-size:clamp(18px,2vw,22px); font-weight:800; letter-spacing:.01em; }
.brand-text small{ color:#cfc6ba; font-size:9.5px; letter-spacing:.6px; font-weight:600; }
.main-nav{ gap:clamp(18px,2.4vw,38px); margin-left:clamp(8px,2vw,30px); }
[data-theme="dark"] .main-nav a{ color:#e7e0d6; font-weight:600; font-size:15px; }
[data-theme="dark"] .main-nav a:hover, [data-theme="dark"] .main-nav a.active{ color:#fff; }
[data-theme="dark"] .main-nav a.active::after{ background:var(--gold); height:3px; bottom:2px; border-radius:3px; }
.search-box{ width:clamp(200px,22vw,320px); }
.search-box:focus-within{ width:clamp(220px,25vw,350px); }
[data-theme="dark"] .search-box{ background:#14110e; border:1px solid #2b2621; }
[data-theme="dark"] .search-box:focus-within{ border-color:var(--gold); }
[data-theme="dark"] .search-box input{ color:#fff; }
[data-theme="dark"] .search-box input::placeholder{ color:#8f877c; }
[data-theme="dark"] .search-box svg{ stroke:#e7e0d6; }
.header-account a{ display:inline-flex; align-items:center; gap:8px; font-weight:600; color:#fff; white-space:nowrap; }
.header-account a::before{
  content:""; width:22px; height:22px; flex-shrink:0; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center/contain no-repeat;
}
[data-theme="dark"] .theme-toggle, [data-theme="dark"] .icon-btn{ background:transparent; border-color:transparent; }
[data-theme="dark"] .theme-toggle:hover, [data-theme="dark"] .icon-btn:hover{ background:rgba(255,255,255,.07); border-color:transparent; }
[data-theme="dark"] .theme-toggle svg, [data-theme="dark"] .icon-btn svg{ stroke:#fff; width:23px; height:23px; }
[data-theme="dark"] .cart-badge{ border-color:#070605; background:#e2301f; }
[data-theme="dark"] .hamburger{ background:transparent; border-color:#2b2621; }
[data-theme="dark"] .hamburger svg{ stroke:#fff; }
@media (max-width:980px){ .header-actions{ gap:4px; } }

/* ---------- hero ---------- */
.hero{
  background:
    linear-gradient(90deg, rgba(7,5,4,.86) 0%, rgba(7,5,4,.5) 46%, rgba(7,5,4,.08) 100%),
    radial-gradient(ellipse at 74% 55%, rgba(255,146,38,.22), transparent 52%),
    url("../assets/images/backgrounds/hero-bg.jpg") center/cover no-repeat #090705;
  padding:clamp(30px,3.6vw,52px) 0 clamp(26px,3vw,44px);
  border-bottom:1px solid #1b1713;
}
.hero::before{ display:none; }
.hero-inner{ grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); gap:clamp(12px,2.4vw,36px); align-items:center; }
.hero-eyebrow{
  background:rgba(8,6,4,.55); border:1px solid rgba(255,198,41,.6); color:#FFC629;
  font-size:12px; letter-spacing:.7px; padding:9px 14px 9px 16px; margin-bottom:24px; font-weight:700;
}
.hero-eyebrow svg{ width:18px; height:18px; }
.hero-eyebrow::after{ content:""; width:7px; height:7px; border-top:2px solid currentColor; border-right:2px solid currentColor; transform:rotate(45deg); margin-left:4px; }
.hero h1{ font-size:clamp(32px,3.55vw,58px); font-weight:800; line-height:1.08; letter-spacing:-.025em; margin-bottom:20px; max-width:none; }
.hero h1 em{ font-style:normal; color:#FFC629; text-decoration:none; }
.hero p{ color:#cfc7bc; font-size:clamp(15px,1.25vw,17.5px); line-height:1.65; max-width:30em; margin-bottom:30px; }
.hero-cta{ gap:14px; }
.hero-cta .btn{ border-radius:12px; min-height:54px; padding:12px 26px; font-size:16px; font-weight:700; gap:12px; }
.hero-cta .btn-primary{ background:#FFC629; color:#17110a; box-shadow:0 10px 28px rgba(255,198,41,.25); }
.hero-cta .btn-primary:hover{ background:#ffd24f; box-shadow:0 14px 34px rgba(255,198,41,.38); }
.hero-cta .btn-outline{ background:rgba(10,8,6,.55) !important; border:1px solid #4a443d !important; color:#fff !important; }
.hero-cta .btn-outline:hover{ border-color:#FFC629 !important; background:rgba(255,198,41,.08) !important; }
.hero-cta .btn::before, .hero-cta .btn-primary::after{ content:""; width:22px; height:22px; flex-shrink:0; background:currentColor; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain; }
.hero-cta .btn-primary::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 4h14v12H1z'/%3E%3Cpath d='M15 9h4l4 4v3h-8z'/%3E%3Ccircle cx='6' cy='18' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 4h14v12H1z'/%3E%3Cpath d='M15 9h4l4 4v3h-8z'/%3E%3Ccircle cx='6' cy='18' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/svg%3E"); }
.hero-cta .btn-primary::after{ width:18px; height:18px; -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
.hero-cta .btn-outline::before{ width:20px; height:20px; -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M3 6h18M3 12h13M3 18h18'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M3 6h18M3 12h13M3 18h18'/%3E%3C/svg%3E"); }

.hero-trust{ display:flex; flex-wrap:wrap; align-items:stretch; gap:14px 0; margin:34px 0 0; }
.hero-trust li{ display:flex; align-items:center; gap:12px; max-width:none; padding:0 clamp(14px,2vw,26px); font-size:13.5px; line-height:1.35; color:#ddd5ca; position:static; }
.hero-trust li:first-child{ padding-left:0; }
.hero-trust li + li{ border-left:1px solid #3b352e; }
.hero-trust li::before{
  content:""; position:static; width:32px; height:32px; border-radius:0; top:auto; flex-shrink:0; background:#FFC629;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain;
}
.hero-trust .t-delivery::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 4h14v12H1z'/%3E%3Cpath d='M15 9h4l4 4v3h-8z'/%3E%3Ccircle cx='6' cy='18' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 4h14v12H1z'/%3E%3Cpath d='M15 9h4l4 4v3h-8z'/%3E%3Ccircle cx='6' cy='18' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/svg%3E"); }
.hero-trust .t-pickup::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E"); }
.hero-trust .t-walk::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='13' cy='4.5' r='1.8'/%3E%3Cpath d='m9 21 2.2-6-2.6-2.6 1.2-5L14 7l2.5 3.5 2.5.8M11.2 15l3.3 2 1.2 4'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='13' cy='4.5' r='1.8'/%3E%3Cpath d='m9 21 2.2-6-2.6-2.6 1.2-5L14 7l2.5 3.5 2.5.8M11.2 15l3.3 2 1.2 4'/%3E%3C/svg%3E"); }

/* the product: only the bucket (a 3D canvas) turns — no box, no background of its own */
.hero-art{ position:relative; display:block; width:100%; max-width:min(600px,100%); margin-left:auto; }
.hero-art::before{ content:""; position:absolute; inset:12% 4% 0; background:radial-gradient(ellipse at 50% 58%, rgba(255,138,28,.34), rgba(255,138,28,0) 64%); filter:blur(8px); pointer-events:none; }
.hero-product{ position:relative; width:100%; max-width:none; aspect-ratio:1 / .9; margin:0; border-radius:0; overflow:visible; background:none; box-shadow:none; }
.hero-product-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transform:none; background:none; opacity:0; transition:opacity .4s ease; }
.hero-product.fallback .hero-product-img{ opacity:1; filter:drop-shadow(0 24px 40px rgba(0,0,0,.6)); }
.hero-product-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; opacity:0; transition:opacity .7s ease; will-change:transform; touch-action:pan-y; }
.hero-product.has-3d .hero-product-canvas{ opacity:1; }

.hero-chip{ box-shadow:none; }
.hero-chip.c1{
  top:2%; right:0; left:auto; bottom:auto; gap:14px; padding:12px 16px 12px 14px; border-radius:14px;
  background:rgba(10,8,6,.88); border:1px solid #302a24; color:#fff; backdrop-filter:blur(8px);
}
.hero-chip.c1 > svg:first-child{ width:30px; height:30px; fill:#FFC629; stroke:none; }
.hero-chip.c1 span{ display:flex; flex-direction:column; line-height:1.2; }
.hero-chip.c1 small{ font-size:12px; font-weight:500; color:#cfc7bc; }
.hero-chip.c1 b{ font-size:15px; font-weight:700; }
.hero-chip.c1 .chev{ width:18px; height:18px; stroke:#cfc7bc; }
.hero-chip.c2{
  top:auto; bottom:auto; left:auto; right:1%; top:42%; padding:0; background:none; border-radius:0;
  font-family:'Caveat','Segoe Script','Brush Script MT',cursive; font-weight:600; font-size:clamp(26px,3.1vw,44px); line-height:1.02;
  color:#FFC629; transform:rotate(-9deg); transform-origin:left center; display:block; pointer-events:none; text-shadow:0 2px 14px rgba(0,0,0,.6);
}
.hero-chip.c2::after{ content:""; display:block; width:78%; height:3px; margin-top:8px; background:currentColor; border-radius:3px; transform:rotate(-4deg); }

.hero-ctrl{ position:absolute; right:1%; bottom:3%; display:flex; align-items:center; gap:10px; z-index:3; }
.hc-arrow{ width:36px; height:36px; border-radius:50%; border:1px solid #403a33; background:rgba(10,8,6,.72); color:#fff; display:flex; align-items:center; justify-content:center; padding:0; transition:border-color .18s, background-color .18s, transform .18s; }
.hc-arrow svg{ width:16px; height:16px; }
.hc-arrow:hover{ border-color:#FFC629; background:rgba(255,198,41,.14); transform:scale(1.06); }
.hc-dots{ display:flex; align-items:center; gap:8px; margin-left:4px; }
.hc-dot{ width:9px; height:9px; border-radius:50%; border:0; padding:0; background:#5d554b; transition:background-color .2s, transform .2s; position:relative; }
.hc-dot::after{ content:""; position:absolute; inset:-9px; }
.hc-dot.on{ background:#FFC629; transform:scale(1.35); }

@media (max-width:1024px){
  .hero-inner{ grid-template-columns:minmax(0,1fr); gap:6px; }
  .hero-art{ order:-1; max-width:470px; margin:0 auto; }
  .hero h1{ max-width:none; }
  .hero-chip.c1{ top:0; padding:9px 12px; gap:10px; } .hero-chip.c1 b{ font-size:13.5px; } .hero-chip.c1 small{ font-size:11px; }
  .hero-chip.c1 > svg:first-child{ width:24px; height:24px; }
}
@media (max-width:640px){
  .hero-art{ max-width:360px; }
  .hero-chip.c2{ font-size:26px; top:44%; }
  .hero-cta .btn{ width:100%; }
  .hero-trust{ gap:16px 0; }
  .hero-trust li{ padding:0 14px; font-size:12.5px; gap:9px; } .hero-trust li::before{ width:26px; height:26px; }
  .hero-ctrl{ bottom:0; } .hc-arrow{ width:34px; height:34px; }
}
@media (max-width:380px){ .hero-trust li + li{ border-left:0; } .hero-trust li{ padding:0 10px 0 0; } .hero-chip.c1 .chev{ display:none; } }

/* ---------- section heads ---------- */
.section-tag{ display:flex; align-items:center; gap:10px; font-size:12px; letter-spacing:1.4px; margin-bottom:10px; }
[data-theme="dark"] .section-tag{ color:var(--gold); }
.section-tag::before{ content:""; width:22px; height:2px; background:currentColor; border-radius:2px; flex-shrink:0; }
.section-head h2{ font-weight:800; letter-spacing:-.02em; font-size:clamp(28px,3.4vw,42px); }
[data-theme="dark"] .section-head h2{ color:#fff; }
[data-theme="dark"] .section-head p{ color:#9b9388; }
[data-theme="dark"] .section-head .btn-outline{ border:1.5px solid rgba(255,198,41,.75); color:var(--gold); background:transparent; border-radius:999px; font-weight:700; gap:10px; }
[data-theme="dark"] .section-head .btn-outline:hover{ background:rgba(255,198,41,.1); border-color:var(--gold); color:#ffd24f; }
.section-head .btn-outline::after{ content:""; width:16px; height:16px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat; }
[data-theme="dark"] section:not(.hero){ background:transparent; }
[data-theme="dark"] .section-alt{ background:#0e0b08; }

/* ---------- product cards (reference look) ---------- */
.card{ position:relative; border-radius:16px; }
[data-theme="dark"] .card{ background:#14110e; border:1px solid #29231d; box-shadow:none; }
.card-media{ aspect-ratio:16 / 7.6; background:#0d0a08; }
.card-media img.card-photo{ object-position:50% 42%; }
.card-badge{ top:10px; left:10px; font-size:11px; font-weight:700; padding:5px 11px; border-radius:8px; letter-spacing:.2px; }
[data-theme="dark"] .card-badge{ background:rgba(10,8,6,.78); color:#FFC629; border:1px solid rgba(255,198,41,.45); backdrop-filter:blur(4px); }
[data-theme="dark"] .card-badge.is-best{ background:#FFC629; color:#17110a; border-color:#FFC629; }
[data-theme="dark"] .card-badge.is-new{ background:#2fa660; color:#fff; border-color:#2fa660; }
.card-body{ padding:14px 16px 68px; gap:5px; }
.card-body h3{ font-size:17px; font-weight:700; margin:0; line-height:1.25; }
[data-theme="dark"] .card-body h3{ color:#fff; }
.card-desc{ font-size:13px; line-height:1.45; }
[data-theme="dark"] .card-desc{ color:#a39a8e; }
.card-foot{ position:absolute; left:16px; bottom:20px; padding:0; margin:0; max-width:46%; }
.card-foot > span:last-child{ display:none; }
.card-foot .price{ font-size:22px; font-weight:800; line-height:1.1; }
.card-foot .price.tbc{ font-size:12px; font-weight:600; line-height:1.25; display:block; }
.card-actions{ position:absolute; right:14px; bottom:14px; padding:0; gap:0; flex-wrap:nowrap; }
.card-actions .btn-outline{ display:none; }
.card-actions .btn{ flex:none; width:auto; min-height:40px; padding:8px 16px; font-size:13.5px; font-weight:700; gap:8px; border-radius:999px; }
.card-actions .btn svg{ width:16px; height:16px; }
[data-theme="dark"] .card-actions .btn-primary{ background:transparent; color:var(--gold); border:1px solid rgba(255,198,41,.7); box-shadow:none; }
[data-theme="dark"] .card-actions .btn-primary:hover:not([disabled]){ background:var(--gold); color:#17110a; border-color:var(--gold); box-shadow:0 8px 20px rgba(255,198,41,.25); }
[data-theme="dark"] .card-actions .btn-primary[disabled]{ color:#8f877c; border-color:#3b352e; }
@media (max-width:479px){ .card-actions{ flex-direction:row; } .card-actions .btn{ width:auto; } }
@media (hover:hover){ [data-theme="dark"] .card:hover{ border-color:rgba(255,198,41,.5); box-shadow:0 18px 40px rgba(0,0,0,.55); } }

/* featured row: scrolling carousel with a next arrow, like the reference */
.featured-host{ position:relative; }
.featured-row{ display:flex !important; gap:20px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x proximity; scrollbar-width:none; padding:6px 2px 22px; margin:-6px -2px 0; }
.featured-row::-webkit-scrollbar{ display:none; }
.featured-row .card{ flex:0 0 calc((100% - 60px) / 4); scroll-snap-align:start; min-width:0; }
.featured-next{ position:absolute; right:-20px; bottom:150px; width:44px; height:44px; border-radius:50%; border:1px solid #3a342d; background:#0d0b09; color:#fff; display:flex; align-items:center; justify-content:center; padding:0; z-index:4; box-shadow:0 8px 22px rgba(0,0,0,.5); transition:border-color .18s, background-color .18s, transform .18s; }
.featured-next svg{ width:20px; height:20px; transition:transform .25s; }
.featured-next:hover{ border-color:var(--gold); background:#17120d; transform:scale(1.06); }
.featured-next.is-end svg{ transform:rotate(180deg); }
@media (max-width:1180px){ .featured-row .card{ flex-basis:calc((100% - 40px) / 3); } .featured-next{ right:-10px; } }
@media (max-width:820px){ .featured-row .card{ flex-basis:calc((100% - 20px) / 2); } .featured-next{ display:none; } }
@media (max-width:520px){ .featured-row .card{ flex-basis:82%; } }

/* ---------- product click: pops into view ---------- */
.pz-overlay{ transition:background .35s ease; }
.pz-modal{ opacity:0; transform:scale(.92); transition:opacity .38s cubic-bezier(.2,.8,.2,1), transform .42s cubic-bezier(.2,.8,.2,1); }
.pz-overlay.show .pz-modal{ opacity:1; transform:scale(1); }
[data-theme="dark"] .pz-media{ background:#0d0a08; }
.pz-actions .btn[disabled]{ opacity:.55; }

/* ---------- misc dark polish to match the reference ---------- */
[data-theme="dark"] .cat-pill{ background:#14110e; border-color:#2b2621; color:#e7e0d6; }
[data-theme="dark"] .cat-pill:hover{ border-color:var(--gold); color:#fff; }
[data-theme="dark"] .step, [data-theme="dark"] .why-card{ background:#14110e; border-color:#29231d; }
[data-theme="dark"] .step-num{ background:var(--gold); color:#17110a; }
[data-theme="dark"] .why-card .icon-wrap{ background:rgba(255,198,41,.12); }
[data-theme="dark"] .why-card svg{ stroke:var(--gold); }
[data-theme="dark"] .site-footer{ background:#070605; border-top:1px solid #1b1713; }
[data-theme="dark"] .footer-col a:hover{ color:var(--gold); }
@media (prefers-reduced-motion:reduce){ .hero-product-canvas{ transition:none; } body > *{ animation:none !important; } }


/* =========================================================
   JFC v3 — polish layer
   • one glow system shared by dark + light mode
   • light-mode fixes (logo text, Log In, buttons, spacing)
   • Barkada Bucket food animation styles
   • educational footer line
   Overrides only; page structure + features are unchanged.
   ========================================================= */
:root{
  --glow-rgb:244,168,37;           /* warm gold */
  --glow-hot:255,138,28;           /* fryer orange */
  --glow-a:.26; --glow-a-soft:.12;
  --section-y:clamp(40px,6vw,76px);
  --surface-glow:0 1px 2px rgba(59,36,18,.05), 0 12px 32px -14px rgba(59,36,18,.16);
}
[data-theme="dark"]{
  --glow-rgb:255,198,41; --glow-a:.42; --glow-a-soft:.14;
  --surface-glow:0 0 0 1px rgba(var(--glow-rgb),.05), 0 22px 54px -26px rgba(var(--glow-hot),.30);
}

/* ---------- shared fixes (both themes) ---------- */
.btn svg, .btn > svg{ width:18px; height:18px; flex:none; }
.btn-sm svg{ width:16px; height:16px; }
.cart-empty svg{ margin-left:auto; margin-right:auto; }
.footer-col li svg{ display:inline-block; }
.site-footer{ margin-top:0; position:relative; }
.pd-media{ aspect-ratio:4/3; position:relative; }
.pz-media, .card-media{ position:relative; }
.pd-actions .btn{ flex:1 1 180px; }
.pd-actions{ align-items:stretch; }
.card-media{ background-color:#1a120b; }
.card-badge{ z-index:2; }

/* ---------- header: readable in light mode, glassy, shadow when scrolled ---------- */
.site-header{ background:rgba(255,251,242,.9); -webkit-backdrop-filter:saturate(1.4) blur(14px); backdrop-filter:saturate(1.4) blur(14px); opacity:1; transition:box-shadow .25s ease, background-color .25s ease; }
.site-header.scrolled{ box-shadow:0 10px 30px -14px rgba(59,36,18,.28); }
[data-theme="dark"] .site-header{ background:rgba(8,6,4,.88); }
[data-theme="dark"] .site-header.scrolled{ box-shadow:0 1px 0 rgba(var(--glow-rgb),.16), 0 14px 40px -14px rgba(var(--glow-hot),.30); }
.brand-text b{ color:var(--heading); }
.brand-text small{ color:var(--muted); }
[data-theme="dark"] .brand-text b{ color:#fff; }
[data-theme="dark"] .brand-text small{ color:#cfc6ba; }
.site-footer .brand-text b{ color:#fff; }
.site-footer .brand-text small{ color:#d9c8b4; }
.header-account a{ color:var(--heading); }
[data-theme="dark"] .header-account a{ color:#fff; }
.header-account a:hover{ color:var(--red); }
[data-theme="dark"] .header-account a:hover{ color:var(--gold); }
.main-nav a{ color:var(--brown-soft); }
.main-nav a:hover, .main-nav a.active{ color:var(--red); }
.main-nav a.active::after{ bottom:2px; }
[data-theme="dark"] .main-nav a{ color:#e7e0d6; }
[data-theme="dark"] .main-nav a:hover, [data-theme="dark"] .main-nav a.active{ color:#fff; }
.theme-toggle, .icon-btn{ box-shadow:var(--shadow-sm); }
[data-theme="dark"] .theme-toggle, [data-theme="dark"] .icon-btn{ box-shadow:none; }
.theme-toggle:hover, .icon-btn:hover{ border-color:var(--gold); box-shadow:0 0 0 4px rgba(var(--glow-rgb),.14); }
[data-theme="dark"] .theme-toggle:hover, [data-theme="dark"] .icon-btn:hover{ box-shadow:0 0 22px rgba(var(--glow-rgb),.35); }
.cart-badge.bump{ animation:badgeBump .5s cubic-bezier(.2,.8,.2,1); }
@keyframes badgeBump{ 0%{ transform:scale(1); } 40%{ transform:scale(1.5); box-shadow:0 0 0 6px rgba(var(--glow-rgb),.35); } 100%{ transform:scale(1); } }

/* ---------- page headers (inner pages): soft ambient light ---------- */
.page-head{
  position:relative; overflow:hidden; border-bottom:1px solid var(--line);
  background:radial-gradient(ellipse at 88% -20%, rgba(var(--glow-rgb),.20), transparent 55%), linear-gradient(180deg,var(--cream-dim),var(--cream));
}
[data-theme="dark"] .page-head{ background:radial-gradient(ellipse at 88% -30%, rgba(var(--glow-hot),.22), transparent 58%), linear-gradient(180deg,#120d09,#0B0907); border-bottom-color:#1d1610; }
[data-theme="dark"] .page-head h1{ text-shadow:0 0 36px rgba(var(--glow-rgb),.22); }
.breadcrumb a:hover{ text-decoration:underline; text-underline-offset:3px; }

/* ---------- sections: faint ambient light behind content ---------- */
section:not(.hero){ position:relative; isolation:isolate; }
section:not(.hero)::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse 42% 55% at 8% 45%, rgba(var(--glow-rgb),.10), transparent 100%);
}
section:not(.hero):nth-of-type(even)::before{ background:radial-gradient(ellipse 42% 55% at 92% 55%, rgba(var(--glow-rgb),.10), transparent 100%); }
[data-theme="dark"] section:not(.hero)::before{ background:radial-gradient(ellipse 42% 55% at 8% 45%, rgba(var(--glow-hot),.10), transparent 100%); }
[data-theme="dark"] section:not(.hero):nth-of-type(even)::before{ background:radial-gradient(ellipse 42% 55% at 92% 55%, rgba(var(--glow-hot),.10), transparent 100%); }
.section-alt{ background:var(--cream-dim); }
[data-theme="dark"] .section-head h2{ text-shadow:0 0 34px rgba(var(--glow-rgb),.20); }
[data-theme="dark"] .section-tag{ text-shadow:0 0 14px rgba(var(--glow-rgb),.55); }
.section-tag{ display:inline-flex; align-items:center; gap:10px; }
.section-tag::before{ content:""; width:22px; height:2px; border-radius:2px; background:currentColor; }
[data-theme="dark"] .section-tag::before{ box-shadow:0 0 10px rgba(var(--glow-rgb),.8); }

/* ---------- buttons ---------- */
.btn-primary{ box-shadow:0 8px 20px -6px rgba(212,50,31,.45); }
.btn-primary:hover:not([disabled]){ box-shadow:0 12px 28px -6px rgba(212,50,31,.55), 0 0 0 4px rgba(212,50,31,.12); }
[data-theme="dark"] .btn-primary{ box-shadow:0 8px 24px -6px rgba(var(--glow-rgb),.45); }
[data-theme="dark"] .btn-primary:hover:not([disabled]){ box-shadow:0 0 0 4px rgba(var(--glow-rgb),.14), 0 10px 34px rgba(var(--glow-rgb),.55); }
.btn-outline{ background:var(--card-bg); border-color:var(--line); box-shadow:var(--shadow-sm); }
.btn-outline:hover{ border-color:var(--red); color:var(--red); background:var(--card-bg); box-shadow:0 0 0 4px rgba(212,50,31,.08); }
[data-theme="dark"] .btn-outline{ box-shadow:none; }
[data-theme="dark"] .btn-outline:hover{ border-color:var(--gold); color:var(--gold); box-shadow:0 0 24px rgba(var(--glow-rgb),.28); }
.btn[disabled]{ filter:saturate(.6); }

/* ---------- cards: light = soft warm lift, dark = glowing edge ---------- */
.card{ box-shadow:var(--surface-glow); border-color:var(--line); }
.card-media::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(0,0,0,0) 62%,rgba(0,0,0,.28)); z-index:1; }
.card-media .food-anim{ z-index:0; }
@media (hover:hover){
  .card:hover{ border-color:rgba(var(--glow-rgb),.7); box-shadow:0 0 0 1px rgba(var(--glow-rgb),.35), 0 22px 46px -16px rgba(var(--glow-rgb),var(--glow-a)), 0 0 46px -8px rgba(var(--glow-hot),.22); }
  [data-theme="dark"] .card:hover{ box-shadow:0 0 0 1px rgba(var(--glow-rgb),.4), 0 22px 54px -14px rgba(var(--glow-rgb),.38), 0 0 56px -6px rgba(var(--glow-hot),.30); }
}
.card:active{ transform:translateY(-2px); }
.price{ letter-spacing:-.01em; }
[data-theme="dark"] .price{ text-shadow:0 0 18px rgba(var(--glow-rgb),.35); }
.card-actions .btn-outline{ box-shadow:none; }
.cat-pill{ box-shadow:var(--shadow-sm); }
[data-theme="dark"] .cat-pill{ box-shadow:none; }
.cat-pill:hover{ border-color:var(--gold); box-shadow:0 0 0 4px rgba(var(--glow-rgb),.14); }
[data-theme="dark"] .cat-pill:hover{ box-shadow:0 0 22px rgba(var(--glow-rgb),.3); }
.cat-pill.active{ box-shadow:0 8px 20px -8px rgba(59,36,18,.5); }
[data-theme="dark"] .cat-pill.active{ background:var(--gold); border-color:var(--gold); color:#17110a; box-shadow:0 0 26px rgba(var(--glow-rgb),.4); }

/* ---------- steps / why / value cards ---------- */
.step, .why-card, .value-card, .contact-info-card{ box-shadow:var(--surface-glow); }
.step-num{ box-shadow:0 8px 18px -6px rgba(212,50,31,.55), 0 0 0 5px rgba(212,50,31,.10); }
[data-theme="dark"] .step-num{ box-shadow:0 0 0 5px rgba(var(--glow-rgb),.12), 0 0 26px rgba(var(--glow-rgb),.55); }
[data-theme="dark"] .why-card .icon-wrap{ box-shadow:0 0 22px rgba(var(--glow-rgb),.22); }
[data-theme="dark"] .why-card svg, [data-theme="dark"] .value-card svg, [data-theme="dark"] .contact-info-card svg{ filter:drop-shadow(0 0 6px rgba(var(--glow-rgb),.55)); }
[data-theme="dark"] .value-card svg, [data-theme="dark"] .contact-info-card svg{ stroke:var(--gold); }
@media (hover:hover){
  .step:hover, .why-card:hover, .value-card:hover{ border-color:rgba(var(--glow-rgb),.55); box-shadow:0 18px 40px -18px rgba(var(--glow-rgb),var(--glow-a)); }
  [data-theme="dark"] .step:hover, [data-theme="dark"] .why-card:hover, [data-theme="dark"] .value-card:hover{ box-shadow:0 0 0 1px rgba(var(--glow-rgb),.3), 0 18px 46px -14px rgba(var(--glow-rgb),.36); }
}

/* ---------- panels (cart, checkout, account, tracking, orders) ---------- */
.summary-card, .check-panel, .dash-panel, .dash-side, .cart-items, .track-card, .order-card{ box-shadow:var(--surface-glow); }
.admin-table{ box-shadow:var(--surface-glow); }
.radio-card.selected{ border-color:var(--red); box-shadow:0 0 0 3px rgba(212,50,31,.12); }
[data-theme="dark"] .radio-card.selected{ background:rgba(var(--glow-rgb),.10); border-color:var(--gold); box-shadow:0 0 0 1px rgba(var(--glow-rgb),.4), 0 0 26px rgba(var(--glow-rgb),.22); }
[data-theme="dark"] .t-step.current .t-dot{ border-color:var(--gold); box-shadow:0 0 0 5px rgba(var(--glow-rgb),.16), 0 0 26px rgba(var(--glow-rgb),.55); }
[data-theme="dark"] .t-step.done .t-dot{ background:var(--gold); border-color:var(--gold); box-shadow:0 0 16px rgba(var(--glow-rgb),.45); }
[data-theme="dark"] .t-step.done .t-dot svg{ stroke:#17110a; }
[data-theme="dark"] .tracker .fill{ background:var(--gold); box-shadow:0 0 14px rgba(var(--glow-rgb),.7); }
[data-theme="dark"] .summary-row.total span:last-child{ color:var(--gold); text-shadow:0 0 18px rgba(var(--glow-rgb),.4); }
[data-theme="dark"] .check-panel h3 span.num{ background:var(--gold); color:#17110a; box-shadow:0 0 16px rgba(var(--glow-rgb),.5); }
[data-theme="dark"] .avatar{ box-shadow:0 0 18px rgba(var(--glow-rgb),.45); }
[data-theme="dark"] .success-icon{ box-shadow:0 0 0 8px rgba(71,192,124,.10), 0 0 38px rgba(71,192,124,.4); background:rgba(71,192,124,.12); }
[data-theme="dark"] .status-chip.placed, [data-theme="dark"] .tbc-note, [data-theme="dark"] .badge-tbc{ background:rgba(var(--glow-rgb),.10); }
.cart-item:hover{ background:var(--cream-dim); }
.cart-thumb{ background:#1a120b; }

/* ---------- form focus ---------- */
.field input:focus, .field select:focus, .field textarea:focus, .promo-row input:focus, .track-lookup input:focus{ border-color:var(--red); box-shadow:0 0 0 4px rgba(212,50,31,.14); }
[data-theme="dark"] .field input:focus, [data-theme="dark"] .field select:focus, [data-theme="dark"] .field textarea:focus,
[data-theme="dark"] .promo-row input:focus, [data-theme="dark"] .track-lookup input:focus{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(var(--glow-rgb),.18), 0 0 26px rgba(var(--glow-rgb),.25); }
.search-box:focus-within{ box-shadow:0 0 0 4px rgba(212,50,31,.10); }
[data-theme="dark"] .search-box:focus-within{ box-shadow:0 0 24px rgba(var(--glow-rgb),.28); }
.search-box{ box-shadow:var(--shadow-sm); }
[data-theme="dark"] .search-box{ box-shadow:none; }

/* ---------- product page + popup image: ambient glow ---------- */
.pd-media, .pz-media{ border:1px solid var(--line); }
.pd-media{ box-shadow:0 26px 60px -26px rgba(var(--glow-rgb),.55), var(--shadow-sm); }
[data-theme="dark"] .pd-media{ box-shadow:0 0 0 1px rgba(var(--glow-rgb),.18), 0 30px 80px -24px rgba(var(--glow-hot),.45); }
[data-theme="dark"] .pz-modal{ box-shadow:0 0 0 1px rgba(var(--glow-rgb),.22), 0 30px 90px -20px rgba(var(--glow-hot),.45); }
.pz-modal{ border-color:var(--line); }
.pz-media{ border:0; }
[data-theme="dark"] .pz-price, [data-theme="dark"] .pd-price{ text-shadow:0 0 22px rgba(var(--glow-rgb),.4); }
[data-theme="dark"] .pd-price{ color:var(--gold); }
.pd-meta svg{ stroke:var(--gold-dark); }
[data-theme="dark"] .pd-meta svg{ stroke:var(--gold); filter:drop-shadow(0 0 5px rgba(var(--glow-rgb),.5)); }

/* ---------- auth ---------- */
.auth-wrap{ background:radial-gradient(ellipse at 50% 30%, rgba(var(--glow-hot),.30), transparent 60%), linear-gradient(150deg,#2a180b,#150c05); }
[data-theme="dark"] .auth-wrap{ background:radial-gradient(ellipse at 50% 35%, rgba(var(--glow-hot),.30), transparent 60%), #0B0907; }
[data-theme="dark"] .auth-card{ border:1px solid rgba(var(--glow-rgb),.18); box-shadow:0 0 0 1px rgba(var(--glow-rgb),.06), 0 30px 90px -20px rgba(var(--glow-hot),.45); }
.auth-card .brand-text small{ color:var(--muted); }

/* ---------- hero: extra warmth, same look ---------- */
.hero-chip.c1{ box-shadow:0 10px 30px -10px rgba(0,0,0,.6), 0 0 0 1px rgba(var(--glow-rgb),.12); }
.hero-art::after{ content:""; position:absolute; left:14%; right:14%; bottom:2%; height:9%; border-radius:50%; background:radial-gradient(ellipse, rgba(var(--glow-hot),.38), transparent 70%); filter:blur(14px); pointer-events:none; z-index:0; animation:heatPulse 5.5s ease-in-out infinite; }
.hero-art::before{ animation:heatPulse 5.5s ease-in-out infinite; }
@keyframes heatPulse{ 0%,100%{ opacity:.8; } 50%{ opacity:1; } }
.hero-cta .btn-primary:hover{ box-shadow:0 0 0 4px rgba(255,198,41,.16), 0 14px 38px rgba(255,198,41,.5); }

/* ---------- footer ---------- */
.site-footer::before{ content:""; position:absolute; left:0; right:0; top:0; height:2px; background:linear-gradient(90deg,transparent,rgba(var(--glow-rgb),.75),transparent); box-shadow:0 0 28px 2px rgba(var(--glow-rgb),.35); }
.footer-bottom{ padding:18px 0 8px; justify-content:center; text-align:center; }
.footer-edu{
  margin:0; padding:14px 0 26px; text-align:center; font-size:13.5px; font-weight:600; letter-spacing:.35px;
  color:#E9D9C7;
}
[data-theme="dark"] .footer-edu{ color:#e9d9c7; text-shadow:0 0 18px rgba(var(--glow-rgb),.25); }
.footer-col a:hover{ color:var(--gold); }

/* ---------- reveal on scroll + back-to-top ---------- */
/* content is always visible; the animation only plays as it scrolls into view */
.rv.in{ animation:rvIn .6s cubic-bezier(.2,.7,.2,1) both; }
@keyframes rvIn{ from{ opacity:0; translate:0 16px; } to{ opacity:1; translate:0 0; } }
.to-top{
  position:fixed; right:20px; bottom:22px; z-index:150; width:46px; height:46px; border-radius:50%;
  border:1.5px solid var(--line); background:var(--card-bg); color:var(--heading); display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow); opacity:0; pointer-events:none; translate:0 10px; transition:opacity .25s, translate .25s, box-shadow .2s, border-color .2s;
}
.to-top svg{ width:20px; height:20px; }
.to-top.show{ opacity:1; pointer-events:auto; translate:0 0; }
.to-top:hover{ border-color:var(--gold); box-shadow:0 0 0 4px rgba(var(--glow-rgb),.16); }
[data-theme="dark"] .to-top:hover{ box-shadow:0 0 24px rgba(var(--glow-rgb),.4); }

/* =========================================================
   Barkada Bucket — realistic food animation (js/food-anim.js)
   ========================================================= */
.food-anim{ position:absolute; inset:0; display:block; overflow:hidden; background:#1a120b; }
.food-anim > img{ width:100%; height:100%; object-fit:cover; display:block; transform-origin:50% 58%; animation:foodPush 20s ease-in-out infinite alternate; }
@keyframes foodPush{ from{ scale:1; filter:brightness(1) saturate(1); } to{ scale:1.07; filter:brightness(1.05) saturate(1.07); } }
/* warm light drifting over the crust, with long pauses so it never feels like a loop */
.food-anim::after{
  content:""; position:absolute; inset:-25% -10%; pointer-events:none; mix-blend-mode:soft-light;
  background:linear-gradient(104deg, transparent 40%, rgba(255,228,176,.55) 50%, transparent 60%);
  translate:-70% 0; animation:foodSweep 11s cubic-bezier(.45,.05,.35,1) infinite;
}
@keyframes foodSweep{ 0%,8%{ translate:-70% 0; } 52%,100%{ translate:70% 0; } }
.food-fx{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:2; }
.hero-product .food-fx{ z-index:3; }
@media (prefers-reduced-motion:reduce){
  .food-anim > img, .food-anim::after, .hero-art::before, .hero-art::after{ animation:none !important; }
  .rv.in{ animation:none !important; }
}

/* ---------- responsive touch-ups ---------- */
@media (max-width:640px){
  .to-top{ right:14px; bottom:16px; width:44px; height:44px; }
  .footer-edu{ font-size:12.5px; padding:12px 0 22px; }
  .page-head{ padding:26px 0; }
}

.section-alt .cat-row{ margin-bottom:0; }

/* ---------- hero: real photo of the Barkada Bucket, brought to life ---------- */
.hero-product.photo{
  aspect-ratio:1 / .92; width:88%; margin-left:auto; margin-right:auto; border-radius:28px; overflow:hidden; position:relative; background:#1a120b;
  box-shadow:0 0 0 1px rgba(var(--glow-rgb),.28), 0 34px 80px -20px rgba(var(--glow-hot),.55), 0 0 90px -10px rgba(var(--glow-hot),.35);
}
.hero-product.photo .hero-product-img{ opacity:1; filter:none; object-fit:cover; position:absolute; inset:0; width:100%; height:100%; transform-origin:50% 58%; animation:foodPush 20s ease-in-out infinite alternate; }
.hero-product.photo::after{
  content:""; position:absolute; inset:-25% -10%; pointer-events:none; mix-blend-mode:soft-light; z-index:2;
  background:linear-gradient(104deg, transparent 40%, rgba(255,228,176,.55) 50%, transparent 60%);
  translate:-70% 0; animation:foodSweep 11s cubic-bezier(.45,.05,.35,1) infinite;
}
.hero-product.photo::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:radial-gradient(ellipse at 50% 120%, rgba(0,0,0,.45), transparent 60%), linear-gradient(180deg, rgba(0,0,0,.18), transparent 25%); }
.hero-product.photo ~ .hero-ctrl{ display:none; }
.hero-chip.c1{ z-index:4; }
.hero-art .hero-chip.c2{
  z-index:4; left:-3%; right:auto; top:auto; bottom:7%; padding:10px 18px 12px; border-radius:16px; transform:rotate(-5deg); transform-origin:center;
  background:rgba(10,8,6,.86); border:1px solid rgba(var(--glow-rgb),.55); backdrop-filter:blur(8px);
  box-shadow:0 14px 34px -10px rgba(0,0,0,.7), 0 0 28px -6px rgba(var(--glow-rgb),.45);
  font-size:clamp(20px,2.3vw,30px); text-shadow:0 0 18px rgba(var(--glow-rgb),.55);
}
.hero-art .hero-chip.c2::after{ display:none; }
@media (max-width:1024px){ .hero-product.photo{ width:100%; } .hero-art .hero-chip.c2{ left:2%; } }
@media (max-width:640px){ .hero-art .hero-chip.c2{ font-size:19px; padding:8px 14px 10px; bottom:5%; } }
img.card-photo[src*="half_chicken"]{ object-position:50% 40%; }

/* smoke-only products: no push-in / light sweep, so the hover zoom stays clean */
.food-anim[data-food-anim="smoke"] > img{ animation:none; }
.food-anim[data-food-anim="smoke"]::after{ display:none; }