/* ============ King Corona Cigar Lounge - storefront ============ */
:root {
  /* burgundy and cream department-store palette */
  --bg: #f5efe2;
  --bg-warm: #ede4d0;
  --panel: #ffffff;
  --ink: #2e1418;
  --muted: #75604f;
  --line: #d9cbb2;
  --line-soft: #e7ddc9;
  --green: #641c28;        /* primary burgundy (kept var names so nothing breaks) */
  --green-dark: #4b1420;
  --green-deep: #390e17;
  --gold: #d9a53f;
  --gold-deep: #c08a2c;
  --gold-pale: #f0e2c3;
  --sale: #8d1f2d;
  --font-serif: Georgia, "Times New Roman", Times, serif;
  --font-sans: Arial, "Helvetica Neue", Helvetica, "Segoe UI", sans-serif;
  --maxw: 1280px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  font-size: 15px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 16px; }
h1, h2, h3, .serif { font-family: var(--font-serif); font-weight: 700; line-height: 1.15; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 16px; width: 100%; }
@media (min-width: 768px) { .wrap { padding: 0 24px; } }

.ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -4px; }

/* ---------- buttons: rectangular, retail ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px; border-radius: 2px; border: 1px solid transparent;
  font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.btn-gold { background: var(--gold); color: var(--green-deep); border-color: var(--gold); }
.btn-gold::after { content: " →"; }
.btn-gold:hover { background: #e4b453; border-color: #e4b453; }
.btn-dark { background: var(--green); color: #f5ead2; border-color: var(--green); }
.btn-dark:hover { background: var(--green-dark); }
.btn-outline { background: transparent; border: 1px solid var(--green); color: var(--green); }
.btn-outline:hover { background: var(--green); color: #f5ead2; }
.btn-lg { padding: 15px 32px; font-size: 14px; }
.btn-sm { padding: 8px 14px; font-size: 12px; }
.btn[disabled] { opacity: .5; pointer-events: none; }

/* ---------- utility bar ---------- */
.announce {
  background: var(--green); color: #f0e4cd;
  font-size: 11.5px; letter-spacing: .1em; padding: 8px 0; font-weight: 700; text-transform: uppercase;
}
.announce .u-in { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 24px; }
.announce b { color: var(--gold); font-weight: 700; }
.announce .u-mid { color: #d8c3a8; }
.announce .u-right { margin-left: auto; color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.announce .u-right:hover { color: var(--gold); }
@media (max-width: 767px) { .announce .u-mid, .announce .u-right { display: none; } .announce .u-in { justify-content: center; } }

/* ---------- header ---------- */
header.site { background: #fff; position: sticky; top: 0; z-index: 90; }
.head-main { display: flex; align-items: center; gap: 20px; padding: 14px 0; }
.logo img { height: 48px; width: auto; }
@media (min-width: 768px) { .logo img { height: 60px; } }
.wordmark { text-align: center; line-height: 1; color: var(--green); flex-shrink: 0; }
.wordmark .wm-logo { display: block; height: 60px; width: auto; margin: 0 auto; }
.wordmark .wm-sub { display: block; font-size: 8.5px; letter-spacing: .34em; color: var(--muted); font-weight: 700; margin-top: 4px; text-transform: uppercase; }
@media (max-width: 480px) { .wordmark .wm-logo { height: 44px; } .wordmark .wm-sub { letter-spacing: .2em; } }
.icon-2line { display: flex; align-items: center; gap: 8px; color: var(--ink); position: relative; padding: 4px 6px; }
.icon-2line .ico { width: 22px; height: 22px; color: var(--green); }
.icon-2line .t { line-height: 1.2; }
.icon-2line .t small { display: block; font-size: 10.5px; color: var(--muted); font-weight: 400; }
.icon-2line .t b { font-size: 13px; }
.icon-2line:hover .ico { color: var(--gold-deep); }
@media (max-width: 640px) {
  .icon-2line .t { display: none; }
  .icon-2line { padding: 11px; } /* icon-only: pad the 22px icon out to a 44px tap target */
  .head-main { gap: 10px; }
}
/* With the search bar hidden below 900px there is no flexible middle, so the
   row packs left and the logo hangs off-center. Pin the wordmark to the true
   center of the header; burger stays left, icons stay right. */
@media (max-width: 899px) {
  .head-main { position: relative; justify-content: space-between; }
  .wordmark { position: absolute; left: 50%; transform: translateX(-50%); }
}
.head-search { flex: 1; position: relative; display: none; }
@media (min-width: 900px) { .head-search { display: block; max-width: 520px; margin: 0 auto; } }
.head-search input, .m-search input {
  width: 100%; padding: 10px 44px 10px 12px; border-radius: 2px;
  border: 1px solid #b9ae97; background: #fff; outline: none;
}
.head-search input:focus, .m-search input:focus { border-color: var(--green); }
.search-btn {
  position: absolute; right: 0; top: 0; bottom: 0; width: 42px;
  background: var(--green); border: 0; color: #fff; border-radius: 0 2px 2px 0;
  display: flex; align-items: center; justify-content: center;
}
.search-btn:hover { background: var(--green-dark); }
.head-icons { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.icon-btn {
  position: relative; background: none; border: 0; color: var(--ink);
  padding: 9px; line-height: 1; display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.icon-btn .ico { width: 22px; height: 22px; }
.icon-btn:hover { color: var(--green); }
.cart-count {
  position: absolute; top: 1px; right: 2px;
  background: var(--sale); color: #fff; font-size: 10.5px; font-weight: 700;
  min-width: 17px; height: 17px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
}
.burger { display: inline-flex; }
@media (min-width: 900px) { .burger { display: none; } }

nav.main-nav { display: none; background: var(--green-deep); border-bottom: 3px solid var(--gold); }
@media (min-width: 900px) { nav.main-nav { display: block; } }
nav.main-nav .wrap { display: flex; align-items: stretch; }
nav.main-nav ul { display: flex; list-style: none; flex: 1; }
nav.main-nav a.top {
  display: flex; align-items: center; gap: 5px; padding: 14px 16px; font-weight: 700; font-size: 12.5px;
  letter-spacing: .08em; text-transform: uppercase; color: #f2e7d2; height: 100%;
}
nav.main-nav a.top:hover { background: var(--green-dark); color: #fff; }
nav.main-nav a.top.active { color: var(--gold); }
nav.main-nav a.top.block-gold { background: var(--gold); color: var(--green-deep); padding: 14px 20px; }
nav.main-nav a.top.block-gold:hover { background: #e4b453; color: var(--green-deep); }
nav.main-nav .nav-caret { font-size: 9px; opacity: .7; }
nav.main-nav li { position: relative; }
nav.main-nav li.push { margin-left: auto; }

/* mega dropdowns */
.mega-panel {
  position: absolute; top: 100%; left: 0; z-index: 130;
  background: #fff; border: 1px solid var(--line); border-top: 0;
  box-shadow: 0 14px 30px rgba(46, 20, 24, .18);
  display: none; padding: 22px 24px; gap: 30px; min-width: 560px;
}
li.mega:hover .mega-panel, li.mega:focus-within .mega-panel { display: flex; }
li.mega.right .mega-panel { left: auto; right: 0; }
.mega-col { min-width: 150px; }
.mega-col h5 {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--green);
  border-bottom: 2px solid var(--green); padding-bottom: 7px; margin-bottom: 10px; font-family: var(--font-sans);
}
.mega-col a { display: block; padding: 5px 0; font-size: 14.5px; color: var(--ink); }
.mega-col a:hover { color: var(--sale); text-decoration: underline; text-underline-offset: 3px; }
.mega-col a b { font-family: var(--font-serif); font-size: 15.5px; color: var(--green); }
.mega-col a small { display: block; font-size: 11.5px; color: var(--muted); }
.mega-promo {
  background: var(--green); color: #f2e7d2; padding: 20px; width: 220px; flex-shrink: 0;
  display: flex; flex-direction: column; justify-content: center;
}
.mega-promo .k { color: var(--gold); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; }
.mega-promo .t { font-family: var(--font-serif); font-size: 21px; margin: 6px 0 4px; color: #fff; }
.mega-promo .d { font-size: 12.5px; color: #d8c3a8; margin-bottom: 10px; }
.mega-promo .g { color: var(--gold); font-weight: 700; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; }
.mega-grid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line-soft); min-width: 320px; }
.mega-grid a {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 12px 16px; border-bottom: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft);
  font-family: var(--font-serif); font-weight: 700; font-size: 15.5px; color: var(--ink);
}
.mega-grid a::after { content: "→"; color: var(--green); font-family: var(--font-sans); }
.mega-grid a:hover { background: var(--bg); color: var(--sale); }

/* mobile drawer */
.drawer-bg { position: fixed; inset: 0; background: rgba(18, 26, 20, .55); z-index: 120; opacity: 0; pointer-events: none; transition: opacity .2s; }
.drawer-bg.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; left: 0; bottom: 0; width: min(320px, 86vw);
  background: #fff; z-index: 121; transform: translateX(-102%);
  transition: transform .22s ease; display: flex; flex-direction: column; overflow-y: auto;
  border-right: 1px solid var(--line);
}
.drawer.open { transform: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line-soft); }
.drawer-head img { height: 44px; }
.m-search { padding: 12px 16px; position: relative; }
.m-search .search-btn { right: 16px; top: 12px; bottom: 12px; }
.drawer nav a { display: block; padding: 13px 20px; font-weight: 700; font-size: 14px; letter-spacing: .03em; text-transform: uppercase; border-bottom: 1px solid var(--line-soft); }
.drawer nav a:active { background: var(--bg-warm); }
.drawer .sub { padding-left: 32px; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--muted); }
/* drawer accordion groups: one thumb-sized bar, brands/sizes tucked inside */
.drawer .m-group {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  background: none; border: 0; border-bottom: 1px solid var(--line-soft); text-align: left;
  padding: 13px 20px; font-weight: 700; font-size: 14px; letter-spacing: .03em;
  text-transform: uppercase; color: var(--ink);
}
.drawer .m-group:active { background: var(--bg-warm); }
.drawer .m-group .chev { color: var(--gold-deep); transition: transform .18s ease; }
.drawer .m-group.open .chev { transform: rotate(180deg); }
.drawer .m-sub { display: none; background: var(--bg-warm); }
.drawer .m-sub.open { display: block; }
.drawer .m-sub a { border-bottom-color: var(--line); }
.drawer nav .nav-soon { border-bottom: 1px solid var(--line-soft); font-size: 14px; letter-spacing: .03em; text-transform: uppercase; }

.drawer-foot { margin-top: auto; padding: 16px 20px; font-size: 13px; color: var(--muted); background: var(--bg-warm); }

/* ---------- page band (interior page headers) ---------- */
.hero { background: var(--bg-warm); border-bottom: 1px solid var(--line); }
.kicker {
  display: inline-block; color: var(--gold-deep); font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; font-size: 11.5px; margin-bottom: 10px;
}
p.lead { font-size: 16px; color: var(--muted); }

/* ---------- home promo grid ----------
   Three beats, per Ivan's sketch: the hero flyer full width, the two house-line
   tiles side by side (at every width, phones included), then 1902 full width. */
.promo-grid { display: grid; gap: 12px; padding: 22px 0; }
@media (min-width: 900px) { .promo-grid { gap: 14px; padding: 28px 0; } }
/* The hero IS Ivan's Ybor City painting - the full artwork, borderless, at
   every size. It carries its own "Cigar Capital of the World" lettering, so
   no copy sits on it; the whole painting clicks through to the shop. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.promo-main { display: block; padding: 0; background: var(--green-deep); overflow: hidden; }
.promo-main .hero-strip { display: block; width: 100%; height: auto; }
/* phones: give the painting more height by trimming a sliver off each side -
   the baked-in lettering sits well inside the kept region */
@media (max-width: 639px) {
  .promo-main .hero-strip { aspect-ratio: 1.9 / 1; object-fit: cover; object-position: center; }
}
/* the nav's coming-soon entries: visible, not clickable */
.nav-soon { cursor: default; color: #c9b490; }
nav.main-nav .nav-soon { display: flex; align-items: center; gap: 6px; padding: 14px 16px; font-weight: 700; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; }
.nav-soon em { font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(217, 165, 63, .5); padding: 2px 6px; border-radius: 2px; }
.drawer .nav-soon { display: flex; align-items: center; gap: 8px; padding: 13px 18px; color: var(--muted); font-weight: 700; }
.promo-main .kicker { color: var(--gold); }
.promo-main h1 { font-size: clamp(34px, 4.8vw, 54px); margin-bottom: 12px; letter-spacing: .01em; }
.promo-main h1 em { font-style: italic; color: var(--gold); font-weight: 600; }
.promo-main p { max-width: 52ch; color: #e2d3bc; margin-bottom: 22px; font-size: 15.5px; }
.promo-main .txtlink { color: #fff; font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; margin-left: 16px; }
.promo-main .txtlink:hover { color: var(--gold); }
.promo-main .cta-row { display: flex; gap: 10px; flex-wrap: wrap; position: relative; z-index: 1; }
/* the matched pair: equal heights come free from the grid stretch */
.promo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 900px) { .promo-pair { gap: 14px; } }
.promo-tile {
  border: 1px solid var(--line); background: var(--bg-warm); display: flex; align-items: center; gap: 14px; padding: 20px 22px;
}
.promo-tile:hover { border-color: var(--gold-deep); }
.promo-tile img { width: 120px; height: 120px; object-fit: contain; flex-shrink: 0; mix-blend-mode: multiply; }
.promo-tile .k { display: block; color: var(--gold-deep); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; margin-bottom: 6px; }
.promo-tile .t { font-family: var(--font-serif); font-size: 24px; font-weight: 700; color: var(--green); line-height: 1.1; }
.promo-tile .d { font-size: 13px; color: var(--muted); margin: 6px 0 10px; }
.promo-tile .go { color: var(--sale); font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; }
.promo-tile.dark { background: var(--green-dark); border-color: var(--green-dark); position: relative; }
.promo-tile.dark .k { color: var(--gold); }
.promo-tile.dark .t { color: #fff; font-size: 27px; }
.promo-tile.dark .d { color: #d8c3a8; }
.promo-tile.dark .go { color: var(--gold); }
/* Kalasho Reserve - the jewel tile: full-bleed box shot under a burgundy scrim */
.promo-tile.exclusive {
  position: relative; overflow: hidden; min-height: 185px; padding: 22px 24px;
  background: var(--green-deep); border-color: var(--gold-deep);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.promo-tile.exclusive .ph {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 45%; mix-blend-mode: normal;
  transition: transform .6s ease;
}
.promo-tile.exclusive .shade {
  position: absolute; inset: 0;
  background: linear-gradient(92deg, rgba(30, 7, 11, .95) 0%, rgba(38, 10, 15, .86) 44%, rgba(48, 14, 20, .45) 72%, rgba(48, 14, 20, .12) 100%);
}
/* inset gold hairline, the same frame the hero wears */
.promo-tile.exclusive::after {
  content: ""; position: absolute; inset: 8px;
  border: 1px solid rgba(217, 165, 63, .55); pointer-events: none;
}
.promo-tile.exclusive .inner {
  position: relative; flex: 1; max-width: 34ch;
  display: flex; flex-direction: column; justify-content: center;
}
.promo-tile.exclusive .k { color: var(--gold); }
.promo-tile.exclusive .t { color: #fdf6e8; font-size: 27px; text-shadow: 0 1px 10px rgba(20, 5, 8, .55); }
.promo-tile.exclusive .t em { font-style: italic; color: var(--gold); font-weight: 600; }
.promo-tile.exclusive .d { color: #e8d6bd; text-shadow: 0 1px 8px rgba(20, 5, 8, .6); }
.promo-tile.exclusive .go { color: var(--gold); }
.promo-tile.exclusive:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(46, 20, 24, .35); }
.promo-tile.exclusive:hover .ph { transform: scale(1.05); }
.promo-tile.exclusive:hover .go { color: #e4b453; }
/* La Flor de Dulzura - the light half of the pair: warm cream panel, the golden
   cedar box large on the floor of the tile (white shot melts in via multiply),
   burgundy and gold type, and the same inset gold hairline as its dark twin */
.promo-tile.lfd {
  position: relative; overflow: hidden;
  flex-direction: column; align-items: stretch; gap: 0;
  padding: 18px 16px 0;
  background: linear-gradient(168deg, #fdf9ee 0%, #f4ead3 55%, #ecdfc0 100%);
  border-color: var(--gold-deep);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.promo-tile.lfd::after {
  content: ""; position: absolute; inset: 8px;
  border: 1px solid rgba(192, 138, 44, .5); pointer-events: none;
}
.promo-tile.lfd .inner { position: relative; z-index: 1; display: flex; flex-direction: column; }
.promo-tile.lfd .k { color: var(--gold-deep); }
.promo-tile.lfd .t { color: var(--green-deep); }
.promo-tile.lfd .d { color: var(--muted); }
.promo-tile.lfd .go { color: var(--sale); }
.promo-tile.lfd .ph {
  width: min(88%, 250px); height: auto; align-self: center;
  /* the shot carries built-in white margin: tuck it past the frame so the
     box reads as seated on the tile floor */
  margin: auto 0 -10px; mix-blend-mode: multiply; transition: transform .6s ease;
}
.promo-tile.lfd:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(46, 20, 24, .22); }
.promo-tile.lfd:hover .ph { transform: scale(1.04); }
.promo-tile.lfd:hover .go { color: var(--green); }
@media (min-width: 640px) {
  /* wide tile: copy on the left, box seated on the tile floor to the right */
  .promo-tile.lfd { flex-direction: row; align-items: center; padding: 22px 4px 0 24px; }
  .promo-tile.lfd .inner { flex: 1; justify-content: center; padding-bottom: 22px; max-width: 34ch; }
  .promo-tile.lfd .ph { align-self: flex-end; width: min(46%, 300px); margin: 0 0 -18px; }
}

/* pair-scoped type: sized to look expensive at ~half a phone screen.
   Placed after both tile blocks so these win the specificity tie. */
.promo-pair .promo-tile { min-height: 196px; }
.promo-pair .promo-tile .k { font-size: 9.5px; letter-spacing: .14em; margin-bottom: 5px; }
.promo-pair .promo-tile .t { font-size: clamp(19px, 3.4vw, 27px); line-height: 1.1; }
.promo-pair .promo-tile .d { font-size: 12px; line-height: 1.45; margin: 5px 0 9px; }
.promo-pair .promo-tile .go { font-size: 10.5px; letter-spacing: .08em; }
@media (min-width: 640px) {
  .promo-pair .promo-tile { min-height: 280px; }
  .promo-pair .promo-tile .k { font-size: 10.5px; letter-spacing: .16em; margin-bottom: 6px; }
  .promo-pair .promo-tile .d { font-size: 13px; margin: 6px 0 10px; }
  .promo-pair .promo-tile .go { font-size: 11.5px; letter-spacing: .1em; }
}
@media (max-width: 639px) {
  /* narrow tall tiles: both tiles anchor their copy to the top, product below */
  .promo-pair .promo-tile.exclusive { padding: 18px 16px; }
  .promo-pair .promo-tile .inner { justify-content: flex-start; }
  /* the side-lit scrim goes vertical so type stays readable on a narrow crop */
  .promo-pair .promo-tile.exclusive .shade {
    background: linear-gradient(180deg, rgba(30, 7, 11, .9) 0%, rgba(38, 10, 15, .68) 52%, rgba(48, 14, 20, .22) 100%);
  }
  .promo-pair .promo-tile.exclusive .ph { object-position: center; }
}
@media (max-width: 479px) {
  /* the smallest screens: drop the kicker, keep the title generous */
  .promo-pair .promo-tile .k { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .promo-tile.exclusive, .promo-tile.exclusive .ph,
  .promo-tile.lfd, .promo-tile.lfd .ph { transition: none; }
  .promo-tile.exclusive:hover, .promo-tile.lfd:hover { transform: none; }
  .promo-tile.exclusive:hover .ph, .promo-tile.lfd:hover .ph { transform: none; }
}
.trust-bar { border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); background: #fff; }
.trust-bar .in { display: grid; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 860px) { .trust-bar .in { grid-template-columns: repeat(4, 1fr); } }
.trust-bar .cell {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 18px 14px; background: #fff;
}
/* hairline separators only between columns, never a leading edge */
.trust-bar .cell + .cell { box-shadow: inset 1px 0 0 var(--line-soft); }
@media (max-width: 859px) {
  .trust-bar .cell { padding: 15px 10px; gap: 10px; }
  .trust-bar .cell:nth-child(odd) { box-shadow: none; }
  .trust-bar .cell:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
}
/* icon: a solid gold-wash badge, not a hairline ring */
.trust-bar .tb-ico {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: var(--gold-pale); color: var(--green);
  display: flex; align-items: center; justify-content: center;
}
.trust-bar .tb-ico .ico { width: 19px; height: 19px; }
/* text block: one left-aligned unit, the icon+text pair centered together */
.trust-bar .cell .tb-txt {
  display: block; text-align: left; line-height: 1.3;
  font-family: var(--font-serif); font-size: 14.5px; font-weight: 700; color: var(--green);
}
.trust-bar .cell .tb-txt span {
  display: block; margin-top: 3px;
  font-family: var(--font-sans); font-size: 11.5px; font-weight: 400;
  letter-spacing: .02em; color: var(--muted);
}
@media (max-width: 420px) {
  .trust-bar .tb-ico { width: 32px; height: 32px; }
  .trust-bar .tb-ico .ico { width: 16px; height: 16px; }
  .trust-bar .cell .tb-txt { font-size: 13px; }
  .trust-bar .cell .tb-txt span { font-size: 10.5px; }
}

/* ---------- sections ---------- */
section.block { padding: 34px 0; }
@media (min-width: 768px) { section.block { padding: 48px 0; } }
.sec-head { margin-bottom: 22px; text-align: center; }
.sec-head .over { color: var(--gold-deep); text-transform: uppercase; letter-spacing: .16em; font-size: 11.5px; font-weight: 700; }
.sec-head h2 { font-size: clamp(24px, 3.4vw, 32px); margin-top: 4px; }
.sec-head h2::after { content: ""; display: block; width: 54px; height: 3px; background: var(--gold); margin: 12px auto 0; }
.sec-head p { color: var(--muted); max-width: 64ch; margin: 12px auto 0; }
.sec-head.left { text-align: left; }
.sec-head.left h2::after { margin-left: 0; }
.sec-head.left p { margin-left: 0; }
.alt { background: var(--bg-warm); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }

/* ---------- product cards ---------- */
.grid { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (min-width: 1020px) { .grid { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: 2px;
  display: flex; flex-direction: column; position: relative;
  transition: box-shadow .12s ease, border-color .12s ease;
}
.card:hover { border-color: #b9ae97; box-shadow: 0 3px 12px rgba(60, 50, 30, .12); }
.card .imgbox { background: #fff; padding: 12px; height: 150px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--line-soft); }
@media (min-width: 700px) { .card .imgbox { height: 175px; } }
.card .imgbox img { max-height: 100%; object-fit: contain; }
.card .meta { padding: 10px 12px 14px; display: flex; flex-direction: column; flex: 1; }
.card .brand { font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); font-weight: 700; }
.card .name { font-family: var(--font-serif); font-size: 16px; font-weight: 700; margin: 2px 0 3px; }
.card .sub { font-size: 12.5px; color: var(--muted); }
.card .price-row { margin-top: auto; padding-top: 9px; display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.card .msrp { font-size: 12.5px; color: var(--muted); text-decoration: line-through; }
.card .price { font-size: 17.5px; font-weight: 800; color: var(--ink); }
.card .price.on-sale { color: var(--sale); }
.card .from { font-size: 11.5px; color: var(--muted); width: 100%; }
.badge {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  background: var(--sale); color: #fff; font-size: 10.5px; font-weight: 700;
  padding: 3px 8px; border-radius: 2px; letter-spacing: .06em; text-transform: uppercase;
}
.badge.gold { background: var(--gold-deep); }
.badge.green { background: var(--green); }
.badge.save { position: static; display: inline-block; margin-left: 2px; }

/* brand tiles */
.tiles { display: grid; gap: 14px; }
@media (min-width: 700px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
.tile { background: #fff; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; transition: border-color .12s, box-shadow .12s; display: block; }
.tile:hover { border-color: #b9ae97; box-shadow: 0 3px 12px rgba(60, 50, 30, .12); }
.tile img.bg { width: 100%; height: 150px; object-fit: contain; padding: 14px; mix-blend-mode: multiply; background: #fff; }
.tile .t-meta { border-top: 1px solid var(--line-soft); padding: 14px 16px 16px; background: var(--bg-warm); }
.tile h3 { font-size: 19px; }
.tile p { font-size: 13px; color: var(--muted); margin: 4px 0 8px; }
.tile .go { color: var(--sale); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }

/* shop-by chips: plain bordered boxes */
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.chip {
  background: #fff; border: 1px solid var(--line); border-radius: 2px;
  padding: 10px 20px; font-weight: 700; font-size: 13.5px; color: var(--ink); text-align: center;
}
.chip:hover { border-color: var(--green); color: var(--green); }
.chip small { display: block; font-weight: 400; font-size: 11.5px; color: var(--muted); }

/* ---------- shop page ---------- */
.shop-layout { display: grid; gap: 22px; padding: 22px 0 56px; }
@media (min-width: 960px) { .shop-layout { grid-template-columns: 240px 1fr; } }
/* the one obvious way into filtering on a phone: solid gold, thumb-sized,
   and it wears a count badge whenever filters are active */
.filters-toggle {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px;
  background: var(--gold); border-color: var(--gold); color: var(--green-deep);
}
.filters-toggle .fc-n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; border-radius: 2px; padding: 0 5px;
  background: var(--green-deep); color: #fff; font-size: 11px;
}
@media (min-width: 960px) { .filters-toggle { display: none; } }
aside.filters {
  background: #fff; border: 1px solid var(--line); border-radius: 2px;
  padding: 16px; height: fit-content;
}
@media (max-width: 959px) {
  aside.filters {
    position: fixed; inset: 0; z-index: 130; border: 0; overflow-y: auto;
    /* undo the desktop height:fit-content - a fixed panel as tall as its own
       content never scrolls, so inset:0 must govern the height here */
    height: auto; padding-bottom: 96px;
    transform: translateX(-102%); transition: transform .22s; display: block;
  }
  aside.filters.open { transform: none; }
}
.f-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.f-head h3 { font-size: 18px; }
.f-close { background: none; border: 0; font-size: 24px; color: var(--muted); display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; }
@media (min-width: 960px) { .f-close { display: none; } }
.f-group { border-top: 1px solid var(--line-soft); padding: 12px 0; }
.f-group h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .09em; color: var(--ink); margin-bottom: 8px; }
.f-group label { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 3px 0; cursor: pointer; color: var(--muted); }
.f-group label:hover { color: var(--ink); }
.f-group input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--green); }
.f-group .f-scroll { max-height: 225px; overflow-y: auto; padding-right: 6px; }
.shop-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.shop-top h1 { font-size: clamp(22px, 3.4vw, 30px); margin-right: auto; }
.shop-top select {
  padding: 9px 12px; border-radius: 2px; border: 1px solid var(--line);
  background: #fff; font-weight: 700; font-size: 13px; outline: none;
}
/* under 16px iOS Safari zooms the page in on focus and leaves it there */
@media (max-width: 959px) { .shop-top select { font-size: 16px; } }
.result-count { color: var(--muted); font-size: 13px; width: 100%; }
.empty-msg { text-align: center; padding: 56px 20px; color: var(--muted); }
.empty-msg h3 { color: var(--ink); }

/* ---------- product page ---------- */
.pdp { display: grid; gap: 26px; padding: 26px 0 60px; }
@media (min-width: 900px) { .pdp { grid-template-columns: 1fr 1fr; gap: 40px; padding: 36px 0 70px; } }
.pdp-img {
  background: #fff; border: 1px solid var(--line); border-radius: 2px;
  padding: 24px; display: flex; align-items: center;
  justify-content: center; min-height: 300px; position: sticky; top: 130px;
}
@media (max-width: 899px) { .pdp-img { position: static; min-height: 210px; } }
.pdp-img img { max-height: 360px; object-fit: contain; }
.pdp-info .brand { color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 12px; }
.pdp-info h1 { font-size: clamp(26px, 4vw, 36px); margin: 4px 0 10px; }
.pdp-info .desc { color: var(--muted); font-size: 15px; margin-bottom: 16px; }
.pdp-price-box { border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); padding: 12px 0; margin: 6px 0 4px; }
.pdp-price { font-size: 28px; font-weight: 800; }
.pdp-price .msrp { font-size: 15px; color: var(--muted); text-decoration: line-through; font-weight: 400; margin-right: 8px; }
.pdp-price.on-sale { color: var(--sale); }
.pdp-price small { font-size: 13px; color: var(--muted); font-weight: 400; }
.per-stick { color: var(--green); font-weight: 700; font-size: 13px; margin-top: 3px; }
.opt-label { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; margin: 15px 0 7px; color: var(--ink); }
.opt-row { display: flex; flex-wrap: wrap; gap: 7px; }
.opt {
  border: 1px solid var(--line); background: #fff; border-radius: 2px;
  padding: 8px 14px; font-weight: 700; font-size: 13.5px; transition: all .1s; color: var(--ink);
  min-height: 46px; /* a chip with no sub-line must still be thumb-sized */
}
.opt small { display: block; font-weight: 400; font-size: 11.5px; color: var(--muted); }
.opt.sel { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); background: var(--green); color: #f5ead2; }
.opt.sel small { color: #dfc7ad; }
.qty-row { display: flex; align-items: center; gap: 12px; margin: 18px 0; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; background: #fff; }
.qty button { width: 40px; height: 42px; border: 0; background: #fff; font-size: 18px; color: var(--ink); }
.qty button:hover { background: var(--bg-warm); }
.qty input { width: 46px; text-align: center; border: 0; border-left: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft); font-weight: 700; font-size: 15px; outline: none; height: 42px; }
.pdp-add { display: flex; gap: 10px; flex-wrap: wrap; }
.pdp-add .btn { flex: 1; min-width: 190px; }
.spec { margin-top: 26px; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; }
.spec div { display: flex; justify-content: space-between; gap: 14px; padding: 10px 14px; font-size: 14px; }
.spec div:nth-child(odd) { background: var(--bg-warm); }
.spec b { color: var(--ink); font-weight: 700; }
.contents-list { margin: 10px 0 0 18px; color: var(--muted); font-size: 14px; }
.sticky-add {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: #fff; border-top: 1px solid var(--line); padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  display: flex; gap: 12px; align-items: center; box-shadow: 0 -3px 12px rgba(50, 40, 20, .12);
}
.sticky-add .sp { font-weight: 800; font-size: 17px; }
.sticky-add .btn { flex: 1; }
@media (min-width: 900px) { .sticky-add { display: none; } }
@media (max-width: 899px) {
  /* thumb-sized steppers, and 16px so iOS doesn't zoom the editable qty */
  .qty button { width: 44px; height: 44px; }
  .qty input { width: 48px; height: 44px; font-size: 16px; }
  /* the fixed bar owns the bottom ~72px - keep the footer reachable under it */
  body:has(.sticky-add:not(.hide)) { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}

/* ---------- cart / checkout ---------- */
.cart-layout { display: grid; gap: 22px; padding: 26px 0 60px; }
@media (min-width: 960px) { .cart-layout { grid-template-columns: 1.45fr .8fr; align-items: start; } }
.cart-list { display: flex; flex-direction: column; gap: 10px; }
.cart-item {
  display: grid; grid-template-columns: 80px 1fr auto; gap: 14px; align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: 2px; padding: 12px 14px;
}
.cart-item img { height: 62px; object-fit: contain; }
.cart-item .n { font-weight: 700; font-family: var(--font-serif); font-size: 15.5px; }
.cart-item .d { font-size: 12.5px; color: var(--muted); }
.cart-item .p { font-weight: 800; }
.cart-item .rm { background: none; border: 0; color: var(--sale); font-size: 12.5px; font-weight: 700; padding: 4px 0; text-align: left; text-transform: uppercase; letter-spacing: .04em; }
.cart-item .qty button { height: 32px; width: 32px; font-size: 15px; }
.cart-item .qty input { width: 34px; font-size: 13.5px; height: 32px; }
/* phone cart rows: image and text up top, price + a full-width stepper row below */
@media (max-width: 600px) {
  .cart-item { grid-template-columns: 64px 1fr; gap: 12px; }
  .cart-item > div:last-child {
    grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between;
  }
  .cart-item > div:last-child .qty { margin-top: 0; }
  .cart-item .qty button { width: 44px; height: 44px; }
  .cart-item .qty input { width: 48px; height: 44px; font-size: 16px; }
  .cart-item .rm { padding: 10px 0; min-height: 44px; }
}
.summary .promo-row { display: flex; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.summary .promo-row input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 2px; text-transform: uppercase; }
.summary { background: #fff; border: 1px solid var(--line); border-radius: 2px; padding: 20px; position: sticky; top: 130px; }
/* checkout on a phone: the totals must sit above Place Order, not after it */
@media (max-width: 959px) { #co-layout .summary { order: -1; position: static; } }
.summary h3 { margin-bottom: 12px; font-size: 20px; padding-bottom: 10px; border-bottom: 1px solid var(--line-soft); }
.sum-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14.5px; color: var(--muted); }
.sum-row.total { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 12px; font-size: 18px; font-weight: 800; color: var(--ink); }
.ship-note { background: #eef4ea; border: 1px solid #cfe0c6; color: var(--green); font-size: 13px; border-radius: 2px; padding: 9px 12px; margin: 10px 0; font-weight: 700; }
.form-grid { display: grid; gap: 13px; }
@media (min-width: 640px) { .form-grid.cols-2 { grid-template-columns: 1fr 1fr; } .form-grid .full { grid-column: 1/-1; } }
.field label { display: block; font-weight: 700; font-size: 12.5px; margin-bottom: 4px; color: var(--ink); text-transform: uppercase; letter-spacing: .04em; }
.field input, .field select, .field textarea {
  width: 100%; padding: 11px 12px; border: 1px solid #b9ae97; border-radius: 2px;
  background: #fff; outline: none;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--green); }
.seg { display: flex; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; }
.seg button { flex: 1; padding: 12px; background: #fff; border: 0; font-weight: 700; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 600px) { .seg button { min-height: 46px; } }
.seg button.sel { background: var(--green); color: #fff; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: 2px; padding: 20px; }
.panel h3 { padding-bottom: 10px; border-bottom: 1px solid var(--line-soft); }
.checkbox-row { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--muted); margin: 14px 0; }
.checkbox-row input { width: 18px; height: 18px; accent-color: var(--green); flex-shrink: 0; margin-top: 1px; }
.alert { border-radius: 2px; padding: 11px 14px; font-weight: 700; font-size: 14px; margin: 12px 0; display: none; }
.alert.err { background: #f9e9e6; color: var(--sale); border: 1px solid #e5c4bd; display: block; }
.alert.ok { background: #eef4ea; color: var(--green); border: 1px solid #cfe0c6; display: block; }

/* ---------- locations ---------- */
.loc-grid { display: grid; gap: 16px; padding-bottom: 26px; }
@media (min-width: 760px) { .loc-grid { grid-template-columns: 1fr 1fr; gap: 20px; } }
.loc-card { background: #fff; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; display: flex; flex-direction: column; }
.loc-card iframe { width: 100%; height: 220px; border: 0; border-bottom: 1px solid var(--line); }
.loc-body { padding: 18px 20px 22px; }
.loc-body .state { color: var(--gold-deep); text-transform: uppercase; font-size: 11.5px; letter-spacing: .12em; font-weight: 700; }
.loc-body h3 { font-size: 21px; margin: 3px 0 6px; }
.loc-body p { color: var(--muted); font-size: 14.5px; }
.loc-body .tel { display: inline-flex; gap: 8px; margin-top: 8px; font-weight: 700; color: var(--ink); }
.loc-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

/* ---------- footer ---------- */
footer.site { background: var(--green-deep); color: #d3bda4; margin-top: 36px; font-size: 14px; }
.foot-main { display: grid; gap: 26px; padding: 40px 0 26px; }
@media (min-width: 800px) { .foot-main { grid-template-columns: 1.25fr 1fr 1fr 1fr 1.3fr; } }
.foot-main h4 { color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 12px; }
.foot-main a { display: block; padding: 3px 0; color: #d3bda4; }
.foot-main a:hover { color: var(--gold); }
.foot-logo img { height: 60px; }
.foot-main p { font-size: 13.5px; }
.news-form { display: flex; margin-top: 10px; border: 1px solid #6b3a44; border-radius: 2px; overflow: hidden; }
.news-form input { flex: 1; padding: 11px 12px; border: 0; background: #fff; color: var(--ink); outline: none; min-width: 0; }
.news-form button { border: 0; background: var(--gold); color: var(--green-deep); font-weight: 700; padding: 0 18px; text-transform: uppercase; font-size: 12px; letter-spacing: .06em; }
.foot-legal { border-top: 1px solid #55242e; padding: 16px 0 24px; font-size: 12px; color: #a98d77; text-align: center; }
.foot-legal .warn { max-width: 96ch; margin: 0 auto 8px; }

/* ---------- age gate (21+) ---------- */
/* The overlay ships in every page but stays hidden unless the head script
   flags <html> with .age-pending - so returning visitors never see a flash,
   and crawlers index the full page underneath. */
.agegate {
  display: none; position: fixed; inset: 0; z-index: 400;
  background: rgba(30, 9, 14, .8);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  align-items: flex-start; justify-content: center; padding: 20px;
  overflow-y: auto;
}
html.age-pending .agegate { display: flex; }
html.age-pending { overflow: hidden; }
.agegate .box {
  background: var(--bg); border-radius: 2px; max-width: 460px; width: 100%;
  padding: 34px 30px 26px; text-align: center;
  border: 1px solid var(--gold); border-top-width: 4px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .45);
  /* auto margins center the box when it fits and let it scroll when it doesn't */
  margin: auto 0;
}
.agegate img { height: 74px; margin: 0 auto 10px; }
.agegate .est { display: block; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 14px; }
.agegate h2 { font-size: 25px; margin-bottom: 8px; }
.agegate p { color: var(--muted); font-size: 14px; margin-bottom: 20px; }
.agegate .btns { display: flex; gap: 10px; flex-direction: column; }
.agegate .fine { font-size: 11.5px; color: var(--muted); margin: 16px 0 0; }

/* ---------- toast ---------- */
.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translate(-50%, 150%);
  background: var(--green-deep); color: #fff; padding: 13px 24px; border-radius: 2px;
  font-weight: 700; z-index: 300; transition: transform .25s ease;
  display: flex; gap: 10px; align-items: center; max-width: 92vw; text-align: center; font-size: 14px;
}
.toast.show { transform: translate(-50%, 0); }
.toast .tick { color: #8fce9a; }
/* keep it clear of the sticky add-to-cart bar instead of painting over it */
@media (max-width: 899px) { .toast { bottom: calc(88px + env(safe-area-inset-bottom)); } }

/* ---------- admin ---------- */
.admin-body { background: #f1eee6; }
.admin-top { background: var(--green-deep); color: #e9e2cf; }
.admin-top .in { display: flex; align-items: center; gap: 14px; padding: 12px 0; }
.admin-top img { height: 42px; }
.admin-top h1 { font-size: 19px; color: #fff; }
.admin-top .out { margin-left: auto; border-color: #6c806f; color: #e9e2cf; background: transparent; }
.admin-top .out:hover { background: #fff; color: var(--green-deep); }
.stats { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); margin: 22px 0; }
@media (min-width: 800px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { background: #fff; border-radius: 2px; padding: 16px 18px; border: 1px solid var(--line); }
.stat .v { font-size: 25px; font-weight: 800; font-family: var(--font-serif); }
.stat .l { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; font-weight: 700; }
.stat.hot .v { color: var(--sale); }
.tabs { display: flex; gap: 4px; margin: 8px 0 16px; flex-wrap: wrap; }
.tabs button {
  padding: 10px 20px; border-radius: 2px; border: 1px solid var(--line);
  background: #fff; font-weight: 700; font-size: 13px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.tabs button.sel { background: var(--green); color: #fff; border-color: var(--green); }
.table-wrap { background: #fff; border-radius: 2px; border: 1px solid var(--line); overflow-x: auto; }
table.admin { width: 100%; border-collapse: collapse; min-width: 720px; }
table.admin th {
  text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); padding: 12px 14px; border-bottom: 2px solid var(--line); white-space: nowrap; background: var(--bg-warm);
}
table.admin td { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); font-size: 14px; vertical-align: top; }
table.admin tr:hover td { background: #faf8f2; }
.pill { display: inline-block; padding: 3px 10px; border-radius: 2px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.pill.pending { background: #fdf3d9; color: #8a6400; border: 1px solid #ecd9a0; }
.pill.shipped { background: #e4efe0; color: var(--green); border: 1px solid #c4dbb9; }
.pill.picked-up { background: #e2ecf7; color: #2c5c94; border: 1px solid #bcd2ea; }
.pill.cancelled { background: #f6e2de; color: var(--sale); border: 1px solid #e5c0b8; }
.mini-btn {
  padding: 7px 12px; font-size: 12px; border-radius: 2px; font-weight: 700;
  border: 1px solid var(--line); background: #fff; color: var(--ink); text-transform: uppercase; letter-spacing: .03em;
}
.mini-btn:hover { border-color: var(--green); color: var(--green); }
.mini-btn.solid { background: var(--green); border-color: var(--green); color: #fff; }
.mini-btn.solid:hover { background: var(--green-dark); color: #fff; }
.order-items { font-size: 13px; color: var(--muted); }
.login-box { max-width: 400px; margin: 56px auto; }
.admin-search { padding: 10px 14px; border-radius: 2px; border: 1px solid #b9ae97; width: 100%; max-width: 340px; outline: none; }

/* ---------- articles / breadcrumbs ---------- */
.crumbs { font-size: 13px; color: var(--muted); padding: 4px 0 0; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--green); text-decoration: underline; }
.crumbs span { color: var(--ink); font-weight: 600; }
.article { max-width: 780px; padding-top: 22px; padding-bottom: 60px; }
.article h1 { font-size: clamp(27px, 4.4vw, 40px); margin: 10px 0 6px; }
.article .byline { color: var(--muted); font-size: 13.5px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line-soft); }
.article h2 { font-size: 23px; margin: 26px 0 8px; }
.article p { margin: 10px 0; font-size: 15.5px; line-height: 1.65; }
.article ul { margin: 10px 0 10px 22px; }
.article li { margin: 6px 0; font-size: 15.5px; line-height: 1.6; }
.article a { color: var(--sale); font-weight: 600; }
.article a:hover { text-decoration: underline; }
.article a.btn { color: #fff; }
.article a.btn-outline { color: var(--ink); }

/* ---------- images inside a post body ---------- */
/* the column is 780px - nothing dropped into an article may out-run it */
.article img { max-width: 100%; height: auto; display: block; }
/* space loose images only; leaves imgs inside cards/tiles/buttons alone */
.article > img, .article p > img { margin: 20px auto; }
.article figure { margin: 22px 0; text-align: center; }   /* kills the UA 40px indent */
.article figure > img { margin: 0 auto; }
.article figcaption { margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--muted); text-align: center; }

/* .cigar-shot - one line photo in a post, white box + hairline like .card / .tile */
.cigar-shot {
  background: #fff; border: 1px solid var(--line); border-radius: 2px;
  overflow: hidden; max-width: 460px; margin: 22px auto;
}
.cigar-shot img { width: 100%; max-height: 200px; object-fit: contain; padding: 14px; }
.cigar-shot figcaption {
  margin: 0; padding: 9px 12px; border-top: 1px solid var(--line-soft); background: var(--bg-warm);
  font-size: 12.5px; font-weight: 600; color: var(--muted); text-align: center;
}
@media (min-width: 700px) { .cigar-shot img { max-height: 260px; } }

/* .cigar-row - a few cigars from one line side by side; wraps 2-up on a phone */
.cigar-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0; }
.cigar-row .cigar-shot { flex: 1 1 150px; min-width: 0; max-width: none; margin: 0; }
.cigar-row .cigar-shot img { max-height: 150px; padding: 10px; }
@media (min-width: 700px) { .cigar-row { gap: 14px; } .cigar-row .cigar-shot img { max-height: 190px; } }

.cta-box { border: 1px solid var(--line); background: var(--bg-warm); padding: 20px 22px; margin-top: 28px; border-left: 4px solid var(--gold); }

/* ---------- admin product editor modal ---------- */
.modal-bg {
  position: fixed; inset: 0; z-index: 200; background: rgba(18, 26, 20, .6);
  display: flex; align-items: flex-start; justify-content: center; padding: 24px 14px; overflow-y: auto;
}
.modal {
  background: #fff; border-radius: 2px; width: 100%; max-width: 760px;
  border-top: 4px solid var(--green); display: flex; flex-direction: column; margin: auto 0;
}
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--line-soft); }
.modal-head h3 { font-size: 20px; }
.modal-body { padding: 18px 20px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--line-soft); background: var(--bg-warm); }
.opt-block { border: 1px solid var(--line); border-radius: 2px; padding: 14px; margin-bottom: 12px; background: var(--bg-warm); }
.packs-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.pack-row { display: flex; gap: 6px; }
.pack-row input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid #b9ae97; border-radius: 2px; font-size: 14px; background: #fff; }

/* ---------- blog category header bar ---------- */
.cat-bar { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.cat-bar .in { display: flex; gap: 2px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cat-bar a {
  padding: 12px 16px; font-weight: 700; font-size: 13px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.cat-bar a:hover { color: var(--ink); }
.cat-bar a.on { color: var(--green); border-bottom-color: var(--green); }

/* ---------- admin insights (single-hue bar lists) ---------- */
.insight-grid { display: grid; gap: 14px; }
@media (min-width: 980px) { .insight-grid { grid-template-columns: 1fr 1fr; } }
.insight-grid .panel h3 { font-size: 16px; margin-bottom: 10px; }
.bar-list { display: flex; flex-direction: column; gap: 7px; }
.bar-row { display: grid; grid-template-columns: minmax(120px, 190px) 1fr 84px; gap: 10px; align-items: center; }
.bar-row .bl { font-size: 13px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-row .bl small { display: block; font-weight: 400; font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.bar-row .bt { background: var(--bg-warm); border-radius: 2px; height: 14px; overflow: hidden; }
.bar-row .bf { display: block; height: 100%; background: var(--green); border-radius: 2px; min-width: 2px; }
.bar-row:hover .bf { background: var(--green-dark); }
.bar-row .bv { font-size: 12.5px; font-weight: 700; text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---------- admin blog editor ---------- */
.post-grid { display: grid; gap: 20px; }
@media (min-width: 980px) { .post-grid { grid-template-columns: 1.5fr 1fr; align-items: start; } }
.rte-bar {
  display: flex; flex-wrap: wrap; gap: 4px; border: 1px solid var(--line);
  border-bottom: 0; background: var(--bg-warm); padding: 6px; border-radius: 2px 2px 0 0; margin-top: 12px;
}
.rte-bar button, .rte-bar select {
  padding: 6px 10px; border: 1px solid var(--line); background: #fff;
  font-size: 13px; font-weight: 700; border-radius: 2px; color: var(--ink);
}
.rte-bar button:hover { border-color: var(--green); color: var(--green); }
.rte {
  border: 1px solid var(--line); border-radius: 0 0 2px 2px; background: #fff;
  min-height: 340px; max-height: 55vh; overflow-y: auto; padding: 14px 16px;
  font-size: 15px; line-height: 1.6; outline: none;
}
.rte:focus { border-color: var(--green); }
.rte h2 { font-size: 21px; margin: 14px 0 6px; }
.rte h3 { font-size: 17px; margin: 12px 0 4px; }
.rte p { margin: 8px 0; }
.rte ul { margin: 8px 0 8px 22px; }
.rte a { color: var(--sale); font-weight: 600; text-decoration: underline; }
.rte img { max-width: 100%; }
.seo-side { background: var(--bg-warm); border: 1px solid var(--line); border-radius: 2px; padding: 16px; }
.seo-side h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10px; }
.seo-score { display: flex; align-items: center; gap: 10px; margin: 12px 0 8px; }
.seo-score .bar { flex: 1; height: 8px; background: #e3ddd0; border-radius: 4px; overflow: hidden; }
.seo-score .bar > div { height: 100%; width: 0; transition: width .2s; }
.seo-checks { list-style: none; margin: 0; padding: 0; }
.seo-checks li { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; padding: 3px 0; color: var(--muted); }
.seo-checks li span { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.seo-checks li.ok span { background: var(--green); }
.seo-checks li.warn span { background: var(--gold-deep); }
.seo-checks li.bad span { background: var(--sale); }
.seo-checks li.ok { color: var(--ink); }
.g-preview { background: #fff; border: 1px solid var(--line); border-radius: 2px; padding: 12px 14px; }
.g-url { color: #202124; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-title { color: #1a0dab; font-size: 17px; line-height: 1.3; margin: 2px 0; font-family: arial, sans-serif; }
.g-desc { color: #4d5156; font-size: 13px; line-height: 1.5; font-family: arial, sans-serif; }

/* ---------- reviews ---------- */
.review-item { border-bottom: 1px solid var(--line-soft); padding: 12px 0; }
.review-item b { font-size: 14.5px; margin-right: 8px; }
.review-item .rv-date { font-size: 12px; color: var(--muted); margin-left: 8px; }
.review-item p { margin: 6px 0 0; font-size: 14.5px; color: var(--muted); line-height: 1.55; max-width: 80ch; }

/* ---------- brand hub price table ---------- */
table.price-table { width: 100%; border-collapse: collapse; min-width: 560px; background: #fff; }
table.price-table th {
  text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); padding: 10px 12px; border-bottom: 2px solid var(--line); background: var(--bg-warm); white-space: nowrap;
}
table.price-table td { padding: 9px 12px; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
table.price-table td a { color: var(--ink); font-weight: 600; }
table.price-table td a:hover { color: var(--sale); text-decoration: underline; }
table.price-table tr:hover td { background: #faf8f2; }

.center { text-align: center; }
.mt { margin-top: 16px; }
.hide { display: none !important; }

/* ---------- King Corona 1902 - full-width banner ---------- */
/* Black and gold, dressed like a luxury house: layered warm blacks with a
   candle-gold sheen, the inset hairline frame, metallic numerals.
   Now a wide banner under the pair: copy rides left, ghost numerals right. */
.promo-tile.t1902 {
  position: relative; overflow: hidden; min-height: 185px; padding: 22px 24px;
  background:
    radial-gradient(130% 170% at 88% -8%, rgba(228, 180, 83, 0.2) 0%, rgba(217, 165, 63, 0.06) 32%, rgba(0, 0, 0, 0) 58%),
    linear-gradient(155deg, #221a11 0%, #120d09 45%, #070504 100%);
  border-color: #8a6a24;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
/* a soft pool of gold light behind the wordmark */
.promo-tile.t1902 .glow {
  position: absolute; left: -12%; top: -34%; width: 78%; height: 170%;
  background: radial-gradient(closest-side, rgba(228, 180, 83, 0.14), rgba(0, 0, 0, 0));
  pointer-events: none; transition: opacity .4s ease;
}
/* the inset gold hairline, the same frame the hero wears */
.promo-tile.t1902::after {
  content: ""; position: absolute; inset: 8px;
  border: 1px solid rgba(217, 165, 63, 0.6); pointer-events: none;
}
/* and a second, outer whisper of a line: double-framed like a humidor lid */
.promo-tile.t1902::before {
  content: ""; position: absolute; inset: 4px;
  border: 1px solid rgba(217, 165, 63, 0.18); pointer-events: none;
}
.promo-tile.t1902 .bg-year {
  position: absolute; right: -18px; bottom: -52px;
  font-family: var(--font-serif, Georgia, serif); font-weight: 700; font-style: italic;
  font-size: 210px; line-height: 1; letter-spacing: -0.02em;
  background: linear-gradient(178deg, rgba(228, 180, 83, 0.32) 8%, rgba(217, 165, 63, 0.12) 45%, rgba(217, 165, 63, 0.02) 78%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  pointer-events: none; user-select: none; transition: transform .6s ease;
}
.promo-tile.t1902 .inner {
  position: relative; flex: 1; max-width: 36ch;
  display: flex; flex-direction: column; justify-content: center;
}
.promo-tile.t1902 .k { color: #e4b453; letter-spacing: .24em; }
.promo-tile.t1902 .t {
  color: #f6ecd8; font-size: 28px; letter-spacing: .01em;
  text-shadow: 0 1px 14px rgba(0, 0, 0, .7);
}
/* metallic gold numerals: light poured into the type */
.promo-tile.t1902 .t em {
  font-style: italic; font-weight: 700;
  background: linear-gradient(172deg, #f7dc95 4%, #e0ac3f 36%, #96691c 70%, #eec468 96%);
  -webkit-background-clip: text; background-clip: text; color: #d9a53f; -webkit-text-fill-color: transparent;
}
/* the tooling line on the lid */
.promo-tile.t1902 .rule {
  display: block; width: 46px; height: 1px; margin: 9px 0 10px;
  background: linear-gradient(90deg, #e4b453, rgba(228, 180, 83, 0));
}
.promo-tile.t1902 .d { color: #cbb89d; font-size: 13.5px; line-height: 1.55; }
.promo-tile.t1902 .go { color: #e4b453; letter-spacing: .15em; }
.promo-tile.t1902:hover {
  border-color: var(--gold); transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .5), 0 0 24px rgba(217, 165, 63, .12);
}
.promo-tile.t1902:hover .bg-year { transform: translateY(-4px); }
.promo-tile.t1902:hover .glow { opacity: 1.5; }
.promo-tile.t1902:hover .go { color: #f0c56a; }
/* wide-band rebalance: not the old column tile stretched - more air, a longer
   measure on the copy, and the numerals grown into the empty right half */
@media (min-width: 900px) {
  .promo-tile.t1902 { padding: 32px 44px; min-height: 224px; }
  .promo-tile.t1902 .inner { max-width: 56ch; }
  .promo-tile.t1902 .t { font-size: 33px; }
  .promo-tile.t1902 .d { font-size: 14.5px; }
  .promo-tile.t1902 .bg-year { font-size: 280px; right: 28px; bottom: -86px; }
  .promo-tile.t1902 .glow { left: -4%; width: 48%; }
}
@media (max-width: 899px) { .promo-tile.t1902 { min-height: 215px; } .promo-tile.t1902 .bg-year { font-size: 180px; bottom: -44px; } }
@media (max-width: 479px) { .promo-tile.t1902 .bg-year { font-size: 150px; bottom: -36px; right: -14px; } }
@media (prefers-reduced-motion: reduce) {
  .promo-tile.t1902, .promo-tile.t1902 .bg-year, .promo-tile.t1902 .glow { transition: none; }
}

/* blog featured card: side-by-side on desktop, stacked on a phone */
.featured-post { display: grid; align-items: center; }
@media (min-width: 640px) { .featured-post { grid-template-columns: 1fr 1.2fr; } }

/* contact page: form beside the shop details, stacked on a phone */
.contact-grid { display: grid; gap: 18px; }
@media (min-width: 860px) { .contact-grid { grid-template-columns: 1.5fr 1fr; align-items: start; } }
.contact-side { background: var(--bg-warm); }