/* Shared layout for the standalone products, recipes and FAQ pages. */
.content-page { color-scheme: light; color: var(--green); background: #faf6ed; }
.content-page .story-header { max-width: 1480px; margin-inline: auto; padding: 28px 5.4%; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid #d8cdb7; }
.content-page .story-header .brand { color: var(--green); }
.content-page .top-nav a:hover, .content-page .top-nav a[aria-current="page"] { color: #86602b; }
.content-page.mobile-menu-ready .menu-toggle { color: var(--green); border-color: #102b2350; }
.page-skip { position: absolute; top: 8px; left: 8px; z-index: 10; transform: translateY(-180%); padding: 10px 18px; color: var(--cream); background: var(--green); }
.page-skip:focus { transform: none; }
.content-page h1 { font: 700 clamp(36px, 4.5vw, 60px)/1.15 var(--font-display); letter-spacing: -.7px; margin: 0; text-wrap: balance; }
.content-page h1 em { color: #9a6c2c; font-style: normal; }
.content-page main { min-height: 55svh; }
.content-page main > section { padding-top: clamp(36px, 5vw, 64px); border-top: 0; }
.products-page { background: #eef1e7; }
.products-page .masala-heading { border-top: 0; padding-top: 0; }
.products-page .masala-track { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; scroll-snap-type: none; row-gap: 40px; }
.products-page .carousel-footer, .products-page .carousel-arrows { display: none; }
.faqs-page { background: #eef1e7; }
.faqs-page .faqs-inner header { margin-bottom: 30px; }
.content-page a:focus-visible { outline-color: #86602b; }
.content-page .site-footer a:focus-visible, .content-page .mobile-navigation a:focus-visible { outline-color: var(--gold); }
@media (max-width: 1000px) { .products-page .masala-track { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .content-page .story-header { padding: 22px 7%; flex-wrap: wrap; gap: 16px; }.content-page.mobile-menu-ready .story-header { flex-wrap: nowrap; }.content-page .story-header .brand { font-size: 39px; } }
@media (max-width: 600px) { .products-page .masala-track { grid-template-columns: minmax(0, 1fr); } }