/* Shared layout and typography for the approved SCT interface. */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --content-max: 1480px;
  --column-gap: clamp(24px, 3vw, 48px);
  --section-space: clamp(40px, 5vw, 64px);
  --type-page: clamp(32px, 3.1vw, 44px);
  --type-section: clamp(26px, 2.3vw, 32px);
  --type-card: clamp(22px, 1.7vw, 26px);
  --type-display: clamp(44px, 4.6vw, 64px);
  --control-height: 48px;
}
.section-width { max-width: var(--content-max); }
.header-inner {
  width: calc(100% - var(--gutter) * 2);
  max-width: var(--content-max);
  padding-inline: 0;
}
h1, .page-intro h1, .account-main h1 { font-size: var(--type-page); line-height: 1.12; letter-spacing: -.025em; }
h2, .catalog-head h2, .home-story h2, .product-info h2,
.checkout-form h2, .payment-view h2, .empty h2 { font-size: var(--type-section); line-height: 1.2; }
h3 { font-size: 22px; line-height: 1.3; }
.page-space { padding-block: var(--section-space) var(--space-16); }
.page-space > h1 { margin-bottom: var(--space-8); }
.coffee-ritual h1, .ritual-hero h1 { font-size: var(--type-display); line-height: 1.05; }
.coffee-ritual h2, .ritual-hero h2 { font-size: var(--type-section); line-height: 1.2; margin-top: var(--space-3); }
.coffee-ritual p, .ritual-hero p { font-size: 18px; line-height: 1.5; margin-top: var(--space-3); }
.coffee-ritual .button { margin-top: var(--space-6); min-height: 44px; }
.catalog { padding-block: var(--space-8) var(--section-space); }
.catalog-head { align-items: center; gap: var(--space-6); margin-bottom: var(--space-4); }
.catalog-meta { gap: var(--space-4); margin-bottom: var(--space-6); }
.catalog-head .quick-filters { flex-wrap: wrap; justify-content: flex-end; }
.catalog-head .filter-select .select-trigger,
.catalog-head .filter-button, .sort-label .select-trigger { min-height: 44px; height: 44px; }
/* Shared row tracks let real content determine the height of each card row. */
.product-grid, .catalog > .product-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--space-6);
  row-gap: var(--space-8);
  align-items: stretch;
}
.product-card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 6;
  row-gap: var(--space-4);
  min-width: 0;
}
.product-card:not(.category-beans) { grid-row: span 5; }
.product-card .product-photo { grid-row: 1; aspect-ratio: 1; }
.product-card h3 { grid-row: 2; font-size: var(--type-card); line-height: 1.25; margin: 0; padding-top: var(--space-1); }
.product-card .taste { grid-row: 3; font-size: 16px; line-height: 1.5; min-height: 0; -webkit-line-clamp: 3; }
.product-card .card-attributes { grid-row: 4; margin: 0; min-height: 44px; gap: var(--space-3); }
.product-card .choices { grid-row: 5; margin: 0; align-self: end; gap: var(--space-2); }
.product-card .price-button { grid-row: 6; margin: 0; align-self: end; min-height: var(--control-height); font-size: 24px; }
.product-card:not(.category-beans) .choices { grid-row: 4; }
.product-card:not(.category-beans) .price-button { grid-row: 5; }
.product-card .choices > *, .product-card .weight-chip,
.product-card .weight-chip.selected, .choices .select-trigger {
  min-height: var(--control-height); height: var(--control-height); font-size: 15px;
}
.product-card .choices > .weight-chips { height: auto; padding: 0; gap: var(--space-2); }
.product-card .favorite { width: 44px; height: 44px; }
.product-detail, .cart-layout { column-gap: var(--column-gap); }
.product-info h1 { font-size: var(--type-page); line-height: 1.12; margin-bottom: var(--space-4); }
.product-flavor { font-size: 22px; line-height: 1.4; margin-bottom: var(--space-4); }
.product-description { font-size: 16px; line-height: 1.6; max-width: 65ch; }
.product-info .roast-info { margin-block: var(--space-6); gap: var(--space-6); }
.detail-controls { grid-template-columns: minmax(0, 1fr) 132px; gap: var(--space-4); }
.control-label { font-size: 14px; line-height: 1.4; }
.product-info .choices { display: grid; grid-template-columns: 1fr; gap: var(--space-2); margin-top: var(--space-2); }
.product-info .choices > * { width: 100%; height: var(--control-height); min-height: var(--control-height); }
.product-info .choices > .weight-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); padding: 0; }
.product-info .weight-chip { height: var(--control-height); min-height: var(--control-height); padding: var(--space-2) var(--space-4); font-size: 15px; }
.detail-quantity { margin-top: var(--space-2); height: var(--control-height); width: 132px; align-items: center; justify-content: space-between; }
.detail-quantity .icon-button { min-height: 44px; min-width: 44px; }
.detail-buy { margin-top: var(--space-6); }
.detail-service { margin-block: var(--space-6) var(--space-8); flex-wrap: wrap; }
.specs > div { padding-block: var(--space-3); }
.product-editorial { padding-block: var(--space-12); }
.product-editorial p { max-width: 65ch; }
.account-layout { grid-template-columns: 200px minmax(0, 1fr); gap: var(--column-gap); padding-block: var(--section-space) var(--space-16); }
.order-summary { padding: var(--space-6); }
.order-summary h2 { font-size: 26px; line-height: 1.2; margin-bottom: var(--space-6); }
.summary-row { margin-bottom: var(--space-4); }
.home-story { gap: var(--column-gap); padding-block: var(--section-space); }
.home-story p { font-size: 18px; line-height: 1.6; margin-block: var(--space-6); }
.about-page { max-width: var(--content-max); padding-block: var(--section-space) var(--space-16); }
.about-intro h1 { font-size: var(--type-page); line-height: 1.12; max-width: 28ch; }
.about-intro > p { font-size: 20px; line-height: 1.55; max-width: 65ch; margin-top: var(--space-6); }
.about-cover { margin-block: var(--space-8) var(--space-12); }
.reading-column { max-width: 70ch; }
.reading-column p, .about-production p { font-size: 18px; line-height: 1.65; margin-bottom: var(--space-6); }
.reading-column h2 { font-size: var(--type-section); line-height: 1.2; margin: var(--space-12) 0 var(--space-6); }
.about-production { gap: var(--column-gap); margin-block: var(--space-12); }
.reference-footer { padding-block: var(--section-space) var(--space-6); margin-top: 0; }
.reference-footer .footer-main, .reference-footer .footer-bottom, .footer-demo { max-width: var(--content-max); }
.reference-footer .footer-main { gap: var(--column-gap); }
.reference-footer h2 { font-size: 22px; line-height: 1.3; margin-bottom: var(--space-6); }
.reference-footer nav { gap: var(--space-4); }
.reference-footer .footer-main p, .reference-footer .footer-main section > a, .reference-footer nav { font-size: 16px; line-height: 1.6; }
.reference-footer .footer-main p, .reference-footer .footer-main section > a { margin-bottom: var(--space-4); }
.reference-footer .footer-bottom { gap: var(--space-8); margin-top: var(--space-12); padding-top: var(--space-8); align-items: start; }
.reference-footer .footer-bottom > h2 { font-size: 26px; line-height: 1.25; }
.footer-documents { gap: var(--space-4); }
.reference-footer .footer-documents .text-link { font-size: 14px; line-height: 1.5; }
.newsletter > div { gap: var(--space-4); }
.newsletter .button, .newsletter input[type=email] { min-height: var(--control-height); }
@media (max-width: 1100px) {
  .product-card .choices { grid-template-columns: 1fr; }
  .account-layout { grid-template-columns: 176px minmax(0, 1fr); }
  .reference-footer .footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-8); }
}
@media (min-width: 601px) and (max-width: 960px) {
  .product-grid, .catalog > .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-head { align-items: start; }
  .product-card .card-attributes { min-height: 64px; }
}
@media (max-width: 700px) {
  .account-layout { display: block; padding-block: var(--space-8) var(--space-12); }
  .cart-layout { gap: var(--space-8); }
  .product-detail { grid-template-columns: 1fr; gap: var(--space-8); }
  .detail-controls { grid-template-columns: minmax(0, 1fr) 132px; }
  .about-production { grid-template-columns: 1fr; }
  .reference-footer .footer-bottom { display: block; }
  .reference-footer .footer-bottom > h2 { margin: var(--space-8) 0 var(--space-4); }
}
@media (max-width: 600px) {
  .page-space { padding-block: var(--space-8) var(--space-12); }
  .product-grid, .catalog > .product-grid { grid-template-columns: 1fr; row-gap: var(--space-12); }
  .product-card { display: flex; flex-direction: column; grid-row: auto; gap: 0; }
  .product-card:not(.category-beans) { grid-row: auto; }
  .product-card h3 { padding-top: 0; margin-top: var(--space-6); font-size: 24px; }
  .product-card .taste { margin-top: var(--space-3); }
  .product-card .card-attributes { margin-top: var(--space-6); }
  .product-card .choices { width: 100%; align-self: stretch; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: var(--space-6); }
  .product-card .price-button { margin-top: var(--space-3); }
  .product-card .choices > *, .product-card .weight-chip, .product-card .weight-chip.selected, .choices .select-trigger { font-size: 14px; }
  .coffee-ritual h1, .ritual-hero h1 { font-size: 44px; }
  .coffee-ritual h2, .ritual-hero h2 { font-size: 24px; }
  .coffee-ritual p, .ritual-hero p { font-size: 16px; }
  .product-info .choices { grid-template-columns: 1fr; }
  .product-flavor { font-size: 20px; }
  .reference-footer .footer-main { gap: var(--space-8) var(--space-4); }
  .reference-footer h2 { font-size: 20px; }
  .reference-footer .footer-main p, .reference-footer .footer-main section > a, .reference-footer nav { font-size: 14px; }
  .about-intro > p, .reading-column p, .about-production p { font-size: 18px; }
}
@media (max-width: 370px) {
  .detail-controls { grid-template-columns: 1fr; }
  .product-card .choices { grid-template-columns: 1fr; }
}
@supports not (grid-template-rows: subgrid) {
  .product-card { display: flex; flex-direction: column; grid-row: auto; }
  .product-card h3 { min-height: 2.5em; }
  .product-card .taste { min-height: 4.5em; }
  .product-card .choices { margin-top: auto; }
  .product-card .price-button { margin-top: var(--space-4); }
}
/* Price remains a primary typographic role even before stock is confirmed. */
.product-info .price-button { min-height: 52px; height: auto; padding: 12px; font-size: 24px; line-height: 1.2; }

