/* ===================================================================
   The Clay Pot — Matebeto · Grill · Bar
   Palette drawn from the logo: charcoal, terracotta, camel, cream,
   with a muted sage accent pulled from the venue's interior walls.
=================================================================== */

:root{
  --charcoal: #1c1a17;
  --charcoal-2: #2a2521;
  --cream: #f6f2ea;
  --cream-2: #efe7d8;
  --terracotta: #b1592f;
  --terracotta-dark: #8f4423;
  --camel: #c9a06a;
  --brown: #5c3a24;
  --sage: #7c8863;
  --sage-dark: #616b4c;
  --ink: #2a221c;
  --muted: #7a6f62;
  --white: #ffffff;
  --danger: #b1452f;
  --shadow: 0 20px 45px -22px rgba(28, 26, 23, 0.45);
  --radius: 14px;
  --serif: "Fraunces", Georgia, serif;
  --sans: "Jost", "Segoe UI", sans-serif;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  overflow-x: hidden;
}

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin: 0; padding: 0; }
button{ font-family: inherit; }

.container{ width: min(1160px, 92%); margin-inline: auto; }
section{ padding: 5.5rem 0; }

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .75rem;
  font-weight: 500;
  color: var(--terracotta-dark);
  margin-bottom: 1rem;
}
.eyebrow::before{ content:""; width: 26px; height: 2px; background: var(--camel); display:inline-block; }

.section-head{ max-width: 640px; margin-bottom: 2.6rem; }
.section-head.center{ margin-inline: auto; text-align: center; }

h1, h2, h3, h4{ font-family: var(--serif); font-weight: 600; line-height: 1.15; color: var(--charcoal); margin: 0 0 .6rem; }
h2{ font-size: clamp(1.8rem, 3vw, 2.5rem); }
h3{ font-size: 1.25rem; }
p{ margin: 0 0 1rem; color: var(--muted); }

