/* v3 mock: product-led blocks. Uses the v2 tokens and the existing .prod card; nothing in main.css is changed. */
/* Homepage: Shop the Rituals */
.sr.section{padding-top:96px;padding-bottom:112px}
.sr .section-head{margin-bottom:20px}
.sr-intro{max-width:40em;margin:0 0 44px;color:var(--mute);font-size:17px}
.sr-row{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:48px 24px}
.sr-row .prod{max-width:none;position:relative}
.prod .prod-name{font-family:var(--serif);font-size:19px;line-height:1.25;margin:8px 0 0;font-weight:400;color:var(--ink)}
.sr-rit{display:block;margin-top:12px;font-family:var(--serif);font-style:italic;font-size:15px;line-height:1.35;color:var(--mute);text-decoration:none!important}
.sr-rit span{display:block;font:600 10px/1.6 var(--sans);font-style:normal;letter-spacing:.2em;text-transform:uppercase;color:var(--mute2);margin-bottom:2px}
.sr-rit:hover{color:var(--brass-ink)}
.sr-ship{margin:48px 0 0;padding-top:18px;border-top:1px solid var(--line);font-size:13px;color:var(--mute)}
@media (max-width:1180px){.sr-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 24px}}
@media (max-width:900px){.sr.section{padding-top:72px;padding-bottom:80px}}
@media (max-width:720px){
 .sr-intro{font-size:15.5px;margin-bottom:28px}
 /* a calm swipe rail on phones: two cards and a hint of the third */
 .sr-row{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:42%;gap:0 14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 calc(-1 * var(--gut));padding:0 var(--gut) 4px;scroll-padding:0 var(--gut)}
 .sr-row::-webkit-scrollbar{display:none}
 .sr-row .prod{scroll-snap-align:start}
 .prod .prod-name{font-size:16.5px}
 .sr-rit{font-size:13.5px}
 .sr-ship{margin-top:32px}
}
/* Articles: Shop this ritual, as product cards */
.prose .sr-box{margin-top:2.6em}
.sr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:36px 20px;margin-top:1.6em!important;padding-top:24px;border-top:1px solid var(--line)}
.sr-grid .prod{max-width:none;position:relative}
.prose .sr-grid .prod-name{font-size:17px;line-height:1.3}
.prose .sr-grid a{text-decoration:none}
.prose .sr-grid .prod-buy{gap:12px;padding-top:12px}
.prose .sr-grid .price{font-size:17px}
@media (min-width:1181px){.prose .sr-box{margin-left:-8vw;margin-right:-8vw;padding:36px 40px}.sr-grid{grid-template-columns:repeat(auto-fill,minmax(172px,1fr))}}
@media (max-width:720px){
 .prose .sr-box{padding:26px 20px}
 .sr-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 14px}
 .prose .sr-grid .prod-name{font-size:15.5px}
 .prose .sr-grid .prod .prod-buy .btn{padding:0 8px;letter-spacing:.12em}
}
/* column count follows the number of products so a row never strands one card */
@media (min-width:721px){.sr-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))!important}.sr-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
@media (min-width:1181px){.sr-grid--5{grid-template-columns:repeat(5,minmax(0,1fr))!important;column-gap:16px}.sr-grid--5 .prod-name{font-size:16px!important}}
@media (min-width:721px) and (max-width:1180px){.sr-grid--5{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
.prose .sr-grid+.box-actions{margin-top:36px;padding-top:24px;border-top:1px solid var(--line)}
@media (max-width:720px){
 /* odd count on phones: the last card runs full width, image left */
 .sr-grid--odd>.prod:last-child{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:14px;align-items:stretch}
 .sr-grid--odd>.prod:last-child .prod-body{padding-top:4px}
 .prose .sr-grid+.box-actions{margin-top:28px}
}
@media (min-width:721px){.sr-grid--6{grid-template-columns:repeat(3,minmax(0,1fr))!important}}