.lenis.lenis-smooth { scroll-behavior: auto; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.showcase { --showcase-spacing: clamp(48px, 5vw, 88px); position: relative; width: 100vw; margin: var(--showcase-spacing) 0 0; margin-left: calc(50% - 50vw); background: #000; box-shadow: 0 4px 0 #000; }
.showcase-pin { --showcase-side: 5%; position: relative; height: 100svh; min-height: 620px; overflow: clip; isolation: isolate; }
.showcase-skip { position: absolute; z-index: 4; top: clamp(22px, 3vw, 40px); right: var(--showcase-side); display: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid #ffffff50; border-radius: 50%; background: #0009; color: #fff; cursor: pointer; transition: background .2s ease, border-color .2s ease, transform .2s cubic-bezier(.16,1,.3,1); }
.showcase-skip[hidden] { display: none !important; }
.showcase-skip svg { width: 20px; height: 20px; }
.showcase-skip:focus-visible { outline: 2px solid #008cff; outline-offset: 4px; }
@media (min-width: 761px) and (hover: hover) and (pointer: fine) { .showcase-skip { display: grid; } }
.showcase-skip:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .showcase-skip:hover { background: #202020; border-color: #ffffffa0; } }
.showcase-visual { position: absolute; inset: 0; pointer-events: none; }
.showcase-visual canvas, .showcase-still { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.showcase-still { object-fit: cover; object-position: center; }
.showcase-visual canvas, .showcase-still { transition: opacity .45s ease; }
.showcase-visual canvas { opacity: 0; }
.showcase.is-ready .showcase-visual canvas { opacity: 1; }
.showcase.is-ready .showcase-still { opacity: 0; }
.showcase-stage { position: absolute; inset: 0 0 25%; cursor: grab; touch-action: pan-y; outline-offset: -5px; }
.showcase-stage.is-dragging { cursor: grabbing; }
.showcase-arrow { position: absolute; z-index: 3; top: 42%; transform: translateY(-50%); display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 1px solid #ffffff45; border-radius: 50%; background: #090909a6; color: #fff; cursor: pointer; transition: border-color .2s, background .2s, opacity .2s; touch-action: manipulation; }
.showcase-prev { left: clamp(18px, 3vw, 60px); }
.showcase-next { right: clamp(18px, 3vw, 60px); }
.showcase-arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.showcase-arrow:hover:not(:disabled) { background: #202020; border-color: #ffffffa0; }
.showcase-arrow:focus-visible { outline: 2px solid #008cff; outline-offset: 4px; }
.showcase-arrow:disabled { opacity: .25; cursor: default; }
.showcase-info { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.showcase-copy { position: absolute; left: 50%; bottom: 6%; width: min(540px, calc(100% - 564px)); transform: translateX(-50%); text-align: center; }
.showcase-name { margin: 0; font-size: clamp(32px, 3.85vw, 70px); font-weight: 700; font-style: normal; line-height: 1.02; letter-spacing: -.055em; white-space: nowrap; }
.showcase-description { margin: 14px auto 0; max-width: 540px; font-size: clamp(14px, 1.25vw, 20px); line-height: 1.45; color: #ddd; }
.showcase-action { position: absolute; right: var(--showcase-side); bottom: calc(6% + 28px); pointer-events: auto; }
.showcase-more { display: flex; align-items: center; justify-content: space-between; gap: 36px; min-width: 200px; min-height: 56px; padding: 16px 24px; border: 0; border-radius: 8px; background: #fff; color: #111; font-size: 16px; font-weight: 500; letter-spacing: -.025em; cursor: pointer; }
.showcase-more:focus-visible { outline:2px solid #888; outline-offset:3px; }
.showcase-more svg { width: 22px; height: 22px; flex: none; transition: transform .22s cubic-bezier(.16,1,.3,1); }
.showcase-more:is(:hover, :focus-visible, :active) { transform: none; }
.showcase + .services { padding-top: clamp(96px, 10vw, 160px); }
/* A single black surface keeps the bottle and its details in the foreground. */
html:has(.product-dialog[open]) { overflow: hidden; }
.product-dialog { position: fixed; width: min(calc(100% - 48px), 1080px); max-width: none; max-height: 90svh; margin: auto; padding: 0; overflow: auto; overscroll-behavior: contain; border: 1px solid #252525; border-radius: 12px; background: #000; color: #fff; }
.product-dialog::backdrop { background: #000e; }
.product-dialog.from-cart::backdrop { background: rgb(0 0 0 / 78%); }
.product-dialog[open] { animation: product-open .22s cubic-bezier(.16,1,.3,1); }
@keyframes product-open { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.product-detail-layout { display: grid; grid-template-columns: 48% 52%; min-height: 600px; }
.product-close { position: sticky; margin: 16px 16px -60px auto; z-index: 4; top: 16px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid #333; border-radius: 50%; background: #000; color: #aaa; cursor: pointer; transition: color .2s ease, background .2s ease, border-color .2s ease, transform .16s cubic-bezier(.16,1,.3,1); }
.product-close svg { display:block; width: 24px; height: 24px; fill: none; }
.product-close:focus-visible { outline: 2px solid #008cff; outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .product-close:hover { color: #fff; border-color: #666; background: #202020; }
}
.product-close:active { transform: scale(.97); }
.product-model-panel { position: relative; min-height: 600px; background: #000; }
.product-packages { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 24px; padding: 30px 28px; padding-right: 0; }
.product-packages > a, .product-packages > span { display: inline-flex; align-items: center; gap: 9px; color: #aaa; font-size: 12px; line-height: 1.4; text-transform: uppercase; }
.product-packages > a { text-decoration: none; transition: color .2s ease; }
.product-packages > a:hover { color: #fff; }
.service-heading h3:focus { outline: none; }
.product-packages svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.product-packages .product-addon { color: #fff; font-size: 11px; }
.product-model { position: absolute; inset: 94px 28px 28px; cursor: grab; touch-action: pan-y; }
.product-model.is-dragging { cursor: grabbing; }
.product-model canvas { display: block; width: 100%; height: 100%; }
.product-model img { width: 100%; height: 100%; object-fit: cover; }
.product-model-status { position: absolute; top: 50%; left: 0; right: 0; margin: 0; text-align: center; color: #666; font-size: 12px; pointer-events: none; }
.product-detail-content { align-self: center; padding: 88px 60px 88px 28px; }
.product-dialog h2 { margin: 0 0 36px; font-size: clamp(36px, 3.6vw, 52px); font-weight: 600; letter-spacing: -.055em; line-height: 1.05; }
.product-detail-points { display: grid; gap: 24px; margin: 0; padding: 0; list-style: none; }
.product-detail-points li { display: grid; grid-template-columns: 22px 1fr; align-items: start; gap: 16px; color: #aaa; font-size: 18px; letter-spacing: -.02em; line-height: 1.5; }
.product-detail-points svg { width: 22px; height: 22px; margin-top: 3px; fill: currentColor; color: #888; }
@media (max-width: 760px) {
  .product-dialog { width: calc(100% - 24px); max-height: 92svh; border-radius: 8px; }
  .product-detail-layout { grid-template-columns: 1fr; min-height: 0; }
  .product-model-panel { min-height: 350px; }
  .product-packages { gap: 14px; padding: 24px 60px 0 22px; }
  .product-packages > a, .product-packages > span { font-size: 10px; gap: 6px; }
  .product-packages svg { width: 17px; height: 17px; }
  .product-model { inset: 80px 28px 0; }
  .product-detail-content { padding: 20px 24px 36px; }
  .product-dialog h2 { margin-bottom: 24px; font-size: 36px; }
  .product-detail-points { gap: 20px; }
  .product-detail-points li { gap: 12px; font-size: 16px; }
  .product-close { margin: 12px 12px -56px auto; top: 12px; }
}
@media (prefers-reduced-motion: reduce) { .product-dialog[open] { animation: none; } }
@media (max-width: 1000px) {
  .showcase-pin { --showcase-side: 7%; }
  .showcase-copy { width: min(440px, calc(100% - 580px)); }
  .showcase-name { font-size: clamp(32px, 5vw, 52px); }
}
@media (max-width: 850px) {
  .showcase-copy { bottom: calc(6% + 100px); width: min(540px, calc(100% - 48px)); }
}
@media (max-width: 600px) {
  .showcase-pin { --showcase-side: 24px; min-height: 660px; }
  .showcase-skip { top: 20px; }
  .showcase-stage { bottom: 35%; }
  .showcase-arrow { top: 32%; width: 44px; height: 44px; }
  .showcase-prev { left: 14px; }
  .showcase-next { right: 14px; }
  .showcase-copy { bottom: 108px; width: calc(100% - 48px); }
  .showcase-name { font-size: clamp(30px, 8.5vw, 45px); }
  .showcase-description { margin-top: 10px; font-size: 14px; max-width: 330px; }
  .showcase-action { right: 24px; bottom: 30px; }
  .showcase-more { min-width: 168px; min-height: 56px; padding: 16px 24px; font-size: 16px; }
  .showcase-still { height: 70%; object-fit: cover; }
}
@media (prefers-reduced-motion: reduce) {
  .showcase-more:hover svg, .product-close:active { transform: none; }
}
@media (max-height: 600px) and (min-width: 601px) {
  .showcase-pin { min-height: 460px; }
  .showcase-name { font-size: 34px; }
  .showcase-description { font-size: 13px; margin-top: 8px; }
  .showcase-copy { bottom: 5%; }
  .showcase-action { bottom: calc(5% + 28px); }
}

.bottle-retry { position:absolute; z-index:5; top:20px; left:20px; padding:10px 16px; border:1px solid #888; border-radius:8px; background:#111; color:#fff; cursor:pointer; font:inherit; font-size:13px; }
.bottle-retry[hidden] { display:none; }
@media(max-width:760px) {
  .showcase-action { left:50%; right:auto; bottom:28px; transform:translateX(-50%); }
  .showcase-more { min-height:50px; min-width:164px; padding:13px 20px; font-size:15px; }
  .showcase-copy { bottom:104px; width:calc(100% - 40px); }
}