/* Shared responsive layer. Load after style.css and shop.css. */
:root{
  --page-gutter:clamp(1rem,4vw,3rem);
  --content-max:82rem;
  --container-width:min(var(--content-max),calc(100% - var(--page-gutter) * 2));
  --section-padding:clamp(3rem,7vw,7.5rem);
}
html{scroll-padding-top:5.5rem}
img,video,svg,canvas{max-width:100%}
img,video{height:auto}
iframe{max-width:100%}
button,input,select,textarea{font:inherit}
input,select,textarea{max-width:100%}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
h1,h2,h3,p,li,a{overflow-wrap:break-word}
.container,.hero-inner{width:var(--container-width);max-width:var(--content-max);margin-inline:auto}
.hero-inner>*,.intro-grid>*,.contact-grid>*,.faq-grid>*,.product-catalog-layout>*,.rice-detail>*{min-width:0}
.topbar{gap:1rem;padding-inline:var(--page-gutter)}
.nav{gap:clamp(.75rem,1.8vw,2rem)}
.hero{min-height:100svh}
.hero h1{font-size:clamp(3rem,8vw,8.7rem)}
.hero-inner .hero-product{min-height:0}
.intro-grid,.contact-grid,.faq-grid{gap:clamp(1.5rem,5vw,4.5rem)}
.intro-grid{grid-template-columns:minmax(0,1fr);text-align:left;justify-items:stretch;align-items:center}
.intro-grid>div{max-width:none}
.intro .display{font-size:clamp(2.3rem,4vw,4.5rem);line-height:1.08;margin:1rem 0 0}
.intro .bodycopy{margin:0;max-width:36rem;line-height:1.8}
.intro .mini-rule{justify-content:flex-start}
@media(min-width:769px){.intro-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(2rem,6vw,6rem)}}
.hero-actions,.market-row,.contact-actions,.footer-bottom{flex-wrap:wrap}
.form-row{min-width:0}
.shop-products{grid-template-columns:minmax(0,1fr);gap:clamp(1rem,3vw,2rem)}
.rice-card{padding:clamp(1.25rem,3vw,2rem)}
.rice-card img{height:clamp(15rem,45vw,23rem);object-fit:contain}
.shop-heading h2{font-size:clamp(2.4rem,5vw,4.5rem)}
.shop-controls{flex-wrap:wrap}
.compare>.container,.package-details>.details-grid{width:var(--container-width);max-width:var(--content-max)}
.compare-frame,.back-image{max-width:70rem}
.compare-head,.details-copy{width:100%;min-width:0}
.compare-head{flex-wrap:wrap}
.compare-head>div{flex:1 1 16rem}
.compare-head>p{flex:1 1 20rem}
.product-catalog-layout{grid-template-columns:minmax(0,1fr);gap:2rem}
.product-catalog-layout .rice-catalog{position:static}
.product-catalog-layout .catalog-grid{display:flex;flex-wrap:wrap;gap:.75rem}
.product-catalog-layout .catalog-card{flex:1 1 9rem;padding:1rem}
.product-catalog-layout .rice-detail{grid-template-columns:minmax(0,1fr);gap:2rem}
.rice-detail>img{max-height:clamp(20rem,55vh,40rem);object-fit:contain}
.cart-dialog{width:min(36rem,calc(100% - 2rem));max-height:calc(100dvh - 2rem)}
.cart-item{grid-template-columns:3.5rem minmax(0,1fr)}
.cart-actions{flex-wrap:wrap}
.cart-header{gap:1rem}
.cart-close{flex:none;min-width:2.75rem;min-height:2.75rem}
.footer{padding-bottom:7rem}
.js .story-stage{height:max(100svh,44rem)}
.process-controls{flex-wrap:wrap}
.js .story-stage>.process-controls{position:absolute;left:4%;right:4%;bottom:5.5rem;width:auto;margin:0;z-index:5}
.js .story-stage>.process-nav{position:absolute;left:4%;right:4%;bottom:4rem;width:auto;margin:0;z-index:5}
.js .story-stage>.process{position:absolute;inset:5.5rem 4% 10rem;width:auto;max-width:none;margin:0}
.js .story-stage .pstep-text{padding-top:0}
.process-controls button{font-size:clamp(.75rem,1.2vw,.9rem)}
.story-stage .pstep-media{align-items:center;justify-content:center;overflow:hidden}
.story-stage .pstep-media img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;object-position:center}
.story-stage .process-nav{min-width:0}

