*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Inter,system-ui,-apple-system,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}:root{--focus: #4f8a63}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}body{--tw-bg-opacity: 1;background-color:rgb(252 250 246 / var(--tw-bg-opacity, 1));font-family:Inter,system-ui,-apple-system,sans-serif;--tw-text-opacity: 1;color:rgb(24 33 29 / var(--tw-text-opacity, 1));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3,h4{font-family:Cormorant Garamond,Georgia,serif;--tw-text-opacity: 1;color:rgb(18 62 48 / var(--tw-text-opacity, 1));text-wrap:balance}::-moz-selection{background:#4f8a63;color:#fff}::selection{background:#4f8a63;color:#fff}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:2px}.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.container-site{margin-left:auto;margin-right:auto;width:100%;max-width:80rem;padding-left:1.25rem;padding-right:1.25rem}@media (min-width: 640px){.container-site{padding-left:2rem;padding-right:2rem}}.eyebrow{font-family:Inter,system-ui,-apple-system,sans-serif;font-size:.75rem;line-height:1rem;font-weight:600;text-transform:uppercase;letter-spacing:.18em;--tw-text-opacity: 1;color:rgb(63 115 80 / var(--tw-text-opacity, 1))}.btn{display:inline-flex;min-height:44px;align-items:center;justify-content:center;gap:.5rem;padding-left:1.5rem;padding-right:1.5rem;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:.875rem;line-height:1.25rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}.btn-primary{display:inline-flex;min-height:44px;align-items:center;justify-content:center;gap:.5rem;padding-left:1.5rem;padding-right:1.5rem;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:.875rem;line-height:1.25rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;--tw-bg-opacity: 1;background-color:rgb(18 62 48 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(252 250 246 / var(--tw-text-opacity, 1))}.btn-primary:hover{--tw-bg-opacity: 1;background-color:rgb(9 46 36 / var(--tw-bg-opacity, 1))}.btn-outline{display:inline-flex;min-height:44px;align-items:center;justify-content:center;gap:.5rem;padding-left:1.5rem;padding-right:1.5rem;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:.875rem;line-height:1.25rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;border-width:1px;--tw-border-opacity: 1;border-color:rgb(18 62 48 / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:rgb(18 62 48 / var(--tw-text-opacity, 1))}.btn-outline:hover{--tw-bg-opacity: 1;background-color:rgb(18 62 48 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(252 250 246 / var(--tw-text-opacity, 1))}.btn-light{display:inline-flex;min-height:44px;align-items:center;justify-content:center;gap:.5rem;padding-left:1.5rem;padding-right:1.5rem;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:.875rem;line-height:1.25rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;border-width:1px;border-color:#fcfaf666;--tw-text-opacity: 1;color:rgb(252 250 246 / var(--tw-text-opacity, 1))}.btn-light:hover{--tw-bg-opacity: 1;background-color:rgb(252 250 246 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(18 62 48 / var(--tw-text-opacity, 1))}.link-underline{position:relative;font-weight:600;--tw-text-opacity: 1;color:rgb(18 62 48 / var(--tw-text-opacity, 1))}.link-underline:after{position:absolute;bottom:0;left:0;height:1px;width:100%;transform-origin:left;--tw-scale-x: 0;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));--tw-bg-opacity: 1;background-color:rgb(18 62 48 / var(--tw-bg-opacity, 1));content:var(--tw-content);transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.link-underline:hover:after{content:var(--tw-content);--tw-scale-x: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.card{border-width:1px;border-color:#e9e1d5b3;--tw-bg-opacity: 1;background-color:rgb(252 250 246 / var(--tw-bg-opacity, 1))}.price{font-family:Inter,system-ui,-apple-system,sans-serif;font-weight:600;--tw-numeric-figure: lining-nums;--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);letter-spacing:-.025em;--tw-text-opacity: 1;color:rgb(18 62 48 / var(--tw-text-opacity, 1))}.price-lg{font-size:28px;line-height:1}@media (min-width: 640px){.price-lg{font-size:30px}}.field{width:100%;border-width:1px;--tw-border-opacity: 1;border-color:rgb(233 225 213 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));padding:.75rem 1rem;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(24 33 29 / var(--tw-text-opacity, 1))}.field::-moz-placeholder{color:#5e655fb3}.field::placeholder{color:#5e655fb3}.field:focus{--tw-border-opacity: 1;border-color:rgb(63 115 80 / var(--tw-border-opacity, 1))}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.pointer-events-none{pointer-events:none}.\!visible{visibility:visible!important}.visible{visibility:visible}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{top:0;right:0;bottom:0;left:0}.inset-x-0{left:0;right:0}.inset-y-0{top:0;bottom:0}.-bottom-8{bottom:-2rem}.-right-0\.5{right:-.125rem}.-right-6{right:-1.5rem}.-top-0\.5{top:-.125rem}.bottom-0{bottom:0}.bottom-3{bottom:.75rem}.left-0{left:0}.left-3{left:.75rem}.right-0{right:0}.right-3{right:.75rem}.top-0{top:0}.top-3{top:.75rem}.top-full{top:100%}.isolate{isolation:isolate}.-z-10{z-index:-10}.z-10{z-index:10}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}.col-span-3{grid-column:span 3 / span 3}.col-span-6{grid-column:span 6 / span 6}.col-span-full{grid-column:1 / -1}.m-5{margin:1.25rem}.mx-auto{margin-left:auto;margin-right:auto}.\!mt-10{margin-top:2.5rem!important}.-ml-2{margin-left:-.5rem}.mb-1{margin-bottom:.25rem}.mb-1\.5{margin-bottom:.375rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}.ml-auto{margin-left:auto}.mr-1{margin-right:.25rem}.mr-2{margin-right:.5rem}.mr-3{margin-right:.75rem}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-1\.5{margin-top:.375rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}.mt-14{margin-top:3.5rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-7{margin-top:1.75rem}.mt-8{margin-top:2rem}.mt-auto{margin-top:auto}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.block{display:block}.inline-block{display:inline-block}.\!inline{display:inline!important}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.contents{display:contents}.hidden{display:none}.aspect-\[2\/1\]{aspect-ratio:2/1}.aspect-\[3\/2\]{aspect-ratio:3/2}.aspect-\[4\/3\]{aspect-ratio:4/3}.aspect-\[4\/5\]{aspect-ratio:4/5}.aspect-\[5\/4\]{aspect-ratio:5/4}.aspect-square{aspect-ratio:1 / 1}.h-1{height:.25rem}.h-1\.5{height:.375rem}.h-10{height:2.5rem}.h-11{height:2.75rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-16{height:4rem}.h-2{height:.5rem}.h-2\.5{height:.625rem}.h-20{height:5rem}.h-24{height:6rem}.h-3{height:.75rem}.h-3\.5{height:.875rem}.h-32{height:8rem}.h-4{height:1rem}.h-40{height:10rem}.h-5{height:1.25rem}.h-56{height:14rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-\[52px\]{height:52px}.h-\[70vh\]{height:70vh}.h-fit{height:-moz-fit-content;height:fit-content}.h-full{height:100%}.\!min-h-\[32px\]{min-height:32px!important}.\!min-h-\[36px\]{min-height:36px!important}.\!min-h-\[38px\]{min-height:38px!important}.\!min-h-\[40px\]{min-height:40px!important}.\!min-h-\[42px\]{min-height:42px!important}.\!min-h-\[44px\]{min-height:44px!important}.\!min-h-\[46px\]{min-height:46px!important}.\!min-h-\[52px\]{min-height:52px!important}.min-h-\[26px\]{min-height:26px}.min-h-\[30px\]{min-height:30px}.min-h-\[40px\]{min-height:40px}.min-h-\[44px\]{min-height:44px}.min-h-\[52px\]{min-height:52px}.min-h-screen{min-height:100vh}.\!w-64{width:16rem!important}.\!w-auto{width:auto!important}.w-1\.5{width:.375rem}.w-10{width:2.5rem}.w-11{width:2.75rem}.w-12{width:3rem}.w-14{width:3.5rem}.w-16{width:4rem}.w-2{width:.5rem}.w-2\.5{width:.625rem}.w-24{width:6rem}.w-3{width:.75rem}.w-3\.5{width:.875rem}.w-4{width:1rem}.w-40{width:10rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-7{width:1.75rem}.w-8{width:2rem}.w-9{width:2.25rem}.w-\[72px\]{width:72px}.w-\[86\%\]{width:86%}.w-auto{width:auto}.w-full{width:100%}.min-w-0{min-width:0px}.min-w-\[20px\]{min-width:20px}.min-w-\[560px\]{min-width:560px}.min-w-\[720px\]{min-width:720px}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-lg{max-width:32rem}.max-w-md{max-width:28rem}.max-w-sm{max-width:24rem}.max-w-xl{max-width:36rem}.max-w-xs{max-width:20rem}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.rotate-180{--tw-rotate: 180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes drawerIn{0%{transform:translate(100%)}to{transform:translate(0)}}.animate-drawerIn{animation:drawerIn .3s ease-out both}@keyframes fadeUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.animate-fadeUp{animation:fadeUp .5s ease-out both}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.cursor-pointer{cursor:pointer}.scroll-mt-24{scroll-margin-top:6rem}.scroll-mt-28{scroll-margin-top:7rem}.grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-10{gap:2.5rem}.gap-12{gap:3rem}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-\[3px\]{gap:3px}.gap-x-3{-moz-column-gap:.75rem;column-gap:.75rem}.gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.gap-x-5{-moz-column-gap:1.25rem;column-gap:1.25rem}.gap-y-1{row-gap:.25rem}.gap-y-1\.5{row-gap:.375rem}.gap-y-2{row-gap:.5rem}.gap-y-5{row-gap:1.25rem}.space-y-0\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.125rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.125rem * var(--tw-space-y-reverse))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}.space-y-1\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.375rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.375rem * var(--tw-space-y-reverse))}.space-y-10>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2.5rem * var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.space-y-2\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.625rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.625rem * var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem * var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.space-y-5>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem * var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(2rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem * var(--tw-space-y-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse: 0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse))}.divide-beige>:not([hidden])~:not([hidden]){--tw-divide-opacity: 1;border-color:rgb(233 225 213 / var(--tw-divide-opacity, 1))}.divide-beige\/70>:not([hidden])~:not([hidden]){border-color:#e9e1d5b3}.self-center{align-self:center}.justify-self-start{justify-self:start}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.break-all{word-break:break-all}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-sm{border-radius:.125rem}.rounded-t-\[2px\]{border-top-left-radius:2px;border-top-right-radius:2px}.border{border-width:1px}.border-y{border-top-width:1px;border-bottom-width:1px}.border-b{border-bottom-width:1px}.border-b-2{border-bottom-width:2px}.border-l-2{border-left-width:2px}.border-t{border-top-width:1px}.border-dashed{border-style:dashed}.\!border-\[\#9E4A3A\]{--tw-border-opacity: 1 !important;border-color:rgb(158 74 58 / var(--tw-border-opacity, 1))!important}.border-\[\#9A7422\]\/40{border-color:#9a742266}.border-\[\#9E4A3A\]\/30{border-color:#9e4a3a4d}.border-\[\#9E4A3A\]\/40{border-color:#9e4a3a66}.border-\[\#CF622B\]\/60{border-color:#cf622b99}.border-beige{--tw-border-opacity: 1;border-color:rgb(233 225 213 / var(--tw-border-opacity, 1))}.border-beige\/60{border-color:#e9e1d599}.border-beige\/70{border-color:#e9e1d5b3}.border-botanical\/30{border-color:#3f73504d}.border-botanical\/40{border-color:#3f735066}.border-botanical\/50{border-color:#3f735080}.border-charcoal\/20{border-color:#18211d33}.border-cream\/10{border-color:#fcfaf61a}.border-cream\/15{border-color:#fcfaf626}.border-cream\/20{border-color:#fcfaf633}.border-cream\/25{border-color:#fcfaf640}.border-forest{--tw-border-opacity: 1;border-color:rgb(18 62 48 / var(--tw-border-opacity, 1))}.border-forest\/15{border-color:#123e3026}.border-forest\/20{border-color:#123e3033}.border-forest\/25{border-color:#123e3040}.border-gold{--tw-border-opacity: 1;border-color:rgb(200 166 107 / var(--tw-border-opacity, 1))}.border-gold\/40{border-color:#c8a66b66}.border-gold\/50{border-color:#c8a66b80}.border-gold\/60{border-color:#c8a66b99}.bg-\[\#E8EEF3\]{--tw-bg-opacity: 1;background-color:rgb(232 238 243 / var(--tw-bg-opacity, 1))}.bg-\[\#F6E7E3\]{--tw-bg-opacity: 1;background-color:rgb(246 231 227 / var(--tw-bg-opacity, 1))}.bg-\[\#F6EEDC\]{--tw-bg-opacity: 1;background-color:rgb(246 238 220 / var(--tw-bg-opacity, 1))}.bg-\[\#F8E7DC\]{--tw-bg-opacity: 1;background-color:rgb(248 231 220 / var(--tw-bg-opacity, 1))}.bg-beige{--tw-bg-opacity: 1;background-color:rgb(233 225 213 / var(--tw-bg-opacity, 1))}.bg-beige\/70{background-color:#e9e1d5b3}.bg-botanical{--tw-bg-opacity: 1;background-color:rgb(63 115 80 / var(--tw-bg-opacity, 1))}.bg-botanical\/10{background-color:#3f73501a}.bg-botanical\/15{background-color:#3f735026}.bg-botanical\/5{background-color:#3f73500d}.bg-charcoal{--tw-bg-opacity: 1;background-color:rgb(24 33 29 / var(--tw-bg-opacity, 1))}.bg-charcoal\/15{background-color:#18211d26}.bg-charcoal\/50{background-color:#18211d80}.bg-charcoal\/55{background-color:#18211d8c}.bg-cream{--tw-bg-opacity: 1;background-color:rgb(252 250 246 / var(--tw-bg-opacity, 1))}.bg-cream\/10{background-color:#fcfaf61a}.bg-cream\/90{background-color:#fcfaf6e6}.bg-cream\/95{background-color:#fcfaf6f2}.bg-forest{--tw-bg-opacity: 1;background-color:rgb(18 62 48 / var(--tw-bg-opacity, 1))}.bg-forest\/\[0\.04\]{background-color:#123e300a}.bg-gold{--tw-bg-opacity: 1;background-color:rgb(200 166 107 / var(--tw-bg-opacity, 1))}.bg-gold\/10{background-color:#c8a66b1a}.bg-ivory{--tw-bg-opacity: 1;background-color:rgb(247 244 238 / var(--tw-bg-opacity, 1))}.bg-ivory\/60{background-color:#f7f4ee99}.bg-pine{--tw-bg-opacity: 1;background-color:rgb(9 46 36 / var(--tw-bg-opacity, 1))}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.bg-white\/50{background-color:#ffffff80}.bg-white\/85{background-color:#ffffffd9}.bg-\[linear-gradient\(90deg\,rgba\(247\,244\,238\,0\.97\)_0\%\,rgba\(247\,244\,238\,0\.9\)_30\%\,rgba\(247\,244\,238\,0\.45\)_46\%\,rgba\(247\,244\,238\,0\)_58\%\)\]{background-image:linear-gradient(90deg,#f7f4eef7,#f7f4eee6 30%,#f7f4ee73 46%,#f7f4ee00 58%)}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.from-\[\#1C3A2E\]{--tw-gradient-from: #1C3A2E var(--tw-gradient-from-position);--tw-gradient-to: rgb(28 58 46 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-\[\#DCE7DD\]{--tw-gradient-from: #DCE7DD var(--tw-gradient-from-position);--tw-gradient-to: rgb(220 231 221 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-\[\#EDEAE3\]{--tw-gradient-from: #EDEAE3 var(--tw-gradient-from-position);--tw-gradient-to: rgb(237 234 227 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-\[\#EFE6D6\]{--tw-gradient-from: #EFE6D6 var(--tw-gradient-from-position);--tw-gradient-to: rgb(239 230 214 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.via-\[\#123E30\]{--tw-gradient-to: rgb(18 62 48 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), #123E30 var(--tw-gradient-via-position), var(--tw-gradient-to)}.via-\[\#CBDCCE\]{--tw-gradient-to: rgb(203 220 206 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), #CBDCCE var(--tw-gradient-via-position), var(--tw-gradient-to)}.via-\[\#E2DED4\]{--tw-gradient-to: rgb(226 222 212 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), #E2DED4 var(--tw-gradient-via-position), var(--tw-gradient-to)}.via-\[\#E9E1D5\]{--tw-gradient-to: rgb(233 225 213 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), #E9E1D5 var(--tw-gradient-via-position), var(--tw-gradient-to)}.to-\[\#092E24\]{--tw-gradient-to: #092E24 var(--tw-gradient-to-position)}.to-\[\#B3CBB9\]{--tw-gradient-to: #B3CBB9 var(--tw-gradient-to-position)}.to-\[\#D3CDC0\]{--tw-gradient-to: #D3CDC0 var(--tw-gradient-to-position)}.to-\[\#DCCFBB\]{--tw-gradient-to: #DCCFBB var(--tw-gradient-to-position)}.fill-forest{fill:#123e30}.object-contain{-o-object-fit:contain;object-fit:contain}.object-cover{-o-object-fit:cover;object-fit:cover}.object-\[62\%_center\]{-o-object-position:62% center;object-position:62% center}.object-\[center_30\%\]{-o-object-position:center 30%;object-position:center 30%}.object-\[center_35\%\]{-o-object-position:center 35%;object-position:center 35%}.p-0\.5{padding:.125rem}.p-1{padding:.25rem}.p-1\.5{padding:.375rem}.p-10{padding:2.5rem}.p-12{padding:3rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.\!px-3{padding-left:.75rem!important;padding-right:.75rem!important}.\!px-4{padding-left:1rem!important;padding-right:1rem!important}.\!px-5{padding-left:1.25rem!important;padding-right:1.25rem!important}.\!px-8{padding-left:2rem!important;padding-right:2rem!important}.\!py-1\.5{padding-top:.375rem!important;padding-bottom:.375rem!important}.\!py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.\!py-2\.5{padding-top:.625rem!important;padding-bottom:.625rem!important}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-3\.5{padding-left:.875rem;padding-right:.875rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-14{padding-top:3.5rem;padding-bottom:3.5rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-20{padding-top:5rem;padding-bottom:5rem}.py-24{padding-top:6rem;padding-bottom:6rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-3\.5{padding-top:.875rem;padding-bottom:.875rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-12{padding-bottom:3rem}.pb-16{padding-bottom:4rem}.pb-2{padding-bottom:.5rem}.pb-20{padding-bottom:5rem}.pb-3{padding-bottom:.75rem}.pb-5{padding-bottom:1.25rem}.pb-8{padding-bottom:2rem}.pl-1{padding-left:.25rem}.pl-3{padding-left:.75rem}.pr-4{padding-right:1rem}.pt-1{padding-top:.25rem}.pt-1\.5{padding-top:.375rem}.pt-10{padding-top:2.5rem}.pt-2{padding-top:.5rem}.pt-3{padding-top:.75rem}.pt-4{padding-top:1rem}.pt-5{padding-top:1.25rem}.pt-6{padding-top:1.5rem}.pt-8{padding-top:2rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.align-top{vertical-align:top}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.font-sans{font-family:Inter,system-ui,-apple-system,sans-serif}.font-serif{font-family:Cormorant Garamond,Georgia,serif}.\!text-\[10px\]{font-size:10px!important}.\!text-\[11px\]{font-size:11px!important}.\!text-xs{font-size:.75rem!important;line-height:1rem!important}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-5xl{font-size:3rem;line-height:1}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[12px\]{font-size:12px}.text-\[13px\]{font-size:13px}.text-\[15px\]{font-size:15px}.text-\[16px\]{font-size:16px}.text-\[26px\]{font-size:26px}.text-\[34px\]{font-size:34px}.text-\[44px\]{font-size:44px}.text-\[9px\]{font-size:9px}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.italic{font-style:italic}.not-italic{font-style:normal}.tabular-nums{--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.leading-\[1\.05\]{line-height:1.05}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.leading-snug{line-height:1.375}.leading-tight{line-height:1.25}.tracking-\[\.16em\]{letter-spacing:.16em}.tracking-wide{letter-spacing:.025em}.tracking-wider{letter-spacing:.05em}.tracking-widest{letter-spacing:.1em}.tracking-widest2{letter-spacing:.18em}.\!text-cream{--tw-text-opacity: 1 !important;color:rgb(252 250 246 / var(--tw-text-opacity, 1))!important}.\!text-gold{--tw-text-opacity: 1 !important;color:rgb(200 166 107 / var(--tw-text-opacity, 1))!important}.text-\[\#5B7C99\]{--tw-text-opacity: 1;color:rgb(91 124 153 / var(--tw-text-opacity, 1))}.text-\[\#6B4F12\]{--tw-text-opacity: 1;color:rgb(107 79 18 / var(--tw-text-opacity, 1))}.text-\[\#9A7422\]{--tw-text-opacity: 1;color:rgb(154 116 34 / var(--tw-text-opacity, 1))}.text-\[\#9E4A3A\]{--tw-text-opacity: 1;color:rgb(158 74 58 / var(--tw-text-opacity, 1))}.text-\[\#A03030\]{--tw-text-opacity: 1;color:rgb(160 48 48 / var(--tw-text-opacity, 1))}.text-botanical{--tw-text-opacity: 1;color:rgb(63 115 80 / var(--tw-text-opacity, 1))}.text-botanical\/50{color:#3f735080}.text-botanical\/60{color:#3f735099}.text-charcoal{--tw-text-opacity: 1;color:rgb(24 33 29 / var(--tw-text-opacity, 1))}.text-charcoal\/70{color:#18211db3}.text-charcoal\/75{color:#18211dbf}.text-charcoal\/80{color:#18211dcc}.text-charcoal\/85{color:#18211dd9}.text-cream{--tw-text-opacity: 1;color:rgb(252 250 246 / var(--tw-text-opacity, 1))}.text-cream\/45{color:#fcfaf673}.text-cream\/50{color:#fcfaf680}.text-cream\/60{color:#fcfaf699}.text-cream\/70{color:#fcfaf6b3}.text-cream\/75{color:#fcfaf6bf}.text-cream\/80{color:#fcfaf6cc}.text-cream\/85{color:#fcfaf6d9}.text-forest{--tw-text-opacity: 1;color:rgb(18 62 48 / var(--tw-text-opacity, 1))}.text-forest\/70{color:#123e30b3}.text-gold{--tw-text-opacity: 1;color:rgb(200 166 107 / var(--tw-text-opacity, 1))}.text-mutegray{--tw-text-opacity: 1;color:rgb(94 101 95 / var(--tw-text-opacity, 1))}.text-pine{--tw-text-opacity: 1;color:rgb(9 46 36 / var(--tw-text-opacity, 1))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.underline{text-decoration-line:underline}.line-through{text-decoration-line:line-through}.underline-offset-2{text-underline-offset:2px}.underline-offset-4{text-underline-offset:4px}.accent-\[\#123E30\]{accent-color:#123E30}.accent-\[\#C8A66B\]{accent-color:#C8A66B}.opacity-\[0\.07\]{opacity:.07}.opacity-\[0\.08\]{opacity:.08}.shadow-\[0_18px_40px_-28px_rgba\(9\,46\,36\,0\.35\)\]{--tw-shadow: 0 18px 40px -28px rgba(9,46,36,.35);--tw-shadow-colored: 0 18px 40px -28px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-\[0_1px_0_\#E9E1D5\,0_8px_24px_-16px_rgba\(9\,46\,36\,0\.3\)\]{--tw-shadow: 0 1px 0 #E9E1D5,0 8px 24px -16px rgba(9,46,36,.3);--tw-shadow-colored: 0 1px 0 var(--tw-shadow-color), 0 8px 24px -16px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-\[0_1px_0_\#E9E1D5\]{--tw-shadow: 0 1px 0 #E9E1D5;--tw-shadow-colored: 0 1px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-\[0_24px_48px_-24px_rgba\(9\,46\,36\,0\.35\)\]{--tw-shadow: 0 24px 48px -24px rgba(9,46,36,.35);--tw-shadow-colored: 0 24px 48px -24px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.\!filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur{--tw-backdrop-blur: blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-sm{--tw-backdrop-blur: blur(4px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}.no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.placeholder\:text-cream\/50::-moz-placeholder{color:#fcfaf680}.placeholder\:text-cream\/50::placeholder{color:#fcfaf680}.placeholder\:text-mutegray::-moz-placeholder{--tw-text-opacity: 1;color:rgb(94 101 95 / var(--tw-text-opacity, 1))}.placeholder\:text-mutegray::placeholder{--tw-text-opacity: 1;color:rgb(94 101 95 / var(--tw-text-opacity, 1))}.placeholder\:text-mutegray\/60::-moz-placeholder{color:#5e655f99}.placeholder\:text-mutegray\/60::placeholder{color:#5e655f99}.after\:absolute:after{content:var(--tw-content);position:absolute}.after\:inset-0:after{content:var(--tw-content);top:0;right:0;bottom:0;left:0}.after\:content-none:after{--tw-content: none;content:var(--tw-content)}.last\:border-0:last-child{border-width:0px}.hover\:-translate-y-0\.5:hover{--tw-translate-y: -.125rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:border-botanical:hover{--tw-border-opacity: 1;border-color:rgb(63 115 80 / var(--tw-border-opacity, 1))}.hover\:border-botanical\/60:hover{border-color:#3f735099}.hover\:border-forest:hover{--tw-border-opacity: 1;border-color:rgb(18 62 48 / var(--tw-border-opacity, 1))}.hover\:border-forest\/40:hover{border-color:#123e3066}.hover\:border-mutegray:hover{--tw-border-opacity: 1;border-color:rgb(94 101 95 / var(--tw-border-opacity, 1))}.hover\:border-mutegray\/50:hover{border-color:#5e655f80}.hover\:bg-beige:hover{--tw-bg-opacity: 1;background-color:rgb(233 225 213 / var(--tw-bg-opacity, 1))}.hover\:bg-black:hover{--tw-bg-opacity: 1;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1))}.hover\:bg-charcoal\/25:hover{background-color:#18211d40}.hover\:bg-cream:hover{--tw-bg-opacity: 1;background-color:rgb(252 250 246 / var(--tw-bg-opacity, 1))}.hover\:bg-cream\/5:hover{background-color:#fcfaf60d}.hover\:bg-ivory:hover{--tw-bg-opacity: 1;background-color:rgb(247 244 238 / var(--tw-bg-opacity, 1))}.hover\:bg-ivory\/60:hover{background-color:#f7f4ee99}.hover\:bg-pine:hover{--tw-bg-opacity: 1;background-color:rgb(9 46 36 / var(--tw-bg-opacity, 1))}.hover\:text-botanical:hover{--tw-text-opacity: 1;color:rgb(63 115 80 / var(--tw-text-opacity, 1))}.hover\:text-cream:hover{--tw-text-opacity: 1;color:rgb(252 250 246 / var(--tw-text-opacity, 1))}.hover\:text-forest:hover{--tw-text-opacity: 1;color:rgb(18 62 48 / var(--tw-text-opacity, 1))}.hover\:underline:hover{text-decoration-line:underline}.hover\:opacity-80:hover{opacity:.8}.hover\:shadow-\[0_16px_32px_-20px_rgba\(9\,46\,36\,0\.3\)\]:hover{--tw-shadow: 0 16px 32px -20px rgba(9,46,36,.3);--tw-shadow-colored: 0 16px 32px -20px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.hover\:shadow-\[0_16px_40px_-20px_rgba\(9\,46\,36\,0\.25\)\]:hover{--tw-shadow: 0 16px 40px -20px rgba(9,46,36,.25);--tw-shadow-colored: 0 16px 40px -20px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.focus\:not-sr-only:focus{position:static;width:auto;height:auto;padding:0;margin:0;overflow:visible;clip:auto;white-space:normal}.focus\:absolute:focus{position:absolute}.focus\:left-4:focus{left:1rem}.focus\:top-4:focus{top:1rem}.focus\:z-\[60\]:focus{z-index:60}.focus\:border-forest:focus{--tw-border-opacity: 1;border-color:rgb(18 62 48 / var(--tw-border-opacity, 1))}.focus\:border-gold:focus{--tw-border-opacity: 1;border-color:rgb(200 166 107 / var(--tw-border-opacity, 1))}.focus\:bg-forest:focus{--tw-bg-opacity: 1;background-color:rgb(18 62 48 / var(--tw-bg-opacity, 1))}.focus\:px-4:focus{padding-left:1rem;padding-right:1rem}.focus\:py-2:focus{padding-top:.5rem;padding-bottom:.5rem}.focus\:text-cream:focus{--tw-text-opacity: 1;color:rgb(252 250 246 / var(--tw-text-opacity, 1))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.disabled\:opacity-30:disabled{opacity:.3}.group:hover .group-hover\:-translate-y-0\.5{--tw-translate-y: -.125rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:-translate-y-1\.5{--tw-translate-y: -.375rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:bg-forest{--tw-bg-opacity: 1;background-color:rgb(18 62 48 / var(--tw-bg-opacity, 1))}.group:hover .group-hover\:text-botanical{--tw-text-opacity: 1;color:rgb(63 115 80 / var(--tw-text-opacity, 1))}.group:hover .group-hover\:text-cream{--tw-text-opacity: 1;color:rgb(252 250 246 / var(--tw-text-opacity, 1))}.group:hover .group-hover\:underline{text-decoration-line:underline}@media (min-width: 640px){.sm\:absolute{position:absolute}.sm\:left-1\/2{left:50%}.sm\:col-span-2{grid-column:span 2 / span 2}.sm\:mt-0\.5{margin-top:.125rem}.sm\:block{display:block}.sm\:flex{display:flex}.sm\:inline-flex{display:inline-flex}.sm\:aspect-\[16\/9\]{aspect-ratio:16/9}.sm\:h-10{height:2.5rem}.sm\:h-8{height:2rem}.sm\:w-auto{width:auto}.sm\:-translate-x-1\/2{--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.sm\:grid-cols-\[1fr_260px\]{grid-template-columns:1fr 260px}.sm\:grid-cols-\[auto_1fr\]{grid-template-columns:auto 1fr}.sm\:flex-row{flex-direction:row}.sm\:flex-col{flex-direction:column}.sm\:items-center{align-items:center}.sm\:justify-between{justify-content:space-between}.sm\:gap-2{gap:.5rem}.sm\:gap-4{gap:1rem}.sm\:gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.sm\:object-\[60\%_center\]{-o-object-position:60% center;object-position:60% center}.sm\:p-6{padding:1.5rem}.sm\:p-8{padding:2rem}.sm\:py-12{padding-top:3rem;padding-bottom:3rem}.sm\:py-16{padding-top:4rem;padding-bottom:4rem}.sm\:py-20{padding-top:5rem;padding-bottom:5rem}.sm\:py-24{padding-top:6rem;padding-bottom:6rem}.sm\:text-2xl{font-size:1.5rem;line-height:2rem}.sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}.sm\:text-5xl{font-size:3rem;line-height:1}.sm\:text-6xl{font-size:3.75rem;line-height:1}.sm\:text-\[40px\]{font-size:40px}.sm\:text-base{font-size:1rem;line-height:1.5rem}.sm\:text-xs{font-size:.75rem;line-height:1rem}}@media (min-width: 768px){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:gap-6{gap:1.5rem}}@media (min-width: 1024px){.lg\:absolute{position:absolute}.lg\:sticky{position:sticky}.lg\:inset-0{top:0;right:0;bottom:0;left:0}.lg\:top-24{top:6rem}.lg\:-z-10{z-index:-10}.lg\:col-span-2{grid-column:span 2 / span 2}.lg\:col-span-3{grid-column:span 3 / span 3}.lg\:col-span-4{grid-column:span 4 / span 4}.lg\:col-span-8{grid-column:span 8 / span 8}.lg\:mr-4{margin-right:1rem}.lg\:block{display:block}.lg\:flex{display:flex}.lg\:grid{display:grid}.lg\:hidden{display:none}.lg\:aspect-auto{aspect-ratio:auto}.lg\:h-\[50vw\]{height:50vw}.lg\:h-\[72px\]{height:72px}.lg\:h-full{height:100%}.lg\:max-h-\[1000px\]{max-height:1000px}.lg\:min-h-\[640px\]{min-height:640px}.lg\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.lg\:grid-cols-\[1fr_360px\]{grid-template-columns:1fr 360px}.lg\:grid-cols-\[1fr_auto\]{grid-template-columns:1fr auto}.lg\:grid-cols-\[240px_1fr\]{grid-template-columns:240px 1fr}.lg\:grid-cols-\[360px_minmax\(0\,1fr\)\]{grid-template-columns:360px minmax(0,1fr)}.lg\:grid-cols-\[minmax\(0\,1fr\)_340px\]{grid-template-columns:minmax(0,1fr) 340px}.lg\:grid-cols-\[minmax\(0\,1fr\)_400px\]{grid-template-columns:minmax(0,1fr) 400px}.lg\:grid-cols-\[minmax\(0\,1fr\)_440px\]{grid-template-columns:minmax(0,1fr) 440px}.lg\:flex-col{flex-direction:column}.lg\:gap-14{gap:3.5rem}.lg\:gap-16{gap:4rem}.lg\:justify-self-end{justify-self:end}.lg\:object-\[right_55\%\]{-o-object-position:right 55%;object-position:right 55%}.lg\:px-10{padding-left:2.5rem;padding-right:2.5rem}.lg\:py-0{padding-top:0;padding-bottom:0}.lg\:py-16{padding-top:4rem;padding-bottom:4rem}.lg\:py-8{padding-top:2rem;padding-bottom:2rem}.lg\:py-9{padding-top:2.25rem;padding-bottom:2.25rem}.lg\:pt-12{padding-top:3rem}.lg\:pt-14{padding-top:3.5rem}.lg\:text-\[62px\]{font-size:62px}}@media (min-width: 1280px){.xl\:sticky{position:sticky}.xl\:top-6{top:1.5rem}.xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.xl\:grid-cols-\[minmax\(0\,1fr\)_420px\]{grid-template-columns:minmax(0,1fr) 420px}}.\[\&\>option\]\:text-charcoal>option{--tw-text-opacity: 1;color:rgb(24 33 29 / var(--tw-text-opacity, 1))}
/*
 * PeptiPaws house style: the site's design system (owner-approved 2026-10-08, shared with the
 * owner's other brand). Forest, emerald, sage and gold on cream; Playfair Display Bold for
 * display and headlines, Poppins for everything else; gold hairlines, numbered gold eyebrows,
 * gold and forest pill CTAs, generous spacing.
 *
 * How it is built. site.css is the frozen compiled Tailwind export (no Tailwind runs here) and
 * is never edited. This file loads after it and does two things:
 *   1. "Design system" re-points the legacy layer at the house tokens: the colour utilities
 *      (bg-cream, text-forest, border-beige ...), the type (h1-h4, font-serif, font-sans,
 *      eyebrow, price), the components (btn-*, field, card, link-underline) and the accordion.
 *      So every template is in the house style without per-page edits. Same specificity as
 *      the utilities, later in the cascade: an override wins, a !important utility still wins.
 *   2. Semantic hs- components for the surfaces built in the house style (chrome, home, page
 *      heroes, product and concept pages). scripts/parity/classes.mjs reads this file too.
 * Tokens are the custom properties below; nothing else in this file hard-codes a colour
 * except alpha tints of a token. Markup carries no inline styling except per-item data
 * colours (a product's or concept's accent dot, set from seed.json as a style attribute).
 *
 * Contrast (WCAG AA, measured on cream #F3EAE1 / paper #FBF7F2 / sand #EBE0D3):
 *   gold #B89B62 is 2.2:1 on cream: fills, hairlines and large display only.
 *   small gold text on light grounds uses --hs-gold-ink #745B2B (5.4 / 6.0 / 4.9:1);
 *   gold text on the dark gradient uses --hs-gold-light (5.4:1 on the lightest stop);
 *   emerald #167E64 is 4.2:1 on cream, so small green text uses --hs-emerald-ink #0F6A52
 *   (5.5 / 6.2 / 5.0:1); --hs-muted #4A5560 is 6.4:1; field borders use --hs-field-line
 *   (3.7:1, the 3:1 non-text minimum for a control boundary).
 */

:root {
  --hs-forest: #1b492d;
  --hs-emerald: #167e64;
  --hs-emerald-ink: #0f6a52;
  --hs-sage: #6a9984;
  --hs-gold: #b89b62;
  --hs-gold-ink: #745b2b;
  --hs-gold-light: #d4ba85;
  --hs-cream: #f3eae1;
  --hs-sand: #ebe0d3;
  --hs-paper: #fbf7f2;
  --hs-charcoal: #1c2328;
  --hs-muted: #4a5560;
  --hs-night: #0a1712;
  --hs-hair: rgba(184, 155, 98, 0.45);
  --hs-hair-soft: rgba(184, 155, 98, 0.28);
  --hs-field-line: #8a7550;
  /* the photo-white of the spray product masters (their own studio ground) */
  --hs-photo: #f9f8f3;
  /* progress-bar ground (free-shipping bar) */
  --hs-track: #e6dacb;
  --hs-danger: #9e3a2b;
  --hs-gradient: linear-gradient(180deg, var(--hs-night) 0%, var(--hs-forest) 100%);
  --hs-display: 'Playfair Display', 'Playfair Fallback', Georgia, 'Times New Roman', serif;
  --hs-sans: 'Poppins', 'Poppins Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hs-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --hs-shadow-lift: 0 24px 40px -28px rgba(10, 23, 18, 0.45);
}

/*
 * Font fallbacks with metric overrides, so the swap from the system face to the web font
 * (display=swap on the Google Fonts URL) does not move the layout. Measured from the
 * Google-served TTFs against Windows' Arial / Times New Roman Bold with English letter
 * frequencies (the capsize / next-font method): Poppins 400 vs Arial, Playfair Display 700
 * vs Times New Roman Bold.
 */
@font-face {
  font-family: 'Poppins Fallback';
  src: local('Arial'), local('ArialMT'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 113.46%;
  ascent-override: 92.54%;
  descent-override: 30.85%;
  line-gap-override: 8.81%;
}
@font-face {
  font-family: 'Playfair Fallback';
  src: local('Times New Roman Bold'), local('TimesNewRomanPS-BoldMT'), local('Times Bold'), local('Liberation Serif Bold');
  font-weight: 700;
  size-adjust: 107.65%;
  ascent-override: 100.51%;
  descent-override: 23.32%;
  line-gap-override: 0%;
}

/* ================================================================== design system */
/*
 * The legacy layer (site.css) re-pointed at the house tokens. Selectors are exactly the
 * compiled ones, so each override has the utility's own specificity and wins by order.
 */

/* ---- base */
html,
:host,
body {
  font-family: var(--hs-sans);
}
body {
  background-color: var(--hs-cream);
  color: var(--hs-charcoal);
}
h1,
h2,
h3,
h4 {
  font-family: var(--hs-display);
  font-weight: 700;
  color: var(--hs-forest);
  letter-spacing: -0.01em;
}
/* Playfair's x-height is far larger than the export's Cormorant: the same utility sizes read
   one step bigger, so the two largest heading steps get display line-heights. */
:is(h1, h2, h3).text-5xl { line-height: 1.08; }
:is(h1, h2, h3).text-4xl { line-height: 1.14; }
:is(h1, h2).text-4xl { font-size: clamp(1.875rem, 1.45rem + 1.6vw, 2.25rem); }
::selection { background: rgba(184, 155, 98, 0.35); color: var(--hs-night); }
:focus-visible { outline: 2px solid var(--hs-forest); outline-offset: 3px; }
:is(.bg-pine, .bg-forest, .hs-on-dark, .hs-footer) :focus-visible { outline-color: var(--hs-gold-light); }

/* ---- type utilities */
.font-sans { font-family: var(--hs-sans); }
.font-serif {
  font-family: var(--hs-display);
  font-weight: 700;
  letter-spacing: -0.005em;
}
/* Playfair is loaded in its bold roman only: no synthesized italics. */
.font-serif.italic { font-style: normal; }
.price { font-family: var(--hs-sans); }
.tracking-widest2 { letter-spacing: 0.16em; }

/* The eyebrow: Poppins 500, gold ink, wide tracking, led by a gold dash (twin dashes when centred). */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--hs-sans);
  font-size: 0.75rem;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--hs-gold-ink);
}
.eyebrow::before,
.text-center .eyebrow::after {
  content: '';
  display: inline-block;
  flex-shrink: 0;
  width: 1.75rem;
  height: 1px;
  background: currentColor;
}
:is(.bg-pine, .bg-forest, .hs-on-dark) .eyebrow { color: var(--hs-gold-light); }

