:root { --yellow: #ffd020; --ink: #101010; --muted: #717171; }
body { background: #fff; }
.top { background: var(--yellow); color: #101010; font-weight: 700; }
.top b { color: #5e4a00; }
header { background: #101010; color: #fff; padding-top: 20px; padding-bottom: 20px; box-shadow: 0 0 0 100vmax #101010; clip-path: inset(0 -100vmax); }
.logo { width: 285px; }
.logo img { display: block; width: 100%; }
.headbtn { color: #fff; }
.headbtn i { color: #101010; }
.search { background: #282828; color: #ffd020; border: 1px solid #454545; }
.search input { color: #fff; }
.search input::placeholder { color: #c0c0c0; }
.catalog { background: var(--yellow); color: #101010; }
nav { background: var(--yellow); border-color: var(--yellow); color: #101010; }
nav .sale { color: #101010; border-left: 1px solid #ab8700; padding-left: 25px; }
.hero { background: #101010; color: #fff; }
.hero-copy .eyebrow { color: var(--yellow); }
.hero-copy .eyebrow span { background: var(--yellow); }
h1 em { background: transparent; color: var(--yellow); padding: 0; }
.hero-copy p { color: #d0d0d0; }
.hero-copy .blackbtn { background: var(--yellow); color: #101010; }
.hero-bottom { color: #aaa; }
.hero-art { color: #101010; }
.hero-index { color: var(--yellow); }
.hero-index span { color: #aaa; }
.price-label { background: #101010; color: var(--yellow); }
.float-note { background: #101010; color: #fff; }
.float-note span { color: var(--yellow); }
.benefits > div > span { background: var(--yellow); color: #101010; }
.category { background: #f6f6f6; border: 1px solid #e7e7e7; transition: border-color .2s, background .2s; }
.category:hover { background: #fff8d9; border-color: #d9ae00; opacity: 1; }
.category span b { color: #101010; background: var(--yellow); border-radius: 50%; width: 22px; height: 22px; display: grid; place-items: center; }
.tabs button.active { background: var(--yellow); color: #101010; font-weight: 800; }
.product .badge { background: #fff3bb; color: #3e3200; }
.product:hover { border-color: #d5ad12; }
.heart.liked { color: #996d00; }
.add { background: var(--yellow); color: #101010; }
.promo { background: var(--yellow); color: #101010; }
.promo p { color: #514300; }
.promo-symbol { background: #101010; color: var(--yellow); }
.blackbtn { background: #101010; color: var(--yellow); }
footer { background: #101010; border-top: 5px solid var(--yellow); color: #fff; }
footer img { width: 285px; max-width: 100%; }
footer p { color: var(--yellow); }
footer button { color: #fff; }
footer small { color: #bbb; }
:focus-visible { outline: 3px solid #b78600; outline-offset: 4px; }
@media (max-width: 1100px) { header { gap: 16px; } .logo { width: 240px; } nav { gap: 22px; } }
@media (max-width: 900px) { .logo { width: 250px; } nav .sale { padding-left: 15px; } }
@media (max-width: 550px) { header { gap: 10px; } .logo { width: calc(100% - 120px); max-width: 280px; margin-right: auto; } .catalog { order: 3; width: 100%; margin: 5px 0 0; padding: 12px; } .headbtn { min-width: 44px; padding: 0; } .search { order: 4; } .hero-copy { padding: 30px 25px; } .hero-art { border-radius: 100px 0 0 0; } }
header { position: relative; z-index: 20; isolation: isolate; clip-path: none; box-shadow: none; }
header::before { content: ''; position: absolute; inset: 0 calc((100% - 100vw) / 2); background: #101010; z-index: -1; }
.search { position: relative; min-width: 0; }
.search-results { position: absolute; top: calc(100% + 9px); left: 0; right: 0; min-width: 320px; max-height: 390px; overflow-y: auto; background: #fff; color: #101010; border: 1px solid #e4e4e4; border-radius: 12px; box-shadow: 0 15px 45px #0003; padding: 6px; z-index: 30; }
.search-results[hidden] { display: none; }
.search-result { display: flex; align-items: center; gap: 12px; width: 100%; background: #fff; color: #101010; text-align: left; padding: 12px 8px; border-radius: 7px; }
.search-result:hover, .search-result:focus-visible { background: #fff5c5; opacity: 1; }
.search-result img { width: 44px; height: 52px; object-fit: contain; }
.search-result div { flex: 1; min-width: 0; }
.search-result b { display: block; font-size: 12px; }
.search-result small { display: block; color: #727272; font-size: 10px; margin-top: 4px; }
.search-result strong { font-size: 12px; white-space: nowrap; }
.search-empty { padding: 12px; font-size: 12px; color: #666; }
@media(max-width:550px) { .search-results { min-width: 0; } }
.search-result > * { pointer-events: none; }
.gallery-thumbs{display:flex;gap:10px;margin-top:10px}.gallery-thumbs button{background:#f5f5f1;border:1px solid #ddd;border-radius:7px;padding:5px}.gallery-thumbs img{width:55px;height:55px;object-fit:contain;pointer-events:none}.stock{font-size:12px;color:#796000}.product-description{white-space:pre-line}.cartline button:disabled{opacity:.35;cursor:default}
.variant-controls{display:grid;grid-template-columns:1fr 1fr;gap:12px}.variant-controls label{font-size:11px;font-weight:700}.variant-controls select{display:block;width:100%;padding:10px;margin-top:6px;border:1px solid #ddd;border-radius:7px;background:white;font-size:12px}.cartline small{display:block;font-size:10px;line-height:1.5;color:#777;margin:5px 0}.variant-controls select:focus{outline:2px solid #e0b400}
.variant-picker{position:relative;min-width:0}.variant-picker.open{z-index:20}.variant-label{display:block;margin-bottom:7px;font-size:11px;font-weight:700;color:#68665f}.variant-trigger{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:48px;padding:0 14px;border:1px solid #e2e1db;border-radius:11px;background:#fafaf8;color:#171717;text-align:left;font-size:12px;font-weight:700;cursor:pointer;transition:border-color .18s,background .18s,box-shadow .18s}.variant-trigger:hover,.variant-picker.open .variant-trigger{border-color:#e5b900;background:#fffdf4}.variant-trigger:focus-visible,.variant-option:focus-visible{outline:2px solid #e0b400;outline-offset:2px}.variant-trigger svg{flex:none;width:16px;height:16px;transition:transform .18s}.variant-picker.open .variant-trigger svg{transform:rotate(180deg)}.variant-menu{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:1;max-height:190px;overflow-y:auto;padding:5px;border:1px solid #e9e7df;border-radius:12px;background:#fff;box-shadow:0 12px 30px rgba(26,24,14,.16);scrollbar-width:thin;scrollbar-color:#cac6b9 transparent}.variant-menu[hidden]{display:none}.variant-picker.open-up .variant-menu{top:auto;bottom:calc(100% + 6px)}.variant-option{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:38px;padding:9px 10px;border:0;border-radius:8px;background:transparent;color:#25241f;text-align:left;font-size:12px;cursor:pointer}.variant-option:hover{background:#f6f5ef}.variant-option[aria-selected="true"]{background:#fff5cb;font-weight:700}.option-check{visibility:hidden;color:#b18b00;font-size:15px}.variant-option[aria-selected="true"] .option-check{visibility:visible}#modal{scrollbar-width:thin;scrollbar-color:#c7c4b8 transparent;overflow-x:hidden}#modal::-webkit-scrollbar,.variant-menu::-webkit-scrollbar{width:7px}#modal::-webkit-scrollbar-track,.variant-menu::-webkit-scrollbar-track{background:transparent;margin:14px 0}#modal::-webkit-scrollbar-thumb,.variant-menu::-webkit-scrollbar-thumb{background:#c7c4b8;border-radius:10px}#modal::-webkit-scrollbar-thumb:hover,.variant-menu::-webkit-scrollbar-thumb:hover{background:#a9a596}#modal::-webkit-scrollbar-button,.variant-menu::-webkit-scrollbar-button{display:none;width:0;height:0}
dialog #toast{position:sticky;bottom:8px;left:auto;transform:none;width:fit-content;max-width:100%;margin:12px auto 0;text-align:center;box-shadow:0 5px 20px #0003}
dialog #toast.visible{transform:none}
select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23151515' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px!important;cursor:pointer}select:hover{border-color:#c9a200!important}select:focus-visible{outline:2px solid #e0b400;outline-offset:2px}.checkout-btn{width:100%;justify-content:center}.checkout-back{background:none;color:#666;padding:0;font-size:12px}.checkout-summary{background:#f8f8f3;border-radius:10px;padding:14px;margin:18px 0;font-size:12px}.checkout-summary>div{display:flex;justify-content:space-between;gap:12px;padding:9px 0}.checkout-summary small{display:block;color:#777;margin-top:5px}.checkout-total{border-top:1px solid #ddd;margin-top:5px;padding-top:14px!important;font-size:14px}#checkout-form label{display:block;font-size:12px;font-weight:700;margin:16px 0}#checkout-form input,#checkout-form textarea{display:block;width:100%;border:1px solid #d7d7d0;border-radius:8px;padding:12px;margin-top:7px;font:inherit;font-weight:400;background:#fff}#checkout-form textarea{resize:vertical}#checkout-form input:focus,#checkout-form textarea:focus{outline:2px solid #e0b400;outline-offset:1px}.checkout-error{background:#fff0ec;color:#9a2929;border-radius:8px;padding:12px;font-size:12px}.checkout-error[hidden]{display:none}.checkout-btn:disabled{opacity:.5;cursor:wait}.checkout-success{text-align:center;padding:22px 0}.success-icon{display:grid;place-items:center;margin:auto;background:#ffd020;width:60px;height:60px;border-radius:50%;font-size:30px;font-weight:800}.checkout-success p{color:#666;font-size:13px}.checkout-success .blackbtn{justify-content:center}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27%3E%3Cpath d=%27m4 6 4 4 4-4%27 fill=%27none%27 stroke=%27%23151515%27 stroke-width=%271.8%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E")!important}
select{background-repeat:no-repeat!important;background-position:right 12px center!important;background-size:16px 16px!important}