@font-face { font-family: DM; src: url("../carta-vinos-r30/dm-sans-bold.ttf"); font-weight: 500 1000; font-display: swap; }
@font-face { font-family: DM; src: url("../carta-vinos-r30/dm-sans.ttf") format("truetype"); font-display: swap; font-weight: 400; }
@font-face { font-family: Editorial; src: url("../carta-vinos-r30/playfair.ttf") format("truetype"); font-display: swap; font-style: italic; font-weight: 400; }
:root { --paper: #f5f1ea; --ink: #252821; --muted: #65675e; --line: #d9d8ce; --wine: #752c42; --lime: #dfea85; --serif: Editorial,Georgia,serif; --sans: DM,'Arial',sans-serif; color-scheme: light; font-family: var(--sans); color: var(--ink); background: var(--paper); font-synthesis: none; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body { margin: 0px; font-size: 16px; line-height: 1.5; }
body.modal-open { overflow: hidden; }
button, input, select { font: inherit; color: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; }
button { border: 0px; background: none; }
button:disabled { opacity: 0.35; cursor: default; }
a, button, input, select { touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--wine); outline-offset: 4px; }
button:focus-visible { border-radius: 5px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.skip { position: fixed; top: -100px; z-index: 100; padding: 16px; background: var(--lime); }
.skip:focus { top: 0px; }
.topbar { height: 90px; padding: 0px max(5vw, 24px); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: var(--paper); }
.brand { display: flex; align-items: center; }
.brand img { object-fit: contain; mix-blend-mode: multiply; width: 104px; height: 58px; }
.topbar nav { display: flex; align-items: center; gap: 32px; }
.topbar a { text-decoration: none; }
.desktop-link { font-size: 16px; }
.saved-top { display: flex; align-items: center; gap: 10px; padding: 10px 0px; min-height: 44px; }
.saved-top b { font-size: 13px; border: 1px solid var(--line); border-radius: 50%; width: 26px; height: 26px; display: grid; place-items: center; }
.reserve { padding: 12px 22px; border: 1px solid var(--ink); border-radius: 30px; display: flex; gap: 24px; }
.reserve:hover { background: var(--ink); color: var(--paper); }
main { max-width: 1600px; margin: auto; }
.intro { display: grid; grid-template-columns: 1.12fr 1fr; min-height: 455px; padding: 42px 5vw 46px; gap: 5vw; align-items: center; }
.eyebrow { font-size: 12px; letter-spacing: 0.16em; font-weight: 650; display: flex; align-items: center; gap: 9px; }
.dot { display: inline-block; width: 7px; height: 7px; background: var(--wine); border-radius: 50%; }
h1 { font-size: clamp(42px, 4.6vw, 74px); line-height: 1.04; letter-spacing: -0.058em; font-weight: 550; margin: 23px 0px; }
h1 em { font-family: var(--serif); font-weight: 450; color: var(--wine); letter-spacing: -0.055em; }
.intro-copy p { color: var(--muted); max-width: 460px; font-size: 17px; line-height: 1.7; margin: 0px 0px 20px; }
.intro-link { display: inline-flex; gap: 32px; align-items: center; text-decoration: none; font-weight: 600; border-bottom: 1px solid var(--ink); padding: 5px 0px; }
.intro-art { height: 335px; position: relative; border-radius: 180px 180px 0px 0px; background: rgb(228, 231, 217); overflow: hidden; }
.orbit { position: absolute; border: 1px solid rgb(194, 200, 180); border-radius: 50%; width: 400px; height: 400px; left: 50%; top: 70px; transform: translateX(-50%); }
.art-caption { position: absolute; top: 26px; width: 100%; text-align: center; font-size: 10px; letter-spacing: 0.17em; color: rgb(89, 94, 78); line-height: 1.65; }
.art-no { position: absolute; bottom: 12px; right: 18px; font-size: 10px; letter-spacing: 0.13em; }
.hero-bottle { position: absolute; bottom: 22px; height: 225px; width: 29%; left: 6%; transform: rotate(-13deg); transform-origin: center bottom; }
.hero-bottle:nth-child(2) { left: 35%; height: 238px; bottom: 18px; transform: rotate(0deg); z-index: 1; }
.hero-bottle:nth-child(3) { left: 63%; transform: rotate(13deg); }
.hero-bottle .bottle-stage { height: 100%; margin: 0px; background: none !important; }
.hero-bottle img { mix-blend-mode: multiply; }
.collection { padding: 0px 5vw 80px; scroll-margin-top: 15px; }
.collection-title { display: flex; align-items: baseline; justify-content: space-between; padding: 18px 0px 22px; border-top: 1px solid var(--line); }
.collection-title h2 { font-size: 27px; letter-spacing: -0.035em; font-weight: 500; margin: 0px; }
.collection-title > span { font-size: 10px; letter-spacing: 0.11em; color: var(--muted); }
.controls { background: var(--paper); padding: 0px 0px 13px; }
.search-row { display: flex; gap: 16px; }
.search { display: flex; align-items: center; gap: 12px; padding: 0px 18px; background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: 9px; flex: 1 1 0%; }
.search > span { font-size: 29px; line-height: 1; }
.search input { width: 100%; min-width: 0px; border: 0px; outline: none; background: none; padding: 16px 0px; font-size: 16px; }
.search:focus-within { outline: 2px solid var(--wine); outline-offset: 1px; }
.filter-button { border: 1px solid var(--line); border-radius: 9px; padding: 0px 23px; min-height: 54px; }
.filter-button[aria-pressed="true"] { background: var(--ink); color: white; }
.types { display: flex; gap: 6px; margin-top: 18px; overflow: auto; scrollbar-width: thin; padding-bottom: 3px; }
.types button { white-space: nowrap; border-radius: 30px; padding: 10px 21px; min-height: 44px; transition: background 0.2s, color 0.2s; }
.types button:hover { background: rgb(231, 229, 220); }
.types button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.refine { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 14px 0px; border-block: 1px solid var(--line); }
.toggles { display: flex; gap: 22px; align-items: center; }
.toggles > label { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; }
.toggles input { width: 17px; height: 17px; accent-color: var(--wine); }
select { max-width: 100%; background: transparent; border: 0px; min-height: 44px; cursor: pointer; font-size: 14px; padding: 5px 22px 5px 0px; }
.origin-select { border-left: 1px solid var(--line); padding-left: 20px; }
.sort { margin-left: auto; }
.result-line { display: flex; justify-content: space-between; align-items: center; min-height: 64px; font-size: 14px; color: var(--muted); }
.result-line button { min-height: 44px; text-decoration: underline; }
.result-line p { margin: 0px; }
.wine-grid { display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 20px; }
.wine-card { min-width: 0px; background: rgb(255, 255, 255); border: 1px solid rgb(229, 226, 217); position: relative; display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; transition: box-shadow 0.3s, transform 0.3s; }
.wine-card:hover { box-shadow: rgba(37, 40, 33, 0.05) 0px 15px 30px; transform: translateY(-4px); }
.card-open { display: flex; flex-direction: column; width: 100%; height: 100%; text-align: left; padding: 0px; }
.card-picture { background: rgb(238, 239, 231); position: relative; width: 100%; padding: 28px 20px 24px; isolation: isolate; overflow: hidden; }
.card-picture::before { content: ""; position: absolute; inset: 25% 10% -40%; border: 1px solid rgb(223, 226, 211); border-radius: 50%; z-index: -1; }
.wine-card[data-kind="Rosados"] .card-picture { background: rgb(246, 232, 226); }
.wine-card[data-kind="Tintos"] .card-picture { background: rgb(236, 233, 228); }
.wine-card[data-kind="Burbujas"] .card-picture { background: rgb(238, 233, 216); }
.wine-card[data-kind="Generosos"] .card-picture { background: rgb(240, 227, 209); }
.bottle-stage { height: 235px; position: relative; overflow: hidden; margin: 0px auto; width: 100%; transition: transform 0.4s; }
.bottle-stage img { position: absolute; left: 50%; top: var(--it,0); height: var(--ih,100%); transform: translateX(calc(-1 * var(--ix,50%))); width: auto; max-width: none; mix-blend-mode: multiply; pointer-events: none; }
.wine-card:hover .bottle-stage { transform: scale(1.025) rotate(-2deg); }
.bottle-stage.dark { background: rgb(1, 1, 1); border-radius: 100px 100px 0px 0px; width: 150px; }
.bottle-stage.dark img { mix-blend-mode: normal; }
.card-new { position: absolute; left: 14px; top: 14px; font-size: 10px; letter-spacing: 0.06em; padding: 5px 9px; border-radius: 20px; background: var(--lime); z-index: 2; font-weight: 650; }
.save-card { position: absolute; right: 10px; top: 8px; z-index: 3; width: 44px; height: 44px; font-size: 26px; line-height: 1; background: rgba(255, 255, 255, 0.85); border-radius: 50%; }
.save-card[aria-pressed="true"] { color: var(--wine); }
.card-copy { padding: 20px 20px 15px; width: 100%; flex: 1 1 0%; display: flex; flex-direction: column; }
.card-type { font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.card-copy h3 { font-size: 20px; letter-spacing: -0.035em; line-height: 1.2; margin: 0px 0px 8px; font-weight: 600; }
.card-copy p { font-size: 13px; line-height: 1.55; margin: 0px 0px 20px; color: var(--muted); }
.prices { display: flex; gap: 20px; padding-top: 13px; border-top: 1px solid var(--line); margin-top: auto; position: relative; }
.price { display: flex; flex-direction: column; gap: 1px; }
.price small { font-size: 10px; letter-spacing: 0.05em; color: var(--muted); text-transform: uppercase; }
.price strong { font-size: 19px; letter-spacing: -0.03em; font-weight: 550; }
.card-arrow { position: absolute; right: 0px; bottom: 0px; font-size: 21px; }
.no-photo { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 16px; border: 1px dashed rgb(199, 199, 187); border-radius: 90px 90px 4px 4px; margin: 0px auto; max-width: 180px; }
.no-photo b { font-family: var(--serif); font-style: italic; font-size: 55px; font-weight: 400; color: rgb(135, 136, 119); }
.no-photo span { font-size: 11px; letter-spacing: 0.02em; color: rgb(98, 101, 83); }
.empty { text-align: center; padding: 80px 20px; }
.empty > span { font-size: 60px; color: var(--wine); }
.empty h3 { font-size: 28px; letter-spacing: -0.03em; }
.empty p { color: var(--muted); }
.dark-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; background: var(--ink); color: var(--paper); border-radius: 30px; padding: 14px 24px; min-height: 50px; }
.dark-button:hover { background: var(--wine); }
.closing { padding: 65px 5vw 75px; background: var(--ink); color: var(--paper); text-align: center; }
.closing .eyebrow { justify-content: center; color: var(--lime); }
.closing h2 { font-family: var(--serif); font-style: italic; font-size: clamp(38px, 4vw, 62px); font-weight: 450; letter-spacing: -0.05em; margin: 20px 0px 10px; }
.closing p { color: rgb(215, 217, 206); font-size: 17px; }
.closing a { display: inline-flex; gap: 38px; padding: 12px 0px; margin-top: 14px; border-bottom: 1px solid rgb(215, 217, 206); text-decoration: none; }
footer { display: flex; gap: 30px; align-items: center; justify-content: space-between; padding: 35px 5vw; font-size: 12px; color: var(--muted); }
footer > span { letter-spacing: 0.14em; font-size: 16px; color: var(--ink); }
footer > span b { font-size: 12px; }
footer p { max-width: 590px; }
footer a { text-decoration: none; white-space: nowrap; }
dialog { border: 0px; border-radius: 16px; padding: 0px; background: var(--paper); color: var(--ink); width: min(920px, -48px + 100vw); max-height: calc(100dvh - 56px); overflow: auto; box-shadow: rgba(0, 0, 0, 0.333) 0px 30px 130px; }
dialog::backdrop { background: rgba(23, 28, 24, 0.72); backdrop-filter: blur(8px); }
dialog[open] { animation: 0.25s ease-out 0s 1 normal none running enter; }
.close-dialog { position: sticky; top: 14px; float: right; margin: 14px 14px -58px 0px; width: 44px; height: 44px; z-index: 5; border-radius: 50%; background: rgba(255, 255, 255, 0.937); font-size: 30px; line-height: 1; box-shadow: rgba(0, 0, 0, 0.067) 0px 2px 12px; }
.detail-layout { display: grid; grid-template-columns: 42% 58%; min-height: 550px; }
.detail-picture { background: rgb(233, 236, 223); display: flex; align-items: center; justify-content: center; position: relative; min-height: 420px; padding: 55px 35px 50px; overflow: hidden; }
.detail-picture::before { content: ""; position: absolute; inset: 15% -30% -15%; border: 1px solid rgb(205, 210, 192); border-radius: 50%; transform: rotate(-20deg); }
.detail-picture .bottle-stage { height: 390px; z-index: 1; }
.detail-picture .bottle-stage.dark { width: 230px; }
.detail-picture .no-photo { width: 200px; max-width: 100%; }
.detail-content { padding: 58px 38px 35px; }
.detail-content .eyebrow { color: var(--wine); letter-spacing: 0.1em; font-size: 11px; }
.detail-content h2 { font-size: clamp(30px, 3.3vw, 45px); line-height: 1.04; font-weight: 550; letter-spacing: -0.045em; margin: 18px 0px 12px; }
.detail-origin { color: var(--muted); font-size: 16px; margin: 0px 0px 24px; }
.detail-content dl { margin: 0px 0px 25px; display: grid; gap: 15px; }
.detail-content dt { font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); margin-bottom: 3px; }
.detail-content dd { margin: 0px; font-size: 16px; line-height: 1.5; }
.detail-prices { display: flex; gap: 30px; padding: 20px 0px; border-block: 1px solid var(--line); }
.detail-prices .price strong { font-size: 30px; }
.detail-prices .price small { font-size: 11px; }
.detail-actions { margin-top: 22px; display: flex; gap: 10px; flex-wrap: wrap; }
.detail-actions .copy { border: 1px solid var(--line); border-radius: 30px; padding: 12px 20px; min-height: 50px; }
.detail-note { font-size: 12px; line-height: 1.6; color: var(--muted); margin: 15px 0px 0px; }
.dialog-nav { position: sticky; bottom: 0px; display: flex; align-items: center; justify-content: space-between; padding: 10px 22px; background: var(--paper); border-top: 1px solid var(--line); z-index: 3; }
.dialog-nav button { min-height: 44px; font-size: 14px; }
.dialog-nav span { font-size: 12px; color: var(--muted); }
.toast { position: fixed; bottom: 25px; left: 50%; transform: translateX(-50%); background: var(--ink); color: white; padding: 14px 22px; border-radius: 30px; font-size: 14px; z-index: 100; box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 40px; max-width: 90vw; text-align: center; }
@keyframes enter { 
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0px); }
}
@media (min-width: 1600px) {
  .intro { padding-inline: 80px; }
  .collection { padding-inline: 80px; }
}
@media (max-width: 1100px) {
  .wine-grid { grid-template-columns: repeat(3, minmax(0px, 1fr)); }
  .intro { gap: 25px; }
  .intro-art { height: 310px; }
  .hero-bottle { height: 205px; }
  .hero-bottle:nth-child(2) { height: 220px; }
  .types button { padding-inline: 18px; }
  .toggles { gap: 15px; }
  .collection-title > span { display: none; }
  .origin-select { max-width: 210px; }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 20px; }
  .topbar { height: 75px; padding: 0px 20px; }
  .brand img { width: 88px; height: 50px; }
  .topbar nav { gap: 15px; }
  .desktop-link, .saved-top > span { display: none; }
  .saved-top { font-size: 23px; gap: 5px; }
  .saved-top b { font-size: 11px; width: 23px; height: 23px; }
  .reserve { font-size: 13px; padding: 10px 15px; gap: 15px; }
  .intro { padding: 30px 20px 32px; gap: 20px; grid-template-columns: 1fr; }
  .intro-copy { max-width: 500px; }
  .eyebrow { font-size: 10px; }
  h1 { font-size: 49px; margin: 18px 0px; letter-spacing: -0.06em; }
  .intro-copy p { font-size: 16px; max-width: 430px; margin-bottom: 13px; }
  .intro-link { font-size: 14px; }
  .intro-art { display: none; }
  .collection { padding: 0px 20px 45px; }
  .collection-title { padding: 20px 0px; }
  .collection-title h2 { font-size: 24px; }
  .search-row { gap: 8px; }
  .search { padding: 0px 12px; }
  .search input { padding: 15px 0px; font-size: 16px; }
  .filter-button { padding: 0px 14px; font-size: 14px; }
  .types { margin-top: 12px; gap: 3px; margin-right: -20px; padding-right: 20px; }
  .types button { padding: 9px 17px; font-size: 14px; }
  .controls { padding-bottom: 10px; }
  .refine { align-items: stretch; flex-wrap: wrap; gap: 4px; padding: 9px 0px; }
  .toggles { width: 100%; gap: 17px; flex-wrap: wrap; font-size: 14px; }
  .origin-select { max-width: 100%; flex: 1 1 0%; padding-left: 12px; }
  .origin-select select { width: 100%; font-size: 13px; }
  .sort { margin-left: 0px; }
  .sort select { font-size: 13px; min-height: 34px; }
  .result-line { min-height: 54px; font-size: 12px; }
  .wine-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 12px; }
  .card-picture { padding: 37px 13px 20px; }
  .bottle-stage { height: 195px; }
  .bottle-stage.dark { width: 120px; }
  .card-new { left: 8px; top: 12px; font-size: 8px; padding: 4px 7px; }
  .save-card { top: 3px; right: 2px; width: 40px; height: 40px; font-size: 23px; background: transparent; }
  .card-copy { padding: 14px 13px; }
  .card-copy h3 { font-size: 18px; line-height: 1.15; }
  .card-copy p { font-size: 12px; margin-bottom: 14px; }
  .card-type { font-size: 8px; letter-spacing: 0.09em; }
  .prices { gap: 15px; padding-top: 11px; }
  .price strong { font-size: 17px; }
  .price small { font-size: 8px; }
  .card-arrow { font-size: 18px; right: -3px; bottom: 1px; }
  .no-photo { max-width: 125px; }
  .no-photo b { font-size: 40px; }
  .no-photo span { font-size: 9px; }
  .closing { padding: 45px 22px 50px; }
  .closing p { font-size: 16px; }
  footer { padding: 28px 20px; flex-wrap: wrap; gap: 12px; }
  footer p { margin: 0px; width: 100%; }
  dialog { width: 100%; max-width: 100%; height: auto; max-height: 94dvh; margin: auto 0px 0px; border-radius: 22px 22px 0px 0px; }
  .detail-layout { grid-template-columns: 1fr; min-height: 0px; }
  .detail-picture { min-height: 290px; padding: 32px 40px 24px; }
  .detail-picture .bottle-stage { height: 245px; width: 230px; }
  .detail-picture .bottle-stage.dark { width: 150px; }
  .detail-content { padding: 27px 24px 24px; }
  .detail-content h2 { font-size: 36px; margin: 12px 0px; }
  .detail-origin { margin-bottom: 20px; }
  .detail-content dl { grid-template-columns: 1fr; gap: 14px; margin-bottom: 20px; }
  .detail-content dd { font-size: 16px; }
  .detail-prices { padding: 15px 0px; }
  .detail-prices .price strong { font-size: 28px; }
  .detail-actions { margin-top: 18px; }
  .dialog-nav { padding: 8px 18px calc(8px + env(safe-area-inset-bottom)); }
  .close-dialog { top: 12px; }
  .toast { bottom: 16px; }
}
@media (max-width: 380px) {
  h1 { font-size: 43px; }
  .collection, .intro { padding-inline: 15px; }
  .topbar { padding-inline: 15px; }
  .filter-button { font-size: 0px; width: 45px; padding: 0px; }
  .filter-button::after { content: "♡"; font-size: 23px; }
  .bottle-stage { height: 170px; }
  .card-picture { padding-inline: 8px; }
  .card-copy { padding-inline: 11px; }
  .prices { gap: 11px; }
  .card-arrow { display: none; }
  .origin-select { flex-basis: 100%; border-left: 0px; padding-left: 0px; }
  .toggles { gap: 8px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, ::before, ::after { animation: auto ease 0s 1 normal none running none !important; transition: none !important; }
  .wine-card:hover, .wine-card:hover .bottle-stage { transform: none; }
}
@media print {
  .topbar nav, .intro, .controls, .refine, .result-line, .save-card, .card-arrow, .closing, .dialog-nav, dialog, .toast, .skip { display: none !important; }
  body { background: white; }
  .topbar { height: 65px; }
  .collection { padding: 0px; }
  .collection-title { border: 0px; }
  .wine-grid { display: block; column-count: 2; column-gap: 25px; }
  .wine-card { break-inside: avoid; margin-bottom: 12px; border-width: 0px 0px 1px; border-style: none none solid; border-color: currentcolor currentcolor rgb(221, 221, 221); border-image: none; border-radius: 0px; }
  .card-open { display: block; }
  .card-picture { display: none; }
  .card-copy { padding: 6px 0px; }
  .card-copy h3 { font-size: 15px; }
  .card-copy p { margin-bottom: 5px; font-size: 10px; }
  .card-type { font-size: 8px; }
  .prices { padding-top: 0px; border: 0px; display: flex; gap: 20px; }
  .price { flex-direction: row; align-items: baseline; gap: 5px; }
  .price strong { font-size: 12px; }
  .price small { font-size: 9px; }
  footer { padding: 10px 0px; font-size: 9px; }
  footer a { display: none; }
}
.hero-bottle, .bottle-stage { mix-blend-mode: multiply; }
.bottle-stage.dark { mix-blend-mode: normal; }
.brand img { filter: brightness(0.45); }
@media (min-width: 761px) {
  .intro { min-height: 355px; padding-top: 24px; padding-bottom: 28px; }
  .intro-art { height: 275px; }
  .hero-bottle { height: 190px; bottom: 12px; }
  .hero-bottle:nth-child(2) { height: 205px; bottom: 12px; }
  .art-caption { top: 17px; }
  h1 { font-size: clamp(42px, 4.3vw, 68px); margin: 18px 0px; }
  .intro-copy p { font-size: 16px; line-height: 1.6; max-width: 510px; }
}
.swipe-hint{display:none}
@media(max-width:760px){h1{font-size:44px}.filter-button{font-size:0;width:48px;padding:0;flex-shrink:0}.filter-button::after{content:"\2661";font-size:23px}.refine>.origin-select{flex:1;min-width:0;max-width:50%;border:0;padding:0}.refine>.origin-select select{max-width:100%;font-size:12px;padding-right:2px}.sort{flex:1;min-width:0;text-align:right}.sort select{font-size:12px;padding-right:0;min-height:44px}.swipe-hint{display:block;position:absolute;bottom:8px;left:0;width:100%;text-align:center;font-size:10px;letter-spacing:.04em;color:#65675e}.detail-picture{padding-bottom:32px}}

@media(max-width:380px){.types{margin-right:-15px;padding-right:15px}}

/* R31 — an editorial journey through thirteen distinct sections. */
.category-explorer{background:var(--ink);color:var(--paper);padding:32px;border-radius:24px;margin:24px 0 30px;position:relative;overflow:hidden}
.category-intro{display:grid;grid-template-columns:1fr auto;align-items:end;gap:6px 24px;margin-bottom:23px}.category-intro .eyebrow{color:var(--lime);grid-column:1/-1}.category-intro h3{font-size:clamp(26px,3vw,40px);line-height:1.2;margin:0;letter-spacing:-1.3px}.category-intro p{margin:0;color:#c4c8b9;font-size:14px}
.category-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.category-nav button{border:1px solid #ffffff29;background:#ffffff06;color:inherit;border-radius:12px;display:flex;gap:9px;align-items:center;padding:13px 12px;text-align:left;min-height:60px;transition:background .25s,transform .25s,border-color .25s}.category-nav button:hover{background:#ffffff15;transform:translateY(-3px);border-color:#dfea8570}.category-nav button[aria-pressed=true]{background:var(--lime);color:var(--ink);border-color:var(--lime)}.category-nav small{opacity:.6;font-size:10px}.category-nav span{font-size:13px;line-height:1.25;font-weight:600}.category-nav b{margin-left:auto;border-radius:50%;background:#ffffff12;min-width:25px;height:25px;display:grid;place-items:center;font-size:11px}.category-nav button[aria-pressed=true] b{background:#25282112}
.wine-sections{display:block}.wine-section{margin-bottom:70px}.section-heading{display:flex;align-items:center;gap:20px;border-top:2px solid var(--ink);padding:26px 0 22px}.section-number{font-family:var(--serif);font-style:italic;font-size:58px;line-height:1;color:var(--wine);min-width:66px}.section-heading .eyebrow{font-size:9px;letter-spacing:2px}.section-heading h2{font-size:clamp(24px,3vw,38px);font-weight:500;letter-spacing:-1px;line-height:1.15;margin:5px 0 0}.section-count{margin-left:auto;white-space:nowrap;font-size:13px;color:var(--muted);display:flex;align-items:center;gap:22px}.section-count span{display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;width:40px;height:40px;color:var(--wine);font-size:20px}.wine-card{transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s,border-color .3s}.card-picture .bottle-stage{transition:transform .6s cubic-bezier(.2,.8,.2,1)}.card-open:hover .bottle-stage{transform:translateY(-7px) rotate(-3deg)}.card-arrow{transition:transform .3s,background .3s}.card-open:hover .card-arrow{transform:rotate(45deg);background:var(--lime)}
@keyframes bottleArrival{from{opacity:0;transform:translateY(35px) rotate(-5deg) scale(.94)}to{opacity:1;transform:none}}@keyframes detailArrival{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}@keyframes backdropArrival{from{opacity:0}to{opacity:1}}
dialog[open] .detail-picture .bottle-stage{animation:bottleArrival .65s cubic-bezier(.15,.8,.2,1) both}dialog[open] .detail-content{animation:detailArrival .45s .06s both}dialog[open]::backdrop{animation:backdropArrival .3s both;backdrop-filter:blur(7px)}
@media(max-width:900px){.category-nav{grid-template-columns:repeat(3,minmax(0,1fr))}.category-intro{display:block}.category-intro h3{margin:8px 0}.category-intro p{font-size:13px}}
@media(max-width:600px){.category-explorer{padding:20px 15px;border-radius:18px;margin:18px 0 23px}.category-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.category-nav button{padding:11px 9px;min-height:54px;gap:6px}.category-nav span{font-size:11px}.category-nav small{display:none}.category-nav b{min-width:22px;height:22px;font-size:10px}.category-intro .eyebrow{font-size:8px;letter-spacing:1.5px}.section-heading{gap:12px;padding:21px 0 18px}.section-number{font-size:43px;min-width:47px}.section-count{font-size:11px}.section-count span{display:none}.section-heading h2{font-size:25px}.section-heading .eyebrow{font-size:8px;letter-spacing:1px}.wine-section{margin-bottom:42px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{.category-explorer{display:none}.wine-section{break-inside:auto}.section-heading{break-after:avoid}.wine-card{break-inside:avoid}}

/* R32 — bottle-led category theatre, with a real dropdown. */
.category-theatre{display:grid;grid-template-columns:1.1fr 1fr;min-height:555px;margin:25px 0 35px;border-radius:25px;background:#252821;color:#f5f1ea;position:relative;isolation:isolate;box-shadow:0 22px 65px #25282112}
.theatre-copy{padding:38px 40px 30px;position:relative;z-index:3;display:flex;flex-direction:column;min-width:0}.theatre-copy>.eyebrow{color:#dfea85;font-size:10px;letter-spacing:2px;margin-bottom:24px}
#categoryPicker{position:relative;z-index:5;margin-bottom:28px}#categoryPicker summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border:1px solid #ffffff4a;border-radius:12px;background:#ffffff09;transition:background .25s,border-color .25s}#categoryPicker summary::-webkit-details-marker{display:none}#categoryPicker summary:hover,#categoryPicker[open] summary{border-color:#dfea85;background:#ffffff10}#categoryPicker summary small{display:block;letter-spacing:1.8px;font-size:8px;color:#c3c7b5;margin-bottom:4px}#pickerLabel{font-size:16px;font-weight:500;display:block;line-height:1.3}.picker-chevron{font-size:25px;color:#dfea85;margin-left:12px;transition:transform .25s}#categoryPicker[open] .picker-chevron{transform:rotate(180deg)}
.category-menu{position:absolute;left:0;right:0;top:calc(100% + 8px);max-height:390px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;background:#f5f1ea;color:#252821;padding:7px;border-radius:14px;box-shadow:0 22px 65px #0005;animation:menuReveal .25s both}.category-menu button{border:0;background:transparent;display:flex;align-items:center;text-align:left;width:100%;gap:12px;padding:7px 10px;border-radius:9px;min-height:65px;transition:background .2s,transform .2s}.category-menu button:hover{background:#e9e8dc}.category-menu button[aria-pressed=true]{background:#dfea85}.category-menu button>span:nth-child(2){flex:1;min-width:0}.category-menu b{font-size:13px;line-height:1.3;display:block}.category-menu small{font-size:9px;color:#63675b}.category-menu em{font-size:11px;font-style:normal;color:#606455}.menu-thumb{width:38px;flex:none}.menu-thumb .bottle-stage{height:52px;width:38px;margin:0}.menu-thumb .bottle-stage img{mix-blend-mode:multiply}.menu-thumb .bottle-stage.dark{width:35px}
#categoryStory{animation:storyReveal .65s cubic-bezier(.2,.8,.2,1) both}.theatre-index{font-size:9px;letter-spacing:2px;color:#bdc4ab}.theatre-copy h3{font-size:clamp(32px,4.3vw,61px);line-height:1.04;letter-spacing:-2.5px;font-weight:500;margin:12px 0 17px;max-width:540px}.theatre-copy p{font-size:14px;line-height:1.7;color:#c9cdbc;max-width:365px;margin:0 0 18px}.theatre-count{font-size:11px;color:#bfc6af}.theatre-count b{color:#dfea85;font-size:24px;font-weight:400;margin-right:6px}.theatre-navigation{display:flex;align-items:center;gap:13px;margin-top:auto;padding-top:24px}.theatre-navigation button{height:39px;width:39px;border:1px solid #ffffff35;background:none;color:#fff;border-radius:50%;transition:background .25s,transform .25s}.theatre-navigation button:hover{background:#dfea85;color:#252821;transform:scale(1.1)}#categoryPosition{font-size:10px;letter-spacing:2px;color:#c4cab8}.theatre-navigation a{margin-left:auto;text-decoration:none;font-size:12px;border-bottom:1px solid #dfea85;padding:8px 0}.theatre-navigation a span{margin-left:12px;color:#dfea85}
.theatre-scene{background:#e8eadb;border-radius:0 25px 25px 0;position:relative;overflow:hidden;display:grid;align-items:center;color:#252821;min-height:555px}.scene-orbit{position:absolute;width:370px;height:370px;left:50%;top:48%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 40% 35%,#ffffef 0%,#dce7a6 60%,#bdcba0 100%);box-shadow:0 20px 80px #78845d20}.scene-orbit:after{content:'';position:absolute;inset:-30px;border:1px solid #929e7135;border-radius:50%;transform:rotate(-25deg) scaleX(1.35) scaleY(.68)}.scene-watermark{font-family:var(--serif);font-style:italic;font-size:150px;letter-spacing:-10px;position:absolute;right:-8px;top:-30px;opacity:.07;line-height:1.2}.scene-caption{position:absolute;bottom:19px;left:15px;right:15px;text-align:center;font-size:8px;letter-spacing:1.4px;color:#626950}
#categoryBottle{position:relative;z-index:1;padding:28px 20px 45px}.featured-bottle{border:0;background:none;width:100%;position:relative;padding:0;color:#252821}.featured-bottle .bottle-stage{height:365px;width:100%;animation:heroBottleReveal .85s cubic-bezier(.12,.8,.2,1) both;transform-origin:50% 80%;transition:transform .6s}.featured-bottle:hover .bottle-stage{transform:rotate(-4deg) translateY(-8px)}.featured-bottle .bottle-stage.dark{width:220px}.featured-name{display:block;margin:15px auto 0;text-align:center;font-size:17px;line-height:1.25;font-weight:500;max-width:300px;animation:storyReveal .65s both}.featured-name>span{display:block;font-size:11px;font-weight:400;margin-top:7px;color:#687055}.featured-open{display:grid;place-items:center;position:absolute;right:10px;bottom:12px;width:37px;height:37px;background:#252821;color:#dfea85;border-radius:50%;font-size:18px;transition:transform .3s}.featured-bottle:hover .featured-open{transform:rotate(45deg)}
@keyframes heroBottleReveal{0%{opacity:0;transform:translateY(45px) rotate(12deg) scale(.8);filter:blur(6px)}65%{opacity:1;filter:blur(0)}100%{opacity:1;transform:translateY(0) rotate(0) scale(1);filter:blur(0)}}@keyframes storyReveal{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}@keyframes menuReveal{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1000px){.theatre-copy{padding:28px}.theatre-copy h3{font-size:42px}.scene-orbit{width:270px;height:270px}.featured-bottle .bottle-stage{height:320px}.theatre-scene{min-height:520px}.theatre-copy>.eyebrow{font-size:8px;letter-spacing:1.2px}.featured-open{right:0}.featured-name{max-width:245px}}
@media(max-width:650px){.category-theatre{grid-template-columns:1fr;border-radius:20px;margin-top:18px}.theatre-copy{padding:24px 22px 22px}.theatre-copy>.eyebrow{margin-bottom:18px}.theatre-copy h3{font-size:37px;letter-spacing:-1.6px;margin:10px 0}.theatre-copy p{font-size:12px;line-height:1.5;margin-bottom:12px;max-width:none}#categoryPicker{margin-bottom:21px}#categoryPicker summary{padding:12px 14px}#pickerLabel{font-size:15px}.category-menu{max-height:340px;z-index:10}.theatre-count b{font-size:20px}.theatre-navigation{padding-top:18px;gap:10px}.theatre-scene{min-height:360px;border-radius:0 0 20px 20px}.scene-orbit{width:235px;height:235px;top:44%}.scene-watermark{font-size:115px;top:-20px}.featured-bottle .bottle-stage{height:240px;width:100%}.featured-bottle .bottle-stage.dark{width:150px}#categoryBottle{padding:15px 22px 42px}.featured-name{font-size:16px;margin-top:9px;max-width:250px}.featured-open{right:0;bottom:7px;width:32px;height:32px}.scene-caption{font-size:7px;letter-spacing:.9px;bottom:15px}.theatre-index{font-size:8px}.theatre-count{font-size:10px}}
#categoryStory>*{animation:storyReveal .55s both}#categoryStory h3{animation-delay:.04s}#categoryStory p{animation-delay:.08s}.featured-bottle{transform:perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .25s ease-out}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.featured-bottle{transform:none!important}}
@media print{.category-theatre{display:none}}

/* R33: explicit actions, generous targets, and visible destinations. */
#categoryPicker{margin-bottom:9px}#categoryPicker summary{background:#dfea85;color:#252821;border:2px solid #dfea85;padding:19px 20px;box-shadow:0 5px 0 #0002;gap:15px}#categoryPicker summary:hover,#categoryPicker[open] summary{background:#eef5bb;border-color:#eef5bb}#categoryPicker summary small{color:#3e4928;font-size:11px;letter-spacing:1.1px;font-weight:700;margin-bottom:7px}#pickerLabel{font-size:20px;font-weight:600;line-height:1.2}.picker-action{display:flex;align-items:center;gap:9px;white-space:nowrap;font-size:12px;border-left:1px solid #25282130;padding-left:17px}.picker-chevron{color:#252821;margin:0;font-size:28px}.theatre-copy .navigation-hint{font-size:11px;line-height:1.5;margin:3px 0 24px;color:#cbd1bd;max-width:420px}.theatre-copy{padding:32px}.theatre-copy h3{font-size:clamp(32px,3.6vw,50px)}.theatre-navigation{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:25px}.category-progress{grid-column:1/-1;display:flex;justify-content:space-between;color:#bdc6ad;font-size:8px;letter-spacing:1.4px;margin-bottom:2px}#categoryPosition{font-size:10px}.theatre-navigation button{width:100%;height:auto;min-height:86px;border-radius:13px;padding:14px;display:flex;align-items:center;gap:12px;text-align:left;border:1px solid #a8b395;background:#ffffff08;transition:background .2s,transform .2s,border-color .2s}.theatre-navigation button:hover{transform:translateY(-3px);background:#ffffff17;color:#fff;border-color:#dfea85}.theatre-navigation button>span:not(.navigation-arrow){flex:1;min-width:0}.theatre-navigation button small{display:block;font-size:8px;letter-spacing:1px;color:#c1cbb0;margin-bottom:6px}.theatre-navigation button b{display:block;font-size:14px;line-height:1.25;font-weight:500}.navigation-arrow{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1px solid #bdc6ad80;font-size:24px}.theatre-navigation #nextCategory{background:#dfea85;color:#252821;border-color:#dfea85}.theatre-navigation #nextCategory small{color:#43502c}.theatre-navigation #nextCategory:hover{background:#eef5bb;color:#252821}.theatre-navigation #nextCategory .navigation-arrow{background:#252821;color:#dfea85;border-color:#252821}.theatre-navigation a{grid-column:1/-1;width:100%;margin:6px 0 0;padding:14px 15px;border:1px solid #ffffff30;border-radius:10px;font-size:13px;text-align:center;transition:background .2s}.theatre-navigation a:hover{background:#ffffff12}.theatre-navigation a span{font-size:18px;margin-left:10px}.category-theatre{min-height:620px}.theatre-scene{min-height:620px}.featured-open{width:46px;height:46px;font-size:24px}.category-menu{max-height:370px}.category-menu button{min-height:70px}.category-menu b{font-size:14px}
@media(max-width:1000px){.theatre-copy{padding:25px}.picker-action{font-size:10px;padding-left:10px}.theatre-navigation button{gap:7px;padding:11px}.theatre-navigation button b{font-size:12px}.navigation-arrow{width:27px;height:27px;font-size:21px}}
@media(max-width:650px){.theatre-copy{padding:23px 20px}.category-theatre{min-height:0}.theatre-scene{min-height:360px}#categoryPicker summary{padding:15px 14px;gap:8px}#categoryPicker summary small{font-size:10px}#pickerLabel{font-size:18px}.picker-action{font-size:10px;gap:5px;padding-left:10px}.picker-chevron{font-size:24px}.theatre-copy .navigation-hint{font-size:10px;margin-bottom:19px}.theatre-copy h3{font-size:34px}.theatre-navigation{gap:8px;padding-top:20px}.theatre-navigation button{min-height:91px;padding:12px 10px;gap:8px;align-items:flex-start}.theatre-navigation button b{font-size:12px}.theatre-navigation button small{font-size:7px;letter-spacing:.7px;margin-bottom:7px}.navigation-arrow{width:25px;height:25px;font-size:20px;margin-top:3px}.theatre-navigation a{font-size:12px;padding:13px 8px}.featured-open{width:38px;height:38px;font-size:23px}}
.featured-open{position:static;display:inline-flex;width:auto;height:39px;padding:0 18px;margin:13px auto 0;font-size:12px;border-radius:30px}.featured-bottle:hover .featured-open{transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}