/* ---- colour utilities */
.bg-cream { background-color: var(--hs-cream); }
.bg-cream\/90 { background-color: rgba(243, 234, 225, 0.9); }
.bg-cream\/95 { background-color: rgba(243, 234, 225, 0.95); }
.bg-ivory { background-color: var(--hs-sand); }
.bg-ivory\/60 { background-color: rgba(235, 224, 211, 0.6); }
.bg-white { background-color: var(--hs-paper); }
.bg-white\/85 { background-color: rgba(251, 247, 242, 0.85); }
.bg-beige { background-color: var(--hs-sand); }
.bg-beige\/70 { background-color: rgba(235, 224, 211, 0.7); }
.bg-forest { background-color: var(--hs-forest); }
.bg-forest\/\[0\.04\] { background-color: rgba(27, 73, 45, 0.04); }
.bg-pine { background-color: var(--hs-night); background-image: var(--hs-gradient); }
.bg-botanical { background-color: var(--hs-emerald); }
.bg-botanical\/5 { background-color: rgba(22, 126, 100, 0.06); }
.bg-botanical\/10 { background-color: rgba(22, 126, 100, 0.1); }
.bg-botanical\/15 { background-color: rgba(22, 126, 100, 0.14); }
.bg-gold { background-color: var(--hs-gold); }
.bg-gold\/10 { background-color: rgba(184, 155, 98, 0.12); }
.bg-charcoal { background-color: var(--hs-charcoal); }
.bg-charcoal\/50 { background-color: rgba(10, 23, 18, 0.55); }
.hover\:bg-ivory:hover { background-color: var(--hs-sand); }
.hover\:bg-ivory\/60:hover { background-color: rgba(235, 224, 211, 0.6); }
.hover\:bg-beige:hover { background-color: var(--hs-sand); }
.hover\:bg-cream:hover { background-color: var(--hs-cream); }
.hover\:bg-pine:hover { background-color: var(--hs-night); }
.focus\:bg-forest:focus { background-color: var(--hs-forest); }
.group:hover .group-hover\:bg-forest { background-color: var(--hs-forest); }

