/* The booking action spans the card; package details sit quietly over the image. */
.service-image-wrap { position:relative; flex:none; width:100%; aspect-ratio:1.14; overflow:hidden; }
.service-image-wrap .service-image { position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; }
.service-actions { display:block; margin-top:auto; }
.service-actions .service-quote-button { display: flex; align-items: center; justify-content: space-between; min-height: 56px; margin-top: 0; padding: 16px 24px; border-radius: 8px; background: #111; color: #f5f5f5; font-size: 16px; font-weight: 500; letter-spacing: -.025em; cursor: pointer; transition: background .2s ease, color .2s ease, transform .22s cubic-bezier(.16,1,.3,1); }
.service-quote-arrow { width: 22px; height: 22px; flex: none; transition: transform .22s cubic-bezier(.16,1,.3,1); }
.service-info-button { position:absolute; z-index:2; top:14px; right:14px; display:grid; place-items:center; width:42px; height:42px; border:1px solid #ffffff55; border-radius:9px; padding:0; color:#fff; background:#000b; backdrop-filter:blur(8px); cursor:pointer; opacity:0; pointer-events:none; transform:translateY(-4px); transition:opacity .2s ease, transform .2s ease, background .2s ease; }
.service-info-button svg { width:22px; height:22px; }
.service-info-button:focus-visible, .service-image:focus-visible, .service-actions .service-quote-button:focus-visible { outline: 2px solid #777; outline-offset: 3px; }
.service-actions .service-quote-button:focus-visible { background:#008cff; color:#000; transform:none; }
.service-info-button:focus-visible { background:#111; color:#fff; }
.service-info-button:focus-visible { opacity:1; pointer-events:auto; transform:none; }
.service-heading h3 { transform-origin: left center; transition: transform .3s cubic-bezier(.16,1,.3,1); }
.service-card:has(:focus-visible) .service-heading h3 { transform: scale(1.035); }
@media (hover: hover) and (pointer: fine) {
  .service-card:hover .service-heading h3 { transform: scale(1.035); }
  .service-card:has(.service-image:hover, .service-heading:hover, .service-quote-button:hover) .service-actions .service-quote-button { background:#008cff; color:#000; transform:none; }
  .service-card:has(.service-image:hover, .service-heading:hover, .service-quote-button:hover) .service-quote-arrow { transform:translateX(3px); }
  .service-card:hover .service-info-button { opacity:1; pointer-events:auto; transform:none; }
  .service-info-button:hover { background:#111; }
}
@media (hover:none) { .service-info-button { opacity:1; pointer-events:auto; transform:none; } }
.service-card .service-actions .service-quote-button:active, .service-info-button:active { transform: scale(.97); }
.package-dialog { overflow: hidden; }
.package-layout { display: grid; grid-template-columns: 48% 52%; height: min(600px, calc(90svh - 2px)); min-height: 0; }
.package-collection { align-self: stretch; min-height: 0; display: grid; align-content: start; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px 8px; padding: 66px 28px 40px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.package-collection::-webkit-scrollbar, .package-content::-webkit-scrollbar { display: none; }
.package-collection[data-count="5"], .package-collection[data-service="Full Detail"] { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px 4px; }
.package-bottle { min-width: 0; margin: 0; text-align: center; }
.package-bottle-art { height: 196px; cursor: grab; touch-action: pan-y; }
.package-bottle-art canvas { display: block; width: 100%; height: 100%; }
.package-bottle-art img { width: 100%; height: 100%; object-fit: cover; }
.package-bottle figcaption { color: #929292; font-size: 11px; line-height: 1.35; margin-top: 9px; }
.package-content { align-self: center; max-height: 100%; min-height: 0; padding: 76px 54px 58px 28px; overflow-y: auto; scrollbar-width: none; }
.package-symbol { width: 32px; height: 32px; margin-bottom: 22px; fill: currentColor; color: #aaa; }
.package-dialog h2 { margin-bottom: 8px; }
.package-price { display:flex; align-items:baseline; gap:14px; margin:0 0 28px; color:#999; font-size:13px; }
.package-price strong { color:#fff; font-size:24px; font-weight:600; letter-spacing:-.04em; }
.package-price:has(+ .package-price-note:not([hidden])) { margin-bottom:8px; }
.package-price-note { max-width:280px; margin:0 0 24px; color:#a5a5a5; font-size:12px; line-height:1.45; }
.package-price-note[hidden] { display:none; }
.package-points { gap: 22px; }
.package-quote { display:block; min-height:56px; margin-top:36px; padding:16px 24px; border-radius:8px; background:#fff; color:#111; font-size:16px; font-weight:500; cursor:pointer; }
.package-quote:is(:hover,:focus-visible) { background:#ededed; transform:none; }
.package-quote:focus-visible { outline:2px solid #777; outline-offset:3px; }
@media (max-width: 900px) {
  .service-image-wrap { aspect-ratio:1.12; }
  .package-layout { display: flex; flex-direction: column; height: min(800px, calc(92svh - 2px)); }
  .package-content { order: -1; align-self: stretch; flex: none; max-height: 75%; padding: 32px 24px 12px; }
  .package-symbol { margin-bottom: 14px; width: 26px; height: 26px; }
  .package-dialog h2 { font-size: 36px; padding-right: 26px; }
  .package-points li { font-size: 16px; }
  .package-quote { margin-top: 26px; }
  .package-collection { flex: 1; padding: 32px 20px; gap: 22px 8px; }
  .package-collection[data-count="5"], .package-collection[data-service="Full Detail"] { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .package-bottle-art { height: 170px; }
}
@media (max-width:480px) { .service-image-wrap { aspect-ratio:1.15; } }
@media (prefers-reduced-motion: reduce) {
  .service-card .service-heading h3 { transition: none; transform: none !important; }
  .service-info-button, .service-info-button svg, .service-actions .service-quote-button, .service-quote-arrow, .package-quote { transition: none; }
  .service-info-button:hover, .service-info-button:hover svg, .service-card .service-actions .service-quote-button, .service-card .service-quote-arrow, .package-quote:hover { transform: none !important; }
}

/* One scrolling service sheet, with three lightweight bottle previews. */
@media(max-width:900px) {
  .package-dialog { width:calc(100% - 16px); max-height:94dvh; overflow:auto; }
  .package-layout { display:flex; flex-direction:column; height:auto; }
  .package-content { order:-1; max-height:none; overflow:visible; padding:30px 20px 12px; }
  .package-dialog h2 { font-size:30px; padding-right:44px; }
  .package-symbol { margin-bottom:12px; }
  .package-price { margin-bottom:20px; }
  .package-price strong { font-size:21px; }
  .package-points { gap:15px; }
  .package-points li { font-size:14px; line-height:1.5; gap:10px; }
  .package-collection,.package-collection[data-count="5"],.package-collection[data-service="Full Detail"] { flex:none; grid-template-columns:repeat(3,minmax(0,1fr)); padding:20px 16px 16px; gap:8px; overflow:visible; }
  .package-bottle-art { height:150px; cursor:default; }
  .package-bottle-art img { object-fit:contain; }
  .package-bottle figcaption { font-size:10px; margin-top:6px; }
  .package-layout > .package-quote { order:1; position:sticky; bottom:0; flex:none; margin:0; border:12px solid #000; border-radius:18px; min-height:72px; width:100%; text-align:center; }
}