.btn{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 1.6rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .92rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  white-space: nowrap;
  /* Real <button> elements (unlike the <a class="btn"> ones) otherwise keep
     the browser's own native background/focus/active/tap-highlight chrome
     (often white or light gray), which shows up on top of our custom
     colors. background is set explicitly below rather than relying on
     appearance:none alone, since that reset isn't consistent everywhere. */
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.btn-primary{ background: var(--terracotta); color: var(--white); box-shadow: 0 12px 26px -12px rgba(177,89,47,.6); }
.btn-primary:hover{ background: var(--terracotta-dark); transform: translateY(-2px); }
.btn-outline{ border-color: rgba(246,242,234,.5); color: var(--cream); }
.btn-outline:hover{ background: rgba(201,160,106,.22); border-color: var(--camel); transform: translateY(-2px); }
#logoutBtn, #logoutBtn:hover, #logoutBtn:active, #logoutBtn:focus{ background: transparent; border-color: rgba(246,242,234,.5); color: var(--cream); transform: none; }
.btn-dark{ border-color: var(--charcoal); color: var(--charcoal); }
.btn-dark:hover{ background: var(--charcoal); color: var(--cream); }
.btn-sage{ background: var(--sage); color: var(--white); }
.btn-sage:hover{ background: var(--sage-dark); }
.btn-small{ padding: .5rem 1rem; font-size: .8rem; }
.btn[disabled]{ opacity: .5; cursor: not-allowed; transform: none !important; }

/* ---------- Nav ---------- */
.nav{
  position: fixed; top:0; left:0; right:0; z-index: 100;
  padding: 1rem 0;
  transition: background .3s ease, padding .3s ease, box-shadow .3s ease;
}
.nav.scrolled{ background: rgba(28,26,23,.94); backdrop-filter: blur(8px); padding: .6rem 0; box-shadow: 0 10px 30px -15px rgba(0,0,0,.5); }
.nav .container{ display:flex; align-items:center; justify-content:space-between; }
.brand{ display:flex; align-items:center; gap:.7rem; color: var(--cream); }
.brand img{ height: 38px; width: auto; border-radius: 6px; }
.brand .word{ font-family: var(--serif); font-size: 1.2rem; line-height: 1; }
.brand .word small{ display:block; font-family: var(--sans); font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: var(--camel); font-weight: 500; margin-top: 2px; }

.nav-links{ display:flex; align-items:center; gap: 1.8rem; }
.nav-links > li{ position: relative; }
.nav-links > li > a{
  color: var(--cream); font-size: .9rem; font-weight: 500; opacity:.9;
  display:flex; align-items:center; gap:.3rem;
  padding-bottom: 3px;
}
.nav-links > li > a:hover{ opacity:1; }

.nav-cta{ display:flex; align-items:center; gap:1rem; }
.cart-link{ position:relative; color: var(--cream); display:flex; align-items:center; }
.cart-link svg{ width:22px; height:22px; }
.cart-badge{
  position:absolute; top:-8px; right:-10px;
  background: var(--terracotta); color:#fff; font-size:.68rem; font-weight:700;
  min-width: 18px; height:18px; border-radius:999px;
  display:flex; align-items:center; justify-content:center; padding:0 4px;
}
.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; }
.nav-toggle span{ width:24px; height:2px; background:var(--cream); border-radius:2px; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero{
  padding: 9rem 0 4rem;
  background: linear-gradient(180deg, rgba(28,20,15,.72), rgba(28,20,15,.86)), var(--hero-img, none);
  background-size: cover; background-position: center;
  color: var(--cream); text-align:center;
}
.page-hero .eyebrow{ color: var(--camel); justify-content:center; }
.page-hero .eyebrow::before{ display:none; }
.page-hero h1{ color: var(--cream); font-size: clamp(2.1rem, 4.5vw, 3rem); }
.page-hero p{ color: rgba(246,242,234,.75); max-width: 560px; margin-inline:auto; }

/* ---------- Hero (home) ---------- */
.hero{ min-height: 92vh; display:flex; align-items:center; position:relative; color: var(--cream); padding-top: 6rem; }
.hero::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(20,15,13,.5) 0%, rgba(20,15,13,.75) 60%, rgba(20,15,13,.95) 100%), var(--hero-img);
  background-size: cover; background-position: center 35%;
  z-index:-2;
}
.hero-content{ max-width: 680px; }
.hero-badges{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-bottom:1.3rem; }
.hero-badge{ font-size:.78rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color: var(--camel); }
.hero-badge:not(:last-child)::after{ content:'\00b7'; margin-left:.5rem; color: rgba(246,242,234,.4); }
.hero h1{ color: var(--cream); font-size: clamp(2.4rem, 5.6vw, 3.8rem); margin-bottom: 1rem; }
.hero-tagline{ font-size: 1.1rem; color: rgba(246,242,234,.85); max-width: 540px; margin-bottom: 2.2rem; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:1rem; }

/* ---------- About / info blocks ---------- */
.about-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:3.5rem; align-items:center; }
.about-grid img{ border-radius: var(--radius); box-shadow: var(--shadow); aspect-ratio: 3/4; object-fit:cover; }
.info-list{ display:grid; grid-template-columns: repeat(2,1fr); gap:1rem; margin-top:1.6rem; }
.info-item{ display:flex; gap:.8rem; padding:1rem; background:var(--white); border:1px solid rgba(28,26,23,.06); border-radius:10px; }
.info-item svg{ width:20px; height:20px; color: var(--terracotta); flex-shrink:0; margin-top:2px; }
.info-item strong{ display:block; font-size:.9rem; color:var(--charcoal); }
.info-item span{ font-size:.8rem; color:var(--muted); }

/* ---------- Category tabs ---------- */
.tabs{ display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom: 2.2rem; }
.tab-btn{
  padding:.6rem 1.3rem; border-radius:999px; border:1px solid rgba(28,26,23,.15);
  background: var(--white); color: var(--ink); font-size:.88rem; font-weight:500; cursor:pointer;
  transition: all .2s ease;
}
.tab-btn.active{ background: var(--charcoal); color: var(--cream); border-color: var(--charcoal); }