/* A single bean weight keeps the selected-button treatment and shares a row with grind. */
.product-card.category-beans .choices { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); }
@media (max-width: 600px) {
  .product-card.category-beans .choices { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .product-card .choices > .weight-chips { width: 100%; min-width: 0; }
  .product-card .choices .select-trigger { padding-inline: 12px; }
}
.product-card .choices.single-weight > .weight-chips,
.product-info .choices.single-weight > .weight-chips { grid-template-columns: 1fr; }
.product-info .choices.single-weight > .weight-chips { max-width: 96px; }
.delivery-main h1 { font-size: var(--type-page); line-height: 1.12; }
.delivery-composition { gap: var(--column-gap); }
.delivery-composition > *, .delivery-options > * { min-width: 0; }
.delivery-options { gap: var(--space-4); }
.delivery-options h2, .delivery-faq h2 { font-size: var(--type-section); line-height: 1.2; }
.delivery-options p { font-size: 16px; line-height: 1.6; }
@media (max-width: 700px) { .delivery-composition { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); } }
@media (max-width: 480px) { .delivery-options { grid-template-columns: minmax(0, 1fr); } }

/* Preserve the full source height; small screens give copy its own space. */
.coffee-ritual, .category-hero.ritual-hero {
  height: auto;
  aspect-ratio: 3 / 1;
  padding: 0;
  display: block;
  position: relative;
  overflow: hidden;
}
.coffee-ritual { background: #251710; }
.category-hero.sarykum-hero { background: #f3ddb9; }
.category-hero.drip-hero { background: #251710; }
.coffee-ritual .hero-image, .category-hero.ritual-hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
  border-radius: 0;
  object-fit: contain;
  object-position: center;
  background: none;
  animation: none;
  transform: none;
}
.coffee-ritual .hero-content, .category-hero.ritual-hero > .section-width {
  position: relative;
  height: 100%;
  padding-block: clamp(24px, 3vw, 48px);
  justify-content: center;
  background: none;
}
.coffee-ritual h1, .category-hero.ritual-hero h1 { font-size: var(--type-display); }
.coffee-ritual h2, .category-hero.ritual-hero h2 { max-width: 48%; }
.coffee-ritual p, .category-hero.ritual-hero p { max-width: 48%; }
@media (max-width: 900px) {
  .coffee-ritual, .category-hero.ritual-hero {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
  }
  .coffee-ritual .hero-content, .category-hero.ritual-hero > .section-width {
    order: 0;
    height: auto;
    width: calc(100% - var(--gutter) * 2);
    padding: 28px 0;
  }
  .coffee-ritual .hero-image, .category-hero.ritual-hero > img {
    order: 1;
    position: relative;
    inset: auto;
    height: auto;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: right center;
  }
  .coffee-ritual h1, .category-hero.ritual-hero h1 { font-size: clamp(40px, 6vw, 52px); }
  .coffee-ritual h2, .category-hero.ritual-hero h2 { max-width: 100%; font-size: clamp(24px, 3.4vw, 30px); }
  .coffee-ritual p, .category-hero.ritual-hero p { max-width: 100%; font-size: 16px; }
  .coffee-ritual .button { min-height: 44px; }
}

/* Approved coffee film: panoramic desktop, independently framed mobile. */
.coffee-ritual { aspect-ratio: 21 / 9; }
.coffee-ritual .hero-image.hero-video { object-fit: contain; }
.hero-video-shade { position: absolute; inset: 0; background: linear-gradient(90deg, #160e08dd 0%, #160e0899 32%, transparent 58%); pointer-events: none; }
.coffee-ritual .hero-pause { display: grid; width: 44px; height: 44px; bottom: 20px; z-index: 2; }
@media (max-width: 900px) {
  .coffee-ritual { aspect-ratio: auto; }
  .coffee-ritual .hero-image.hero-video { aspect-ratio: 3 / 2; object-fit: contain; }
  .coffee-ritual .hero-video-shade { display: none; }
}
@media (min-width: 901px) {
  .coffee-ritual { height: min(42.857vw, 720px); aspect-ratio: auto; }
}

/* Phone framing follows each shot and preserves the full final product. */
@media (max-width:900px){
 .coffee-ritual .hero-image.hero-video{aspect-ratio:23/21;object-fit:contain;object-position:center}
 .coffee-ritual .hero-content{padding-block:20px;gap:12px}
 .coffee-ritual h1{font-size:36px;line-height:1.05}
 .coffee-ritual h2{font-size:24px;line-height:1.2}
 .coffee-ritual p{font-size:15px;margin-top:0}
 .coffee-ritual .button{margin-top:4px}
}