.text-forest { color: var(--hs-forest); }
.text-forest\/70 { color: rgba(27, 73, 45, 0.78); }
.text-pine { color: var(--hs-night); }
.text-botanical { color: var(--hs-emerald-ink); }
/* Decorative numerals and icons (quality 01-09, the 404 paw): the house gold ink, AA as text. */
.text-botanical\/50,
.text-botanical\/60 { color: var(--hs-gold-ink); }
.text-charcoal { color: var(--hs-charcoal); }
.text-charcoal\/70 { color: rgba(28, 35, 40, 0.74); }
.text-charcoal\/75 { color: rgba(28, 35, 40, 0.78); }
.text-charcoal\/80 { color: rgba(28, 35, 40, 0.82); }
.text-charcoal\/85 { color: rgba(28, 35, 40, 0.86); }
.text-mutegray { color: var(--hs-muted); }
.text-gold { color: var(--hs-gold-ink); }
:is(.bg-pine, .bg-forest, .bg-charcoal, .hs-on-dark, .hs-footer) .text-gold { color: var(--hs-gold-light); }
.\!text-gold { color: var(--hs-gold-light) !important; }
.text-cream { color: var(--hs-cream); }
.\!text-cream { color: var(--hs-cream) !important; }
.text-cream\/60 { color: rgba(243, 234, 225, 0.7); }
.text-cream\/70 { color: rgba(243, 234, 225, 0.76); }
.text-cream\/75 { color: rgba(243, 234, 225, 0.8); }
.hover\:text-botanical:hover,
.group:hover .group-hover\:text-botanical { color: var(--hs-emerald-ink); }
.hover\:text-forest:hover { color: var(--hs-forest); }
.hover\:text-cream:hover,
.focus\:text-cream:focus,
.group:hover .group-hover\:text-cream { color: var(--hs-cream); }
.placeholder\:text-mutegray::placeholder { color: var(--hs-muted); }
.placeholder\:text-mutegray\/60::placeholder { color: rgba(74, 85, 96, 0.75); }
.fill-forest { fill: var(--hs-forest); }

.border-beige,
.border-beige\/70 { border-color: var(--hs-hair); }
.border-beige\/60 { border-color: var(--hs-hair-soft); }
.divide-beige > :not([hidden]) ~ :not([hidden]),
.divide-beige\/70 > :not([hidden]) ~ :not([hidden]) { border-color: var(--hs-hair); }
.border-forest { border-color: var(--hs-forest); }
.border-forest\/15 { border-color: var(--hs-hair); }
.border-forest\/20,
.border-forest\/25 { border-color: rgba(27, 73, 45, 0.24); }
.border-gold { border-color: var(--hs-gold); }
.border-gold\/40,
.border-gold\/50,
.border-gold\/60 { border-color: rgba(184, 155, 98, 0.6); }
.border-botanical\/30,
.border-botanical\/40,
.border-botanical\/50 { border-color: rgba(22, 126, 100, 0.45); }
.hover\:border-botanical:hover,
.hover\:border-botanical\/60:hover,
.hover\:border-forest:hover { border-color: var(--hs-forest); }
.hover\:border-forest\/40:hover,
.hover\:border-mutegray:hover,
.hover\:border-mutegray\/50:hover { border-color: var(--hs-gold); }
.focus\:border-forest:focus,
.focus\:border-gold:focus { border-color: var(--hs-gold); }

/* ---- buttons: pills. Same names, so every template follows. Sizes from utilities
   (!min-h-[44px], !px-4, !text-xs) still apply: they are !important. */
.btn,
.btn-primary,
.btn-outline,
.btn-light {
  min-height: 3rem;
  padding-left: 1.75rem;
  padding-right: 1.75rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--hs-sans);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.03em;
  text-transform: none;
  text-align: center;
  transition: background-color 0.25s var(--hs-ease), color 0.25s var(--hs-ease), border-color 0.25s var(--hs-ease), box-shadow 0.25s var(--hs-ease), transform 0.25s var(--hs-ease);
}
.btn-primary { background-color: var(--hs-forest); color: var(--hs-cream); }
.btn-primary:hover { background-color: var(--hs-night); box-shadow: 0 10px 28px -14px rgba(10, 23, 18, 0.7); }
.btn-outline { border-color: var(--hs-forest); color: var(--hs-forest); background-color: transparent; }
.btn-outline:hover { background-color: var(--hs-forest); color: var(--hs-cream); }
/* On the dark bands the light button is the house gold pill. */
.btn-light { background-color: var(--hs-gold); color: var(--hs-night); }
.btn-light:hover { background-color: var(--hs-gold-light); color: var(--hs-night); box-shadow: 0 10px 28px -12px rgba(184, 155, 98, 0.75); }
:is(.btn, .btn-primary, .btn-outline, .btn-light):disabled,
:is(.btn, .btn-primary, .btn-outline, .btn-light)[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; box-shadow: none; }
.btn.bg-gold { background-color: var(--hs-gold); color: var(--hs-night); }
.btn.bg-gold:hover { background-color: var(--hs-gold-light); }
.btn.bg-charcoal { background-color: var(--hs-night); border-color: var(--hs-night); color: var(--hs-cream); }
.btn.bg-charcoal:hover { background-color: var(--hs-forest); }

/* ---- fields: cream, a gold-brown line at 3.7:1, forest focus ring; pills like the home
   waitlist, textareas softly rounded. */
.field {
  min-height: 3rem;
  border-color: var(--hs-field-line);
  border-radius: 999px;
  background-color: var(--hs-cream);
  padding: 0.75rem 1.15rem;
  font-family: var(--hs-sans);
  color: var(--hs-charcoal);
  transition: border-color 0.2s var(--hs-ease), box-shadow 0.2s var(--hs-ease), background-color 0.2s var(--hs-ease);
}
.field::placeholder { color: rgba(74, 85, 96, 0.8); }
.field:hover { border-color: var(--hs-forest); }
.field:focus { border-color: var(--hs-forest); background-color: var(--hs-paper); box-shadow: 0 0 0 3px rgba(27, 73, 45, 0.18); outline: none; }
.field:focus-visible { outline: 2px solid var(--hs-forest); outline-offset: 2px; }
textarea.field { border-radius: 1.25rem; }
select.field {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23745B2B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 0.9rem;
}
input[type='checkbox'],
input[type='radio'] { accent-color: var(--hs-forest); }

/* ---- cards and surfaces */
.card { border-color: var(--hs-hair); background-color: var(--hs-paper); }

/* ---- links */
.link-underline {
  color: var(--hs-forest);
  text-decoration: underline;
  text-decoration-color: var(--hs-gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.link-underline::after { display: none; }
.link-underline:hover { text-decoration-thickness: 2px; }
main a.underline { text-decoration-color: var(--hs-gold); text-underline-offset: 3px; }
main a.underline:hover { color: var(--hs-forest); text-decoration-thickness: 2px; }

/* ---- accordions (src/islands/catalog/Accordion.tsx, src/components/AccordionItem.astro) */
.hs-accordion { border-color: var(--hs-hair); }
.hs-accordion > * + * { border-color: var(--hs-hair) !important; }
.hs-accordion button[aria-expanded] { min-height: 3.5rem; padding-top: 1.1rem; padding-bottom: 1.1rem; }
.hs-accordion button[aria-expanded] > span { font-family: var(--hs-sans); font-size: 1rem; font-weight: 500; color: var(--hs-forest); }
.hs-accordion button[aria-expanded]:hover > span { color: var(--hs-night); }
.hs-accordion button[aria-expanded] > svg { color: var(--hs-gold-ink); }
.hs-accordion button[aria-expanded] + div { font-size: 0.9375rem; line-height: 1.75; color: var(--hs-muted); }

/* ---- tables */
main table th[scope='col'] { color: var(--hs-gold-ink); font-weight: 600; letter-spacing: 0.12em; }

/* ------------------------------------------------------------------ primitives */

.hs-page {
  background: var(--hs-cream);
  color: var(--hs-charcoal);
  font-family: var(--hs-sans);
  font-weight: 400;
}

.hs-wrap {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 80rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
@media (min-width: 640px) {
  .hs-wrap { padding-left: 2rem; padding-right: 2rem; }
}

.hs-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  font-family: var(--hs-sans);
  font-size: 0.75rem;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hs-gold-ink);
}
/* Poppins, not Playfair: Playfair's old-style figures make "01" read as "oı". */
.hs-eyebrow-num {
  font-family: var(--hs-sans);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.hs-eyebrow-dash {
  display: inline-block;
  width: 1.75rem;
  height: 1px;
  background: currentColor;
}
.hs-on-dark .hs-eyebrow { color: var(--hs-gold-light); }

.hs-h2 {
  margin: 0.9rem 0 0;
  font-family: var(--hs-display);
  font-weight: 700;
  font-size: clamp(2rem, 1.35rem + 2.6vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--hs-forest);
  text-wrap: balance;
}
.hs-on-dark .hs-h2 { color: var(--hs-cream); }

.hs-rule {
  display: block;
  width: 4rem;
  height: 2px;
  margin-top: 1.25rem;
  border: 0;
  background: var(--hs-gold);
}

.hs-lede {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--hs-muted);
  max-width: 34rem;
}

.hs-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0 1.75rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--hs-sans);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.25s var(--hs-ease), color 0.25s var(--hs-ease), border-color 0.25s var(--hs-ease), box-shadow 0.25s var(--hs-ease), transform 0.25s var(--hs-ease);
}
.hs-pill:hover { transform: translateY(-1px); }
.hs-pill--gold { background: var(--hs-gold); color: var(--hs-night); }
.hs-pill--gold:hover { background: var(--hs-gold-light); box-shadow: 0 10px 28px -12px rgba(184, 155, 98, 0.75); }
.hs-pill--forest { background: var(--hs-forest); color: var(--hs-cream); }
.hs-pill--forest:hover { background: var(--hs-night); box-shadow: 0 10px 28px -14px rgba(10, 23, 18, 0.7); }
.hs-pill--ghost { border-color: var(--hs-forest); color: var(--hs-forest); background: transparent; }
.hs-pill--ghost:hover { background: var(--hs-forest); color: var(--hs-cream); }
.hs-pill--ghost-light { border-color: rgba(243, 234, 225, 0.6); color: var(--hs-cream); background: transparent; }
.hs-pill--ghost-light:hover { background: var(--hs-cream); color: var(--hs-forest); border-color: var(--hs-cream); }
.hs-pill--sm { min-height: 2.5rem; padding: 0 1.15rem; font-size: 0.75rem; letter-spacing: 0.05em; }

.hs-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  font-family: var(--hs-sans);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--hs-forest);
  text-decoration: none;
}
.hs-link-text {
  background-image: linear-gradient(var(--hs-gold), var(--hs-gold));
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 3px;
  transition: background-size 0.3s var(--hs-ease);
}
.hs-link:hover .hs-link-text { background-size: 100% 2px; }
.hs-link svg { width: 1rem; height: 1rem; flex-shrink: 0; transition: transform 0.3s var(--hs-ease); }
.hs-link:hover svg { transform: translateX(3px); }
.hs-on-dark .hs-link { color: var(--hs-gold-light); }

/* Focus: one visible ring everywhere in the option-C surfaces. */
.hs-page :focus-visible,
.hs-chrome :focus-visible {
  outline: 2px solid var(--hs-forest);
  outline-offset: 3px;
}
.hs-on-dark :focus-visible,
.hs-chrome-dark :focus-visible {
  outline-color: var(--hs-gold-light);
}

/* ------------------------------------------------------------------ announcement bar */

.hs-announce {
  background: var(--hs-night);
  color: var(--hs-cream);
  border-bottom: 1px solid rgba(184, 155, 98, 0.35);
}
.hs-announce-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-family: var(--hs-sans);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.03em;
}
.hs-announce-slogan {
  display: none;
  position: absolute;
  left: 1.25rem;
  align-items: center;
  gap: 0.5rem;
  color: rgba(243, 234, 225, 0.72);
}
@media (min-width: 1280px) {
  .hs-announce-slogan { display: flex; left: 2rem; }
}
.hs-announce-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.5rem;
  color: var(--hs-cream);
  text-decoration: none;
  text-align: center;
}
/* Underlined per line (text-decoration, not a border), so the two-line phone version reads cleanly. */
.hs-announce-link span { text-decoration: underline; text-decoration-color: rgba(212, 186, 133, 0.55); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.hs-announce-link:hover span { text-decoration-color: var(--hs-gold-light); }
.hs-announce-icon { width: 0.875rem; height: 0.875rem; color: var(--hs-gold-light); flex-shrink: 0; }

/* ------------------------------------------------------------------ header */

.hs-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(243, 234, 225, 0.97);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hs-gold);
  transition: box-shadow 0.3s var(--hs-ease);
  font-family: var(--hs-sans);
}
.hs-header--scrolled { box-shadow: 0 14px 30px -24px rgba(10, 23, 18, 0.45); }

.hs-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  height: 4rem;
}
@media (min-width: 1024px) {
  .hs-header-bar { height: 4.75rem; gap: 1.25rem; }
}

.hs-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--hs-forest);
  cursor: pointer;
  transition: background-color 0.2s var(--hs-ease);
}
.hs-icon-btn:hover { background: rgba(184, 155, 98, 0.16); }
.hs-icon-btn--menu { margin-left: -0.6rem; }
@media (min-width: 1024px) {
  .hs-icon-btn--menu { display: none; }
}
.hs-icon-btn--account { display: none; }
@media (min-width: 640px) {
  .hs-icon-btn--account { display: inline-flex; }
}
.hs-cart-count {
  position: absolute;
  right: 0.1rem;
  top: 0.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: var(--hs-gold);
  color: var(--hs-night);
  font-size: 0.625rem;
  font-weight: 700;
}

.hs-logo { display: inline-flex; align-items: center; flex-shrink: 0; min-height: 2.75rem; }
.hs-logo img { height: 1.75rem; width: auto; }
@media (min-width: 640px) {
  .hs-logo img { height: 2rem; }
}
/* Mobile: the logo sits centred between the menu button and the actions. */
@media (max-width: 1023.98px) {
  .hs-header-bar > .hs-logo { position: absolute; left: 50%; transform: translateX(-50%); }
  .hs-header-bar { position: relative; }
}

.hs-nav { display: none; }
@media (min-width: 1024px) {
  .hs-nav { display: block; flex: 1 1 auto; min-width: 0; }
}
.hs-nav-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.9rem, 2.4vw - 0.6rem, 2.4rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.hs-nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 2.75rem;
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--hs-charcoal);
  text-decoration: none;
  transition: color 0.2s var(--hs-ease);
}
@media (min-width: 1024px) and (max-width: 1099.98px) {
  .hs-nav-link { font-size: 0.8125rem; }
}
.hs-nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.45rem;
  height: 1px;
  background: var(--hs-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--hs-ease);
}
.hs-nav-link:hover,
.hs-nav-link[aria-current='page'],
.hs-nav-link--open { color: var(--hs-forest); }
.hs-nav-link:hover::after,
.hs-nav-link[aria-current='page']::after,
.hs-nav-link--open::after { transform: scaleX(1); }
.hs-nav-link[aria-current='page']::after { height: 2px; }
.hs-nav-chevron { width: 0.8rem; height: 0.8rem; color: var(--hs-gold-ink); transition: transform 0.25s var(--hs-ease); }
.hs-nav-link--open .hs-nav-chevron { transform: rotate(180deg); }

