/* Readable content type, shared across every route. */
#page-view{padding-top:88px}
#page-view .eyebrow{font-size:14px;line-height:1.5;letter-spacing:.06em;color:#647158}
#page-view .text-link{font-size:16px;line-height:1.45;min-height:44px;align-items:center}
#page-view .button{font-size:16px;min-height:48px}
#page-view .page-topline{font-size:16px;line-height:1.5;gap:20px}
.page-topline>a{padding:8px 0}
#page-view .page-topline>span{font-size:14px;letter-spacing:.03em}
#page-view .page-hero>p{font-size:18px;line-height:1.6;max-width:580px}
#page-view .shop-toolbar,#page-view .shop-toolbar span,#page-view .shop-toolbar select{font-size:16px}
.shop-toolbar select{padding:12px 16px}
#page-view .shop-card-info>p{font-size:16px;line-height:1.5;min-height:48px;margin:12px 0 18px}
#page-view .shop-card-info .card-price small{display:block;font-size:14px;line-height:1.4;margin-top:5px}
#page-view .quick-add{font-size:16px;min-height:44px;white-space:nowrap}
#page-view .shop-note p{font-size:17px;line-height:1.6;max-width:580px}
#page-view .pdp-copy>.pdp-note{font-size:19px;line-height:1.6}
#page-view .taste-tags span{font-size:14px;padding:8px 12px}
#page-view .pdp-price{align-items:center;flex-wrap:wrap;gap:12px 18px}
#page-view .pdp-price span{font-size:16px}
#page-view .quantity-control output{font-size:16px}
#page-view .quantity-control button{height:46px;min-width:34px;font-size:18px}
#page-view .pdp-caption{font-size:14px;line-height:1.5}
#page-view .pdp-copy summary{font-size:18px;line-height:1.4}
#page-view .pdp-copy details p{font-size:17px;line-height:1.65}
#page-view .pairings-intro p{font-size:18px;line-height:1.6;margin-top:20px;max-width:300px}
#page-view .pairing-list button{font-size:16px;min-height:48px}
#page-view .use-stage .gallery-caption p{font-size:17px;line-height:1.6}
#page-view .use-stage .gallery-caption h3{font-size:32px}
#page-view .guide-hero p,#page-view .guide-body>p{font-size:18px;line-height:1.65}
#page-view .sankalp-topline{font-size:14px;line-height:1.5;letter-spacing:.04em;color:#647158}
#page-view .sankalp-hero-copy p{font-size:18px;line-height:1.65}
#page-view .sankalp-vow p,#page-view .principle-rows p,#page-view .sankalp-ingredients p{font-size:17px;line-height:1.65}
#page-view .sankalp-photo-number{font-size:14px}
#page-view .principle-number,#page-view .ingredient-index-number{font-size:14px;color:#647158}
#page-view .ingredient-index small{font-size:14px;letter-spacing:.04em;color:#647158}
#page-view .sankalp-end>.eyebrow{font-size:14px}
#toast{font-size:16px;line-height:1.5}
/* Recipe cards provide one clear route into the full recipe. */
.recipe-card>a{display:flex;flex-direction:column;height:100%}
.recipe-card-meta{display:flex;justify-content:space-between;gap:14px;margin:20px 0 12px;font-size:15px;line-height:1.5;color:var(--muted)}
#page-view .recipe-card h2{font-size:30px;line-height:1.1;letter-spacing:-.035em}
#page-view .recipe-card p{font-size:17px;line-height:1.6;margin:14px 0 19px}
#page-view .recipe-card .text-link{margin-top:auto;align-self:flex-start}
/* Cooking view: overview, ingredients to gather, then numbered method. */
.recipe-page{max-width:1500px;margin:auto;padding:30px 6vw 90px}
.recipe-intro{grid-template-columns:1fr 1.05fr;gap:7vw;padding:18px 0 60px;align-items:center}
.recipe-intro-copy{max-width:540px}
#page-view .recipe-intro h1{font-size:clamp(48px,5.1vw,74px);line-height:1.03;letter-spacing:-.05em;margin:0 0 23px}
#page-view .recipe-intro p{font-size:19px;line-height:1.6;margin:0;color:var(--muted)}
.recipe-intro>img{height:auto;aspect-ratio:1.12;object-fit:cover;border-radius:16px}
.recipe-facts{display:flex;flex-wrap:wrap;gap:24px 40px;margin:28px 0 32px;padding:21px 0;border-block:1px solid var(--line)}
.recipe-facts dt{font-size:14px;line-height:1.4;color:var(--muted);margin-bottom:7px}
.recipe-facts dd{font-size:18px;line-height:1.5;margin:0}
.recipe-facts a{border-bottom:1px solid #81916f;padding-bottom:3px}
.recipe-intro .button{gap:40px}
.recipe-method{scroll-margin-top:112px;grid-template-columns:minmax(260px,.85fr) minmax(0,1.25fr);gap:8vw;padding-top:48px;align-items:start}
.recipe-ingredients{position:sticky;top:112px}
#page-view .recipe-method h2{font-size:34px;line-height:1.1;letter-spacing:-.035em;margin-bottom:22px}
#page-view .recipe-method .ingredients-hint{font-size:16px;color:var(--muted);line-height:1.5;margin:-9px 0 20px}
#page-view .recipe-method .ingredient-checklist{padding:0;list-style:none;color:var(--ink)}
.ingredient-checklist li{border-bottom:1px solid var(--line)}
.ingredient-checklist label{display:flex;align-items:baseline;gap:13px;padding:15px 0;cursor:pointer;font-size:17px;line-height:1.55}
.ingredient-checklist input{position:relative;top:2px;appearance:auto;width:18px;height:18px;accent-color:var(--ink);flex:0 0 18px;margin:0;cursor:pointer}
.ingredient-checklist input:checked+span{text-decoration:line-through;color:var(--muted)}
#page-view .recipe-steps ol li{font-size:18px;line-height:1.7;padding:7px 0 30px 55px;margin-bottom:24px}
#page-view .recipe-steps ol li:before{font-size:16px;line-height:1.5;top:7px;color:#61734e}
.recipe-product{margin-top:32px;padding:22px;gap:20px;transition:background .2s}
.recipe-product img{width:62px;flex:0 0 62px;object-fit:contain}
#page-view .recipe-product h3{font-size:22px;line-height:1.2}
#page-view .recipe-product p{font-size:16px;line-height:1.5;margin:7px 0 5px}
/* Collection keeps the original scroll distance, without an empty viewport tail. */
.experience{margin-bottom:calc(-1 * var(--collection-tail,0px))}
.everyday-section{position:relative;z-index:20}
/* Bag: compact header, scrollable items, stable summary. */
.bag-dialog{padding:0;width:480px;max-width:100vw;height:100dvh;max-height:100dvh;overflow:hidden;background:var(--paper)}
.bag-dialog[open]{display:flex;flex-direction:column;animation:bag-enter .28s cubic-bezier(.2,.7,.2,1)}
.bag-dialog::backdrop{background:#182c2077;backdrop-filter:blur(2px)}
.bag-header{position:relative;display:flex;align-items:center;justify-content:space-between;padding:30px 28px 24px;border-bottom:1px solid var(--line);flex:none}
.bag-dialog .bag-header h2{font-size:32px;line-height:1.1;letter-spacing:-.04em;margin:0}
.bag-header p{font-size:16px;line-height:1.5;color:var(--muted);margin-top:7px}
.bag-header .dialog-close{position:static;width:44px;height:44px;background:#e9eddf;font-size:29px;font-weight:400;flex:none}
#bag-items{flex:1;overflow:auto;overscroll-behavior:contain;padding:0 28px;min-height:0}
.bag-item{align-items:center;gap:18px;padding:24px 0;border-top:0;border-bottom:1px solid var(--line)}
.bag-item:last-child{border-bottom:0}
.bag-item-image{flex:0 0 76px;width:76px;height:108px;border-radius:12px;display:grid;place-items:center;background:var(--tint)}
.bag-item-image img{width:55px;height:79px;object-fit:contain;border-radius:3px;filter:drop-shadow(2px 4px 3px #263c2b20)}
.bag-item-copy{min-width:0;flex:1}
.bag-item-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.bag-item h3{font-size:20px;line-height:1.2;letter-spacing:-.03em}
.bag-item-top strong{font-size:22px;line-height:1.2;letter-spacing:-.03em;font-weight:500;white-space:nowrap}
.bag-item p{font-size:15px;line-height:1.5;margin:9px 0 12px;color:var(--muted)}
.bag-item-controls{display:flex;align-items:center;justify-content:space-between;gap:12px}
.bag-quantity{gap:0;border:1px solid #b6bfa7;border-radius:24px;width:112px;justify-content:space-between;flex:none;font-size:16px}
.bag-quantity button{width:36px;height:42px;border:0;border-radius:50%;font-size:19px}
.bag-quantity span{min-width:24px;text-align:center;font-size:16px}
.bag-remove{font-size:14px;min-height:44px;color:var(--muted);text-decoration:underline;text-underline-offset:4px}
.bag-summary{padding:22px 28px 28px;border-top:1px solid var(--line);background:#eff0e5;flex:none}
.bag-summary[hidden]{display:none}
.bag-subtotal{border:0;font-size:23px;line-height:1.3;padding:0}
.bag-tax-note{font-size:14px;line-height:1.5;color:var(--muted);margin-top:7px}
.bag-summary .prototype-note{font-size:16px;line-height:1.5;margin:22px 0}
.bag-summary .button{width:100%;font-size:16px;min-height:48px;justify-content:space-between}
.empty-bag{min-height:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:35px 0 55px}
.empty-bag svg{width:52px;height:52px;fill:none;stroke:#6b7e55;stroke-width:1.3;margin-bottom:25px}
.empty-bag h3{font-size:28px;line-height:1.2;letter-spacing:-.035em}
.empty-bag p{font-size:17px;line-height:1.6;color:var(--muted);margin:14px 0 28px}
.empty-bag .button{font-size:16px;min-height:48px}
@keyframes bag-enter{from{transform:translateX(100%)}to{transform:translateX(0)}}
@media(min-width:701px) and (max-width:1100px){
 .ideas-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 #page-view .shop-card-info h2{font-size:28px}
 .recipe-intro{gap:5vw}.recipe-method{gap:5vw}
}
@media(max-width:700px){
 #page-view{padding-top:78px}
 #page-view .page-topline{font-size:16px;align-items:flex-start;flex-wrap:wrap;margin-bottom:22px}
 #page-view .page-topline>span{display:none}
 #page-view .page-hero{padding-top:38px;padding-bottom:35px}
 #page-view .page-hero h1{font-size:48px;line-height:1.04}
 #page-view .page-hero>p{font-size:17px;max-width:100%;margin-top:22px}
 #page-view .shop-toolbar{align-items:flex-start;gap:12px;flex-wrap:wrap}
 #page-view .shop-toolbar span{padding-top:12px}
 #page-view .shop-toolbar select{font-size:15px;max-width:190px}
 #page-view .shop-card-info h2,#page-view .related-grid .shop-card-info h2{font-size:24px;line-height:1.15}
 #page-view .shop-card-info>p{font-size:16px;min-height:72px;margin:10px 0 15px}
 #page-view .shop-card-info .card-price{align-items:center;gap:8px;font-size:22px}
 #page-view .shop-card-info .card-price small{font-size:14px;display:block}
 #page-view .quick-add{font-size:16px}
 #page-view .shop-note p{font-size:17px}
 #page-view .pdp-copy>.eyebrow{letter-spacing:.03em}
 #page-view .pdp-copy h1{font-size:60px}
 #page-view .pdp-price span{font-size:16px}
 #page-view .pdp-buy .button{font-size:16px;padding:12px 18px;gap:16px}
 #page-view .pdp-caption{font-size:14px}
 #page-view .pdp-pairings h2{font-size:38px;line-height:1.1}
 #page-view .pairings-intro p{font-size:17px;max-width:100%}
 #page-view .use-stage .gallery-caption p{font-size:17px}
 #page-view .sankalp-topline{font-size:14px;letter-spacing:0;gap:24px}
 #page-view .sankalp-topline>span:first-child{max-width:130px;line-height:1.5}
 #page-view .sankalp-topline>span:last-child{max-width:165px;line-height:1.5}
 #page-view .sankalp-hero-copy p{font-size:18px}
 #page-view .sankalp-hero-copy .hindi-word{font-size:42px}
 #page-view .sankalp-photo-note .eyebrow{font-size:14px}
 #page-view .sankalp-photo-note{padding:17px 20px}
 #page-view .principle-rows p,#page-view .sankalp-ingredients p,#page-view .sankalp-vow p{font-size:17px}
 #page-view .ingredient-index small{font-size:14px}
 #page-view .guide-hero p,#page-view .guide-body>p{font-size:17px}
 .recipe-card-meta{font-size:15px;margin:18px 0 11px}
 #page-view .recipe-card h2{font-size:30px}
 #page-view .recipe-card p{font-size:17px}
 .recipe-page{padding:22px 6vw 55px}
 .recipe-intro{grid-template-columns:1fr;gap:30px;padding:3px 0 38px}
 .recipe-intro-copy{max-width:none}
 #page-view .recipe-intro h1{font-size:47px;margin-bottom:20px}
 #page-view .recipe-intro p{font-size:18px}
 .recipe-facts{gap:22px 30px;margin:25px 0}
 .recipe-facts dd{font-size:18px}
 .recipe-intro>img{height:auto;aspect-ratio:4/3;border-radius:12px}
 .recipe-method{grid-template-columns:1fr;gap:40px;padding-top:33px;scroll-margin-top:100px}
 .recipe-ingredients{position:static}
 #page-view .recipe-method h2{font-size:32px}
 #page-view .recipe-steps ol li{font-size:18px;padding-left:44px;margin-bottom:21px}
 .recipe-product{padding:22px;margin-top:28px}
 .bag-dialog{border-radius:0}
 .bag-header{padding:25px 22px 22px}
 #bag-items{padding-inline:22px}
 .bag-item{gap:14px;padding:22px 0}
 .bag-item-image{width:65px;height:98px;flex-basis:65px}
 .bag-item-image img{width:49px;height:70px}
 .bag-item h3{font-size:19px}
 .bag-item-top strong{font-size:21px}
 .bag-summary{padding:22px 22px max(24px,env(safe-area-inset-bottom))}
}
@media(max-width:360px){
 .bag-item-image{width:54px;flex-basis:54px;height:90px}.bag-item-image img{width:44px;height:63px}.bag-item-top{flex-wrap:wrap;gap:5px}.bag-item-controls{gap:5px}.bag-quantity{width:102px}
 #page-view .shop-card-info h2{font-size:22px}#page-view .shop-card-info .card-price{flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){.experience{margin-bottom:0}.bag-dialog[open]{animation:none}}

/* Route focus announces the page without drawing a box around its headline. */
#page-view h1[tabindex="-1"]:focus{outline:none}
/* Give use photography its own space, with readable captions beneath. */
#page-view .use-stage{height:510px;border-radius:12px;background:#edf0e2}
#page-view .use-stage .gallery-frame{display:grid;grid-template-rows:minmax(0,1fr) auto;background:#edf0e2}
#page-view .use-stage .gallery-photo{min-height:0;object-fit:cover}
#page-view .use-stage .gallery-shade{display:none}
#page-view .use-stage .gallery-caption{position:static;max-width:none;width:auto;padding:23px 26px;background:#edf0e2;border:0;border-radius:0;backdrop-filter:none}
#page-view .use-stage .gallery-caption h3{font-size:28px;margin:0 0 10px}
#page-view .use-stage .gallery-caption p{font-size:17px;line-height:1.55}
#page-view .use-stage .gallery-caption .text-link{margin-top:10px;min-height:36px}
#page-view .use-stage .is-label .gallery-photo{width:100%;height:100%;padding:20px;object-fit:contain;object-position:center}
@media(max-width:700px){#page-view .use-stage{height:490px}#page-view .use-stage .gallery-caption{padding:23px}#page-view .use-stage .gallery-caption h3{font-size:28px}#page-view .use-stage .is-label .gallery-caption{width:auto;padding:23px}}
/* Link underlines follow the text baseline rather than the touch target box. */
.action-icon{width:20px;height:20px;display:inline-block;flex:none;vertical-align:middle;overflow:visible}
.text-link,#page-view .text-link{display:inline-flex;align-items:center;gap:7px;border:0;padding:6px 0;min-height:36px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;line-height:1.35}
.page-topline>a,.recipe-facts a{display:inline-flex;align-items:center;gap:8px}
.recipe-facts a{border:0;padding-bottom:0;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.round-link{display:grid;place-items:center}.round-link .action-icon{width:18px;height:18px}
.idea-option-arrow{display:grid;place-items:center}
.idea-option-arrow .action-icon{width:21px;height:21px}
.gallery-recipe>span:last-child{border:0;display:inline-flex;align-items:center;gap:8px;padding-bottom:0;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.gallery-recipe>span:last-child>span{display:inline-flex;align-items:center}
.sankalp-end>a>span,.ingredient-index-arrow{display:inline-flex;align-items:center}
.sankalp-end .action-icon{width:26px;height:26px}
#page-view .pdp-pairings{margin-top:96px;padding-top:66px}
.idea-list{scroll-behavior:auto;padding-bottom:28px}
/* A small ingredient cue ties each recipe to the pack used in it. */
.recipe-card-action{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:auto;padding-top:4px}
#page-view .recipe-card-action .text-link{margin:0;align-self:center}
.recipe-card-pack{display:grid;place-items:center;flex:none;width:40px;height:50px}
.recipe-card .recipe-card-pack img{width:34px;height:49px;object-fit:contain;transform:none;filter:drop-shadow(1px 2px 2px #263c2b15)}
/* Recipe ingredient card has two real actions, with no nested links. */
.recipe-product{display:grid;grid-template-columns:60px minmax(0,1fr);gap:15px 18px;align-items:center;padding:20px;margin-top:32px;border-radius:12px}
.recipe-product-image{display:block;width:60px}
.recipe-product-image img{width:60px;height:86px;object-fit:contain}
#page-view .recipe-product-info h3{font-size:22px;line-height:1.2}
#page-view .recipe-product-info p{font-size:16px;line-height:1.4;margin:9px 0 0}
.recipe-product-actions{display:flex;grid-column:1/-1;align-items:center;justify-content:space-between;gap:14px;padding-top:5px;border-top:1px solid #263c2b25}
#page-view .recipe-product-actions .text-link{font-size:16px;min-height:36px;padding:5px 0;white-space:nowrap}
.recipe-product-actions .action-icon{width:18px;height:18px}
#bag-items:has(.empty-bag){display:grid;place-items:center;padding:35px 28px}
.empty-bag{width:100%;min-height:0;max-width:320px;padding:0;margin:auto;align-items:center;text-align:center}
.empty-bag>svg{width:66px;height:66px;padding:12px;background:#e8eddd;border-radius:20px;margin:0 0 27px}
.empty-bag p{margin:14px 0 27px}
.empty-bag .button{justify-content:center;gap:23px;align-self:center;width:auto}
.empty-bag .button .action-icon{width:20px;height:20px}
@media(max-width:700px){
 #page-view .pdp-pairings{margin-top:66px;padding-top:42px}
 .recipe-product{padding:20px;gap:15px 18px}
 #page-view .recipe-product-actions .text-link{font-size:16px}
 .recipe-product-actions{gap:12px}
 #bag-items:has(.empty-bag){padding:32px 24px}
 #page-view .sankalp-hero-copy h1{font-size:49px;line-height:1.02}
}
@media(max-width:360px){.recipe-product-actions .action-icon{width:16px;height:16px}#page-view .recipe-product-actions .text-link{font-size:15px;gap:5px}}
.empty-bag .button .action-icon{margin:0;padding:0;stroke:currentColor;background:none;border-radius:0}
.recipe-card a:hover .recipe-card-pack img{transform:none}
#page-view .quick-add{border-bottom:0;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;line-height:1.35}
.header nav a:after{bottom:8px}

/* Pack colours identify the ingredient without adding another product image. */
.recipe-card-meta{align-items:center}
.recipe-powder-label{display:inline-flex;align-items:center;min-height:32px;padding:6px 12px;border-radius:7px;background:var(--label-bg);color:var(--label-ink);font-weight:550;line-height:1.3}
.recipe-card-meta>span:last-child{flex:none}