:root {
 --bg: #f7f3f1;
 --card: #ffffff;
 --text: #2e2623;
 --muted: #8c7f78;
 --accent: #c8a46a;
 --accent-strong: #a67c3d;
 --accent-soft: rgba(200, 164, 106, 0.18);
 --border: #e6ddd7;
 --shadow: 0 30px 70px rgba(90, 64, 42, 0.18);
 --radius: 24px;
 --btn-radius: 999px;
 --font-body: "Source Sans 3", "Inter", "Segoe UI", system-ui, sans-serif;
 --font-display: "Cormorant Garamond", "Times New Roman", serif;
 --heading-spacing: 0.02em;
 --heading-transform: none;
 --header-bg: rgba(255, 255, 255, 0.9);
 --logo-bg: linear-gradient(140deg, #f2e7d6, #c8a46a);
 --bg-gradient: radial-gradient(circle at top, rgba(200, 164, 106, 0.22), transparent 45%);
 --media-bg: linear-gradient(150deg, rgba(200, 164, 106, 0.16), rgba(255, 255, 255, 0.3)),
  repeating-linear-gradient(120deg, rgba(200, 164, 106, 0.08) 0 12px, rgba(255, 255, 255, 0.6) 12px 24px);
 --media-border: rgba(200, 164, 106, 0.3);
 --btn-primary-text: #2e2623;
}

body {
 margin: 0;
 background: var(--bg-gradient), var(--bg);
 color: var(--text);
 min-height: 100vh;
 font-family: var(--font-body);
}

body[data-theme="tools"] {
 --bg: #140a18;
 --card: #220e2b;
 --text: #fff3e2;
 --muted: #ffc98a;
 --accent: #ff3b3f;
 --accent-strong: #ffd23f;
 --accent-soft: rgba(255, 59, 63, 0.25);
 --border: rgba(255, 255, 255, 0.18);
 --shadow: 0 26px 50px rgba(0, 0, 0, 0.5);
 --radius: 10px;
 --btn-radius: 6px;
 --font-body: "Roboto Condensed", "Arial Narrow", "Segoe UI", sans-serif;
 --font-display: "Oswald", "Impact", "Segoe UI", sans-serif;
 --heading-spacing: 0.06em;
 --heading-transform: uppercase;
 --header-bg: rgba(20, 10, 24, 0.92);
 --logo-bg: linear-gradient(120deg, #ff3b3f, #ffd23f);
 --bg-gradient: radial-gradient(circle at top, rgba(255, 210, 63, 0.28), transparent 40%);
 --media-bg: repeating-linear-gradient(135deg, rgba(255, 59, 63, 0.35) 0 16px, rgba(255, 210, 63, 0.35) 16px 32px),
  linear-gradient(120deg, rgba(0, 0, 0, 0.2), transparent);
 --media-border: rgba(255, 210, 63, 0.5);
 --btn-primary-text: #1a0f16;
}

body[data-theme="home"] {
 --bg: #f1ebe2;
 --card: #fffaf2;
 --text: #3f352f;
 --muted: #8a7b6c;
 --accent: #b8805b;
 --accent-strong: #8a5a3c;
 --accent-soft: rgba(184, 128, 91, 0.2);
 --border: #e2d6c7;
 --shadow: 0 24px 60px rgba(74, 58, 46, 0.18);
 --radius: 22px;
 --btn-radius: 999px;
 --font-body: "Nunito Sans", "Avenir Next", "Avenir", "Trebuchet MS", sans-serif;
 --font-display: "Lora", "Georgia", "Times New Roman", serif;
 --heading-spacing: 0.01em;
 --heading-transform: none;
 --header-bg: rgba(255, 250, 242, 0.92);
 --logo-bg: linear-gradient(140deg, #f0dcc8, #b8805b);
 --bg-gradient: radial-gradient(circle at top, rgba(184, 128, 91, 0.2), transparent 45%);
 --media-bg: linear-gradient(140deg, rgba(184, 128, 91, 0.2), rgba(255, 255, 255, 0.5)),
  repeating-linear-gradient(90deg, rgba(184, 128, 91, 0.12) 0 18px, rgba(255, 255, 255, 0.5) 18px 36px);
 --media-border: rgba(184, 128, 91, 0.35);
 --btn-primary-text: #3f352f;
}

body[data-theme="apparel"] {
 --bg: #f4f1ed;
 --card: #ffffff;
 --text: #272527;
 --muted: #7c7475;
 --accent: #8c5a5f;
 --accent-strong: #6b4046;
 --accent-soft: rgba(140, 90, 95, 0.2);
 --border: #e5dde0;
 --shadow: 0 26px 60px rgba(60, 45, 50, 0.16);
 --radius: 28px;
 --btn-radius: 999px;
 --font-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
 --font-display: "Oswald", "Helvetica Neue", sans-serif;
 --heading-spacing: 0.08em;
 --heading-transform: uppercase;
 --header-bg: rgba(255, 255, 255, 0.92);
 --logo-bg: linear-gradient(140deg, #f1e4e7, #8c5a5f);
 --bg-gradient: radial-gradient(circle at top, rgba(140, 90, 95, 0.18), transparent 50%);
 --media-bg: linear-gradient(135deg, rgba(140, 90, 95, 0.18), rgba(255, 255, 255, 0.6)),
  repeating-linear-gradient(120deg, rgba(140, 90, 95, 0.12) 0 18px, rgba(255, 255, 255, 0.6) 18px 36px);
 --media-border: rgba(140, 90, 95, 0.3);
 --btn-primary-text: #ffffff;
}

* {
 box-sizing: border-box;
}

a {
 color: inherit;
 text-decoration: none;
}

.site-header {
 position: sticky;
 top: 0;
 z-index: 10;
 backdrop-filter: blur(18px);
 background: var(--header-bg);
 border-bottom: 1px solid var(--border);
}

.nav {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 16px;
 padding: 18px 6vw;
}

.brand {
 display: flex;
 align-items: center;
 gap: 12px;
 font-weight: 700;
 letter-spacing: 0.02em;
}

.logo {
 width: 40px;
 height: 40px;
 border-radius: 12px;
 background: var(--logo-bg);
 border: 1px solid var(--border);
 display: inline-block;
}

.grad {
 color: var(--accent);
}

.nav-actions {
 display: flex;
 align-items: center;
 gap: 12px;
 flex-wrap: wrap;
}

.page {
 padding: 40px 6vw 80px;
 max-width: none;
 margin: 0 auto;
 display: flex;
 flex-direction: column;
 gap: 48px;
}

body[data-view="pdp"] .page {
 max-width: 1450px;
}

.hero {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
 gap: 32px;
 align-items: start;
}

.eyebrow {
 text-transform: uppercase;
 letter-spacing: 0.2em;
 font-size: 0.72rem;
 color: var(--muted);
}

.lede {
 font-size: 1.1rem;
 color: var(--muted);
 max-width: 42ch;
}

.theme-panel {
 background: var(--card);
 border-radius: calc(var(--radius) + 4px);
 padding: 24px;
 border: 1px solid var(--border);
 box-shadow: var(--shadow);
}

.theme-panel h2 {
 margin-top: 0;
}

.themes {
 display: flex;
 gap: 12px;
 flex-wrap: wrap;
}

.swatch {
 display: inline-block;
 width: 14px;
 height: 14px;
 border-radius: 50%;
 background: var(--swatch);
 border: 1px solid rgba(255, 255, 255, 0.4);
}

.swatch[data-swatch="luxury"] {
 --swatch: #c8a46a;
}

.swatch[data-swatch="tools"] {
 --swatch: #ff3b3f;
}

.swatch[data-swatch="home"] {
 --swatch: #b8805b;
}

.swatch[data-swatch="apparel"] {
 --swatch: #8c5a5f;
}

.meta {
 margin-top: 16px;
 color: var(--muted);
 font-size: 0.95rem;
}

.toggle {
 display: inline-flex;
 background: var(--card);
 border-radius: var(--btn-radius);
 padding: 4px;
 border: 1px solid var(--border);
}

.toggle-btn {
 background: transparent;
 border: none;
 color: var(--text);
 padding: 8px 16px;
 border-radius: var(--btn-radius);
 cursor: pointer;
 font-weight: 600;
 transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.toggle-btn[aria-pressed="true"] {
 background: var(--accent-soft);
 color: var(--accent);
}

.theme-chip,
.btn {
 border-radius: var(--btn-radius);
 border: 1px solid var(--border);
 background: transparent;
 color: var(--text);
 padding: 8px 16px;
 cursor: pointer;
 font-weight: 600;
 display: inline-flex;
 align-items: center;
 gap: 8px;
 transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.theme-chip[aria-pressed="true"] {
 border-color: var(--accent);
 color: var(--accent);
 box-shadow: 0 0 0 1px var(--accent);
}

.toggle-btn:hover,
.toggle-btn:focus-visible,
.theme-chip:hover,
.theme-chip:focus-visible,
.nav-actions .btn:hover,
.nav-actions .btn:focus-visible {
 border-color: var(--accent);
 box-shadow: 0 0 0 2px var(--accent-soft);
 transform: translateY(-1px);
}

.btn.primary {
 background: var(--accent);
 border-color: var(--accent);
 color: var(--btn-primary-text);
}

.btn.ghost {
 border-color: transparent;
 background: var(--card);
}

.sr-only {
 position: absolute;
 width: 1px;
 height: 1px;
 padding: 0;
 margin: -1px;
 overflow: hidden;
 clip: rect(0, 0, 0, 0);
 border: 0;
}

.view {
 display: none;
}

body[data-view="plp"] .view-plp,
body[data-view="pdp"] .view-pdp {
 display: block;
}

.toolbar {
 display: flex;
 justify-content: space-between;
 align-items: center;
 flex-wrap: wrap;
 gap: 16px;
}

.toolbar-actions {
 display: flex;
 flex-wrap: wrap;
 gap: 12px;
 align-items: center;
}

.sort-control {
 position: relative;
}

.sort-select {
 appearance: none;
 padding-right: 38px;
 background-color: var(--card);
 border-color: var(--border);
 color: var(--text);
 background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
  linear-gradient(135deg, currentColor 50%, transparent 50%);
 background-position:
  calc(100% - 18px) 52%,
  calc(100% - 12px) 52%;
 background-size: 6px 6px;
 background-repeat: no-repeat;
 transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

body[data-theme="apparel"] .sort-select {
 background-color: var(--accent);
 border-color: var(--accent-strong);
 box-shadow: 0 14px 24px rgba(107, 64, 70, 0.2);
 color: var(--btn-primary-text);
 font-weight: 600;
 letter-spacing: 0.08em;
 text-transform: uppercase;
}

.filter-toggle {
 transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.filter-toggle:hover,
.filter-toggle:focus-visible,
.sort-select:hover,
.sort-select:focus-visible {
 border-color: var(--accent);
 box-shadow: 0 0 0 2px var(--accent-soft);
 transform: translateY(-1px);
}

.subcopy {
 color: var(--muted);
 margin: 8px 0 0;
}

.grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(220px, 280px));
 gap: 20px;
 margin-top: 24px;
 justify-content: start;
}

.card {
 background: var(--card);
 border-radius: var(--radius);
 border: 1px solid var(--border);
 padding: 16px;
 display: flex;
 flex-direction: column;
 gap: 16px;
 box-shadow: var(--shadow);
 position: relative;
 transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.card[hidden] {
 display: none;
}

.card[data-clickable="true"] {
 cursor: pointer;
}

.card[data-clickable="true"]:hover,
.card[data-clickable="true"]:focus-within {
 border-color: var(--accent);
 box-shadow: 0 18px 28px rgba(15, 10, 8, 0.18), 0 0 0 1px var(--accent);
 transform: translateY(-4px);
}

.card-media {
 aspect-ratio: 2 / 3;
 width: 100%;
 border-radius: 14px;
 background: var(--media-bg);
 border: 1px solid var(--media-border);
 position: relative;
 z-index: 0;
}

body[data-theme="jewelry"] .card-media,
body[data-theme="jewelry"] .pdp-image,
body[data-theme="jewelry"] .pdp-thumbs span,
body[data-theme="tools"] .card-media,
body[data-theme="tools"] .pdp-image,
body[data-theme="tools"] .pdp-thumbs span,
body[data-theme="home"] .card-media,
body[data-theme="home"] .pdp-image,
body[data-theme="home"] .pdp-thumbs span,
body[data-theme="apparel"] .card-media,
body[data-theme="apparel"] .pdp-image,
body[data-theme="apparel"] .pdp-thumbs span {
 background-size: cover;
 background-position: center;
 background-repeat: no-repeat;
}

.view-plp .card-media {
 background-size: contain;
}

body[data-theme="jewelry"] .grid .card:nth-child(1) .card-media {
 background-image: url("/images/thumbnails/aurora_necklace.png");
}

body[data-theme="jewelry"] .grid .card:nth-child(2) .card-media {
 background-image: url("/images/thumbnails/celeste_ring.png");
}

body[data-theme="jewelry"] .grid .card:nth-child(3) .card-media {
 background-image: url("/images/thumbnails/solstice_earrings.png");
}

body[data-theme="jewelry"] .grid .card:nth-child(4) .card-media {
 background-image: url("/images/thumbnails/lumen_bracelet.png");
}

body[data-theme="tools"] .grid .card:nth-child(1) .card-media {
 background-image: url("/images/thumbnails/TorqueMax_Drill.png");
}

body[data-theme="tools"] .grid .card:nth-child(2) .card-media {
 background-image: url("/images/thumbnails/Pro_Tool_Kit.png");
}

body[data-theme="tools"] .grid .card:nth-child(3) .card-media {
 background-image: url("/images/thumbnails/Titan_Saw.png");
}

body[data-theme="tools"] .grid .card:nth-child(4) .card-media {
 background-image: url("/images/thumbnails/Laser_Measure.png");
}

body[data-theme="home"] .grid .card:nth-child(1) .card-media {
 background-image: url("/images/thumbnails/Linen_Sofa.png");
}

body[data-theme="home"] .grid .card:nth-child(2) .card-media {
 background-image: url("/images/thumbnails/Oak_Dining_Set.png");
}

body[data-theme="home"] .grid .card:nth-child(3) .card-media {
 background-image: url("/images/thumbnails/Arbor_Lounge_Chair.png");
}

body[data-theme="home"] .grid .card:nth-child(4) .card-media {
 background-image: url("/images/thumbnails/Ceramic_Table_Lamp.png");
}

body[data-theme="apparel"] .grid .card:nth-child(1) .card-media {
 background-image: url("/images/thumbnails/Threadline_Hoodie.svg");
}

body[data-theme="apparel"] .grid .card:nth-child(2) .card-media {
 background-image: url("/images/thumbnails/Cloud_Knit_Tee.svg");
}

body[data-theme="apparel"] .grid .card:nth-child(3) .card-media {
 background-image: url("/images/thumbnails/Atlas_Cargo_Pant.svg");
}

body[data-theme="apparel"] .grid .card:nth-child(4) .card-media {
 background-image: url("/images/thumbnails/Contour_Midi_Skirt.svg");
}

.badge {
 position: absolute;
 top: 16px;
 left: 16px;
 background: var(--card);
 color: var(--accent-strong);
 border: 1px solid var(--border);
 padding: 4px 10px;
 border-radius: 999px;
 font-size: 0.7rem;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 z-index: 2;
 box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}

.badge.ghost {
 color: var(--accent);
 border: 1px solid var(--accent);
}

.muted {
 color: var(--muted);
}

.price-row {
 display: flex;
 align-items: center;
 justify-content: space-between;
 margin-bottom: 10px;
}

.price {
 font-size: 1.2rem;
 font-weight: 700;
}

.rating {
 color: var(--accent);
}

.rating-link {
 font-weight: 600;
 cursor: pointer;
 transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.rating-link:hover,
.rating-link:focus-visible {
 color: var(--accent-strong);
 text-decoration: underline;
 text-underline-offset: 4px;
}

.breadcrumbs {
 display: flex;
 align-items: center;
 gap: 10px;
 margin-bottom: 20px;
 font-size: 0.95rem;
 color: var(--muted);
}

.breadcrumb-link {
 border: none;
 background: transparent;
 color: var(--accent);
 font-weight: 600;
 cursor: pointer;
 padding: 0;
}

.breadcrumb-link:hover,
.breadcrumb-link:focus-visible {
 text-decoration: underline;
 text-underline-offset: 4px;
}

.breadcrumb-current {
 color: var(--text);
 font-weight: 600;
}

.pdp {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 gap: 32px;
 align-items: center;
}

.pdp-media {
 background: var(--card);
 padding: 18px;
 border-radius: var(--radius);
 border: 1px solid var(--border);
 box-shadow: var(--shadow);
}

.pdp-image {
 height: 678px;
 border-radius: 16px;
 background: var(--media-bg);
 border: 1px solid var(--media-border);
}

body[data-theme="jewelry"] .pdp-image {
 background-image: url("/images/aurora_necklace.png");
}

body[data-theme="tools"] .pdp-image {
 background-image: url("/images/TorqueMax_Drill.png");
}

body[data-theme="home"] .pdp-image {
 background-image: url("/images/Arbor_Lounge_Chair.png");
}

body[data-theme="apparel"] .pdp-image {
 background-image: url("/images/Threadline_Hoodie.svg");
}

.pdp-thumbs {
 display: flex;
 gap: 10px;
 margin-top: 16px;
}

.pdp-thumbs span {
 flex: 1;
 height: 54px;
 border-radius: 12px;
 background: rgba(255, 255, 255, 0.08);
 border: 1px solid var(--border);
 cursor: pointer;
 transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.pdp-thumbs span:hover,
.pdp-thumbs span:focus-visible {
 border-color: var(--accent);
 box-shadow: 0 0 0 2px var(--accent-soft);
 transform: translateY(-2px);
}

body[data-theme="jewelry"] .pdp-thumbs span:nth-child(1) {
 background-image: url("/images/aurora_necklace.png");
}

body[data-theme="jewelry"] .pdp-thumbs span:nth-child(2) {
 background-image: url("/images/celeste_ring.png");
}

body[data-theme="jewelry"] .pdp-thumbs span:nth-child(3) {
 background-image: url("/images/solstice_earrings.png");
}

body[data-theme="tools"] .pdp-thumbs span:nth-child(1) {
 background-image: url("/images/TorqueMax_Drill.png");
}

body[data-theme="tools"] .pdp-thumbs span:nth-child(2) {
 background-image: url("/images/Pro_Tool_Kit.png");
}

body[data-theme="tools"] .pdp-thumbs span:nth-child(3) {
 background-image: url("/images/Titan_Saw.png");
}

body[data-theme="home"] .pdp-thumbs span:nth-child(1) {
 background-image: url("/images/Arbor_Lounge_Chair.png");
}

body[data-theme="home"] .pdp-thumbs span:nth-child(2) {
 background-image: url("/images/Linen_Sofa.png");
}

body[data-theme="home"] .pdp-thumbs span:nth-child(3) {
 background-image: url("/images/Oak_Dining_Set.png");
}

body[data-theme="apparel"] .pdp-thumbs span:nth-child(1) {
 background-image: url("/images/Threadline_Hoodie.svg");
}

body[data-theme="apparel"] .pdp-thumbs span:nth-child(2) {
 background-image: url("/images/Cloud_Knit_Tee.svg");
}

body[data-theme="apparel"] .pdp-thumbs span:nth-child(3) {
 background-image: url("/images/Atlas_Cargo_Pant.svg");
}

.pdp-details {
 display: flex;
 flex-direction: column;
 gap: 16px;
}

.option-group {
 display: grid;
 gap: 8px;
}

body[data-theme="tools"] .view-pdp .option-group-swatches {
 display: none;
}

.label {
 font-weight: 600;
}

.swatches,
.sizes {
 display: flex;
 gap: 10px;
}

.swatch-btn {
 width: 32px;
 height: 32px;
 border-radius: 50%;
 border: 1px solid var(--border);
 background: var(--swatch);
 cursor: pointer;
 transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.swatch-btn[data-swatch="gold"] {
 --swatch: #d4af37;
}

.swatch-btn[data-swatch="rose"] {
 --swatch: #e3b7a0;
}

.swatch-btn[data-swatch="silver"] {
 --swatch: #c0c0c0;
}

.swatch-btn[aria-pressed="true"] {
 outline: 2px solid var(--accent);
}

.swatch-btn:hover,
.swatch-btn:focus-visible {
 border-color: var(--accent);
 box-shadow: 0 0 0 2px var(--accent-soft);
 transform: translateY(-1px);
}

.size-btn {
 border-radius: var(--btn-radius);
 border: 1px solid var(--border);
 background: transparent;
 color: var(--text);
 padding: 6px 14px;
 cursor: pointer;
 transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.size-btn[aria-pressed="true"] {
 background: var(--accent-soft);
 color: var(--accent);
}

.size-btn:hover,
.size-btn:focus-visible {
 border-color: var(--accent);
 box-shadow: 0 0 0 2px var(--accent-soft);
 transform: translateY(-1px);
}

.view-pdp .btn:hover,
.view-pdp .btn:focus-visible {
 border-color: var(--accent);
 box-shadow: 0 0 0 2px var(--accent-soft);
 transform: translateY(-1px);
}

.pdp-actions {
 display: flex;
 gap: 12px;
 flex-wrap: wrap;
}

.pdp-list {
 margin: 0;
 padding-left: 18px;
 color: var(--muted);
}

.pdp-reviews {
 margin-top: 32px;
 display: grid;
 gap: 18px;
 background: var(--card);
 padding: 24px;
 border-radius: var(--radius);
 border: 1px solid var(--border);
 box-shadow: var(--shadow);
 scroll-margin-top: 120px;
}

.reviews-head {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 16px;
 flex-wrap: wrap;
}

.review-grid {
 display: grid;
 gap: 16px;
 grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.review-card {
 border-radius: 18px;
 border: 1px solid var(--border);
 padding: 16px;
 background: rgba(255, 255, 255, 0.02);
 display: grid;
 gap: 10px;
}

.review-meta {
 display: flex;
 justify-content: space-between;
 align-items: center;
 font-size: 0.9rem;
}

.review-stars {
 color: var(--accent);
 letter-spacing: 0.08em;
}

.review-footer {
 display: flex;
 justify-content: space-between;
 font-size: 0.85rem;
}

h1,
h2,
h3 {
 font-family: var(--font-display);
 letter-spacing: var(--heading-spacing);
 text-transform: var(--heading-transform);
}

.card-body p {
 min-height: 2lh;
}

body[data-theme="tools"] .card-body h3 {
  min-height: 54px;
}

.filter-overlay {
 position: fixed;
 inset: 0;
 background: rgba(18, 12, 9, 0.45);
 opacity: 0;
 visibility: hidden;
 transition: opacity 0.2s ease, visibility 0.2s ease;
 z-index: 18;
}

.filter-drawer {
 position: fixed;
 top: 0;
 left: 0;
 height: 100vh;
 width: min(420px, 92vw);
 background: var(--card);
 border-right: 1px solid var(--border);
 box-shadow: var(--shadow);
 transform: translateX(-100%);
 transition: transform 0.25s ease;
 z-index: 25;
 display: grid;
 grid-template-rows: auto 1fr auto;
 padding: 24px;
 gap: 20px;
 overflow: hidden;
}

.filter-header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 16px;
}

.filter-content {
 display: grid;
 gap: 18px;
 overflow-y: auto;
 padding-right: 4px;
 scrollbar-width: none;
 -ms-overflow-style: none;
}

.filter-content::-webkit-scrollbar {
 width: 0;
 height: 0;
}

.filter-group {
 border: 1px solid var(--border);
 border-radius: 18px;
 padding: 16px;
 background: var(--surface);
 display: grid;
 gap: 12px;
}

.filter-group h3 {
 margin: 0;
 font-size: 1rem;
}

.filter-options {
 display: grid;
 gap: 10px;
}

.filter-option {
 display: flex;
 align-items: center;
 gap: 10px;
 font-size: 0.95rem;
 color: var(--text);
}

.filter-option input {
 accent-color: var(--accent);
}

.filter-swatch {
 display: grid;
 grid-template-columns: 24px 1fr;
 align-items: center;
 gap: 10px;
 border: 1px solid var(--border);
 border-radius: 999px;
 padding: 8px 12px 8px 8px;
 background: transparent;
 color: var(--text);
 text-align: left;
 transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.filter-swatch::before {
 content: "";
 width: 18px;
 height: 18px;
 border-radius: 50%;
 background: var(--swatch, var(--accent));
 box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6);
}

.filter-swatch:hover,
.filter-swatch:focus-visible {
 border-color: var(--accent);
 box-shadow: 0 0 0 2px var(--accent-soft);
 transform: translateY(-1px);
}

.filter-footer {
 display: flex;
 flex-wrap: wrap;
 gap: 12px;
 border-top: 1px solid var(--border);
 padding-top: 16px;
 background: var(--card);
}

.cart-overlay {
 position: fixed;
 inset: 0;
 background: rgba(18, 12, 9, 0.45);
 opacity: 0;
 visibility: hidden;
 transition: opacity 0.2s ease, visibility 0.2s ease;
 z-index: 20;
}

.cart-drawer {
 position: fixed;
 top: 0;
 right: 0;
 height: 100vh;
 width: min(420px, 90vw);
 background: var(--card);
 border-left: 1px solid var(--border);
 box-shadow: var(--shadow);
 transform: translateX(100%);
 transition: transform 0.25s ease;
 z-index: 30;
 display: grid;
 grid-template-rows: auto 1fr;
 padding: 24px;
 gap: 20px;
}

.cart-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 16px;
}

.cart-body {
 display: grid;
 grid-template-rows: 1fr auto;
 gap: 16px;
 min-height: 0;
}

.cart-items-scroll {
 overflow-y: auto;
 display: grid;
 gap: 16px;
 min-height: 0;
 scrollbar-width: none;
 -ms-overflow-style: none;
}

.cart-items-scroll::-webkit-scrollbar {
 width: 0;
 height: 0;
}

.cart-items {
 list-style: none;
 margin: 0;
 padding: 0;
 display: grid;
 gap: 16px;
 min-height: 0;
 align-content: start;
 align-items: start;
 grid-auto-rows: max-content;
}

.cart-summary {
 position: sticky;
 bottom: 0;
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding-top: 12px;
 padding-bottom: 12px;
 border-top: 1px solid var(--border);
 font-weight: 600;
 background: var(--card);
 z-index: 1;
}

.cart-summary-label {
 color: var(--muted);
}

.cart-item {
 border: 1px solid var(--border);
 border-radius: 16px;
 padding: 14px;
 background: rgba(255, 255, 255, 0.02);
 display: grid;
 grid-template-columns: 72px 1fr;
 gap: 12px;
 align-items: start;
}

.cart-item-image {
 width: 72px;
 height: 72px;
 border-radius: 12px;
 object-fit: cover;
 background: var(--surface);
 border: 1px solid var(--border);
}

.cart-item-content {
 display: grid;
 gap: 8px;
}

.cart-item-header {
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 gap: 12px;
}

.cart-item-title {
 font-weight: 600;
}

.cart-item-meta {
 display: flex;
 justify-content: space-between;
 gap: 12px;
 color: var(--muted);
 font-size: 0.9rem;
 flex-wrap: wrap;
}

.cart-item-quantity {
 font-weight: 600;
 color: var(--text);
}

.cart-item-controls {
 display: inline-flex;
 align-items: center;
 gap: 8px;
}

.cart-qty-btn {
 width: 28px;
 height: 28px;
 border-radius: 999px;
 border: 1px solid var(--border);
 background: transparent;
 color: var(--text);
 font-weight: 600;
 cursor: pointer;
}

.cart-qty-btn:hover,
.cart-qty-btn:focus-visible {
 border-color: var(--accent);
 box-shadow: 0 0 0 2px var(--accent-soft);
}

.cart-qty-value {
 min-width: 18px;
 text-align: center;
 font-weight: 600;
}

.cart-remove {
 width: 28px;
 height: 28px;
 padding: 0;
 border-radius: 999px;
 border: 1px solid var(--border);
 background: transparent;
 color: var(--text);
 cursor: pointer;
 font-weight: 600;
 font-size: 18px;
 line-height: 1;
 display: inline-flex;
 align-items: center;
 justify-content: center;
}

.cart-remove:hover,
.cart-remove:focus-visible {
 border-color: var(--accent);
 box-shadow: 0 0 0 2px var(--accent-soft);
}

body[data-cart-open="true"] .cart-overlay {
 opacity: 1;
 visibility: visible;
}

body[data-cart-open="true"] .cart-drawer {
 transform: translateX(0);
}

body[data-filter-open="true"] .filter-overlay {
 opacity: 1;
 visibility: visible;
}

body[data-filter-open="true"] .filter-drawer {
 transform: translateX(0);
}

@media (max-width: 680px) {
 .nav {
  flex-direction: column;
  align-items: flex-start;
 }

 .toolbar {
  flex-direction: column;
  align-items: flex-start;
 }

 .grid {
  grid-template-columns: 1fr;
 }
}