:root {
  --ink: #171114;
  --muted: #725763;
  --paper: #fff7fa;
  --blush: #ffd7e4;
  --pink: #f07aa8;
  --hot: #d9367a;
  --rose: #b9165c;
  --cream: #fffdf8;
  --line: #f0b6ca;
  --dark: #211018;
  --white: #ffffff;
  --max: 1220px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { min-width: 320px; background: var(--paper); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.5; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
a { color: inherit; }
.container { width: min(92%, var(--max)); margin: 0 auto; }
.announcement { overflow: hidden; background: var(--hot); color: var(--white); font-size: .76rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.announcement span { display: inline-flex; gap: 2rem; min-width: 100%; padding: .58rem 0; white-space: nowrap; animation: marquee 18s linear infinite; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.site-header { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid rgba(217, 54, 122, .18); background: rgba(255, 247, 250, .94); backdrop-filter: blur(16px); }
.navbar { min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.logo { display: flex; align-items: center; flex-shrink: 0; color: var(--rose); font-size: clamp(1.1rem, 2vw, 1.6rem); font-weight: 950; line-height: .9; text-decoration: none; }
.logo span { display: block; margin-top: .18rem; color: var(--ink); font-size: .56rem; font-weight: 800; letter-spacing: .22rem; }
.nav-links { display: flex; align-items: center; gap: 1rem; list-style: none; }
.nav-links a, .cart-open { color: var(--ink); font-size: .76rem; font-weight: 950; letter-spacing: .06em; text-decoration: none; text-transform: uppercase; }
.nav-links a:hover, .nav-links a:focus-visible { color: var(--rose); }
.cart-open { min-height: 40px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); padding: .62rem .9rem; cursor: pointer; }
.hero-banner { min-height: min(82vh, 780px); display: grid; align-items: end; padding: clamp(5rem, 10vw, 9rem) 0 clamp(2.8rem, 6vw, 5rem); background: linear-gradient(90deg, rgba(33, 16, 24, .72), rgba(217, 54, 122, .14) 58%, rgba(255, 247, 250, .1)), url("nokoo/hero-trunk.jpg") center 46%/cover; color: var(--white); }
.hero-content { max-width: 760px; }
.kicker { margin-bottom: .8rem; color: var(--hot); font-size: .75rem; font-weight: 950; letter-spacing: .16em; text-transform: uppercase; }
.hero-banner .kicker { color: var(--blush); }
.hero-title, .section-title { font-size: clamp(2.7rem, 8vw, 7.6rem); font-weight: 950; letter-spacing: 0; line-height: .88; }
.hero-content p:not(.kicker) { max-width: 600px; margin-top: 1rem; color: rgba(255,255,255,.92); font-size: clamp(1.02rem, 2vw, 1.25rem); }
.hero-actions, .section-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.btn, .ghost-btn, .add-btn, .send-btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 0; padding: .78rem 1rem; font-size: .78rem; font-weight: 950; letter-spacing: .06em; text-decoration: none; text-transform: uppercase; cursor: pointer; }
.btn, .add-btn, .send-btn { background: var(--rose); color: var(--white); }
.btn:hover, .btn:focus-visible, .add-btn:hover, .add-btn:focus-visible, .send-btn:hover, .send-btn:focus-visible { background: var(--dark); }
.ghost-btn { border: 1px solid currentColor; background: rgba(255,255,255,.12); color: inherit; }
.section { padding: clamp(3.6rem, 7vw, 6rem) 0; }
.section-soft { background: var(--blush); }
.section-dark { background: var(--dark); color: var(--white); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }
.section-head p:last-child { max-width: 540px; color: var(--muted); }
.section-dark .section-head p:last-child, .section-dark .muted { color: rgba(255,255,255,.72); }
.shop-strip { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .8rem; }
.shop-note { border: 1px solid var(--line); background: var(--white); padding: 1rem; font-size: .88rem; font-weight: 850; text-transform: uppercase; color: var(--rose); }
.category-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.category-link { min-height: 330px; display: grid; align-items: end; overflow: hidden; border: 1px solid rgba(255,255,255,.18); background: var(--dark); color: var(--white); text-decoration: none; }
.category-link img { width: 100%; height: 100%; grid-area: 1/1; object-fit: cover; opacity: .86; transition: transform .34s ease, opacity .34s ease; }
.category-link strong { grid-area: 1/1; z-index: 1; padding: 1rem; font-size: clamp(1.6rem, 3vw, 2.8rem); font-weight: 950; line-height: .9; }
.category-link:hover img, .category-link:focus-visible img { transform: scale(1.05); opacity: .65; }
.toolbar { display: grid; grid-template-columns: minmax(180px, 1fr) auto; gap: .8rem; margin-bottom: 1.4rem; }
.search-input, .field input, .field textarea, .field select, .product-select { width: 100%; min-height: 42px; border: 1px solid var(--line); border-radius: 6px; background: var(--white); color: var(--ink); padding: .68rem .75rem; }
.tabs { display: flex; flex-wrap: wrap; gap: .45rem; }
.tab-btn { min-height: 42px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); padding: .65rem .85rem; color: var(--ink); font-size: .74rem; font-weight: 950; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; }
.tab-btn.is-active { border-color: var(--rose); background: var(--rose); color: var(--white); }
.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1rem; }
.product-card { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--white); color: var(--ink); box-shadow: 0 18px 38px rgba(185,22,92,.08); }
.product-media { position: relative; display: block; aspect-ratio: 1 / 1.2; background: #fff0f6; overflow: hidden; cursor: pointer; }
.product-media img { width: 100%; height: 100%; object-fit: contain; padding: .55rem; transition: transform .32s ease; }
.product-card:hover .product-media img { transform: scale(1.035); }
.product-ref { position: absolute; left: .7rem; top: .7rem; border-radius: 999px; background: rgba(185,22,92,.9); color: var(--white); padding: .28rem .5rem; font-size: .68rem; font-weight: 950; }
.product-body { display: grid; gap: .72rem; padding: .95rem; }
.product-meta { display: flex; align-items: start; justify-content: space-between; gap: .8rem; }
.product-name-link { color: inherit; text-decoration: none; }
.product-name-link:hover .product-name { color: var(--rose); }
.product-name { font-size: 1rem; font-weight: 950; }
.product-price { white-space: nowrap; color: var(--rose); font-size: .88rem; font-weight: 950; }
.product-note { color: var(--muted); font-size: .8rem; }
.product-controls { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.product-controls .add-btn { grid-column: 1 / -1; }
.gallery-band { display: grid; grid-template-columns: 1.1fr .9fr 1fr; gap: 1rem; align-items: stretch; }
.gallery-band img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; border: 1px solid var(--line); }
.catalog-shot { border: 1px solid var(--line); background: var(--white); padding: .7rem; }
.catalog-shot img { width: 100%; height: auto; }
.bottom-banner { min-height: 420px; display: grid; align-items: center; background: linear-gradient(90deg, rgba(185,22,92,.74), rgba(33,16,24,.1)), url("nokoo/pink-stripes.jpg") center/cover; color: var(--white); text-align: center; }
.bottom-banner h2 { font-size: clamp(2.6rem, 8vw, 7rem); font-weight: 950; line-height: .9; }
.site-footer { border-top: 1px solid var(--line); padding: 2rem 0; color: var(--muted); font-size: .86rem; }
.footer-grid { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: end; }
.cart-backdrop { position: fixed; inset: 0; z-index: 70; display: none; background: rgba(0,0,0,.52); }
.cart-backdrop.is-open { display: block; }
.cart-panel { position: fixed; inset: 0 0 0 auto; z-index: 80; width: min(100%, 520px); display: grid; grid-template-rows: auto 1fr; background: var(--paper); box-shadow: -18px 0 60px rgba(0,0,0,.28); transform: translateX(105%); transition: transform .22s ease; }
.cart-panel.is-open { transform: translateX(0); }
.cart-head { min-height: 68px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); padding: 1rem; }
.cart-head h2 { font-size: 1.1rem; font-weight: 950; }
.icon-btn { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; background: var(--white); color: var(--ink); font-size: 1.25rem; cursor: pointer; }
.cart-scroll { overflow: auto; padding: 1rem; }
.cart-items { display: grid; gap: .75rem; margin-bottom: 1rem; }
.cart-item { display: grid; grid-template-columns: 74px 1fr auto; gap: .75rem; align-items: start; border: 1px solid var(--line); border-radius: 8px; background: var(--white); padding: .7rem; }
.cart-item img { width: 74px; height: 74px; border-radius: 6px; object-fit: cover; background: #fff0f6; }
.cart-item h3 { font-size: .9rem; }
.cart-item p { color: var(--muted); font-size: .78rem; }
.qty-row { display: flex; align-items: center; gap: .35rem; margin-top: .45rem; }
.qty-row button { width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); cursor: pointer; }
.remove-btn { border: 0; background: transparent; color: var(--rose); font-size: .75rem; font-weight: 900; cursor: pointer; }
.receipt { border: 1px dashed var(--line); border-radius: 8px; background: var(--white); padding: 1rem; }
.receipt h3 { margin-bottom: .65rem; font-size: .98rem; font-weight: 950; }
.receipt-line, .receipt-total { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; border-bottom: 1px solid #f5d4df; font-size: .84rem; }
.receipt-total { border-bottom: 0; font-size: 1rem; font-weight: 950; }
.checkout-form { display: grid; gap: .85rem; margin-top: 1rem; }
.field label { display: block; margin-bottom: .35rem; color: var(--muted); font-size: .78rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.empty-state { border: 1px dashed var(--line); border-radius: 8px; padding: 1rem; color: var(--muted); text-align: center; }
.toast { position: fixed; left: 50%; bottom: 1rem; z-index: 120; max-width: min(92%, 420px); border-radius: 999px; background: var(--dark); color: var(--white); padding: .78rem 1rem; font-size: .86rem; transform: translate(-50%, 120%); transition: transform .2s ease; }
.toast.is-visible { transform: translate(-50%, 0); }
@media (max-width: 980px) {
  .product-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .category-strip, .gallery-band { grid-template-columns: 1fr; }
  .section-head, .toolbar, .footer-grid { display: block; }
  .tabs { margin-top: .8rem; }
  .shop-strip { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
.back-link { display: inline-block; margin-bottom: 1.2rem; color: var(--muted); font-size: .8rem; font-weight: 850; text-decoration: none; text-transform: uppercase; letter-spacing: .05em; }
.back-link:hover { color: var(--rose); }
.product-detail { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 2.4rem; align-items: start; }
.detail-media { position: relative; aspect-ratio: 1 / 1.1; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #fff0f6; }
.detail-media img { width: 100%; height: 100%; object-fit: contain; padding: 1rem; }
.detail-info { display: grid; gap: .9rem; align-content: start; }
.detail-info h1 { font-size: clamp(1.5rem, 3vw, 2.3rem); font-weight: 950; line-height: 1.05; }
.detail-ref { color: var(--muted); font-size: .9rem; }
.detail-ref strong { color: var(--ink); }
.detail-price { font-size: 1.25rem; font-weight: 950; color: var(--rose); }
.detail-description { color: var(--muted); line-height: 1.7; }
.detail-label { font-size: .75rem; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: .5rem; }
.size-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.size-chip { border: 1px solid var(--line); border-radius: 999px; padding: .35rem .7rem; font-size: .76rem; font-weight: 800; }
.detail-controls { grid-template-columns: 1fr 1fr auto; gap: .6rem; margin-top: .4rem; }
@media (max-width: 760px) {
  .product-detail { grid-template-columns: 1fr; gap: 1.2rem; }
  .detail-controls { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .navbar { min-height: 50px; padding: .4rem 0; gap: .5rem; }
  .logo { font-size: .98rem; }
  .logo span { font-size: .48rem; letter-spacing: .14rem; margin-top: .1rem; }
  .nav-links { width: auto; flex-wrap: nowrap; overflow-x: auto; gap: .55rem; scrollbar-width: none; -ms-overflow-style: none; }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a, .cart-open { font-size: .64rem; white-space: nowrap; }
  .cart-open { min-height: 32px; padding: .42rem .6rem; }
  .hero-banner { min-height: 72vh; }
  .product-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: .6rem; }
  .product-controls, .form-grid, .shop-strip { grid-template-columns: 1fr; }
  .product-body { padding: .7rem; gap: .5rem; }
  .product-name { font-size: .88rem; }
  .product-ref, .product-note { display: none; }
  .cart-item { grid-template-columns: 62px 1fr; }
  .cart-item img { width: 62px; height: 62px; }
  .remove-btn { grid-column: 2; justify-self: start; }
}