.hs-header-actions { display: flex; align-items: center; gap: 0.15rem; flex-shrink: 0; }
.hs-header-cta { display: none; margin-left: 0.5rem; }
@media (min-width: 640px) {
  .hs-header-cta { display: inline-flex; }
}

/* ---- mega menu */
.hs-mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  display: none;
  background: var(--hs-cream);
  border-bottom: 1px solid var(--hs-hair);
  box-shadow: 0 30px 50px -30px rgba(10, 23, 18, 0.45);
  animation: hs-drop 0.28s var(--hs-ease) both;
}
@media (min-width: 1024px) {
  .hs-mega { display: block; }
}
@keyframes hs-drop {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
/* Four columns: pet and goal | the wellness sprays | topical care (in development) | go deeper. */
.hs-mega-grid {
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) minmax(0, 4.8fr) minmax(0, 2.3fr) minmax(0, 2.5fr);
  gap: 2.25rem;
  padding-top: 2.5rem;
  padding-bottom: 2.75rem;
}
.hs-mega-col > .hs-eyebrow { margin-bottom: 1rem; }
.hs-mega-col > .hs-eyebrow + * { margin-bottom: 1.75rem; }
.hs-mega-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.2rem; }
.hs-mega-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2rem;
  font-size: 0.875rem;
  color: var(--hs-charcoal);
  text-decoration: none;
}
.hs-mega-link:hover { color: var(--hs-forest); text-decoration: underline; text-decoration-color: var(--hs-gold); text-underline-offset: 4px; }
.hs-mega-link svg { width: 1.1rem; height: 1.1rem; color: var(--hs-emerald); flex-shrink: 0; }
.hs-mega-products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem 1.25rem; }
.hs-mega-product { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; min-width: 0; }
/* 56 px squares, the bottle filling the frame: the banded "-front" master scaled well past its
   side bands, anchored high so the cap and the label are in view. */
.hs-mega-thumb {
  width: 3.5rem;
  height: 3.5rem;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--hs-photo);
  box-shadow: 0 0 0 1px var(--hs-hair);
}
.hs-mega-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; transform: scale(1.7); transform-origin: 50% 15%; transition: transform 0.3s var(--hs-ease); }
.hs-mega-product:hover .hs-mega-thumb img { transform: scale(1.78); }
.hs-mega-product:hover .hs-mega-name { text-decoration: underline; text-decoration-color: var(--hs-gold); text-underline-offset: 3px; }
.hs-mega-sublabel { margin: 1.25rem 0 0.4rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hs-muted); }
.hs-mega-more { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin: 1.25rem 0 0; }
.hs-mega-name { margin: 0; font-size: 0.8125rem; font-weight: 600; color: var(--hs-forest); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-mega-sub { margin: 0; font-size: 0.6875rem; color: var(--hs-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-mega-cta {
  position: relative;
  display: block;
  margin-top: 1.5rem;
  padding: 1.25rem 1.25rem 1.35rem;
  background: var(--hs-gradient);
  color: var(--hs-cream);
  text-decoration: none;
}
.hs-mega-cta::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid var(--hs-hair);
  pointer-events: none;
}
.hs-mega-cta-title { margin: 0; font-family: var(--hs-display); font-weight: 700; font-size: 1.2rem; line-height: 1.25; }
.hs-mega-cta-sub { margin: 0.35rem 0 0; font-size: 0.75rem; color: var(--hs-gold-light); }

/* ---- mobile drawer */
.hs-drawer { position: fixed; inset: 0; z-index: 50; font-family: var(--hs-sans); }
@media (min-width: 1024px) {
  .hs-drawer { display: none; }
}
.hs-drawer-scrim { position: absolute; inset: 0; background: rgba(10, 23, 18, 0.55); animation: hs-fade 0.25s ease both; }
.hs-drawer-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: 88%;
  max-width: 24rem;
  overflow-y: auto;
  background: var(--hs-cream);
  border-right: 1px solid var(--hs-gold);
  animation: hs-slide 0.35s var(--hs-ease) both;
}
@keyframes hs-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hs-slide { from { transform: translateX(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
.hs-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0.75rem 0.75rem 1.25rem;
  border-bottom: 1px solid var(--hs-gold);
}
.hs-drawer-body { padding: 1.25rem; }
.hs-drawer-ctas { display: grid; gap: 0.6rem; }
.hs-drawer-nav { margin-top: 1.25rem; border-top: 1px solid var(--hs-hair); }
.hs-drawer-row,
.hs-drawer-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 3.25rem;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--hs-hair);
  background: transparent;
  font-family: var(--hs-sans);
  font-size: 1rem;
  font-weight: 500;
  color: var(--hs-forest);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.hs-drawer-row[aria-current='page'] { color: var(--hs-emerald-ink); }
.hs-drawer-row svg,
.hs-drawer-toggle svg { width: 1rem; height: 1rem; color: var(--hs-gold-ink); transition: transform 0.25s var(--hs-ease); }
.hs-drawer-toggle[aria-expanded='true'] svg { transform: rotate(180deg); }
.hs-drawer-sub { padding: 0.5rem 0 1rem 0.9rem; border-bottom: 1px solid var(--hs-hair); border-left: 1px solid var(--hs-gold); margin-left: 0.15rem; }
.hs-drawer-sub .hs-eyebrow { margin: 0.75rem 0 0.25rem; font-size: 0.6875rem; }
.hs-drawer-sublink {
  display: flex;
  align-items: center;
  min-height: 2.5rem;
  font-size: 0.9375rem;
  color: var(--hs-charcoal);
  text-decoration: none;
}
.hs-drawer-more { margin-top: 1.75rem; }
.hs-drawer-more-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; margin-top: 0.5rem; }
.hs-drawer-more-grid a {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: 0.875rem;
  color: var(--hs-charcoal);
  text-decoration: none;
  border-bottom: 1px solid var(--hs-hair-soft);
}
.hs-drawer-card {
  position: relative;
  margin: auto 1.25rem 1.25rem;
  padding: 1.25rem;
  background: var(--hs-gradient);
  color: var(--hs-cream);
}
.hs-drawer-card::before { content: ''; position: absolute; inset: 6px; border: 1px solid var(--hs-hair); pointer-events: none; }
.hs-drawer-card-title { margin: 0; font-family: var(--hs-display); font-weight: 700; font-size: 1.25rem; }
.hs-drawer-card-copy { margin: 0.35rem 0 0; font-size: 0.75rem; line-height: 1.6; color: rgba(243, 234, 225, 0.82); }

/* ------------------------------------------------------------------ hero */
/*
 * The photo is the hero's background, as on the live site. Below lg it sits on top (no
 * overlay) and the copy follows on the dark gradient panel. From lg it fills the hero
 * (absolute, inset 0, object-cover, anchored right) and a left-to-right forest overlay
 * carries the copy. Geometry (scripts check it at 1024/1280/1440/1920): the hero is never
 * taller than the photo's own ratio allows (min-height 44.9vw = 797/1774, capped), so the
 * photo scales by width and the first bottle (GlowPaws, 43 % of the image) always starts at
 * 43 % of the hero; the overlay is gone by 41 % and the copy ends at 36 %.
 */
.hs-hero {
  /* the page container's left edge (.hs-wrap: 80rem centred, 2rem gutter); resolved against the
     hero body's width where it is used, so it ignores a classic scrollbar like the container does */
  --hs-hero-pad: max(2rem, calc((100% - 80rem) / 2 + 2rem));
  position: relative;
  isolation: isolate;
  background: var(--hs-gradient);
  color: var(--hs-cream);
}
.hs-hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  height: 1px;
  background: var(--hs-gold);
  pointer-events: none;
}
.hs-hero-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--hs-sand); }
@media (min-width: 640px) {
  .hs-hero-media { aspect-ratio: 16 / 9; }
}
/* Below lg the 4:3 (16:9 from 640) frame shows ~60 % (80 %) of the 1774x797 scene. Anchored right it
   shows x 40-100 %: the dog, the cat (its ear ends at 96 %) and all four bottles (GlowPaws starts
   at 43 %). At 70 % the cat was cut. */
.hs-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; }
.hs-hero-media::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--hs-gold);
}

.hs-hero-body {
  position: relative;
  background:
    radial-gradient(ellipse 70% 60% at 100% 0%, rgba(22, 126, 100, 0.22), transparent 70%),
    var(--hs-gradient);
  padding: 2.5rem 0 3.25rem;
}
.hs-hero-copy { position: relative; animation: hs-rise 0.9s var(--hs-ease) both; }
@keyframes hs-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (min-width: 1024px) {
  .hs-hero { display: flex; align-items: center; min-height: clamp(27rem, 44.9vw, 45rem); background: var(--hs-cream); }
  .hs-hero-media { position: absolute; inset: 0; z-index: -1; aspect-ratio: auto; }
  .hs-hero-img { object-position: right center; }
  .hs-hero-media::after {
    top: 0;
    height: auto;
    background: linear-gradient(90deg, rgba(10, 23, 18, 0.93) 0%, rgba(10, 23, 18, 0.9) 22%, rgba(10, 23, 18, 0.84) 34%, rgba(10, 23, 18, 0.62) 36.5%, rgba(10, 23, 18, 0.26) 39%, rgba(10, 23, 18, 0) 41.5%);
  }
  .hs-hero-body { width: 100%; background: none; padding: 2.5rem 0; }
  .hs-hero-copy { margin-left: var(--hs-hero-pad); width: calc(40% - var(--hs-hero-pad)); min-width: 23rem; }
}

.hs-hero-title {
  margin: 1rem 0 0;
  font-family: var(--hs-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 1.6rem + 3.6vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--hs-cream);
}
@media (min-width: 1024px) {
  .hs-hero-title { margin-top: 0.9rem; font-size: clamp(2.25rem, 3.55vw, 4rem); }
}
.hs-hero-title-accent { display: block; color: var(--hs-gold-light); }
.hs-hero-rule { display: block; width: 4.5rem; height: 2px; margin-top: 1.35rem; background: var(--hs-gold); }
.hs-hero-sub {
  margin: 1.25rem 0 0;
  max-width: 30rem;
  font-size: 1.0625rem;
  font-weight: 300;
  line-height: 1.65;
  color: rgba(243, 234, 225, 0.92);
}
.hs-hero-ctas { display: grid; gap: 0.75rem; margin-top: 1.9rem; }
@media (min-width: 640px) {
  .hs-hero-ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; }
}
.hs-hero-note {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 1.1rem 0 0;
  font-size: 0.8125rem;
  color: rgba(243, 234, 225, 0.82);
}
.hs-dot { display: inline-block; width: 0.45rem; height: 0.45rem; border-radius: 999px; background: var(--hs-sage); box-shadow: 0 0 0 3px rgba(106, 153, 132, 0.25); flex-shrink: 0; }
/* Soft launch only (data-soft-only): the inline waitlist on the dark hero. Cream field, gold
   pill (the hero's own primary), light consent, error and success text. */
.hs-hero-waitlist {
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--hs-hair-soft);
  max-width: 30rem;
}
.hs-hero-waitlist[hidden] { display: none; }
.hs-hero-waitlist-kicker { margin: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hs-gold-light); }
.hs-hero-waitlist-form { margin-top: 0.75rem; }
.hs-hero-waitlist .btn-primary { background-color: var(--hs-gold); color: var(--hs-night); }
.hs-hero-waitlist .btn-primary:hover { background-color: var(--hs-gold-light); box-shadow: 0 10px 28px -12px rgba(184, 155, 98, 0.75); }
.hs-hero-waitlist .field:focus-visible { outline-color: var(--hs-gold-light); }
.hs-hero-waitlist .text-mutegray { color: rgba(243, 234, 225, 0.72); }
.hs-hero-waitlist .hs-error { color: #f0b4a6; }
.hs-hero-waitlist .hs-success { border-color: rgba(212, 186, 133, 0.5); background: rgba(243, 234, 225, 0.06); }
.hs-hero-waitlist .hs-success svg,
.hs-hero-waitlist .hs-success .text-forest { color: var(--hs-gold-light); }
/* 1024-1279: the narrowest copy column (the bottles start at 43 % of the hero). */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .hs-hero-body { padding: 2rem 0; }
  .hs-hero-rule { margin-top: 1rem; }
  .hs-hero-sub { margin-top: 0.9rem; font-size: 0.9375rem; line-height: 1.55; }
  .hs-hero-ctas { margin-top: 1.25rem; gap: 0.6rem; }
  .hs-hero-ctas .hs-pill { min-height: 2.75rem; padding: 0 1.35rem; font-size: 0.8125rem; }
  .hs-hero-note { margin-top: 0.8rem; font-size: 0.75rem; }
  .hs-hero-waitlist { margin-top: 0.9rem; padding-top: 0.75rem; }
}

.hs-emblem {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.25rem;
  height: 4.25rem;
  border-radius: 999px;
  background: var(--hs-cream);
  box-shadow: 0 0 0 1px var(--hs-gold), 0 0 0 6px rgba(10, 23, 18, 0.55), 0 0 44px 14px rgba(22, 126, 100, 0.55);
}
.hs-emblem img { width: 52%; height: auto; }


/* ------------------------------------------------------------------ chapters */

.hs-chapter { padding: 4rem 0; }
@media (min-width: 1024px) {
  .hs-chapter { padding: 6rem 0; }
}
.hs-chapter + .hs-chapter { padding-top: 0; }
.hs-chapter + .hs-chapter > .hs-wrap::before {
  content: '';
  display: block;
  height: 1px;
  margin-bottom: 4rem;
  background: linear-gradient(90deg, transparent, var(--hs-hair) 12%, var(--hs-hair) 88%, transparent);
}
@media (min-width: 1024px) {
  .hs-chapter + .hs-chapter > .hs-wrap::before { margin-bottom: 6rem; }
}

.hs-chapter-head { display: grid; gap: 1.5rem; margin-bottom: 2.25rem; }
@media (min-width: 1024px) {
  .hs-chapter-head { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 4rem; align-items: end; margin-bottom: 3rem; }
}
.hs-chapter-aside { display: grid; gap: 0.75rem; justify-items: start; }

/* Card rails: a swipeable row below 640 px (the next card peeks), a grid above. */
.hs-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 78%;
  gap: 1rem;
  margin: 0 -1.25rem;
  padding: 0.25rem 1.25rem 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 1.25rem;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--hs-gold) transparent;
}
.hs-rail > * { scroll-snap-align: start; min-width: 0; }
@media (min-width: 640px) {
  .hs-rail {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
}
@media (min-width: 768px) {
  .hs-rail--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 640px) and (max-width: 767.98px) {
  /* Two columns would leave the third spray alone: keep the swipe rail until 768. */
  .hs-rail--3 { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 46%; margin: 0 -2rem; padding: 0.25rem 2rem 1rem; overflow-x: auto; scroll-padding: 0 2rem; }
}
@media (min-width: 1024px) {
  .hs-rail--3 { gap: 1.75rem; }
}
/* Five cards: a swipe rail until 1280 (about 2.4 cards at 768, 3.4 at 1024, the next one
   peeking), five columns from 1280. Never five cramped cards in a row. */
@media (min-width: 640px) and (max-width: 1279.98px) {
  .hs-rail--5 { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 40%; margin: 0 -2rem; padding: 0.25rem 2rem 1rem; overflow-x: auto; scroll-padding: 0 2rem; }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .hs-rail--5 { grid-auto-columns: 28.5%; gap: 1.25rem; }
}
@media (min-width: 1280px) {
  .hs-rail--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.25rem; }
}

/* ---- the card family: spray cards (ProductCard) and concept cards (ConceptCard) share one
   frame, one 4:5 media box, one type stack and one footer row, so the two lines read as one
   store. The name link is stretched over the card; the footer CTA sits above it. */
.hs-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  container: hs-card / inline-size;
  background: var(--hs-paper);
  border: 1px solid var(--hs-hair);
  font-family: var(--hs-sans);
  transition: box-shadow 0.35s var(--hs-ease), transform 0.35s var(--hs-ease), border-color 0.35s var(--hs-ease);
}
.hs-card::after {
  content: '';
  position: absolute;
  left: 1.25rem;
  right: 1.25rem;
  top: -1px;
  z-index: 2;
  height: 2px;
  background: var(--hs-gold);
  transform: scaleX(0);
  transition: transform 0.4s var(--hs-ease);
  pointer-events: none;
}
.hs-card:hover { transform: translateY(-3px); box-shadow: var(--hs-shadow-lift); border-color: rgba(184, 155, 98, 0.7); }
.hs-card:hover::after { transform: scaleX(1); }
.hs-card:has(:focus-visible) { outline: 2px solid var(--hs-forest); outline-offset: 3px; }
.hs-card :focus-visible { outline: none; }
.hs-card .hs-card-cta:focus-visible { outline: 2px solid var(--hs-forest); outline-offset: 2px; }

.hs-card-media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--hs-sand); }
.hs-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--hs-ease);
}
.hs-card:hover .hs-card-media img { transform: scale(1.035); }
/* The spray "-front" masters: a 2:3 photo letterboxed into a square with flat near-white bands
   (x < 16.5 % and x > 83.5 %). Scaled 1.21 from 25 % height, the 4:5 frame shows only the photo
   (bands cropped) with the cap and the stone in view. */
.hs-card-media--banded img { transform: scale(1.21); transform-origin: 50% 25%; }
.hs-card:hover .hs-card-media--banded img { transform: scale(1.25); }

.hs-card-badge {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--hs-gold);
  border-radius: 999px;
  background: rgba(243, 234, 225, 0.94);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hs-gold-ink);
}
.hs-card-badge--solid { background: var(--hs-forest); border-color: var(--hs-forest); color: var(--hs-cream); }

.hs-card-body { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; padding: 1rem 1rem 1.05rem; container: hs-card-body / inline-size; }
@container hs-card (min-width: 15rem) {
  .hs-card-body { padding: 1.15rem 1.25rem 1.2rem; }
}
/* One line everywhere (ellipsis), so the names below line up across a row. */
.hs-card-kicker {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hs-muted);
}
.hs-card-dot { display: inline-block; flex-shrink: 0; width: 0.5rem; height: 0.5rem; border-radius: 999px; }
.hs-card-kicker .hs-card-dot { margin-right: 0.5rem; vertical-align: 0.05em; }
.hs-card-title {
  margin: 0.4rem 0 0;
  font-family: var(--hs-display);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--hs-forest);
}
.hs-card-title a { color: inherit; text-decoration: none; }
.hs-card-title a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
/* Two full lines, always reserved: no mid-word clip, and the rows below line up across a row. */
.hs-card-sub { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 3em; margin: 0.35rem 0 0; font-size: 0.8125rem; line-height: 1.5; color: var(--hs-muted); }
.hs-card-meta { display: flex; align-items: center; gap: 0.4rem; margin: 0.55rem 0 0; font-size: 0.75rem; font-weight: 500; color: var(--hs-emerald-ink); }
.hs-card-meta-icon { width: 0.9rem; height: 0.9rem; flex-shrink: 0; }
.hs-card-desc { display: none; margin: 0.75rem 0 0; font-size: 0.8125rem; line-height: 1.6; color: var(--hs-muted); }

