:root { --sage: #60796c; --sage-dark: #405d4e; --sage-light: #edf2ee; --sage-line: #d3e0d7; }
body { background-image: radial-gradient(ellipse at 0 38%, #e4ece45c, transparent 24%), radial-gradient(ellipse at 100% 64%, #eddde454, transparent 25%); }
.site-header { position: sticky; top: 12px; height: 106px; z-index: 45; background: transparent; border: 0; pointer-events: none; padding-top: 12px; }
.header-inner { pointer-events: auto; width: min(1130px, calc(100% - 64px)); min-height: 82px; gap: 28px; padding: 14px 25px; border: 1px solid #e3dcd6cc; border-radius: 999px; background: #fffdfbf0; backdrop-filter: blur(18px); box-shadow: 0 7px 28px #42293108; transition: box-shadow 300ms ease, background 300ms ease; }
.header-inner .brand { margin-right: auto; }
.header-inner .search-form { width: min(340px, 38vw); flex-shrink: 1; background: #f4eeeb; }
.header-inner .brand > span { color: var(--wine); }
.site-header.is-floating .header-inner { width: min(760px, calc(100% - 40px)); background: #fffdfbf5; box-shadow: 0 12px 32px #45283113; }
.site-header.is-floating .brand small, .site-header.is-floating .header-favorites, .site-header.is-floating .mobile-menu { display: none; }
.category-navigation { padding: 15px 0 0; }
.category-navigation .desktop-nav { justify-content: center; gap: 37px; }
.category-navigation .desktop-nav button { color: #6a5058; padding: 8px 5px; }
.category-navigation .desktop-nav button:hover { color: var(--sage-dark); }
.mobile-nav { pointer-events: auto; background: var(--paper); border-radius: 18px; padding: 12px; }
.site-header .header-actions { gap: 5px; }
.count { background: var(--sage-dark); }
.filter-chip { background: #eef2ee; color: var(--sage-dark); }
.category-care, .collection-care { background-color: var(--sage-light); }
.home-cta { background: linear-gradient(110deg, #eef2eb, #f5e9e5); }
.care-note > div .icon { color: var(--sage); }
.product-stock { color: var(--sage-dark); }
.checkout-header { margin: 12px 0 22px; }
.checkout-intro { font-size: 14px; color: var(--muted); line-height: 1.6; margin: 12px 0 0; }
.checkout-progress { display: flex; gap: 9px; margin: 0 0 30px; padding: 6px; border-radius: 19px; border: 1px solid #e7ddd8; background: #f8f4f0; max-width: 660px; }
.checkout-progress button { flex: 1; min-width: 0; padding: 12px 17px; display: flex; align-items: center; gap: 10px; border-radius: 13px; font-size: 13px; color: #806b72; transition: background 220ms, color 220ms, box-shadow 220ms; }
.progress-number { font-size: 10px; letter-spacing: .6px; }
.checkout-progress .icon { display: none; width: 16px; height: 16px; margin-left: auto; }
.checkout-progress button.is-current { background: #fffdfa; color: var(--wine); box-shadow: 0 3px 12px #4328350a; font-weight: 600; }
.checkout-progress button.is-completed { color: var(--sage-dark); }
.checkout-progress button.is-completed .icon { display: block; }
.checkout-layout { gap: 32px; }
.checkout-form { gap: 21px; }
.checkout-section { scroll-margin-top: 116px; position: relative; border: 1px solid #e8ded9; background: #fffdfa; padding: 27px 28px; transition: background 280ms, box-shadow 280ms, border-color 280ms; }
.checkout-section.is-current { background: linear-gradient(120deg, #fcfaf6, #fffdfa 75%); border-color: #b5c9bc; box-shadow: 0 5px 23px #405d4e08, inset 3px 0 0 #bfd0c1; }
.checkout-section.is-completed { border-color: #d1ddd3; }
.checkout-step-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.checkout-section-title { margin: 0; font-size: 20px; font-weight: 550; }
.checkout-step-description { font-size: 12px; color: #806e75; margin: 0 0 24px; padding-left: 43px; }
.checkout-step-badge { font-size: 10px; color: var(--sage-dark); padding: 5px 9px; border-radius: 999px; background: #edf2eb; flex-shrink: 0; }
.checkout-step-badge:empty { display: none; }
.checkout-section .step-number { background: #f2e8e4; color: var(--wine); transition: background 220ms; }
.checkout-section.is-current .step-number, .checkout-section.is-completed .step-number { background: #e5eee5; color: var(--sage-dark); }
.checkout-step-next { margin-top: 19px; font-size: 12px; font-weight: 600; color: var(--sage-dark); }
.checkout-field input, .checkout-field select { border-radius: 12px; }
.checkout-options { gap: 10px; }
.delivery-choice, .payment-choice { border-radius: 15px; min-height: 74px; padding: 17px 13px; }
.delivery-choice:has(input:checked), .payment-choice:has(input:checked) { background: var(--sage-light); border-color: #a5b9aa; box-shadow: inset 0 0 0 1px #a5b9aa22; }
.delivery-choice > input, .payment-choice > input { accent-color: var(--sage-dark); }
.checkout-summary { top: 114px; padding: 28px; border-radius: 23px; background: linear-gradient(150deg,#f7f6f0,#faf1ee); border-color: #e0ddd2; }
.checkout-summary > .eyebrow { color: var(--sage-dark); font-size: 10px; letter-spacing: 2px; }
.checkout-summary > h2 { margin-bottom: 25px; font-size: 25px; }
.checkout-totals { margin-top: 21px; }
.checkout-total > strong { font-size: 27px; }
.checkout-recap { border-top: 1px solid #dfdfd4; padding-top: 16px; display: grid; gap: 12px; }
.checkout-recap > div { display: grid; gap: 4px; }
.checkout-recap span { font-size: 10px; color: var(--muted); }
.checkout-recap strong { font-size: 11px; font-weight: 500; line-height: 1.6; color: var(--sage-dark); overflow-wrap: anywhere; }
.checkout-small-note { color: #806b72; }
.checkout-payment-note { font-size: 11px; line-height: 1.6; color: #806b72; }
@media(max-width:900px){
 .header-inner { width: calc(100% - 40px); gap: 18px; min-height: 78px; }
 .header-inner .brand { min-width: 150px; }
 .header-inner .brand > span { font-size: 26px; }
 .header-inner .brand small { font-size: 8px; }
 .checkout-summary { position: static; }
}
@media(max-width:640px){
 .site-header { top: 8px; height: 124px; padding-top: 8px; }
 .header-inner { width: calc(100% - 24px); border-radius: 25px; padding: 12px 16px; display: grid; grid-template-columns: 1fr auto; gap: 9px 6px; min-height: 108px; }
 .header-inner .brand { min-width: 0; }
 .header-inner .brand > span { font-size: 25px; }
 .header-inner .brand small { font-size: 7px; }
 .header-inner .search-form { grid-column: 1 / -1; grid-row: 2; width: 100%; height: 35px; }
 .site-header .header-actions { gap: 0; }
 .site-header .header-actions .icon-button { width: 32px; height: 34px; }
 .site-header.is-floating .header-inner { width: calc(100% - 24px); grid-template-columns: auto 1fr auto; min-height: 64px; gap: 7px; border-radius: 999px; padding: 11px 13px; }
 .site-header.is-floating .header-inner .brand > span { font-size: 18px; letter-spacing: .2px; }
 .site-header.is-floating .header-inner .search-form { grid-column: 2; grid-row: 1; height: 35px; }
 .site-header.is-floating .search-form input { font-size: 11px; padding-left: 0; }
 .site-header.is-floating .search-form { padding-left: 8px; gap: 5px; }
 .site-header.is-floating .search-form > .icon { width: 15px; height: 15px; }
 .category-navigation { padding-top: 6px; }
 .checkout-progress { margin-bottom: 23px; padding: 5px; gap: 3px; }
 .checkout-progress button { padding: 11px 10px; gap: 7px; font-size: 12px; }
 .checkout-header h1 { font-size: 30px; }
 .checkout-intro { font-size: 13px; max-width: 290px; }
 .checkout-section { padding: 24px 20px; scroll-margin-top: 94px; }
 .checkout-section-title { font-size: 18px; gap: 10px; }
 .checkout-step-heading { flex-wrap: wrap; }
 .checkout-step-description { padding-left: 39px; margin-bottom: 21px; font-size: 11px; }
 .checkout-step-badge { font-size: 9px; }
 .checkout-progress .icon { display: none!important; }
 .delivery-choice, .payment-choice { min-height: 0; padding: 14px; }
 .checkout-summary { padding: 25px 23px; }
}
@media(prefers-reduced-motion:reduce){ .header-inner, .checkout-section, .checkout-progress button { transition: none; } }