/* Hallmark: studied-DNA continuation; quiet ordering plane, no new visual system. */
:root {
  --ivory: var(--color-ivory, oklch(97% 0.018 87));
  --ivory-deep: var(--color-ivory-deep, oklch(93% 0.03 86));
  --cocoa: var(--color-cocoa, oklch(24% 0.036 48));
  --cocoa-soft: var(--color-cocoa-soft, oklch(40% 0.036 48));
  --mustard: var(--color-mustard, oklch(76% 0.135 88));
  --focus: var(--color-focus, oklch(50% 0.12 250));
  --error-ink: oklch(43% 0.14 28);
  --success-ink: oklch(38% 0.09 145);
  --line-ink: oklch(38% 0.09 145);
  --rule: oklch(24% 0.036 48 / 0.24);
  --disabled-ink: oklch(47% 0.022 48);
  --dialog-shade: oklch(24% 0.036 48 / 0.4);
  --color-accent-ink: var(--cocoa);
}
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* Clip image scaling at its media viewport, never mask page overflow. */
body.has-webgl .scene-media { transform: none; }
body.has-webgl .scene-media img { transform: scale(1.025); }
/* Readability scrim belongs to the scene, not a card around the copy. */
.scene--hero::before, .scene--handcraft::before {
  position: absolute; z-index: -1; inset: 0; content: "";
  background: var(--ivory); opacity: 0.96;
  -webkit-mask-image: linear-gradient(to right, black 0%, black 24%, transparent 72%);
  mask-image: linear-gradient(to right, black 0%, black 24%, transparent 72%);
  pointer-events: none;
}
.scene--handcraft::before {
  -webkit-mask-image: linear-gradient(to left, black 0%, black 24%, transparent 72%);
  mask-image: linear-gradient(to left, black 0%, black 24%, transparent 72%);
}
.scene :is(h1,h2) { letter-spacing: 0 !important; }
.commerce-plane { position: relative; z-index: 5; background: var(--ivory); color: var(--cocoa); padding: 0 clamp(1.25rem, 6vw, 6rem); }
.commerce-plane *, .commerce-dialog * { min-width: 0; }
.commerce-section { width: min(100%, 70rem); margin-inline: auto; scroll-margin-top: 6rem; }
.commerce-section h2, .commerce-dialog h2 {
  font-size: clamp(1.65rem, 3.6vw, 3rem) !important;
  letter-spacing: 0.015em !important; font-weight: 400 !important; line-height: 1.5; max-width: none;
}
.commerce-section h3 { margin: 0; font-size: 1.18rem; font-weight: 500; line-height: 1.6; }
.commerce-section p { font-size: 1rem; line-height: 1.95; color: var(--cocoa-soft); }
.commerce-section strong { font-weight: 500; }
.order-method { padding-top: clamp(6rem, 12vw, 10rem); padding-bottom: clamp(5rem, 10vw, 8rem); display: grid; grid-template-columns: 0.9fr 1.1fr; column-gap: clamp(2rem, 8vw, 8rem); align-items: start; }
.section-heading p { max-width: 30rem; margin-top: 1.5rem; }
.order-steps { padding: 0; margin: 0; list-style: none; }
.order-steps li { display: flex; gap: 1.5rem; padding: 1.5rem 0; border-bottom: 1px solid var(--rule); }
.order-steps li:first-child { padding-top: 0; }
.step-number { font-size: 0.85rem; font-variant-numeric: tabular-nums; margin-top: 0.35rem; }
.order-steps p { margin: 0.6rem 0 0; }
.order-method > .text-action { justify-self: start; margin-top: 2rem; }
.text-action { display: inline-flex; align-items: center; justify-content: flex-start; gap: 1rem; min-height: 3.5rem; padding: 0.5rem 0; border: 0; color: var(--cocoa); background: transparent; text-decoration: none; font: inherit; font-weight: 500; white-space: nowrap; cursor: pointer; }
.text-action > span[aria-hidden] { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; flex-shrink: 0; border-radius: 45% 55% 52% 48%; background: var(--mustard); color: var(--color-accent-ink); transition: transform 180ms var(--ease, ease-out); }
.text-action:active > span { transform: translateY(1px); }
.text-action:disabled { cursor: not-allowed; color: var(--disabled-ink); }
.text-action[data-state="loading"] { cursor: progress; }
.text-action[data-state="success"] { color: var(--success-ink); }
.text-action[data-state="error"] { color: var(--error-ink); }
@media (hover: hover) { .text-action:hover:not(:disabled) > span { transform: rotate(15deg); } .text-action:hover:not(:disabled) { text-decoration: underline; text-underline-offset: 0.35em; } }
.commerce-plane a:focus-visible, .commerce-plane button:focus-visible, .commerce-plane summary:focus-visible,
.commerce-plane input:focus-visible, .commerce-plane select:focus-visible, .commerce-plane textarea:focus-visible,
.commerce-dialog :focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.delivery-section { padding: 4rem clamp(0rem, 3vw, 3rem); background: var(--ivory-deep); color: var(--cocoa); display: grid; grid-template-columns: 1.15fr 1fr; gap: 0 5rem; }
.delivery-facts { margin: 0; }
.delivery-facts > div { padding: 1.05rem 0; border-bottom: 1px solid var(--rule); }
.delivery-facts dt { color: var(--cocoa-soft); font-size: 0.83rem; margin-bottom: 0.4rem; }
.delivery-facts dd { margin: 0; line-height: 1.8; }
.delivery-facts a, .footer-meta a { display: inline-flex; align-items: center; min-height: 2.75rem; color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.3em; white-space: nowrap; }
.delivery-section .text-action { justify-self: start; }
.line-action { color: var(--line-ink); }
.line-action > span[aria-hidden] { background: var(--line-ink); color: var(--ivory); }
.faq-section { padding: 7rem 0; display: grid; grid-template-columns: 0.65fr 1.35fr; gap: 3rem; }
.faq-list details { border-bottom: 1px solid var(--rule); }
.faq-list summary { position: relative; display: flex; align-items: center; min-height: 4rem; padding: 1rem 2rem 1rem 0; font-size: 1rem; line-height: 1.7; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { position: absolute; right: 0; content: "＋"; font-size: 1.2rem; font-weight: 400; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { margin: 0 0 1.5rem; }
.reservation-section { padding: 1rem 0 7rem; max-width: 50rem; }
.order-intro { padding-bottom: 1rem; }
.preview-notice { padding: 1rem 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-size: 0.9rem !important; }
.preview-fields { margin: 0; padding: 0; border: 0; }
.form-group { padding: 0; margin: 2.2rem 0; border: 0; }
.form-group legend { padding: 0; margin-bottom: 1rem; font-size: 1rem; font-weight: 500; line-height: 1.7; width: 100%; }
.form-group legend > span { display: block; color: var(--cocoa-soft); font-weight: 400; font-size: 0.88rem; }
.form-group.choice-field legend > span { display: inline; margin-left: 0.5rem; font-size: 0.76rem; }
.quantity-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.quantity-row > label { font-size: 1.05rem; }
.quantity-row > label > span { display: block; font-size: 0.85rem; color: var(--cocoa-soft); }
.quantity-control { display: flex; align-items: center; gap: 0.25rem; flex-shrink: 0; }
.quantity-control button { width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: var(--ivory-deep); color: var(--cocoa); cursor: pointer; font: inherit; }
.quantity-control input { appearance: textfield; width: 3.1rem; height: 3rem; text-align: center; padding: 0; border: 0; border-bottom: 1px solid var(--rule); background: transparent; color: var(--cocoa); font: inherit; font-variant-numeric: tabular-nums; }
.quantity-control input::-webkit-inner-spin-button, .quantity-control input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.quantity-control button:active { transform: translateY(1px); }
.quantity-control button:disabled { color: var(--disabled-ink); cursor: not-allowed; }
#order-selection-summary { font-size: 0.9rem; }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.form-field { margin: 1rem 0; }
.form-field > label, .commerce-dialog > label { display: block; margin-bottom: 0.5rem; font-size: 1rem; font-weight: 500; }
.form-field label > span { color: var(--cocoa-soft); font-size: 0.76rem; font-weight: 400; margin-left: 0.5rem; }
.form-field input, .form-field select, .form-field textarea, .commerce-dialog textarea {
  width: 100%; min-width: 0; max-width: 100%; min-height: 3.25rem; padding: 0.75rem; border: 1px solid var(--rule); border-radius: 0.25rem; color: var(--cocoa); background: var(--ivory); font: inherit; font-size: 1rem; line-height: 1.7;
}
.form-field input[type=date] { display: block; appearance: none; }
.form-field textarea, .commerce-dialog textarea { min-height: 8rem; resize: vertical; }
.form-field input[aria-invalid=true], .form-field select[aria-invalid=true], .form-field textarea[aria-invalid=true], input[aria-invalid=true] { border-color: var(--error-ink); }
.choice-list { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; }
.choice-list label, .consent-label { display: flex; align-items: center; gap: 0.7rem; min-height: 2.75rem; line-height: 1.8; cursor: pointer; }
.choice-list input, .consent-label input { flex-shrink: 0; accent-color: var(--cocoa); width: 1.2rem; height: 1.2rem; margin: 0; }
.consent-label { align-items: flex-start; margin: 1rem 0; }
.consent-label input { margin-top: 0.3rem; }
.consent-label { flex-wrap: wrap; }
.consent-label > span { flex: 1; }
.consent-label > .field-error { flex-basis: 100%; }
.consent-label span { font-size: 0.9rem; }
.field-help, .field-error { margin: 0.35rem 0 0; min-height: 1.5rem; font-size: 0.85rem !important; line-height: 1.75 !important; }
.field-error { color: var(--error-ink) !important; }
.error-summary { padding: 1rem; margin: 1rem 0; border: 1px solid var(--error-ink); color: var(--error-ink); }
.error-summary h2, .error-summary h3 { font-size: 1.15rem !important; color: inherit; }
.error-summary a { display: inline-flex; align-items: center; min-height: 2.75rem; color: inherit; text-underline-offset: 0.25em; }
.quiet-note { font-size: 0.83rem !important; }
.form-actions { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; }
#submit-order { min-height: 2.75rem; border: 0; background: transparent; color: var(--disabled-ink); font: inherit; font-size: 0.85rem; cursor: not-allowed; white-space: nowrap; }
#form-status { min-height: 2rem; }
.brand-close { padding-top: 3rem; padding-bottom: 6rem; border-top: 1px solid var(--rule); }
.brand-close > img { width: 9rem; height: auto; }
.brand-close > p { color: var(--cocoa); font-size: clamp(1.7rem, 4vw, 3rem); line-height: 1.6; }
.footer-meta { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; align-items: center; font-size: 0.85rem; color: var(--cocoa-soft); }
.commerce-dialog { position: fixed; inset: 0; margin: auto; width: min(36rem, calc(100% - 2rem)); height: fit-content; max-height: min(85svh, 48rem); padding: clamp(1.25rem, 5vw, 3rem); border: 0; color: var(--cocoa); background: var(--ivory); overflow-y: auto; }
.commerce-dialog::backdrop { background: var(--dialog-shade); }
.commerce-dialog p, .commerce-dialog li { line-height: 1.9; }
.commerce-dialog h2 { font-size: 1.5rem !important; }
.commerce-dialog .text-action { margin-right: 1rem; }
.line-desktop img { margin: 1.5rem auto; background: var(--ivory); }
#line-inquiry-mobile { display: none; }
#preview-check-summary dl > div { display: flex; gap: 1rem; margin: 1rem 0; }
#preview-check-summary dd { margin: 0; }
.preview-summary-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.85rem 1rem; }
.preview-summary-list dt { color: var(--cocoa-soft); }
.preview-summary-list dd { overflow-wrap: anywhere; }
#reservation-message { min-height: 15rem; font-size: 1rem; white-space: pre-wrap; }
#reservation-line-mobile { color: var(--line-ink); }
.reservation-qr img { display: block; max-width: 100%; height: auto; background: white; }
#reservation-qr-help, #reservation-line-status { overflow-wrap: anywhere; }
.commerce-dialog { scroll-padding-block: 1.5rem; }
.commerce-dialog .text-action { max-width: 100%; min-height: 3rem; }
body.in-commerce .rail { display: none; }
body.in-commerce .grain { opacity: 0; }
.scene-next { color: var(--cocoa); display: inline-flex; min-height: 2.75rem; align-items: center; text-decoration: none; white-space: nowrap; }
#static-fallback .commerce-plane { padding-inline: 0; }
#static-fallback .commerce-section { padding-inline: 0.5rem; }
#static-fallback .delivery-section { padding-inline: 1rem; }
@media (max-width: 48rem) {
  .scene--hero::before, .scene--handcraft::before {
    -webkit-mask-image: linear-gradient(to bottom, transparent 20%, black 64%);
    mask-image: linear-gradient(to bottom, transparent 20%, black 64%);
  }
  .order-method, .delivery-section, .faq-section { grid-template-columns: minmax(0, 1fr); }
  .order-method { padding-top: 5rem; padding-bottom: 4rem; gap: 2rem; }
  .order-method > .text-action { margin-top: 0; }
  .delivery-section { padding: 2rem 1rem; gap: 1rem; }
  .faq-section { padding: 4.5rem 0; gap: 1.5rem; }
  .field-pair { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .reservation-section { padding-bottom: 4rem; }
  .line-desktop { display: none; }
  #line-inquiry-mobile { display: inline-flex; }
  .brand-close { padding-bottom: 3rem; }
  .commerce-plane { padding-inline: 1.25rem; }
  .quantity-row { gap: 0.5rem; }
  .quantity-control { gap: 0; }
}
@media (hover: hover) {
  .quantity-control button:not(:disabled):hover { background: var(--mustard); color: var(--cocoa); }
  .form-field :is(input,select,textarea):not(:disabled):hover { background: var(--ivory-deep); color: var(--cocoa); }
}
@media (prefers-reduced-motion: reduce) { .text-action > span[aria-hidden] { transition: none; } }