.hs-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 0.95rem;
  border-top: 1px solid var(--hs-hair-soft);
}
.hs-card-body > :nth-last-child(2) { margin-bottom: 1rem; }
.hs-card-price { min-width: 0; }
.hs-card-amount { margin: 0; font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums lining-nums; color: var(--hs-charcoal); white-space: nowrap; }
.hs-card-unit { display: block; margin-top: 0.1rem; font-size: 0.75rem; font-weight: 400; color: var(--hs-muted); }
.hs-card-note { margin: 0.2rem 0 0; font-size: 0.8125rem; line-height: 1.45; color: var(--hs-muted); }
.hs-card-perday { font-weight: 600; color: var(--hs-forest); white-space: nowrap; }
.hs-card-inline { position: relative; z-index: 2; color: var(--hs-forest); text-decoration: underline; text-decoration-color: var(--hs-gold); text-underline-offset: 3px; }
.hs-card-cta {
  position: relative;
  z-index: 2;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0 1.1rem;
  border: 1px solid var(--hs-forest);
  border-radius: 999px;
  background: transparent;
  font-family: var(--hs-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--hs-forest);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s var(--hs-ease), color 0.25s var(--hs-ease);
}
.hs-card-cta:hover { background: var(--hs-forest); color: var(--hs-cream); }
/* A narrow card body (the 4- and 5-up grids, phones, the horizontal cards): the price block
   takes the full row and the CTA fills the row under it, so nothing is cramped or breaks
   mid-figure. Measured on the body, so it holds in the horizontal layouts too. */
@container hs-card-body (max-width: 20rem) {
  .hs-card-foot { flex-direction: column; align-items: stretch; gap: 0.7rem; }
  .hs-card-cta { width: 100%; }
}
@container hs-card-body (max-width: 11rem) {
  .hs-card-title { font-size: 1.125rem; }
}

/* Wide variant (home, Paw & Nose): editorial photo beside the copy. */
.hs-card--wide { flex-direction: row; }
.hs-card--wide .hs-card-media { flex: 0 0 42%; aspect-ratio: auto; min-height: 12rem; }
@media (min-width: 640px) {
  .hs-card--wide .hs-card-media { flex-basis: 46%; min-height: 15.5rem; }
  .hs-card--wide .hs-card-body { padding: 1.75rem 1.75rem 1.4rem; }
  .hs-card--wide .hs-card-title { font-size: 1.65rem; }
  .hs-card--wide .hs-card-sub { font-size: 0.9375rem; }
  .hs-card--wide .hs-card-desc { display: block; }
}

/* ---- listing grid, filter chips, counts */
/*
 * Listing grids (collections, concept collections, search, "Found in", related concepts) adapt
 * to their item count. Flex rows, centred, so a short last row (5 or 7 items) sits in the
 * middle; columns from --cols:
 *   phones <= 480: one horizontal card per row (photo beside the text);
 *   481-767: 2; 768-1023: 3; from 1024: 4, but 3 for 3, 5 or 6 items and 3x3 for 9 from 1280;
 *   1-2 items (from 481): horizontal feature cards (photo ~45 % beside the text), 2 per row max.
 * The count is read with :has() quantity queries, so it follows the client-side filters.
 */
.hs-grid { --cols: 1; --gap: 0.75rem; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); margin-top: 1.5rem; }
.hs-grid > * { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); min-width: 0; }
@media (min-width: 481px) {
  .hs-grid { --cols: 2; }
}
@media (min-width: 640px) {
  .hs-grid { --gap: 1.25rem; }
}
@media (min-width: 768px) {
  .hs-grid { --cols: 3; }
}
@media (min-width: 1024px) {
  .hs-grid { --cols: 4; }
  .hs-grid:has(> :nth-child(3)):not(:has(> :nth-child(4))),
  .hs-grid:has(> :nth-child(5)):not(:has(> :nth-child(7))) { --cols: 3; }
}
@media (min-width: 1280px) {
  .hs-grid { --gap: 1.5rem; }
  .hs-grid:has(> :nth-child(9)):not(:has(> :nth-child(10))) { --cols: 3; }
}
/* Grids inside a text column (the ingredient page) start at the column's edge. */
.hs-grid--start { justify-content: flex-start; }
@media (min-width: 481px) {
  .hs-grid--start:not(:has(> :nth-child(3))) > * { flex-basis: 100%; }
}

/* The horizontal card: phones (every listing card) and the 1-2 item feature cards. */
@media (max-width: 480px) {
  .hs-grid > .hs-card { flex-direction: row; }
  .hs-grid > .hs-card .hs-card-media { flex: 0 0 40%; aspect-ratio: 4 / 5; align-self: stretch; }
  .hs-grid > .hs-card .hs-card-badge { left: 0.5rem; top: 0.5rem; padding: 0.25rem 0.55rem; font-size: 0.5625rem; }
  .hs-grid > .hs-card .hs-card-title { font-size: 1.2rem; }
}
@media (min-width: 481px) {
  .hs-grid:not(:has(> :nth-child(3))) > * { flex: 0 1 36rem; }
  .hs-grid:not(:has(> :nth-child(3))) > .hs-card { flex-direction: row; }
  .hs-grid:not(:has(> :nth-child(3))) > .hs-card .hs-card-media { flex: 0 0 45%; aspect-ratio: 4 / 5; align-self: stretch; }
}
@media (min-width: 640px) {
  .hs-grid:not(:has(> :nth-child(3))) > .hs-card .hs-card-body { padding: 1.5rem 1.5rem 1.35rem; }
  .hs-grid:not(:has(> :nth-child(3))) > .hs-card .hs-card-title { font-size: 1.6rem; }
}
@media (min-width: 481px) {
  .hs-grid:not(:has(> :nth-child(3))) > .hs-card .hs-card-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; margin-bottom: 1rem; }
}
.hs-listbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--hs-hair); }
.hs-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.hs-chip {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0 1.1rem;
  border: 1px solid var(--hs-hair);
  border-radius: 999px;
  background: var(--hs-paper);
  font-family: var(--hs-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--hs-charcoal);
  cursor: pointer;
  transition: background-color 0.2s var(--hs-ease), border-color 0.2s var(--hs-ease), color 0.2s var(--hs-ease);
}
.hs-chip:hover { border-color: var(--hs-forest); }
.hs-chip[aria-pressed='true'] { background: var(--hs-forest); border-color: var(--hs-forest); color: var(--hs-cream); }
.hs-count { margin: 0; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em; color: var(--hs-gold-ink); }
.hs-filter-label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hs-gold-ink); }
.hs-check { display: flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; font-size: 0.8125rem; font-weight: 500; color: var(--hs-charcoal); cursor: pointer; }
.hs-check-box { width: 1.1rem; height: 1.1rem; flex-shrink: 0; accent-color: var(--hs-forest); }

/* "Not sure which one?" strip above the listing. Copy left, CTAs right from 768 px; the pills
   never wrap their label. */
.hs-finder {
  position: relative;
  display: grid;
  gap: 1rem;
  padding: 1.25rem 1.25rem 1.35rem;
  border: 1px solid var(--hs-hair);
  background: var(--hs-paper);
}
.hs-finder::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--hs-gold); }
@media (min-width: 768px) {
  .hs-finder { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2rem; padding: 1.35rem 1.75rem; }
}
.hs-finder-kicker { margin: 0; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hs-gold-ink); }
.hs-finder-copy { margin: 0.35rem 0 0; max-width: 40rem; font-size: 0.875rem; line-height: 1.6; color: var(--hs-muted); }
.hs-finder-ctas { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.hs-split { display: grid; gap: 2.25rem; }
@media (min-width: 1024px) {
  .hs-split { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 4rem; align-items: start; }
  .hs-split > .hs-chapter-head { position: sticky; top: 7rem; margin-bottom: 0; grid-template-columns: 1fr; gap: 1.5rem; }
}
.hs-stack { display: grid; gap: 1.25rem; }

/* ---- 04 Our Story */
.hs-story { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 768px) {
  .hs-story { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 3.5rem; }
}
@media (min-width: 1024px) {
  .hs-story { gap: 5.5rem; }
}
.hs-portrait { position: relative; width: min(100%, 22rem); margin: 0 auto; }
.hs-portrait-ring {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  padding: 10px;
  border: 1px solid var(--hs-gold);
}
.hs-portrait-ring::before {
  content: '';
  position: absolute;
  inset: -18px;
  border-radius: 999px;
  border: 1px solid var(--hs-hair-soft);
}
.hs-portrait-img { width: 100%; height: 100%; border-radius: 999px; overflow: hidden; background: var(--hs-sand); }
.hs-portrait-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; }
.hs-emblem--story { right: 0.5rem; bottom: 0.75rem; width: 4.5rem; height: 4.5rem; box-shadow: 0 0 0 1px var(--hs-gold), 0 0 0 6px var(--hs-cream), 0 0 34px 10px rgba(22, 126, 100, 0.35); }
.hs-caption { margin: 1.75rem 0 0; text-align: center; font-size: 0.75rem; font-weight: 300; letter-spacing: 0.04em; color: var(--hs-muted); }
.hs-story-copy p { margin: 0; }
.hs-story-text { display: grid; gap: 1rem; margin-top: 1.75rem; font-size: 0.9375rem; line-height: 1.75; color: var(--hs-muted); max-width: 36rem; }
.hs-quote {
  margin: 1.75rem 0 0;
  padding-left: 1.25rem;
  border-left: 2px solid var(--hs-gold);
  font-family: var(--hs-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 1.05rem + 1vw, 1.65rem);
  line-height: 1.3;
  color: var(--hs-forest);
  max-width: 34rem;
}
.hs-signature { margin-top: 1rem !important; font-size: 0.875rem; font-weight: 300; letter-spacing: 0.02em; color: var(--hs-charcoal); }
.hs-story-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; margin-top: 2rem; }

/* ------------------------------------------------------------------ proof strip */

.hs-proof { background: var(--hs-sand); border-top: 1px solid var(--hs-hair); border-bottom: 1px solid var(--hs-hair); }
.hs-proof-grid { display: grid; gap: 1.5rem; padding-top: 2.5rem; padding-bottom: 2.5rem; }
@media (min-width: 768px) {
  .hs-proof-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .hs-proof-item + .hs-proof-item { border-left: 1px solid var(--hs-hair); }
  .hs-proof-item { padding: 0 1.75rem; }
  .hs-proof-item:first-child { padding-left: 0; }
}
.hs-proof-item { display: flex; align-items: flex-start; gap: 1rem; }
.hs-ring-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  border-radius: 999px;
  border: 1px solid var(--hs-gold);
  color: var(--hs-forest);
}
.hs-ring-icon svg { width: 1.25rem; height: 1.25rem; }
.hs-proof-title { margin: 0; font-size: 0.9375rem; font-weight: 600; color: var(--hs-forest); }
.hs-proof-sub { margin: 0.2rem 0 0; font-size: 0.8125rem; line-height: 1.55; color: var(--hs-muted); }

/* ------------------------------------------------------------------ FAQ */

.hs-faq-grid { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) {
  .hs-faq-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 4rem; }
}
.hs-faq .divide-beige > * + * { border-color: var(--hs-hair) !important; }
.hs-faq .border-beige { border-color: var(--hs-hair) !important; }
.hs-faq button { min-height: 3.5rem; padding-top: 1.1rem; padding-bottom: 1.1rem; font-family: var(--hs-sans); }
.hs-faq button > span { font-family: var(--hs-sans); font-size: 1rem; font-weight: 500; color: var(--hs-forest); }
.hs-faq button > svg { color: var(--hs-gold-ink); }
.hs-faq [hidden] + *,
.hs-faq button + div { font-family: var(--hs-sans); font-size: 0.9375rem; line-height: 1.75; color: var(--hs-muted); }

/* ------------------------------------------------------------------ closing waitlist */

.hs-closing {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 50% 70% at 100% 0%, rgba(22, 126, 100, 0.25), transparent 70%),
    var(--hs-gradient);
  color: var(--hs-cream);
  padding: 4.5rem 0;
}
@media (min-width: 1024px) {
  .hs-closing { padding: 6.5rem 0; }
}
.hs-closing::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--hs-gold);
}
.hs-closing-grid { display: grid; gap: 2.75rem; align-items: center; }
@media (min-width: 1024px) {
  .hs-closing-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5rem; }
}
.hs-closing-copy { position: relative; }
.hs-closing-sub { margin: 1.4rem 0 0; max-width: 30rem; font-size: 1rem; font-weight: 300; line-height: 1.7; color: rgba(243, 234, 225, 0.88); }
.hs-closing-emblem { position: relative; display: inline-flex; margin-bottom: 1.75rem; }
.hs-closing-emblem .hs-emblem { position: relative; }
/* The gold frame sits inside the card (inset 8px), so nothing reaches past the container. */
.hs-waitlist-card {
  position: relative;
  scroll-margin-top: 7rem;
  padding: 2rem 1.75rem;
  background: var(--hs-cream);
  color: var(--hs-charcoal);
  font-family: var(--hs-sans);
  border: 1px solid var(--hs-gold);
}
.hs-waitlist-card::before { content: ''; position: absolute; inset: 7px; border: 1px solid var(--hs-hair); pointer-events: none; }
.hs-waitlist-card > * { position: relative; }
@media (min-width: 640px) {
  .hs-waitlist-card { padding: 2.5rem 2.5rem 2.25rem; }
}
.hs-waitlist-kicker { margin: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hs-gold-ink); }
.hs-waitlist-title { margin: 0.5rem 0 0; font-family: var(--hs-display); font-weight: 700; font-size: 1.85rem; line-height: 1.15; color: var(--hs-forest); }
.hs-waitlist-copy { margin: 0.5rem 0 0; font-size: 0.875rem; line-height: 1.6; color: var(--hs-muted); }
.hs-waitlist-card :focus-visible { outline-color: var(--hs-forest); }
.hs-waitlist-card input,
.hs-waitlist-card select { font-family: var(--hs-sans); border-color: rgba(184, 155, 98, 0.6) !important; border-radius: 999px; padding-left: 1.15rem; min-height: 3rem; }
.hs-waitlist-card .text-mutegray { color: var(--hs-muted); }

/* ------------------------------------------------------------------ trust strip (site-wide) */

.hs-trust { background: var(--hs-cream); border-top: 1px solid var(--hs-hair); font-family: var(--hs-sans); }
.hs-trust-grid { display: grid; gap: 0.5rem; padding-top: 2rem; padding-bottom: 2rem; }
@media (min-width: 640px) {
  .hs-trust-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; padding-top: 2.5rem; padding-bottom: 2.5rem; }
}
.hs-trust-item { display: flex; align-items: center; gap: 1rem; min-height: 3.5rem; text-decoration: none; }
@media (min-width: 640px) {
  .hs-trust-item { flex-direction: column; justify-content: flex-start; text-align: center; gap: 0.6rem; }
}
.hs-trust-item .hs-ring-icon { transition: background-color 0.25s var(--hs-ease), color 0.25s var(--hs-ease); }
.hs-trust-item:hover .hs-ring-icon { background: var(--hs-forest); color: var(--hs-cream); border-color: var(--hs-forest); }
.hs-trust-title { display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hs-forest); }
.hs-trust-sub { display: block; margin-top: 0.15rem; font-size: 0.8125rem; color: var(--hs-muted); }

/* ------------------------------------------------------------------ footer */

.hs-footer {
  position: relative;
  background:
    radial-gradient(ellipse 45% 60% at 100% 100%, rgba(22, 126, 100, 0.22), transparent 70%),
    linear-gradient(180deg, var(--hs-forest) 0%, var(--hs-night) 100%);
  color: var(--hs-cream);
  font-family: var(--hs-sans);
  border-top: 1px solid var(--hs-gold);
}
.hs-footer-main { display: grid; gap: 3rem; padding-top: 4rem; padding-bottom: 3.5rem; }
@media (min-width: 1024px) {
  .hs-footer-main { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 4rem; padding-top: 5rem; }
}
/* minmax(0, 1fr): the email field's intrinsic width (wider on iOS Safari) must not widen the
   column past the page; the form is capped to the column, and the input (min-w-0) shrinks. */
.hs-footer-brand { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; align-content: start; }
.hs-footer-brand form { max-width: min(100%, 24rem); }
.hs-footer-brand .hs-logo img { height: 2rem; }
.hs-footer-tag { margin: 1rem 0 0; max-width: 20rem; font-size: 0.875rem; font-weight: 300; line-height: 1.7; color: rgba(243, 234, 225, 0.8); }
.hs-footer-brand form button { border-radius: 0 999px 999px 0; font-family: var(--hs-sans); }
.hs-footer-brand form input { border-radius: 999px 0 0 999px; font-family: var(--hs-sans); padding-left: 1.15rem; }
.hs-footer-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; }
@media (min-width: 640px) {
  .hs-footer-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.hs-footer-label {
  margin: 0 0 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--hs-hair);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hs-gold-light);
}
.hs-footer-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.1rem; }
.hs-footer-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  font-size: 0.875rem;
  color: rgba(243, 234, 225, 0.78);
  text-decoration: none;
  transition: color 0.2s var(--hs-ease);
}
.hs-footer-link:hover { color: var(--hs-cream); text-decoration: underline; text-decoration-color: var(--hs-gold); text-underline-offset: 4px; }
.hs-footer-legal { border-top: 1px solid var(--hs-hair-soft); }
.hs-footer-legal-inner { display: grid; gap: 1.5rem; padding-top: 2rem; padding-bottom: 2.25rem; font-size: 0.75rem; color: rgba(243, 234, 225, 0.66); }
.hs-footer-legal-inner p { margin: 0; max-width: 56rem; line-height: 1.7; }
.hs-footer-meta { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 640px) {
  .hs-footer-meta { flex-direction: row; align-items: center; justify-content: space-between; }
}
.hs-footer-address { display: block; margin-top: 0.15rem; }
.hs-footer-pay { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.hs-footer-pay-list { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.hs-footer-chip { border: 1px solid var(--hs-hair); border-radius: 999px; padding: 0.15rem 0.55rem; font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.06em; color: rgba(243, 234, 225, 0.7); }

/* ================================================================== inner pages */

/* ---- breadcrumb: 40 px tap targets, gold separators */
.hs-crumbs { padding: 0.35rem 0; font-family: var(--hs-sans); }
.hs-crumbs-list { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.35rem; margin: 0; padding: 0; list-style: none; font-size: 0.75rem; color: var(--hs-muted); }
.hs-crumbs-list > li { display: inline-flex; align-items: center; gap: 0.35rem; min-width: 0; }
.hs-crumbs-link { display: inline-flex; align-items: center; min-height: 2.5rem; color: var(--hs-muted); text-decoration: none; }
.hs-crumbs-link:hover { color: var(--hs-forest); text-decoration: underline; text-decoration-color: var(--hs-gold); text-underline-offset: 4px; }
.hs-crumbs-sep { width: 0.75rem; height: 0.75rem; flex-shrink: 0; color: var(--hs-gold-ink); }
.hs-crumbs-current { display: inline-flex; align-items: center; min-height: 2.5rem; font-weight: 500; color: var(--hs-forest); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 62vw; }

/* ---- page hero */
.hs-pagehero {
  position: relative;
  padding: 3rem 0 3.25rem;
  background: var(--hs-cream);
  border-bottom: 1px solid var(--hs-hair);
}
@media (min-width: 1024px) {
  .hs-pagehero { padding: 4.5rem 0 4.75rem; }
}
.hs-pagehero--compact { padding: 2.25rem 0 2.5rem; }
@media (min-width: 1024px) {
  .hs-pagehero--compact { padding: 3.25rem 0 3.5rem; }
}
.hs-pagehero-copy { max-width: 46rem; margin: 0 auto; }
.hs-pagehero-title {
  margin: 0.9rem 0 0;
  font-family: var(--hs-display);
  font-weight: 700;
  font-size: clamp(2.125rem, 1.5rem + 2.6vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--hs-forest);
  text-wrap: balance;
}
.hs-pagehero-sub { margin: 1.25rem auto 0; max-width: 36rem; font-size: 1rem; font-weight: 300; line-height: 1.7; color: var(--hs-muted); text-wrap: pretty; }
.hs-rule--center { margin-left: auto; margin-right: auto; }

/* ---- product pages: gallery */
.hs-gallery-main {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  /* the photo-white of the spray masters' own side bands: the front shot reads as one image */
  background: var(--hs-photo);
  border: 1px solid var(--hs-hair);
}
.hs-gallery-img { display: block; width: 100%; height: 100%; object-fit: contain; }
.hs-gallery-thumbs { display: grid; gap: 0.5rem; margin-top: 0.75rem; }
.hs-gallery-thumbs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hs-gallery-thumbs--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hs-gallery-thumbs--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.hs-gallery-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--hs-hair);
  background: var(--hs-photo);
  cursor: pointer;
  transition: border-color 0.2s var(--hs-ease), box-shadow 0.2s var(--hs-ease);
}
.hs-gallery-thumb:hover { border-color: var(--hs-gold); }
.hs-gallery-thumb[aria-selected='true'],
.hs-gallery-thumb[aria-pressed='true'] { border-color: var(--hs-forest); box-shadow: inset 0 0 0 1px var(--hs-forest), 0 0 0 3px rgba(184, 155, 98, 0.35); }

