/* Shared page chrome, measured against the published VivaMarina layout. */

:root {
  --vm-display-size: clamp(2.75rem, 7vw, 5.6rem);
  --vm-section-size: clamp(2.35rem, 5vw, 4rem);
}
.site-header__inner {
  height: 4.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
}
.brand span { font: 600 1.5rem/1.3 var(--serif); }
.brand small {
  margin-top: 0.25rem;
  font: 700 0.9375rem/1.55 var(--sans);
  letter-spacing: .1em;
}
.desktop-nav { gap: 1.75rem; }
.desktop-nav a { font: 600 0.9375rem/1.55 var(--sans); }
.header-actions { gap: 0.25rem; }
/* Match the homepage header edges while preserving the inner-page wordmark. */
body:not(.page-index) .header-actions { flex-shrink: 0; }
@media (min-width: 701px) {
  body:not(.page-index) .site-header__inner {
    --header-inline-inset: max(6.45vw, calc((100vw - 110rem) / 2 + 1.5rem));
    width: calc(100% - var(--header-inline-inset) - var(--header-inline-inset));
  }
}
.menu-toggle, .cart-link {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
}
.menu-toggle { padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.375rem; }
.menu-toggle span { display: block; width: 1.875rem; height: 0.09375rem; background: var(--ink); }
.cart-link svg { width: 1.75rem; height: 1.75rem; }
.cart-link span { top: 0; right: 0; width: 1.25rem; height: 1.25rem; font-size: 0.75rem; }

.menu-drawer { inset: 0; width: 100vw; max-width: none; padding: 0; overflow-y: auto; }
.menu-drawer__inner { min-height: 100%; padding-bottom: 1.875rem; }
.menu-drawer__top { height: 4.75rem; font: 400 1.5rem/1.3 var(--serif); }
.menu-drawer__top button { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; padding: 0; }
.menu-drawer__top button svg { width: 1rem; height: 1rem; }
.menu-drawer nav { padding-top: 2rem; }
.menu-drawer nav a {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 0.0625rem solid oklch(98.5% .008 83 / .15);
  font: 400 1.5rem/1.3 var(--serif);
}
.menu-drawer nav a span { font: 0.9375rem/1.4 var(--sans); color: var(--bronze); }
.menu-drawer nav a[aria-current="page"] { color: var(--bronze); }
.menu-drawer nav .menu-drawer__cart {
  margin-top: 0;
  padding: 2rem 0 0;
  border: 0;
  font: 600 1.0625rem/1.65 var(--sans);
}

/* The home hero opens a narrow panel; inner pages use the full-screen menu. */
.page-index .menu-backdrop { background: oklch(24.5% .047 243 / .4); }
.menu-drawer--home {
  inset: 0 0 0 auto;
  width: min(24rem, 86vw);
  height: 100dvh;
  overflow: hidden;
  box-shadow: -1.25rem 0 3.125rem #0002;
}
.menu-drawer--home .menu-drawer__inner {
  width: 100%;
  min-height: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.menu-drawer--home .menu-drawer__top {
  flex: none;
  height: 4.5rem;
  padding: 0 1.25rem;
}
.menu-drawer--home nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 1.5rem 1.25rem;
}
.menu-drawer--home nav a,
.menu-drawer--home nav button {
  display: block;
  width: 100%;
  min-height: 4rem;
  padding: 1rem 0;
  border: 0;
  border-bottom: 0.0625rem solid oklch(98.5% .008 83 / .15);
  border-radius: 0;
  background: transparent;
  color: oklch(98.5% .008 83);
  font: 400 1.5rem/1.3 var(--serif);
  text-align: left;
  text-transform: none;
  cursor: pointer;
}
.menu-drawer--home nav :is(a, button):last-child { border-bottom: 0; }
.menu-drawer--home nav :is(a, button):hover { color: var(--bronze); }
.page-index .menu-drawer--home .menu-drawer__top { height: 4.75rem; }
.page-index .menu-drawer--home .menu-drawer__top button svg { width: 1.25rem; height: 1.25rem; }

