.site-header { position: sticky; top: 0; z-index: 50; }

.header-bar {
	position: relative;
	color: #fff;
	background:
		radial-gradient(ellipse 35% 140% at 100% 50%, rgb(34 197 94 / 26%), transparent 70%),
		radial-gradient(ellipse 25% 120% at 0% 100%, rgb(34 197 94 / 12%), transparent 70%),
		linear-gradient(90deg, #040605 0%, #07100b 60%, #0a1f13 100%);
}
.header-bar::after { content: ""; position: absolute; inset: auto 0 0 0; height: 2px; background: linear-gradient(90deg, transparent 0%, var(--green-strong) 30%, var(--green) 70%, transparent 100%); }

.header-inner { display: flex; align-items: center; gap: 2rem; padding-block: calc(1rem + 10px); }

.brand { display: inline-flex; flex-shrink: 0; }
.brand-logo { width: auto; height: 40px; }

.search { position: relative; display: flex; flex: 1; min-width: 0; height: 42px; border-radius: var(--radius-sm); background: var(--paper); }
.search:focus-within { outline: 3px solid var(--green); }
.search input { flex: 1; min-width: 0; padding: 0 1.1rem; border: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); outline: none; background: transparent; color: var(--ink); font-size: .95rem; }
.search button { display: grid; place-items: center; width: 3.3rem; border: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--green); color: #fff; cursor: pointer; }
.search button:hover { background: var(--green-strong); }
.search button svg { width: 20px; height: 20px; }

.header-links { display: flex; align-items: center; gap: 1.5rem; flex-shrink: 0; }

.header-icon { display: grid; grid-template-rows: 26px auto; justify-items: center; align-items: end; gap: .3rem; color: #fff; font-size: .82rem; font-weight: 600; line-height: 1.2; text-decoration: none; }
.header-icon svg, .header-icon .cart-icon { width: 26px; height: 26px; }
a.header-icon:hover { color: var(--green); }

.cart-icon { position: relative; display: block; }
.cart-count { position: absolute; top: -6px; right: -10px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--green); color: var(--ink); font-size: .72rem; font-weight: 800; line-height: 20px; text-align: center; }

@media (max-width: 900px) {
	.header-inner { flex-wrap: wrap; gap: .75rem 1rem; }
	.header-links { margin-left: auto; }
	.search { order: 3; flex-basis: 100%; }
}

@media (max-width: 640px) {
	.header-inner { column-gap: 12px; padding-block: 1rem; }
	.brand-logo { height: 28px; }
	.header-links { gap: 10px; }
	.header-icon > span:last-child:not(.cart-icon) { display: none; }
}

@media (max-width: 350px) {
	.brand-logo { height: 22px; }
	.header-links { gap: 6px; }
}

.site-footer { font-size: .92rem; }

.footer-main {
	padding-block: 3rem;
	color: #fff;
	background:
		radial-gradient(ellipse 45% 70% at 0% 0%, rgb(34 197 94 / 20%), transparent 70%),
		radial-gradient(ellipse 40% 70% at 100% 100%, rgb(34 197 94 / 16%), transparent 70%),
		var(--deep);
}

.footer-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(max-content, 1fr)); gap: 2rem 2.5rem; }