/* ---------- Menu / Drink cards ---------- */
.item-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.item-card{
  background: var(--white); border-radius: var(--radius); padding: 1.5rem;
  border: 1px solid rgba(28,26,23,.06); box-shadow: 0 14px 30px -22px rgba(28,26,23,.35);
  display:flex; flex-direction:column; gap:.5rem; position:relative;
}
.card-flags{ position:absolute; top:1rem; right:1rem; display:flex; flex-direction:column; gap:.4rem; align-items:flex-end; }
.item-card .special-flag{
  background: var(--sage); color:#fff;
  font-size:.65rem; text-transform:uppercase; letter-spacing:.08em; padding:.3rem .6rem; border-radius:999px; white-space:nowrap;
}
.item-card.out-of-stock{ opacity:.6; }
.item-card .cat{ font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color: var(--terracotta-dark); font-weight:600; }
.item-card h3{ margin:.2rem 0; }
.item-card .desc{ font-size:.88rem; color: var(--muted); flex-grow:1; margin-bottom: .8rem; }
.item-card .row{ display:flex; align-items:center; justify-content:space-between; gap: .8rem; }
.item-card .price{ font-family: var(--serif); font-size:1.15rem; color: var(--charcoal); font-weight:600; }
.item-placeholder-art{
  width:100%; height:110px; border-radius:10px; margin-bottom:.6rem;
  background: linear-gradient(135deg, var(--camel), var(--terracotta));
  display:flex; align-items:center; justify-content:center; color:#fff; opacity:.9;
}
.item-placeholder-art svg{ width:34px; height:34px; }