.site-footer {
  padding: 3.5rem 0;
  color: oklch(98.5% .008 83);
}
.footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; }
.footer-brand > a { font: 400 1.875rem/1.2 var(--serif); }
.footer-brand small {
  margin-top: 0.5rem;
  color: var(--bronze);
  font: 700 0.9375rem/1.55 var(--sans);
  letter-spacing: .2em;
}
.footer-brand p {
  max-width: 24rem;
  margin: 1.25rem 0 0;
  color: oklch(98.5% .008 83 / .6);
  font: 400 0.9375rem/1.55 var(--sans);
}
.site-footer nav strong {
  margin-bottom: 1rem;
  color: var(--bronze);
  font: 700 0.8125rem/1.5 var(--sans);
  letter-spacing: .13em;
  text-decoration: overline;
  text-decoration-color: var(--bronze);
}
.site-footer nav a {
  margin-bottom: 0.5rem;
  color: oklch(98.5% .008 83);
  font: 400 1.0625rem/1.65 var(--sans);
}
.site-footer nav a:last-child { margin-bottom: 0; }
.footer-bottom {
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 0.0625rem solid oklch(98.5% .008 83 / .15);
  color: oklch(98.5% .008 83 / .5);
  font: 400 0.9375rem/1.55 var(--sans);
}