.footer-logo,
.footer-col h2 { display: flex; align-items: flex-end; height: 48px; margin: 0 0 1rem; padding-bottom: .5rem; border-bottom: 1px solid rgb(255 255 255 / 18%); }
.footer-logo-img { width: auto; height: 34px; }
.footer-col h2 { color: #fff; font-size: 1.2rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.25; white-space: nowrap; }
.footer-brand-col p { max-width: 34ch; color: rgb(255 255 255 / 72%); }

.footer-col ul { display: grid; gap: .55rem; }
.footer-col a { color: rgb(255 255 255 / 70%); text-decoration: none; }
.footer-col a:hover { color: #fff; }

.footer-pay-title { margin: 1.5rem 0 .5rem; color: #fff; font-size: .9rem; font-weight: 700; }
.footer-col .pay-marks { display: flex; flex-wrap: wrap; gap: .4rem; }
.pay-marks li { display: grid; place-items: center; height: 30px; padding: 0 .5rem; border-radius: 6px; background: #fff; }
.pay-marks img { width: auto; height: 20px; }

.footer-bar { border-top: 1px solid rgb(34 197 94 / 35%); background: #030504; color: rgb(255 255 255 / 65%); }
.footer-bar-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; padding-block: 1.1rem; font-size: .85rem; }
.footer-copy { margin-left: auto; }

@media (max-width: 1100px) {
	.footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.footer-brand-col { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
	.footer-grid { gap: 1.75rem 1rem; }
	.footer-col h2 { height: auto; white-space: normal; }
	.footer-col .pay-marks { display: grid; grid-template-columns: repeat(2, max-content); }
	.footer-copy { margin-left: 0; }
}

.suggest { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60; padding: .5rem; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); }
.suggest-group + .suggest-group { margin-top: .35rem; padding-top: .35rem; border-top: 1px solid var(--rule); }
.suggest a { display: flex; align-items: center; gap: .75rem; padding: .45rem .6rem; border-radius: 8px; color: inherit; font-size: .92rem; text-decoration: none; }
.suggest a:hover, .suggest a.is-active { background: var(--paper-2); }
.suggest img { width: 40px; height: 40px; flex-shrink: 0; object-fit: contain; }
.suggest small { margin-left: auto; color: var(--ink-soft); }
.suggest-all { font-weight: 700; }

.catnav { border-bottom: 1px solid var(--rule); background: var(--paper); }
.catnav-inner { position: relative; display: flex; align-items: center; gap: 1.5rem; height: 50px; }

.catnav-all { flex-shrink: 0; }
.catnav-all summary { display: flex; align-items: center; gap: .5rem; height: 50px; font-size: .9rem; font-weight: 700; list-style: none; cursor: pointer; }
.catnav-all summary::-webkit-details-marker { display: none; }
.catnav-all summary svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.catnav-all[open] summary { color: var(--green-ink); }

.catnav-panel { position: absolute; top: calc(100% + 5px); left: var(--gutter); z-index: 55; display: flex; max-height: calc(100dvh - var(--header-h) - 2rem); border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper); }
.catnav-tops { width: 300px; padding-block: .6rem; overflow-y: auto; }
.catnav-top-link { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .45rem 1.1rem; color: var(--ink); font-size: .88rem; font-weight: 600; text-decoration: none; }
.catnav-top-link svg { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.catnav-top:hover > .catnav-top-link, .catnav-top:focus-within > .catnav-top-link { background: var(--paper-2); color: var(--green-ink); }
.catnav-sub { display: none; position: absolute; top: 0; bottom: 0; left: 300px; width: 320px; padding: .6rem 0; overflow-y: auto; border-left: 1px solid var(--rule); }
.catnav-top:hover > .catnav-sub, .catnav-top:focus-within > .catnav-sub { display: block; }
.catnav-sub a { display: block; padding: .4rem 1.1rem; color: var(--ink); font-size: .88rem; font-weight: 500; text-decoration: none; }
.catnav-sub a:hover { color: var(--green-ink); }
.catnav-sub .catnav-sub-all { color: var(--ink); font-weight: 700; }
.catnav-panel:has(.catnav-top:hover > .catnav-sub, .catnav-top:focus-within > .catnav-sub) { padding-right: 320px; }

.catnav-bar { display: flex; flex-wrap: wrap; gap: 0 1.25rem; height: 50px; overflow: hidden; }
.catnav-bar a { display: flex; align-items: center; height: 50px; color: var(--ink); font-size: .85rem; font-weight: 500; white-space: nowrap; text-decoration: none; }
.catnav-bar a:hover { color: var(--green-ink); }

@media (max-width: 900px) {
	.catnav-bar { display: none; }
	.catnav-panel { left: 0; right: 0; flex-direction: column; margin-inline: var(--gutter); }
	.catnav-tops { width: auto; }
	.catnav-sub { position: static; display: none; width: auto; border-left: 0; padding: 0 0 .4rem 1rem; }
	.catnav-top:focus-within > .catnav-sub, .catnav-top:hover > .catnav-sub { display: block; }
	.catnav-panel:has(.catnav-top:hover > .catnav-sub, .catnav-top:focus-within > .catnav-sub) { padding-right: 0; }
}

.catnav-top.is-empty > .catnav-top-link { font-weight: 500; }
.catnav-sub a.is-empty { color: var(--ink-soft); font-weight: 400; }