/* Daloa Shop Express public storefront — visual layer over the original functional base. */
:root {
    --green: #087452;
    --green-dark: #073d31;
    --green-soft: #e8f5ec;
    --ink: #163229;
    --muted: #63746a;
    --line: #e3e9e2;
    --cream: #f5f7f2;
    --gold: #e8b95b;
    --white: #fff;
    --radius-sm: .7rem;
    --radius-md: 1.1rem;
    --radius-lg: 1.6rem;
    --shadow: 0 14px 42px rgba(13, 55, 38, .1);
    --shadow-hover: 0 20px 48px rgba(13, 55, 38, .16);
}

body { background: var(--cream); color: var(--ink); font-family: "Aptos", "Segoe UI", system-ui, sans-serif; }
.container { width: min(100% - 2.5rem, 1320px); }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.15em; }
.topbar { background: #062f27; color: #dcefe4; font-size: .75rem; font-weight: 650; letter-spacing: .015em; }
.topbar-inner { display: flex; justify-content: space-between; gap: 1rem; padding-block: .5rem; }
.site-header { position: relative; box-shadow: 0 5px 22px rgba(26, 54, 37, .045); }
.header-main { grid-template-columns: minmax(190px, 240px) minmax(300px, 1fr) auto; gap: clamp(1rem, 2.3vw, 2.5rem); padding: 1rem 0; }
.brand { gap: .72rem; font-size: 1.08rem; letter-spacing: -.045em; }
.brand:hover { color: var(--green-dark); }
.brand-mark { width: 3rem; height: 3rem; border-radius: 1rem; background: linear-gradient(145deg, #109e67, #075942 72%); box-shadow: 0 8px 18px rgba(4, 103, 71, .23); letter-spacing: -.12em; }
.brand-mark-dot { color: var(--gold); }
.brand-name { display: flex; flex-direction: column; white-space: nowrap; }
.brand-name em { display: inline; }
.brand-name small { display: block; margin-top: .22rem; font-size: .58rem; color: var(--muted); font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
.header-search { height: 3.15rem; align-items: center; border: 1.5px solid #d5e4d8; border-radius: .8rem; background: #f8faf6; transition: border-color .18s, box-shadow .18s; }
.header-search:focus-within { border-color: var(--green); box-shadow: 0 0 0 4px rgba(8, 116, 82, .1); }
.search-icon { display: flex; color: var(--green); padding-left: .95rem; font-size: 1.1rem; }
.header-search input { padding: .7rem .85rem; font-size: .9rem; color: var(--ink); }
.header-search input:focus { outline: 0; }
.header-search button { align-self: stretch; padding: 0 1.4rem; font-size: .86rem; transition: background .18s; }
.header-search button:hover { background: var(--green-dark); }
.quick-nav { gap: clamp(.2rem, .8vw, .85rem); }
.quick-nav a { position: relative; min-width: 3.4rem; display: grid; justify-items: center; align-content: center; gap: .13rem; padding: .2rem .28rem; color: var(--ink); font-size: .7rem; line-height: 1.1; transition: color .18s, transform .18s; }
.quick-nav a:hover { color: var(--green); transform: translateY(-2px); }
.quick-nav .icon { width: 1.4rem; height: 1.4rem; stroke-width: 1.7; }
.quick-nav .nav-count { position: absolute; top: -.22rem; right: .12rem; min-width: 1.12rem; height: 1.12rem; padding: 0 .15rem; background: var(--green); color: #fff; font-size: .63rem; box-shadow: 0 0 0 2px white; }
.nav-band { border-top: 1px solid #edf1ea; background: #fff; }
.category-nav { min-height: 3rem; align-items: center; gap: clamp(1rem, 2.4vw, 2.4rem); padding: 0; font-size: .84rem; }
.category-nav a { padding: .65rem 0; white-space: nowrap; transition: color .18s; }
.category-entry { display: inline-flex; align-items: center; gap: .55rem; padding: .58rem .9rem !important; background: #e8f4ed; color: var(--green-dark); border-radius: .6rem; }
.category-entry .icon { font-size: .95rem; }
.nav-tagline { margin-left: auto; color: #8a9b8d; font-size: .75rem; font-weight: 600; white-space: nowrap; }
.main-content { min-height: 65vh; padding-bottom: 5rem; }

.btn { min-height: 2.75rem; border-radius: .72rem; padding: .75rem 1.15rem; font-size: .88rem; font-weight: 800; transition: transform .18s, box-shadow .18s, background .18s; }
.btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(7, 61, 49, .15); }
.btn-primary { background: var(--green); }
.btn-secondary { border-color: #cae6d4; }
.btn-light { color: var(--green-dark); }
.eyebrow { font-size: .7rem; letter-spacing: .14em; }
.section { margin-top: clamp(2.7rem, 5vw, 4.3rem); }
.section-heading { align-items: end; margin-bottom: 1.35rem; }
.section-heading h1, .section-heading h2, .page-heading h1 { margin: .3rem 0; font-size: clamp(1.65rem, 2.7vw, 2.45rem); letter-spacing: -.045em; }
.section-heading p { margin: .2rem 0 0; color: var(--muted); font-size: .9rem; }
.section-heading > a { display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; white-space: nowrap; }
.section-heading > a:hover .icon { transform: translateX(3px); }
.section-heading > a .icon { transition: transform .18s; }
.page-heading { padding: clamp(1.7rem, 4vw, 3rem); margin: 1.6rem 0 1.35rem; border-radius: var(--radius-lg); background: linear-gradient(125deg, #f0f8ef, #e7f2e9 68%, #d9eedf); }
.page-heading h1 { font-size: clamp(2rem, 4vw, 3.2rem); }
.page-heading p { max-width: 46rem; margin-bottom: 0; }
.breadcrumbs { font-size: .79rem; margin: 1.3rem 0; }

/* Home: a commercial lead with real catalogue photography when available. */
.home-hero-layout { display: grid; grid-template-columns: minmax(0, 2.25fr) minmax(250px, .82fr); gap: 1rem; margin-top: 1.5rem; }
.hero { position: relative; min-height: 410px; grid-template-columns: 1.12fr .88fr; gap: .3rem; margin: 0; padding: clamp(2rem, 4vw, 3.6rem); border-radius: var(--radius-lg); background: radial-gradient(circle at 78% 4%, rgba(69, 171, 111, .55), transparent 33%), linear-gradient(135deg, #074634, #086348 58%, #0c8159); isolation: isolate; }
.hero::after { content: ""; position: absolute; inset: auto -7% -50% 45%; height: 90%; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; z-index: -1; }
.hero-copy { position: relative; z-index: 2; }
.hero-kicker { display: inline-block; padding: .38rem .7rem; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; color: #ddf7df; background: rgba(255,255,255,.07); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hero h1 { max-width: 12ch; margin: 1.05rem 0 1rem; font-size: clamp(2.7rem, 4.25vw, 4.5rem); }
.hero h1 em { color: #f7d68a; }
.hero p { max-width: 29rem; margin-bottom: 0; font-size: .98rem; line-height: 1.7; }
.hero-actions { margin-top: 1.55rem; }
.hero-footnote { display: block; margin-top: 1.55rem; color: #bde8d2; font-size: .76rem; }
.hero-art { position: relative; min-height: 260px; }
.hero-orbit { position: absolute; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; }
.orbit-one { width: 260px; height: 260px; }
.orbit-two { width: 330px; height: 330px; }
.hero-product-image { position: relative; z-index: 2; width: min(90%, 280px); height: min(24vw, 280px); min-height: 220px; object-fit: contain; padding: 1rem; background: #fff; border: 8px solid rgba(255,255,255,.18); border-radius: 2rem; transform: rotate(8deg); box-shadow: 0 30px 50px rgba(2, 39, 28, .3); }
.hero-monogram { position: relative; z-index: 2; display: grid; place-items: center; width: 205px; height: 205px; border-radius: 2rem; background: linear-gradient(145deg, #f6e8b8, #e5af55); color: var(--green-dark); font-size: 3.7rem; font-weight: 900; letter-spacing: -.09em; transform: rotate(8deg); box-shadow: 0 30px 50px rgba(2, 39, 28, .3); }
.hero-monogram span { position: absolute; top: .3rem; right: 1rem; font-size: 2rem; }
.hero-side { display: grid; grid-template-rows: 1fr 1fr; gap: 1rem; }
.hero-side-card { position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; min-height: 195px; padding: 1.45rem; border-radius: var(--radius-lg); }
.hero-side-card::after { content: ""; position: absolute; width: 170px; height: 170px; border-radius: 50%; right: -75px; top: -80px; border: 25px solid rgba(255,255,255,.22); }
.hero-side-categories { background: #f3dfab; color: #4a3819; }
.hero-side-shops { background: #dfefe2; color: var(--green-dark); }
.side-card-icon { display: grid; place-items: center; width: 2.45rem; height: 2.45rem; border-radius: .8rem; background: rgba(255,255,255,.55); font-size: 1.25rem; }
.hero-side-card > span:last-child { position: relative; z-index: 1; display: grid; gap: .33rem; }
.hero-side-card small { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.hero-side-card strong { max-width: 16ch; font-size: 1.25rem; line-height: 1.15; letter-spacing: -.035em; }
.hero-side-card > span:last-child > span { display: inline-flex; align-items: center; gap: .3rem; margin-top: .4rem; font-size: .78rem; font-weight: 800; }
.benefits-top { margin: 1rem 0 0; gap: 1rem; }
.benefits-top > div { display: flex; align-items: center; gap: .8rem; min-width: 0; padding: 1rem 1.25rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; }
.benefits-top .icon { width: 1.8rem; height: 1.8rem; color: var(--green); }
.benefits-top span { display: grid; }
.benefits-top strong { font-size: .84rem; }
.benefits-top small { color: var(--muted); font-size: .73rem; }
.home-outro { margin-top: 4rem; padding: clamp(2rem, 4vw, 3.5rem); border-radius: var(--radius-lg); background: linear-gradient(110deg, #0c5d45, #0b7c55); color: #fff; }
.home-outro .eyebrow { color: #bbefcf; }
.home-outro h2 { max-width: 16ch; margin: .5rem 0; font-size: clamp(1.8rem, 3.3vw, 2.8rem); line-height: 1.08; letter-spacing: -.045em; }
.home-outro p { color: #d4eadb; }

/* Reusable merchandising cards. */
.category-grid, .shop-grid, .product-grid { gap: 1rem; }
.category-tile, .shop-tile, .product-card { border-color: var(--line); border-radius: var(--radius-md); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.category-tile:hover, .shop-tile:hover, .product-card:hover { transform: translateY(-4px); border-color: #bcdcc6; box-shadow: var(--shadow-hover); }
.category-tile { min-height: 150px; padding: 1rem; gap: .65rem; background: linear-gradient(145deg, #fff, #f5faf4); }
.category-tile:nth-child(4n+2) { background: linear-gradient(145deg, #fff, #fdf6e7); }
.category-tile:nth-child(4n+3) { background: linear-gradient(145deg, #fff, #eef4f6); }
.category-tile:nth-child(4n+4) { background: linear-gradient(145deg, #fff, #f3f2e9); }
.category-tile-main { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .8rem; width: 100%; min-height: 100%; }
.category-icon { display: grid; place-items: center; width: 3.55rem; height: 3.55rem; border-radius: 1.1rem; background: #e2f0e5; color: var(--green); font-size: 1.35rem; font-weight: 900; }
.category-tile:nth-child(4n+2) .category-icon { background: #faebcb; color: #775a17; }
.category-tile:nth-child(4n+3) .category-icon { background: #dfeef1; color: #226b75; }
.category-tile:nth-child(4n+4) .category-icon { background: #e9edda; color: #596b3b; }
.category-tile-content { display: grid; gap: .18rem; min-width: 0; }
.category-tile-content strong { font-size: .96rem; line-height: 1.2; }
.category-tile-content small { font-size: .72rem; }
.category-tile-arrow { color: var(--green); }
.category-children { display: flex; flex-wrap: wrap; gap: .36rem; padding-top: .7rem; border-top: 1px solid var(--line); }
.category-children a { padding: .28rem .48rem; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--green-dark); font-size: .72rem; }
.category-page-grid .category-tile { min-height: 175px; }
.category-page-grid .category-tile-main { min-height: 75px; }

.product-card { display: flex; flex-direction: column; overflow: hidden; background: #fff; }
.product-image { position: relative; height: auto; aspect-ratio: 1 / .88; background: #f7faf5; }
.product-image img { width: 100%; height: 100%; object-fit: contain; padding: .65rem; transition: transform .25s ease; }
.product-card:hover .product-image img { transform: scale(1.055); }
.image-placeholder { display: grid; place-items: center; width: 100%; height: 100%; background: radial-gradient(circle at 50% 40%, #d7e9d8, #edf4e9 62%); color: #98c0a0; font-size: clamp(1.8rem, 3vw, 3.5rem); letter-spacing: -.1em; }
.product-sale-badge { position: absolute; top: .7rem; left: .7rem; z-index: 1; padding: .35rem .55rem; border-radius: .45rem; background: #f9e7bc; color: #765005; font-size: .66rem; font-weight: 900; text-transform: uppercase; letter-spacing: .035em; }
.product-card-body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 1rem; }
.product-category { color: var(--green); font-size: .66rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.product-card h3 { min-height: 2.7em; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; margin: .38rem 0 .65rem; font-size: .96rem; font-weight: 740; line-height: 1.35; }
.product-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .5rem; color: var(--green-dark); }
.product-price strong { font-size: 1.17rem; font-weight: 900; letter-spacing: -.04em; line-height: 1.1; }
.product-price small { font-size: .65rem; letter-spacing: .02em; }
.product-price del { margin: 0; font-size: .75rem; }
.product-merchant { width: 100%; margin: .45rem 0 .35rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: .76rem; }
.product-merchant a { color: inherit; }
.verified-badge { background: #eaf5ed; border: 1px solid #c6e3ce; color: #145a3e; font-size: .64rem; border-radius: .48rem; }
.card-actions { width: 100%; margin-top: auto; padding-top: .85rem; gap: .35rem; }
.stock-label { display: inline-flex; align-items: center; gap: .32rem; font-size: .73rem; }
.stock-label::before { content: ""; width: .42rem; height: .42rem; border-radius: 50%; background: currentColor; }
.product-card-cta { display: inline-flex; align-items: center; gap: .2rem; font-size: .77rem; color: var(--green); font-weight: 850; white-space: nowrap; }
.product-card-cta .icon { width: 1rem; height: 1rem; }
.deal-section { padding: clamp(1rem, 2vw, 1.7rem); border-radius: var(--radius-lg); background: #f5e9c8; }
.deal-section .section-heading { margin-bottom: 1.2rem; }
.deal-section .eyebrow { color: #7d5b1f; }
.featured-grid-compact { grid-template-columns: repeat(2,minmax(0,1fr)); }
.featured-grid-compact .product-card { display: grid; grid-template-columns: 47% minmax(0,1fr); min-height: 230px; }
.featured-grid-compact .product-image { height: 100%; aspect-ratio: auto; }
.featured-grid-compact .product-card-body { justify-content: center; }
.featured-grid-compact .card-actions { margin-top: 1rem; }

.shop-tile { display: flex; gap: .7rem; min-height: 184px; padding: 1.25rem; background: #fff; }
.shop-tile-top, .shop-tile-bottom { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; }
.shop-tile .shop-avatar { width: 3.8rem; height: 3.8rem; overflow: hidden; border-radius: 1rem; background: #e7f3e7; }
.shop-tile .shop-avatar img { width: 100%; height: 100%; object-fit: contain; }
.shop-tile-arrow { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: #f1f6ef; color: var(--green); }
.shop-tile-main { display: grid; gap: .3rem; }
.shop-tile-main strong { font-size: 1.03rem; line-height: 1.2; }
.shop-tile-main small { display: inline-flex; align-items: center; gap: .2rem; font-size: .74rem; }
.shop-tile-main .icon { width: .95rem; height: .95rem; }
.shop-tile-bottom { margin-top: auto; padding-top: .65rem; border-top: 1px solid var(--line); font-size: .72rem; color: var(--muted); }
.shop-tile-bottom .verified-text { font-size: .69rem; }

/* Catalogue, product, and boutique detail. */
.catalogue-layout { grid-template-columns: 250px minmax(0,1fr); gap: 1.25rem; }
.filter-panel { position: sticky; top: 1rem; padding: 1.25rem; border-radius: var(--radius-md); box-shadow: 0 7px 22px rgba(13, 55, 38, .035); }
.filter-heading { display: flex; align-items: center; gap: .55rem; padding-bottom: .95rem; border-bottom: 1px solid var(--line); margin-bottom: 1rem; }
.filter-heading h2 { margin: 0; }
.filter-heading .icon { color: var(--green); }
.filter-panel label, .form-card label, .purchase-form label { color: var(--ink); }
.filter-panel input, .filter-panel select, .form-card input, .form-card select, .form-card textarea, .purchase-form input, .purchase-form select { border-radius: .65rem; border-color: #d6e3d8; min-height: 2.75rem; }
.filter-panel .btn { width: 100%; }
.filter-reset { justify-self: center; font-size: .8rem; font-weight: 750; color: var(--green); }
.results-toolbar { display: flex; justify-content: space-between; gap: 1rem; padding: .9rem 1rem; margin-bottom: 1rem; border: 1px solid var(--line); border-radius: .8rem; background: #fff; color: var(--muted); font-size: .78rem; }
.results-toolbar strong { color: var(--ink); }
.catalogue-layout .product-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
.product-detail { align-items: start; gap: 1.25rem; }
.gallery-main { position: relative; height: auto; aspect-ratio: 1.1; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; }
.gallery-main img { padding: 1.5rem; }
.gallery-thumbs img { border: 1px solid var(--line); background: #fff; }
.product-info { border-radius: var(--radius-lg); padding: clamp(1.25rem, 3vw, 2.3rem); }
.product-info h1 { margin: .5rem 0; font-size: clamp(1.8rem, 3.1vw, 2.75rem); }
.detail-price-wrap { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; padding: .9rem 0; border-block: 1px solid var(--line); }
.detail-price { margin: 0; font-size: 2.1rem; letter-spacing: -.05em; }
.detail-price small { font-size: .95rem; letter-spacing: 0; }
.detail-price-wrap del { font-size: .94rem; }
.product-intro { color: var(--muted); line-height: 1.7; }
.purchase-form { grid-template-columns: 110px 1fr; align-items: end; margin-bottom: .7rem; }
.purchase-form label:has(select) { grid-column: 1/-1; }
.purchase-form .btn { min-height: 2.8rem; }
.favorite-form .btn { width: 100%; }
.seller-box { margin-top: 1.35rem; }
.seller-box a { display: inline-flex; align-items: center; gap: .35rem; }
.seller-box .verified-badge { justify-self: start; }
.description { border: 1px solid var(--line); border-radius: var(--radius-lg); }
.description p { white-space: pre-line; color: #40544a; }
.shop-hero { position: relative; overflow: hidden; min-height: 240px; gap: 1.4rem; padding: clamp(1.5rem, 4vw, 3rem); border-radius: var(--radius-lg); background: linear-gradient(115deg, #e7f3e9, #f8f9ee 70%); border: 1px solid #dce9dd; }
.shop-hero-logo { position: relative; z-index: 1; display: grid; place-items: center; width: 6.3rem; height: 6.3rem; background: #fff; border-radius: 1.5rem; box-shadow: var(--shadow); }
.shop-hero-logo .shop-logo, .shop-hero-logo .shop-avatar { width: 5.1rem; height: 5.1rem; border: 0; }
.shop-hero h1 { position: relative; z-index: 1; font-size: clamp(2rem, 4vw, 3.1rem); letter-spacing: -.045em; }
.shop-hero p { display: inline-flex; align-items: center; gap: .3rem; margin: .4rem 0 1rem; color: var(--muted); }
.shop-hero-decoration { position: absolute; right: 6%; bottom: -30%; color: rgba(8, 116, 82, .08); font-size: 18rem; transform: rotate(-14deg); }
.shop-description { max-width: 55rem; padding: 1.15rem 1.4rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; color: var(--ink); }

/* Customer workspace and forms keep all existing server-driven actions. */
.split-layout { grid-template-columns: 240px minmax(0,1fr); gap: 1.25rem; }
.account-menu { position: sticky; top: 1rem; padding: .8rem; border-radius: var(--radius-md); box-shadow: 0 7px 22px rgba(13, 55, 38, .035); }
.account-menu a, .account-menu button { padding: .74rem .8rem; border-radius: .7rem; font-size: .85rem; }
.account-menu a[aria-current=page] { background: var(--green-soft); color: var(--green-dark); font-weight: 850; }
.panel { border-radius: var(--radius-md); padding: clamp(1rem, 2vw, 1.55rem); box-shadow: 0 7px 22px rgba(13, 55, 38, .03); }
.panel h1, .panel h2 { letter-spacing: -.035em; }
.panel h1 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); }
.list-row { min-width: 0; }
.list-row > div { min-width: 0; }
.list-row strong { overflow-wrap: anywhere; }
.list-row a { color: var(--green-dark); }
.tag { background: #e6f4e9; border: 1px solid #cce7d1; }
.tag.warn { border-color: #efdfb8; }
.empty-state { border: 1px dashed #bcd9c4; border-radius: var(--radius-md); background: linear-gradient(145deg, #fff, #f6faf5); }
.empty-state h2 { margin-top: 0; }
.form-card { border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.checkout-grid { align-items: start; }
.checkout-grid > aside { position: sticky; top: 1rem; }
.checkout-grid > .panel:last-child { position: sticky; top: 1rem; }
.checkout-grid .panel h2 { padding-bottom: .6rem; border-bottom: 1px solid var(--line); }
.checkout-grid .panel .btn-primary { width: 100%; }
.checkout-grid .inline-form { flex-wrap: wrap; margin-top: .6rem; }
.checkout-grid .inline-form input { min-height: 2.65rem; border: 1px solid #d6e3d8; border-radius: .6rem; padding: .45rem; }
.checkout-steps { display: flex; flex-wrap: wrap; gap: .65rem; margin: 1.4rem 0 -1rem; padding: 0; list-style: none; counter-reset: step; }
.checkout-steps li { display: inline-flex; align-items: center; gap: .42rem; padding: .4rem .7rem; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--muted); font-size: .74rem; font-weight: 750; }
.checkout-steps li::before { counter-increment: step; content: counter(step); display: grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: #eff3ee; color: var(--green-dark); font-size: .7rem; }
.checkout-steps .is-current { background: var(--green-soft); border-color: #bedec9; color: var(--green-dark); }
.checkout-steps .is-current::before, .checkout-steps .is-done::before { background: var(--green); color: #fff; }
.payment-option { border-radius: var(--radius-sm); }
.notice { border-radius: .65rem; }
.pagination nav { flex-wrap: wrap; }
.pagination a, .pagination span { border: 1px solid var(--line); border-radius: .55rem; }
.pagination a:hover { background: var(--green-soft); }
.notification-row { border-left: 3px solid transparent; padding-left: .85rem; }
.notification-row.is-unread { border-left-color: var(--green); background: #f7fbf7; }
.order-row { gap: 1.5rem; }
.order-row > strong { color: var(--green-dark); white-space: nowrap; }
.account-stat { display: grid; align-content: center; min-height: 125px; }
.account-stat strong { font-size: 2rem; line-height: 1; color: var(--green); }
.account-stats { margin: 0; }
.account-welcome { position: relative; overflow: hidden; padding: clamp(1.5rem, 3vw, 2.4rem); background: linear-gradient(110deg, #086044, #0d8255); color: #fff; }
.account-welcome::after { content: ""; position: absolute; width: 190px; height: 190px; right: -55px; top: -75px; border: 27px solid rgba(255,255,255,.1); border-radius: 50%; pointer-events: none; }
.account-welcome .eyebrow { color: #c6efd3; }
.account-welcome h1 { margin: .45rem 0; }
.account-welcome p { color: #d6ecdd; font-size: .86rem; overflow-wrap: anywhere; }
.account-welcome .btn { position: relative; margin-top: .75rem; }
.account-stat { text-align: center; gap: .4rem; }
.account-stat span { font-size: .85rem; font-weight: 750; }
.account-stat:hover { border-color: #bcdcc6; box-shadow: var(--shadow); }
.account-next p { color: var(--muted); }
.order-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.order-open { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--green-soft); flex: none; }
.notification-row { border-bottom: 1px solid var(--line); }
.notification-row p { margin: .4rem 0; color: var(--muted); }
.notification-title { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.notification-help { margin: 1.2rem 0 0; font-size: .8rem; }

/* Footer */
.site-footer { margin-top: 0; padding: 0; background: #082f28; color: #daeae0; }
.footer-top { display: flex; justify-content: space-between; align-items: center; gap: 2rem; padding-block: 3rem; border-bottom: 1px solid rgba(255,255,255,.15); }
.footer-top .eyebrow { color: #a8e2bc; }
.footer-top h2 { margin: .25rem 0; color: #fff; font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing: -.04em; }
.footer-top p { margin: 0; max-width: 36rem; color: #bad2c5; font-size: .88rem; }
.footer-top .btn { white-space: nowrap; }
.footer-grid { grid-template-columns: 2fr repeat(3,1fr); gap: 2rem; padding-block: 3rem; }
.footer-grid > div { gap: .68rem; }
.footer-grid strong { margin-bottom: .4rem; color: #fff; font-size: .86rem; }
.footer-grid a:not(.brand) { color: #c5dbce; font-size: .83rem; }
.footer-grid a:hover { color: #fff; }
.footer-about p { max-width: 20rem; margin: .45rem 0 0; color: #bad2c5; font-size: .83rem; }
.site-footer .brand-name small { display: none; }
.footer-bottom { display: flex; justify-content: space-between; gap: 1rem; padding-block: 1.2rem; border-top: 1px solid rgba(255,255,255,.15); color: #a9c7b5; font-size: .73rem; }

@media (max-width: 1120px) {
    .header-main { grid-template-columns: auto minmax(230px,1fr); gap: .8rem 1.5rem; }
    .quick-nav { grid-column: 1/-1; justify-content: flex-end; }
    .home-hero-layout { grid-template-columns: minmax(0, 1.75fr) minmax(230px, .75fr); }
    .hero { grid-template-columns: 1fr; min-height: 400px; }
    .hero-art { display: none; }
    .product-grid, .category-grid, .shop-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .catalogue-layout .product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 800px) {
    .container { width: min(100% - 2rem, 1320px); }
    .topbar-inner span:last-child, .nav-tagline { display: none; }
    .header-main { grid-template-columns: 1fr auto; gap: .85rem; }
    .header-search { grid-column: 1/-1; grid-row: 2; }
    .quick-nav { grid-column: auto; justify-content: end; overflow: visible; }
    .quick-nav a { font-size: .68rem; }
    .category-nav { gap: 1.5rem; overflow-x: auto; scrollbar-width: none; }
    .category-nav::-webkit-scrollbar { display: none; }
    .home-hero-layout { grid-template-columns: 1fr; }
    .hero { min-height: 350px; }
    .hero-side { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
    .hero-side-card { min-height: 170px; }
    .product-grid, .category-grid, .shop-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .catalogue-layout, .product-detail, .split-layout, .checkout-grid { grid-template-columns: 1fr; }
    .filter-panel, .account-menu, .checkout-grid > aside, .checkout-grid > .panel:last-child { position: static; }
    .filter-panel form { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .filter-panel .filter-prices { grid-column: 1/-1; }
    .catalogue-layout .product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .benefits { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .account-menu { display: flex; overflow-x: auto; align-items: center; }
    .account-menu a, .account-menu button { white-space: nowrap; }
    .footer-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 600px) {
    .header-main { padding: .7rem 0; }
    .brand-mark { width: 2.55rem; height: 2.55rem; border-radius: .8rem; }
    .brand { font-size: .9rem; }
    .brand-name small { font-size: .5rem; letter-spacing: .1em; }
    .quick-nav { gap: 0; }
    .quick-nav a { min-width: 2.5rem; padding: .25rem; }
    .quick-nav a > span:not(.nav-count) { display: none; }
    .quick-nav .icon { width: 1.25rem; height: 1.25rem; }
    .quick-nav .nav-count { right: -.05rem; top: -.1rem; }
    .header-search { height: 2.8rem; }
    .header-search button { padding-inline: .8rem; }
    .category-nav { min-height: 2.8rem; font-size: .78rem; }
    .hero { min-height: auto; padding: 1.7rem; }
    .hero h1 { font-size: clamp(2.45rem, 10vw, 3.4rem); }
    .hero p { font-size: .91rem; }
    .hero-side { grid-template-columns: 1fr 1fr; gap: .6rem; }
    .hero-side-card { min-height: 153px; padding: 1rem; }
    .hero-side-card strong { font-size: 1rem; }
    .side-card-icon { width: 2rem; height: 2rem; font-size: 1rem; }
    .hero-side-card > span:last-child > span { font-size: .66rem; }
    .benefits-top { display: grid; grid-template-columns: 1fr; gap: .5rem; }
    .benefits-top > div { padding: .8rem 1rem; }
    .section-heading { align-items: flex-start; }
    .section-heading h2 { font-size: 1.65rem; }
    .section-heading > a { font-size: .75rem; white-space: normal; text-align: right; }
    .product-image { aspect-ratio: 1 / .9; height: auto; }
    .product-card-body { padding: .75rem; }
    .featured-grid-compact .product-card { display: flex; min-height: 0; }
    .featured-grid-compact .product-image { height: auto; aspect-ratio: 1 / .9; }
    .product-card h3 { font-size: .85rem; }
    .product-price strong { font-size: 1rem; }
    .product-merchant { font-size: .69rem; }
    .card-actions { flex-wrap: wrap; }
    .category-tile { min-height: 120px; padding: .7rem; }
    .category-tile-main { grid-template-columns: 1fr auto; gap: .35rem; }
    .category-icon { grid-column: 1/-1; width: 2.5rem; height: 2.5rem; border-radius: .75rem; font-size: 1.05rem; }
    .category-tile-content strong { font-size: .85rem; }
    .category-tile-content small { font-size: .65rem; }
    .category-children { display: none; }
    .shop-tile { min-height: 180px; padding: .8rem; }
    .shop-tile-main strong { font-size: .9rem; }
    .shop-tile-bottom { flex-wrap: wrap; }
    .filter-panel form { grid-template-columns: 1fr; }
    .filter-panel .filter-prices { grid-column: auto; }
    .results-toolbar span:last-child { display: none; }
    .purchase-form { grid-template-columns: 95px 1fr; }
    .footer-top, .footer-bottom { flex-direction: column; align-items: flex-start; }
    .footer-grid { gap: 1.5rem; }
    .footer-about { grid-column: 1/-1; }
    .list-row { align-items: flex-start; }
    .order-row { flex-wrap: wrap; }
    .account-menu { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .3rem; overflow: visible; }
    .account-menu a, .account-menu button { display: grid; place-items: center; min-height: 3.15rem; padding: .45rem .25rem; text-align: center; white-space: normal; font-size: .74rem; line-height: 1.25; }
    .account-menu form { min-width: 0; }
    .notification-panel .section-heading { flex-direction: column; align-items: stretch; }
    .notification-panel .section-heading form, .notification-panel .section-heading .btn { width: 100%; }
    .notification-row { display: grid; grid-template-columns: minmax(0,1fr); gap: .65rem; }
    .notification-row form { justify-self: start; }
    .notification-row .btn { min-height: 2.35rem; }
}
@media (max-width: 390px) {
    .container { width: min(100% - 1rem, 1320px); }
    .brand { gap: .4rem; font-size: .83rem; }
    .brand-mark { width: 2.25rem; height: 2.25rem; font-size: 1.4rem; }
    .quick-nav a { min-width: 2.15rem; }
    .hero-side-card { min-height: 145px; }
    .hero-side-card strong { font-size: .92rem; }
    .product-grid, .category-grid, .shop-grid, .catalogue-layout .product-grid { gap: .5rem; }
    .product-card-body { padding: .62rem; }
    .product-price strong { font-size: .95rem; }
    .verified-badge { font-size: .58rem; }
    .shop-tile-bottom { font-size: .67rem; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}