/* ---- product pages: buy box */
.hs-pdp-kicker { display: flex; align-items: center; gap: 0.55rem; margin: 0; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hs-gold-ink); }
.hs-pdp-title { margin: 0.6rem 0 0; font-family: var(--hs-display); font-weight: 700; font-size: clamp(2.25rem, 1.7rem + 2.2vw, 3.25rem); line-height: 1.04; letter-spacing: -0.015em; color: var(--hs-forest); }
.hs-pdp-lede { margin: 0.9rem 0 0; max-width: 30rem; font-size: 1rem; font-weight: 300; line-height: 1.65; color: var(--hs-charcoal); }
.hs-pdp-meta { display: flex; align-items: center; gap: 0.5rem; margin: 0.85rem 0 0; font-size: 0.8125rem; font-weight: 500; color: var(--hs-emerald-ink); }
.hs-pdp-meta svg { width: 1rem; height: 1rem; flex-shrink: 0; }

/* A bordered panel with a hairline head (on-the-label, why-these, cost per day). */
.hs-panel { border: 1px solid var(--hs-hair); background: var(--hs-paper); }
.hs-panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 0.75rem; padding: 0.6rem 1rem; border-bottom: 1px solid var(--hs-hair-soft); }
.hs-panel-title { display: flex; align-items: center; gap: 0.45rem; margin: 0; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hs-gold-ink); }
.hs-panel-icon { width: 0.9rem; height: 0.9rem; color: var(--hs-gold-ink); }
.hs-panel-figure { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; padding: 0.9rem 1rem 0; }
.hs-panel-figure .price { font-size: 1.875rem; line-height: 1; color: var(--hs-forest); }
.hs-panel-note { margin: 0; padding: 0.4rem 1rem 0; font-size: 0.75rem; line-height: 1.6; color: var(--hs-muted); }
.hs-panel-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.85rem; padding: 0.45rem 1rem; border-top: 1px solid var(--hs-hair-soft); font-size: 0.75rem; }

/* Segmented choices (pet weight, times a day, delivery interval): 40 px pills, state by
   fill AND weight, never colour alone (the pressed one is also bold and outlined). */
.hs-segs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.hs-segs--inline { color: var(--hs-muted); }
.hs-segs-label { margin-right: 0.25rem; font-size: 0.75rem; color: var(--hs-muted); }
.hs-seg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0 0.9rem;
  border: 1px solid var(--hs-hair);
  border-radius: 999px;
  background: transparent;
  font-family: var(--hs-sans);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--hs-charcoal);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s var(--hs-ease), border-color 0.2s var(--hs-ease), color 0.2s var(--hs-ease);
}
.hs-seg:hover { border-color: var(--hs-forest); }
.hs-seg[aria-pressed='true'],
.hs-seg[aria-checked='true'] { background: var(--hs-forest); border-color: var(--hs-forest); color: var(--hs-cream); font-weight: 700; }
.hs-seg--quiet { min-height: 2.5rem; padding: 0 0.8rem; }
.hs-seg--quiet[aria-pressed='true'] { background: var(--hs-sand); border-color: var(--hs-forest); color: var(--hs-forest); }
.hs-seg--fill { flex: 1 1 0; }

/* Purchase options (store preview): selectable cards. */
.hs-option {
  display: block;
  padding: 1rem 1.1rem;
  border: 1px solid var(--hs-hair);
  background: rgba(251, 247, 242, 0.6);
  cursor: pointer;
  transition: border-color 0.2s var(--hs-ease), background-color 0.2s var(--hs-ease), box-shadow 0.2s var(--hs-ease);
}
.hs-option--row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.hs-option:hover { border-color: var(--hs-gold); }
.hs-option--on { border-color: var(--hs-forest); background: var(--hs-paper); box-shadow: inset 3px 0 0 var(--hs-gold); }

.hs-price-lg { font-size: 2.25rem; line-height: 1; color: var(--hs-forest); }

/* The launch offer box (soft launch) and the guarantee link. */
.hs-offer {
  position: relative;
  margin-top: 1.25rem;
  padding: 1.25rem 1.25rem 1.1rem;
  border: 1px solid var(--hs-gold);
  background:
    radial-gradient(ellipse 60% 80% at 100% 0%, rgba(184, 155, 98, 0.16), transparent 70%),
    var(--hs-paper);
}
.hs-offer-kicker { margin: 0; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hs-gold-ink); }
.hs-offer-copy { margin: 0.5rem 0 0; font-size: 0.875rem; line-height: 1.65; color: var(--hs-charcoal); }
.hs-guarantee {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.95rem 1.1rem;
  border: 1px solid var(--hs-hair);
  background: var(--hs-paper);
  text-decoration: none;
  transition: border-color 0.25s var(--hs-ease);
}
.hs-guarantee:hover { border-color: var(--hs-gold); }
.hs-guarantee:hover .hs-ring-icon { background: var(--hs-forest); color: var(--hs-cream); border-color: var(--hs-forest); }
.hs-guarantee-title { display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hs-forest); }
.hs-guarantee-sub { display: block; margin-top: 0.15rem; font-size: 0.8125rem; line-height: 1.5; color: var(--hs-muted); }

.hs-qty { display: flex; align-items: center; border: 1px solid var(--hs-field-line); border-radius: 999px; background: var(--hs-cream); }
.hs-qty button { border-radius: 999px; }

.hs-field-auto { width: 100%; }
@media (min-width: 640px) {
  .hs-field-auto { width: auto; }
}
.hs-success { display: flex; align-items: flex-start; gap: 0.75rem; padding: 1.1rem 1.25rem; border: 1px solid rgba(22, 126, 100, 0.45); background: rgba(22, 126, 100, 0.06); }
.hs-success svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; margin-top: 0.1rem; color: var(--hs-emerald-ink); }
.hs-error { margin: 0; font-size: 0.75rem; color: var(--hs-danger); }

.hs-pdp { display: grid; gap: 2.5rem; padding-top: 0.5rem; padding-bottom: 4rem; }
@media (min-width: 1024px) {
  .hs-pdp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; padding-bottom: 5.5rem; }
}
@media (min-width: 1280px) {
  .hs-pdp { gap: 5rem; }
}
.hs-note { padding: 1rem 1.1rem; border-left: 2px solid var(--hs-gold); background: var(--hs-paper); font-size: 0.8125rem; line-height: 1.65; color: var(--hs-muted); }

/* ---- concept pages (/products/<concept>): in development, not for sale */
.hs-section-title {
  margin: 0.8rem 0 0;
  font-family: var(--hs-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--hs-forest);
  text-wrap: balance;
}

/* Status: the pill and the stage line, then the 4-step track. The current step is marked by
   its position, a gold ring, a "Now" label and aria-current="step"; done steps carry a check;
   colour is never the only signal. */
.hs-status { margin-top: 1.5rem; padding: 1.1rem 1.15rem 1.2rem; border: 1px solid var(--hs-hair); background: var(--hs-paper); }
.hs-status-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; margin: 0; }
.hs-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.8rem 0.35rem 0.65rem;
  border: 1px solid var(--hs-gold);
  border-radius: 999px;
  background: var(--hs-cream);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hs-gold-ink);
}
.hs-status-pill svg { width: 0.95rem; height: 0.95rem; }
.hs-status-step { font-size: 0.8125rem; font-weight: 500; color: var(--hs-forest); }
.hs-stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 1.15rem 0 0; padding: 0; list-style: none; }
.hs-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; text-align: center; min-width: 0; }
/* the connector to the previous step, drawn from this step's mark */
.hs-stage + .hs-stage::before {
  content: '';
  position: absolute;
  top: 1rem;
  right: calc(50% + 1.15rem);
  width: calc(100% - 2.3rem);
  height: 1px;
  background: var(--hs-hair);
}
.hs-stage--done + .hs-stage::before { height: 2px; background: var(--hs-forest); }
.hs-stage-mark {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--hs-hair);
  border-radius: 999px;
  background: var(--hs-cream);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--hs-muted);
}
.hs-stage-mark svg { width: 1rem; height: 1rem; }
.hs-stage--done .hs-stage-mark { border-color: var(--hs-forest); background: var(--hs-forest); color: var(--hs-cream); }
.hs-stage--current .hs-stage-mark { border: 2px solid var(--hs-gold); background: var(--hs-paper); color: var(--hs-forest); box-shadow: 0 0 0 4px rgba(184, 155, 98, 0.18); }
.hs-stage-name { font-size: 0.75rem; line-height: 1.3; color: var(--hs-muted); overflow-wrap: anywhere; }
.hs-stage--current .hs-stage-name { font-weight: 600; color: var(--hs-forest); }
.hs-stage--done .hs-stage-name { color: var(--hs-forest); }
.hs-stage-now { padding: 0.1rem 0.45rem; border-radius: 999px; background: var(--hs-forest); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hs-cream); }

.hs-concept-desc { margin: 1.35rem 0 0; max-width: 34rem; font-size: 0.9375rem; line-height: 1.7; color: var(--hs-muted); }

.hs-facts { display: grid; gap: 0; margin: 1.35rem 0 0; border-top: 1px solid var(--hs-hair); }
.hs-fact { display: grid; gap: 0.25rem; padding: 0.9rem 0; border-bottom: 1px solid var(--hs-hair); }
@media (min-width: 640px) {
  .hs-fact { grid-template-columns: 11rem minmax(0, 1fr); gap: 1.25rem; align-items: baseline; }
}
.hs-fact dt { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hs-gold-ink); }
.hs-fact dd { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--hs-charcoal); }

/* Development targets: chips with the labeling note directly under them, in one box. */
.hs-targets { margin-top: 1.35rem; padding: 1.1rem 1.15rem 1rem; border: 1px solid rgba(184, 155, 98, 0.4); background: var(--hs-cream); }
.hs-targets-title { margin: 0; font-family: var(--hs-sans); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hs-gold-ink); }
.hs-targets-list { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0.75rem 0 0; padding: 0; list-style: none; }
.hs-target {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--hs-hair);
  border-radius: 999px;
  background: var(--hs-cream);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--hs-forest);
}
.hs-target::before { content: ''; width: 0.4rem; height: 0.4rem; border: 1px solid var(--hs-gold-ink); border-radius: 999px; }
.hs-targets-note { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0.8rem 0 0; font-size: 0.75rem; line-height: 1.6; color: var(--hs-muted); }
.hs-targets-note svg { width: 1rem; height: 1rem; flex-shrink: 0; margin-top: 0.1rem; color: var(--hs-gold-ink); }

/* Notify me: the waitlist form on a forest-ground card. */
.hs-notify {
  position: relative;
  scroll-margin-top: 7rem;
  margin-top: 1.75rem;
  padding: 1.5rem 1.35rem 1.35rem;
  border: 1px solid var(--hs-gold);
  background:
    radial-gradient(ellipse 60% 80% at 100% 0%, rgba(184, 155, 98, 0.16), transparent 70%),
    var(--hs-paper);
}
@media (min-width: 640px) {
  .hs-notify { padding: 1.75rem 1.75rem 1.5rem; }
}
.hs-notify-title { margin: 0; font-family: var(--hs-display); font-weight: 700; font-size: 1.6rem; line-height: 1.15; color: var(--hs-forest); }
.hs-notify-copy { margin: 0.45rem 0 0; font-size: 0.875rem; line-height: 1.6; color: var(--hs-muted); }

/* How we're developing the line */
.hs-principles { position: relative; margin-top: 1rem; padding: 3.5rem 0; background: var(--hs-sand); border-top: 1px solid var(--hs-hair); border-bottom: 1px solid var(--hs-hair); }
@media (min-width: 1024px) {
  .hs-principles { padding: 4.5rem 0; }
}
.hs-principles-list { display: grid; gap: 0; margin: 2rem 0 0; padding: 0; list-style: none; }
@media (min-width: 768px) {
  .hs-principles-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2.5rem; }
}
@media (min-width: 1024px) {
  .hs-principles-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 2rem; }
}
.hs-principle { display: flex; gap: 1rem; padding: 1.1rem 0; border-top: 1px solid var(--hs-hair); }
@media (min-width: 1024px) {
  .hs-principle { flex-direction: column; gap: 0.75rem; padding: 1.35rem 0 0; }
}
.hs-principle-num { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.08em; color: var(--hs-gold-ink); }
.hs-principle-text { font-size: 0.9375rem; line-height: 1.6; color: var(--hs-charcoal); }

.hs-related { padding-top: 3.5rem; padding-bottom: 4rem; }
@media (min-width: 1024px) {
  .hs-related { padding-top: 4.5rem; padding-bottom: 5rem; }
}
.hs-related-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.5rem 1.5rem; }
.hs-related-head .hs-section-title { margin: 0; }

.hs-concept-info { grid-area: info; min-width: 0; }
.hs-principles-head { max-width: 40rem; }

/* Concept pages: the short gallery column stays in view beside the long info column. */
.hs-gallery { min-width: 0; }
@media (min-width: 1024px) {
  .hs-pdp--concept .hs-gallery { position: sticky; top: 6.5rem; align-self: start; }
}

/* ---- concept collection hero (/collections/topical-care, formats, care areas): the dark
   house panel with the copy and a balanced composition of three concept photos (one tall,
   two stacked) in gold-hairline frames. */
.hs-chero {
  position: relative;
  overflow: hidden;
  padding: 2.75rem 0 3rem;
  background:
    radial-gradient(ellipse 55% 70% at 100% 0%, rgba(22, 126, 100, 0.26), transparent 70%),
    radial-gradient(ellipse 40% 50% at 0% 100%, rgba(184, 155, 98, 0.12), transparent 70%),
    var(--hs-gradient);
  color: var(--hs-cream);
}
.hs-chero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--hs-gold); }
@media (min-width: 1024px) {
  .hs-chero { padding: 4.25rem 0 4.5rem; }
}
.hs-chero-grid { display: grid; gap: 2.25rem; align-items: center; }
@media (min-width: 768px) {
  .hs-chero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; }
}
@media (min-width: 1024px) {
  .hs-chero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 4.5rem; }
}
.hs-chero-copy { position: relative; animation: hs-rise 0.9s var(--hs-ease) both; }
.hs-chero-title {
  margin: 1rem 0 0;
  font-family: var(--hs-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 1.55rem + 2.9vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--hs-cream);
  text-wrap: balance;
}
.hs-chero-sub { margin: 1.25rem 0 0; max-width: 32rem; font-size: 1rem; font-weight: 300; line-height: 1.7; color: rgba(243, 234, 225, 0.88); }
.hs-chero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin-top: 1.75rem; }
.hs-chero-meta { display: flex; align-items: center; gap: 0.6rem; margin: 0; font-size: 0.8125rem; color: rgba(243, 234, 225, 0.82); }
.hs-chero-media {
  /* landscape lead (~4:3: 8 wide x two 3-wide squares + gap tall) with two squares beside it */
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 3fr);
  grid-template-rows: auto auto;
  gap: 0.75rem;
  max-width: 38rem;
  margin: 0 auto;
  width: 100%;
}
@media (min-width: 1024px) {
  .hs-chero-media { gap: 0.875rem; margin-right: 0; }
}
.hs-chero-shot { position: relative; margin: 0; overflow: hidden; background: var(--hs-sand); box-shadow: 0 0 0 1px rgba(184, 155, 98, 0.65), 0 24px 40px -24px rgba(0, 0, 0, 0.6); }
.hs-chero-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--hs-focus, 50% 35%); } /* bias to the upper third: pumps and caps matter, table tops don't */
.hs-chero-shot--1 { grid-row: 1 / span 2; min-height: 100%; }
/* the lead fills its frame rather than sizing it, so a square photo cannot make the lead taller
   than the two squares beside it */
.hs-chero-shot--1 picture, .hs-chero-shot--1 img { position: absolute; inset: 0; }
.hs-chero-shot--2,
.hs-chero-shot--3 { aspect-ratio: 1 / 1; }
/* phones: one photo, wide, so the product grid starts within the first screen */
@media (max-width: 767px) {
  .hs-chero { padding: 1.75rem 0 2rem; }
  .hs-chero-grid { gap: 1.5rem; }
  .hs-chero-title { margin-top: 0.75rem; font-size: 2.25rem; }
  .hs-chero-sub { margin-top: 0.875rem; font-size: 0.9375rem; line-height: 1.6; }
  .hs-chero-ctas { margin-top: 1.25rem; }
  .hs-chero-media { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; max-width: none; }
  .hs-chero-shot--1 { grid-row: auto; min-height: 0; aspect-ratio: 16 / 10; }
  .hs-chero-shot--2,
  .hs-chero-shot--3 { display: none; }
}


/* ---- small commerce controls (cart, drawer, checkout): 40 px targets in the house look */
.hs-qty--sm { display: inline-flex; align-items: center; }
.hs-qty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--hs-forest);
  cursor: pointer;
}
.hs-qty-btn:hover { background: rgba(184, 155, 98, 0.16); }
.hs-qty-btn:disabled { opacity: 0.3; cursor: not-allowed; background: transparent; }
.field.hs-field-sm { width: auto; min-height: 2.5rem; padding: 0.4rem 2.25rem 0.4rem 0.9rem; font-size: 0.75rem; background-position: right 0.75rem center; }
.hs-thumb { display: block; overflow: hidden; background: var(--hs-photo); box-shadow: inset 0 0 0 1px var(--hs-hair); }
.hs-thumb img { mix-blend-mode: multiply; }
.hs-search-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 2.75rem;
  border: 0;
  background: transparent;
  font-family: var(--hs-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
  color: var(--hs-forest);
}
.hs-search-input::placeholder { color: rgba(74, 85, 96, 0.6); font-weight: 400; }
.hs-search-input:focus { outline: none; }
.hs-search-input:focus-visible { outline: 2px solid var(--hs-forest); outline-offset: 4px; }
.hs-table-link { display: flex; align-items: center; gap: 0.75rem; min-height: 2.5rem; }
/* Text buttons ("Remove", "Retake quiz", "Back"...): a 40 px target without moving the type. */
button.underline { display: inline-flex; align-items: center; min-height: 2.5rem; white-space: nowrap; text-decoration-color: var(--hs-gold); text-underline-offset: 3px; }
a.underline { text-decoration-color: var(--hs-gold); }