/* ---------- Drink list rows (compact, small thumbnail) ---------- */
.drink-list{ display:flex; flex-direction:column; gap:.7rem; }
.drink-row{
  display:flex; align-items:center; gap:1rem;
  background: var(--white); border-radius:12px; padding:.7rem 1rem;
  border: 1px solid rgba(28,26,23,.06); box-shadow: 0 10px 22px -18px rgba(28,26,23,.3);
}
.drink-row.out-of-stock{ opacity:.6; }
.drink-row .drink-thumb{ width:52px; height:52px; border-radius:8px; object-fit:cover; flex-shrink:0; cursor:zoom-in; }
.drink-row .drink-thumb-placeholder{
  width:52px; height:52px; border-radius:8px; flex-shrink:0;
  background: linear-gradient(135deg, var(--camel), var(--terracotta));
  display:flex; align-items:center; justify-content:center; color:#fff; opacity:.9;
}
.drink-row .drink-thumb-placeholder svg{ width:22px; height:22px; }
.drink-row .drink-info{ flex:1; min-width:0; display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.drink-row .drink-info h3{ margin:0; font-size:1rem; }
.drink-row .out-of-stock-flag{
  font-size:.62rem; text-transform:uppercase; letter-spacing:.06em;
  background: var(--danger); color:#fff; padding:.25rem .55rem; border-radius:999px; white-space:nowrap;
}
.drink-row .row-actions{ display:flex; align-items:center; gap:.9rem; flex-shrink:0; }
.drink-row .price{ font-family: var(--serif); font-size:1.05rem; color: var(--charcoal); font-weight:600; white-space:nowrap; }
@media (max-width: 560px){
  .drink-row{ flex-wrap:wrap; }
  .drink-row .row-actions{ width:100%; justify-content:space-between; padding-left:calc(52px + 1rem); }
}

/* ---------- Cart drawer ---------- */
.cart-overlay{ position:fixed; inset:0; background: rgba(20,15,13,.5); z-index:180; opacity:0; pointer-events:none; transition: opacity .25s ease; }
.cart-overlay.open{ opacity:1; pointer-events:all; }
.cart-drawer{
  position:fixed; top:0; right:0; bottom:0; width: min(400px, 92vw);
  background: var(--cream); z-index:190; box-shadow: -20px 0 40px rgba(0,0,0,.25);
  transform: translateX(100%); transition: transform .3s ease;
  display:flex; flex-direction:column;
}
.cart-drawer.open{ transform: translateX(0); }
.cart-drawer-head{ display:flex; align-items:center; justify-content:space-between; padding: 1.4rem 1.4rem 1rem; border-bottom: 1px solid rgba(28,26,23,.1); }
.cart-drawer-head button{ background:none; border:none; font-size:1.6rem; cursor:pointer; color: var(--charcoal); line-height:1; }
.cart-items{ flex:1; overflow-y:auto; padding: 1rem 1.4rem; }
.cart-row{ display:flex; align-items:center; gap:.8rem; padding: .8rem 0; border-bottom: 1px solid rgba(28,26,23,.07); }
.cart-row .info{ flex:1; }
.cart-row .info strong{ display:block; font-size:.92rem; }
.cart-row .info span{ font-size:.78rem; color: var(--muted); }
.qty-control{ display:flex; align-items:center; gap:.5rem; }
.qty-control button{ width:26px; height:26px; border-radius:50%; border:1px solid rgba(28,26,23,.2); background:#fff; cursor:pointer; }
.cart-empty{ text-align:center; padding: 3rem 1rem; color: var(--muted); }
.cart-footer{ padding: 1.2rem 1.4rem 1.6rem; border-top: 1px solid rgba(28,26,23,.1); }
.cart-total-row{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; font-family: var(--serif); font-size:1.2rem; }

/* ---------- Forms ---------- */
label{ display:block; font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color: var(--muted); margin-bottom:.4rem; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea{
  width:100%; padding:.8rem .9rem; border-radius:8px; border:1px solid rgba(28,26,23,.18);
  background:#fff; color: var(--ink); font-family: var(--sans); font-size:.92rem;
}
input[type="checkbox"], input[type="radio"]{ width:auto; flex-shrink:0; }
textarea{ resize:vertical; min-height:90px; }
input:focus, select:focus, textarea:focus{ outline:none; border-color: var(--terracotta); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1rem; }
.form-row.full{ grid-template-columns:1fr; }
.form-card{
  background:#fff; border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow); border:1px solid rgba(28,26,23,.06);
  /* Every .form-card that sits inside a .lightbox modal needs this — without
     it, a form taller than the viewport (a short window, a phone in
     landscape, a keyboard covering half the screen) just gets clipped by
     the fixed-position lightbox with no way to scroll to the rest of it. */
  max-height: 85vh;
  overflow-y: auto;
}
@media (max-width: 480px){
  .form-card{ padding: 1.4rem; max-height: 90vh; }
}
.order-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:2.5rem; align-items:start; }
.staff-order-grid{ display:grid; grid-template-columns: 1.2fr 1fr; gap:2.5rem; align-items:start; }
.item-browser{ max-height:560px; overflow-y:auto; padding-right:.4rem; }
.category-row{ display:flex; gap:.6rem; flex-wrap:wrap; }
.category-row select{ flex:1; min-width:140px; }
.category-row button{ flex-shrink:0; }
@media (max-width: 360px){
  .category-row button{ flex:1 1 100%; justify-content:center; }
}
.form-status{ min-height:1.2rem; font-size:.85rem; font-weight:600; margin:.8rem 0 0; }
.form-status.success{ color: var(--sage-dark); }
.form-status.error{ color: var(--danger); }
.radio-pill-group{ display:flex; gap:.6rem; flex-wrap:wrap; }
.radio-pill{ position:relative; }
.radio-pill input{ position:absolute; opacity:0; inset:0; width:100%; height:100%; cursor:pointer; margin:0; }
.radio-pill span{ display:inline-block; padding:.55rem 1.1rem; border-radius:999px; border:1px solid rgba(28,26,23,.2); font-size:.85rem; }
.radio-pill input:checked + span{ background: var(--charcoal); color: var(--cream); border-color: var(--charcoal); }

/* ---------- Gallery ---------- */
.gallery-grid{ display:grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 340px; gap:1rem; }
.gallery-item{ position:relative; border-radius:12px; overflow:hidden; cursor:pointer; }
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.gallery-item:hover img{ transform: scale(1.07); }
.gallery-item.big{ grid-column: span 2; grid-row: span 2; }
.gallery-empty{ text-align:center; padding: 4rem 1rem; color: var(--muted); background: var(--white); border-radius: var(--radius); border:1px dashed rgba(28,26,23,.2); }

.lightbox{ position:fixed; inset:0; background: rgba(15,11,9,.92); display:flex; align-items:center; justify-content:center; z-index:200; opacity:0; pointer-events:none; transition: opacity .3s ease; padding:2rem; }
@media (max-width: 480px){
  .lightbox{ padding: .9rem; }
}
.lightbox.active{ opacity:1; pointer-events:all; }
.lightbox img{ max-width:min(900px,92vw); max-height:85vh; border-radius:10px; box-shadow: 0 30px 70px rgba(0,0,0,.5); }
.lightbox-close{ position:absolute; top:1.6rem; right:2rem; color:var(--cream); font-size:2rem; background:none; border:none; cursor:pointer; }
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,.12); color:var(--cream); font-size:1.2rem;
  display:flex; align-items:center; justify-content:center;
  transition: background .15s ease;
}
.lightbox-nav:hover{ background:rgba(255,255,255,.25); }
.lightbox-prev{ left:1rem; }
.lightbox-next{ right:1rem; }
@media (max-width: 560px){
  .lightbox-nav{ width:40px; height:40px; font-size:1rem; }
  .lightbox-prev{ left:.4rem; }
  .lightbox-next{ right:.4rem; }
}