@media (max-width: 1023px) {
  .desktop-nav { display: none; }
}
@media (max-width: 700px) {
  .site-header__inner { height: 4rem; }
  body:not(.page-index) .site-header__inner { width: calc(100% - 2.25rem); margin-left: 1.25rem; margin-right: 1rem; }
  .brand span { font-size: 1.5rem; }
  .brand small { font-size: 0.9375rem; }
  .menu-drawer nav { padding-top: 2rem; }
  .menu-drawer nav a { padding: 0.75rem 0; font-size: 1.5rem; }
  .menu-drawer nav a span { font-size: 0.9375rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer-brand { grid-column: auto; }
  .footer-bottom { margin-top: 3rem; }
  :where(.page-index) h2 { font-size: 2.35rem; }
  :where(body:not(.page-index)) .page-intro h1 { font-size: var(--vm-display-size); line-height: .95; }
  :where(body:not(.page-index)) h2 { font-size: var(--vm-section-size); }
}
@media (max-width: 375px) {
  .brand small { font-size: 0.8125rem; }
}
@media (max-width: 700px) {
  .menu-drawer--home nav { padding: 1.5rem 1.25rem; }
  .menu-drawer--home nav a,
  .menu-drawer--home nav button { min-height: 4rem; padding: 1rem 0; font-size: 1.5rem; }
}

/* Inner page alignment. These rules never change the finished home page. */
:where(body:not(.page-index)) h1 { font-size: var(--vm-display-size); }
:where(body:not(.page-index)) h2 { font-size: var(--vm-section-size); }
body:not(.page-index) .site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(0.5rem);
  -webkit-backdrop-filter: blur(0.5rem);
}
body:not(.page-index) main :is(h1, h2, h3) { text-wrap: balance; }
.page-page.page-handle-about .brand-principles h3,
.page-page.page-handle-production .production-page__facts h2 {
  font: 500 1.5rem/1.3 var(--serif);
}
.page-page.page-handle-about-marina .editorial-split--expert blockquote {
  font: 400 1.5rem/2.0625rem var(--serif);
}
.page-page.page-handle-about-marina .editorial-split--expert > img { object-position: center; }
.page-page.page-handle-documents .documents-list .document-card h2 { line-height: 1.5; }
.page-page.page-handle-documents .documents-list .document-card p { font-size: 0.9375rem; line-height: 1.55; }
.page-page.page-handle-faq .faq-page summary { font: 400 1.3125rem/1.5 var(--serif); }
.page-page.page-handle-faq .faq-page details p { max-width: 42rem; margin: 0; padding-top: 1rem; }
.page-page.page-handle-faq .faq-page summary:focus-visible { outline: 0.0625rem auto -webkit-focus-ring-color; outline-offset: 0; }
.page-page:is(.page-handle-delivery, .page-handle-contacts) .info-cards h2 { font: 500 1.875rem/1.2 var(--serif); }
.page-page:is(.page-handle-delivery, .page-handle-contacts) .info-cards p { font: 400 1.0625rem/1.65 var(--sans); }
.page-page:is(.page-handle-delivery, .page-handle-contacts) .page-intro + .section .wrap.rich-text { max-width: 73.75rem; }
.page-page.page-handle-contacts .info-cards { grid-template-columns: minmax(0, 1fr); max-width: 42rem; }
.page-blog .articles-grid a h2 { font: 500 1.875rem/1.2 var(--serif); }
.page-blog .articles-grid a p { font: 400 1.0625rem/1.65 var(--sans); }
.page-product .legal-note { font: 400 0.9375rem/1.55 var(--sans); }
.page-collection .product-card h3 { line-height: 1.375; }
.page-collection .product-card p { line-height: 1.625; }
@media (min-width: 701px) {
  :is(.page-collection, .page-page, .page-blog) .page-intro { padding-top: 5.625rem; }
  .page-product .product-section { padding: 4rem 0; }
  .page-cart .page-intro--small { padding: 5.8125rem 0; }
}
.page-collection .product-card__image img { width: 94%; height: 94%; }
.page-collection .catalog-section { padding-top: 5.625rem; }
@media (min-width: 701px) {
  .page-collection .catalog-section { padding-bottom: 5.625rem; }
  .page-collection .product-grid { row-gap: 3.5rem; }
  .page-collection .product-card { height: 32.8125rem; min-height: 0; }
  .page-collection .product-card__image img { transform: translateY(-0.3125rem); }
  .page-page.page-handle-selection .selection-intro h1 { font-size: var(--vm-display-size); }
  .page-page.page-handle-selection .selection-intro p { margin-top: 1rem; }
  .page-page.page-handle-selection .selection-page { padding: 5.625rem 0; }
}
.page-product .product-section { background: oklch(97.5% 0.012 83); }
.page-product .product-image { background: oklab(0.925 0.0036185 0.025747 / 0.3); }
.page-product .registration-card { justify-content: flex-start; background: var(--card); }
.page-product .registration-card > .icon { width: 1.75rem; height: 1.75rem; color: var(--bronze); }
.page-product .registration-card > div { min-width: 0; }
.page-product .product-description p { color: oklch(98.5% 0.008 83 / 0.75); font-size: 1.0625rem; line-height: 1.65; }
.page-blog .articles-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }
.page-blog .articles-grid a { min-width: 0; }
.page-blog .articles-grid a h2 { margin: 1.25rem 0 0; }
.page-blog .articles-grid .article-arrow { display: block; margin-top: auto; font-size: 1.5rem; line-height: 1; }
.page-page.page-handle-about .brand-principles article { border-top: 0.0625rem solid #ffffff30; }
.page-page.page-handle-about .brand-principles .icon { color: var(--bronze); }
.page-page.page-handle-about .center-cta .button .icon { width: 1rem; height: 1rem; }
.page-page.page-handle-about-marina .editorial-split blockquote { border-top: 0; border-left: 0.125rem solid var(--bronze); padding: 0 0 0 1.5rem; font-style: normal; }
.page-page.page-handle-production .production-page__images figure:first-child figcaption { display: none; }
.page-page:is(.page-handle-delivery, .page-handle-contacts) .info-cards article { background: var(--card); }
.page-page:is(.page-handle-delivery, .page-handle-contacts) .info-cards .icon { color: var(--bronze); }
.page-page:is(.page-handle-delivery, .page-handle-contacts) .info-cards h2 { margin-top: 1.75rem; }
.page-page.page-handle-faq .faq-page summary { list-style: none; position: relative; padding-right: 1.875rem; }
.page-page.page-handle-faq .faq-page summary::-webkit-details-marker { display: none; }
.page-page.page-handle-faq .faq-page summary::after { content: '+'; position: absolute; right: 0; top: 0; color: var(--bronze); font: 400 1.4375rem/1 var(--sans); }
.page-page.page-handle-faq .faq-page details[open] summary::after { content: '−'; }
.page-cart .empty-cart > .icon { width: 2.5rem; height: 2.5rem; margin: 0 auto 1.25rem; color: var(--bronze); }
.page-cart .empty-cart h2 { margin: 0 0 1.625rem; }
.page-cart .empty-cart { padding: 0; }
@media (min-width: 701px) {
  .page-product .product-information { padding-top: 5.625rem; padding-bottom: 3.875rem; }
  .page-product .product-description section { padding-bottom: 1.5rem; margin-bottom: 1.75rem; }
  .page-product .product-description h2 { margin-bottom: 0.75rem; }
  .page-product .product-registration { padding-bottom: 4.625rem; }
  .page-blog .articles-grid a { min-height: 22.5625rem; }
  .page-page.page-handle-about .brand-principles { padding: 6.75rem 0; }
  .page-page.page-handle-about .center-cta { padding: 5.5625rem 0; }
  .page-page.page-handle-faq .faq-page { max-width: none; }
  .page-page.page-handle-faq .faq-page details { padding: 1.25rem 0; }
  .page-page.page-handle-production .production-page__images { grid-template-rows: repeat(2, 29.5rem); }
  .page-page.page-handle-production .production-page__images figure:first-child { grid-row: 1 / span 2; }
  .page-page.page-handle-production .production-page__images figure:last-child { grid-column: 2; grid-row: 2; }
  .page-page.page-handle-production .production-page__images figure:first-child img { height: 60rem; }
  .page-page.page-handle-production .production-page__images figure:not(:first-child) img { height: 27.3125rem; max-height: none; }
  .page-page.page-handle-production .page-intro + .section { padding-bottom: 4.125rem; }
  .page-page.page-handle-documents .page-intro + .section { padding: 3.75rem 0; }
  .page-page:is(.page-handle-delivery, .page-handle-contacts) .page-intro + .section { padding: 3.5rem 0; }
  .page-page.page-handle-delivery .info-cards article { padding: 1.5rem; }
  .page-page.page-handle-contacts .info-cards article { padding: 2.5rem; }
}
@media (max-width: 700px) {
  :is(.page-collection, .page-page, .page-blog, .page-cart) .page-intro { padding-top: 3.6875rem; }
  .page-collection .catalog-section { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  .page-collection .product-grid { column-gap: 1rem; row-gap: 3.5rem; }
  .page-collection .product-card { min-height: 21.3125rem; }
  .page-collection .product-card__body { padding: 1rem; }
  .page-collection .product-card h3 { font-size: 1.0625rem; line-height: 1.375; margin-bottom: 0.5rem; }
  .page-collection .product-card p { font-size: 1.0625rem; line-height: 1.625; min-height: 0; margin-bottom: 1rem; }
  .page-collection .product-card .price { font-size: 1.3125rem; }
  .page-collection .product-card__bottom button { width: 2.25rem; height: 2.25rem; }
  .page-collection .product-card__image img { width: 88%; height: 88%; }
  .page-product .product-section { padding-top: 1.9375rem; padding-bottom: 0; }
  .page-product .product-details h1 { font-size: var(--vm-display-size); }
  .page-product .product-description p { font-size: 1.0625rem; line-height: 1.65; }
  .page-product .product-description section { padding-bottom: 1.5rem; margin-bottom: 1.5rem; }
  .page-product .product-information { padding: 3.5rem 0 4.0625rem; }
  .page-product .product-registration { padding: 3.5rem 0 1.3125rem; }
  .page-product .registration-card { padding: 1.375rem; }
  .page-page.page-handle-about .page-intro h1 { max-width: none; }
  .page-page.page-handle-about .editorial-split > img { height: 16.75rem; }
  .page-page.page-handle-about .brand-principles { padding: 3.5rem 0; }
  .page-page.page-handle-about .brand-principles .wrap > div { gap: 0; }
  .page-page.page-handle-about .brand-principles article { min-height: 7rem; padding: 1.5rem 0; }
  .page-page.page-handle-about .brand-principles .icon { width: 1.5rem; height: 1.5rem; margin-bottom: 1rem; }
  .page-page.page-handle-about .editorial-split .rich-text h2 { font-size: var(--vm-section-size); }
  .page-page.page-handle-about .center-cta h2 { max-width: none; margin-inline: auto; }
  .page-page.page-handle-about-marina .editorial-split--expert > img { height: 28rem; }
  .page-page.page-handle-about-marina .editorial-split .rich-text h2 { font-size: var(--vm-section-size); max-width: none; }
  .page-page.page-handle-production .production-page__images figure:first-child img { height: 22.25rem; }
  .page-page.page-handle-production .production-page__facts { gap: 1.75rem; }
  .page-page.page-handle-production .production-page__facts article { border-top: 0; padding-top: 0; }
  .page-page.page-handle-production .production-page__facts article:first-child { border-top: 0.0625rem solid var(--line); padding-top: 1.5rem; }
  .page-page.page-handle-documents .documents-list { margin-top: 0; }
  .page-page.page-handle-documents .page-intro + .section { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  .page-page:is(.page-handle-delivery, .page-handle-contacts) .page-intro + .section { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  .page-page:is(.page-handle-delivery, .page-handle-contacts) .info-cards { gap: 1.25rem; }
  .page-page:is(.page-handle-delivery, .page-handle-contacts) .info-cards article { padding: 1.625rem 1.5rem; min-height: 13.625rem; }
  .page-page:is(.page-handle-delivery, .page-handle-contacts) .info-cards h2 { margin-bottom: 0.875rem; }
  .page-page.page-handle-delivery .info-cards article { padding: 1.5rem; }
  .page-page.page-handle-contacts .info-cards article { padding: 1.75rem; }
  .page-page.page-handle-delivery .info-cards h2 { margin-top: 1.5rem; }
  .page-page.page-handle-faq .faq-page details { padding: 1.25rem 0; }
  .page-blog .page-intro + .section { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  .page-blog .articles-grid { grid-template-columns: minmax(0, 1fr); margin-top: 0; gap: 1.25rem; }
  .page-blog .articles-grid a { min-height: 22.875rem; padding: 1.5rem; }
  .page-blog .articles-grid a h2 { margin-top: 2.75rem; }
  .page-blog .articles-grid a p { margin-top: 1.125rem; }
  .page-cart .cart-section { padding: 3.5rem 0; }
  .page-cart .empty-cart { padding: 0; }
  .page-cart .empty-cart h2 { font-size: 2.35rem; }
}

/* Full text CTA in the shared product card, including narrow two-column grids. */
:is(.page-index, .page-collection, .page-search) .product-card .product-card__bottom { flex-wrap: wrap; gap: 0.75rem; }
:is(.page-index, .page-collection, .page-search) .product-card .product-card__bottom form { flex: 1 0 100%; }
:is(.page-index, .page-collection, .page-search) .product-card .product-card__bottom button {
  width: 100%; height: auto; min-height: 2.75rem; padding: 0.625rem 0.5rem;
  border-radius: var(--action-radius); font: 600 0.875rem/1.4 var(--sans);
}
.page-collection .product-card { height: auto; }
.product-card__variant-label { display: block; margin-bottom: 0.625rem; font-size: 0.75rem; }
.product-card__variant-label select { display: block; width: 100%; min-height: 2.5rem; padding: 0.375rem; border: 1px solid var(--line); background: var(--paper); }
.product-card [hidden] { display: none !important; }
.product-card:has([data-card-cart-badge]) { position: relative; }
.product-card__cart-badge { position: absolute; z-index: 1; top: 0.875rem; right: 0.875rem; padding: 0.375rem 0.75rem; border-radius: 2rem; background: var(--ink); color: var(--paper); font: 600 0.6875rem/1.3 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; pointer-events: none; }
.product-card__cart-total { margin-left: auto; color: var(--bronze); font: 600 0.875rem/1.4 var(--sans); text-align: right; white-space: nowrap; }
.product-card.is-in-cart .product-card__bottom .price { font-weight: 600; }
.product-card.is-in-cart :is(h3, p) { overflow-wrap: anywhere; }
.product-card__cart-status { display: flex; align-items: stretch; gap: 0.625rem; margin-top: 0.875rem; font: 600 0.9375rem/1.4 var(--sans); }
.product-card__cart-status .cart-quantity { flex: 1; min-width: 0; min-height: 3rem; background: var(--cream2); border-color: var(--line); border-radius: var(--action-radius); }
.product-card__cart-status .cart-quantity button { width: 2.75rem; min-width: 2.75rem; height: 3rem; color: var(--bronze); font-size: 1.25rem; border-radius: var(--action-radius); }
.product-card__quantity-label { white-space: nowrap; color: var(--ink); }
.product-card__cart-status .product-card__cart-link { display: grid; place-items: center; flex: 0 0 3rem; min-height: 3rem; border: 1px solid var(--bronze); border-radius: var(--action-radius); color: var(--bronze); text-decoration: none; }
.product-card__cart-link svg { width: 1.375rem; height: 1.375rem; }
.product-card__cart-status :is(button, a):hover { background: var(--cream); }
.product-card__cart-status :is(button, a):focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (max-width: 700px) {
  .product-card__cart-badge { top: 0.5rem; right: 0.5rem; padding: 0.3125rem 0.5rem; font-size: 0.5625rem; }
  .product-card__cart-total { font-size: 0.75rem; }
  .product-card__cart-status { flex-wrap: wrap; gap: 0.5rem; font-size: 0.8125rem; }
  .product-card__cart-status .cart-quantity { flex-basis: 6.25rem; }
  .product-card__cart-status .cart-quantity button { width: 2rem; min-width: 2rem; }
  .product-card__cart-status .product-card__cart-link { flex-grow: 1; max-width: 100%; }
}
@media (max-width: 700px) {
  :is(.page-index, .page-collection, .page-search) .product-card .product-card__bottom button { font-size: 0.75rem; }
}

/* Apply the same menu treatment to anchors and legacy section buttons. */
.menu-drawer nav button { display: flex; align-items: center; width: 100%; padding: 0.75rem 0; border: 0; border-bottom: 0.0625rem solid #ffffff26; border-radius: 0; background: transparent; color: inherit; text-align: left; font: 400 1.5rem/1.3 var(--serif); }
.menu-drawer nav :is(a, button):hover, .menu-drawer nav :is(a, button):focus-visible { color: var(--bronze); }
/* A non-shrinking square media frame contains the complete bottle. */
:is(.page-index, .page-collection, .page-search) .product-card .product-card__image { position: relative; display: block; flex: 0 0 auto; width: 100%; height: auto; aspect-ratio: 1; }
:is(.page-index, .page-collection, .page-search) .product-card .product-card__image img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; padding: 1rem; object-fit: contain; object-position: center; transform: none; }
:is(.page-index, .page-collection, .page-search) .product-card { height: auto; }
@media (max-width: 700px) {
  :is(.page-index, .page-collection, .page-search) .product-card .product-card__image img { padding: 0.5rem; }
}

@media (max-width: 700px) {
  .cart-link svg { width: 1.4375rem; height: 1.4375rem; }
  .menu-toggle { gap: 0.25rem; }
  .menu-toggle span { width: 1.375rem; }
}

/* One scale for every page and section. All fixed design lengths use rem.
   1920 x 1080 keeps the existing 16px baseline; 3840 x 2160 uses 32px.
   The height bound prevents over-scaling on short ultrawide displays.
   Media-query breakpoints intentionally remain in CSS pixels. */
@media (min-width: 1921px) {
  :root { font-size: max(16px, min(.8333333333vw, 1.4814814815svh)); }
}

/* Photo viewer keeps each image uncropped and leaves the existing thumbnail grid intact. */
[data-photo-gallery] img[role="button"] { cursor: zoom-in; }
body.photo-viewer-open { overflow: hidden; }
.photo-viewer { border: 0; padding: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; background: transparent; color: #fff; }
.photo-viewer::backdrop { background: #101b24ed; }
.photo-viewer[open] { display: grid; place-items: center; }
.photo-viewer__panel { position: relative; width: min(92vw, 100rem); padding: 3.75rem 0 0; }
.photo-viewer__image { display: block; width: 100%; height: calc(100svh - 10rem); object-fit: contain; touch-action: pan-y pinch-zoom; }
.photo-viewer button { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0.0625rem solid #ffffff50; border-radius: 50%; color: #fff; background: #ffffff12; font: 400 1.75rem/1 var(--sans); }
.photo-viewer button:hover { background: #ffffff30; }
.photo-viewer button[hidden] { display: none; }
.photo-viewer__close { position: absolute; top: 0; right: 0; }
.photo-viewer__controls { display: flex; justify-content: center; align-items: center; gap: 1.5rem; min-height: 4.5rem; }
.photo-viewer__status { min-width: 3rem; text-align: center; font: 500 1rem/1.4 var(--sans); }

/* Category results reuse the existing product cards, without unconfirmed pricing or variant actions. */
.recommendations[hidden], [data-recommendation][hidden] { display: none; }
.recommendations { scroll-margin-top: 6rem; }
.recommendations h2 { margin-bottom: 1rem; }
.recommendations-price { margin-top: 1rem; text-align: center; white-space: nowrap; line-height: 1.2; }
.recommendations-price p { margin: 0.375rem 0 0.75rem; color: var(--bronze); line-height: 1.5; white-space: normal; }
.recommendations-price [data-bundle-status] { margin: 0.75rem 0 0; }
.recommendations-price [data-bundle-status]:empty { display: none; }
.needs-grid a[aria-current="true"], .needs-grid a:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; }
@media (max-width: 700px) {
  .page-index .recommendations .product-grid, .recommendations .product-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Keep catalogue-sized cards centered even when the last row is incomplete. */
.recommendations .product-grid, .page-index .recommendations .product-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; }
.recommendations .product-grid > .product-card { flex: 0 1 calc((100% - 3rem) / 3); }
@media (max-width: 700px) {
  .recommendations .product-grid > .product-card { flex-basis: 100%; max-width: 25rem; }
}

.recommendations-price del, .recommendations-price .price { display: inline-block; vertical-align: baseline; font: 500 1.625rem/1.2 var(--serif); white-space: nowrap; }
.recommendations-price del { margin-right: 0.75rem; color: var(--copy); font-size: 1.25rem; }
.recommendations-price .button { margin: 0; max-width: 100%; white-space: normal; }
.preview-bundle-item { padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.preview-bundle-item h2 { font-size: 1.75rem; }
.preview-bundle-item del { color: var(--copy); margin-right: 1rem; }

.needs-heading-compact { display: none; }
@media (max-width: 700px), (min-width: 701px) and (max-height: 700px) {
  .needs-heading-compact { display: block; }
}

.bundle-variant { border: 0; padding: 0; margin: 0 0 2rem; text-align: center; }
.bundle-variant legend { width: 100%; margin-bottom: 0.75rem; }
.bundle-variant label { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; min-height: 2.75rem; border: 1px solid var(--line); border-radius: 0.5rem; cursor: pointer; }
.bundle-variant label:has(input:checked) { border-color: var(--bronze); background: var(--cream); }
.bundle-variant input { accent-color: var(--bronze); }
.recommendations .product-grid > template { display: none; }

[data-bundle-add][hidden], [data-bundle-cart][hidden] { display: none !important; }
.product-card .bundle-variant { text-align: left; margin-bottom: 1rem; }
 .product-card .bundle-variant label {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: calc(50% - 0.375rem);
  min-height: 3.5rem;
  padding: 0.75rem 0.375rem;
  border: 1px solid var(--line);
  border-radius: 1.125rem;
  background: var(--paper);
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.product-card .bundle-variant label + label { margin-left: 0.75rem; }
.product-card .bundle-variant label:hover { border-color: var(--bronze); }
.product-card .bundle-variant label:has(input:checked) {
  border-color: var(--bronze);
  background: var(--cream);
  box-shadow: inset 0 0 0 1px var(--bronze);
}
.product-card .bundle-variant label:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
.product-card .bundle-variant input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
}
.product-card .bundle-variant legend { font-size: 0.875rem; }
.selection-return { padding-top: 1.5rem; }

.recommendations .product-card__body { gap: 0.25rem; }
.recommendations .product-card__body > p { flex: 1; }
.recommendation-actions { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0.625rem; margin-top: auto; }
.recommendation-actions .button { flex: 0 0 auto; width: 100%; min-height: 2.75rem; padding: 0.625rem 0.75rem; font-size: 0.8125rem; text-align: center; }
.recommendation-actions [hidden], .cart-quantity[hidden] { display: none !important; }
.cart-quantity { display: inline-flex; align-items: center; justify-content: space-between; min-height: 2.75rem; border: 1px solid var(--line); border-radius: 0.75rem; background: var(--paper); }
.cart-quantity button { display: grid; place-items: center; width: 2.75rem; min-width: 2.75rem; height: 2.75rem; border: 0; background: transparent; color: var(--ink); font-size: 1.375rem; cursor: pointer; }
.cart-quantity [data-cart-variant-quantity] { min-width: 2rem; text-align: center; font-weight: 700; }
.cart-quantity button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.recommendations-price [data-bundle-add] { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; white-space: normal; }
.recommendations-return { display: flex; align-items: center; justify-content: center; gap: 0.625rem; width: fit-content; max-width: 100%; min-height: 2.75rem; margin: 0.5rem auto 0; color: var(--bronze); font: 500 1rem/1.4 var(--sans); text-decoration: none; text-align: center; }
.recommendations-return svg { flex: 0 0 1.25rem; width: 1.25rem; height: 1.25rem; }
.recommendations-return:hover { color: var(--ink); }
.recommendations-return:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; border-radius: 0.25rem; }
.preview-bundle-item .cart-quantity { margin: 0.75rem 1rem 0.75rem 0; }
@media (max-width: 700px) {
  .recommendation-actions .button, .recommendation-actions .cart-quantity { width: 100%; }
  .recommendations-price [data-bundle-add] { width: 100%; margin-inline: 0; }
}

/* Shared action appearance. Context-specific dimensions remain unchanged. */
:root {
  --action-radius: 0.75rem;
  --action-hover: #2b4357;
}
html body :is(.button, .home-hero__button, .product-card .product-card__bottom button) {
  border-radius: var(--action-radius);
  border: 1px solid var(--ink);
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: center;
  background: transparent;
  color: var(--ink);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
html body :is(.button--dark, .home-hero__button--dark, .product-card .product-card__bottom button) {
  background: var(--ink);
  color: #fff;
}
html body :is(.button, .home-hero__button, .product-card .product-card__bottom button):hover:not(:disabled) {
  background: var(--cream);
  opacity: 1;
}
html body :is(.button--dark, .home-hero__button--dark, .product-card .product-card__bottom button):hover:not(:disabled) {
  background: var(--action-hover);
  border-color: var(--action-hover);
  color: #fff;
}
html body .product-card .product-card__bottom button {
  background: transparent;
  border-color: #c5b394;
  color: var(--bronze);
}
html body .product-card .product-card__bottom button:hover:not(:disabled) {
  background: var(--bronze);
  border-color: var(--bronze);
  color: #fff;
}
html body :is(.button, .home-hero__button, .product-card .product-card__bottom button):focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 3px;
}
html body :is(.button, .home-hero__button, .product-card .product-card__bottom button):active:not(:disabled) {
  box-shadow: inset 0 0 0 1px currentColor;
}
html body :is(.button, .home-hero__button, .product-card .product-card__bottom button):disabled {
  opacity: .55;
  cursor: not-allowed;
}
@media (prefers-reduced-motion: reduce) {
  html body :is(.button, .home-hero__button, .product-card .product-card__bottom button) { transition: none; }
}

/* Keep all four footer sections in one row on desktop. */
@media (min-width: 1024px) {
  .site-footer .footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .8fr) minmax(0, .85fr) minmax(0, 1.25fr);
    gap: clamp(1.25rem, 2vw, 2rem);
    align-items: start;
  }
  .site-footer .footer-grid > .footer-brand,
  .site-footer .footer-grid > nav {
    min-width: 0;
    grid-column: auto;
    grid-row: auto;
  }
  .site-footer .footer-grid > nav a,
  .site-footer .footer-grid > nav strong {
    overflow-wrap: anywhere;
  }
}