.section{padding:80px var(--s-12);max-width:1440px;margin:0 auto}.section-head{justify-content:space-between;align-items:flex-end;gap:var(--s-8);margin-bottom:var(--s-12);display:flex}.section-head h2{font-family:var(--font-display);letter-spacing:-.032em;color:var(--green-900);margin:8px 0 0;font-size:72px;font-weight:400;line-height:.94}.section-head h2 em{color:var(--green-700);font-style:italic;font-weight:400}.section-head .eyebrow{font-family:var(--font-mono);letter-spacing:.28em;text-transform:uppercase;color:var(--wood-500);align-items:center;gap:12px;font-size:10px;display:inline-flex}.section-head .eyebrow:before{content:"";background:var(--wood-500);width:22px;height:1px}.section-head .nav-btns{gap:8px;display:flex}.product-grid{gap:var(--s-8);grid-template-columns:repeat(4,1fr);display:grid}.product-grid>.reveal{width:100%;height:100%;display:flex}.product-grid>.reveal>.card{width:100%}.values-inner>.reveal{height:100%}.card{background:var(--bone-100);border-radius:var(--r-md);cursor:pointer;transition:transform .45s cubic-bezier(.22, .61, .36, 1), background .3s var(--ease), border-color .3s var(--ease), box-shadow .5s var(--ease);border:1px solid #0000;flex-direction:column;display:flex;position:relative;overflow:hidden}.card:hover{border-color:var(--ink-100);box-shadow:var(--shadow-md);background:#fff;transform:translateY(-4px)}.card .image{aspect-ratio:4/4;background:var(--bone-200);position:relative;overflow:hidden}.card .image:after{content:"";opacity:0;transition:opacity .5s var(--ease);pointer-events:none;background:radial-gradient(60% 80% at 50% 100%,#b8956a2e,#0000 70%);position:absolute;inset:0}.card:hover .image:after{opacity:1}.card .image .ph-image,.card .image>svg,.card .image>div>svg{transition:transform .7s cubic-bezier(.22,.61,.36,1)}.card:hover .image .ph-image,.card:hover .image>svg{transform:scale(1.06)}.card .badges{flex-direction:column;gap:4px;display:flex;position:absolute;top:14px;left:14px}.badge-pill{background:var(--green-700);color:var(--bone-100);font-family:var(--font-mono);letter-spacing:.14em;border-radius:var(--r-pill);text-transform:uppercase;text-align:center;justify-content:center;align-items:center;padding:4px 8px;font-size:10px;display:inline-flex}.badge-pill.alt{background:var(--wood-500);color:var(--green-900)}.badge-pill.outline{color:var(--green-900);border:1px solid var(--green-900);background:0 0}.card .fav{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;width:36px;height:36px;transition:all .25s var(--ease);cursor:pointer;color:var(--ink-700);background:#fafaf7cc;border:none;border-radius:50%;place-items:center;display:grid;position:absolute;top:14px;right:14px}.card:hover .fav{opacity:1}.fav:hover{background:var(--bone-100);color:var(--green-700)}.fav.active{opacity:1;background:var(--green-700);color:var(--bone-100)}@media (hover:none){.card .fav{opacity:.75}}.card .body{flex-direction:column;gap:6px;padding:18px 18px 22px;display:flex}.card .brand{font-family:var(--font-mono);letter-spacing:.2em;color:var(--ink-400);text-transform:uppercase;font-size:10px}.card .title{font-family:var(--font-sans);color:var(--ink-900);transition:color .3s var(--ease);font-size:14px;font-weight:500;line-height:1.35}.card:hover .title{color:var(--green-900)}.card .footer{justify-content:space-between;align-items:center;margin-top:12px;display:flex}.price{flex-direction:column;gap:2px;line-height:1;display:flex}.price .v,.price .old{white-space:nowrap}.price .v{font-family:var(--font-sans);color:var(--green-900);font-size:22px;font-weight:600}.price .old{font-family:var(--font-sans);color:var(--ink-400);font-size:12px;text-decoration:line-through}.card .quick-add{background:var(--green-700);width:36px;height:36px;color:var(--bone-100);cursor:pointer;transition:background .3s var(--ease), transform .4s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s var(--ease);border:none;border-radius:50%;place-items:center;display:grid}.card .quick-add:hover{background:var(--green-900);transform:scale(1.12);box-shadow:0 6px 20px #14201b2e}.ph-image{background:repeating-linear-gradient(135deg, transparent 0px, transparent 14px, #1f2e260a 14px, #1f2e260a 15px), linear-gradient(180deg, var(--bone-100), var(--bone-200));place-items:center;width:100%;height:100%;display:grid}.ph-image .ph-label{font-family:var(--font-mono);letter-spacing:.22em;color:var(--ink-400);text-transform:uppercase;background:#fafaf7b3;padding:6px 10px;font-size:10px}.ph-image.dark{background:repeating-linear-gradient(135deg, transparent 0px, transparent 14px, #f5f1ea0f 14px, #f5f1ea0f 15px), linear-gradient(180deg, var(--green-700), var(--green-900))}.ph-image.dark .ph-label{color:var(--bone-100);background:#14201b66}
