/* Image-first art direction. Photographs and authentic packaging lead. */
.hero { background:#781d2b url('/assets/campaign-red.webp') center/cover!important; color:white; }
.hero::before { display:none; }
.hero .capsule { background:#f5f5f5; color:var(--ink); }
.hero .hero-timer { background:#ffffff50; }
.hero .hero-timer>span { background:white; }
.hero h1 { text-shadow:0 2px 20px #570e1c30; }
.hero-caption { padding:16px; background:#781d2bcc; border-radius:12px; }
.hero-controls { padding:10px; border-radius:40px; background:#781d2b99; }
.product-visual { height:440px; }
.product-grid { gap:32px 24px; }
.product-meta p { display:none; }
.product-meta { padding-top:12px; }
.story-top { grid-template-columns:1.5fr 1fr; gap:5%; }
.story-art { position:relative; height:650px; }
.story-art .year { position:absolute; bottom:16px; inset-inline:24px; font-size:100px; letter-spacing:-6px; }
.story-copy p { max-width:44ch; font-size:14px; }
.quality { gap:24px; }
.quality-photo { height:350px; background:#eee; overflow:hidden; border-radius:12px; margin-bottom:20px; }
.quality-photo img { width:100%; height:100%; object-fit:contain; }
.quality p { font-size:12px; }
.recipe-image { aspect-ratio:.85; }
.recipe-card p { display:none; }
.recipe-card h3 { font-size:20px; margin-top:16px; }
.recipe-hero { position:relative; display:flex; align-items:flex-end; min-height:780px; padding:40px; overflow:hidden; border-radius:16px; }
.recipe-hero>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:0; }
.recipe-hero>div { position:relative; z-index:1; background:#f5f5f5ed; padding:28px; border-radius:12px; max-width:580px; }
.recipe-hero h1 { font-size:clamp(32px,4vw,52px); margin-bottom:12px; }
.recipe-description { font-size:14px; margin-bottom:16px; }
.recipe-jumps { margin-top:20px; }
.product-page .product-detail { grid-template-columns:1.7fr 1fr; gap:5%; max-width:none; }
.detail-visual { background:var(--tint,#eee)!important; }
.detail-visual img { max-height:none; height:750px; padding:32px; }
.faq-photo { width:100%; height:430px; object-fit:cover; border-radius:16px; margin-bottom:32px; }
.branch-canvas { min-height:300px; background:#781d2b; }
.branch-canvas::before { display:none; }
.branch-canvas h3 { text-shadow:0 2px 15px #510914; }
.footer { padding-top:64px; }
.page-content { max-width:1100px; }
@media(max-width:1000px) {
 .product-visual { height:350px; }
 .story-art { height:500px; }
 .quality-photo { height:260px; }
}
@media(max-width:700px) {
 .hero-caption { padding:8px 12px; }
 .hero-controls { padding:6px; }
 .product-visual { height:270px; }
 .product-grid { gap:24px 14px; }
 .story-top { grid-template-columns:1fr; }
 .story-art { height:460px; }
 .quality-photo { height:240px; }
 .recipe-image { aspect-ratio:.9; }
 .recipe-hero { min-height:760px; padding:16px; align-items:flex-end; }
 .recipe-hero>div { padding:20px; }
 .recipe-hero h1 { font-size:30px; }
 .recipe-jumps { gap:16px; }
 .recipe-jumps .button { padding:12px 20px; }
 .product-page .product-detail { grid-template-columns:1fr; }
 .detail-visual img { height:540px; max-height:none; padding:16px; }
 .faq-photo { height:380px; }
 .branch-canvas { min-height:360px; }
 .product-suggestions .product-visual { height:270px; }
}
/* Primary access to every secondary page, with native disclosure behavior. */
.nav-more { position:relative; }
.nav-more summary { display:flex; align-items:center; gap:8px; padding:9px 16px; font-size:13px; font-weight:650; cursor:pointer; list-style:none; white-space:nowrap; }
.nav-more summary::-webkit-details-marker { display:none; }
.nav-more summary .icon { width:15px; height:15px; transition:transform .2s; }
.nav-more[open] summary .icon { transform:rotate(180deg); }
.nav-more.is-current summary { color:white; }
.nav-more-panel { position:absolute; top:calc(100% + 16px); inset-inline-end:0; width:310px; padding:12px; border-radius:16px; background:var(--paper); box-shadow:0 12px 35px #0002; border:1px solid var(--line); }
.nav .nav-more-panel a { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 12px; white-space:normal; font-size:13px; border-radius:8px; }
.nav .nav-more-panel a[aria-current] { color:var(--red); background:#eee; }
.section-navigation { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding-block:16px; border-bottom:1px solid var(--line); }
.section-navigation>span { font-weight:700; font-size:12px; margin-inline-end:12px; }
.section-navigation a { padding:9px 14px; border-radius:24px; font-size:12px; }
.section-navigation a[aria-current] { color:white; background:var(--red); }
.section-navigation a:hover:not([aria-current]) { background:#e8e8e8; }
@media(min-width:701px) and (max-width:1150px) {
 .nav a { padding-inline:10px; font-size:12px; }
 .site-header { gap:12px; padding-inline:2%; }
 .header-actions { gap:12px; }
 .nav-more summary { padding-inline:10px; font-size:12px; }
 .shop-button { padding-inline:16px; }
}
@media(max-width:700px) {
 .nav { max-height:calc(100svh - 76px); overflow-y:auto; }
 .nav-more { width:100%; }
 .nav-more summary { justify-content:space-between; padding:14px 20px; }
 .nav-more-panel { position:static; width:100%; box-shadow:none; border:0; padding:0 12px 12px; background:#eee; }
 .nav-more.is-current summary { color:var(--red); }
 .section-navigation { gap:4px; padding-block:12px; }
 .section-navigation>span { width:100%; margin-bottom:4px; }
 .section-navigation a { padding:8px 10px; font-size:11px; }
}
/* Dedicated photographs belong to one editorial slot each. */
.editorial-photo { display:block; width:100%; height:100%; object-fit:cover; }
.story-art { overflow:hidden; border-radius:16px; }
.story-art .year { font-size:80px; background:#781d2bc9; border-radius:8px; padding:12px 20px; width:fit-content; }
.quality-photo .editorial-photo { object-fit:cover; }
.contact-photo { height:420px; object-fit:cover; border-radius:16px; margin-bottom:40px; }
.company-photo { height:460px; object-fit:cover; border-radius:16px; margin:32px 0 40px; }
@media(max-width:700px) {
 .contact-photo,.company-photo { height:320px; margin-bottom:28px; }
 .story-art .year { font-size:64px; }
}
.faq-photo.editorial-photo { height:430px; }
@media(max-width:700px) { .faq-photo.editorial-photo { height:380px; } }
.recipe-image.editorial-photo { height:auto; aspect-ratio:1.2; object-fit:cover; }
.recipe-card:not(:has(img)) { padding:24px; border:1px solid var(--line); border-radius:12px; }

/* Floating glass navigation and image-free benefit cards. */
:root { --header-inset:16px; --header-height:86px; --header-clearance:114px; }
.site-header {
  top:var(--header-inset); height:var(--header-height);
  width:calc(100% - 48px); max-width:1600px;
  margin:var(--header-inset) auto 12px; padding-inline:24px;
  border:1px solid rgba(255,255,255,.85); border-radius:28px;
  background:rgba(250,248,248,.76);
  backdrop-filter:blur(18px) saturate(135%);
  -webkit-backdrop-filter:blur(18px) saturate(135%);
  box-shadow:0 8px 32px #3020270c, inset 0 1px 0 #fff;
}
.site-header .nav { background:rgba(255,255,255,.35); }
.site-header .nav-more-panel {
  background:rgba(250,248,248,.96); border-color:#fff;
  border-radius:20px; box-shadow:0 16px 40px #30202718;
}
.hero { top:var(--header-clearance); height:calc(100svh - var(--header-clearance)); }
html { scroll-padding-top:calc(var(--header-clearance) + 20px); }
.quality-bento {
  position:relative; isolation:isolate; display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr)); gap:18px;
  padding:20px; margin-top:40px; border-radius:36px;
  background:radial-gradient(ellipse at 5% 15%,#ead2d9 0,transparent 55%),radial-gradient(ellipse at 95% 90%,#e8d9cf 0,transparent 60%),#eeecee;
}
.quality-bento .quality-card {
  grid-column:span 5; min-height:230px; padding:32px;
  border:1px solid #ffffffd9; border-radius:24px;
  background:rgba(255,255,255,.56);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 #fff,0 8px 24px #462b3505;
  display:flex; flex-direction:column; align-items:flex-start;
}
.quality-bento .quality-card:first-child,
.quality-bento .quality-card:last-child { grid-column:span 7; }
.quality-bento .quality-card:first-child { background:rgba(255,246,248,.66); }
.quality-bento .quality-icon {
  width:56px; height:56px; margin-bottom:24px;
  border:1px solid #fff; background:#ffffffa6; color:var(--red); border-radius:18px;
}
.quality-bento h3 { font-size:clamp(24px,2.3vw,34px); line-height:1.35; margin:0 0 10px; }
.quality-bento p { max-width:46ch; font-size:15px; line-height:1.9; margin:0; color:#62585c; }
@media (min-width:701px) and (max-width:1150px) {
  .site-header { width:calc(100% - 32px); padding-inline:14px; gap:10px; }
  .site-header .nav > a { padding-inline:8px; }
  .site-header .nav-more summary { padding-inline:9px; font-size:12px; }
}
@media (max-width:700px) {
  :root { --header-inset:12px; --header-height:72px; --header-clearance:96px; }
  .site-header { width:calc(100% - 24px); padding-inline:14px; border-radius:22px; gap:10px; }
  .site-header .nav {
    top:calc(100% + 10px); inset-inline:0; width:100%;
    max-height:calc(100svh - 118px); padding:14px;
    border:1px solid #fff; border-radius:22px;
    background:rgba(250,248,248,.97); box-shadow:0 16px 40px #30202718;
  }
  .site-header .nav-more-panel { background:#ffffff70; box-shadow:none; }
  .quality-bento { grid-template-columns:1fr; padding:10px; gap:12px; border-radius:28px; }
  .quality-bento .quality-card,
  .quality-bento .quality-card:first-child,
  .quality-bento .quality-card:last-child { grid-column:auto; min-height:0; padding:26px; border-radius:20px; }
  .quality-bento .quality-icon { margin-bottom:18px; }
}
@supports not (backdrop-filter:blur(1px)) {
  .site-header { background:#faf8f8; }
  .quality-bento .quality-card { background:#fff9fb; }
}
@media (prefers-reduced-motion:reduce) {
  .hero { top:0; }
}
@media (min-width:701px) and (max-width:1000px) {
  .site-header .menu-toggle { display:grid; width:38px; height:38px; }
  .site-header .nav {
    display:flex; flex-direction:column; position:absolute;
    top:calc(100% + 10px); inset-inline:0; width:100%;
    max-height:calc(100svh - 134px); overflow-y:auto; padding:14px;
    border:1px solid #fff; border-radius:22px;
    background:rgba(250,248,248,.97); box-shadow:0 16px 40px #30202718;
    opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-10px);
    transition:opacity .2s,transform .25s,visibility .25s;
  }
  .site-header .nav.open { opacity:1; visibility:visible; pointer-events:auto; transform:none; }
  .site-header .nav .liquid { display:none; }
  .site-header .nav a { padding:12px 18px; font-size:16px; border-radius:12px; }
  .site-header .nav a[aria-current] { color:var(--red); background:#f1e6e9; }
  .site-header .nav-more { width:100%; }
  .site-header .nav-more summary { padding:12px 18px; font-size:16px; }
  .site-header .nav-more-panel { position:static; width:100%; box-shadow:none; border:0; padding:0 12px 12px; background:#ffffff70; }
}

/* Keep the homepage FAQ in one reading column, without an oversized sidebar. */
.faq-summary .faq-layout {
  display:flex; flex-direction:column; gap:0;
  max-width:1000px; margin-inline:auto; padding:clamp(24px,4vw,48px);
  border:1px solid #fff; border-radius:28px;
  background:rgba(255,255,255,.58); box-shadow:0 8px 32px #30202708;
}
.faq-summary .faq-intro { position:static; width:100%; display:flex; flex-direction:column; }
.faq-summary .section-symbol { display:none; }
.faq-summary .faq-intro h2 { font-size:clamp(28px,3.3vw,42px); line-height:1.4; margin-bottom:10px; text-wrap:balance; }
.faq-summary .faq-intro h2 br { display:none; }
.faq-summary .faq-intro > p { margin-bottom:0; }
.faq-summary .faq-tabs {
  display:flex; flex-direction:row; flex-wrap:wrap; max-width:none;
  gap:8px; margin:24px 0 16px;
}
.faq-summary .faq-tabs button {
  flex:0 1 auto; min-height:46px; padding:10px 16px; gap:9px;
  font-size:14px; white-space:normal; border:1px solid var(--line); border-radius:14px;
  background:transparent;
}
.faq-summary .faq-tabs button.active { color:#fff; background:var(--red); border-color:var(--red); }
.faq-summary .faq-tabs button:not(.active):hover { background:#f1e6e9; }
.faq-summary .faq-contact { order:4; padding:0 0 24px; }
.faq-summary #faq-list { width:100%; min-height:0; }
.faq-summary .faq-question { padding:23px 0; font-size:17px; gap:16px; }
.faq-summary .faq-question > span:nth-child(2) { min-width:0; }
.faq-summary .faq-toggle { background:#f1e6e9; color:var(--red); }
.faq-summary .is-open .faq-toggle { background:var(--red); color:#fff; }
.faq-summary .faq-item .answer-shell p { max-width:78ch; padding-inline:36px; padding-bottom:24px; }
@media (max-width:700px) {
  .faq-summary .faq-layout { padding:22px 18px; border-radius:22px; }
  .faq-summary .faq-tabs { gap:8px; }
  .faq-summary .faq-tabs button { flex:1 1 140px; justify-content:center; padding:10px; font-size:12px; }
  .faq-summary .faq-question { font-size:15px; gap:10px; padding:20px 0; }
  .faq-summary .faq-item .answer-shell p { padding-inline:0; }
}