/* ---- quiz */
.hs-progress { position: relative; height: 3px; margin-top: 0.6rem; background: var(--hs-hair-soft); overflow: hidden; border-radius: 999px; }
.hs-progress-bar { height: 100%; background: var(--hs-gold); border-radius: 999px; transition: width 0.4s var(--hs-ease); }
.hs-quiz-option {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 3.5rem;
  padding: 0 1.25rem;
  border: 1px solid var(--hs-hair);
  background: var(--hs-paper);
  font-family: var(--hs-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--hs-charcoal);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s var(--hs-ease), box-shadow 0.2s var(--hs-ease), background-color 0.2s var(--hs-ease);
}
.hs-quiz-option::after {
  content: '';
  position: absolute;
  right: 1.25rem;
  width: 0.5rem;
  height: 0.5rem;
  border-top: 1.5px solid var(--hs-gold-ink);
  border-right: 1.5px solid var(--hs-gold-ink);
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 0.2s var(--hs-ease), transform 0.2s var(--hs-ease);
}
.hs-quiz-option:hover { border-color: var(--hs-forest); box-shadow: inset 3px 0 0 var(--hs-gold); }
.hs-quiz-option:hover::after { opacity: 1; transform: translateX(2px) rotate(45deg); }
.hs-quiz-option[aria-pressed='true'] { border-color: var(--hs-forest); background: var(--hs-sand); box-shadow: inset 3px 0 0 var(--hs-gold); }
.hs-quiz-option[aria-pressed='true']::after { opacity: 1; }
.hs-quiz h2:focus { outline: none; }

/* ---- listings: compare chart spacing */
.hs-compare { padding-top: 3.5rem; padding-bottom: 4rem; }
@media (min-width: 1024px) {
  .hs-compare { padding-top: 4.5rem; padding-bottom: 5rem; }
}

/* ---- "Join the pack" email capture: the house dark panel, pill fields on dark */
.hs-capture {
  position: relative;
  padding: 3.5rem 0;
  background:
    radial-gradient(ellipse 50% 70% at 100% 0%, rgba(22, 126, 100, 0.25), transparent 70%),
    var(--hs-gradient);
  color: var(--hs-cream);
}
.hs-capture::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--hs-gold); }
@media (min-width: 1024px) {
  .hs-capture { padding: 5rem 0; }
}
.hs-field-dark {
  min-height: 3rem;
  padding: 0.75rem 1.15rem;
  border: 1px solid rgba(243, 234, 225, 0.45);
  border-radius: 999px;
  background: rgba(243, 234, 225, 0.06);
  font-family: var(--hs-sans);
  font-size: 0.875rem;
  color: var(--hs-cream);
  transition: border-color 0.2s var(--hs-ease), background-color 0.2s var(--hs-ease);
}
.hs-field-dark::placeholder { color: rgba(243, 234, 225, 0.72); }
.hs-field-dark:hover { border-color: var(--hs-gold-light); }
.hs-field-dark:focus { border-color: var(--hs-gold-light); background: rgba(243, 234, 225, 0.1); outline: none; }
.hs-field-dark:focus-visible { outline: 2px solid var(--hs-gold-light); outline-offset: 2px; }
.hs-field-dark--select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4BA85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 0.9rem;
}
.hs-field-dark--select option { color: var(--hs-charcoal); }
.hs-check-box--gold { accent-color: var(--hs-gold); }
.hs-capture-done { position: relative; padding: 2rem; border: 1px solid rgba(184, 155, 98, 0.6); text-align: center; }

/* A light closing call to action (about): gold hairlines, the forest pill. */
.hs-ctaband { position: relative; padding: 4rem 0; background: var(--hs-cream); border-top: 1px solid var(--hs-hair); }
@media (min-width: 1024px) {
  .hs-ctaband { padding: 5.5rem 0; }
}
.hs-ctaband .hs-section-title { max-width: 40rem; margin-left: auto; margin-right: auto; font-size: clamp(2rem, 1.5rem + 2vw, 3rem); }

/* Small uppercase labels of the legacy templates (dt labels, panel heads): the house gold ink. */
.uppercase.text-mutegray,
.uppercase.text-charcoal\/70 { color: var(--hs-gold-ink); font-weight: 600; letter-spacing: 0.14em; }

.uppercase.text-botanical { color: var(--hs-gold-ink); }

/* Mega menu between 1024 and 1279: tighter gutters. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .hs-mega-grid { gap: 1.5rem; }
  .hs-mega-products { gap: 0.85rem 0.75rem; }
}
.hs-mega-col > .hs-mega-status { display: inline-flex; margin: -0.4rem 0 1rem; padding: 0.2rem 0.6rem; border: 1px solid var(--hs-gold); border-radius: 999px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hs-gold-ink); }

/* The video duration chip sits on a photo: dark enough for AA on any frame. */
.bg-charcoal\/55 { background-color: rgba(10, 23, 18, 0.82); }

/* Reduced motion: no entrance animations, no hover travel, no smooth scrolling. Colour
   transitions are cut to an instant as well, site-wide (legacy utilities included). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  ::before,
  ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .hs-pill:hover,
  .hs-card:hover,
  .hs-card:hover .hs-card-media img,
  :is(.btn, .btn-primary, .btn-outline, .btn-light):hover { transform: none; }
  .hs-card:hover .hs-card-media--banded img { transform: scale(1.21); }
}

/* ------------------------------------------------------------------ small pieces */

.hs-meta { margin: 0; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em; color: var(--hs-gold-ink); }
.hs-on-dark .hs-meta { color: var(--hs-gold-light); }
.hs-faq-lede { margin-top: 1.25rem; }
.hs-faq-more { margin-top: 1rem; }
.hs-waitlist-form { margin-top: 1.25rem; }
.hs-quote p { margin: 0; }
@media (min-width: 1024px) {
  .hs-hero-copy.hs-wrap { max-width: none; margin-right: 0; padding-left: 0; padding-right: 0; }
}

/* ================================================================== commerce pass 2 (2026-10-08) */

/* ---- checkout: the launch fallback (store preview on a deploy without payment credentials) */
.hs-co-closed {
  align-self: start;
  position: relative;
  padding: 2rem 1.5rem 1.75rem;
  border: 1px solid var(--hs-gold);
  background:
    radial-gradient(ellipse 60% 80% at 100% 0%, rgba(184, 155, 98, 0.14), transparent 70%),
    var(--hs-paper);
}
.hs-co-closed::before { content: ''; position: absolute; inset: 6px; border: 1px solid var(--hs-hair-soft); pointer-events: none; }
@media (min-width: 640px) {
  .hs-co-closed { padding: 2.75rem 2.75rem 2.25rem; }
}
.hs-co-closed > * { position: relative; }
.hs-co-closed-title { margin: 0.6rem 0 0; font-family: var(--hs-display); font-weight: 700; font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.4rem); line-height: 1.1; color: var(--hs-forest); text-wrap: balance; }
.hs-co-closed-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.5rem; margin: 1.25rem 0 0; }
.hs-co-closed-copy { margin: 0.9rem 0 0; max-width: 34rem; font-size: 0.9375rem; line-height: 1.7; color: var(--hs-muted); }

/* ---- skeleton: the shape of a form while its mount loads (address step) */
.hs-skel { display: grid; gap: 1rem; min-height: 19rem; }
.hs-skel-row { display: grid; gap: 0.45rem; }
.hs-skel-pair { display: grid; gap: 1rem; }
@media (min-width: 640px) {
  .hs-skel-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.hs-skel-label,
.hs-skel-field { display: block; border-radius: 999px; background: linear-gradient(90deg, var(--hs-sand) 0%, rgba(235, 224, 211, 0.45) 50%, var(--hs-sand) 100%); background-size: 200% 100%; animation: hs-shimmer 1.4s linear infinite; }
.hs-skel-label { width: 6rem; height: 0.6rem; }
.hs-skel-field { height: 3rem; }
@keyframes hs-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ---- disabled primary actions read as unavailable, not as a faded brand colour */
.btn-primary:disabled,
.btn-primary[aria-disabled='true'] { opacity: 1; background-color: var(--hs-sand); border-color: var(--hs-hair); color: rgba(28, 35, 40, 0.62); }

/* ---- spray product page: one grid for the buy box and the gallery.
   Phones and tablets: head, price (the cost-per-day disclosure opens right under it), gallery,
   buy box, the rest. lg: the gallery is a sticky left column (vertical thumbnails beside a 4:5
   frame) and the right column reads head, price, calculator, buy box, the rest. */
.hs-pdp--spray { gap: 0; grid-template-columns: minmax(0, 1fr); grid-template-areas: 'head' 'price' 'calc' 'media' 'buy' 'more'; }
.hs-pdp-head { grid-area: head; min-width: 0; }
.hs-pdp-price { grid-area: price; min-width: 0; margin-top: 1.25rem; }
.hs-pdp-media { grid-area: media; min-width: 0; margin-top: 1.5rem; }
.hs-pdp-buy { grid-area: buy; min-width: 0; margin-top: 1.5rem; scroll-margin-top: 7rem; }
.hs-pdp-calc { grid-area: calc; min-width: 0; margin-top: 1.25rem; scroll-margin-top: 7rem; }
.hs-pdp-more { grid-area: more; min-width: 0; display: grid; gap: 1rem; align-content: start; margin-top: 2rem; }
@media (min-width: 1024px) {
  .hs-pdp--spray {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    grid-template-rows: auto auto auto auto 1fr;
    grid-template-areas: 'media head' 'media price' 'media calc' 'media buy' 'media more';
    column-gap: 4rem;
  }
  .hs-pdp--spray .hs-pdp-media { position: sticky; top: 6.5rem; align-self: start; margin-top: 0; }
  .hs-pdp-price { margin-top: 1.5rem; }
}
@media (min-width: 1280px) {
  .hs-pdp--spray { column-gap: 5rem; }
}

/* Gallery: every shot fills its frame (4:5 main, square thumbs); the banded "-front" master
   is scaled past its side bands (16.5 % each side: 1.21 in 4:5, 1.5 in a square). */
.hs-gallery-stage { display: grid; gap: 0.6rem; }
.hs-gallery-stage .hs-gallery-thumbs { margin-top: 0; }
.hs-pdp--spray .hs-gallery-main { aspect-ratio: 4 / 5; background: var(--hs-sand); }
.hs-pdp--spray .hs-gallery-thumb { background: var(--hs-sand); }
.hs-pdp--spray .hs-gallery-img { object-fit: cover; }
.hs-gallery-img--banded { transform: scale(1.21); transform-origin: 50% 25%; }
.hs-gallery-thumb .hs-gallery-img--banded { transform: scale(1.5); transform-origin: 50% 22%; }
@media (min-width: 1024px) {
  .hs-gallery-stage { grid-template-columns: 4.5rem minmax(0, 1fr); gap: 1rem; align-items: start; }
  .hs-gallery-stage > .hs-gallery-main { grid-column: 2; grid-row: 1; }
  .hs-gallery-stage > .hs-gallery-thumbs { grid-column: 1; grid-row: 1; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
}

/* Price: the one dominant number; the alternative and the per-day figure are secondary. */
.hs-pdp-price-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.7rem; }
.hs-price-lg { font-size: 2.5rem; font-weight: 600; letter-spacing: -0.01em; }
.hs-pdp-price-unit { margin: 0; font-size: 0.875rem; color: rgba(28, 35, 40, 0.82); }
.hs-pdp-price-alt { margin: 0.35rem 0 0; font-size: 0.8125rem; line-height: 1.55; color: var(--hs-muted); }
.hs-pdp-perday { margin: 0.65rem 0 0; font-size: 0.8125rem; line-height: 1.55; color: var(--hs-muted); }
.hs-pdp-perday strong { font-weight: 600; color: var(--hs-emerald-ink); }
.hs-pdp-perday-link { display: inline-flex; align-items: center; gap: 0.2rem; margin: -0.75rem 0; padding: 0.75rem 0; border: 0; background: none; font: inherit; color: var(--hs-forest); text-decoration: underline; text-decoration-color: var(--hs-gold); text-underline-offset: 3px; white-space: nowrap; cursor: pointer; }
.hs-pdp-perday-chev { width: 0.9rem; height: 0.9rem; flex-shrink: 0; color: var(--hs-gold-ink); transition: transform 0.25s var(--hs-ease); }
.hs-pdp-perday-link[aria-expanded='true'] .hs-pdp-perday-chev { transform: rotate(180deg); }
.hs-pdp-perday-link:hover { text-decoration-thickness: 2px; }

/* Buy box (store preview): quantity + Add to Cart on one line at every width, Buy now as the
   secondary gold pill, then the guarantee and the shipping notes. */
.hs-pdp-cta { display: flex; gap: 0.6rem; margin-top: 1.25rem; }
.hs-qty--pdp { flex-shrink: 0; }
.hs-qty-btn--lg { width: 2.75rem; height: 3.25rem; }
.hs-qty-value { width: 1.5rem; text-align: center; font-size: 0.875rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.hs-pdp-add { flex: 1 1 auto; min-width: 0; min-height: 3.25rem; padding-left: 1rem; padding-right: 1rem; white-space: nowrap; }
.hs-pdp-buynow { width: 100%; margin-top: 0.7rem; }
.hs-pdp-ships { display: grid; gap: 0.7rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--hs-hair); }
.hs-pdp-ship { display: flex; align-items: flex-start; gap: 0.55rem; margin: 0; font-size: 0.75rem; line-height: 1.6; color: var(--hs-muted); }
.hs-pdp-buy > .hs-pdp-ship { margin-top: 1rem; }
.hs-pdp-ship-icon { width: 1rem; height: 1rem; flex-shrink: 0; margin-top: 0.15rem; color: var(--hs-emerald-ink); }
.hs-pdp-checks { display: grid; gap: 0.5rem; margin: 0 0 0.25rem; padding: 0; list-style: none; }
.hs-panel-figure .price { font-size: 1.5rem; }

/* Free-shipping progress: forest on the track ground. */
.hs-ship-track { width: 100%; height: 6px; margin-top: 0.5rem; overflow: hidden; border-radius: 999px; background: var(--hs-track); }
.hs-ship-fill { height: 100%; border-radius: 999px; background: var(--hs-forest); transition: width 0.5s var(--hs-ease); }

/* Mobile sticky add-to-cart bar (store preview). */
.hs-sticky-buy { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--hs-gold); background: rgba(243, 234, 225, 0.97); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 -14px 30px -24px rgba(10, 23, 18, 0.45); }
.hs-sticky-buy-inner { display: flex; align-items: center; gap: 0.65rem; }
.hs-sticky-buy-thumb { width: 2.25rem; height: 2.75rem; flex-shrink: 0; }
.hs-sticky-buy-btn { flex-shrink: 0; min-height: 2.75rem; padding-left: 1.1rem; padding-right: 1.1rem; font-size: 0.8125rem; white-space: nowrap; }

/* ---- spray collection hero (CollectionHero.astro): phone layout lives with the hero's base rules
   above (one wide lead photo; the 2026-10-08 two-column phone collage cropped faces and bottles). */

/* Ingredient page: "Found in" on the detail column's grid, an eyebrow over a gold hairline. */
.hs-foundin-title { display: flex; width: 100%; padding-bottom: 0.9rem; border-bottom: 1px solid var(--hs-hair); }

/* Search overlay results: the card family in miniature (4:5 photo, kicker, Playfair name and
   the card's own price block, subscribed price first). */
.hs-search-hit { display: flex; align-items: center; gap: 0.9rem; height: 100%; padding: 0.75rem; border: 1px solid var(--hs-hair); background: var(--hs-paper); text-decoration: none; transition: border-color 0.2s var(--hs-ease), box-shadow 0.2s var(--hs-ease); }
.hs-search-hit:hover { border-color: var(--hs-gold); box-shadow: var(--hs-shadow-lift); }
.hs-search-hit-thumb { position: relative; width: 4rem; height: 5rem; flex-shrink: 0; overflow: hidden; background: var(--hs-sand); }
.hs-search-hit-thumb .hs-gallery-img { object-fit: cover; }
.hs-search-hit-kicker { margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hs-gold-ink); }
.hs-search-hit-name { margin: 0.15rem 0 0.3rem; font-family: var(--hs-display); font-weight: 700; font-size: 1.15rem; line-height: 1.2; color: var(--hs-forest); }
.hs-search-hit .hs-card-amount { font-size: 0.9375rem; }

/* ---- compare tables on phones and small tablets (< 768): one stacked card per row, each
   value under its column name (data-label); the optional columns (.hs-cmp-opt) drop out.
   Same table markup, so wider screens keep the table. */
.hs-cell-note { display: block; margin-top: 0.25rem; max-width: 16rem; font-size: 0.75rem; line-height: 1.45; color: var(--hs-muted); font-variant-numeric: normal; }
@media (max-width: 767.98px) {
  .hs-cmp { overflow: visible; }
  .hs-cmp table { display: block; min-width: 0; }
  .hs-cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hs-cmp tbody { display: grid; gap: 0.75rem; }
  .hs-cmp tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem 1rem; padding: 1rem 1.1rem 1.1rem; border: 1px solid var(--hs-hair); background: var(--hs-paper); }
  .hs-cmp tr > th[scope='row'] { grid-column: 1 / -1; padding: 0 0 0.7rem; border-bottom: 1px solid var(--hs-hair-soft); }
  .hs-cmp tr > td { display: block; min-width: 0; padding: 0; text-align: left; }
  .hs-cmp tr > td::before { content: attr(data-label); display: block; margin-bottom: 0.2rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hs-gold-ink); font-variant-numeric: normal; }
  .hs-cmp tr > td.hs-cmp-opt { display: none; }
  .hs-cmp .hs-cell-note { max-width: none; }
  .hs-cmp tr > td .whitespace-nowrap { white-space: normal; }
}

/* ---- quiz: the questions beside a framed photo (lg), rounded answers in two columns, line
   icons for the species and the goals (no emoji). */
.hs-quiz-layout { display: grid; gap: 2.5rem; padding-top: 3rem; padding-bottom: 4rem; }
@media (min-width: 1024px) {
  .hs-quiz-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: 5rem; align-items: start; padding-top: 4rem; padding-bottom: 5rem; }
}
.hs-quiz { min-width: 0; max-width: 42rem; }
.hs-quiz-art { display: none; margin: 0; }
@media (min-width: 1024px) {
  .hs-quiz-art { display: block; position: sticky; top: 7rem; }
}
.hs-quiz-art-frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--hs-sand); box-shadow: 0 0 0 1px var(--hs-gold), 0 30px 50px -36px rgba(10, 23, 18, 0.55); }
.hs-quiz-art-frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.hs-quiz-art-frame::after { content: ''; position: absolute; inset: 8px; border: 1px solid rgba(243, 234, 225, 0.6); pointer-events: none; }
.hs-quiz-options { display: grid; gap: 0.75rem; margin-top: 2rem; }
@media (min-width: 560px) {
  .hs-quiz-options--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.hs-quiz-option { gap: 0.85rem; border-radius: 1rem; padding-right: 2.75rem; line-height: 1.35; }
.hs-quiz-option--icon { min-height: 4.5rem; }
.hs-quiz-option-icon { width: 1.75rem; height: 1.75rem; flex-shrink: 0; color: var(--hs-emerald-ink); }
.hs-quiz-option:hover .hs-quiz-option-icon { color: var(--hs-forest); }

/* ---- cart drawer: lines and the cross-sell scroll as one block; the quantity stepper and the
   line's text actions never touch (they wrap under it on a narrow drawer). */
.hs-drawer-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.hs-line-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin-top: auto; padding-top: 0.6rem; }
.hs-line-links { display: flex; flex-wrap: wrap; gap: 0 1rem; }
/* Sandbox credentials only (never production): a quiet chip, AA on its ground. */
.hs-test-chip { display: inline-flex; margin: 1rem 0 0; padding: 0.3rem 0.8rem; border: 1px solid var(--hs-hair); border-radius: 999px; background: var(--hs-paper); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hs-muted); }