/* ---------- Order status / countdown ---------- */
.status-card{ background:#fff; border-radius: var(--radius); padding: 2.4rem; box-shadow: var(--shadow); text-align:center; max-width: 560px; margin-inline:auto; }
.status-badge{ display:inline-block; padding:.4rem 1rem; border-radius:999px; font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700; margin-bottom:1rem; }
.status-badge.awaiting-arrival{ background: rgba(201,160,106,.25); color: var(--brown); }
.status-badge.arrived{ background: rgba(124,136,99,.2); color: var(--sage-dark); }
.status-badge.cancelled{ background: rgba(177,69,47,.15); color: var(--danger); }
.status-badge.completed{ background: rgba(28,26,23,.1); color: var(--charcoal); }
.countdown{ font-family: var(--serif); font-size: 3rem; color: var(--charcoal); margin: 1rem 0; }
.countdown.urgent{ color: var(--danger); }
.order-number{ font-family: var(--serif); font-size: 1.5rem; letter-spacing:.04em; color: var(--terracotta-dark); }
.order-summary{ text-align:left; background: var(--cream-2); border-radius:10px; padding: 1.2rem 1.4rem; margin: 1.4rem 0; }
.order-summary .line{ display:flex; justify-content:space-between; font-size:.9rem; padding:.3rem 0; }

/* ---------- Staff dashboard ---------- */
.staff-lock{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding: 2rem;
  background-color: var(--charcoal);
  background-image: linear-gradient(180deg, rgba(20,15,13,.72), rgba(20,15,13,.88)), var(--staff-bg);
  background-size: cover;
  background-position: center;
}
.staff-lock .form-card{ box-shadow: 0 30px 70px -20px rgba(0,0,0,.6); }

.dashboard-header{
  color: var(--cream); padding: 2.5rem 0;
  background-color: var(--charcoal);
  background-image: linear-gradient(180deg, rgba(20,15,13,.78), rgba(20,15,13,.92)), var(--dash-bg);
  background-size: cover;
  background-position: center;
}
.staff-lock .form-card{ max-width: 360px; width:100%; }

.staff-panel{ background:#fff; border-radius: var(--radius); padding: 1.8rem; margin-bottom: 2rem; box-shadow: 0 14px 30px -22px rgba(28,26,23,.3); }
.staff-panel h3{ margin-bottom: 1rem; }
.stat-grid{ display:grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin-bottom: 1.6rem; }
.stat-tile{ background:#fff; border-radius:10px; padding:1.1rem; text-align:center; border:1px solid rgba(28,26,23,.08); }
.stat-tile .num{ font-family: var(--serif); font-size:1.7rem; color: var(--charcoal); }
.stat-tile .label{ font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color: var(--muted); margin-top:.2rem; }
a.stat-tile{ display:block; text-decoration:none; }
.stat-tile.selectable{ width:100%; font-family: inherit; cursor:pointer; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.stat-tile.selectable:hover{ transform: translateY(-2px); box-shadow: 0 12px 24px -14px rgba(28,26,23,.35); }
.stat-tile.selectable.active{ border-color: var(--charcoal); background: var(--charcoal); }
.stat-tile.selectable.active .num, .stat-tile.selectable.active .label{ color: var(--cream); }
@media (max-width: 760px){ .stat-grid{ grid-template-columns: repeat(2, 1fr); } }
.staff-row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem 0; border-bottom: 1px solid rgba(28,26,23,.06); font-size:.9rem; }
.staff-row:last-child{ border-bottom:none; }
.staff-row .meta{ color: var(--muted); font-size:.8rem; }
.tag{ font-size:.68rem; text-transform:uppercase; padding:.2rem .55rem; border-radius:999px; font-weight:700; }
.tag.special{ background: rgba(124,136,99,.2); color: var(--sage-dark); }
.tag.normal{ background: rgba(28,26,23,.08); color: var(--muted); }
.mini-form{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top: 1rem; }
.mini-form input, .mini-form select{ flex:1; min-width: 110px; }

.staff-gallery-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); gap:.8rem; }
.staff-gallery-item{ position:relative; border-radius:10px; overflow:hidden; aspect-ratio:1; background:var(--cream-2); }
.staff-gallery-item img{ width:100%; height:100%; object-fit:cover; display:block; }
.staff-gallery-item .remove-photo-btn{
  position:absolute; top:.4rem; right:.4rem; background:rgba(28,26,23,.7); color:#fff; border-color:transparent;
}
.staff-gallery-item .remove-photo-btn:hover{ background:var(--danger); }
.staff-gallery-cat{
  position:absolute; left:.4rem; bottom:.4rem; background:rgba(28,26,23,.7); color:#fff;
  font-size:.65rem; text-transform:uppercase; letter-spacing:.04em; padding:.2rem .5rem; border-radius:999px;
}

.icon-btn{
  width:30px; height:30px; border-radius:8px; padding:0; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(28,26,23,.2); background:#fff; color: var(--charcoal); cursor:pointer;
  transition: background .15s ease, transform .15s ease;
}
.icon-btn svg{ width:15px; height:15px; }
.icon-btn:hover{ background: rgba(28,26,23,.06); transform: translateY(-1px); }
.icon-btn.danger{ border-color: var(--danger); color: var(--danger); }
.icon-btn.danger:hover{ background: rgba(177,69,47,.08); }
.icon-btn.sage{ border-color: var(--sage-dark); color: var(--sage-dark); }
.icon-btn.sage:hover{ background: rgba(124,136,99,.1); }

.stock-grid{ display:flex; flex-direction:column; gap: .7rem; }
.stock-card{
  background:#fff; border-radius:10px; padding:.9rem 1rem; border:1px solid rgba(28,26,23,.08);
  display:flex; align-items:center; justify-content:space-between; gap:.8rem; flex-wrap:wrap; transition: background .2s ease, border-color .2s ease;
}
.stock-card.out-of-stock{ background: rgba(177,69,47,.06); border-color: rgba(177,69,47,.35); }
.stock-card .info strong{ display:block; font-size:.9rem; color: var(--charcoal); }
.stock-card .info span{ font-size:.78rem; color: var(--muted); }
.stock-card.out-of-stock .info span{ color: var(--danger); font-weight:600; }

.stock-switch{ position:relative; display:inline-block; width:40px; height:23px; flex-shrink:0; }
.stock-switch input{ opacity:0; width:0; height:0; position:absolute; }
.stock-switch .slider{ position:absolute; inset:0; background: rgba(28,26,23,.18); border-radius:999px; cursor:pointer; transition: background .2s ease; }
.stock-switch .slider::before{ content:""; position:absolute; height:17px; width:17px; left:3px; top:3px; background:#fff; border-radius:50%; transition: transform .2s ease; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.stock-switch input:checked + .slider{ background: var(--danger); }
.stock-switch input:checked + .slider::before{ transform: translateX(17px); }

.stock-summary{ display:grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; margin: 1.4rem 0 1.8rem; max-width: 420px; }
@media (max-width: 480px){
  .stock-summary{ gap: .6rem; max-width: none; }
  .stock-summary .stat-tile{ padding: .8rem; }
  .stock-summary .stat-tile .num{ font-size: 1.3rem; }
  .stock-summary .stat-tile .label{ font-size: .62rem; }
}

.manage-links{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.manage-link{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem;
  background:#fff; border-radius: var(--radius); padding: 1.6rem 1rem; text-align:center;
  border:1px solid rgba(28,26,23,.08); text-decoration:none; color: var(--charcoal);
  font-family: var(--serif); font-weight:600; font-size:1rem;
  transition: transform .15s ease, box-shadow .15s ease;
}
.manage-link:hover{ transform: translateY(-2px); box-shadow: 0 12px 24px -14px rgba(28,26,23,.35); }
.manage-link .icon{ font-size:1.8rem; }
@media (max-width: 760px){ .manage-links{ grid-template-columns: repeat(2, 1fr); } }

/* ---------- QR generator / print flyers ---------- */
.qr-flyer{ background:#fff; border: 2px dashed rgba(28,26,23,.25); border-radius: 12px; padding: 1.4rem; text-align:center; }
.qr-flyer .qr-canvas-holder{ display:flex; justify-content:center; margin: 0 auto .8rem; }
.qr-flyer .flyer-title{ font-family: var(--serif); font-size:1.1rem; }
.qr-flyer .flyer-sub{ font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; color: var(--muted); margin-bottom:.6rem; }

@media print{
  body *{ visibility: hidden; }
  .print-area, .print-area *{ visibility: visible; }
  .print-area{ position:absolute; top:0; left:0; width:100%; }
}

/* ---------- Receipt ---------- */
.receipt-card{
  max-width: 380px; margin: 0 auto; background:#fff; border-radius: var(--radius);
  padding: 2rem; box-shadow: var(--shadow); border: 1px solid rgba(28,26,23,.06);
}
.receipt-card .r-logo{ width:52px; border-radius:8px; margin:0 auto .8rem; display:block; }
.receipt-header{ text-align:center; margin-bottom:1rem; }
.receipt-header .r-tagline{ font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color: var(--muted); }
.receipt-header .r-address{ font-size:.8rem; color: var(--muted); margin-top:.2rem; }
.receipt-divider{ border-top: 1px dashed rgba(28,26,23,.3); margin: 1rem 0; }
.receipt-meta{ font-size:.85rem; color: var(--muted); }
.receipt-meta .line{ display:flex; justify-content:space-between; padding:.15rem 0; }
.receipt-line{ display:flex; justify-content:space-between; font-size:.9rem; padding:.25rem 0; }
.receipt-total{ display:flex; justify-content:space-between; font-family: var(--serif); font-size:1.25rem; font-weight:700; color: var(--charcoal); padding-top:.4rem; }
.receipt-footer{ text-align:center; font-size:.8rem; color: var(--muted); margin-top:1.2rem; }
.receipt-actions{ display:flex; flex-direction:column; gap:.7rem; margin-top:1.8rem; max-width:380px; margin-inline:auto; }

/* Sized for an 80mm thermal receipt printer (the common size for small
   till/receipt printers). If yours uses 58mm paper instead, change the
   .receipt-card width below to 48mm (and see the matching @page rule
   inline in receipt.html, which can't be scoped from this shared file).
   The .receipt-card width IS scoped to body.receipt-page (receipt.html
   only) so printing any other page on the site is unaffected. */
@media print{
  .no-print{ display:none !important; }
  body.receipt-page{ margin:0; padding:0 !important; background:#fff !important; }
  body.receipt-page .receipt-card{
    box-shadow:none; border:none; padding:0; font-family: 'Courier New', monospace;
    width:72mm; max-width:72mm; margin:0 auto; font-size:11px;
  }
  body.receipt-page .receipt-card .r-logo{ width:34px; }
  body.receipt-page .receipt-card .price, body.receipt-page .receipt-total{ font-family: 'Courier New', monospace; }
}

/* ---------- Footer ---------- */
footer{ background: var(--charcoal-2); color: rgba(246,242,234,.6); padding: 2.6rem 0; }
.footer-grid{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
.footer-brand{ display:flex; align-items:center; gap:.6rem; color: var(--cream); font-family: var(--serif); font-size:1.05rem; }
.footer-links{ display:flex; gap:1.5rem; flex-wrap:wrap; }
.footer-links a{ font-size:.85rem; color: rgba(246,242,234,.65); }
.footer-links a:hover{ color: var(--camel); }
footer .fine{ font-size:.76rem; margin-top:1.4rem; text-align:center; color: rgba(246,242,234,.4); }

.back-to-top{
  position:fixed; bottom:1.8rem; right:1.8rem; width:46px; height:46px; border-radius:50%;
  background: var(--terracotta); color:#fff; border:none; display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow: 0 12px 25px -10px rgba(0,0,0,.5);
  opacity:0; pointer-events:none; transform: translateY(10px); transition: all .3s ease; z-index:90;
}
.back-to-top.show{ opacity:1; pointer-events:all; transform: translateY(0); }

.reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible{ opacity:1; transform: translateY(0); }

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .about-grid{ grid-template-columns:1fr; }
  .item-grid{ grid-template-columns: repeat(2,1fr); }
  .gallery-grid{ grid-template-columns: repeat(2,1fr); grid-auto-rows: 280px; }
  .gallery-item.big{ grid-column:span 2; grid-row:span 1; }
}
@media (max-width: 760px){
  .nav-links{ display:none; }
  .nav.open .nav-links{
    display:flex; flex-direction:column; position:absolute; top:100%; left:0; right:0;
    background: var(--charcoal); padding: 1.5rem 6%; gap: 1rem;
  }
  .nav-toggle{ display:flex; }
  section{ padding: 3.5rem 0; }
  .item-grid{ grid-template-columns: 1fr; }
  .form-row{ grid-template-columns:1fr; }
  .info-list{ grid-template-columns: 1fr; }
  .gallery-grid{ grid-template-columns: 1fr; }
  .gallery-item.big{ grid-column: span 1; }
  .order-grid{ grid-template-columns: 1fr; }
  .staff-order-grid{ grid-template-columns: 1fr; }
  .item-browser{ max-height:340px; }
}

/* ---------- Loading indicator ---------- */
/* Created and toggled by store.js's api() helper, so it applies to every
   page automatically with no per-page markup. left/top are set inline by
   store.js on each show, positioned at the cursor (or last tap). */
#claypotSpinner{
  position: fixed; top: 0; left: 0; width: 22px; height: 22px;
  z-index: 9999; pointer-events: none;
  border: 3px solid rgba(37,99,235,.25);
  border-top-color: #2563eb;
  border-radius: 50%;
  opacity: 0;
  transition: opacity .15s ease;
}
#claypotSpinner.active{
  opacity: 1;
  animation: claypot-spin .7s linear infinite;
}
@keyframes claypot-spin{
  to{ transform: rotate(360deg); }
}