/* Small screens: leave the floating store buttons clear of the text. */
@media(max-width:768px){
  .js .story-stage>.process{inset:5.5rem 4rem 10rem 1rem}
  .js .story-stage>.process-controls{left:1rem;right:4rem;bottom:6.5rem}
  .js .story-stage>.process-nav{left:1rem;right:4rem;bottom:5.5rem}
  .hero{padding-top:6rem;min-height:auto}
  .hero-inner{gap:1.5rem}
  .hero h1{font-size:clamp(3rem,11vw,5rem)}
  .hero p{font-size:1rem}
  .hero-inner .hero-product{padding-block:1rem}
  .intro-grid,.faq-grid,.contact-grid,.form-row{grid-template-columns:minmax(0,1fr)}
  .buy-float{right:.5rem}
  .buy-float a{width:2.25rem;height:2.25rem}
  .buy-float .buy-float-links{gap:.5rem}
  .js .story-stage{padding-top:5.5rem;padding-bottom:6.5rem}
  .story-stage>.container,.process-controls{width:calc(100% - 5rem);margin-left:1rem;margin-right:4rem}
  .story-stage .pstep h3{font-size:clamp(1.25rem,4.5vw,1.8rem)}
  .story-stage .pstep-tag{white-space:normal;line-height:1.4}
  .story-stage .pstep p{font-size:.9rem;line-height:1.5}
  .process-controls{gap:.4rem}
  .process-controls button{padding:.6rem .8rem}
  .shop-page{padding-top:2rem}
  .rice-detail h1{font-size:clamp(2rem,7vw,3rem)}
  .shop-page header>a:first-child{font-size:clamp(1.5rem,5vw,1.9rem)}
  .compare-frame,.back-image{width:100%}
  .zoom-hint{max-width:calc(100% - 1.5rem)}
}
@media(max-width:480px){
  .hero-actions .btn{flex:1 1 100%}
  .shop-controls label{flex:1 1 6rem}
  .shop-controls select{min-width:0;width:100%}
  .shop-controls input{width:100%}
  .shop-cart-toggle{padding:.75rem 1rem;font-size:.85rem}
  .whatsapp-float{width:3.5rem;height:3.5rem}
  .compare h2,.details-copy h2{font-size:clamp(1.8rem,7vw,2.4rem)}
  .rice-card h3{font-size:1.6rem}
  .cart-dialog{padding:1rem}
  .cart-header{top:-1rem}
  .contact-details{overflow-wrap:anywhere}
}

/* Expand only when the content has enough room. */
@media(min-width:48.0625rem){
  .shop-products{grid-template-columns:repeat(2,minmax(0,1fr))}
  .product-catalog-layout{grid-template-columns:minmax(9rem,13rem) minmax(0,1fr);gap:clamp(1.5rem,3vw,3rem)}
  .product-catalog-layout .rice-catalog{position:sticky;top:1.5rem}
  .product-catalog-layout .catalog-grid{display:grid;grid-template-columns:minmax(0,1fr)}
}
@media(min-width:68.75rem){
  .product-catalog-layout .rice-detail{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .rice-detail>img{max-height:42rem}
}
@media(min-width:100rem){
  .hero-inner{gap:4rem}
  .story-stage>.container{max-width:100rem}
  .js .story-stage>.process{left:max(4%,calc((100% - 100rem) / 2));right:max(4%,calc((100% - 100rem) / 2))}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}