@font-face{font-family: "Vazirmatn";font-style: normal;font-display: swap;font-weight: 100 900;
src: url(/fonts/vazirmatn-arabic-wght-normal.woff2) format("woff2-variations");
unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC}
@font-face{font-family: "Vazirmatn";font-style: normal;font-display: swap;font-weight: 100 900;
src: url(/fonts/vazirmatn-latin-wght-normal.woff2) format("woff2-variations");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD}
@font-face{font-family: "Martian Mono";font-style: normal;font-display: swap;font-weight: 400 500;
src: url(/fonts/martian-mono-latin-500-normal.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD}
:root{
--font-sans: "Vazirmatn", Tahoma, sans-serif;
--font-display: var(--font-fa-display);
--font-mono: "Martian Mono", "Vazirmatn", ui-monospace, monospace;
--gutter: var(--gutter-sm);
--header-height: calc(var(--space-48) * 2 + var(--space-8));
}
@media (min-width: 768px){:root{--gutter: var(--gutter-lg);--header-height: calc(var(--space-48) * 2 + var(--space-24))}}
@media (min-width: 1200px){:root{--header-height: calc(var(--space-48) + var(--space-24))}}
*, *::before, *::after{box-sizing: border-box}
html{-webkit-text-size-adjust: 100%;scroll-padding-top: calc(var(--header-height) + var(--space-16))}
html.lock{overflow: hidden}
body{margin: 0;font-family: var(--font-sans);font-size: 16px;line-height: 1.9;background: var(--surface);color: var(--ink);font-feature-settings: "ss01"}
img{max-width: 100%;display: block}
a{color: var(--link);text-underline-offset: 5px;text-decoration-thickness: 1.5px}
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible{outline: 2px solid var(--focus);outline-offset: 2px}
h1, h2, h3, p, ul, dl, figure{margin: 0}
bdi.sku, .sku{font-family: var(--font-mono);font-size: 11px;line-height: 16px;font-weight: 500;letter-spacing: .04em;color: var(--ink-muted);unicode-bidi: isolate}
.muted{color: var(--ink-muted)}
.skip{position: absolute;inset-inline-start: var(--space-16);top: -100px;z-index: var(--z-toast);background: var(--action);color: var(--on-action);padding: var(--space-8) var(--space-16)}
.skip:focus{top: var(--space-8)}
.t-display-xl{font-family: var(--font-display);font-weight: 650;font-size: clamp(40px, 5.2vw, 72px);line-height: 1.5}
.t-display{font-family: var(--font-display);font-weight: 650;font-size: clamp(32px, 4vw, 48px);line-height: 1.5}
.t-h1{font-family: var(--font-display);font-weight: 650;font-size: clamp(28px, 3vw, 36px);line-height: 1.6}
.t-h2{font-size: clamp(24px, 2.6vw, 32px);line-height: 1.6;font-weight: 650}
.t-h3{font-size: 20px;line-height: 1.6;font-weight: 700}
.t-body-lg{font-size: 18px;line-height: 1.95}
.t-body{font-size: 16px;line-height: 1.9}
.t-small{font-size: 14px;line-height: 1.8}
.t-label{font-size: 13px;line-height: 1.6;font-weight: 600;color: var(--ink-muted)}
.t-display-xl, .t-display, .t-h1, .t-h2{text-wrap: balance}
a.kl-btn{text-decoration: none}
a.kl-btn--quiet{text-decoration: underline}
.wrap{width: 100%;max-width: var(--container-max);margin-inline: auto;padding-inline: var(--gutter)}
.section{padding-block: var(--space-64)}
@media (min-width: 900px){.section{padding-block: var(--space-96)}}
.section-head{display: flex;flex-wrap: wrap;align-items: end;justify-content: space-between;gap: var(--space-16);margin-bottom: var(--space-32)}
.section-head p{max-width: var(--measure);margin-top: var(--space-8)}
.section-head > a{min-height: var(--tap-min);display: inline-flex;align-items: center;gap: var(--space-12);font-size: 16px;font-weight: 600}
.section-head > a::after{content: "←"}
.band-raised{background: var(--surface-raised);border-block: 1px solid var(--line)}
.kl-neutral{
--on-sand: var(--ink);
--on-sand-muted: var(--ink-muted);
--sand-deep: var(--line);
--sand-line-strong: var(--line-strong);
--focus-on-sand: var(--focus);
}
.site-header, .site-footer{background: var(--surface-raised)}
.hero{background: var(--surface-raised)}
.newsletter-band{background: var(--surface-soft)}
.site-header{position: sticky;top: 0;z-index: var(--z-header);border-bottom: 1px solid var(--sand-deep)}
.header-inner{display: grid;grid-template-columns: auto minmax(0, 1fr);grid-template-rows: calc(var(--space-48) + var(--space-8)) var(--space-48);align-items: center;column-gap: var(--space-16)}
@media (min-width: 768px){.header-inner{grid-template-rows: calc(var(--space-48) + var(--space-24)) var(--space-48);column-gap: var(--space-32)}}
.brand{display: grid;place-items: center;min-height: var(--tap-min);flex: none;grid-row: 1;padding: var(--space-8) var(--space-12);background: var(--sand);border-radius: var(--radius-nub)}
.brand img{height: 22px;width: auto}
@media (min-width: 768px){.brand img{height: 26px}}
.nav{grid-row: 2;grid-column: 1 / -1;display: flex;align-items: center;gap: var(--space-24);overflow-x: auto;scrollbar-width: none;border-top: 1px solid var(--line);margin-inline: calc(-1 * var(--gutter));padding-inline: var(--gutter)}
.nav::-webkit-scrollbar{display: none}
.nav a{flex: none;display: inline-flex;align-items: center;min-height: var(--tap-min);color: var(--ink);text-decoration: none;font-size: 14px;font-weight: 500;white-space: nowrap}
.nav a:first-child{font-weight: 700}
.nav a[aria-current="page"]{text-decoration: underline;text-underline-offset: var(--space-8)}
@media (min-width: 1200px){
.header-inner{display: flex;height: var(--header-height)}
.nav{gap: var(--space-4);overflow: visible;border: 0;margin: 0;padding: 0}
.nav a{display: inline-flex;align-items: center;min-height: var(--tap-min);padding-inline: var(--space-12);color: var(--on-sand);text-decoration: none;font-weight: 600;font-size: 15px;white-space: nowrap}
.nav a:hover, .nav a[aria-current="page"]{text-decoration: underline;text-decoration-thickness: 2px;text-underline-offset: 8px}
.nav .nav-shop{border-inline-end: 1px solid var(--line);margin-inline-end: var(--space-8);padding-inline-end: var(--space-24)}
}
.header-tools{grid-row: 1;grid-column: 2;margin-inline-start: auto;display: flex;align-items: center;gap: var(--space-4)}
.icon-btn, .cart-btn, .menu summary{appearance: none;background: transparent;border: 0;color: inherit;min-width: var(--tap-min);min-height: var(--tap-min);display: inline-flex;align-items: center;justify-content: center;gap: var(--space-8);cursor: pointer;border-radius: var(--radius-nub);font: inherit;font-weight: 600;text-decoration: none;padding-inline: var(--space-8)}
.icon-btn svg, .cart-btn svg, .menu summary svg{width: 22px;height: 22px;flex: none}
.icon-btn:hover, .cart-btn:hover, .menu summary:hover{background: var(--sand-deep)}
.cart-count{min-width: 22px;height: 22px;padding-inline: 6px;border-radius: var(--radius-full);background: var(--on-sand);color: var(--sand);font-size: 12px;line-height: 22px;text-align: center;font-weight: 700}
.cart-btn-label{display: none}
@media (min-width: 768px){.cart-btn-label{display: inline}}
.menu{position: relative}
@media (min-width: 1200px){.menu{display: none}}
.menu summary{list-style: none}
.menu summary::-webkit-details-marker{display: none}
.menu-panel{position: absolute;inset-inline-end: 0;top: calc(100% + var(--space-8));width: min(88vw, 320px);max-height: calc(100dvh - var(--header-height));overflow-y: auto;background: var(--surface-raised);border: 1px solid var(--sand-deep);border-radius: var(--radius-card);box-shadow: var(--shadow-lift);padding: var(--space-8);display: grid}
.menu-panel a{color: var(--on-sand);text-decoration: none;min-height: var(--tap-min);display: flex;align-items: center;padding-inline: var(--space-16);font-weight: 600}
.menu-panel a:hover{background: var(--sand-deep)}
.hero{padding-block: var(--space-24) var(--space-32);border-bottom: 1px solid var(--line)}
.hero-grid{display: grid;gap: var(--space-24);align-items: center}
.hero-copy{display: grid;gap: var(--space-16);padding-block: var(--space-8)}
.hero-copy .eyebrow{margin: 0;display: flex;gap: var(--space-12);align-items: center;color: var(--ink-muted)}
.hero-copy .eyebrow::before{content: "";width: var(--space-24);height: 2px;background: var(--ink-muted)}
.hero h1 span{display: block;color: var(--ink-muted)}
.hero .t-body-lg{color: var(--ink-muted);max-width: 42ch}
.hero-actions{display: flex;align-items: center;flex-wrap: wrap;gap: var(--space-24)}
.hero-actions .kl-btn{gap: var(--space-32);min-height: calc(var(--tap-min) + var(--space-8))}
.hero-story{min-height: var(--tap-min);display: inline-flex;align-items: center;gap: var(--space-12);font-weight: 600;text-decoration: none}
.hero-story:hover{text-decoration: underline}
.hero-feature{position: relative;display: block;min-width: 0;overflow: hidden;border: 1px solid var(--line);border-radius: var(--radius-card);color: var(--ink);text-decoration: none}
.hero-feature > img{width: 100%;height: auto;aspect-ratio: 1;object-fit: cover;object-position: center;transition: transform 320ms ease}
.hero-feature:hover > img{transform: scale(1.025)}
.feature-label{position: absolute;top: var(--space-24);inset-inline-start: var(--space-24);padding: var(--space-4) var(--space-12);border-radius: var(--radius-full);background: var(--sand);color: var(--on-sand);font-size: 13px;font-weight: 600}
.feature-caption{position: relative;display: flex;align-items: center;justify-content: space-between;gap: var(--space-16);padding: var(--space-16) var(--space-24);background: var(--surface-raised)}
.feature-caption > div{display: grid;gap: var(--space-4)}
.feature-caption strong{font-size: 16px;font-weight: 650}
.feature-caption > div > span{font-size: 14px;color: var(--ink-muted)}
.feature-link{display: inline-flex;align-items: center;gap: var(--space-16);font-size: 14px;font-weight: 600;white-space: nowrap}
@media (min-width: 768px){
.hero{padding-block: var(--space-32)}
.hero-grid{grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);gap: var(--space-48)}
.hero-copy{padding: var(--space-32) 0;gap: var(--space-24)}
}
@media (min-width: 1200px){.hero-copy{padding-inline: var(--space-32)}.hero-feature > img{aspect-ratio: 6 / 5}}
@media (max-width: 899px){.feature-link{font-size: 0;gap: 0}.feature-link > span{font-size: 24px}}
.eyebrow{display: inline-block;font-size: 14px;font-weight: 700;color: var(--on-sand-muted);margin-bottom: var(--space-12)}
.kl-sand .kl-btn--primary:hover{box-shadow: inset 0 -4px 0 var(--sand-deep)}
.cats{display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: var(--space-16)}
@media (min-width: 380px){.cats{grid-template-columns: repeat(3, minmax(0, 1fr))}}
@media (min-width: 1024px){.cats{grid-template-columns: repeat(6, minmax(0, 1fr));gap: var(--space-24)}}
.cat{display: grid;gap: var(--space-12);color: var(--ink);text-decoration: none}
.cat-well{aspect-ratio: 1;overflow: hidden;background: var(--surface-soft);border-radius: var(--radius-card)}
.cat-well img{width: 100%;height: 100%;object-fit: cover;transition: transform 320ms cubic-bezier(.4,0,.2,1)}
.cat-well.ph-well{display: grid;place-items: center}
.cat-well.ph-well img{width: 22%;height: auto;object-fit: contain}
.cat:hover .cat-well img{transform: scale(1.03)}
.cat-name{display: grid;gap: var(--space-4);font-size: 16px;font-weight: 600}
.cat-name b{font-weight: 600}
.cat-name span{font-size: 14px;font-weight: 500;color: var(--ink-muted)}
.cat:hover .cat-name b{text-decoration: underline;text-decoration-thickness: 1.5px;text-underline-offset: 6px}
.grid{display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: var(--space-24) var(--space-16)}
@media (min-width: 900px){.grid{grid-template-columns: repeat(3, minmax(0, 1fr));gap: var(--space-48) var(--space-24)}}
@media (min-width: 1200px){.grid{grid-template-columns: repeat(4, minmax(0, 1fr))}}
@media (min-width: 900px){.grid--row{grid-template-columns: repeat(4, minmax(0, 1fr))}}
@media (min-width: 900px){.grid--gaming{grid-template-columns: repeat(3, minmax(0, 1fr))}}
.card-slot{min-width: 0}
.card-slot .kl-card{height: 100%}
.card-slot .kl-card-well{aspect-ratio: 1;border-radius: var(--radius-card)}
.card-slot .kl-card-well img{object-fit: contain}
.card-slot .kl-card-name{font-size: 16px;line-height: 1.8;font-weight: 600}
@media (min-width: 900px){.card-slot .kl-card-name{font-size: 18px}}
.card-slot .kl-card-meta{gap: var(--space-8)}
.card-slot .kl-card-foot{margin-top: auto}
.card-slot .kl-card-badge .kl-badge{background: var(--surface-raised)}
.card-slot .kl-card-badge .kl-badge--sand{background: var(--sand)}
.card-slot .kl-card-foot{align-items: start;flex-wrap: wrap;row-gap: var(--space-4)}
.card-slot .kl-price-now{font-size: 16px}
@media (min-width: 900px){.card-slot .kl-price-now{font-size: 18px}}
.card-slot .kl-card-sku{unicode-bidi: isolate;align-self: flex-start}
.kl-card-dots{font-weight: 500}
.pdp-title .sku{justify-self: start}
.is-placeholder .kl-card-well{background: var(--surface-soft)}
.is-placeholder .kl-card-well img{object-fit: contain;padding: 30%}
.ph{display: grid;place-items: center;width: 100%;height: 100%;background: var(--surface-soft)}
.ph img{width: 36%}
.toolbar{display: grid;gap: var(--space-16);margin-bottom: var(--space-16)}
.toolbar-row{display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: var(--space-12)}
.chips{display: flex;flex-wrap: wrap;gap: var(--space-8)}
@media (max-width: 767px){
.chips{flex-wrap: nowrap;overflow-x: auto;margin-inline: calc(var(--gutter) * -1);padding-inline: var(--gutter);padding-bottom: var(--space-4);scrollbar-width: none}
.chips::-webkit-scrollbar{display: none}
.chip{flex: none}
.toolbar-row{display: grid}
}
.chip{appearance: none;font: inherit;font-size: 15px;font-weight: 600;min-height: var(--tap-min);padding-inline: var(--space-16);border-radius: var(--radius-full);border: 1.5px solid var(--line-strong);background: transparent;color: var(--ink);cursor: pointer;display: inline-flex;align-items: center;gap: var(--space-8)}
.chip:hover{border-color: var(--ink)}
.chip[aria-pressed="true"]{background: var(--ink);border-color: var(--ink);color: var(--surface)}
.chip-count{font-size: 12px;opacity: .8}
.sort{display: inline-flex;align-items: center;gap: var(--space-8);font-size: 14px;font-weight: 600}
.select, .sort select{font: inherit;font-size: 15px;min-height: var(--tap-min);padding-inline: var(--space-12) var(--space-32);color: var(--ink);background: var(--surface-raised);border: 1.5px solid var(--line-strong);border-radius: var(--radius-nub)}
.result-count{margin-bottom: var(--space-24)}
.empty{padding-block: var(--space-48)}
.crumbs{display: flex;flex-wrap: wrap;align-items: center;gap: var(--space-8);font-size: 14px;color: var(--ink-muted);padding: var(--space-8) 0}
.crumbs a{color: var(--ink-muted);min-height: var(--tap-min);display: inline-flex;align-items: center}
.crumbs li{list-style: none;display: inline-flex;align-items: center;gap: var(--space-8)}
.crumbs li + li::before{content: "/";color: var(--line-strong)}
.crumbs ol{display: contents}
.page-head{padding-block: var(--space-16) var(--space-48);display: grid;gap: var(--space-16)}
.page-head--kicker{padding-bottom: var(--space-16)}
.page-kicker{font-size: 14px;line-height: 1.8;font-weight: 700;color: var(--ink-muted);letter-spacing: 0;text-transform: none}
.pdp{display: grid;gap: var(--space-32);padding-bottom: var(--space-64)}
@media (min-width: 900px){.pdp{grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);gap: var(--space-48)}.pdp-info{position: sticky;top: calc(var(--header-height) + var(--space-24));align-self: start}}
.gallery{display: grid;gap: var(--space-12)}
.gallery-main{aspect-ratio: 1;display: grid;place-items: center;overflow: hidden;border-radius: var(--radius-card)}
.gallery-main img{width: 100%;height: 100%;object-fit: contain}
.gallery-main.is-empty{background: var(--sand);align-content: center;gap: var(--space-16);text-align: center;color: var(--on-sand-muted)}
.gallery-main.is-empty .ph{background: transparent;height: auto}
.gallery-main.is-empty .ph img{width: 96px}
.gallery-thumbs{display: flex;gap: var(--space-12);overflow-x: auto;padding: var(--space-8)}
.thumb{appearance: none;border: 0;padding: 0;width: 72px;height: 90px;flex: none;cursor: pointer;box-shadow: inset 0 0 0 1px var(--line)}
.thumb img{width: 100%;height: 100%;object-fit: contain}
.thumb[aria-pressed="true"]{box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink)}
.pdp-info{display: grid;gap: var(--space-24)}
.pdp-title{display: grid;gap: var(--space-8)}
.pdp-title .t-body-lg{color: var(--ink-muted)}
.name-en{margin-top: calc(var(--space-4) * -1)}
.name-en bdi{unicode-bidi: isolate}
.buybox{display: grid;gap: var(--space-24);background: var(--surface-raised);border: 1px solid var(--line);border-radius: var(--radius-card);padding: var(--space-24)}
.buybox-price{display: flex;flex-wrap: wrap;align-items: baseline;gap: var(--space-12)}
.buybox-price .kl-price-now{font-size: 26px;line-height: 1.5;font-weight: 800}
.pack{font-size: 14px;font-weight: 600;color: var(--ink-muted);border: 1px solid var(--line-strong);padding: 2px var(--space-8);border-radius: var(--radius-nub)}
.buy-row{display: flex;gap: var(--space-12);align-items: stretch}
.buy-btn{flex: 1}
.variants{display: grid;gap: var(--space-12)}
.variants-legend{font-size: 13px;font-weight: 600;color: var(--ink-muted)}
.variants-legend b{color: var(--ink);font-size: 16px;margin-inline-start: var(--space-8)}
.variant-row{display: flex;flex-wrap: wrap;gap: var(--space-8)}
.variant-pill{appearance: none;font: inherit;font-size: 14px;font-weight: 600;min-height: var(--tap-min);padding-inline: var(--space-12) var(--space-16);border-radius: var(--radius-full);border: 1.5px solid var(--line-strong);background: transparent;color: var(--ink);cursor: pointer;display: inline-flex;align-items: center;gap: var(--space-8)}
.variant-pill i{width: 16px;height: 16px;border-radius: var(--radius-full);box-shadow: inset 0 0 0 1px var(--line-strong)}
.variant-pill[aria-checked="true"]{border-color: var(--ink);box-shadow: inset 0 0 0 1px var(--ink)}
.variant-pill:active{transform: scale(.96);transition: transform 240ms cubic-bezier(.34,1.56,.64,1)}
.variant-note{max-width: var(--measure)}
.soon{display: grid;gap: var(--space-12);justify-items: start;padding: var(--space-24);background: var(--surface-raised);border: 1px solid var(--line)}
.subscribe{display: grid;gap: var(--space-12);width: 100%}
@media (min-width: 560px){.subscribe{grid-template-columns: 1fr auto;align-items: start}.subscribe .kl-btn{margin-top: 30px}}
.form-done{font-weight: 600;padding: var(--space-12) 0}
.details{border-top: 1px solid var(--line)}
.details .kl-disc-btn{font-size: 18px}
.details .kl-disc-body p + p{margin-top: var(--space-12)}
.related{border-top: 1px solid var(--line)}
.process{display: grid;gap: var(--space-48);align-items: center}
@media (min-width: 900px){.process{grid-template-columns: 5fr 7fr}}
.flutes{height: 320px;display: flex;gap: var(--space-8);align-items: stretch;background: var(--sand);padding: var(--space-48);overflow: hidden;border-radius: var(--radius-card)}
.flutes i{flex: 1;background: var(--sand-deep);border-radius: var(--radius-full)}
.flutes i:nth-child(2n){margin-block: var(--space-24)}
.flutes i:nth-child(3n){margin-block: var(--space-48)}
.steps{display: grid;gap: var(--space-24);counter-reset: step;padding: 0}
.steps li{list-style: none;display: grid;grid-template-columns: 48px 1fr;gap: var(--space-16)}
.steps li::before{counter-increment: step;content: counter(step, persian);font-family: var(--font-display);font-size: 24px;line-height: 1.8;color: var(--ink-muted)}
.newsletter{display: grid;gap: var(--space-24);align-items: center}
@media (min-width: 900px){.newsletter{grid-template-columns: 1fr 1fr;gap: var(--space-64)}}
.newsletter .kl-field input{background: var(--surface-raised)}
.newsletter .t-display{font-size: clamp(28px, 3vw, 40px);margin-bottom: var(--space-16)}
.site-footer{padding-block: var(--space-64) var(--space-32);border-top: 1px solid var(--sand-deep)}
.footer-grid{display: grid;gap: var(--space-32)}
@media (min-width: 900px){.footer-grid{grid-template-columns: 2fr 1fr 1fr 1fr}}
.footer-grid h2{font-size: 15px;font-weight: 700;margin-bottom: var(--space-8)}
.footer-grid ul{list-style: none;padding: 0;display: grid}
.footer-grid a{color: var(--on-sand);text-decoration: none;display: inline-flex;min-height: var(--tap-min);align-items: center}
.footer-grid a:hover{text-decoration: underline}
.footer-sign{width: 56px;height: 56px;margin-bottom: var(--space-16)}
.footer-note{color: var(--on-sand-muted);max-width: 42ch}
.footer-base{margin-top: var(--space-48);padding-top: var(--space-24);border-top: 1px solid var(--sand-deep);display: flex;flex-wrap: wrap;justify-content: space-between;gap: var(--space-12);font-size: 14px;color: var(--on-sand-muted)}
.drawer{position: fixed;inset: 0;z-index: var(--z-drawer);pointer-events: none}
.drawer-scrim{position: absolute;inset: 0;background: color-mix(in srgb, var(--on-sand) 42%, transparent);opacity: 0;transition: opacity 320ms cubic-bezier(.4,0,.2,1)}
.drawer-panel{position: absolute;top: 0;bottom: 0;inset-inline-end: 0;width: min(100%, 440px);background: var(--surface-raised);box-shadow: var(--shadow-lift);display: flex;flex-direction: column;transform: translateX(-100%);transition: transform 320ms cubic-bezier(.4,0,.2,1);visibility: hidden}
.drawer.is-open{pointer-events: auto}
.drawer.is-open .drawer-scrim{opacity: 1}
.drawer.is-open .drawer-panel{transform: none;visibility: visible}
.drawer-head{display: flex;align-items: center;justify-content: space-between;padding: var(--space-16) var(--space-24);border-bottom: 1px solid var(--line)}
.drawer-empty{padding: var(--space-24);display: grid;gap: var(--space-16);justify-items: start}
.drawer .lines{flex: 1;overflow-y: auto;padding: 0 var(--space-24)}
.drawer-foot{padding: var(--space-16) var(--space-24) var(--space-24);border-top: 1px solid var(--line);display: grid;gap: var(--space-12)}
.lines{list-style: none;margin: 0}
.line{display: grid;grid-template-columns: 80px 1fr auto;gap: var(--space-16);padding-block: var(--space-16);border-bottom: 1px solid var(--line);align-items: start}
.line-img{display: block;width: 80px;height: 100px;overflow: hidden}
.line-img img{width: 100%;height: 100%;object-fit: contain}
.line-img .ph img{width: 50%}
.line-body{display: grid;gap: 2px;min-width: 0}
.line-name{color: var(--ink);font-weight: 700;text-decoration: none;line-height: 1.6}
.line-name:hover{text-decoration: underline}
.line-meta{font-size: 13px;color: var(--ink-muted)}
.line-actions{display: flex;flex-wrap: wrap;align-items: center;gap: var(--space-8);margin-top: var(--space-8)}
.line-price .kl-price-now{font-size: 15px;white-space: nowrap}
.sum-row{display: flex;justify-content: space-between;align-items: baseline;gap: var(--space-16);font-size: 15px}
.sum-total{border-top: 1px solid var(--line);padding-top: var(--space-12);font-weight: 700}
.sum-total .kl-price-now{font-size: 22px;font-weight: 800}
@media (prefers-reduced-motion: reduce){.drawer-panel, .drawer-scrim, .cat-well img{transition: none}}
.cart-layout, .checkout{display: grid;gap: var(--space-32);padding-bottom: var(--space-64);align-items: start}
@media (min-width: 900px){.cart-layout, .checkout{grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);gap: var(--space-48)}.summary{position: sticky;top: calc(var(--header-height) + var(--space-24))}}
.lines--page{border-top: 1px solid var(--line)}
@media (min-width: 640px){.lines--page .line{grid-template-columns: 112px 1fr auto}.lines--page .line-img{width: 112px;height: 140px}}
.summary{background: var(--surface-raised);border: 1px solid var(--line);border-radius: var(--radius-card);padding: var(--space-24);display: grid;gap: var(--space-16)}
.mini-lines{list-style: none;padding: 0;display: grid;gap: var(--space-8);font-size: 14px;border-bottom: 1px solid var(--line);padding-bottom: var(--space-12)}
.mini-lines li{display: flex;justify-content: space-between;align-items: start;gap: var(--space-16)}
.mini-lines li > span:last-child, .sum-row > :last-child{white-space: nowrap}
.sum-row > :first-child{min-width: 0}
.checkout-main{display: grid;gap: var(--space-32)}
.fieldset{border: 0;padding: 0;margin: 0;display: grid;gap: var(--space-16);min-width: 0}
.fieldset legend{padding: 0;margin-bottom: var(--space-16)}
.form-grid{display: grid;gap: var(--space-16)}
@media (min-width: 640px){.form-grid{grid-template-columns: 1fr 1fr}.span-2{grid-column: 1 / -1}}
.form-grid .kl-field input{width: 100%}
.radios{display: grid;gap: var(--space-8)}
.radio{display: grid;grid-template-columns: auto 1fr auto;gap: var(--space-12);align-items: center;padding: var(--space-16);border: 1.5px solid var(--line-strong);border-radius: var(--radius-nub);cursor: pointer}
.radio:has(input:checked){border-color: var(--ink);box-shadow: inset 0 0 0 1px var(--ink)}
.radio input{width: 20px;height: 20px;accent-color: var(--ink)}
.radio-body{display: grid}
.radio-price{font-weight: 700}
.notice{font-size: 14px;padding: var(--space-12) var(--space-16);border: 1px solid var(--danger);color: var(--danger)}
.notice--test{border-color: var(--line-strong);color: var(--ink-muted)}
.empty-state, .result, .stub{display: grid;gap: var(--space-24);justify-items: start;padding-block: var(--space-48) var(--space-96);max-width: 640px}
.result .kl-specs, .stub .kl-specs{width: 100%}
.prose{max-width: var(--measure);display: grid;gap: var(--space-16);padding-bottom: var(--space-64)}
.prose h2{margin-top: var(--space-24)}
.facts{display: grid;grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));gap: var(--space-16);margin-block: var(--space-16)}
.fact{border-top: 2px solid var(--ink);padding-top: var(--space-12)}
.fact b{display: block;font-family: var(--font-display);font-size: 40px;line-height: 1.3;font-weight: 400}
@media (max-width: 559px){.buy-row{flex-wrap: wrap}.buy-btn{flex-basis: 100%}}
@media (prefers-reduced-motion: reduce){
.hero-feature > img, .variant-pill{transition: none}
.hero-feature:hover > img, .cat:hover .cat-well img, .variant-pill:active{transform: none}
}