:root {
  --bg: #ffffff;
  --surface: #f5f4f1;
  --surface-2: #ecebe7;
  --ink: #121110;
  --ink-2: #5b5853;
  --line: #e6e3de;
  --accent: #b4530a;
  --accent-soft: #fbeee2;
  --wa: #16a34a;
  --wa-hover: #12893e;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 8px 24px rgb(0 0 0 / 0.06);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gutter: 16px;
  --sticky-top: 92px; /* below the sticky header: one row up to 1023px, two rows from 1024px */
}
@media (min-width: 720px) {
  :root { --gutter: 32px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3 { line-height: 1.1; letter-spacing: -0.025em; margin: 0 0 0.5em; font-weight: 750; }
h1 { font-size: clamp(2rem, 4.6vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 2.8vw, 2.25rem); }
h3 { font-size: 1.125rem; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.wrap { max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: 760px; }
.center { text-align: center; }
.muted { color: var(--ink-2); }
.fine { font-size: 0.8125rem; color: var(--ink-2); }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--ink-2); max-width: 46ch; }
.eyebrow {
  font-size: 0.75rem; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 0.6em;
}
.accent { color: var(--accent); }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: var(--ink); color: #fff; padding: 8px 12px; border-radius: 8px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid transparent;
  font-weight: 600; font-size: 0.95rem; cursor: pointer; white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.btn:active { transform: translateY(1px); }
.btn-lg { height: 52px; padding: 0 26px; font-size: 1rem; }
.btn-block { width: 100%; }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: #2b2926; }
.btn-ghost { border-color: var(--line); background: var(--bg); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-light { background: #fff; color: var(--ink); }
.btn-wa { background: var(--wa); color: #fff; }
.btn-wa:hover { background: var(--wa-hover); }
.link-arrow { font-weight: 600; font-size: 0.95rem; white-space: nowrap; }
.link-arrow::after { content: " →"; transition: margin 0.15s; }
a:hover > .link-arrow::after, .link-arrow:hover::after { margin-left: 4px; }
.icon-btn { border: 0; background: none; font-size: 1.1rem; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; }
.icon-btn:hover { background: var(--surface); }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgb(255 255 255 / 0.88); backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line);
}
/* Two rows on desktop: logo, a large search and the account buttons; then the main sections (.header-nav-row). */
.header-inner { display: flex; align-items: center; gap: 24px; height: 68px; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -0.02em; font-size: 1.05rem; flex-shrink: 0; }
.logo-mark { width: 44px; height: 44px; flex-shrink: 0; }
/* Sections row: a dark whisky band (amber glow in the middle), centered uppercase links with small amber diamonds
   between them; hover / current page draws a fine amber line from the center. */
.header-nav-row {
  display: none;
  background:
    radial-gradient(60% 140% at 50% 0%, rgb(201 129 52 / 0.28), transparent 70%),
    linear-gradient(90deg, #15110d, #241810 50%, #15110d);
  border-top: 1px solid rgb(217 163 90 / 0.45);
  box-shadow: inset 0 -1px 0 rgb(0 0 0 / 0.35);
}
.nav { display: flex; align-items: center; justify-content: center; height: 54px; }
.nav a {
  position: relative; display: flex; align-items: center; height: 100%; padding: 0 clamp(14px, 1.7vw, 26px);
  color: #e9dcc6; font-size: 1.11rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase;
  transition: color 0.2s;
}
.nav a + a::before {
  content: ""; position: absolute; left: -3px; top: 50%; width: 6px; height: 6px; margin-top: -3px;
  background: rgb(217 163 90 / 0.55); transform: rotate(45deg);
}
.nav a::after {
  content: ""; position: absolute; left: clamp(14px, 1.7vw, 26px); right: clamp(14px, 1.7vw, 26px); bottom: 12px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, #e0a85e 20%, #f2c98a 50%, #e0a85e 80%, transparent);
  transform: scaleX(0); transition: transform 0.25s ease;
}
.nav a:hover, .nav a[aria-current="page"] { color: #fff; }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a:focus-visible { outline: 2px solid #f2c98a; outline-offset: -4px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { .nav a, .nav a::after { transition: none; } }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.search { flex: 1; max-width: 640px; min-width: 0; }
.search input, .search-row input {
  width: 100%; height: 44px; font-size: 0.95rem; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235b5853' stroke-width='2'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m11 11 3.5 3.5'/%3E%3C/svg%3E") no-repeat 14px center;
  padding: 0 18px 0 42px; background-position: 16px center; outline: none; transition: border-color 0.15s, background-color 0.15s;
}
.search input:focus, .search-row input:focus { border-color: var(--ink); background-color: #fff; }
.search-row { display: none; }
@media (max-width: 639px) { .search-row { display: block; padding-bottom: 10px; } }
.search { display: none; }
.list-btn {
  position: relative; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px;
  border-radius: 999px; border: 1px solid var(--line); background: #fff; cursor: pointer; font-weight: 600; font-size: 0.9rem;
}
.list-btn:hover { border-color: var(--ink); }
.list-label { display: none; }
.list-count {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: #fff;
  font-size: 0.75rem; display: grid; place-items: center;
}
.list-count[hidden] { display: none; }
.menu summary {
  list-style: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
}
.menu summary::-webkit-details-marker { display: none; }
/* Closed, the panel takes no space (browsers still lay out closed <details> content, off to the right of the screen). */
.menu:not([open]) > nav { display: none; }
.menu summary span, .menu summary span::before, .menu summary span::after {
  display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; position: relative; content: "";
}
.menu summary span::before { position: absolute; top: -6px; }
.menu summary span::after { position: absolute; top: 6px; }
.menu nav {
  position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--line);
  display: grid; padding: 8px var(--gutter) 16px; box-shadow: var(--shadow);
}
.menu-search input { width: 100%; height: 44px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); padding: 0 16px; margin: 8px 0; }
.menu nav a { padding: 12px 0; font-weight: 600; border-bottom: 1px solid var(--line); }
.menu nav a:last-child { border: 0; }
@media (min-width: 640px) { .search { display: block; } .list-label { display: inline; } }
/* Narrow phones: tighter header so the menu button stays on screen; under 350px only the logo mark. */
@media (max-width: 420px) {
  .header-inner { gap: 8px; }
  .header-actions { gap: 0; }
  .header-actions .account-link { padding: 0 4px; gap: 4px; min-width: 40px; justify-content: center; }
  .list-btn { padding: 0 10px; }
  .logo { gap: 7px; font-size: 0.92rem; }
  .logo-mark { width: 36px; height: 36px; }
}
@media (max-width: 349px) { .logo-text { display: none; } }
@media (min-width: 1024px) { .header-nav-row { display: block; } .menu { display: none; } :root { --sticky-top: 146px; } }

/* Hero */
.hero { padding: clamp(40px, 8vw, 96px) 0 clamp(32px, 6vw, 72px); overflow: hidden; }
.hero-grid { display: grid; gap: 40px; align-items: center; }
.hero-brand { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.hero-brand img { width: clamp(96px, 11vw, 136px); height: auto; filter: drop-shadow(0 6px 18px rgb(0 0 0 / 0.12)); }
.hero-brand .eyebrow { margin: 0; }
.hero h1 { max-width: 14ch; font-size: clamp(2.4rem, 6vw, 4.5rem); font-weight: 800; letter-spacing: -0.04em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 36px; }
.stats { display: flex; gap: clamp(20px, 4vw, 48px); margin: 0; }
.stats div { display: flex; flex-direction: column-reverse; }
.stats dt { font-size: 0.8rem; color: var(--ink-2); }
.stats dd { margin: 0; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 750; letter-spacing: -0.03em; }
.hero-bottles { position: relative; aspect-ratio: 1 / 0.9; }
.hero-bottle {
  position: absolute; background: var(--surface); border-radius: 24px; overflow: hidden;
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1);
}
.hero-bottle img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; padding: 8%; }
.hb-0 { inset: 0 32% 18% 0; z-index: 2; }
.hb-1 { inset: 12% 0 30% 52%; background: var(--surface-2); }
.hb-2 { inset: 58% 4% 0 40%; z-index: 3; background: var(--accent-soft); }
.hero-bottle:hover { transform: translateY(-4px); }
/* Name pill on each hero photo (they open the Tienda with that whisky first): always on phones, on hover with a mouse. */
.hero-bottle-tag {
  position: absolute; max-width: calc(100% - 20px); display: flex; gap: 6px; align-items: center;
  padding: 6px 12px; border-radius: 999px; background: rgb(255 255 255 / 0.92); box-shadow: 0 2px 10px rgb(0 0 0 / 0.12);
  font-size: 0.78rem; font-weight: 700; color: var(--ink); white-space: nowrap;
  transition: opacity 0.25s, transform 0.25s;
}
.hero-bottle-tag span { overflow: hidden; text-overflow: ellipsis; }
/* Each in a corner the other photos never cover. */
.hb-0 .hero-bottle-tag { top: 10px; left: 10px; }
.hb-1 .hero-bottle-tag { top: 10px; right: 10px; max-width: 62%; }
.hb-2 .hero-bottle-tag { bottom: 10px; right: 10px; }
.hero-bottle:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .hero-bottle { cursor: pointer; }
  .hero-bottle-tag { opacity: 0; transform: scale(0.92); }
  .hero-bottle:hover .hero-bottle-tag, .hero-bottle:focus-visible .hero-bottle-tag { opacity: 1; transform: none; }
  .hero-bottle:hover { box-shadow: 0 0 0 3px var(--ink); }
}
/* Tienda opened from a homepage photo: the chosen whisky leads the grid. */
.shop-first {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin: 0;
  padding: 10px 14px; border-radius: 12px; background: var(--accent-soft); font-size: 0.9rem;
}
.card.is-picked .card-img { box-shadow: 0 0 0 3px var(--accent); }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.05fr 1fr; } }

