:root {
    --bg: #fff8fb;
    --panel: #ffffff;
    --text: #5b5562;
    --muted: #8c8593;
    --accent: #f7c6d9;
    --accent-strong: #b9d7eb;
    --accent-soft: #fef0f6;
    --border: #eadfe8;
    --shadow: 0 18px 40px rgba(186, 173, 185, 0.15);
}

* { box-sizing: border-box; }
body { margin: 0; font-family: "DM Sans", sans-serif; color: var(--text); background:
    radial-gradient(circle at top left, #fff4f7 0, transparent 32%),
    radial-gradient(circle at top right, #edf7ff 0, transparent 30%),
    var(--bg); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container { width: min(1120px, calc(100% - 2rem)); margin: 0 auto; }
.section { padding: 3rem 0; }
.narrow { max-width: 720px; }
.site-header, .category-bar, .site-footer, .card, .product-card, .hero-panel, .flash, .cookie-banner, .admin-sidebar, .admin-main { backdrop-filter: blur(10px); }
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(255, 248, 251, 0.92); border-bottom: 1px solid var(--border); }
.header-wrap, .footer-wrap, .category-links, .hero-grid, .section-head, .product-card-footer, .cart-row, .summary-list div, .cookie-actions, .dashboard-grid, .admin-two-col { display: flex; gap: 1rem; }
.header-wrap, .footer-wrap, .section-head { justify-content: space-between; align-items: center; padding: 1rem 0; }
.brand { font-family: "Quicksand", sans-serif; font-size: 1.4rem; font-weight: 700; }
.main-nav, .category-links { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.cart-pill, .button, .variant-option, .metric-card strong { border-radius: 999px; }
.cart-pill, .button.secondary, .variant-option { border: 1px solid var(--border); background: var(--panel); }
.cart-pill { padding: 0.65rem 1rem; }
.cart-pill span { background: var(--accent-soft); padding: 0.2rem 0.55rem; border-radius: 999px; margin-left: 0.35rem; }
.category-bar { background: rgba(255,255,255,0.8); border-bottom: 1px solid var(--border); }
.category-links { padding: 0.85rem 0; }
.hero { padding: 4rem 0 2rem; }
.hero-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; align-items: center; }
.eyebrow, .mini-label, .mini-note { text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); font-size: 0.78rem; }
h1, h2, h3, h4 { font-family: "Quicksand", sans-serif; margin: 0 0 0.8rem; }
h1 { font-size: clamp(2.3rem, 6vw, 4.3rem); line-height: 1.05; }
.lead { font-size: 1.1rem; max-width: 42rem; color: var(--muted); }
.hero-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.5rem; }
.hero-card { position: relative; min-height: 320px; }
.hero-panel, .card, .product-card, .cookie-banner, .admin-sidebar { background: rgba(255,255,255,0.88); border: 1px solid var(--border); box-shadow: var(--shadow); }
.hero-panel, .card, .product-card { border-radius: 28px; }
.hero-panel { position: absolute; inset: 2rem; padding: 2rem; display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(160deg, rgba(247,198,217,0.4), rgba(185,215,235,0.35)); }
.bubble { position: absolute; border-radius: 999px; background: rgba(255,255,255,0.55); }
.bubble-one { width: 180px; height: 180px; top: 0; right: 10%; }
.bubble-two { width: 110px; height: 110px; bottom: 12%; left: 6%; }
.section-head { margin-bottom: 1rem; }
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.product-card { overflow: hidden; }
.product-thumb { aspect-ratio: 1 / 1; background: linear-gradient(160deg, #fff0f7, #eef8ff); display: grid; place-items: center; }
.product-thumb-fill, .placeholder-art { width: 70%; height: 70%; border-radius: 24px; background: linear-gradient(145deg, var(--accent), var(--accent-strong)); opacity: 0.7; }
.product-card-body { padding: 1rem; }
.product-card-footer, .summary-list div { justify-content: space-between; align-items: center; }
.button { display: inline-flex; align-items: center; justify-content: center; padding: 0.9rem 1.2rem; font-weight: 700; cursor: pointer; }
.button.primary { background: linear-gradient(135deg, var(--accent), var(--accent-strong)); color: #3f4352; border: none; }
.button.secondary { padding: 0.9rem 1.2rem; }
.flash { width: min(1120px, calc(100% - 2rem)); margin: 1rem auto 0; padding: 1rem 1.2rem; border-radius: 18px; }
.flash.success { background: #effaf4; border: 1px solid #b8e7c2; }
.flash.error { background: #fff2f2; border: 1px solid #f0c4c4; }
.product-detail, .cart-layout, .checkout-layout, .admin-two-col { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.product-display { border-radius: 30px; border: 1px solid var(--border); min-height: 460px; padding: 1rem; background: rgba(255,255,255,0.7); display: grid; place-items: center; }
.big-price { display: block; font-size: 1.6rem; margin-bottom: 1rem; }
.stack-form, .settings-grid { display: grid; gap: 0.9rem; }
label { display: grid; gap: 0.35rem; font-weight: 500; }
input, textarea, select { width: 100%; padding: 0.9rem 1rem; border: 1px solid var(--border); border-radius: 16px; background: #fff; font: inherit; color: var(--text); }
textarea { resize: vertical; }
.variant-list { display: grid; gap: 0.7rem; }
.variant-option { display: flex; align-items: center; gap: 0.7rem; padding: 0.8rem 1rem; }
.variant-option input { width: auto; }
.swatch { width: 20px; height: 20px; border-radius: 999px; border: 2px solid rgba(0,0,0,0.05); }
.char-count { color: var(--muted); margin: -0.3rem 0 0; }
.card { padding: 1.4rem; }
.summary-list { display: grid; gap: 0.8rem; margin: 1rem 0; }
.summary-list .total { padding-top: 0.8rem; border-top: 1px solid var(--border); }
.cart-row { justify-content: space-between; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--border); }
.cart-row.compact { padding: 0.8rem 0; }
.form-grid, .settings-grid { grid-template-columns: repeat(2, 1fr); }
.span-2 { grid-column: span 2; }
.confirmation-card { text-align: center; padding: 3rem 2rem; }
.legal-copy { display: grid; gap: 1rem; }
.site-footer { margin-top: 2rem; border-top: 1px solid var(--border); background: rgba(255,255,255,0.8); }
.cookie-banner { position: fixed; right: 1rem; bottom: 1rem; width: min(420px, calc(100% - 2rem)); padding: 1rem; border-radius: 22px; z-index: 40; }
.cookie-actions { margin-top: 1rem; }

.admin-body { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; background: #f7f9fc; }
.admin-sidebar { padding: 1.5rem; background: linear-gradient(180deg, #fff8fb, #edf7ff); }
.admin-sidebar nav { display: grid; gap: 0.55rem; margin-top: 1.5rem; }
.admin-sidebar nav a { padding: 0.8rem 0.95rem; border-radius: 16px; }
.admin-sidebar nav a:hover { background: rgba(255,255,255,0.7); }
.admin-main { padding: 2rem; }
.admin-section { display: grid; gap: 1.4rem; }
.dashboard-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.metric-card strong { display: inline-block; font-size: 2rem; padding: 0.3rem 0.9rem; background: var(--accent-soft); }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th, .admin-table td { text-align: left; padding: 0.75rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.variant-builder { display: grid; gap: 1rem; }
.variant-builder fieldset { border: 1px solid var(--border); border-radius: 18px; padding: 1rem; display: grid; gap: 0.75rem; }
.item-list { display: grid; gap: 0.6rem; padding-left: 1rem; }
.admin-login { min-height: 100vh; display: grid; place-items: center; background: linear-gradient(160deg, #fff5fa, #eef8ff); }
.admin-login-card { width: min(440px, calc(100% - 2rem)); }
.print-body { background: #fff; color: #000; }
.print-sheet { padding: 2rem; }

@media (max-width: 900px) {
    .hero-grid, .product-detail, .cart-layout, .checkout-layout, .admin-body, .admin-two-col, .form-grid, .settings-grid, .dashboard-grid { grid-template-columns: 1fr; }
    .product-grid { grid-template-columns: repeat(2, 1fr); }
    .admin-body { display: block; }
    .admin-sidebar { position: sticky; top: 0; z-index: 12; }
}

@media (max-width: 640px) {
    .product-grid { grid-template-columns: 1fr; }
    .header-wrap, .footer-wrap { flex-direction: column; align-items: flex-start; }
    .main-nav { width: 100%; justify-content: space-between; }
    .section { padding: 2rem 0; }
    .span-2 { grid-column: span 1; }
}