/* The listing's compare chart needs ~720 px: from 768 to 1023 it stays stacked, two cards a row. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .hs-cmp--wide { overflow: visible; }
  .hs-cmp--wide table { display: block; min-width: 0; }
  .hs-cmp--wide thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hs-cmp--wide tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .hs-cmp--wide tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 0.85rem 1rem; padding: 1rem 1.1rem 1.1rem; border: 1px solid var(--hs-hair); background: var(--hs-paper); }
  .hs-cmp--wide tr > th[scope='row'] { grid-column: 1 / -1; padding: 0 0 0.7rem; border-bottom: 1px solid var(--hs-hair-soft); }
  .hs-cmp--wide tr > td { display: block; min-width: 0; padding: 0; text-align: left; }
  .hs-cmp--wide tr > td::before { content: attr(data-label); display: block; margin-bottom: 0.2rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hs-gold-ink); }
  .hs-cmp--wide tr > td.hs-cmp-opt { display: none; }
  .hs-cmp--wide tr > td .whitespace-nowrap { white-space: normal; }
}

/* ================================================================== polish pass 2 (2026-10-08) */

/* Success panels (contact sent, newsletter joined): the paw line icon, never an emoji. */
.hs-done-paw { display: block; width: 2rem; height: 2rem; margin: 0 auto 0.75rem; color: var(--hs-gold-ink); }
.hs-capture-done .hs-done-paw { color: var(--hs-gold-light); }

/* ---- product pages, one order for both types (M6): below lg the title and the price (sprays) or
   the status (concepts) come first, then the gallery, capped so the photo and the next block share
   the first screens (the 4:5 frame is at most ~60 % of the viewport's height). */
.hs-pdp--concept { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'head' 'media' 'info'; }
.hs-pdp--concept .hs-pdp-head { grid-area: head; min-width: 0; }
.hs-pdp--concept .hs-pdp-media { grid-area: media; min-width: 0; }
@media (min-width: 1024px) {
  .hs-pdp--concept { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: 'media head' 'media info'; row-gap: 0; }
  .hs-pdp--concept .hs-pdp-media { position: sticky; top: 6.5rem; align-self: start; }
  .hs-pdp--concept .hs-concept-info { margin-top: 0.25rem; }
}
@media (max-width: 1023.98px) {
  .hs-pdp-media { width: 100%; max-width: min(30rem, 48vh); max-width: min(30rem, 48svh); margin-left: auto; margin-right: auto; }
  .hs-pdp--concept { row-gap: 1.75rem; }
}

/* ---- spray product page buy column (M1): the calculator is a disclosure under the price; the
   minor lines after the CTA (guarantee, shipping, vet note) lose their boxes and rules. */
.hs-pdp-calc { margin-top: 1rem; }
.hs-pdp-calc[hidden] { display: none; }
.hs-pdp-buy .hs-guarantee { padding: 0.35rem 0; border-color: transparent; background: transparent; }
.hs-pdp-buy .hs-guarantee:hover { border-color: transparent; }
.hs-pdp-buy .hs-guarantee:hover .hs-guarantee-title { text-decoration: underline; text-decoration-color: var(--hs-gold); text-underline-offset: 3px; }
.hs-pdp-ships { padding-top: 0.25rem; border-top: 0; }

/* Label | Why these ingredients: one panel, two tabs on a gold hairline; the selected tab is
   marked by weight, ink and a gold bar, never by colour alone. */
.hs-tabs-list { display: flex; border-bottom: 1px solid var(--hs-hair-soft); }
.hs-tab {
  position: relative;
  flex: 1 1 auto;
  min-height: 2.75rem;
  padding: 0.6rem 0.85rem;
  white-space: nowrap;
  border: 0;
  background: transparent;
  font-family: var(--hs-sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hs-muted);
  cursor: pointer;
  transition: color 0.2s var(--hs-ease), background-color 0.2s var(--hs-ease);
}
.hs-tab + .hs-tab { border-left: 1px solid var(--hs-hair-soft); }
.hs-tab:hover { color: var(--hs-forest); background: rgba(184, 155, 98, 0.08); }
.hs-tab[aria-selected='true'] { font-weight: 700; color: var(--hs-forest); background: transparent; }
.hs-tab[aria-selected='true']::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--hs-gold); }
.hs-tab:focus-visible { outline: 2px solid var(--hs-forest); outline-offset: -2px; }
.hs-tabs-panel:focus-visible { outline: 2px solid var(--hs-forest); outline-offset: 2px; }
.hs-tabs-caption { margin: 0; padding: 0.75rem 1rem 0.25rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hs-gold-ink); }

/* The product video and the founder note: in the full-width Details band, under the safety note. */
.hs-details-video { margin-top: 2rem; }

/* Mobile sticky bars (store preview: Add to Cart; soft launch: Join the waitlist) slide up, and
   the footer keeps its last line clear of them. */
.hs-sticky-buy { animation: hs-bar-in 0.32s var(--hs-ease) both; }
@keyframes hs-bar-in { from { transform: translateY(100%); opacity: 0; } }
.hs-sticky-buy--waitlist .hs-sticky-buy-btn { padding-left: 1.25rem; padding-right: 1.25rem; letter-spacing: 0.02em; }
@media (max-width: 1023.98px) {
  body:has(.hs-pdp--spray) .hs-footer-legal { padding-bottom: 5rem; }
}

/* Keyboard focus keeps the pill shape: site.css's global rule gives every focused control a 2 px
   radius, which turned the pill fields and buttons into rectangles under the focus ring. */
.field:focus-visible,
.hs-field-dark:focus-visible,
.hs-pill:focus-visible,
.hs-seg:focus-visible,
.hs-chip:focus-visible,
:is(.btn, .btn-primary, .btn-outline, .btn-light):focus-visible { border-radius: 999px; }
textarea.field:focus-visible { border-radius: 1.25rem; }

/* Breadcrumbs on phones: a four-level trail (product pages, sub-collections) drops "Home" so it
   stays on one line; the trail starts at its first link, without a leading separator. */
@media (max-width: 639.98px) {
  .hs-crumbs-list:has(> li:nth-child(4)) > li:first-child { display: none; }
  .hs-crumbs-list:has(> li:nth-child(4)) > li:nth-child(2) > .hs-crumbs-sep { display: none; }
}

/* Footer payment badges: only once the store is open or previewed (PageBoot reveals them). */
.hs-footer-pay-list[hidden] { display: none; }
.hs-pdp-ship > span { text-wrap: pretty; }

/* ---- checkout chrome (H3, BaseLayout chrome="minimal"): logo, "Secure checkout", "Back to cart";
   the footer keeps the policy links and the FDA disclaimer. */
.hs-mini-header { position: relative; z-index: 40; background: var(--hs-cream); border-bottom: 1px solid var(--hs-gold); font-family: var(--hs-sans); }
.hs-mini-header-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; height: 4rem; }
@media (min-width: 1024px) {
  .hs-mini-header-bar { height: 4.5rem; }
}
.hs-mini-header .hs-logo img { height: 1.5rem; }
@media (min-width: 640px) {
  .hs-mini-header .hs-logo img { height: 1.85rem; }
}
.hs-mini-secure { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.02em; color: var(--hs-muted); white-space: nowrap; }
.hs-mini-secure svg { width: 0.95rem; height: 0.95rem; flex-shrink: 0; color: var(--hs-emerald-ink); }
.hs-mini-back { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; font-size: 0.75rem; font-weight: 600; color: var(--hs-forest); text-decoration: none; white-space: nowrap; }
.hs-mini-back svg { width: 1rem; height: 1rem; flex-shrink: 0; color: var(--hs-gold-ink); transition: transform 0.25s var(--hs-ease); }
.hs-mini-back:hover { text-decoration: underline; text-decoration-color: var(--hs-gold); text-underline-offset: 4px; }
.hs-mini-back:hover svg { transform: translateX(-3px); }
@media (min-width: 640px) {
  .hs-mini-secure,
  .hs-mini-back { font-size: 0.8125rem; }
}
.hs-footer--minimal .hs-footer-legal { border-top: 0; }
.hs-mini-policies { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin: 0 0 0.75rem; padding: 0; list-style: none; }
.hs-mini-policies .hs-footer-link { display: inline-flex; align-items: center; min-height: 2.5rem; font-size: 0.8125rem; }

/* Order summary: below lg a collapsible bar at the top ("Show order summary · $X"); from lg the
   sticky right column. */
.hs-co-sumbar { display: none; }
@media (max-width: 1023.98px) {
  .hs-co-summary { order: -1; }
  .hs-co-sumbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    min-height: 3.25rem;
    padding: 0.75rem 1.1rem;
    border: 1px solid var(--hs-hair);
    background: var(--hs-paper);
    font-family: var(--hs-sans);
    color: var(--hs-forest);
    cursor: pointer;
  }
  .hs-co-summary--open .hs-co-sumbar { border-bottom-color: transparent; }
  .hs-co-summary:not(.hs-co-summary--open) .hs-co-summary-body { display: none; }
  .hs-co-summary--open .hs-co-summary-body { border-top: 0; }
}
.hs-co-sumbar-label { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; font-weight: 600; }
.hs-co-sumbar-icon { width: 1.1rem; height: 1.1rem; color: var(--hs-emerald-ink); }
.hs-co-sumbar-chev { width: 0.9rem; height: 0.9rem; color: var(--hs-gold-ink); transition: transform 0.25s var(--hs-ease); }
.hs-co-sumbar[aria-expanded='true'] .hs-co-sumbar-chev { transform: rotate(180deg); }
.hs-co-sumbar-total { font-size: 1.0625rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--hs-forest); }

/* "Continue to payment": the forest pill, at 45 % while contact and address are incomplete. */
.hs-co-pay { width: 100%; min-height: 3.25rem; }
@media (min-width: 640px) {
  .hs-co-pay { width: auto; min-width: 16rem; }
}
.hs-co-pay:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }
.hs-co-pay:disabled:hover { background: var(--hs-forest); transform: none; box-shadow: none; }
.hs-co-pay-hint { margin: 0.6rem 0 0; font-size: 0.75rem; color: var(--hs-muted); }

/* ---- small collections (M2, isFeaturedCollection): one full-width featured row per item, a large
   photo beside the name, pitch and price; every other row mirrors from 768 px. */
.hs-featured { display: grid; gap: 1.5rem; padding-top: 2.5rem; padding-bottom: 2.5rem; }
@media (min-width: 1024px) {
  .hs-featured { gap: 2rem; padding-top: 3.5rem; padding-bottom: 3rem; }
}
.hs-feature { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); background: var(--hs-paper); border: 1px solid var(--hs-hair); font-family: var(--hs-sans); }
.hs-feature::before { content: ''; position: absolute; left: 1.5rem; right: 1.5rem; top: -1px; z-index: 1; height: 2px; background: var(--hs-gold); }
@media (min-width: 768px) {
  .hs-feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .hs-featured > .hs-feature:nth-of-type(even) { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .hs-featured > .hs-feature:nth-of-type(even) .hs-feature-media { order: 2; }
}
@media (min-width: 1024px) {
  .hs-feature { grid-template-columns: minmax(0, 30rem) minmax(0, 1fr); }
  .hs-featured > .hs-feature:nth-of-type(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); }
}
.hs-feature-media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--hs-sand); }
.hs-feature-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--hs-ease); }
.hs-feature:hover .hs-feature-media img { transform: scale(1.03); }
.hs-feature:hover .hs-feature-media.hs-card-media--banded img { transform: scale(1.24); }
.hs-feature-body { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 1.5rem 1.25rem 1.6rem; }
@media (min-width: 768px) {
  .hs-feature-body { padding: 2.25rem; }
}
@media (min-width: 1024px) {
  .hs-feature-body { padding: 3rem 3.5rem; }
}
.hs-feature .hs-card-kicker { white-space: normal; color: var(--hs-gold-ink); }
.hs-feature-title { margin: 0.7rem 0 0; font-family: var(--hs-display); font-weight: 700; font-size: clamp(2rem, 1.55rem + 1.9vw, 3rem); line-height: 1.05; letter-spacing: -0.015em; color: var(--hs-forest); }
.hs-feature-title a { color: inherit; text-decoration: none; text-underline-offset: 6px; }
.hs-feature-title a:hover { text-decoration: underline; text-decoration-color: var(--hs-gold); text-decoration-thickness: 2px; }
.hs-feature-pitch { margin: 0.9rem 0 0; max-width: 30rem; font-size: 1rem; font-weight: 300; line-height: 1.65; color: var(--hs-charcoal); }
.hs-feature-desc { margin: 0.75rem 0 0; max-width: 32rem; font-size: 0.875rem; line-height: 1.7; color: var(--hs-muted); }
.hs-feature .hs-card-meta { margin-top: 1rem; font-size: 0.8125rem; }
.hs-feature-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; margin-top: 1.6rem; padding-top: 1.35rem; border-top: 1px solid var(--hs-hair); }
.hs-feature .hs-card-amount { font-size: 1.625rem; }
.hs-feature .hs-card-unit { display: inline; margin-left: 0.45rem; font-size: 0.8125rem; }
.hs-feature-foot .hs-pill { flex-shrink: 0; }
@media (max-width: 479.98px) {
  .hs-feature-foot .hs-pill { width: 100%; }
}

/* Cross-link from a spray goal to its topical care area (relatedCareArea in src/lib/catalog.ts). */
.hs-crosslink { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1.5rem; padding: 0.9rem 1.35rem; border: 1px solid var(--hs-hair); border-left: 2px solid var(--hs-gold); background: var(--hs-sand); }
.hs-crosslink-kicker { margin: 0; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hs-gold-ink); }
.hs-crosslink .hs-link { min-height: 2.75rem; }

/* ---- mobile collections (M4): one "Filter & sort" button and the count; the controls open in a
   bottom sheet (a modal dialog while open); the finder strip follows the fourth card. */
.hs-filter-row,
.hs-sheet-head,
.hs-sheet-foot { display: none; }
.hs-grid > .hs-grid-break { flex-basis: 100%; }
.hs-filter-trigger { gap: 0.5rem; }
.hs-filter-trigger-icon { width: 1rem; height: 1rem; flex-shrink: 0; }
.hs-filter-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; padding: 0 0.3rem; border-radius: 999px; background: var(--hs-forest); color: var(--hs-cream); font-size: 0.625rem; letter-spacing: 0; }
.hs-filter-trigger:hover .hs-filter-badge { background: var(--hs-cream); color: var(--hs-forest); }
.hs-sheet-title { margin: 0; font-family: var(--hs-display); font-weight: 700; font-size: 1.375rem; color: var(--hs-forest); }
@keyframes hs-sheet-in { from { transform: translateY(100%); } }
@keyframes hs-fade-in { from { opacity: 0; } }
@media (max-width: 767.98px) {
  .hs-finder-top { display: none; }
  .hs-filter-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--hs-hair); }
  .hs-count--bar,
  .hs-filter-panel { display: none; }
  .hs-filter-panel.hs-filter-panel--open {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    max-height: 88vh;
    max-height: 88dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 1.25rem calc(1rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--hs-gold);
    border-radius: 1.25rem 1.25rem 0 0;
    background: var(--hs-cream);
    box-shadow: 0 -24px 48px -24px rgba(10, 23, 18, 0.5);
    animation: hs-sheet-in 0.32s var(--hs-ease) both;
  }
  .hs-filter-panel--open .hs-sheet-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; margin: 0 -1.25rem 1.25rem; padding: 0.75rem 0.6rem 0.75rem 1.25rem; border-bottom: 1px solid var(--hs-hair-soft); background: var(--hs-cream); }
  .hs-filter-panel--open .hs-sheet-foot { display: flex; gap: 0.75rem; margin-top: 1.25rem; }
  .hs-filter-panel--open .hs-sheet-foot .hs-pill { flex: 1 1 0; padding-left: 1rem; padding-right: 1rem; }
  .hs-filter-panel--open > .border-b { padding-bottom: 0; border-bottom: 0; }
  .hs-sheet-backdrop { position: fixed; inset: 0; z-index: 59; background: rgba(10, 23, 18, 0.45); animation: hs-fade-in 0.25s ease both; }
  .hs-grid-break .hs-finder { margin: 0.5rem 0; }
}

/* ---- no tablet orphans (M3): from 768 to 1023 a 3-column grid whose last row would hold one card
   (4, 7, 10, 13, 16 items) is two columns of horizontal cards instead; an odd number of compare
   cards ends on a card across both columns. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .hs-grid:has(> :nth-child(3n + 4):last-child) { --cols: 2; }
  .hs-grid:has(> :nth-child(3n + 4):last-child) > .hs-card { flex-direction: row; }
  .hs-grid:has(> :nth-child(3n + 4):last-child) > .hs-card .hs-card-media { flex: 0 0 42%; aspect-ratio: 4 / 5; align-self: stretch; }
  .hs-cmp--wide tr:nth-child(odd):last-child { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- For Dogs / For Cats (M10): a short species block under the hero, from existing data. */
.hs-species { display: grid; gap: 1rem; padding-top: 2.25rem; }
@media (min-width: 768px) {
  .hs-species { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; padding-top: 2.75rem; }
}
.hs-species-item { display: flex; align-items: flex-start; gap: 0.9rem; padding: 1.1rem 1.25rem; border: 1px solid var(--hs-hair); background: var(--hs-paper); }
.hs-species-icon { width: 1.5rem; height: 1.5rem; flex-shrink: 0; margin-top: 0.1rem; color: var(--hs-emerald-ink); }
.hs-species-title { margin: 0; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hs-gold-ink); }
.hs-species-copy { margin: 0.35rem 0 0; font-size: 0.875rem; line-height: 1.6; color: var(--hs-charcoal); }
.hs-species-link { color: var(--hs-forest); font-weight: 600; text-decoration: underline; text-decoration-color: var(--hs-gold); text-underline-offset: 3px; white-space: nowrap; }
.hs-featured-finder { padding-bottom: 2.5rem; }
/* Two or three featured rows (Healthy Aging, Serums & Gels, Paw & Nose Care): a smaller photo
   column, so the list reads as a sequence rather than three posters. */
@media (min-width: 1024px) {
  .hs-featured:has(> .hs-feature:nth-of-type(2)) > .hs-feature { grid-template-columns: minmax(0, 23rem) minmax(0, 1fr); }
  .hs-featured:has(> .hs-feature:nth-of-type(2)) > .hs-feature:nth-of-type(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 23rem); }
}
/*$vite$:1*/