/* Sections */
.section { padding: clamp(48px, 7vw, 88px) 0; }
.section-tint { background: var(--surface); }
.section-dark { background: var(--ink); color: #fff; }
.section-dark .lead { color: #bdb8b0; }
.section-dark .eyebrow { color: #f0a560; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.section-head h2 { margin: 0; }
.subhead { margin: 48px 0 16px; font-size: 1.25rem; }
.split { display: grid; gap: 40px; align-items: start; }
.duo { display: grid; gap: 20px; }
@media (min-width: 860px) { .split { grid-template-columns: 1fr 1.1fr; } .duo { grid-template-columns: 1fr 1fr; } }
.page-hero { padding: clamp(40px, 7vw, 80px) 0 clamp(8px, 2vw, 16px); }
.page-hero h1 { max-width: 20ch; }

/* Product grid & cards */
.grid { display: grid; gap: 28px 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 20px; } }
@media (min-width: 1100px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 900px) and (max-width: 1239px) { .grid-shop { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card { display: flex; flex-direction: column; min-width: 0; }
.card-link { display: block; flex: 1; }
.card-img { position: relative; aspect-ratio: 1; background: var(--surface); border-radius: var(--radius); overflow: hidden; }
.card-img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; padding: 10%; transition: transform 0.35s cubic-bezier(.2,.8,.2,1); }
.card-link:hover .card-img img { transform: scale(1.05); }
.card.is-out .card-img img { opacity: 0.45; }
.badges { position: absolute; top: 10px; left: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.badge {
  font-size: 0.6875rem; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 6px; background: var(--ink); color: #fff;
}
.badge-new { background: var(--accent); }
.badge-soft { background: #fff; color: var(--ink); }
.card-body { padding: 14px 2px 0; }
.card-body .eyebrow { color: var(--ink-2); font-size: 0.6875rem; margin-bottom: 4px; }
.card-title { font-size: 1rem; font-weight: 650; margin: 0 0 4px; letter-spacing: -0.01em; line-height: 1.3; }
.card-meta { font-size: 0.8125rem; color: var(--ink-2); margin: 0; }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 2px 0; }
.price { font-weight: 700; letter-spacing: -0.01em; }
.card.is-out .price { color: var(--ink-2); font-weight: 500; }
.add-btn {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--line); background: #fff;
  font-size: 1.25rem; line-height: 1; cursor: pointer; transition: all 0.15s;
}
.add-btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.add-btn.added { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Collections, smoke, chips */
.collections { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
@media (min-width: 900px) { .collections { grid-template-columns: repeat(3, 1fr); } }
.collection {
  display: flex; flex-direction: column; padding: 24px; border-radius: var(--radius); background: #fff;
  border: 1px solid var(--line); transition: border-color 0.15s, transform 0.15s; min-height: 160px;
}
.collection:hover { border-color: var(--ink); transform: translateY(-2px); }
.collection h3 { font-size: 1.25rem; margin-bottom: 6px; }
.collection p { color: var(--ink-2); font-size: 0.9rem; flex: 1; }
.smoke { display: inline-flex; gap: 3px; vertical-align: middle; }
.smoke i { width: 6px; height: 14px; border-radius: 2px; background: var(--surface-2); }
.smoke i.on { background: var(--accent); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--line); font-weight: 550; font-size: 0.9rem; background: #fff;
}
.chip span { color: var(--ink-2); font-weight: 500; font-size: 0.8rem; }
.chip:hover { border-color: var(--ink); }
.chip-active { background: var(--ink); color: #fff; border-color: var(--ink); height: 32px; font-size: 0.85rem; }
.chip-active span { color: #fff; }

/* Features & tiers */
.feature {
  display: flex; flex-direction: column; padding: clamp(24px, 4vw, 40px); border-radius: 20px; background: var(--surface);
  transition: transform 0.15s;
}
a.feature:hover { transform: translateY(-2px); }
.feature p:not(.eyebrow) { color: var(--ink-2); }
.feature .link-arrow { margin-top: auto; }
.ticks { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 10px; }
.ticks li { padding-left: 28px; position: relative; }
.ticks li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.tiers { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.tier { padding: 28px; border-radius: 20px; border: 1px solid var(--line); }
.tier:last-child { background: var(--ink); color: #fff; border-color: var(--ink); }
.tier:last-child p:not(.eyebrow) { color: #cfcac2; }
.tier:last-child .eyebrow { color: #f0a560; }
.tier-price { font-size: 2.25rem; font-weight: 800; letter-spacing: -0.04em; margin-bottom: 12px; color: inherit !important; }
.tier-price span { font-size: 1rem; font-weight: 500; letter-spacing: 0; color: var(--ink-2); }
.tier:last-child .tier-price span { color: #cfcac2; }
.tier p { color: var(--ink-2); font-size: 0.95rem; }
.center-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 40px 0 12px; }

/* Events */
.events { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.event {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 16px; align-items: center;
  padding: 16px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line);
}
.events-dark .event { background: #1d1c1a; border-color: #2c2a27; }
.event-date { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 64px; border-radius: 12px; background: var(--surface); }
.events-dark .event-date { background: #2a2825; }
.event-day { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.event-month { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); }
.events-dark .event-month, .events-dark .event-desc, .events-dark .event-kind { color: #a8a39b; }
.event-kind { font-size: 0.75rem; font-weight: 600; color: var(--ink-2); margin: 0 0 2px; text-transform: uppercase; letter-spacing: 0.06em; }
.event-title { margin: 0; font-size: 1rem; }
.event-desc { margin: 4px 0 0; font-size: 0.875rem; color: var(--ink-2); }
.event-price { font-weight: 700; font-size: 0.95rem; white-space: nowrap; }
@media (max-width: 520px) { .event { grid-template-columns: 56px 1fr; } .event-price { grid-column: 2; } }

/* Shop */
.shop { padding-top: clamp(28px, 4vw, 48px); padding-bottom: 80px; }
.shop-head { margin-bottom: 24px; }
.shop-head h1 { font-size: clamp(1.8rem, 3.6vw, 2.75rem); margin-bottom: 4px; }
/* Shop tabs: pastel cards, one color per tab (--tab-*); unknown tabs get the lavender default. */
.sandbox-bar {
  padding: 6px var(--gutter); background: #fff4c2; color: #6b4e00; border-bottom: 1px solid #f0dc8a;
  font-size: 0.82rem; font-weight: 600; text-align: center;
}
.shop-tabs {
  display: flex; gap: 12px; margin: 0 calc(-1 * var(--gutter)) 28px; padding: 4px var(--gutter) 8px;
  overflow-x: auto; scrollbar-width: none;
}
.shop-tabs::-webkit-scrollbar { display: none; }
.shop-tab {
  --tab-bg: #f1edfb; --tab-strong: #e3dbf7; --tab-ink: #5b3fa3; --tab-ring: #c9b9ef;
  display: flex; align-items: center; gap: 12px; flex: 0 0 auto; min-width: 180px;
  padding: 12px 20px 12px 12px; border-radius: 18px; border: 1.5px solid transparent;
  background: var(--tab-bg); color: var(--ink);
  transition: background-color 0.18s, border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
.shop-tab[data-tab="whiskys"] { --tab-bg: #fdf1e3; --tab-strong: #fbe1c4; --tab-ink: #9a4a0c; --tab-ring: #f2c08e; }
.shop-tab[data-tab="cristaleria"] { --tab-bg: #e9f4fb; --tab-strong: #d3e9f7; --tab-ink: #1f5f8b; --tab-ring: #a9d2ee; }
.shop-tab:hover { background: var(--tab-strong); transform: translateY(-1px); }
.shop-tab[aria-current="page"], .shop-tab.is-active {
  background: var(--tab-strong); border-color: var(--tab-ring);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 6px 18px -6px var(--tab-ring);
}
.shop-tab-icon {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 14px;
  background: #fff; color: var(--tab-ink); box-shadow: 0 1px 2px rgb(0 0 0 / 0.06);
}
.shop-tab-text { display: grid; line-height: 1.25; }
.shop-tab-label { font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; }
.shop-tab-count { font-size: 0.8rem; color: var(--ink-2); }
.shop-tab[aria-current="page"] .shop-tab-label, .shop-tab.is-active .shop-tab-label { color: var(--tab-ink); }

/* Tab animations: the cards rise in one after another; on hover a shine sweeps across and each icon moves its own
   way (whisky swirls in the glass, the Glencairn clinks with a sparkle, the shirt swings on its hanger); the current
   tab breathes a soft glow. All off with prefers-reduced-motion. */
.shop-tab { position: relative; overflow: hidden; animation: tab-rise 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
.shop-tab:nth-child(2) { animation-delay: 0.09s; }
.shop-tab:nth-child(3) { animation-delay: 0.18s; }
.shop-tab:nth-child(4) { animation-delay: 0.27s; }
@keyframes tab-rise { from { opacity: 0; transform: translateY(14px) scale(0.97); } }
.shop-tab:hover { transform: translateY(-3px); box-shadow: 0 10px 24px -12px var(--tab-ring); }
.shop-tab::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / 0.7) 48%, rgb(255 255 255 / 0.15) 56%, transparent 70%);
  transform: translateX(-110%);
}
.shop-tab:hover::after { transform: translateX(110%); transition: transform 0.75s ease; }
.shop-tab-icon { position: relative; transition: transform 0.2s; }
.shop-tab-icon svg { transform-origin: 50% 85%; }
.shop-tab:hover .shop-tab-icon { transform: scale(1.06); }
.shop-tab[data-tab="whiskys"]:hover .shop-tab-icon svg { animation: icon-swirl 0.9s ease-in-out; }
.shop-tab[data-tab="cristaleria"]:hover .shop-tab-icon svg { animation: icon-clink 0.8s ease-in-out; }
.shop-tab[data-tab="ropa"] .shop-tab-icon svg { transform-origin: 50% 8%; }
.shop-tab[data-tab="ropa"]:hover .shop-tab-icon svg { animation: icon-sway 1.1s ease-in-out; }
@keyframes icon-swirl {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-14deg); }
  45% { transform: rotate(10deg); }
  70% { transform: rotate(-5deg); }
  85% { transform: rotate(2deg); }
}
@keyframes icon-clink {
  0%, 100% { transform: translateY(0) rotate(0); }
  30% { transform: translateY(-4px) rotate(-12deg); }
  55% { transform: translateY(-1px) rotate(7deg); }
  75% { transform: rotate(-3deg); }
}
@keyframes icon-sway {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(12deg); }
  42% { transform: rotate(-9deg); }
  62% { transform: rotate(5deg); }
  80% { transform: rotate(-2deg); }
}
/* Cristalería: a little four-point sparkle pops at the rim of the glass. */
.shop-tab[data-tab="cristaleria"] .shop-tab-icon::after {
  content: ""; position: absolute; top: 6px; right: 7px; width: 10px; height: 10px; background: #7cc4ef;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  transform: scale(0) rotate(0); opacity: 0;
}
.shop-tab[data-tab="cristaleria"]:hover .shop-tab-icon::after { animation: sparkle 0.8s ease-out 0.15s; }
@keyframes sparkle {
  0% { transform: scale(0) rotate(0); opacity: 0; }
  40% { transform: scale(1.2) rotate(45deg); opacity: 1; }
  100% { transform: scale(0) rotate(90deg); opacity: 0; }
}
/* The current tab breathes a soft glow in its own color. */
.shop-tab[aria-current="page"], .shop-tab.is-active { animation: tab-rise 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) backwards, tab-glow 3.2s ease-in-out 0.8s infinite; }
@keyframes tab-glow {
  0%, 100% { box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 6px 18px -6px var(--tab-ring); }
  50% { box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 8px 26px -4px var(--tab-ring); }
}
@media (prefers-reduced-motion: reduce) {
  .shop-tab, .shop-tab[aria-current="page"], .shop-tab.is-active, .shop-tab-icon svg, .shop-tab-icon::after { animation: none !important; transition: none; }
  .shop-tab:hover { transform: none; }
  .shop-tab::after { display: none; }
}
.shop-layout { display: grid; gap: 24px; }
@media (min-width: 900px) { .shop-layout { grid-template-columns: 240px 1fr; gap: 40px; } }
.filters { align-self: start; }
.filters-toggle {
  list-style: none; display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--line); font-weight: 600; cursor: pointer;
}
.filters-toggle::-webkit-details-marker { display: none; }
.filters-body { padding-top: 16px; }
@media (min-width: 900px) {
  .filters { position: sticky; top: var(--sticky-top); max-height: calc(100vh - var(--sticky-top) - 18px); overflow: auto; }
  .filters-toggle { display: none; }
  .filters-body { padding-top: 0; }
}
fieldset { border: 0; padding: 0; margin: 0 0 24px; }
legend { font-weight: 700; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; }
.check { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 0.925rem; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--ink); margin: 0; flex-shrink: 0; }
.check .count { margin-left: auto; color: var(--ink-2); font-size: 0.8rem; }
.results { min-width: 0; }
.results-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; min-height: 40px; }
.active-filters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.clear { font-size: 0.85rem; text-decoration: underline; color: var(--ink-2); margin-left: 4px; }
.sort { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; color: var(--ink-2); margin-left: auto; }
.sort select { height: 40px; border-radius: 999px; border: 1px solid var(--line); padding: 0 12px; background: #fff; color: var(--ink); }
.empty { text-align: center; padding: 64px 16px; background: var(--surface); border-radius: var(--radius); }
.pager { display: flex; justify-content: space-between; align-items: center; margin-top: 48px; }

/* Product page */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; padding: 20px 0 0; font-size: 0.85rem; color: var(--ink-2); }
.crumbs a:hover { color: var(--ink); }
.crumbs a + a::before { content: "/"; margin-right: 8px; color: var(--line); }
.product { display: grid; gap: clamp(24px, 5vw, 64px); padding-top: 20px; padding-bottom: clamp(48px, 7vw, 88px); }
.product-media { position: relative; aspect-ratio: 1; background: var(--surface); border-radius: 24px; overflow: hidden; align-self: start; }
@media (min-width: 900px) { .product { grid-template-columns: 1.05fr 1fr; align-items: start; } .product-media { position: sticky; top: var(--sticky-top); } }
.product-media img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; padding: 8%; }
.product-media .badges { top: 16px; left: 16px; }
.product-info h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 16px; }
.product-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.tag { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 999px; background: var(--surface); font-size: 0.85rem; font-weight: 550; }
.product-price { font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 20px; }
.product-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.product-actions .btn { flex: 1 1 220px; }
.product-desc { margin-top: 28px; font-size: 1.05rem; line-height: 1.7; }
.specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 28px 0 0; border-top: 1px solid var(--line); }
.specs div { padding: 14px 0; border-bottom: 1px solid var(--line); }
.specs div:nth-child(odd) { padding-right: 16px; }
.specs dt { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); font-weight: 600; }
.specs dd { margin: 2px 0 0; font-weight: 550; }
.notes { display: grid; gap: 16px; margin-top: 16px; }
@media (min-width: 860px) { .notes { grid-template-columns: repeat(3, 1fr); } }
.note { background: #fff; border-radius: var(--radius); padding: 28px; }
.note h2, .note h3 { font-size: 1.25rem; }
.note p { color: var(--ink-2); margin: 0; }

/* Prose, FAQ, contact */
.prose h2 { font-size: 1.4rem; margin-top: 1.6em; }
.prose h2:first-child { margin-top: 0; }
.prose li { margin-bottom: 6px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { padding: 20px 0; font-weight: 650; font-size: 1.05rem; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 400; font-size: 1.4rem; line-height: 1; color: var(--ink-2); }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--ink-2); padding-bottom: 12px; }
.contact-links { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 8px; }
.contact-links a { display: block; padding: 16px 20px; border-radius: var(--radius); border: 1px solid var(--line); font-weight: 550; }
.contact-links a:hover { border-color: var(--ink); }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding: 56px 0 24px; margin-top: 0; }
.footer-grid { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.footer-grid > div:first-child { grid-column: 1 / -1; max-width: 360px; }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.6fr repeat(3, 1fr); } .footer-grid > div:first-child { grid-column: auto; } }
.footer-grid h2 { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 12px; }
.footer-grid a:not(.logo) { display: block; padding: 4px 0; color: var(--ink-2); font-size: 0.925rem; }
.footer-grid a:hover { color: var(--ink); }
.logo-footer { margin-bottom: 14px; }
.logo-footer .logo-mark { width: 56px; height: 56px; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 0.8125rem; color: var(--ink-2); }
.social { display: flex; gap: 16px; }
.social a:hover { color: var(--ink); }

/* List drawer */
.drawer { position: fixed; inset: 0; z-index: 60; visibility: hidden; }
.drawer[aria-hidden="false"] { visibility: visible; }
.drawer-backdrop { position: absolute; inset: 0; background: rgb(0 0 0 / 0.35); opacity: 0; transition: opacity 0.25s; }
.drawer[aria-hidden="false"] .drawer-backdrop { opacity: 1; }
.drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%); background: #fff;
  display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.3s cubic-bezier(.2,.8,.2,1);
}
.drawer[aria-hidden="false"] .drawer-panel { transform: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.drawer-head h2 { margin: 0; font-size: 1.25rem; }
.drawer-body { flex: 1; overflow: auto; padding: 8px 20px; }
.drawer-foot { padding: 20px; border-top: 1px solid var(--line); }
.drawer-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.drawer-total strong { font-size: 1.4rem; letter-spacing: -0.02em; }
.line { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.line img { width: 64px; height: 64px; border-radius: 10px; background: var(--surface); object-fit: contain; mix-blend-mode: multiply; padding: 4px; }
.line-name { font-weight: 600; font-size: 0.925rem; line-height: 1.3; margin: 0 0 6px; }
.line-name a:hover { text-decoration: underline; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; height: 32px; }
.qty button { width: 30px; height: 30px; border: 0; background: none; cursor: pointer; font-size: 1rem; border-radius: 50%; }
.qty button:hover { background: var(--surface); }
.qty span { min-width: 22px; text-align: center; font-size: 0.875rem; font-weight: 600; }
.line-price { text-align: right; font-weight: 650; font-size: 0.925rem; }
.line-remove { display: block; margin-top: 6px; margin-left: auto; border: 0; background: none; color: var(--ink-2); font-size: 0.8rem; text-decoration: underline; cursor: pointer; }
.list-empty { text-align: center; padding: 48px 8px; color: var(--ink-2); }
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 70; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 999px; font-size: 0.9rem; font-weight: 550;
  transition: all 0.25s; box-shadow: var(--shadow); max-width: calc(100% - 32px);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
body.locked { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

/* Header account link */
.account-link { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 4px; border-radius: 999px; font-weight: 600; font-size: 0.9rem; }
.account-link:hover { background: var(--surface); }
.account-signin { padding: 0 14px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 0.85rem; }
.account-label { display: none; }
@media (min-width: 640px) { .account-label { display: inline; } }
@media (max-width: 420px) { .account-signin { padding: 0 8px; font-size: 0.85rem; } }

/* Forms */
.section-tight { padding-top: 16px; }
.underline { text-decoration: underline; text-underline-offset: 2px; }
.form { display: grid; gap: 8px; }
.form-section { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin: 0 0 12px; display: grid; gap: 4px; }
.form-section legend { padding: 0 6px; margin-left: -6px; }
.form-row { display: grid; gap: 0 16px; }
@media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; } .form-row-3 { grid-template-columns: repeat(3, 1fr); } }
.field { display: grid; gap: 6px; margin-bottom: 12px; min-width: 0; }
.field label { font-weight: 600; font-size: 0.9rem; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; font-size: 1rem; transition: border-color 0.15s, box-shadow 0.15s;
}
.field textarea { resize: vertical; min-height: 88px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgb(18 17 16 / 0.08); }
.field select:disabled { background: var(--surface); color: var(--ink-2); }
.field-hint { margin: 0; font-size: 0.8125rem; color: var(--ink-2); }
.field-error { margin: 0; font-size: 0.8125rem; color: #b42318; font-weight: 550; }
.has-error input, .has-error select, .has-error textarea { border-color: #d92d20; }
.form-error { background: #fef3f2; color: #b42318; border: 1px solid #fecdca; padding: 12px 16px; border-radius: var(--radius-sm); font-weight: 550; margin-bottom: 8px; }
.check-card { align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 8px; }
.check-card:has(input:checked) { border-color: var(--ink); background: var(--surface); }
.check-card input { margin-top: 3px; }
.check-card > span { display: grid; gap: 2px; }
.check-card .muted { font-size: 0.85rem; }
form[inert] { opacity: 0.35; filter: blur(2px); }

/* 18+ gate */
.age-gate { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgb(18 17 16 / 0.72); backdrop-filter: blur(6px); }
.age-card { background: #fff; border-radius: 24px; padding: clamp(28px, 5vw, 44px); max-width: 460px; width: 100%; text-align: center; box-shadow: 0 20px 60px rgb(0 0 0 / 0.3); }
.age-card img { margin: 0 auto 16px; }
.age-card h2 { font-size: clamp(1.35rem, 3vw, 1.6rem); }
.age-actions { display: grid; gap: 10px; margin-top: 24px; }

/* Sign-in & account */
.auth-wrap { display: grid; place-items: center; }
.auth-card { width: 100%; max-width: 420px; padding: clamp(24px, 5vw, 40px); border: 1px solid var(--line); border-radius: 24px; }
.auth-card h1 { font-size: 1.75rem; text-align: center; }
.auth-logo { margin: 0 auto 8px; }
.notice { padding: 12px 16px; border-radius: var(--radius-sm); font-weight: 550; }
.notice-ok { background: #ecfdf3; color: #067647; border: 1px solid #abefc6; }
.account { display: grid; gap: 24px; }
.status-card { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 20px; border-radius: var(--radius); background: var(--surface); }
.status-card p { margin: 0; flex: 1 1 260px; }
.account .specs { margin: 0; }
.span-2 { grid-column: 1 / -1; }
.prefs { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); justify-items: start; }
.prefs h2 { font-size: 1.15rem; margin: 0 0 4px; }
.role { display: inline-block; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 9px; border-radius: 6px; }
.role-pending { background: #fef0c7; color: #93370d; }
.role-public { background: var(--surface-2); color: var(--ink); }
.role-patreon { background: var(--accent); color: #fff; }
.role-admin { background: var(--ink); color: #fff; }
.club-access { text-align: center; margin-top: 16px; }

/* Members-only events */
.event-locked .event-title { color: var(--ink-2); }
.events-dark .event-locked .event-title { color: #a8a39b; }
.events-dark .event-desc a { color: #fff; }

/* Admin */
.admin { padding-top: clamp(28px, 4vw, 48px); padding-bottom: 80px; }
.admin-head h1 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 24px; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.tabs a { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 999px; font-weight: 600; font-size: 0.9rem; color: var(--ink-2); }
.tabs a span { font-size: 0.75rem; background: var(--surface-2); color: var(--ink); border-radius: 999px; padding: 1px 8px; }
.tabs a:hover { color: var(--ink); background: var(--surface); }
.tabs a[aria-current="page"] { background: var(--ink); color: #fff; }
.tabs a[aria-current="page"] span { background: rgb(255 255 255 / 0.2); color: #fff; }
.tabs a.tab-alert span { background: var(--accent); color: #fff; }
.user-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.user-card { display: grid; gap: 16px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); }
@media (min-width: 860px) { .user-card { grid-template-columns: 1fr 220px; align-items: start; } }
.user-name { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 1.1rem; }
.user-sub { margin: 2px 0 12px; font-size: 0.9rem; }
.user-sub a:hover { text-decoration: underline; }
.user-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 10px 20px; margin: 0; }
.user-facts dt { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); font-weight: 600; }
.user-facts dd { margin: 2px 0 0; font-size: 0.9rem; }
.user-actions { display: grid; gap: 8px; align-content: start; }
.user-actions .fine { margin: 0; }
.user-actions select { height: 44px; border-radius: var(--radius-sm); border: 1px solid var(--line); padding: 0 12px; background: #fff; }

/* Keep header items on one line (the sections have their own row, so the search always fits). */
.nav a, .list-btn, .account-link { white-space: nowrap; }
.field { align-content: start; }

/* Show/hide password */
.pw { position: relative; }
.pw input { padding-right: 52px; }
.pw-toggle {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%); width: 42px; height: 38px;
  display: grid; place-items: center; border: 0; background: none; border-radius: 8px; color: var(--ink-2); cursor: pointer;
}
.pw-toggle:hover { background: var(--surface); color: var(--ink); }
.pw-toggle .eye-closed, .pw-toggle[aria-pressed="true"] .eye-open { display: none; }
.pw-toggle[aria-pressed="true"] .eye-closed { display: block; }
.input-date { max-width: 220px; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }

/* Photo field */
.photo-pick { display: flex; align-items: center; gap: 16px; }
.photo-preview {
  width: 88px; height: 88px; flex-shrink: 0; border-radius: 50%; overflow: hidden; background: var(--surface);
  display: grid; place-items: center; color: var(--ink-2); border: 1px dashed var(--line);
}
.photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.photo-controls { min-width: 0; display: grid; gap: 4px; }
.photo-controls input[type="file"] { min-height: 0; padding: 8px; font-size: 0.875rem; }
.photo-controls .fine { margin: 0; }
.photo-note {
  display: flex; gap: 10px; align-items: flex-start; margin: 6px 0 0; padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--accent-soft); color: #7a3608; font-size: 0.85rem; line-height: 1.5;
}
.photo-note svg { flex-shrink: 0; margin-top: 2px; }
.avatar-lg { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }

/* Login extras */
.forgot-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 0.875rem; margin: 4px 0; }
.auth-card .notice { margin-bottom: 12px; }

/* Admin: photo column, new badge, extra roles */
@media (min-width: 860px) { .user-card { grid-template-columns: 88px 1fr 220px; } }
.user-photo img { width: 88px; height: 88px; border-radius: 12px; object-fit: cover; display: block; }
.no-photo {
  width: 88px; height: 88px; border-radius: 12px; background: var(--surface); color: var(--ink-2);
  display: grid; place-items: center; font-size: 0.75rem; text-align: center;
}
.role-new { background: #fef0c7; color: #93370d; }
.more-roles summary { cursor: pointer; list-style: none; text-decoration: underline; }
.more-roles summary::-webkit-details-marker { display: none; }
.more-roles > div { display: grid; gap: 6px; margin-top: 8px; }
.file-btn { position: relative; overflow: hidden; justify-self: start; }
.file-btn input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.file-btn:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.file-name { font-size: 0.85rem; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Patreon prices */
.price-block { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.price-patreon { font-size: 0.75rem; color: var(--ink-2); white-space: nowrap; }
.price-patreon strong { color: var(--accent); font-weight: 700; }
.price-patreon.is-mine { color: var(--accent); font-weight: 600; }
.price-block-lg .price { font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; }
.price-block-lg .price-patreon {
  font-size: 0.95rem; margin-top: 6px; padding: 6px 12px; border-radius: 999px; background: var(--accent-soft); align-self: flex-start;
}
.product-price { margin-bottom: 20px; }
.card-foot { align-items: flex-end; }

/* Header admin shortcut */
.admin-link { color: var(--ink); }
.admin-link svg { flex-shrink: 0; }
@media (max-width: 1023px) { .admin-link { display: none; } }

/* Admin dashboard tiles */
.admin-back { display: inline-block; font-size: 0.875rem; font-weight: 600; color: var(--ink-2); margin-bottom: 10px; }
.admin-back:hover { color: var(--ink); }
.admin-tiles { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); margin-top: 8px; }
.admin-tile {
  position: relative; display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: 20px;
  border: 1px solid var(--line); background: #fff; transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; min-height: 210px;
}
.admin-tile:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow); }
.admin-tile-icon {
  width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--surface); color: var(--ink); margin-bottom: 6px;
}
.admin-tile.has-alert .admin-tile-icon { background: var(--accent); color: #fff; }
.admin-tile-title { font-size: 1.15rem; font-weight: 750; letter-spacing: -0.01em; }
.admin-tile-text { font-size: 0.9rem; color: var(--ink-2); flex: 1; }
.admin-tile-badge { align-self: flex-start; font-size: 0.8rem; font-weight: 650; padding: 4px 10px; border-radius: 999px; background: var(--surface); }
.admin-tile-badge.is-alert { background: var(--accent-soft); color: #7a3608; }

/* Role picker */
.role-picker { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.role-picker legend { margin-bottom: 6px; text-transform: none; letter-spacing: 0; font-weight: 600; }
.role-option {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer;
}
.role-option:has(input:checked) { border-color: var(--ink); background: var(--surface); }
.role-option input { accent-color: var(--ink); width: 16px; height: 16px; margin: 0; flex-shrink: 0; }
.role-option span { display: grid; line-height: 1.25; }
.role-option strong { font-size: 0.9rem; }
.role-option small { font-size: 0.75rem; color: var(--ink-2); }
@media (min-width: 860px) { .user-card { grid-template-columns: 88px 1fr 250px; } }
.user-whiskiteca { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 0.875rem; font-weight: 600; }
.user-whiskiteca svg { width: 18px; height: 18px; }
.user-whiskiteca:hover { text-decoration: underline; }

/* Patreon levels table */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.levels-table { width: 100%; border-collapse: collapse; min-width: 860px; }
.levels-table th, .levels-table td { padding: 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.levels-table thead th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); background: var(--surface); }
.levels-table thead small { text-transform: none; letter-spacing: 0; font-weight: 500; }
.levels-table tbody tr:last-child > * { border-bottom: 0; }
.levels-table input:not([type="checkbox"]), .levels-table textarea {
  width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: 0.9rem;
}
.levels-table input[type="number"] { max-width: 130px; }
.levels-table textarea { min-width: 260px; resize: vertical; }
.levels-table input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--ink); margin-top: 10px; }
.levels-table td.center, .levels-table th.center { text-align: center; }
.levels-table td.center a { display: inline-block; margin-top: 10px; font-weight: 700; text-decoration: underline; }
.levels-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 20px; }
.levels-actions .fine { margin: 0; }
.patreon-level-badge {
  display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 8px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 800; font-size: 0.85rem;
}

/* Orders */
.order-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.order-card { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); display: grid; gap: 10px; }
.order-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.order-user { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.order-user a { font-weight: 650; text-decoration: underline; }
.order-items { list-style: none; padding: 12px 14px; margin: 0; background: var(--surface); border-radius: var(--radius-sm); display: grid; gap: 6px; }
.order-items a:hover { text-decoration: underline; }
.qty-badge { display: inline-block; min-width: 32px; font-weight: 700; color: var(--accent); }
.order-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.add-bottle { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 20px; display: grid; gap: 10px; }
.add-bottle-row { display: grid; grid-template-columns: 1fr 90px auto; gap: 8px; }
.add-bottle-row input { min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
@media (max-width: 560px) { .add-bottle-row { grid-template-columns: 1fr 80px; } .add-bottle-row .btn { grid-column: 1 / -1; } }
.link-danger { border: 0; background: none; color: #b42318; text-decoration: underline; cursor: pointer; font-size: 0.875rem; }

/* Patreon profile card & Whiskiteca */
.patreon-card { padding: clamp(20px, 4vw, 32px); border-radius: 24px; background: var(--ink); color: #fff; }
.patreon-card .eyebrow { color: #f0a560; margin: 0; }
.patreon-card h2 { margin: 0; font-size: 1.6rem; }
.patreon-card h3 { font-size: 1rem; margin: 20px 0 10px; }
.patreon-card .ticks li::before { color: #f0a560; }
.patreon-card-head { display: flex; align-items: center; gap: 14px; }
/* The Patreon logo: a white rounded square with the "P" cut out, cropped from the brand image (public/img/patreon.webp). */
.patreon-card-logo { display: block; flex: none; width: 56px; height: 56px; }
.patreon-card-head .patreon-level-badge { margin-left: auto; }
.patreon-perks { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 20px; }
.perk { padding: 14px; border-radius: 14px; background: #1f1e1c; display: grid; gap: 2px; }
.perk strong { font-size: 1.2rem; letter-spacing: -0.02em; }
.perk span { font-size: 0.8rem; color: #bdb8b0; }
.perk-off strong { color: #8a857d; }
.patreon-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.patreon-card .btn-primary { background: #fff; color: var(--ink); }
.patreon-card .btn-ghost { background: transparent; color: #fff; border-color: #3a3835; }
.whiskiteca-item { display: grid; gap: 6px; align-content: start; }
.whiskiteca-meta { margin: 0; font-size: 0.8rem; color: var(--accent); font-weight: 600; }
.tier-benefits { margin: 4px 0 0; font-size: 0.9rem; gap: 6px; }
.tier:last-child .tier-benefits li::before { color: #f0a560; }
textarea { font: inherit; }

/* "Precio Regular" label: inline and small on cards, its own line above the big price on product pages */
.price-label { font-size: 0.75rem; font-weight: 500; color: var(--ink-2); letter-spacing: 0; }
.price-block-lg .price-label { display: block; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 2px; }

/* Patreon price invitation (non-members): shown while hovering or focusing the Patreon price */
.has-tip { position: relative; cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; border-radius: 4px; }
.has-tip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.patreon-tip {
  position: absolute; left: 0; bottom: 100%; z-index: 30; padding-bottom: 10px; /* invisible bridge keeps it open while moving onto it */
  width: max-content; max-width: min(300px, calc(100vw - 32px));
  display: none; /* takes no space while closed (an invisible tip would still widen the page on phones) */
  cursor: auto; white-space: normal; text-align: left;
}
.patreon-tip-inner {
  display: block; padding: 14px 16px; border-radius: 14px; background: var(--ink); color: #fff;
  font-size: 0.8125rem; font-weight: 450; line-height: 1.5; box-shadow: 0 12px 32px rgb(0 0 0 / 0.25);
}
.patreon-tip-inner::after {
  content: ""; position: absolute; left: 24px; bottom: 4px; width: 12px; height: 12px; background: var(--ink); transform: rotate(45deg);
}
.patreon-tip a { color: #f0a560; text-decoration: underline; word-break: break-all; font-weight: 600; }
.has-tip:hover .patreon-tip, .has-tip:focus-within .patreon-tip { display: block; animation: tip-in 0.15s ease-out; }
@keyframes tip-in { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .has-tip .patreon-tip { animation: none; } }
.patreon-tip.align-right { left: auto; right: 0; }
.patreon-tip.align-right .patreon-tip-inner::after { left: auto; right: 24px; }
.price-block-lg .has-tip { text-decoration-thickness: 1px; }
.patreon-tip { max-width: min(330px, calc(100vw - 32px)); }
.patreon-tip a { word-break: normal; white-space: nowrap; display: inline-block; }

/* Orders: list cards + confirmation page */
.order-link { display: grid; gap: 8px; color: inherit; transition: border-color 0.15s; }
.order-link:hover { border-color: var(--ink); }
.order-summary { margin: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.order-status { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; padding: 14px 18px; border-radius: var(--radius); margin-bottom: 16px; }
.order-status-pending { background: #fef0c7; color: #93370d; }
.order-status-confirmed { background: #ecfdf3; color: #067647; }
.order-status-cancelled { background: var(--surface); color: var(--ink-2); }
.order-customer { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 16px; display: grid; gap: 12px; }
.order-table { min-width: 640px; }
.order-table .num { text-align: right; white-space: nowrap; }
.order-table a:hover { text-decoration: underline; }
.order-totals { margin-top: 16px; display: grid; gap: 16px; justify-items: end; }
.order-totals dl { margin: 0; width: min(100%, 440px); display: grid; }
.order-totals dl > div { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.order-totals dt { color: var(--ink-2); font-size: 0.925rem; }
.order-totals dt small { font-size: 0.8rem; }
.order-totals dd { margin: 0; font-weight: 600; white-space: nowrap; }
.order-total { border-bottom: 0 !important; }
.order-total dt { color: var(--ink); font-weight: 700; font-size: 1.05rem; }
.order-total dd { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; }
.order-totals .order-actions { justify-content: flex-end; }
.credit-input { display: inline-flex; align-items: center; gap: 4px; }
.credit-input input { width: 120px; height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; text-align: right; font-weight: 600; }

/* Credits on the member admin page */
.credits-box { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 20px; display: grid; gap: 14px; }
.credits-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.credits-head h2 { font-size: 1.1rem; margin: 0 0 2px; }
.credits-balance { margin: 0; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; }
.credits-balance span { font-size: 0.9rem; font-weight: 500; color: var(--ink-2); letter-spacing: 0; }
.credits-form { display: flex; flex-wrap: wrap; gap: 8px; }
.credits-form input { height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); min-width: 0; }
.credits-form input[name="monto"] { width: 210px; }
.credits-form input[name="motivo"] { width: 200px; }
.credit-history { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: 0.9rem; }
.credit-history li { display: grid; grid-template-columns: 110px 1fr auto; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.credit-plus { color: #067647; font-weight: 700; }
.credit-minus { color: #b42318; font-weight: 700; }
@media (max-width: 560px) { .credit-history li { grid-template-columns: 90px 1fr; } .credit-history li .muted { grid-column: 2; } }

/* Order table on phones: one card per whisky with labelled values (opened from WhatsApp) */
@media (max-width: 640px) {
  .order-table { min-width: 0; }
  .order-table thead { display: none; }
  .order-table, .order-table tbody, .order-table tr, .order-table td { display: block; width: 100%; }
  .order-table tr { padding: 12px 14px; border-bottom: 1px solid var(--line); }
  .order-table tbody tr:last-child { border-bottom: 0; }
  .order-table td { border: 0; padding: 3px 0; }
  .order-table td.order-name { font-weight: 650; padding-bottom: 6px; }
  .order-table td.num { display: flex; justify-content: space-between; text-align: right; }
  .order-table td.num::before { content: attr(data-label); color: var(--ink-2); font-size: 0.875rem; }
  .order-totals { justify-items: stretch; }
  .order-totals .order-actions { display: grid; }
  .order-totals .order-actions .btn { white-space: normal; height: auto; min-height: 52px; padding: 10px 18px; }
}

/* Admin: patreon.com connection */
.patreon-setup { align-items: start; margin-top: 8px; }
.steps { margin: 0; padding-left: 22px; display: grid; gap: 14px; }
.steps li { padding-left: 4px; line-height: 1.55; }
.steps code { background: var(--surface); padding: 2px 6px; border-radius: 6px; font-size: 0.85em; word-break: break-all; }
.patreon-connect { padding: 24px; border: 1px solid var(--line); border-radius: 20px; }
.patreon-status { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 16px; }
.patreon-status-main { display: flex; gap: 14px; align-items: flex-start; }
.patreon-status-main p { margin: 2px 0 0; font-size: 0.9rem; }
.patreon-status-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.conn-dot { width: 12px; height: 12px; border-radius: 50%; background: #17b26a; margin-top: 6px; box-shadow: 0 0 0 4px #dcfae6; flex-shrink: 0; }
.patreon-table { min-width: 1100px; }
.patreon-table td { vertical-align: middle; }
.small { font-size: 0.8rem; }
.pstatus { display: inline-block; font-size: 0.75rem; font-weight: 650; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.st-active { background: #dcfae6; color: #067647; }
.st-declined { background: #fef0c7; color: #93370d; }
.st-former { background: #fee4e2; color: #b42318; }
.st-follower { background: var(--surface); color: var(--ink-2); }
.st-declined-text { color: #b42318; }
.update-creds { margin-top: 32px; }
.update-creds summary { cursor: pointer; font-weight: 600; color: var(--ink-2); margin-bottom: 12px; }

/* 30-day cancellation rule: soft red rows */
.patreon-table tr.row-cancel > * { background: #fef3f2; }
.patreon-table tr.row-cancel > :first-child { box-shadow: inset 3px 0 0 #f97066; }
.rule-note { display: flex; gap: 10px; align-items: flex-start; font-size: 0.875rem; color: var(--ink-2); margin: 0 0 14px; }
.rule-swatch { width: 14px; height: 14px; border-radius: 4px; background: #fef3f2; border: 1px solid #fda29b; flex-shrink: 0; margin-top: 3px; }

/* Declined-payment notices */
.notice-cell { display: grid; gap: 2px; margin-top: 6px; }
.notice-sent { color: #067647; }
.btn-link { border: 0; background: none; padding: 0; color: var(--ink); text-decoration: underline; font-size: 0.8rem; font-weight: 600; cursor: pointer; text-align: left; }
.btn-link:hover { color: var(--accent); }
.mail-preview { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; background: #fff; max-width: 720px; }
.mail-preview p { margin: 0 0 10px; font-size: 0.9rem; }
.mail-preview pre { margin: 0; white-space: pre-wrap; font: inherit; font-size: 0.9rem; line-height: 1.6; color: var(--ink); }
.demotions { margin-top: 28px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); }
.demotions h2 { font-size: 1.1rem; margin: 0 0 10px; }

/* Patreon invitations */
.invite-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 16px 18px; border-radius: var(--radius); background: var(--accent-soft); margin-bottom: 14px; }
.invite-bar p { margin: 0; font-size: 0.9rem; max-width: 640px; }
.btn-sm { height: 32px; padding: 0 14px; font-size: 0.8125rem; margin-top: 4px; }
.patreon-hint { margin: 10px 0 0; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--accent-soft); font-size: 0.875rem; color: #7a3608; }
.patreon-hint.is-inactive { background: var(--surface); color: var(--ink-2); }

/* Admin: email */
.conn-dot.is-off { background: #f79009; box-shadow: 0 0 0 4px #fef0c7; }
.mail-test { display: flex; flex-wrap: wrap; gap: 8px; }
.mail-test input { height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); min-width: 240px; }
.mail-steps code { white-space: nowrap; }
.dns-table { min-width: 760px; }
.dns-value { word-break: break-all; white-space: normal; font-size: 0.8rem; }

/* Purchase orders */
.po-toolbar { margin-bottom: 16px; }
.po-back { margin: -8px 0 16px; font-size: 0.875rem; }
.po-table { min-width: 1500px; }
.po-toolbar { display: flex; align-items: center; gap: 16px; }
.po-table .num { text-align: right; white-space: nowrap; }
@media (min-width: 900px) { .form-row-4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 640px) and (max-width: 899px) { .form-row-4 { grid-template-columns: 1fr 1fr; } }
.po-results { background: var(--surface); }
.field input.calc { background: #fff; border-style: dashed; color: var(--ink); font-weight: 700; cursor: default; }
.field input.calc-strong { border: 2px solid var(--ink); font-size: 1.1rem; }
.po-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.po-delete { margin-top: 24px; }
/* Wide admin tables (PO list): use the full screen width; keep cells on one line */
.admin-wide { max-width: none; }
.po-table { min-width: 0; }
.po-table th, .po-table td { white-space: nowrap; }
.po-table thead th { font-size: 0.7rem; }
.po-table th, .po-table td { padding: 10px 9px; }

/* Inventory */
.inv-actions { display: grid; gap: 16px; margin-bottom: 28px; }
@media (min-width: 900px) { .inv-actions { grid-template-columns: 1.4fr 1fr; } }
.inv-card { padding: 22px; border: 1px solid var(--line); border-radius: 20px; display: grid; gap: 10px; align-content: start; }
.inv-card h2 { font-size: 1.2rem; margin: 0; }
.inv-card .fine { margin: 0; }
.inv-card .field select { min-height: 46px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.inv-card > .btn { justify-self: start; }
.inv-list-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.inv-list-head h2 { font-size: 1.2rem; margin: 0; }
.inv-search { display: flex; gap: 8px; }
.inv-search input { height: 42px; min-width: min(320px, 60vw); padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; }
.inv-table { min-width: 980px; }
.inv-table td { vertical-align: middle; }
.inv-table .num { text-align: right; white-space: nowrap; }
.inv-thumb { width: 40px; height: 40px; object-fit: contain; border-radius: 8px; background: var(--surface); mix-blend-mode: multiply; }
.inv-report { padding: 20px; border: 1px solid #abefc6; background: #f6fef9; border-radius: var(--radius); margin-bottom: 24px; display: grid; gap: 12px; }
.inv-report h2 { font-size: 1.15rem; margin: 0; }
.inv-stats { display: flex; flex-wrap: wrap; gap: 10px; }
.inv-stats div { padding: 10px 16px; border-radius: 12px; background: #fff; border: 1px solid var(--line); display: grid; min-width: 110px; }
.inv-stats strong { font-size: 1.5rem; letter-spacing: -0.02em; }
.inv-stats span { font-size: 0.8rem; color: var(--ink-2); }
.inv-stats .is-warn strong { color: #b42318; }
.inv-grid { display: grid; gap: 0 16px; }
@media (min-width: 720px) { .inv-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .inv-grid { grid-template-columns: repeat(3, 1fr); } .inv-grid .span-2 { grid-column: span 3; } }
.inv-photo { border-radius: 14px; width: 110px; height: 110px; }
.inv-photo img { object-fit: contain; mix-blend-mode: multiply; padding: 6px; }
.inv-nocost summary { cursor: pointer; font-weight: 600; color: #93370d; }
.inv-nocost .fine { margin: 8px 0 0; }
.inv-card button[disabled], .po-actions button[disabled] { opacity: 0.45; cursor: not-allowed; }

/* Desc Adicional (Patreon 3/4) in Mi lista */
.extra-check { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 0.8125rem; font-weight: 600; cursor: pointer; }
.extra-check input { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; }
.extra-check.is-off { color: var(--ink-2); cursor: not-allowed; font-weight: 500; }
.extra-count { display: block; font-size: 0.75rem; color: var(--accent); margin-top: 2px; }
.extra-note { display: block; font-size: 0.72rem; color: var(--ink-2); }
.extra-saved { display: block; font-size: 0.75rem; color: var(--accent); font-weight: 600; }
/* Mi lista: Desc aplicado tag + subtotal / descuento adicional rows */
.extra-applied { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: var(--accent-soft); color: #7a3608; font-size: 0.72rem; font-weight: 700; white-space: nowrap; }
.drawer-sum { display: grid; gap: 4px; margin-bottom: 8px; font-size: 0.9rem; color: var(--ink-2); }
.drawer-sum > div { display: flex; justify-content: space-between; }
.drawer-sum[hidden], .drawer-extra[hidden] { display: none; }
.drawer-extra { color: var(--accent); font-weight: 600; }
/* Desc Adicional warnings: modal message + "can't send" note in the drawer */
.notice { border: 0; border-radius: 20px; padding: 28px; max-width: 440px; width: calc(100% - 32px); box-shadow: 0 20px 60px rgb(0 0 0 / 0.3); }
.notice::backdrop { background: rgb(18 17 16 / 0.6); }
.notice p { margin: 0 0 20px; font-size: 1.02rem; line-height: 1.5; }
.drawer-block { margin: 0 0 8px; padding: 8px 12px; border-radius: 10px; background: #fdecea; color: #a12a1b; font-size: 0.85rem; font-weight: 600; }
.drawer-block[hidden] { display: none; }
.extra-count.over { color: #a12a1b; font-weight: 700; }
.drawer-sum > div[hidden] { display: none; }
/* Tipos de cambio: Editar / Eliminar in each row */
.row-actions { display: flex; gap: 14px; align-items: center; white-space: nowrap; }
.row-actions form { margin: 0; }
/* Admin user card: Patreon field + mismatch with patreon.com */
.patreon-field { margin-bottom: 10px; }
.patreon-field select { width: 100%; }
.patreon-mismatch { margin: 6px 0 0; color: #c0261a; font-size: 0.85rem; font-weight: 600; }
/* Tipos de cambio: automatic BAC rate box */
.fx-auto { display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 20px; padding: 18px 20px; border: 1px solid var(--line, #e7e3dc); border-radius: 16px; background: #fbfaf8; }
.fx-auto h2 { font-size: 1.05rem; margin: 0 0 6px; }
.fx-auto p { margin: 0 0 6px; max-width: 70ch; }
.fx-auto-error { color: #c0261a; font-weight: 600; }
/* Tipos de cambio: Fuente */
.fx-default { margin-top: 10px; }
.fx-source { overflow-wrap: anywhere; }
.po-table td.fx-fuente { font-size: 0.85rem; white-space: normal; }
.fx-fuente a { display: inline-block; max-width: 200px; word-break: break-all; }
/* SEO copy blocks */
.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; }
.why-buy { padding-bottom: 8px; }
.why-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.why-grid li { display: grid; gap: 4px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.why-grid strong { font-size: 1rem; }
.why-grid span { color: var(--ink-2); font-size: 0.9rem; line-height: 1.45; }
.buy-points { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; font-size: 0.9rem; color: var(--ink-2); }
.buy-points li::before { content: "✓"; color: var(--accent); font-weight: 700; margin-right: 8px; }
.shop-intro { max-width: 70ch; margin-top: 8px; color: var(--ink-2); }
.notes-title { margin: 4px 0 18px; }
.seo-copy a { text-decoration: underline; text-underline-offset: 2px; }
/* Admin users: one user per line */
.user-rows { list-style: none; padding: 0; margin: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.user-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px 14px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.user-row:last-child { border-bottom: 0; }
.user-row:hover { background: var(--surface); }
.user-thumb { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.user-thumb-empty { display: grid; place-items: center; background: var(--surface); color: var(--ink-2); font-weight: 700; }
.user-row-main { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; min-width: 0; }
.user-row-main strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-row-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; grid-column: 2; }
.user-row-warn { color: #c0261a; font-size: 0.8rem; font-weight: 600; }
.user-row-edit { grid-column: 3; grid-row: 1 / span 2; padding: 8px 16px; }
@media (min-width: 760px) {
  .user-row { grid-template-columns: 44px minmax(0, 1fr) auto auto; }
  .user-row-tags { grid-column: 3; justify-content: flex-end; }
  .user-row-edit { grid-column: 4; grid-row: 1; }
}
.user-edit { margin-top: 8px; }
.specs dd .field-note { display: block; margin-top: 2px; font-size: 0.78rem; color: var(--ink-2); }
/* Admin user editor */
.user-edit-form { max-width: 920px; }
.user-edit-top { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.user-edit-photo { display: grid; gap: 6px; justify-items: start; }
.user-edit-role .field { margin: 0; }
.user-edit-meta { margin: 4px 0 14px; }
.ue-location { display: grid; gap: 4px; align-content: start; }
.ue-location .field { margin: 0; }
.ue-group-label { margin: 0; font-weight: 600; font-size: 0.95rem; }
.ue-location-row { align-items: start; }
.user-edit-role .patreon-hint { margin-top: 10px; }
/* Usuarios: expandable rows (click to show the person's details) */
.user-row[data-user-row] { cursor: pointer; }
.user-row[data-user-row]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.user-row.is-open { background: var(--surface); }
.user-row-info { grid-column: 1 / -1; margin: 6px 0 4px 58px; padding-top: 12px; border-top: 1px dashed var(--line); cursor: auto; }
.user-row-info[hidden] { display: none; }
.user-row-info .patreon-hint { margin: 0; }
@media (max-width: 759px) { .user-row-info { margin-left: 0; } }
.ue-cr { display: grid; gap: 4px; }
.ue-cr[hidden], [data-cr-only][hidden] { display: none; }
/* Expanded user row: fixed 3 columns → Usuario · Nivel · Email / Edad · País / Dirección / Notificaciones · Registrado · Whiskiteca */
.user-row-info { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.user-row-info > div { min-width: 0; }
.user-row-info dd { overflow-wrap: anywhere; }
.user-row-info .ui-full { grid-column: 1 / -1; }
@media (max-width: 759px) { .user-row-info { grid-template-columns: minmax(0, 1fr); } }
/* Inventario: 3-step upload, expandable rows with price history */
.inv-steps { margin: 0 0 12px; padding-left: 20px; font-size: 0.9rem; color: var(--ink-2); display: grid; gap: 2px; }
.inv-row[data-expand-row] { cursor: pointer; }
.inv-row[data-expand-row]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.inv-row.is-open > td { background: var(--surface); }
.inv-history[hidden] { display: none; }
.inv-history > td { background: var(--surface); padding-top: 4px; }
.inv-history-box { display: flex; gap: 10px 16px; align-items: baseline; flex-wrap: wrap; padding-left: 52px; }
.inv-history-title { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); }
.inv-history-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.inv-history-list li { padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.inv-history-list li.is-current { border-color: var(--accent); font-weight: 700; }
.inv-history-empty { margin: 0; padding-left: 52px; }
.inv-created { margin: 10px 0; padding: 12px 16px; border: 1px solid var(--accent-soft); border-radius: 12px; background: #fff8f1; font-size: 0.9rem; }
.inv-created p { margin: 0 0 6px; }
.inv-created ul { margin: 0; padding-left: 18px; columns: 2; }
/* Inventario: photo upload pop-up + "Solo sin foto" filter */
.inv-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.inv-thumb.is-missing { outline: 2px dashed #e0b48a; outline-offset: -2px; border-radius: 8px; }
.inv-table td.row-actions { display: table-cell; white-space: nowrap; }
.inv-table td.row-actions > * + * { margin-left: 12px; }
.inv-photo-btn { font-weight: 600; color: var(--accent); }
.photo-dialog { border: 0; border-radius: 20px; padding: 0; width: min(460px, calc(100% - 32px)); box-shadow: 0 20px 60px rgb(0 0 0 / 0.3); }
.photo-dialog::backdrop { background: rgb(18 17 16 / 0.6); }
.photo-dialog-body { display: grid; gap: 12px; padding: 24px; }
.photo-dialog h2 { margin: 0; font-size: 1.15rem; }
.photo-drop { display: grid; place-items: center; aspect-ratio: 1; border: 2px dashed var(--line); border-radius: 16px; background: var(--surface); cursor: pointer; text-align: center; padding: 16px; }
.photo-drop.is-over, .photo-drop:focus-visible { border-color: var(--accent); outline: none; }
.photo-drop canvas { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; border-radius: 10px; }
.photo-drop-hint { color: var(--ink-2); font-size: 0.9rem; max-width: 28ch; }
.photo-drop-hint strong { display: block; color: var(--ink); font-size: 1rem; margin-bottom: 4px; }
.photo-dialog-actions { display: flex; gap: 10px; }
.photo-dialog .fine { margin: 0; }
.photo-preview canvas.photo-processed { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.photo-pick.is-over { outline: 2px dashed var(--accent); outline-offset: 4px; border-radius: 12px; }
/* Sortable table headers (POs) */
th.sortable a { display: inline-flex; gap: 4px; align-items: center; color: inherit; text-decoration: none; white-space: nowrap; }
th.sortable a:hover { color: var(--ink); }
th.sortable .sort-arrow { font-size: 0.7em; opacity: 0.35; }
th.sortable.is-sorted { color: var(--ink); }
th.sortable.is-sorted .sort-arrow { opacity: 1; color: var(--accent); }
/* Tipos de cambio: ajuste sobre la compra de BAC */
.fx-margin { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 4px 0 8px; }
.fx-margin label { font-weight: 600; font-size: 0.9rem; }
.fx-margin-input { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.fx-margin-input input { width: 90px; height: 36px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; }
.fx-margin .fine { flex-basis: 100%; margin: 0; }
.btn-sm { padding: 6px 14px; font-size: 0.85rem; }
/* TEMPORARY: import review */
.review-banner { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin: 0 0 18px; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--line); background: #f3f8f2; color: inherit; text-decoration: none; }
.review-banner.is-pending { background: #fff8f1; border-color: #f0c79a; }
.review-banner span { color: var(--ink-2); font-size: 0.9rem; }
.review-nav { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 20px; position: sticky; top: 72px; z-index: 5; background: var(--bg); padding: 8px 0; }
.review-nav a { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; color: inherit; font-weight: 600; font-size: 0.9rem; }
.review-nav a span { margin-left: 4px; padding: 0 7px; border-radius: 999px; background: var(--surface); }
.review-nav a.is-pending span { background: var(--accent); color: #fff; }
.review-section { margin: 0 0 40px; scroll-margin-top: 130px; }
.review-section h2 { margin: 0 0 6px; }
.review-done { padding: 12px 16px; border-radius: 12px; background: #f3f8f2; color: #1d6b3a; font-weight: 600; }
.review-cols { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
@media (max-width: 860px) { .review-cols { grid-template-columns: 1fr; } }
.review-col { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.review-col-head { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 10px 12px; background: var(--surface); border-bottom: 1px solid var(--line); }
.review-col-head input { height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; min-width: 0; flex: 1; max-width: 240px; }
.review-list { list-style: none; margin: 0; padding: 0; max-height: 460px; overflow: auto; }
.review-list li { display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.review-list li[hidden] { display: none; }
.review-list li.is-flash { background: #fff1de; }
.review-list label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; flex: 1; min-width: 0; }
.review-list input[type=checkbox], .review-list input[type=radio] { margin-top: 4px; accent-color: var(--accent); width: 17px; height: 17px; flex: none; }
.review-list label span { display: grid; gap: 1px; min-width: 0; }
.review-list small { color: var(--ink-2); font-size: 0.8rem; }
.review-list .review-suggest { color: var(--accent); }
.review-inputs { display: flex; gap: 6px; flex: none; }
.review-inputs input { width: 82px; height: 32px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; }
.review-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.review-bulk { display: flex; gap: 16px; margin-bottom: 8px; }
.review-pick { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; font-variant-numeric: tabular-nums; }
.review-pick input { accent-color: var(--accent); width: 17px; height: 17px; }
.review-prices .diff-up { color: #a12a1b; }
.review-prices .diff-down { color: #1d6b3a; }
.review-load .field { display: grid; gap: 4px; margin-bottom: 10px; }
.review-recalc { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: 0 0 8px; }

/* Mi lista: bottles left */
.line-left { font-size: 0.8em; font-weight: 400; color: var(--ink-2); white-space: nowrap; }

/* Patreon.com: webhook */
.webhook-box { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin: 18px 0 24px; background: var(--bg); }
.webhook-head { display: flex; gap: 16px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.webhook-head h2 { font-size: 1.05rem; margin: 0 0 4px; }
.webhook-head code { word-break: break-all; }
.webhook-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.webhook-manual { margin-top: 12px; }
.webhook-manual summary { cursor: pointer; color: var(--ink-2); font-size: 0.9rem; }
.webhook-secret { display: flex; gap: 8px; flex-wrap: wrap; max-width: 520px; }
.webhook-secret input { flex: 1 1 220px; }
.webhook-events { margin-top: 14px; font-size: 0.875rem; }
.webhook-events tr.is-error td { color: #b42318; }

/* Inventario: two lists (en stock / por POs) */
.inv-list { margin-top: 18px; scroll-margin-top: 150px; }
.inv-list + .inv-list { margin-top: 40px; }
.inv-list-title { font-size: 1.1rem; margin: 0 0 10px; }

/* Inventario: buttons to the two list pages, and their navigation */
.inv-lists { display: grid; gap: 14px; margin: 4px 0 24px; }
@media (min-width: 760px) { .inv-lists { grid-template-columns: 1fr 1fr; } }
.inv-list-btn { display: grid; gap: 6px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--bg); color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.inv-list-btn:hover, .inv-list-btn:focus-visible { border-color: var(--accent); box-shadow: var(--shadow); }
.inv-list-btn-title { font-size: 1.15rem; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.inv-list-btn-n { background: var(--accent-soft); color: #7a3608; border-radius: 999px; padding: 1px 10px; font-size: 0.85rem; }
.inv-list-btn-lead { color: var(--ink-2); font-size: 0.9rem; }
.inv-list-btn-meta { color: var(--accent); font-weight: 600; font-size: 0.875rem; }
.inv-nav { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 8px; }
.inv-switch { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.inv-howto { margin: 0 0 16px; }
.inv-nav-bottom { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); }
.inv-nav-bottom .inv-nav { margin: 0; }

/* Inventario: three entry buttons */
@media (min-width: 1100px) { .inv-lists { grid-template-columns: repeat(3, 1fr); } }

/* Salidas de stock */
.wd-summary { margin: 20px 0 22px; }
.wd-summary h2 { font-size: 1rem; margin: 0 0 8px; }
.wd-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.wd-chips li { border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: 0.9rem; display: flex; gap: 6px; align-items: baseline; }
.wd-chips li span { color: var(--ink-2); font-size: 0.8rem; }
.wd-chips .wd-total { background: var(--accent-soft); border-color: transparent; }
.wd-form { border: 1px solid var(--line); border-radius: 20px; padding: 20px; display: grid; gap: 16px; }
.wd-reasons { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
@media (min-width: 760px) { .wd-reasons { grid-template-columns: repeat(4, 1fr); } }
.wd-reasons legend { font-weight: 600; margin-bottom: 8px; padding: 0; }
.wd-reason { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: 14px; padding: 12px; cursor: pointer; }
.wd-reason:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.wd-reason span { display: grid; gap: 2px; }
.wd-reason small { color: var(--ink-2); font-size: 0.8rem; }
.wd-reason input { margin-top: 3px; accent-color: var(--accent); }
.wd-pick-head { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.wd-pick-head h2 { font-size: 1.05rem; margin: 0; flex: 1 1 auto; }
.wd-pick-head input[type="search"] { flex: 0 1 300px; height: 40px; border: 1px solid var(--line); border-radius: 999px; padding: 0 16px; font: inherit; background: var(--bg); color: inherit; }
.wd-only { display: flex; gap: 6px; align-items: center; font-size: 0.875rem; white-space: nowrap; }
.wd-table tr.is-picked td { background: var(--accent-soft); }
.wd-table .field-error { margin: 2px 0 0; }
.wd-qty { width: 76px; height: 36px; text-align: right; border: 1px solid var(--line); border-radius: 10px; padding: 0 8px; font: inherit; background: var(--bg); color: inherit; }
.wd-submit { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; align-items: center; position: sticky; bottom: 0; background: var(--bg); padding: 10px 0 2px; }
.wd-history { margin-top: 32px; scroll-margin-top: 150px; }
.wd-history h2 { font-size: 1.1rem; }
.wd-history tr.is-undone td { color: var(--ink-2); text-decoration: line-through; }
.wd-history tr.is-undone td:last-child { text-decoration: none; }

/* Eventos (public page) */
.event-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: -8px; margin-bottom: 8px; }
.event-section { scroll-margin-top: 80px; }
.events-detailed .event { grid-template-columns: 64px 1fr; align-items: start; }
.event-when { margin: 4px 0 0; font-size: 0.9rem; font-weight: 600; }
.event-whiskies { margin-top: 10px; }
.event-whiskies-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); }
.event-whiskies ul { margin: 4px 0 0; padding-left: 18px; font-size: 0.9rem; display: grid; gap: 2px; }
.event-price-line { margin: 10px 0 0; font-size: 0.9rem; }
.event-book { margin-top: 12px; }

/* Eventos (admin) */
.ev-h2 { font-size: 1.1rem; margin: 18px 0 10px; }
.ev-table tr.is-draft td { color: var(--ink-2); }
.ev-kind { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; white-space: nowrap; background: var(--surface); }
.ev-kind-club { background: var(--accent-soft); color: #7a3608; }
.ev-past { margin-top: 24px; }
.ev-past summary { cursor: pointer; font-weight: 600; margin-bottom: 10px; }
.ev-form { border: 1px solid var(--line); border-radius: 20px; padding: 20px; display: grid; gap: 16px; max-width: none; }
@media (min-width: 760px) { .ev-kinds { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 760px) { .ev-row { grid-template-columns: repeat(3, 1fr); } }
/* Evento privado: Fecha, Hora, Precio, IVA, Total */
@media (min-width: 1000px) { .ev-row:has(.ev-iva:not([hidden])) { grid-template-columns: 1fr 0.8fr 1.5fr 1fr 1fr; } }
.ev-iva[hidden] { display: none; }
.ev-calc { display: flex; align-items: center; min-height: 46px; padding: 10px 14px; border-radius: var(--radius-sm); border: 1px dashed var(--line); background: #fff; font-size: 1rem; font-variant-numeric: tabular-nums; }
.ev-calc-total { font-weight: 700; border: 2px solid var(--ink); }
.ev-pick { display: grid; gap: 6px; max-height: 420px; overflow: auto; border: 1px solid var(--line); border-radius: 14px; padding: 10px; }
@media (min-width: 760px) { .ev-pick { grid-template-columns: 1fr 1fr; } }
.ev-whisky { display: flex; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 10px; cursor: pointer; font-size: 0.9rem; }
.ev-whisky span { flex: 1; }
.ev-whisky small { font-size: 0.78rem; white-space: nowrap; }
.ev-whisky.is-picked { background: var(--accent-soft); }
.ev-whisky input { accent-color: var(--accent); }
.ev-publish { display: flex; gap: 8px; align-items: center; font-size: 0.9rem; }
.ev-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ev-delete { margin-top: 14px; }
.ev-delete .btn-link { color: #b42318; }
.ev-years { margin: 6px 0 14px; }
.ev-plan { display: grid; gap: 12px; }
@media (min-width: 760px) { .ev-plan { grid-template-columns: repeat(4, 1fr); } }
.ev-plan-month { border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.ev-plan-month h3 { margin: 0 0 8px; font-size: 1rem; }
.ev-plan-month.is-set { background: var(--surface); }
.ev-plan-month p { margin: 0; font-size: 0.875rem; }

/* Admin panel: groups */
.admin-group-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.admin-group-nav .chip span { margin-left: 6px; }
.chip-alert { border-color: var(--accent); }
.chip-alert span { background: var(--accent); color: #fff; border-radius: 999px; padding: 0 7px; font-weight: 700; }
.admin-group { margin-top: 28px; scroll-margin-top: 80px; }
.admin-group-title { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.admin-group-empty { margin: 0; padding: 18px; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--ink-2); font-size: 0.9rem; }
/* Admin panel: a color per group (--tone for icons and titles, --tone-soft for backgrounds) */
[data-tone] { --tone: var(--ink); --tone-soft: var(--surface); }
[data-tone="ventas"] { --tone: #2f8a55; --tone-soft: #e3f3e9; }
[data-tone="usuarios"] { --tone: #2f6db3; --tone-soft: #e3edf9; }
[data-tone="patreon"] { --tone: #7a49b5; --tone-soft: #efe7f8; }
[data-tone="inventarios"] { --tone: #b06a12; --tone-soft: #faeedb; }
[data-tone="compras"] { --tone: #1f7f88; --tone-soft: #ddf1f2; }
[data-tone="eventos"] { --tone: #a8314b; --tone-soft: #f8e3e8; }
[data-tone="notas"] { --tone: #7d5130; --tone-soft: #f2e8de; }
[data-tone="cotizaciones"] { --tone: #56677a; --tone-soft: #e9edf1; }
[data-tone="publicidad"] { --tone: #c2447c; --tone-soft: #fae5ef; }
.admin-group-title { color: var(--tone); border-bottom: 2px solid var(--tone-soft); }
.admin-group .admin-tile { box-shadow: inset 0 4px 0 var(--tone); }
.admin-group .admin-tile:hover { box-shadow: inset 0 4px 0 var(--tone), var(--shadow); }
.admin-group .admin-tile-icon { background: var(--tone-soft); color: var(--tone); }
.admin-group .admin-tile.has-alert .admin-tile-icon { background: var(--tone); color: #fff; }
.admin-group .admin-tile:hover { border-color: var(--tone); }
.admin-group-nav .chip[data-tone]::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--tone); margin-right: 7px; vertical-align: 1px; }
.admin-tile-count { display: none; }
/* Phones: small squares, 3 per row (icon, name and the pending count) */
@media (max-width: 640px) {
  .admin-group { margin-top: 20px; }
  .admin-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .admin-tile {
    aspect-ratio: 1; min-height: 0; padding: 10px 6px; gap: 6px; border-radius: 14px;
    align-items: center; justify-content: center; text-align: center; background: var(--tone-soft);
  }
  .admin-group .admin-tile:hover { transform: none; box-shadow: inset 0 4px 0 var(--tone); }
  .admin-group .admin-tile-icon { width: 38px; height: 38px; border-radius: 11px; margin: 0; background: #fff; }
  .admin-tile-icon svg { width: 20px; height: 20px; }
  .admin-tile-title { font-size: 0.74rem; font-weight: 700; line-height: 1.15; letter-spacing: 0; overflow-wrap: anywhere; }
  .admin-tile-text, .admin-tile-badge { display: none; }
  .admin-tile-count {
    display: block; position: absolute; top: 6px; right: 6px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
    background: var(--accent); color: #fff; font-size: 0.72rem; font-weight: 700; line-height: 20px;
  }
}

/* Eventos form: type dropdown, rest revealed after choosing */
.ev-kind-field select { max-width: 420px; }
.ev-rest { display: grid; gap: 16px; }
.ev-rest[hidden] { display: none; }

/* Continuar con Google */
.btn-google { background: #fff; color: #1f1f1f; border: 1px solid #747775; gap: 10px; font-weight: 600; }
.btn-google:hover { background: #f7f8f8; border-color: #1f1f1f; }
.btn-google svg { flex: none; }
.or-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--ink-2); font-size: 0.85rem; text-align: center; }
.or-divider::before, .or-divider::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.google-start { display: grid; gap: 6px; margin-bottom: 8px; }
.google-start .fine { margin: 0; }
.google-email { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); margin: 0; }
.google-email span { font-size: 0.8rem; color: var(--ink-2); }

/* Mi cuenta: one-time "¿Vamos a los whiskys?" over the photo card after registering */
.status-card.has-welcome { position: relative; min-height: 104px; overflow: hidden; }
.welcome-shop {
  position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 16px 48px 16px 20px; text-align: center; color: #fff;
  background: linear-gradient(135deg, rgb(18 17 16 / 0.88), rgb(180 83 10 / 0.88));
  backdrop-filter: blur(2px); animation: welcome-in 0.4s ease-out;
}
.welcome-shop p { margin: 0; font-size: clamp(1.05rem, 2.6vw, 1.35rem); font-weight: 700; letter-spacing: -0.01em; }
.welcome-shop a { color: #fff; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.welcome-shop a:hover { color: #ffe3c7; }
.welcome-close { position: absolute; top: 8px; right: 10px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgb(255 255 255 / 0.15); color: #fff; font-size: 1.25rem; line-height: 1; cursor: pointer; }
.welcome-close:hover { background: rgb(255 255 255 / 0.3); }
@keyframes welcome-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .welcome-shop { animation: none; } }

/* Mi lista: Crédito acumulado */
.drawer-credit { display: grid; gap: 8px; padding: 10px 12px; margin: 6px 0; border-radius: 12px; background: var(--accent-soft); }
.drawer-credit-head { display: flex; justify-content: space-between; font-weight: 600; }
.drawer-credit-all { display: flex; gap: 8px; align-items: center; font-size: 0.9rem; cursor: pointer; }
.drawer-credit-all input { accent-color: var(--accent); }
.drawer-credit-part { display: flex; gap: 8px; align-items: center; font-size: 0.9rem; }
.drawer-credit-part input { width: 130px; height: 34px; border: 1px solid var(--line); border-radius: 8px; padding: 0 8px; text-align: right; font: inherit; background: var(--bg); color: inherit; }
.drawer-credit-part input:disabled { opacity: 0.7; }
.drawer-credit-part input[aria-invalid="true"] { border-color: #b42318; }
.drawer-credit-note { margin: 0; color: var(--ink-2); font-size: 0.82rem; }
.drawer-credit-error { margin: 0; color: #b42318; font-size: 0.82rem; }
.drawer-credit-used { display: flex; justify-content: space-between; font-weight: 600; color: #7a3608; }
/* The credit box stacks its lines (the summary rows above are side by side). */
.drawer-sum > .drawer-credit { display: grid; color: var(--ink); }
.drawer-sum > .drawer-credit[hidden], .drawer-credit [hidden] { display: none; }
.drawer-credit-part input { min-width: 0; flex: 0 1 140px; }
.drawer-sum > .drawer-credit { grid-template-columns: 1fr; }
.drawer-credit-part span { white-space: nowrap; }
.drawer-credit-part input { margin-left: auto; }

/* Admin → user edit: Crédito acumulado under Nivel Patreon */
.ue-credit { margin-top: 14px; display: grid; gap: 6px; }
.ue-credit input[type="number"] { max-width: 180px; }
.ue-credit .fine { margin: 0; }

/* Tienda: filter groups with "Ver más" / "Ver menos" */
.facet-group.is-collapsed .facet-extra { display: none; }
.facet-more { background: none; border: 0; padding: 4px 0; margin-top: 2px; color: var(--accent); font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.facet-more:hover { color: var(--ink); }

/* Photo from a URL (Editar form and "Subir foto" pop-up) */
.photo-url { display: flex; gap: 8px; align-items: center; margin-top: 8px; width: 100%; }
.photo-url input { flex: 1 1 auto; min-width: 0; height: 36px; border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; font: inherit; font-size: 0.875rem; background: var(--bg); color: inherit; }
.photo-url .btn-sm { margin-top: 0; flex: none; }

/* Eventos: tabs */
/* Eventos tabs: the Tienda cards (.shop-tab), one color per kind of event. */
.event-tabs { margin-top: -8px; margin-bottom: 4px; }
/* Four long labels: the cards share the width and wrap to more rows instead of scrolling sideways. */
.event-tabs .shop-tabs { flex-wrap: wrap; overflow: visible; margin: 0 0 8px; padding: 4px 0 8px; }
.event-tab { flex: 1 1 210px; min-width: 0; }
.event-tab .shop-tab-label { line-height: 1.2; }
@media (max-width: 899px) { .event-tab { flex-basis: calc(50% - 6px); } }
@media (max-width: 479px) { .event-tab { flex-basis: 100%; } }
.event-tab[data-tab="club"] { --tab-bg: #f1edfb; --tab-strong: #e3dbf7; --tab-ink: #5b3fa3; --tab-ring: #c9b9ef; }
.event-tab[data-tab="publico"] { --tab-bg: #fdf1e3; --tab-strong: #fbe1c4; --tab-ink: #9a4a0c; --tab-ring: #f2c08e; }
.event-tab[data-tab="privados"] { --tab-bg: #fcebf0; --tab-strong: #f8d5df; --tab-ink: #9b2c4f; --tab-ring: #eeaabe; }
.event-tab[data-tab="talleres"] { --tab-bg: #e9f4fb; --tab-strong: #d3e9f7; --tab-ink: #1f5f8b; --tab-ring: #a9d2ee; }
.event-tab[data-tab="club"]:hover .shop-tab-icon svg { animation: icon-crown 0.9s ease-in-out; }
.event-tab[data-tab="publico"]:hover .shop-tab-icon svg { animation: icon-cheers 0.85s ease-in-out; }
.event-tab[data-tab="privados"] .shop-tab-icon svg { transform-origin: 32% 50%; }
.event-tab[data-tab="privados"]:hover .shop-tab-icon svg { animation: icon-key 0.9s ease-in-out; }
.event-tab[data-tab="talleres"]:hover .shop-tab-icon svg { animation: icon-toss 0.9s cubic-bezier(0.3, 0.7, 0.4, 1); }
@keyframes icon-crown { 0%, 100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-6px) rotate(-10deg); } 50% { transform: translateY(0) rotate(6deg); } 70% { transform: translateY(-2px) rotate(-3deg); } }
@keyframes icon-cheers { 0%, 100% { transform: rotate(0) scale(1); } 30% { transform: rotate(-12deg) scale(1.08); } 55% { transform: rotate(10deg) scale(1.08); } 75% { transform: rotate(-4deg); } }
@keyframes icon-key { 0%, 100% { transform: rotate(0); } 35% { transform: rotate(-35deg); } 65% { transform: rotate(20deg); } 85% { transform: rotate(-6deg); } }
@keyframes icon-toss { 0%, 100% { transform: translateY(0) rotate(0); } 40% { transform: translateY(-9px) rotate(-18deg); } 70% { transform: translateY(1px) rotate(4deg); } 85% { transform: translateY(-1px) rotate(-2deg); } }
.event-section[hidden] { display: none; }
.event-title a { color: inherit; text-decoration: none; }
.event-title a:hover { text-decoration: underline; }
.event-img-link { display: block; margin: 10px 0 6px; }
.event-img { width: 100%; max-height: 260px; object-fit: cover; border-radius: 12px; }

/* Event page */
.event-hero { padding: 32px 0 8px; }
.event-hero-grid { display: grid; gap: 24px; align-items: start; }
@media (min-width: 860px) { .event-hero.has-image .event-hero-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
.event-hero-img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); }
.event-hero h1 { margin: 6px 0 8px; font-size: clamp(1.8rem, 4vw, 2.6rem); }
.event-hero-when { font-weight: 600; margin: 0 0 10px; }
.event-admin { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; padding: 18px; border: 1px dashed var(--accent); border-radius: var(--radius); background: var(--accent-soft); margin-bottom: 24px; }
.event-qr { width: 180px; flex: none; background: #fff; padding: 8px; border-radius: 12px; }
.event-qr svg { display: block; width: 100%; height: auto; }
.event-admin-body { flex: 1 1 280px; }
.event-admin-body h2 { margin: 0 0 4px; font-size: 1.1rem; }
.event-url code { word-break: break-all; font-size: 0.85rem; }
.event-admin-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.event-admin-actions .btn-sm { margin-top: 0; }
.ew-heading { margin: 8px 0 6px; }
.ew-list { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 22px; }
.ew { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: grid; gap: 14px; scroll-margin-top: 80px; }
.ew-head { display: grid; grid-template-columns: auto 120px 1fr; gap: 16px; align-items: start; }
@media (max-width: 600px) { .ew-head { grid-template-columns: auto 80px 1fr; } .ew-img { width: 80px; height: 80px; } }
.ew-num { width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-weight: 700; }
.ew-img { border-radius: 12px; background: var(--surface); object-fit: contain; }
.ew-head h3 { margin: 0 0 2px; font-size: 1.15rem; }
.ew-head h3 a { color: inherit; }
.ew-head .muted { margin: 0 0 8px; }
.ew-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 16px; margin: 6px 0 0; }
.ew-facts dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); }
.ew-facts dd { margin: 0; font-weight: 600; font-size: 0.92rem; }
.ew-block h4, .ew-notes h4 { margin: 0 0 4px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); }
.ew-block p, .ew-notes p { margin: 0; white-space: pre-line; }
.ew-notes { display: grid; gap: 14px; }
@media (min-width: 760px) { .ew-notes { grid-template-columns: repeat(3, 1fr); } }
.ew-rate { display: grid; gap: 10px; padding: 14px; border-radius: 12px; background: var(--surface); }
.stars-field { margin: 0; }
.stars-field legend { margin-bottom: 4px; }
.stars { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.stars label { font-size: 2rem; line-height: 1; color: #d6d2cb; cursor: pointer; padding: 0 2px; }
.stars label:hover, .stars label:hover ~ label, .stars input:checked ~ label { color: var(--accent); }
.stars input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.ew-comment, .ew-name { display: grid; gap: 4px; font-size: 0.9rem; font-weight: 600; }
.ew-comment textarea, .ew-name input { font: inherit; font-weight: 400; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--bg); color: inherit; }
.ew-name input { max-width: 320px; }
.ew-rate .btn { justify-self: start; }
.ew-saved { color: #1a7f37; font-weight: 600; font-size: 0.9rem; }
.ew-results { margin-top: 36px; padding-top: 20px; border-top: 2px solid var(--ink); scroll-margin-top: 80px; }
.ew-result-row { padding: 14px 0; border-bottom: 1px solid var(--line); }
.ew-result-row h3 { margin: 0 0 6px; font-size: 1.05rem; }
.ew-avg { display: flex; gap: 10px; align-items: baseline; margin: 0 0 8px; }
.ew-avg-num { font-size: 1.6rem; font-weight: 800; }
.ew-avg-stars { color: var(--accent); font-size: 1.2rem; letter-spacing: 2px; }
.ew-comments { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.ew-comments li { padding: 10px 12px; border-left: 3px solid var(--accent); background: var(--surface); border-radius: 0 10px 10px 0; }
.ew-comments li.is-hidden { opacity: 0.55; }
.ew-c-text { margin: 0 0 4px; font-style: italic; }
.ew-c-meta { margin: 0; font-size: 0.82rem; color: var(--ink-2); }
.ew-c-admin { margin-top: 4px; }

/* Admin event form: picture */
.ev-page-link { margin: 0 0 12px; }
.ev-image-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.ev-image-preview { width: 220px; aspect-ratio: 16 / 10; border-radius: 12px; background: var(--surface); display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); }
.ev-image-preview img { width: 100%; height: 100%; object-fit: cover; }

/* Eventos: bottles per whisky */
.ev-pick { margin: 0; min-width: 0; }
.ev-pick[disabled] { opacity: 0.6; }
/* The name keeps at least 180px; on narrow screens the stock and bottles wrap to a second line under it. */
.ev-whisky { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.ev-whisky-pick { display: flex; gap: 8px; align-items: center; cursor: pointer; min-width: 0; flex: 1 1 180px; }
.ev-whisky-pick span { overflow-wrap: break-word; min-width: 0; }
.ev-whisky small { margin-left: auto; }
.ev-qty { display: none; gap: 4px; align-items: center; font-size: 0.78rem; color: var(--ink-2); }
.ev-whisky.is-picked .ev-qty { display: flex; }
.ev-qty input { width: 52px; height: 28px; border: 1px solid var(--line); border-radius: 8px; padding: 0 6px; text-align: right; font: inherit; background: var(--bg); color: inherit; }
.ev-bottles-note { margin: 4px 0 0; flex-basis: 100%; }
.ev-danger { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; }
.ev-danger .btn-link { color: #b42318; }
.ev-tag-cancel { color: #b42318; font-weight: 600; }

/* Post-sale page (/gracias/…) */
.ps-hero h1 { font-size: clamp(1.9rem, 4.5vw, 2.8rem); }
.ps-list { display: grid; gap: 26px; }
.ps-whisky { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: grid; gap: 16px; scroll-margin-top: 80px; }
.ps-whisky-main { display: grid; gap: 20px; align-items: start; }
@media (min-width: 720px) { .ps-whisky-main { grid-template-columns: 240px 1fr; } }
.ps-img img { width: 100%; height: auto; border-radius: 14px; background: var(--surface); }
.ps-whisky h2 { margin: 2px 0 4px; font-size: 1.4rem; }
.ps-whisky h2 a { color: inherit; text-decoration: none; }
.ps-specs { margin-top: 12px; }
.ps-survey { display: grid; gap: 12px; padding: 16px; border-radius: 12px; background: var(--accent-soft); }
.ps-survey legend, .ps-comment span { font-weight: 700; font-size: 0.95rem; margin-bottom: 4px; }
.ps-comment { display: grid; gap: 4px; }
.ps-comment textarea { font: inherit; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--bg); color: inherit; }
.ps-again { border: 0; padding: 0; margin: 0; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.ps-again legend { width: 100%; }
.ps-again label { display: flex; gap: 6px; align-items: center; font-weight: 600; }
.ps-again input { accent-color: var(--accent); width: 18px; height: 18px; }
.ps-survey .btn { justify-self: start; }
.ps-mini { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 10px; }
.ps-mini li { display: flex; gap: 12px; align-items: center; font-weight: 600; }
.ps-mini img { border-radius: 10px; background: var(--surface); }
.ps-invite { margin-top: 28px; padding: 22px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); }
.ps-invite h2 { margin: 0 0 8px; font-size: 1.3rem; }
.ps-invite-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.ps-patreon { background: var(--accent-soft); border-color: transparent; }
.ps-patreon ol { padding-left: 20px; display: grid; gap: 4px; }
.ps-similar { margin-top: 18px; }
.post-sale-box { margin: 10px 0 18px; padding: 16px; border-radius: var(--radius); background: #e9f7ee; border: 1px solid #b7e1c4; }
.post-sale-box h2 { margin: 0 0 4px; font-size: 1.05rem; }
.post-sale-box textarea { width: 100%; font: inherit; font-size: 0.9rem; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--bg); color: inherit; margin: 6px 0 8px; }
.post-sale-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.post-sale-actions .btn-sm { margin-top: 0; }
/* Hidden pop-ups near the right edge (e.g. the Patreon price tip) must never make the page scroll sideways. */
html { overflow-x: clip; }
.ps-survey legend { text-transform: none; letter-spacing: 0; font-size: 0.95rem; font-weight: 700; }
.ps-patreon a { color: #7a3608; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }

/* Info tooltip next to a label (phone / WhatsApp) */
.label-with-tip { display: inline-flex; align-items: center; gap: 8px; }
.info-tip { position: relative; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: #fff; font: italic 700 0.8rem/1 Georgia, serif; cursor: help; flex: none; }
.info-tip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.info-tip-box {
  position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); z-index: 40; width: min(300px, 80vw);
  padding: 12px 14px; border-radius: 12px; background: var(--ink); color: #fff; font: 450 0.8125rem/1.5 var(--font); text-transform: none; letter-spacing: 0;
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.25); visibility: hidden; opacity: 0; transition: opacity 0.15s, visibility 0.15s; pointer-events: none;
}
.info-tip-box::after { content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 7px solid transparent; border-top-color: var(--ink); }
.info-tip:hover .info-tip-box, .info-tip:focus .info-tip-box, .info-tip:focus-within .info-tip-box { visibility: visible; opacity: 1; }
@media (max-width: 520px) { .info-tip-box { left: auto; right: -40px; transform: none; } .info-tip-box::after { left: auto; right: 44px; transform: none; } }

/* Mi lista: 18+ notice */
.age-notice { max-width: 440px; text-align: center; }
.age-notice h2 { margin: 0 0 8px; font-size: 1.3rem; }
.age-notice p { margin: 0 0 10px; }
.age-notice-join { font-weight: 600; color: #7a3608; }
.age-notice-actions { display: grid; gap: 8px; margin-top: 14px; }
.age-notice-actions form { margin: 0; }
/* Post-sale: already reviewed */
.ps-reviewed-ask { padding: 14px 16px; border-radius: 12px; background: var(--surface); }
.ps-reviewed-ask p { margin: 0 0 6px; }
.ps-reviewed-summary { color: var(--accent); }
.ps-reviewed-actions { display: flex; gap: 8px; }
.ps-reviewed-actions .btn-sm { margin-top: 0; }

/* Mi lista: who and where */
.drawer-delivery { display: grid; gap: 8px; margin: 4px 0 10px; }
.drawer-delivery[hidden] { display: none; }
.drawer-delivery label { display: grid; gap: 4px; font-size: 0.85rem; font-weight: 600; }
.drawer-delivery input, .drawer-delivery textarea { font: inherit; font-weight: 400; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--bg); color: inherit; resize: vertical; }
.drawer-delivery-name { margin: 0; font-size: 0.85rem; color: var(--ink-2); }
.drawer-delivery-error { margin: 0; color: #b42318; font-size: 0.82rem; }
.drawer-delivery-home { margin: 0; font-size: 0.85rem; line-height: 1.4; }
.drawer-delivery-home span { display: block; font-weight: 600; }
.drawer-delivery .drawer-delivery-alt { display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.drawer-delivery-alt input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.drawer-delivery label[hidden] { display: none; }
.drawer-delivery-hint { font-size: 0.75rem; font-weight: 400; line-height: 1.35; color: var(--ink-2); }

/* Header: Compras */
.compras-link { position: relative; padding: 0 12px; }
.compras-link .list-count { position: static; margin-left: 2px; }
@media (max-width: 760px) { .compras-link .account-label { display: none; } }
/* Mis compras */
.purchases { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.purchase { border: 1px solid var(--line); border-radius: var(--radius); }
.purchase details { padding: 14px 16px; }
.purchase summary { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; cursor: pointer; list-style: none; }
.purchase summary::-webkit-details-marker { display: none; }
.purchase-id { font-weight: 700; }
.purchase-status { padding: 2px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; background: var(--surface); }
.purchase-status-pending { background: var(--accent-soft); color: #7a3608; }
.purchase-status-confirmed { background: #e3f4e8; color: #1a7f37; }
.purchase-status-cancelled { background: #f3e3e3; color: #b42318; }
.purchase-when { color: var(--ink-2); font-size: 0.875rem; }
.purchase-total { margin-left: auto; font-size: 0.9rem; }
.purchase-cancelled { opacity: 0.75; }
.purchase-items { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 4px; border-top: 1px solid var(--line); padding-top: 10px; }
.purchase-items li { display: flex; justify-content: space-between; gap: 12px; font-size: 0.92rem; }
.purchase-sums { margin: 10px 0 8px; display: grid; gap: 2px; font-size: 0.9rem; }
.purchase-sums div { display: flex; justify-content: space-between; gap: 12px; }
.purchase-sums dt { color: var(--ink-2); }
.purchase-sums dd { margin: 0; }
.purchase-sum-total { font-weight: 700; border-top: 1px solid var(--line); padding-top: 4px; margin-top: 2px; }
.purchase-sum-total dt { color: var(--ink); }
.purchase-delivery { flex-direction: column; margin-top: 6px; }

/* Admin → Ventas */
.sales-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 6px; }
.sales-table td { vertical-align: middle; }
.sale-items { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin: 4px 0 8px; }
.sale-items th, .sale-items td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.sale-items th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); }
.sale-items .num { text-align: right; }
.sale-sums { margin: 4px 0; font-size: 0.9rem; }

/* Long admin lists scroll inside their own box (about 20 rows; app.js sets the exact height). */
.table-scroll { overflow: auto; max-height: min(70vh, 960px); overscroll-behavior: contain; }
.table-scroll thead th { position: sticky; top: 0; z-index: 2; box-shadow: inset 0 -1px 0 var(--line); }

/* Evento privado: currency + price */
.ev-price-row { display: flex; gap: 8px; }
.ev-price-row select { flex: 0 0 auto; width: auto; }
.ev-price-row select[hidden] { display: none; }
.ev-price-row input { flex: 1; min-width: 0; }
.ev-kind-privado { background: #e8e4f3; color: #43306e; }

/* Evento privado: customer */
.ev-client { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px 16px; display: grid; gap: 12px; margin: 0; }
.ev-client[hidden] { display: none; }
.ev-client legend { font-weight: 700; padding: 0 6px; }
.ev-client .fine { margin: 0; }
.ev-client select { max-width: 520px; }
.ev-client-count { margin: 0; font-weight: 600; color: var(--accent); }
.ev-client-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ev-client-events { margin: 0; padding-left: 18px; display: grid; gap: 4px; }

/* Event photos (admin) */
.ev-photos { margin-top: 28px; border: 1px solid var(--line); border-radius: 20px; padding: 20px; }
.ev-photos h2 { font-size: 1.15rem; margin: 0 0 4px; }
.ev-photos-upload { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin: 12px 0; }
.ev-photos-later { margin-top: 20px; }
.ev-photo-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.ev-photo-grid li { position: relative; }
.ev-photo-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; display: block; }
.ev-photo-grid form { position: absolute; top: 6px; right: 6px; }
.ev-photo-del { width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgb(0 0 0 / 0.65); color: #fff; font-size: 1.1rem; line-height: 1; cursor: pointer; }
.ev-photo-del:hover { background: #b42318; }

/* Public galleries + lightbox */
.event-gallery { margin: 8px 0 28px; }
.gallery-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.gallery-grid a { display: block; border-radius: 12px; overflow: hidden; }
.gallery-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; transition: transform 0.2s; }
.gallery-grid a:hover img { transform: scale(1.04); }
.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.lightbox::backdrop { background: rgb(0 0 0 / 0.88); }
.lightbox img { position: absolute; inset: 0; margin: auto; max-width: calc(100vw - 32px); max-height: calc(100vh - 80px); object-fit: contain; border-radius: 8px; }
.lb-btn { position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgb(255 255 255 / 0.15); color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; }
.lb-btn:hover { background: rgb(255 255 255 / 0.3); }
.lb-prev { left: 12px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 12px; top: 50%; transform: translateY(-50%); }
.lb-close { right: 12px; top: 12px; font-size: 1.6rem; }
.lb-count { position: absolute; bottom: 12px; left: 0; right: 0; text-align: center; color: #fff; margin: 0; font-size: 0.9rem; }

/* Eventos anteriores */
.event-past-link { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 18px; }
.event-client { margin: 4px 0 10px; }
.past-tabs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 20px; }
.past-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.past-card { border: 1px solid var(--line); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; background: #fff; }
.past-cover { display: block; aspect-ratio: 16 / 10; background: var(--surface); overflow: hidden; min-height: 0; }
.past-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.past-cover-empty { display: grid; place-items: center; height: 100%; font-size: 2.5rem; }
.past-body { padding: 14px 16px 16px; display: grid; gap: 6px; align-content: start; flex: 1; }
.past-body h3 { margin: 0; font-size: 1.1rem; }
.past-body p { margin: 0; }
.past-body .btn { justify-self: start; margin-top: 6px; }
.past-client { font-size: 0.95rem; }
.past-thumbs { display: flex; gap: 6px; }
.past-thumbs img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; }
.past-meta { font-size: 0.85rem; color: var(--ink-2); }
.past-cta { margin-top: 36px; border-radius: 20px; background: var(--surface); padding: 22px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.past-cta h2 { margin: 0 0 4px; font-size: 1.25rem; }
.past-cta p { margin: 0; max-width: 60ch; }

/* Eventos → Eventos Privados tab */
.past-grid-compact { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin: 8px 0 14px; }

/* Eventos Privados: FAQ */
.priv-faq { border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); padding: 14px 18px; margin: 4px 0 18px; background: #fff; }
.priv-faq h3 { font-size: 1rem; margin: 0 0 8px; }
.priv-faq ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 0.93rem; color: var(--ink-2); }

/* Solicitar un evento privado */
.pr-layout { display: grid; gap: 28px; }
@media (min-width: 980px) { .pr-layout { grid-template-columns: minmax(280px, 380px) 1fr; align-items: start; } .pr-aside { position: sticky; top: 90px; } }
.pr-form { display: grid; gap: 20px; max-width: none; }
.pr-section { border: 1px solid var(--line); border-radius: 20px; padding: 18px 20px 20px; margin: 0; display: grid; gap: 14px; }
.pr-section legend { font-weight: 800; font-size: 1.05rem; padding: 0 6px; }
.pr-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.pr-grid .field, .pr-section .field { margin: 0; }
.pr-wide { grid-column: 1 / -1; }
.field[hidden] { display: none; }
.pr-choice { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.pr-choice-col { flex-direction: column; gap: 6px; }
.pr-choice > label, .pr-budget-row > label, .pr-check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; line-height: 1.4; }
.pr-choice input[type="radio"], .pr-check input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--accent); }
.pr-checks { display: grid; gap: 10px; }
.pr-check-strong { font-weight: 600; }
.pr-check.is-invalid { color: #b42318; }
.pr-sub { margin: 4px 0 -4px; font-weight: 700; font-size: 0.9rem; }
.pr-actions { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }
.pr-draft-note { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--accent-soft); color: #7a3608; font-size: 0.93rem; }
.pr-draft-note[hidden] { display: none; }
.pr-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.pr-sent h1 { margin-top: 6px; }

/* Admin: requests */
.pr-row-new td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.pr-status-nueva { background: var(--accent-soft); color: #7a3608; }
.pr-detail { display: grid; gap: 4px 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin: 6px 0 12px; }
.pr-detail div { display: flex; gap: 8px; }
.pr-detail dt { font-weight: 700; white-space: nowrap; }
.pr-detail dd { margin: 0; }
.pr-admin-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Solicitar un evento privado: two columns in "¿Quién solicita?", budget next to "Recomiéndenme" */
@media (min-width: 640px) { .pr-grid-2 { grid-template-columns: 1fr 1fr; } }
.pr-budget-row { display: grid; gap: 8px 18px; align-items: start; }
@media (min-width: 640px) { .pr-budget-row { grid-template-columns: auto minmax(220px, 300px); } .pr-budget-row > label { margin-top: 30px; } }
.pr-budget { margin: 0; }
.pr-budget.is-off { opacity: 0.5; }
.pr-budget select { width: auto; }

/* Ventas → Pre Ventas */
.presale-n { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: rgb(0 0 0 / 0.08); font-size: 0.75rem; text-align: center; }
.btn-primary .presale-n { background: rgb(255 255 255 / 0.25); }
.presale-form { border: 1px solid var(--line); border-radius: 20px; padding: 18px 20px 20px; margin: 12px 0 8px; max-width: none; }
.presale-form h2 { font-size: 1.1rem; margin: 0 0 12px; }
.presale-grid { display: grid; gap: 12px 16px; }
@media (min-width: 760px) { .presale-grid { grid-template-columns: 1fr 1.4fr 220px; } }
.presale-grid .field { margin: 0; }
.presale-actions { display: flex; gap: 10px; margin-top: 14px; }
.presale-table { min-width: 640px; }
.presale-table td.row-actions { display: table-cell; white-space: nowrap; }
.presale-table td.row-actions form { display: inline; margin-left: 12px; }
.presale-table tfoot th, .presale-table tfoot td { border-top: 2px solid var(--line); border-bottom: 0; }
.presale-table tr.is-editing td { background: var(--accent-soft); }
.presale-table .num { text-align: right; white-space: nowrap; }

/* Venta por WhatsApp (admin) */
.wa-form { display: grid; gap: 16px; max-width: 920px; }
.wa-grid { display: grid; gap: 0 16px; }
@media (min-width: 720px) { .wa-grid { grid-template-columns: 1fr 1fr; } }
.wa-or { margin: 4px 0 8px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.wa-lines { display: grid; gap: 4px; }
.wa-line { display: grid; grid-template-columns: 1fr 84px; gap: 0 12px; align-items: end; }
.wa-line .field { margin-bottom: 6px; }
.wa-extra { grid-column: 1 / -1; padding: 0 0 8px; font-size: 0.85rem; color: var(--ink-2); }
.wa-line-error { grid-column: 1 / -1; margin: -4px 0 8px; }
.wa-line.has-error input { border-color: #b42318; }
@media (min-width: 720px) {
  .wa-line { grid-template-columns: 1fr 84px auto; }
  .wa-extra { grid-column: auto; padding: 0 0 18px; }
}

/* Ventas tabs (admin): one pastel color per tab; the current one gets the stronger tint and a border. */
.sales-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.sales-tab {
  --tab-bg: #f1edfb; --tab-strong: #e3dbf7; --tab-ink: #5b3fa3; --tab-ring: #c9b9ef;
  padding: 8px 16px; border-radius: 999px; border: 1.5px solid transparent;
  background: var(--tab-bg); color: var(--ink); font-weight: 600; font-size: 0.9rem; white-space: nowrap;
  transition: background-color 0.15s, border-color 0.15s;
}
.sales-tab[data-tab="generales"] { --tab-bg: #fdf1e3; --tab-strong: #fbe1c4; --tab-ink: #9a4a0c; --tab-ring: #f2c08e; }
.sales-tab[data-tab="patreons"] { --tab-bg: #f1edfb; --tab-strong: #e3dbf7; --tab-ink: #5b3fa3; --tab-ring: #c9b9ef; }
.sales-tab[data-tab="whatsapp"] { --tab-bg: #e6f6ec; --tab-strong: #cdeedb; --tab-ink: #17693a; --tab-ring: #9fd8b5; }
.sales-tab[data-tab="vips"] { --tab-bg: #fcebf0; --tab-strong: #f8d5df; --tab-ink: #9b2c4f; --tab-ring: #eeaabe; }
.sales-tab[data-tab="notas"] { --tab-bg: #fdf1e3; --tab-strong: #fbe1c4; --tab-ink: #9a4a0c; --tab-ring: #f2c08e; }
.sales-tab[data-tab="barricas"] { --tab-bg: #f3ece4; --tab-strong: #e7d8c6; --tab-ink: #6b4423; --tab-ring: #d2b597; }
.sales-tab:hover { background: var(--tab-strong); }
.sales-tab[aria-current="page"] { background: var(--tab-strong); border-color: var(--tab-ring); color: var(--tab-ink); }
@media (prefers-reduced-motion: reduce) { .sales-tab { transition: none; } }

/* Precio Alterno (order page and Venta por WhatsApp): checkbox + ₡ field */
.alt-price { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; justify-content: flex-end; }
.alt-price .check { padding: 0; font-size: 0.85rem; white-space: nowrap; }
.alt-price-input { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.alt-price-input input { width: 110px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; font: inherit; text-align: right; }
.alt-price-input input:disabled { background: var(--surface); color: var(--ink-2); }
.order-table tr.has-alt td { background: #fff8e8; }
.wa-opts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px; padding: 0 0 10px; }
.wa-opts .alt-price { justify-content: flex-start; }
.wa-opts .wa-extra { padding: 0; }
@media (min-width: 720px) { .wa-line { grid-template-columns: 1fr 84px; } .wa-opts .wa-extra { grid-column: auto; padding: 0; } }
.complete-form { display: inline-flex; align-items: center; gap: 8px; }
.complete-credit { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8rem; font-weight: 600; color: var(--ink-2); }
.complete-credit input { width: 96px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; font: inherit; text-align: right; color: var(--ink); }

/* Tienda → Ropa con logo */
.shop-tab[data-tab="ropa"] { --tab-bg: #e8f6ee; --tab-strong: #d0eedc; --tab-ink: #1d6b42; --tab-ring: #a3d9b9; }
.mockup-wrap { display: block; }
.mockup-wrap svg { display: block; width: 100%; height: auto; }
.ropa-admin-note { margin: 0 0 20px; padding: 10px 14px; border-radius: var(--radius-sm); background: #fff8e1; border: 1px solid #f0dc8a; font-size: 0.9rem; }
.ropa-soon {
  padding: clamp(28px, 5vw, 56px) clamp(16px, 4vw, 48px); border-radius: 24px; text-align: center;
  background: linear-gradient(160deg, #e8f6ee 0%, #fdf1e3 55%, #e9f4fb 100%);
}
.ropa-soon-tag {
  display: inline-block; margin: 0 0 14px; padding: 6px 14px; border-radius: 999px; background: #fff; color: #1d6b42;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; box-shadow: var(--shadow);
}
.ropa-soon h2 { max-width: 30ch; margin: 0 auto 28px; font-size: clamp(1.4rem, 3vw, 2.1rem); }
.ropa-mockups { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); max-width: 900px; margin: 0 auto; }
.ropa-mockup-card { margin: 0; padding: 14px 14px 12px; border-radius: 18px; background: rgb(255 255 255 / 0.85); box-shadow: var(--shadow); }
.ropa-mockup-card figcaption { margin-top: 6px; font-weight: 700; }
.ropa-grid { display: grid; gap: 24px 20px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.ropa-card { display: grid; gap: 4px; align-content: start; }
.ropa-card-media { position: relative; display: block; padding: 16px; border-radius: var(--radius); background: var(--surface); margin-bottom: 8px; transition: transform 0.18s; }
.ropa-card:hover .ropa-card-media { transform: translateY(-2px); }
.ropa-card-media .badge { position: absolute; top: 10px; left: 10px; }
.ropa-card .eyebrow { margin: 0; }
.ropa-card-name { font-weight: 700; font-size: 1.05rem; }
.ropa-style { padding-top: 24px; padding-bottom: 80px; }
.ropa-config { display: grid; gap: 28px; margin-top: 12px; }
@media (min-width: 900px) { .ropa-config { grid-template-columns: 1fr 1fr; align-items: start; } .ropa-preview { position: sticky; top: var(--sticky-top); } }
.ropa-preview { padding: 20px; border-radius: 24px; background: var(--surface); text-align: center; }
.ropa-preview .mockup-wrap { max-width: 460px; margin: 0 auto; }
.ropa-options h1 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-bottom: 8px; }
.ropa-field { border: 0; padding: 0; margin: 22px 0 0; }
.ropa-field legend { font-weight: 700; margin-bottom: 10px; padding: 0; }
.ropa-swatches, .ropa-sizes { display: flex; flex-wrap: wrap; gap: 10px; }
.ropa-swatch input, .ropa-size input, .ropa-logo input { position: absolute; opacity: 0; pointer-events: none; }
.ropa-swatch { position: relative; cursor: pointer; }
.ropa-swatch span:not(.sr-only) { display: block; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgb(0 0 0 / 0.18); box-shadow: inset 0 0 0 3px #fff; }
.ropa-swatch input:checked + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.ropa-swatch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.ropa-swatch.is-out { opacity: 0.35; cursor: not-allowed; }
.ropa-size { position: relative; }
.ropa-size span { display: grid; place-items: center; min-width: 52px; height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; font-weight: 600; cursor: pointer; }
.ropa-size input:checked + span { border-color: var(--ink); background: var(--ink); color: #fff; }
.ropa-size input:disabled + span { opacity: 0.35; cursor: not-allowed; text-decoration: line-through; }
.ropa-size input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.ropa-logos { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.ropa-logo { position: relative; display: grid; gap: 6px; justify-items: center; padding: 10px 8px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; text-align: center; }
.ropa-logo img { width: 56px; height: 56px; object-fit: contain; }
.ropa-logo-text { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--surface); font-weight: 700; font-size: 0.75rem; }
.ropa-logo-name { font-size: 0.8rem; font-weight: 600; }
.ropa-logo:has(input:checked) { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.ropa-logo:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.ropa-options [data-ropa-add] { margin-top: 26px; }

/* Manejo de Ropa (admin) */
.ropa-state { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; padding: 16px 20px; margin: 0 0 24px; border-radius: var(--radius); background: #fff8e1; border: 1px solid #f0dc8a; }
.ropa-state.is-open { background: #e8f6ee; border-color: #a3d9b9; }
.ropa-state h2 { font-size: 1.1rem; margin: 0 0 4px; }
.ropa-state .fine { margin: 0; }
.ropa-admin-sec { margin: 0 0 32px; }
.ropa-admin-sec h2 { font-size: 1.15rem; }
.ropa-admin-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.ropa-admin-head h2 { margin: 0; }
.ropa-thumb { width: 56px; }
.ropa-admin-cols { display: grid; gap: 0 32px; }
@media (min-width: 900px) { .ropa-admin-cols { grid-template-columns: 1fr 1fr; } }
.ropa-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 12px; list-style: none; }
.ropa-chips li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 6px 6px 12px; border: 1px solid var(--line); border-radius: 999px; font-weight: 600; font-size: 0.9rem; }
.ropa-chips form { margin: 0; }
.ropa-chips .btn-link { padding: 0 6px; color: var(--ink-2); }
.ropa-inline-form { display: flex; gap: 8px; }
.ropa-inline-form input { flex: 1; min-width: 0; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; }
.ropa-color-list, .ropa-logo-list { display: grid; gap: 10px; padding: 0; margin: 0 0 16px; list-style: none; }
.ropa-color-list { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.ropa-color-list li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.ropa-color-list li .btn-link { margin-left: auto; }
.ropa-color-dot { display: inline-block; width: 28px; height: 28px; flex: none; border-radius: 50%; border: 1px solid rgb(0 0 0 / 0.18); vertical-align: middle; }
.ropa-color-photo { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; }
.ropa-color-photo-lg { display: block; width: 140px; height: 140px; object-fit: contain; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; background: var(--surface); }
.ropa-logo-list { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.ropa-logo-list li { display: grid; gap: 4px; justify-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 12px; text-align: center; }
.ropa-logo-list li.is-off { opacity: 0.55; }
.ropa-logo-list img { width: 72px; height: 72px; object-fit: contain; }
.ropa-add-form { display: flex; flex-wrap: wrap; align-items: end; gap: 0 16px; padding: 14px 16px 2px; border: 1px dashed var(--line); border-radius: 12px; }
.ropa-add-form .field { flex: 1 1 180px; }
.ropa-add-form .btn { margin-bottom: 12px; }
.ropa-add-form input[type="color"] { width: 64px; height: 40px; padding: 2px; }
.ropa-style-form { max-width: 720px; display: grid; gap: 8px; }
.ropa-stock input[type="number"] { width: 76px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; font: inherit; text-align: right; }
.ropa-stock th[scope="row"] { white-space: nowrap; }
.ropa-out { display: flex; justify-content: flex-end; align-items: center; gap: 4px; margin-top: 4px; font-size: 0.75rem; color: var(--ink-2); }
.ropa-delete { margin-top: 24px; }
.order-free-delivery { margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; background: #e8f6ee; color: #1d6b42; font-weight: 600; font-size: 0.9rem; }
.ropa-free-delivery { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 4px 10px; border-radius: 999px; background: #e8f6ee; color: #1d6b42; font-size: 0.8rem; font-weight: 700; }
.ropa-pp { margin: 6px 0 0; }
.label-like { font-weight: 600; font-size: 0.9rem; }
.ropa-types { display: grid; gap: 8px; padding: 0; margin: 0 0 12px; list-style: none; }
.ropa-types li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; }
.ropa-types li > form:last-child { margin: 0 0 0 auto; }
.ropa-type-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; }
.ropa-type-form input[name="name"] { width: 140px; height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-weight: 600; }
.ropa-type-disc { display: inline-flex; align-items: center; gap: 4px; font-size: 0.85rem; font-weight: 600; }
.ropa-type-disc input { width: 84px; height: 34px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; font: inherit; text-align: right; }
.ropa-type-form .check { padding: 0; font-size: 0.85rem; }
/* Venta por WhatsApp: Ropa con logo lines */
@media (min-width: 720px) { .wa-ropa { grid-template-columns: 1.6fr 1fr 0.8fr 1fr 84px; } }
.wa-ropa .field select { width: 100%; }
.wa-ropa-stock { margin: 4px 0 8px; font-size: 0.85rem; }
.wa-ropa-stock summary { cursor: pointer; font-weight: 600; }
.wa-ropa-stock ul { margin: 8px 0 0; padding-left: 18px; color: var(--ink-2); }

/* Admin event form: Lugar + Cantidad de participantes; videos among the event's photos */
@media (min-width: 760px) { .ev-row-place { grid-template-columns: 3fr 1fr; } }
.ev-photo-grid video { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; display: block; background: #000; }
.ev-photo-badge { position: absolute; left: 6px; top: 6px; font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: rgb(0 0 0 / 0.7); color: #fff; pointer-events: none; }
.gallery-grid .is-video video { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; border-radius: 12px; background: #000; }
.past-cover.is-logo { background: #fff; border-bottom: 1px solid var(--line); }
.past-cover.is-logo img { object-fit: contain; padding: 18px; }

/* Home: Eventos Privados y Corporativos */
.home-private { background: linear-gradient(180deg, #fbf7f1, #fff); border-bottom: 1px solid var(--line); }
.home-private-grid { align-items: center; }
.home-private-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.home-private-showcase { display: grid; gap: 14px; }
.home-private-label { margin: 0; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.home-private-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hp-card { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; overflow: hidden; box-shadow: var(--shadow); transition: transform 0.2s, box-shadow 0.2s; }
.hp-card:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgb(0 0 0 / 0.05), 0 16px 32px rgb(0 0 0 / 0.1); }
.hp-cover { display: block; aspect-ratio: 16 / 10; background: var(--surface); }
.hp-cover img { width: 100%; height: 100%; object-fit: cover; }
.hp-cover.is-logo { background: #fff; border-bottom: 1px solid var(--line); }
.hp-cover.is-logo img { object-fit: contain; padding: 16px; }
.hp-cover-empty { display: grid; place-items: center; height: 100%; font-size: 2.2rem; background: linear-gradient(135deg, #241810, #15110d); }
.hp-body { display: grid; gap: 2px; padding: 12px 14px 14px; }
.hp-body strong { font-size: 0.98rem; line-height: 1.25; }
.hp-body small { color: var(--ink-2); font-size: 0.82rem; }

/* Completed private event: showcase page */
.pe-hero {
  color: #fff; padding: clamp(28px, 5vw, 56px) 0 clamp(32px, 5vw, 60px);
  background:
    radial-gradient(70% 120% at 85% 0%, rgb(201 129 52 / 0.32), transparent 65%),
    linear-gradient(135deg, #15110d, #261a11 55%, #15110d);
  border-bottom: 1px solid rgb(217 163 90 / 0.45);
}
.pe-back { display: inline-block; color: #d9b98c; font-size: 0.9rem; font-weight: 600; margin-bottom: 18px; }
.pe-back:hover { color: #fff; }
.pe-eyebrow { margin: 0 0 8px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #f0a560; }
.pe-title { margin: 0 0 8px; font-size: clamp(2rem, 5vw, 3.4rem); max-width: 22ch; }
.pe-client { margin: 0 0 4px; color: #d8d2c8; font-size: 1.05rem; }
.pe-intro { display: grid; gap: 28px; margin-top: 28px; align-items: center; }
@media (min-width: 820px) { .pe-intro.has-logo { grid-template-columns: minmax(220px, 340px) 1fr; gap: 44px; } }
.pe-logo { background: #fff; border-radius: 20px; padding: clamp(18px, 3vw, 30px); aspect-ratio: 4 / 3; display: grid; place-items: center; box-shadow: 0 20px 50px rgb(0 0 0 / 0.45), 0 0 0 1px rgb(217 163 90 / 0.5); }
.pe-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pe-desc { font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.65; color: #ece7df; margin: 0 0 22px; white-space: pre-line; max-width: 62ch; }
.pe-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin: 0; }
.pe-facts div { border: 1px solid rgb(217 163 90 / 0.35); border-radius: 14px; padding: 12px 14px; background: rgb(255 255 255 / 0.04); }
.pe-facts dt { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #d9b98c; }
.pe-facts dd { margin: 4px 0 0; font-size: 1.05rem; font-weight: 650; }

.pe-section { margin: 8px 0 44px; }
.pe-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 18px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.pe-section-head h2 { margin: 0; }
.pe-section-head p { margin: 0; }

/* Horizontal carousel */
.carousel { position: relative; }
.carousel-track { list-style: none; margin: 0; padding: 4px 2px 14px; display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: thin; overscroll-behavior-x: contain; }
.carousel-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.carousel-slide { flex: 0 0 min(86%, 560px); scroll-snap-align: start; border-radius: 16px; overflow: hidden; background: #000; box-shadow: var(--shadow); }
.carousel-slide a, .carousel-slide img, .carousel-slide video { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.carousel-slide video { object-fit: contain; }
.carousel-slide img { transition: transform 0.35s; }
.carousel-slide a:hover img { transform: scale(1.03); }
.carousel-btn { position: absolute; top: calc(50% - 7px); transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgb(255 255 255 / 0.94); color: var(--ink); font-size: 1.6rem; line-height: 1; cursor: pointer; box-shadow: 0 4px 14px rgb(0 0 0 / 0.25); z-index: 1; }
.carousel-btn:hover { background: #fff; }
.carousel-btn[hidden] { display: none; }
.carousel-prev { left: 10px; }
.carousel-next { right: 10px; }

/* Whiskys tasted */
.pe-whiskies { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.pe-whisky { display: grid; gap: 18px; border: 1px solid var(--line); border-radius: 18px; padding: clamp(16px, 2.5vw, 24px); background: #fff; }
@media (min-width: 760px) { .pe-whisky { grid-template-columns: 200px 1fr; gap: 28px; } }
.pe-whisky-media { position: relative; background: var(--surface); border-radius: 14px; padding: 12px; align-self: start; width: 100%; max-width: 220px; }
.pe-whisky-media img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.pe-whisky-num { position: absolute; top: 10px; left: 10px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #f0a560; font-weight: 800; font-size: 0.95rem; }
.pe-whisky-body h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); margin: 0 0 2px; }
.pe-whisky-body h3 a:hover { text-decoration: underline; }
.pe-whisky-maker { color: var(--ink-2); margin: 0 0 10px; }
.pe-chips { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pe-chips li { font-size: 0.82rem; font-weight: 650; padding: 4px 10px; border-radius: 99px; background: var(--accent-soft); color: #7a3606; }
.pe-score { margin: 0 0 12px; }
.pe-score-stars { color: #d08a1e; letter-spacing: 0.06em; margin-right: 6px; }
.pe-whisky-desc { margin: 0 0 14px; line-height: 1.65; }
.pe-notes { display: grid; gap: 10px; margin: 0; }
@media (min-width: 900px) { .pe-notes { grid-template-columns: repeat(3, 1fr); } }
.pe-notes div { background: var(--surface); border-radius: 12px; padding: 12px 14px; }
.pe-notes dt { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.pe-notes dd { margin: 0; font-size: 0.95rem; line-height: 1.55; }

/* What the guests said */
.pe-quotes { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.pe-quotes li { border-radius: 16px; padding: 18px 20px; background: #fbf7f1; border: 1px solid #efe4d3; }
.pe-quotes blockquote { margin: 0 0 10px; font-size: 1.02rem; line-height: 1.6; font-style: italic; }
.pe-quote-by { margin: 0; font-size: 0.85rem; color: var(--ink-2); }

/* Invitation to request a private event */
.pe-cta { color: #fff; padding: clamp(40px, 6vw, 72px) 0; background: radial-gradient(60% 140% at 15% 100%, rgb(201 129 52 / 0.3), transparent 70%), linear-gradient(135deg, #15110d, #241810 60%, #15110d); }
.pe-cta-grid { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .pe-cta-grid { grid-template-columns: 1.4fr 1fr; gap: 56px; } }
.pe-cta h2 { margin: 0 0 12px; }
.pe-cta-lead { color: #ddd6cb; font-size: 1.08rem; line-height: 1.65; max-width: 58ch; }
.pe-cta-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.pe-cta-points li { padding-left: 26px; position: relative; color: #ece7df; }
.pe-cta-points li::before { content: "✦"; position: absolute; left: 0; color: #f0a560; }
.pe-cta-actions { display: grid; gap: 10px; }
.pe-cta-actions .btn { justify-content: center; }
.btn-outline-light { border: 1px solid rgb(255 255 255 / 0.55); color: #fff; background: transparent; }
.btn-outline-light:hover { border-color: #fff; background: rgb(255 255 255 / 0.08); }

/* Manejo de Whiskys: Reintegrar botellas */
.reint { margin: 20px 0; scroll-margin-top: calc(var(--sticky-top) + 12px); }
.reint-search { display: flex; gap: 8px; max-width: 520px; margin-bottom: 14px; }
.reint-search input { flex: 1; min-width: 0; min-height: 42px; padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 1rem; }
.reint-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.reint-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.reint-row .inv-thumb { width: 44px; height: 44px; }
.reint-name { flex: 1 1 220px; font-weight: 650; }
.reint-name:hover { text-decoration: underline; }
.reint-form { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.reint-status { font-size: 0.8rem; font-weight: 700; padding: 3px 10px; border-radius: 99px; min-width: 86px; text-align: center; }
.reint-status.is-in { background: #e6f4ea; color: #1e6b34; }
.reint-status.is-out { background: #fde8e8; color: #9b1c1c; }
.reint-qty { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 600; }
.reint-qty input { width: 76px; min-height: 36px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; font-size: 1rem; text-align: right; }

/* Mobile: keep long content inside the screen */
.specs dd { overflow-wrap: anywhere; }
.ev-page-link .btn { white-space: normal; height: auto; min-height: 36px; text-align: left; }
.inv-card > *, .add-bottle > *, .ropa-admin-cols > * { min-width: 0; }
.add-bottle-row { grid-template-columns: minmax(0, 1fr) 90px auto; }
@media (max-width: 560px) { .add-bottle-row { grid-template-columns: minmax(0, 1fr) 80px; } }
.reint-form { flex-wrap: wrap; }
@media (max-width: 560px) {
  .inv-card { padding: 16px; }
  .inv-tools, .inv-search { width: 100%; }
  .inv-search input { min-width: 0; flex: 1; }
}
.ev-table td:nth-child(-n+2) { white-space: nowrap; }

/* Homepage on phones (≤640px): Entrar a Tienda label, buttons in one row, "Por qué comprar" above Catas,
   two-column Explorar tiles. Wide screens keep the original layout. */
.on-mob, .why-mob, .collection-icon { display: none; }
@media (max-width: 640px) {
  .on-desk, .why-desk { display: none; }
  .on-mob { display: inline; }
  .why-mob { display: block; padding: 0 0 clamp(40px, 10vw, 56px); }

  .hero-actions { flex-wrap: nowrap; gap: 10px; }
  .hero-actions .btn { flex: 1 1 0; min-width: 0; padding: 0 10px; font-size: clamp(0.85rem, 3.9vw, 1rem); }

  .collections { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .collection {
    position: relative; min-height: 0; padding: 14px 14px 16px; border-radius: 18px; border-color: transparent;
    background: linear-gradient(160deg, var(--tone, var(--surface-2)) 0%, #fff 78%);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.05), 0 6px 16px rgb(0 0 0 / 0.05);
  }
  .collection:active { transform: scale(0.97); }
  .collection-icon {
    display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 10px; border-radius: 50%;
    background: #fff; font-size: 1.35rem; line-height: 1; box-shadow: 0 2px 8px rgb(0 0 0 / 0.08);
  }
  .collection::after { content: "→"; position: absolute; top: 14px; right: 16px; font-weight: 700; color: var(--ink-2); }
  .collection h3 { font-size: 0.98rem; line-height: 1.2; margin: 0 0 4px; }
  .collection p { font-size: 0.78rem; line-height: 1.35; margin: 0; }
  .collection .link-arrow { display: none; }
  .subhead { margin-top: 36px; }
}

/* "¿Qué tan ahumado lo quieres?" campfire slider (homepage). Phones: a white card; wide screens: the night scene below. */
  .smoke-slider {
    --tone: #fdf1df; --smoke-c: #c9c4bd; --smoke-o: 0.45; --spark: 0; --fire: 0.58; --glow: 0.35;
    display: grid; gap: 6px; padding: 18px 18px 20px; border-radius: 22px; background: #fff;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.05), 0 8px 24px rgb(0 0 0 / 0.07);
  }
  .smoke-slider[data-level="0"] { --tone: #eceeef; --fire: 0; --glow: 0; --smoke-o: 0; }
  .smoke-slider[data-level="2"] { --tone: #fde5c8; --smoke-c: #aaa49c; --smoke-o: 0.6; --spark: 0.6; --fire: 0.74; --glow: 0.55; }
  .smoke-slider[data-level="3"] { --tone: #fbd6ad; --smoke-c: #8c867f; --smoke-o: 0.75; --spark: 0.85; --fire: 0.88; --glow: 0.75; }
  .smoke-slider[data-level="4"] { --tone: #f8c492; --smoke-c: #5f5953; --smoke-o: 0.9; --spark: 1; --fire: 1; --glow: 0.95; }
  .ss-stage {
    display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 16px;
    background: var(--tone); transition: background 0.4s; touch-action: pan-y;
  }
  .ss-fire { flex: none; width: 104px; height: 104px; overflow: visible; }
  .ss-flames { transform-origin: 60px 97px; transform: scale(var(--fire)); transition: transform 0.45s cubic-bezier(.3,1.4,.5,1); }
  .tg { transform-box: fill-box; transform-origin: 50% 100%; animation: ss-tongue 1.1s ease-in-out infinite; }
  .tg-l { animation-duration: 0.8s; animation-delay: -0.3s; }
  .tg-r { animation-duration: 0.95s; animation-delay: -0.6s; }
  .tg-m { animation-duration: 0.7s; }
  .tg-k { animation-duration: 0.6s; animation-delay: -0.2s; }
  .ss-sparks { opacity: var(--spark); transition: opacity 0.4s; }
  .sp { fill: #ffd451; transform-box: fill-box; animation: ss-ember 1.7s ease-out infinite; }
  .sp2 { --dx: 5px; animation-delay: -0.5s; } .sp3 { --dx: -6px; animation-delay: -1s; } .sp4 { --dx: 3px; animation-delay: -1.3s; }
  .ss-smoke { opacity: var(--smoke-o); transform: translateY(calc((1 - var(--fire)) * 56px)); transition: opacity 0.4s, transform 0.45s; }
  .pf { fill: var(--smoke-c); transform-box: fill-box; transform-origin: center; animation: ss-puff 3.2s linear infinite; transition: fill 0.4s; }
  .pf2 { --dx: -10px; animation-delay: -0.8s; } .pf3 { --dx: 8px; animation-delay: -1.6s; } .pf4 { --dx: -4px; animation-delay: -2.4s; }
  .ss-glow { fill: #ff8a1f; opacity: var(--glow); filter: blur(4px); transition: opacity 0.4s; }
  .ss-grain { fill: none; stroke: #2a170a; stroke-width: 0.8; stroke-linecap: round; opacity: 0.55; }
  .ss-ring { fill: none; stroke: #8a5a30; stroke-width: 0.7; }
  .ss-crack { fill: none; stroke: #ff7a12; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; opacity: var(--glow); transition: opacity 0.4s; }
  .ss-stones ellipse { fill: url(#ss-stone); stroke: #55524e; stroke-width: 0.6; }
  .ss-x { fill: none; stroke: #dc2626; stroke-width: 7; stroke-linecap: round; opacity: 0; transform-origin: 60px 76px; transform: scale(0.6); transition: opacity 0.25s, transform 0.3s cubic-bezier(.3,1.6,.5,1); }
  .smoke-slider[data-level="0"] .ss-x { opacity: 1; transform: none; }
  .ss-hint { display: flex; justify-content: center; align-items: center; gap: 10px; margin: 12px 0 -6px; font-size: 0.85rem; font-weight: 650; color: var(--ink-2); }
  .ss-hint span { color: var(--accent); font-size: 1.1rem; line-height: 1; }
  .ss-hint-l { animation: ss-nudge-l 1.6s ease-in-out infinite; }
  .ss-hint-r { animation: ss-nudge-r 1.6s ease-in-out infinite; }
  .ss-text { display: grid; gap: 2px; min-width: 0; }
  .ss-title { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
  .ss-sub { font-size: 0.85rem; color: var(--ink-2); }
  .ss-text.is-next { animation: ss-in-next 0.3s ease-out; }
  .ss-text.is-prev { animation: ss-in-prev 0.3s ease-out; }

  .ss-range { --p: 25%; -webkit-appearance: none; appearance: none; width: 100%; height: 40px; margin: 0; background: transparent; cursor: pointer; }
  .ss-range::-webkit-slider-runnable-track { height: 8px; border-radius: 99px; background: linear-gradient(to right, var(--accent) var(--p), var(--surface-2) var(--p)); }
  .ss-range::-moz-range-track { height: 8px; border-radius: 99px; background: var(--surface-2); }
  .ss-range::-moz-range-progress { height: 8px; border-radius: 99px; background: var(--accent); }
  .ss-range::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -11px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); box-shadow: 0 2px 8px rgb(0 0 0 / 0.2); }
  .ss-range::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); box-shadow: 0 2px 8px rgb(0 0 0 / 0.2); }
  .ss-range:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 99px; }
  .ss-ticks { position: relative; height: 26px; margin: 0 0 10px; padding: 0; list-style: none; }
  .ss-ticks li { position: absolute; top: 0; left: calc(15px + (100% - 30px) * var(--i) / 4); transform: translateX(-50%); }
  .ss-ticks li:first-child { transform: translateX(-15px); }
  .ss-ticks li:last-child { transform: translateX(calc(-100% + 15px)); }
  .ss-ticks button { padding: 4px 0; border: 0; background: none; font: inherit; font-size: 0.75rem; color: var(--ink-2); white-space: nowrap; cursor: pointer; }
  .ss-ticks li.is-on button { color: var(--accent); font-weight: 700; }
  .ss-embers, .pf-wide { display: none; }
  /* Level changes: the fire flares up when it grows; Sin humo puts it out with a puff of steam. */
  .ss-flames > g:first-child { transform-box: fill-box; transform-origin: 50% 100%; }
  .is-flare .ss-flames > g:first-child { animation: ss-flare 0.55s cubic-bezier(.3,1.5,.5,1); }
  .ss-steam circle { fill: #e3e6ea; opacity: 0; transform-box: fill-box; transform-origin: center; }
  .is-douse .ss-steam circle { animation: ss-steam 1.3s ease-out; }
  .is-douse .ss-steam circle:nth-child(2) { animation-delay: 0.12s; }
  .is-douse .ss-steam circle:nth-child(3) { animation-delay: 0.25s; }

@media (min-width: 641px) {
  .smoke-slider {
    --sky: #1d140d; --star: 0.55;
    position: relative; isolation: isolate; overflow: hidden;
    grid-template-columns: minmax(220px, 300px) minmax(0, 520px); grid-template-rows: auto auto auto auto 1fr;
    justify-content: center; column-gap: clamp(32px, 6vw, 88px); row-gap: 6px;
    padding: 44px clamp(28px, 5vw, 64px) 40px; border-radius: 28px; color: #fff;
    background-color: var(--sky);
    background-image: linear-gradient(180deg, rgb(8 10 20 / 0.55) 0%, rgb(0 0 0 / 0) 55%, rgb(0 0 0 / 0.35) 100%);
    box-shadow: 0 20px 50px rgb(29 20 13 / 0.28);
    transition: background-color 0.6s;
  }
  .smoke-slider[data-level="0"] { --sky: #161b22; --star: 1; }
  .smoke-slider[data-level="2"] { --sky: #24170e; --star: 0.45; }
  .smoke-slider[data-level="3"] { --sky: #2a190d; --star: 0.35; }
  .smoke-slider[data-level="4"] { --sky: #2e1a0b; --star: 0.25; }
  /* Stars (fade as the fire lights up the sky) and the warm, flickering firelight. */
  .smoke-slider::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: var(--star); transition: opacity 0.6s;
    background:
      radial-gradient(1.5px 1.5px at 8% 14%, #fff 98%, transparent), radial-gradient(1px 1px at 21% 7%, #fff 98%, transparent),
      radial-gradient(1.5px 1.5px at 37% 18%, #fff 98%, transparent), radial-gradient(1px 1px at 52% 9%, #fff 98%, transparent),
      radial-gradient(2px 2px at 66% 16%, #fff 98%, transparent), radial-gradient(1px 1px at 79% 6%, #fff 98%, transparent),
      radial-gradient(1.5px 1.5px at 91% 21%, #fff 98%, transparent), radial-gradient(1px 1px at 72% 31%, #fff 98%, transparent),
      radial-gradient(1px 1px at 45% 28%, #fff 98%, transparent), radial-gradient(1px 1px at 96% 8%, #fff 98%, transparent);
    animation: ss-twinkle 4s ease-in-out infinite alternate;
  }
  .smoke-slider::after {
    content: ""; position: absolute; z-index: -1; pointer-events: none; left: -10%; top: 10%; width: 70%; height: 130%;
    background: radial-gradient(closest-side, rgb(255 138 31 / 0.55), rgb(255 98 18 / 0.18) 55%, transparent);
    opacity: var(--glow); transform-origin: 50% 60%; transition: opacity 0.5s;
    animation: ss-light 2.6s ease-in-out infinite;
  }
  .ss-stage { display: contents; }
  .ss-fire { grid-column: 1; grid-row: 1 / -1; align-self: end; justify-self: center; width: 100%; max-width: 300px; height: auto; margin-top: 30px; }
  .ss-text, .ss-hint, .ss-range, .ss-ticks, .smoke-slider [data-ss-go] { grid-column: 2; }
  .ss-text { align-self: end; margin-bottom: 8px; }
  .ss-title { font-size: clamp(2.2rem, 4vw, 3.2rem); color: #fff; text-shadow: 0 0 24px rgb(255 138 31 / calc(var(--glow) * 0.8)); }
  .ss-sub { font-size: 1rem; color: rgb(255 255 255 / 0.72); }
  .ss-hint { justify-content: flex-start; margin: 4px 0 -4px; color: rgb(255 255 255 / 0.6); }
  .ss-hint span { color: #ffb347; }
  .ss-range::-webkit-slider-runnable-track { height: 10px; background: linear-gradient(to right, #9aa3ad 0%, #ffb347 30%, #f25a0c 65%, #5c2a0c 100%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12); }
  .ss-range::-moz-range-track { height: 10px; background: linear-gradient(to right, #9aa3ad 0%, #ffb347 30%, #f25a0c 65%, #5c2a0c 100%); }
  .ss-range::-moz-range-progress { background: transparent; }
  .ss-range::-webkit-slider-thumb {
    width: 30px; height: 30px; margin-top: -10px; border: 3px solid #fff;
    background: radial-gradient(circle at 40% 35%, #fff4c2, #ffb347 45%, #e2560c 100%);
    box-shadow: 0 0 0 6px rgb(255 160 60 / 0.22), 0 0 22px 4px rgb(255 120 30 / 0.7); animation: ss-thumb 1.8s ease-in-out infinite;
  }
  .ss-range::-moz-range-thumb {
    border: 3px solid #fff; background: radial-gradient(circle at 40% 35%, #fff4c2, #ffb347 45%, #e2560c 100%);
    box-shadow: 0 0 0 6px rgb(255 160 60 / 0.22), 0 0 22px 4px rgb(255 120 30 / 0.7);
  }
  .ss-range:focus-visible { outline-color: #ffb347; }
  .ss-ticks button { font-size: 0.85rem; color: rgb(255 255 255 / 0.6); }
  .ss-ticks button:hover { color: #fff; }
  .ss-ticks li.is-on button { color: #ffb347; }
  .smoke-slider [data-ss-go] {
    justify-self: start; align-self: start; width: auto; margin-top: 6px; padding: 0 28px;
    background: linear-gradient(180deg, #ffb347, #f07a1a); color: #1d140d; box-shadow: 0 8px 24px rgb(240 122 26 / 0.35);
    transition: transform 0.2s, box-shadow 0.2s;
  }
  .smoke-slider [data-ss-go]:hover { background: linear-gradient(180deg, #ffc266, #f5862a); transform: translateY(-2px); box-shadow: 0 12px 30px rgb(240 122 26 / 0.5); }
  .smoke-slider[data-level="0"] [data-ss-go] { background: #e7eaee; box-shadow: none; }
  /* Bigger, slower smoke from a bigger fire. */
  .pf-wide { display: inline; }
  .pf { animation-duration: 4.2s; }
  .pf5 { --dx: 14px; animation-delay: -0.6s; } .pf6 { --dx: -16px; animation-delay: -2s; } .pf7 { --dx: 10px; animation-delay: -3.3s; }
  .pf2 { animation-delay: -1.1s; } .pf3 { animation-delay: -2.6s; } .pf4 { animation-delay: -3.6s; }
  /* Embers drifting up out of the fire. */
  .ss-embers { display: block; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: var(--spark); transition: opacity 0.5s; }
  .ss-embers i {
    position: absolute; bottom: 22%; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%;
    background: #ffd36b; box-shadow: 0 0 6px 2px rgb(255 140 30 / 0.8);
    animation: ss-float var(--t) ease-out var(--d) infinite;
  }
  .ss-embers i:nth-child(odd) { --sway: 26px; }
  .ss-embers i:nth-child(even) { --sway: -22px; }
}
@keyframes ss-tongue { 0%, 100% { transform: none; } 33% { transform: scale(0.94, 1.07) skewX(2deg); } 66% { transform: scale(1.04, 0.95) skewX(-2deg); } }
@keyframes ss-ember { from { transform: none; opacity: 1; } to { transform: translate(var(--dx, -3px), -42px); opacity: 0; } }
@keyframes ss-puff { 0% { transform: translateY(4px) scale(0.5); opacity: 0; } 15% { opacity: 0.85; } 100% { transform: translate(var(--dx, 4px), -40px) scale(2.3); opacity: 0; } }
@keyframes ss-nudge-l { 0%, 100% { transform: none; } 50% { transform: translateX(-4px); } }
@keyframes ss-nudge-r { 0%, 100% { transform: none; } 50% { transform: translateX(4px); } }
@keyframes ss-in-next { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes ss-in-prev { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
@keyframes ss-flare { 0% { transform: none; } 40% { transform: scale(1.18, 1.3); } 100% { transform: none; } }
@keyframes ss-steam { 0% { opacity: 0; transform: translateY(0) scale(0.6); } 25% { opacity: 0.9; } 100% { opacity: 0; transform: translateY(-46px) scale(2.6); } }
@keyframes ss-twinkle { from { filter: brightness(0.7); } to { filter: brightness(1.2); } }
@keyframes ss-light { 0%, 100% { transform: scale(1); } 20% { transform: scale(1.04, 0.98); } 45% { transform: scale(0.97, 1.03); } 70% { transform: scale(1.03); } }
@keyframes ss-thumb { 0%, 100% { box-shadow: 0 0 0 6px rgb(255 160 60 / 0.22), 0 0 18px 3px rgb(255 120 30 / 0.6); } 50% { box-shadow: 0 0 0 8px rgb(255 160 60 / 0.16), 0 0 28px 6px rgb(255 120 30 / 0.85); } }
@keyframes ss-float {
  0% { transform: translate(0, 0) scale(1); opacity: 0; }
  10% { opacity: 1; }
  50% { transform: translate(var(--sway), -140px) scale(0.8); }
  100% { transform: translate(calc(var(--sway) * -0.5), -300px) scale(0.3); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tg, .sp, .pf, .ss-hint span, .ss-text.is-next, .ss-text.is-prev, .ss-embers i, .smoke-slider::before, .smoke-slider::after,
  .is-flare .ss-flames > g:first-child, .is-douse .ss-steam circle, .ss-range::-webkit-slider-thumb { animation: none; }
}

/* Cask strength sits at the lower left of the card photo, apart from Nuevo / Agotado. */
.badge-cask { position: absolute; left: 10px; bottom: 10px; box-shadow: 0 1px 3px rgb(0 0 0 / 0.12); }
/* Header and footer logo: "Clan de Whiskeros" under "Mythical Cask", within the logo's height. */
.site-header .logo-text, .logo-footer .logo-text { display: flex; flex-direction: column; line-height: 1.1; }
.logo-sub { font-size: 0.68em; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-2); }
@media (max-width: 349px) { .site-header .logo-text { display: none; } }

/* Tienda tabs on phones: all categories on screen at once (no sideways scrolling), as small stacked tiles. */
@media (max-width: 640px) {
  .shop-cats {
    display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 8px;
    margin: 0 0 22px; padding: 4px 0 8px; overflow: visible;
  }
  .shop-cats .shop-tab {
    flex-direction: column; justify-content: flex-start; gap: 6px; min-width: 0;
    padding: 10px 6px 12px; border-radius: 16px; text-align: center;
  }
  .shop-cats .shop-tab-icon { width: 40px; height: 40px; border-radius: 12px; }
  .shop-cats .shop-tab-text { justify-items: center; min-width: 0; }
  .shop-cats .shop-tab-label { font-size: 0.85rem; line-height: 1.2; overflow-wrap: anywhere; }
  .shop-cats .shop-tab-count { font-size: 0.72rem; }
}

/* Whisky score star: upper right of the card photo (number inside) and next to Nivel de humo on the whisky page.
   No rating yet: the star's outline with "NR". */
.score-star { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 44px; height: 44px; }
.score-star svg { grid-area: 1 / 1; width: 100%; height: 100%; fill: #f6b915; stroke: #d99a00; stroke-width: 1; stroke-linejoin: round; filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.18)); }
.score-star > span { position: relative; grid-area: 1 / 1; margin-top: 3px; font-size: 0.68rem; font-weight: 800; letter-spacing: -0.02em; color: #000; }
.score-star.is-nr svg { fill: none; stroke: #c99a1e; stroke-width: 1.4; filter: none; }
.score-star.is-nr > span { font-size: 0.6rem; color: var(--ink-2); }
/* Mi Whiskiteca: the member's own rating, a blue star to the left of the yellow average. */
.score-star.is-mine { right: 50px; }
.score-star.is-mine svg { fill: #3b82f6; stroke: #1d5fd1; }
.score-star.is-mine > span { color: #fff; font-size: 0.75rem; }
/* Whisky page: the star with the average inside, then "de 12 whiskeros" (links to the reviews). */
a.tag-score { color: inherit; text-decoration: none; padding-left: 4px; height: 40px; }
a.tag-score:hover { background: var(--surface-2, #ece8e1); }
.tag-star { position: relative; display: grid; place-items: center; width: 42px; height: 42px; margin: -4px 0; }
.tag-star svg { grid-area: 1 / 1; width: 100%; height: 100%; fill: #f6b915; stroke: #d99a00; stroke-width: 1; stroke-linejoin: round; filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.15)); }
.tag-star b { position: relative; grid-area: 1 / 1; margin-top: 4px; font-size: 0.7rem; font-weight: 800; color: #000; letter-spacing: -0.02em; }
.tag-score.is-nr .tag-star svg { fill: none; stroke: #c99a1e; stroke-width: 1.4; filter: none; }
.tag-score.is-nr .tag-star b { color: var(--ink-2); font-size: 0.55rem; }

/* "Por qué comprar" cards: the illustration floats at the top left; title and text start beside it and
   wrap underneath once they pass it. */
.why-grid li { display: block; }
.why-grid li > strong, .why-grid li > span:not(.why-icon) { display: block; }
.why-grid li > strong { margin-bottom: 4px; }
.why-icon { float: left; display: grid; place-items: center; width: 56px; height: 56px; margin: 2px 12px 4px 0; border-radius: 16px; background: var(--tone); }
.why-icon svg { width: 44px; height: 44px; }

/* Whisky page: magnifying circle over the bottle photo (app.js). Plain white behind the photo, no blending: in a
   phone browser dark mode a blended background turned the circle black. */
.product-media[data-loupe] { cursor: zoom-in; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
/* The photo itself takes no touches: a long press must not start dragging the image (newer Android browsers). */
.product-media[data-loupe] img { pointer-events: none; -webkit-user-drag: none; }
.loupe {
  position: fixed; z-index: 80; width: 180px; height: 180px; border-radius: 50%; pointer-events: none;
  background-color: #fff; background-repeat: no-repeat; color-scheme: light;
  border: 3px solid #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.08), 0 12px 32px rgb(0 0 0 / 0.25);
  opacity: 0; transform: scale(0.6); transition: opacity 0.15s, transform 0.15s;
}
.loupe.is-touch { width: 140px; height: 140px; }
.loupe.is-on { opacity: 1; transform: none; }
.loupe.is-jump { transition: opacity 0.15s, transform 0.15s, left 0.18s ease-out, top 0.18s ease-out; }
@media (prefers-reduced-motion: reduce) { .loupe, .loupe.is-jump { transition: none; } }

/* Mi lista: "Enviar pedido por WhatsApp" greyed out while it can't be sent (empty list, too many extra discounts…). */
.btn-wa:disabled { background: #c9c6c0; color: #fff; cursor: not-allowed; box-shadow: none; transform: none; }

/* TEMPORARY: Arreglo de fotos (admin). */
.notice-error { background: #fef3f2; color: #b42318; border: 1px solid #fecdca; }
.pf-page { min-width: 0; max-width: 100%; }
.pf-count { margin: 0 0 12px; color: var(--ink-2); }
.pf-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pf-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto 32px; align-items: center; gap: 8px 14px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.pf-thumb { width: 48px; height: 48px; object-fit: contain; border-radius: 8px; background: var(--surface); mix-blend-mode: multiply; }
.pf-name { display: grid; gap: 2px; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.pf-name small { font-size: 0.75rem; font-weight: 600; }
.pf-in { color: #1e6b34; } .pf-out { color: var(--ink-2); }
.pf-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.pf-form input[type="url"] { width: min(360px, 60vw); min-height: 36px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 0.9rem; }
.pf-file, .pf-skip .btn-link { font-size: 0.8rem; color: var(--ink-2); cursor: pointer; }
.pf-skip { margin: 0; }
.pf-status { font-size: 0.8rem; font-weight: 700; color: var(--ink-2); }
.pf-status.is-ok { font-size: 1.4rem; color: #16a34a; }
.pf-status.is-error { grid-column: 2 / -1; color: #b42318; font-size: 0.8rem; }
.pf-row.is-done { background: #f0fbf4; border-color: #abefc6; }
.pf-row.is-done .pf-form { opacity: 0.5; }
.pf-done { margin-top: 24px; padding: 20px; border-radius: 16px; background: #ecfdf3; text-align: center; }
.pf-done[hidden] { display: none; }
.pf-done p { margin: 0 0 12px; }
@media (max-width: 720px) {
  .pf-row { grid-template-columns: 48px minmax(0, 1fr) 32px; }
  .pf-form { grid-column: 1 / -1; }
  .pf-form input[type="url"] { flex: 1 1 140px; width: 140px; min-width: 0; }
}

/* Smoke slider with WebGL: the live campfire (app.js) paints the whole panel (wide screens) or the fire's box (phones);
   the SVG fire keeps its place (hidden) so the canvas knows where to draw it. */
.ss-gl { display: none; }
@media (max-width: 640px) {
  .has-gl .ss-stage {
    position: relative; isolation: isolate; overflow: hidden; min-height: 168px; align-items: flex-end;
    padding-top: 40px; background: #07080c;
  }
  .has-gl .ss-stage .ss-gl { display: block; position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
  .has-gl .ss-fire { visibility: hidden; width: 118px; height: 118px; }
  .has-gl .ss-text { align-self: center; }
  .has-gl .ss-title { color: #fff; text-shadow: 0 0 18px rgb(255 138 31 / calc(var(--glow) * 0.8)); }
  .has-gl .ss-sub { color: rgb(255 255 255 / 0.75); }
}
@media (min-width: 641px) {
  .smoke-slider { min-height: 440px; }
  .smoke-slider.has-gl { background: #07080c; }
  .has-gl .ss-gl { display: block; position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
  .has-gl .ss-fire { visibility: hidden; }
  .has-gl .ss-embers, .smoke-slider.has-gl::before, .smoke-slider.has-gl::after { display: none; }
}

/* Product cards, mouse only (phones don't get these): while the cursor is on a card the photo gets a black outline,
   and every 4 s the badges play a short (under 1 s) animation — a shine sweeping Nuevo left to right, the star
   brightening and back, a little pop on Cask strength. */
@media (hover: hover) and (pointer: fine) {
  .card-img::after {
    content: ""; position: absolute; inset: 0; border: 3px solid var(--ink); border-radius: inherit;
    opacity: 0; pointer-events: none; transition: opacity 0.2s;
  }
  .card-link:hover .card-img::after { opacity: 1; }
  .badge-new { position: relative; overflow: hidden; }
  .badge-new::after {
    content: ""; position: absolute; inset: 0; transform: translateX(-120%);
    background: linear-gradient(100deg, transparent 20%, rgb(255 255 255 / 0.75) 50%, transparent 80%);
  }
  .card-link:hover .badge-new::after { animation: card-shine 4s ease-in-out infinite; }
  .card-link:hover .score-star:not(.is-nr) svg { animation: card-star 4s ease-in-out infinite; }
  .card-link:hover .badge-cask { animation: card-pop 4s ease-in-out infinite; }
}
@keyframes card-shine { 0% { transform: translateX(-120%); } 18%, 100% { transform: translateX(120%); } }
@keyframes card-star {
  0%, 20%, 100% { fill: #f6b915; filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.18)); }
  9% { fill: #ffe45c; filter: drop-shadow(0 0 6px rgb(255 214 64 / 0.95)); }
}
@keyframes card-pop {
  0%, 18%, 100% { transform: none; }
  5% { transform: scale(1.12) rotate(-3deg); }
  10% { transform: scale(1.06) rotate(2deg); }
  14% { transform: scale(1.02) rotate(-1deg); }
}
@media (prefers-reduced-motion: reduce) {
  .card-link:hover .badge-new::after, .card-link:hover .score-star svg, .card-link:hover .badge-cask { animation: none; }
}

/* Card price area: the + button shares the Precio Regular row (label and amount wrap beside it, never under it) and
   the Patreon price gets its own full-width row below, so the button can't cover a price at any screen size. */
.card-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 8px; row-gap: 2px; }
.card-foot > .price-block { display: contents; }
.card-foot > .price-block > .price { grid-column: 1; grid-row: 1; min-width: 0; }
.card-foot > .price-block > .price-patreon { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
.card-foot > .add-btn { grid-column: 2; grid-row: 1; }
.card-foot > .price-block > .price-patreon { white-space: normal; max-width: 100%; }
.card-foot .price-patreon strong { white-space: nowrap; }
@media (max-width: 639px) { .card-foot > .add-btn { align-self: start; } }

/* Mi lista on phones (and short screens): one continuous scroll from the bottles down to the totals, delivery fields
   and the WhatsApp button, instead of a fixed bottom block that leaves little room for the list. The title bar with
   the close button stays at the top. */
@media (max-width: 640px), (max-height: 640px) {
  .drawer-panel { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .drawer-head { position: sticky; top: 0; z-index: 2; background: #fff; }
  .drawer-body { flex: 1 0 auto; overflow: visible; }
  .drawer-foot { flex: none; }
}

/* Admin, Notas y Barricas */
.notes-table { width: 100%; border-collapse: collapse; }
.notes-table th, .notes-table td { padding: 8px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.notes-table thead th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); background: var(--surface); white-space: nowrap; }
.notes-table thead th a { color: inherit; text-decoration: none; }
.notes-table thead th[aria-sort] a { color: var(--ink); }
.notes-table tbody tr:last-child > * { border-bottom: 0; }
.notes-table .num { text-align: right; font-variant-numeric: tabular-nums; width: 1%; white-space: nowrap; }
.notes-table td:first-child a { color: var(--ink); text-decoration: none; font-weight: 600; }
.notes-table td:first-child a:hover { text-decoration: underline; }
.notes-table tbody tr:hover { background: var(--surface); }
.notes-table tr.is-current { background: var(--accent-soft); }
.notes-table tr.is-out { color: var(--ink-2); }
.notes-jump { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 8px; }
.notes-family { margin-top: 24px; scroll-margin-top: 150px; }
.notes-family h2, .notes-detail h2 { font-size: 1.1rem; margin: 0 0 8px; }
.notes-family h2 .muted, .notes-detail h2 .muted { font-weight: 500; font-size: 0.9rem; }
.notes-cask-grid { display: grid; gap: 0 24px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); align-items: start; }
.notes-detail { margin: 16px 0; padding: 16px; border: 2px solid var(--accent); border-radius: var(--radius); scroll-margin-top: 150px; }
.notes-detail-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.notes-unmatched { margin-top: 32px; }
.notes-unmatched summary { cursor: pointer; font-weight: 600; }
.notes-unmatched ul { columns: 3 220px; font-size: 0.85rem; padding-left: 18px; }
/* Phones: the Nota column stays in place while the numbers scroll sideways. */
@media (max-width: 640px) {
  .notes-table th, .notes-table td { padding: 8px 7px; font-size: 0.85rem; }
  .notes-table thead th { font-size: 0.68rem; letter-spacing: 0.03em; }
  .notes-table th:first-child, .notes-table td:first-child { position: sticky; left: 0; z-index: 1; background: #fff; box-shadow: 1px 0 0 var(--line); }
  .notes-table thead th:first-child { background: var(--surface); }
  .notes-table tr.is-current td:first-child { background: var(--accent-soft); }
}

/* Mi Whiskiteca: Por Calificar button and the stars legend; the Por Calificar page */
.wk-bar { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; justify-content: space-between; margin: 0 0 20px; }
.wk-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0; font-size: 0.85rem; color: var(--ink-2); }
.wk-dot { color: #f6b915; font-size: 1.1rem; line-height: 1; }
.wk-dot + .wk-dot, .wk-legend .wk-dot:not(:first-child) { margin-left: 10px; }
.wk-dot-mine { color: #3b82f6; }
.whiskiteca-meta a { color: inherit; }
.wk-rate { max-width: 760px; display: grid; gap: 16px; }
.wk-rate-list { display: grid; gap: 10px; }
.wk-rate-row { border: 1px solid var(--line); border-radius: 12px; background: var(--bg); scroll-margin-top: 150px; }
.wk-rate-row > summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; font-weight: 700; list-style: none; }
.wk-rate-row > summary::-webkit-details-marker { display: none; }
.wk-rate-row > summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--ink-2); }
.wk-rate-row[open] > summary::after { content: "−"; }
.wk-rate-row[open] { border-color: var(--accent); }
.wk-rate-form { margin: 0 12px 12px; }
.wk-rate-form .wk-save { justify-self: end; }

/* Rating questionnaires: «¿Nos autoriza publicar su nombre y su calificación?» */
.ps-consent { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.ew-rate .ps-again legend, .ps-consent legend, .ew-rate .ps-consent legend { font-weight: 700; font-size: 0.95rem; margin-bottom: 4px; text-transform: none; letter-spacing: 0; }
.ps-consent label { display: flex; gap: 8px; align-items: center; font-weight: 600; }
.ps-consent input { accent-color: var(--accent); width: 18px; height: 18px; }

/* Rating slider (questionnaires): a Glencairn glass that fills with whisky from 1 to 5, the number and its word, and
   a range with steps of 0.5. --p = filled part of the track, --t = 0..1 along the scale. */
.rate { --p: 50%; --t: 0.5; display: grid; gap: 6px; max-width: 460px; }
.rate-top { display: flex; align-items: center; gap: 14px; }
.rate-hand {
  position: relative; flex: none; display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #fff 0 52%, transparent 53%),
    conic-gradient(from 180deg, hsl(calc(10 + var(--t) * 35) 85% 58%) calc(var(--t) * 100%), var(--surface-2, #ece8e1) 0);
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.08);
}
.rate-glass { width: 42px; height: 74px; overflow: visible; }
.rate-glass-inside { fill: #fff; }
.rate-glass-shine { fill: none; stroke: #fff; stroke-width: 12; stroke-linecap: round; opacity: 0.7; }
.rate-glass-shine-sm { stroke-width: 8; opacity: 0.55; }
/* The whisky's surface goes from y 630 (a drop, 1) to y 400 (a generous pour, 5), like a real pour: fast, then easing. */
.rate-whisky { transform: translateY(calc((1 - var(--t)) * 230px)); transition: transform 0.9s cubic-bezier(0.22, 0.8, 0.3, 1); }
.rate-slosh { transform-box: view-box; transform-origin: 237px 402px; }
.rate-whisky-top { fill: #fcd893; opacity: 0.85; }
.rate-whisky-line { fill: #7a4410; opacity: 0.35; }
.rate-pour { opacity: 0; transform-box: view-box; transform-origin: 237px 0; }
.rate-bubble { fill: #fff2cf; opacity: 0; }
/* A change: the surface tilts and settles (sloshes); up: the whisky is poured in, with a few bubbles. */
.is-up .rate-slosh { animation: rate-slosh-up 1.6s ease-out; }
.is-down .rate-slosh { animation: rate-slosh-down 1.4s ease-out; }
.is-up .rate-pour { animation: rate-pour 0.95s ease-in forwards; }
.is-up .rate-bubble { animation: rate-bubble 1.2s ease-out 0.25s; }
.is-up .rate-bubble:nth-of-type(2) { animation-delay: 0.4s; }
.is-up .rate-bubble:nth-of-type(3) { animation-delay: 0.55s; }
@keyframes rate-slosh-up { 0% { transform: rotate(0); } 18% { transform: rotate(-5deg); } 38% { transform: rotate(3.5deg); } 56% { transform: rotate(-2deg); } 74% { transform: rotate(1deg); } 88% { transform: rotate(-0.4deg); } 100% { transform: rotate(0); } }
@keyframes rate-slosh-down { 0% { transform: rotate(0); } 20% { transform: rotate(4deg); } 42% { transform: rotate(-2.5deg); } 64% { transform: rotate(1.2deg); } 84% { transform: rotate(-0.4deg); } 100% { transform: rotate(0); } }
@keyframes rate-pour {
  0% { opacity: 1; transform: translateY(0) scaleY(0); }
  22% { opacity: 1; transform: translateY(0) scaleY(1); }
  62% { opacity: 1; transform: translateY(0) scaleY(1); }
  100% { opacity: 1; transform: translateY(680px) scaleY(1); }
}
@keyframes rate-bubble { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: 0.9; } 100% { opacity: 0; transform: translateY(-60px); } }
.rate[data-untouched] .rate-hand { filter: grayscale(1); opacity: 0.55; }
/* 5: a little burst around the full glass */
.rate-spark { position: absolute; inset: -6px; border-radius: 50%; pointer-events: none; opacity: 0; }
.rate[data-top] .rate-spark {
  opacity: 1; background: radial-gradient(circle, transparent 58%, rgb(246 185 21 / 0.55) 60%, transparent 70%);
  animation: rate-burst 0.9s ease-out forwards;
}
@keyframes rate-burst { from { transform: scale(0.7); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
.rate-readout { display: grid; line-height: 1.15; }
.rate-num { font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.rate-word { font-weight: 700; color: var(--ink-2); }
.rate[data-untouched] .rate-num { color: var(--ink-2); }
.rate[data-untouched] .rate-word { font-weight: 500; font-size: 0.9rem; }
.rate-range { -webkit-appearance: none; appearance: none; width: 100%; height: 40px; margin: 0; background: transparent; cursor: pointer; touch-action: pan-y; }
.rate-range::-webkit-slider-runnable-track { height: 8px; border-radius: 99px; background: linear-gradient(to right, var(--accent) var(--p), var(--surface-2, #e7e2da) var(--p)); }
.rate-range::-moz-range-track { height: 8px; border-radius: 99px; background: var(--surface-2, #e7e2da); }
.rate-range::-moz-range-progress { height: 8px; border-radius: 99px; background: var(--accent); }
.rate-range::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -11px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); box-shadow: 0 2px 8px rgb(0 0 0 / 0.2); }
.rate-range::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); box-shadow: 0 2px 8px rgb(0 0 0 / 0.2); }
.rate[data-untouched] .rate-range::-webkit-slider-runnable-track { background: var(--surface-2, #e7e2da); }
.rate[data-untouched] .rate-range::-moz-range-progress { background: transparent; }
.rate[data-untouched] .rate-range::-webkit-slider-thumb { border-color: var(--ink-2); }
.rate-range:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 99px; }
.rate-ticks { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0 -4%; font-size: 0.68rem; line-height: 1.2; color: var(--ink-2); text-align: center; }
.rate-ticks b { display: block; font-size: 0.8rem; color: var(--ink); }
.rate-need { margin: 0; color: #b42318; font-weight: 600; font-size: 0.9rem; }
@media (prefers-reduced-motion: reduce) {
  .rate-whisky { transition: none; }
  .rate-slosh, .rate-pour, .rate-bubble, .rate[data-top] .rate-spark { animation: none !important; }
}

/* Admin → Calificaciones */
.rv-list { display: grid; gap: 8px; margin-top: 12px; }
.rv-row { border: 1px solid var(--line); border-radius: 12px; background: var(--bg); scroll-margin-top: 150px; }
.rv-row[open] { border-color: var(--accent); }
.rv-row > summary {
  display: grid; grid-template-columns: 150px minmax(120px, 1fr) minmax(140px, 1.6fr) 70px 110px; gap: 4px 14px; align-items: center;
  padding: 12px 16px; cursor: pointer; list-style: none;
}
.rv-row > summary::-webkit-details-marker { display: none; }
.rv-when { font-size: 0.82rem; color: var(--ink-2); }
.rv-who { font-weight: 700; }
.rv-what { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-score { font-weight: 800; font-variant-numeric: tabular-nums; }
.rv-status { justify-self: start; padding: 3px 10px; border-radius: 99px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
.rv-status.is-new { background: #fdf1e3; color: #9a4a0c; }
.rv-status.is-pub { background: #e6f6ec; color: #17693a; }
.rv-status.is-nopub { background: var(--surface); color: var(--ink-2); }
.rv-body { padding: 0 16px 16px; display: grid; gap: 10px; }
.rv-facts { display: grid; gap: 8px; margin: 0; padding: 14px; border-radius: 10px; background: var(--surface); }
.rv-facts div { display: grid; grid-template-columns: 260px 1fr; gap: 12px; }
.rv-facts dt { font-size: 0.85rem; color: var(--ink-2); }
.rv-facts dd { margin: 0; }
.rv-yes { color: #17693a; }
.rv-no { color: #b42318; }
.rv-actions { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; }
.rv-publish label { display: flex; gap: 8px; align-items: center; font-weight: 700; cursor: pointer; }
.rv-publish input { width: 20px; height: 20px; accent-color: #17693a; }
.rv-publish label.is-disabled { color: var(--ink-2); cursor: not-allowed; }
@media (max-width: 760px) {
  .rv-row > summary { grid-template-columns: 1fr auto; }
  .rv-when { grid-column: 1 / -1; }
  .rv-what { grid-column: 1; }
  .rv-score { grid-column: 2; grid-row: 2; justify-self: end; }
  .rv-status { grid-column: 2; grid-row: 3; justify-self: end; }
  .rv-facts div { grid-template-columns: 1fr; gap: 2px; }
}


/* Whisky page: Reviews reales de compradores */
.br { background: linear-gradient(180deg, var(--bg) 0%, #fbf3ea 45%, var(--bg) 100%); scroll-margin-top: 120px; }
.br-top { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(200px, 0.8fr); gap: 24px 40px; align-items: center; margin-bottom: 32px; }
.br-intro h2 { margin: 4px 0 10px; }
.br-lead { margin: 0 0 22px; max-width: 56ch; font-size: 1.05rem; color: var(--ink-2); }
.br-summary { display: flex; gap: 22px; align-items: center; padding: 18px 22px; border-radius: 20px; background: #fff; box-shadow: 0 6px 24px rgb(120 60 10 / 0.08); max-width: 560px; }
.br-bigstar { position: relative; flex: none; display: grid; place-items: center; width: 104px; height: 104px; }
.br-bigstar svg { grid-area: 1 / 1; width: 100%; height: 100%; fill: #f6b915; stroke: #d99a00; stroke-width: 0.8; stroke-linejoin: round; filter: drop-shadow(0 4px 10px rgb(217 154 0 / 0.35)); }
.br-bigstar b { position: relative; grid-area: 1 / 1; margin-top: 8px; font-size: 1.45rem; font-weight: 800; color: #000; }
.br-bars { flex: 1; display: grid; gap: 5px; min-width: 0; }
.br-votes { margin: 0 0 4px; font-size: 0.95rem; color: var(--ink-2); }
.br-votes strong { color: var(--ink); font-size: 1.1rem; }
.br-club { margin: -2px 0 6px; font-size: 0.82rem; color: var(--ink-2); }
.br-club strong { color: var(--ink); }
.br-bar { display: grid; grid-template-columns: 118px 1fr 24px; gap: 8px; align-items: center; font-size: 0.78rem; }
.br-bar-label { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.br-bar-track { height: 8px; border-radius: 99px; background: var(--surface); overflow: hidden; }
.br-bar-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f6b915, var(--accent)); }
.br-bar-n { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.br-art { width: 100%; max-width: 300px; justify-self: center; overflow: visible; }
.br-art-shadow { fill: rgb(120 60 10 / 0.1); }
.br-art-aroma { fill: none; stroke: #d9a35c; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 6 8; animation: br-aroma 3s linear infinite; }
.br-art-bubble rect, .br-art-bubble path { fill: #fff; stroke: #e2c9a8; stroke-width: 2; }
.br-art-bubble text { font: 700 13px/1 system-ui, sans-serif; text-anchor: middle; fill: var(--ink); }
.br-b2 text { fill: #e0a400; font-size: 11px; letter-spacing: 1px; }
.br-art-bubble { animation: br-float 5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.br-b2 { animation-delay: -1.6s; }
.br-b3 { animation-delay: -3.2s; }
.br-art-spark { fill: #f6b915; animation: br-twinkle 2.4s ease-in-out infinite; }
.br-art-spark:nth-of-type(2n) { animation-delay: -1.2s; }
@keyframes br-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes br-aroma { to { stroke-dashoffset: -28; } }
@keyframes br-twinkle { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
.br-list { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.br-card {
  position: relative; padding: 20px 20px 16px; border-radius: 20px; background: #fff; display: grid; gap: 8px; align-content: start;
  box-shadow: 0 1px 0 var(--line), 0 8px 24px rgb(120 60 10 / 0.07); animation: br-in 0.5s ease-out both; animation-delay: var(--d, 0ms);
}
.br-card::before { content: "“"; position: absolute; right: 18px; bottom: -18px; font: 900 7rem/1 Georgia, serif; color: rgb(180 83 10 / 0.08); pointer-events: none; }
@keyframes br-in { from { opacity: 0; transform: translateY(10px); } }
.br-head { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
.br-avatar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; font-weight: 800; font-size: 1.1rem; color: #fff; background: var(--accent); }
.br-avatar[data-tone="1"] { background: #3b6e8f; }
.br-avatar[data-tone="2"] { background: #5b3fa3; }
.br-avatar[data-tone="3"] { background: #17693a; }
.br-avatar[data-tone="4"] { background: #9b2c4f; }
.br-name { display: block; }
.br-verified { font-size: 0.78rem; color: #17693a; font-weight: 700; }
.br-score { padding: 6px 12px; border-radius: 99px; background: #fff5dc; font-weight: 800; font-size: 1.05rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.br-word { margin: 4px 0 0; font-weight: 800; color: var(--accent); font-size: 0.95rem; }
.br-text { margin: 0; font-size: 1.05rem; line-height: 1.5; }
.br-meta { margin: 4px 0 0; font-size: 0.8rem; color: var(--ink-2); }
.br-again { color: #17693a; font-weight: 600; }
.br-empty { display: grid; gap: 4px; padding: 22px 24px; border-radius: 20px; background: #fff; border: 2px dashed #e2c9a8; font-size: 1.05rem; }
.br-empty p { margin: 0; }
@media (max-width: 760px) {
  .br-top { grid-template-columns: 1fr; }
  .br-art { order: -1; max-width: 220px; }
  .br-summary { flex-direction: column; align-items: stretch; text-align: center; }
  .br-bigstar { align-self: center; }
  .br-bar { grid-template-columns: 112px 1fr 22px; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .br-art-aroma, .br-art-bubble, .br-art-spark, .br-card { animation: none; }
}

/* Notes pictures (src/note-art.ts): Admin → Notas and, on the whisky page, under Nariz / Boca / Final */
.note-name { display: inline-flex; align-items: center; gap: 10px; }
.note-icon {
  display: inline-block; flex: none; width: 34px; height: 34px; border-radius: 8px; overflow: hidden;
  background: var(--accent-soft); vertical-align: middle;
}
.note-icon img, .note-icon svg { display: block; width: 100%; height: 100%; }
.note-icon-lg { width: 52px; height: 52px; border-radius: 10px; }
.note-fam-icon { width: 38px; height: 38px; margin-right: 4px; }
.note-chip-icon { display: inline-block; width: 20px; height: 20px; border-radius: 5px; overflow: hidden; vertical-align: -5px; }
.note-chip-icon img, .note-chip-icon svg { display: block; width: 100%; height: 100%; }
@media (max-width: 640px) { .note-icon { width: 32px; height: 32px; } .note-name { gap: 8px; } }
.note-pics { list-style: none; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 10px; }
.note-pics li { text-align: center; font-size: 0.78rem; line-height: 1.2; color: var(--ink-2); }
.note-pics img { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 12px; margin-bottom: 6px; box-shadow: 0 0 0 1px var(--line); }

/* Manejo de Whiskys: notes and cask types the vocabulary doesn't know yet (highlighted), and the whisky form's live check */
.nt-panel { margin: 0 0 20px; border: 2px solid #e7a84a; border-radius: var(--radius); background: #fff8ec; scroll-margin-top: 150px; }
.nt-panel > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding: 14px 18px; cursor: pointer; list-style: none; }
.nt-panel > summary::-webkit-details-marker { display: none; }
.nt-panel > summary::after { content: "+"; margin-left: auto; font-size: 1.4rem; line-height: 1; color: #8a5a12; }
.nt-panel[open] > summary::after { content: "−"; }
.nt-panel-title { font-weight: 800; color: #7a4a08; }
.nt-panel-n { font-size: 0.9rem; color: #8a5a12; }
.nt-panel > .fine { margin: 0 18px 10px; }
.nt-rows { list-style: none; margin: 0; padding: 0 18px 14px; display: grid; gap: 10px; }
.nt-rows li { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid #f1dcb6; }
.nt-whisky { font-weight: 700; color: var(--ink); }
.nt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.nt-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 0.85rem;
  background: var(--surface); border: 1px solid var(--line);
}
.nt-chip small { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.75; }
.nt-chip img { width: 28px; height: 28px; border-radius: 6px; margin-left: -6px; }
.nt-chip.is-new { background: #fdeccf; border-color: #e7a84a; color: #6b3f05; font-weight: 600; }
.nt-chip.is-cask { background: #efe7f8; border-color: #b79ad9; color: #4e2b7a; font-weight: 600; }
.nt-chip.is-known { background: #f2e8de; border-color: #d8c2ac; }
.nt-check:empty { display: none; }
.nt-check { display: grid; gap: 8px; margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: var(--surface); }
.nt-group { display: grid; gap: 6px; }
.nt-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-2); }
.nt-none { margin: 0; font-size: 0.85rem; color: var(--ink-2); }
.nt-ignore { display: inline; margin: 0; }
.nt-ignore button {
  margin: 0 -4px 0 4px; padding: 1px 8px; border: 1px solid currentColor; border-radius: 999px; background: #fff; color: inherit;
  font: inherit; font-size: 0.72rem; font-weight: 700; cursor: pointer; opacity: 0.8;
}
.nt-ignore button:hover { opacity: 1; }
.nt-ignored { margin: 4px 18px 14px; }
.nt-ignored > summary { cursor: pointer; font-weight: 700; font-size: 0.9rem; margin-bottom: 8px; }
/* Puntaje del club / del público (whisky form): the questionnaire's range, its value and "Quitar". */
.score { --p: 50%; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; }
.score-num { min-width: 2.6em; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
.score[data-empty] .score-num { font-weight: 500; color: var(--ink-2); font-size: 0.9rem; }
.score[data-empty] .rate-range::-webkit-slider-runnable-track { background: var(--surface-2, #e7e2da); }
.score[data-empty] .rate-range::-moz-range-progress { background: transparent; }
.score[data-empty] .rate-range::-webkit-slider-thumb { border-color: var(--ink-2); }
.score [data-score-clear][hidden] { display: none; }
.score .rate-range { border: 0; padding: 0; border-radius: 0; background: transparent; box-shadow: none; min-height: 0; height: 40px; }
/* Tapping the Glencairn pours it again (app.js glcReplay); glc-reset empties it at once first. */
.rate-hand, .br-glc { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.glc-reset .rate-whisky { transition: none; }
/* The browser's forced dark mode (e.g. Chrome / Samsung Internet on Android) would turn the black number on the
   yellow stars white: the stars opt out and keep their colors. */
.score-star, .tag-star, .br-bigstar { color-scheme: only light; }
/* Mi cuenta (Patreon): Crédito acumulado and Desc Adicional under the photo and level. */
.status-stats { flex: 1 1 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.status-stats > div { display: grid; gap: 2px; align-content: start; padding: 12px 14px; border-radius: 14px; background: #fff; }
.status-stats span { font-size: 0.8rem; font-weight: 600; color: var(--ink-2); }
.status-stats strong { font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.status-stats small { font-size: 0.8rem; color: var(--ink-2); }
.status-stats .is-out strong { font-size: 1.05rem; color: #b42318; }
.status-card .status-upsell { flex: 1 1 100%; padding: 12px 14px; border-radius: 14px; background: #fff; font-size: 0.95rem; line-height: 1.5; color: var(--ink-2); }
/* Former member: days left before the credit expires (45 days after cancelling on Patreon). */
.credit-countdown { display: block; margin-top: 6px; padding: 8px 12px; border-radius: 10px; background: #fff4e5; color: #8a4b0c; font-size: 0.9rem; line-height: 1.45; }
.credit-countdown b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
/* Admin icon: lit while a Patreon payment is declined (also on phones, where it is otherwise in the menu). */
.admin-link.has-alert { position: relative; color: #b42318; }
.admin-link.has-alert svg { animation: admin-alert 1.6s ease-in-out infinite; }
.admin-link.has-alert .list-count { background: #d92d20; }
@media (max-width: 1023px) {
  .admin-link.has-alert { display: inline-flex; }
  .admin-link.has-alert .list-count { position: absolute; top: -4px; right: -6px; }
}
@keyframes admin-alert { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .admin-link.has-alert svg { animation: none; } }
.menu-count { display: inline-grid; margin-left: 8px; vertical-align: middle; background: #d92d20; }
/* Denegado y Cancelados */
.dc-summary { margin: 0 0 14px; color: var(--ink-2); }
.dc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dc-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.dc-row.is-declined { border-color: #f4b4ae; background: #fff6f5; }
.dc-who { display: grid; gap: 3px; min-width: 0; }
.dc-name { font-weight: 700; }
.dc-meta { font-size: 0.85rem; color: var(--ink-2); overflow-wrap: anywhere; }
.dc-status { justify-self: start; padding: 2px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.dc-status.st-declined { background: #fde3e1; color: #b42318; }
.dc-status.dc-cancelled { background: #ece8e1; color: var(--ink-2); }
.dc-nophone { font-size: 0.85rem; color: var(--ink-2); }
.dc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dc-actions .btn-sm { margin-top: 0; }
.dc-ack { margin: 0; }
.dc-row.is-old { border-color: #f1d3a8; background: #fffaf2; }
/* Muestras / Sets: "Próximamente" with a distillery illustration (src/views/wip-art.tsx). */
.soon-grid { display: grid; gap: 28px; align-items: center; }
@media (min-width: 860px) { .soon-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 48px; } }
.soon-text p { margin: 0 0 14px; font-size: 1rem; line-height: 1.6; letter-spacing: 0.02em; }
.soon-text p a { color: var(--accent); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.soon-punch { font-weight: 800; color: var(--accent); }
.soon-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.wip-art { width: 100%; max-width: 460px; justify-self: center; overflow: visible; }
.wip-shadow { fill: rgb(90 50 20 / 0.12); }
.wip-rope { fill: none; stroke: #5b3a1e; stroke-width: 1.5; }
.wip-sign { animation: wip-sway 4s ease-in-out infinite; }
.wip-sign-text { font: 800 11px/1 system-ui, sans-serif; letter-spacing: 0.08em; fill: #fff7e8; text-anchor: middle; }
.wip-glass { fill: rgb(230 240 245 / 0.75); stroke: #8b9aa3; stroke-width: 1.5; }
.wip-flame { fill: #f6b915; stroke: #e0711a; stroke-width: 1.5; transform-box: fill-box; transform-origin: 50% 100%; animation: wip-flicker 0.9s ease-in-out infinite alternate; }
.wip-drop { fill: #e59d28; animation: wip-drip 1.8s ease-in infinite; }
.wip-fill { transform-box: fill-box; transform-origin: 50% 100%; animation: wip-fill 14s linear infinite; }
.wip-hourglass { animation: wip-turn 8s ease-in-out infinite; }
.wip-sand-fall { stroke-dasharray: 3 3; animation: wip-sand 0.6s linear infinite; }
.wip-bubbles circle { fill: #fff8e6; stroke: #d9c08a; stroke-width: 1; transform-box: fill-box; transform-origin: center; animation: wip-bubble 2.6s ease-in-out infinite; }
.wip-bubbles circle:nth-child(2) { animation-delay: -0.6s; }
.wip-bubbles circle:nth-child(3) { animation-delay: -1.2s; }
.wip-bubbles circle:nth-child(4) { animation-delay: -1.8s; }
.wip-bubbles circle:nth-child(5) { animation-delay: -2.2s; }
.wip-chalk { font: 700 12px/1 "Comic Sans MS", "Segoe Print", cursive; fill: #fffaf0; text-anchor: middle; opacity: 0.9; }
.wip-cross { stroke-dasharray: 18; animation: wip-cross 3s ease-in-out infinite; }
.wip-spider { animation: wip-spider 5s ease-in-out infinite; }
@keyframes wip-sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@keyframes wip-flicker { from { transform: scaleY(0.85) scaleX(1.05); } to { transform: scaleY(1.12) scaleX(0.95); } }
@keyframes wip-drip { 0% { transform: translateY(-4px); opacity: 0; } 15% { opacity: 1; } 70% { transform: translateY(18px); opacity: 1; } 71%, 100% { transform: translateY(18px); opacity: 0; } }
@keyframes wip-fill { from { transform: scaleY(0.08); } to { transform: scaleY(0.95); } }
@keyframes wip-turn { 0%, 80% { transform: rotate(0); } 95%, 100% { transform: rotate(180deg); } }
@keyframes wip-sand { to { stroke-dashoffset: -6; } }
@keyframes wip-bubble { 0% { transform: translateY(2px) scale(0.6); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-14px) scale(1.1); opacity: 0; } }
@keyframes wip-cross { 0%, 30% { stroke-dashoffset: 18; } 60%, 100% { stroke-dashoffset: 0; } }
@keyframes wip-spider { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  .wip-sign, .wip-flame, .wip-drop, .wip-fill, .wip-hourglass, .wip-sand-fall, .wip-bubbles circle, .wip-cross, .wip-spider { animation: none; }
  .wip-fill { transform: scaleY(0.6); }
}
.inv-limited { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-weight: 600; cursor: pointer; }
.inv-limited input { width: 20px; height: 20px; accent-color: var(--accent); }