:root {
    --color-primary: var(--purple-deep, #5b21b6);
    --color-primary-dark: var(--purple-dark, #3b0764);
    --color-primary-light: var(--lavender, #f5f0ff);
    --color-accent: var(--purple-soft, #a78bfa);
    --color-bg: var(--bg, #fdfcff);
    --color-surface: #ffffff;
    --color-text: var(--ink, #1a1523);
    --color-text-muted: var(--muted, #6b6280);
    --color-border: var(--line, #e4d9f5);
    --color-success: #4caf7d;
    --color-warning: #f59e0b;
    --color-danger: #ef4444;
    --color-wa: var(--wa, #25d366);
    --color-gold: var(--gold, #c9a962);
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 999px;
    --shadow-sm: var(--shadow-soft, 0 8px 32px rgba(91,33,182,.08));
    --shadow-md: var(--shadow-card, 0 18px 48px rgba(59,7,100,.14));
    --shadow-lg: 0 8px 32px rgba(59,7,100,0.14);
    --font-serif: var(--display, 'Cormorant Garamond', Georgia, serif);
    --font-sans: var(--font, 'Manrope', system-ui, sans-serif);
    --transition: 0.2s ease;
}

.theme-theme-rose {
    --purple: #e91e8c;
    --purple-deep: #ad1457;
    --purple-dark: #880e4f;
    --purple-soft: #f48fb1;
    --lavender: #fce4ec;
    --lavender-deep: #f8bbd0;
    --bg: #fff8fb;
    --ink: #1a0a12;
    --muted: #7a4a60;
    --line: #f8bbd0;
    --cta: linear-gradient(135deg, #e91e8c 0%, #ad1457 100%);
    --color-primary: #e91e8c;
    --color-primary-dark: #ad1457;
    --color-primary-light: #fce4ec;
    --color-bg: #fff8fb;
    --color-text: #1a0a12;
    --color-text-muted: #7a4a60;
    --color-border: #f8bbd0;
}

.theme-theme-dark {
    --purple: #c9a96e;
    --purple-deep: #a07840;
    --purple-dark: #7a5c2e;
    --purple-soft: #e8c97e;
    --lavender: #2d2520;
    --lavender-deep: #3a3028;
    --bg: #0f0f0f;
    --ink: #f0ece4;
    --muted: #9e9e9e;
    --line: #2a2a2a;
    --cta: linear-gradient(135deg, #c9a96e 0%, #a07840 100%);
    --color-primary: #c9a96e;
    --color-primary-dark: #a07840;
    --color-primary-light: #2d2520;
    --color-bg: #0f0f0f;
    --color-surface: #1a1a1a;
    --color-text: #f0ece4;
    --color-text-muted: #9e9e9e;
    --color-border: #2a2a2a;
}

.theme-theme-mint {
    --purple: #00897b;
    --purple-deep: #00695c;
    --purple-dark: #004d40;
    --purple-soft: #4db6ac;
    --lavender: #e0f2f1;
    --lavender-deep: #b2dfdb;
    --bg: #f5fffe;
    --ink: #0d2420;
    --muted: #4a7a74;
    --line: #b2dfdb;
    --cta: linear-gradient(135deg, #00897b 0%, #00695c 100%);
    --color-primary: #00897b;
    --color-primary-dark: #00695c;
    --color-primary-light: #e0f2f1;
    --color-bg: #f5fffe;
    --color-text: #0d2420;
    --color-text-muted: #4a7a74;
    --color-border: #b2dfdb;
}

body.theme-theme-rose {
    background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(233,30,140,.06), transparent), #fff8fb;
    color: #1a0a12;
}

body.theme-theme-dark {
    background: #0f0f0f;
    color: #f0ece4;
}

body.theme-theme-mint {
    background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(0,137,123,.06), transparent), #f5fffe;
    color: #0d2420;
}

.search-autocomplete-box {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    z-index: 200;
    max-height: 400px;
    overflow-y: auto;
    display: none;
}

.search-autocomplete-box.visible {
    display: block;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    cursor: pointer;
    transition: background 0.15s;
    text-decoration: none;
    color: var(--ink);
    border-bottom: 1px solid #faf7f9;
}

.search-result-item:hover {
    background: var(--lavender);
}

.search-result-img {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.search-result-info {
    flex: 1;
}

.search-result-name {
    font-weight: 600;
    font-size: 14px;
}

.search-result-meta {
    font-size: 12px;
    color: var(--muted);
}

.search-result-type-cat {
    background: var(--lavender);
    color: var(--purple-deep);
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
}

.site-nav {
    border-top: 1px solid var(--line);
    background: rgba(253,252,255,0.95);
    overflow-x: auto;
    scrollbar-width: none;
}

.site-nav::-webkit-scrollbar {
    display: none;
}

.nav-inner {
    display: flex;
    gap: 4px;
    padding: 8px 0;
    white-space: nowrap;
}

.nav-link {
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
    transition: all 0.15s;
    text-decoration: none;
}

.nav-link:hover,
.nav-link.active {
    background: var(--lavender);
    color: var(--purple-deep);
}

.btn-add-to-cart {
    flex: 1;
    background: var(--cta);
    color: #fff;
    border: none;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    font-family: var(--font);
    box-shadow: 0 2px 8px rgba(91,33,182,0.2);
    letter-spacing: .02em;
}

.btn-add-to-cart:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(91,33,182,0.3);
}

.btn-oos {
    flex: 1;
    background: #f3f4f6;
    color: #9ca3af;
    border: none;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    cursor: not-allowed;
    text-decoration: none;
    display: block;
}

.cart-count-badge {
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--purple) 0%, var(--purple-deep) 100%);
    color: #fff;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
    padding: 0 5px;
}

.breadcrumb-bar {
    background: rgba(253,252,255,0.8);
    border-bottom: 1px solid var(--line);
    padding: 10px 0;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    font-size: 13px;
    flex-wrap: wrap;
}

.breadcrumb li:not(:last-child)::after {
    content: '›';
    margin-left: 6px;
    color: var(--muted);
}

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

.breadcrumb a:hover {
    color: var(--purple-deep);
}

.breadcrumb li[aria-current="page"] {
    color: var(--ink);
    font-weight: 600;
}

.hero-section {
    background: linear-gradient(145deg, rgba(255,255,255,.92) 0%, rgba(245,240,255,.98) 100%);
    border-bottom: 1px solid var(--line);
    padding: 48px 0;
    text-align: center;
}

.hero-content {
    max-width: 700px;
    margin: 0 auto;
}

.hero-badges {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.hero-badge {
    background: rgba(91,33,182,.08);
    border: 1px solid rgba(201,169,98,.45);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    color: var(--purple-deep);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.hero-title {
    font-family: var(--display);
    font-size: clamp(28px, 4.5vw, 48px);
    font-weight: 700;
    color: var(--purple-deep);
    margin-bottom: 16px;
    line-height: 1.2;
    letter-spacing: .04em;
}

.hero-subtitle {
    font-size: 16px;
    color: var(--muted);
    margin-bottom: 32px;
    line-height: 1.7;
}

.hero-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.features-strip {
    background: #fff;
    border-bottom: 1px solid var(--line);
    padding: 20px 0;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.feature-icon {
    font-size: 28px;
    flex-shrink: 0;
}

.feature-text strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
}

.feature-text span {
    font-size: 12px;
    color: var(--muted);
}

.featured-category-section,
.latest-products-section,
.categories-section {
    padding: 48px 0;
}

.section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 28px;
    gap: 16px;
}

.section-title {
    font-family: var(--display);
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 700;
    color: var(--purple-deep);
}

.section-desc {
    font-size: 14px;
    color: var(--muted);
    margin-top: 4px;
}

.section-link {
    font-size: 14px;
    font-weight: 600;
    color: var(--purple);
    white-space: nowrap;
}

.products-slider-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

.products-slider {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding: 4px 0 8px;
    flex: 1;
}

.products-slider::-webkit-scrollbar {
    display: none;
}

.slider-btn {
    background: #fff;
    border: 1.5px solid var(--line);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
    color: var(--purple-deep);
    box-shadow: var(--shadow-soft);
}

.slider-btn:hover {
    background: var(--cta);
    color: #fff;
    border-color: var(--purple-deep);
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

.products-grid-wide {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.product-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--line);
    transition: all 0.2s;
    flex-shrink: 0;
    width: 220px;
    box-shadow: var(--shadow-soft);
}

.products-grid .product-card {
    width: auto;
}

.product-card:hover {
    box-shadow: var(--shadow-card);
    transform: translateY(-3px);
    border-color: var(--purple-soft);
}

.product-card-img {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 1;
}

.product-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.product-card:hover .product-card-img img {
    transform: scale(1.05);
}

.product-card-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: linear-gradient(135deg, var(--purple) 0%, var(--purple-deep) 100%);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
}

.badge-oos {
    background: #666;
    left: auto;
    right: 10px;
}

.product-card-body {
    padding: 14px;
}

.product-card-cat {
    font-size: 11px;
    font-weight: 700;
    color: var(--purple);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.product-card-title {
    font-size: 14px;
    font-weight: 600;
    margin: 6px 0 8px;
    line-height: 1.4;
}

.product-card-title a {
    color: var(--ink);
    text-decoration: none;
}

.product-card-title a:hover {
    color: var(--purple-deep);
}

.product-card-price {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.price-old {
    font-size: 12px;
    color: var(--muted);
    text-decoration: line-through;
}

.price-now {
    font-size: 16px;
    font-weight: 800;
    color: var(--purple-deep);
    font-style: normal;
}

.price-save {
    font-size: 11px;
    background: rgba(201,169,98,.15);
    color: #7a5c00;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
    border: 1px solid rgba(201,169,98,.3);
}

.product-card-action {
    display: flex;
    gap: 8px;
    align-items: center;
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
}

.category-card {
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 16px;
    padding: 20px 16px;
    text-align: center;
    text-decoration: none;
    transition: all 0.15s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    box-shadow: var(--shadow-soft);
}

.category-card:hover {
    border-color: var(--purple-soft);
    background: var(--lavender);
    transform: translateY(-2px);
    box-shadow: var(--shadow-card);
}

.category-card-icon {
    font-size: 28px;
}

.category-card-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}

.product-detail-page {
    padding: 40px 0 60px;
}

.product-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
}

.gallery-main {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 1;
    background: var(--lavender);
    box-shadow: var(--shadow-card);
}

.gallery-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    background: linear-gradient(135deg, var(--purple) 0%, var(--purple-deep) 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
}

.gallery-thumbs {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.gallery-thumb {
    width: 70px;
    height: 70px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid var(--line);
    cursor: pointer;
    transition: border-color 0.15s;
    background: none;
    padding: 0;
}

.gallery-thumb.active,
.gallery-thumb:hover {
    border-color: var(--purple);
}

.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-category-link {
    font-size: 12px;
    font-weight: 700;
    color: var(--purple);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
}

.product-title {
    font-family: var(--display);
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 700;
    color: var(--purple-deep);
    margin: 10px 0 16px;
    line-height: 1.3;
}

.product-price-block {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.product-old-price {
    font-size: 18px;
    color: var(--muted);
    text-decoration: line-through;
}

.product-price {
    font-size: 32px;
    font-weight: 800;
    color: var(--purple-deep);
}

.product-discount-badge {
    background: rgba(201,169,98,.15);
    color: #7a5c00;
    font-size: 13px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid rgba(201,169,98,.3);
}

.product-description {
    color: var(--muted);
    line-height: 1.7;
    margin-bottom: 24px;
    font-size: 15px;
}

.product-card-note-section {
    background: var(--lavender);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 24px;
    border: 1px solid var(--line);
}

.form-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 8px;
}

.form-control {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    font-size: 14px;
    font-family: var(--font);
    color: var(--ink);
    background: #fff;
    transition: border-color 0.15s;
    outline: none;
}

.form-control:focus {
    border-color: var(--purple);
    box-shadow: 0 0 0 3px rgba(124,58,237,0.1);
}

.card-note-char-count {
    text-align: right;
    font-size: 12px;
    color: var(--muted);
    margin-top: 4px;
}

.btn-toggle-presets {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid var(--line);
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    color: var(--purple-deep);
    margin-top: 10px;
    font-family: var(--font);
    transition: all 0.15s;
}

.btn-toggle-presets:hover {
    background: var(--lavender);
}

.presets-panel {
    margin-top: 12px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
}

.presets-tabs {
    display: flex;
    overflow-x: auto;
    border-bottom: 1px solid var(--line);
    scrollbar-width: none;
}

.presets-tabs::-webkit-scrollbar { display: none; }

.preset-tab {
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 600;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--muted);
    white-space: nowrap;
    font-family: var(--font);
    transition: all 0.15s;
    border-bottom: 2px solid transparent;
}

.preset-tab.active {
    color: var(--purple-deep);
    border-bottom-color: var(--purple);
}

.preset-tab-content {
    display: none;
    padding: 12px;
    max-height: 200px;
    overflow-y: auto;
}

.preset-tab-content.active {
    display: block;
}

.preset-note-btn {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    cursor: pointer;
    color: var(--ink);
    margin-bottom: 6px;
    font-family: var(--font);
    transition: all 0.15s;
    line-height: 1.5;
}

.preset-note-btn:hover {
    background: var(--lavender);
    border-color: var(--purple-soft);
}

.product-actions {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.product-meta-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--muted);
}

.related-products {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid var(--line);
}

.category-page,
.all-products-page {
    padding: 32px 0 60px;
}

.category-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 32px;
    align-items: start;
}

.sidebar-widget {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 20px;
    position: sticky;
    top: 80px;
    box-shadow: var(--shadow-soft);
}

.sidebar-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sidebar-cat-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar-cat-link {
    display: block;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--muted);
    text-decoration: none;
    transition: all 0.15s;
}

.sidebar-cat-link:hover,
.sidebar-cat-link.active {
    background: var(--lavender);
    color: var(--purple-deep);
    font-weight: 600;
}

.category-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.category-title {
    font-family: var(--display);
    font-size: 28px;
    font-weight: 700;
    color: var(--purple-deep);
}

.category-count,
.category-search-info {
    font-size: 14px;
    color: var(--muted);
    margin-top: 4px;
}

.category-search-form {
    display: flex;
}

.filter-bar {
    margin-bottom: 24px;
}

.filter-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.filter-search {
    display: flex;
    max-width: 400px;
}

.filter-cats {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-cat-btn {
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
    border: 1px solid var(--line);
    text-decoration: none;
    transition: all 0.15s;
    background: #fff;
}

.filter-cat-btn:hover,
.filter-cat-btn.active {
    background: var(--cta);
    color: #fff;
    border-color: var(--purple-deep);
}

.filter-result-info {
    font-size: 14px;
    color: var(--muted);
    margin-bottom: 16px;
}

.filter-result-info a {
    color: var(--purple);
    margin-left: 8px;
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
}

.empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.empty-state h2 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--ink);
}

.empty-state p {
    color: var(--muted);
    margin-bottom: 24px;
}

.cart-sidebar {
    position: fixed;
    top: 0;
    right: -400px;
    width: 380px;
    height: 100vh;
    background: #fff;
    box-shadow: var(--shadow-card);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    transition: right 0.3s ease;
}

.cart-sidebar.open {
    right: 0;
}

.cart-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid var(--line);
}

.cart-sidebar-header h2 {
    font-size: 18px;
    font-weight: 700;
}

.cart-close-btn {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--muted);
    line-height: 1;
    padding: 4px;
}

.cart-sidebar-items {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.cart-sidebar-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--line);
}

.cart-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 16px;
    font-weight: 700;
}

.cart-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 999;
    display: none;
}

.cart-overlay.visible {
    display: block;
}

.cart-page {
    padding: 32px 0 60px;
}

.cart-page-layout {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 32px;
    align-items: start;
}

.cart-item {
    display: flex;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
    align-items: flex-start;
}

.cart-item-img {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}

.cart-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-item-info {
    flex: 1;
}

.cart-item-name {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
}

.cart-item-name a {
    color: var(--ink);
}

.cart-item-note {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 4px;
}

.cart-item-price {
    font-size: 14px;
    font-weight: 700;
    color: var(--purple-deep);
}

.cart-item-controls {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.qty-control {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
}

.qty-btn {
    background: none;
    border: none;
    padding: 4px 10px;
    cursor: pointer;
    font-size: 16px;
    color: var(--ink);
    transition: background 0.15s;
}

.qty-btn:hover {
    background: var(--lavender);
}

.qty-value {
    font-size: 14px;
    font-weight: 600;
    min-width: 24px;
    text-align: center;
}

.cart-item-total {
    font-size: 15px;
    font-weight: 700;
    color: var(--purple-deep);
}

.cart-item-remove {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--muted);
    line-height: 1;
    padding: 2px;
}

.cart-item-remove:hover {
    color: #ef4444;
}

.cart-summary-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 24px;
    position: sticky;
    top: 80px;
    box-shadow: var(--shadow-soft);
}

.cart-summary-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
}

.cart-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
    border-bottom: 1px solid var(--line);
}

.cart-summary-total {
    font-size: 16px;
    border-bottom: none;
    padding-top: 12px;
}

.order-form {
    margin-top: 20px;
}

.order-form-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.form-group {
    margin-bottom: 16px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.form-divider {
    height: 1px;
    background: var(--line);
    margin: 16px 0;
}

.form-check-group {
    margin-bottom: 12px;
}

.form-check-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
}

.form-check-input {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--purple);
}

.form-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 12px;
}

.form-success {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #16a34a;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
}

.required {
    color: #ef4444;
}

.payment-page {
    padding: 32px 0 60px;
}

.payment-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 32px;
    align-items: start;
}

.payment-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: var(--shadow-soft);
}

.payment-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: var(--lavender);
    border-bottom: 1px solid var(--line);
}

.payment-card-header h2 {
    font-size: 16px;
    font-weight: 700;
}

.payment-card-body {
    padding: 20px;
}

.iban-info {
    background: var(--bg);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 16px;
    border: 1px solid var(--line);
}

.iban-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
}

.iban-row:last-child {
    border-bottom: none;
}

.iban-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    min-width: 100px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.iban-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}

.iban-copy-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.iban-number {
    font-family: monospace;
    font-size: 15px;
    letter-spacing: 1px;
}

.btn-copy-iban {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--lavender);
    border: 1px solid var(--line);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    color: var(--purple-deep);
    font-family: var(--font);
    transition: all 0.15s;
}

.btn-copy-iban:hover {
    background: var(--cta);
    color: #fff;
    border-color: var(--purple-deep);
}

.payment-instructions {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.6;
    background: rgba(201,169,98,.08);
    border: 1px solid rgba(201,169,98,.3);
    border-radius: 8px;
    padding: 12px;
}

.order-summary-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 20px;
    box-shadow: var(--shadow-soft);
}

.order-summary-card h3 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 14px;
}

.payment-item {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 13px;
    border-bottom: 1px solid var(--line);
}

.payment-total-row {
    display: flex;
    justify-content: space-between;
    padding-top: 12px;
    font-size: 16px;
}

.payment-sidebar {
    position: sticky;
    top: 80px;
}

.payment-info-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-soft);
}

.payment-info-card h3 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 14px;
}

.info-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    font-size: 13px;
    border-bottom: 1px solid var(--line);
}

.info-row:last-child {
    border-bottom: none;
}

.info-row span {
    color: var(--muted);
    flex-shrink: 0;
}

.payment-success-layout {
    max-width: 600px;
    margin: 0 auto;
}

.payment-success-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 40px;
    text-align: center;
    box-shadow: var(--shadow-card);
}

.success-icon {
    font-size: 56px;
    margin-bottom: 16px;
}

.payment-success-card h1 {
    font-family: var(--display);
    font-size: 28px;
    font-weight: 700;
    color: var(--purple-deep);
    margin-bottom: 12px;
}

.success-order-code {
    font-size: 16px;
    margin-bottom: 16px;
    color: var(--muted);
}

.success-message {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.7;
    margin-bottom: 28px;
    background: var(--lavender);
    padding: 16px;
    border-radius: 12px;
    border: 1px solid var(--line);
}

.receipt-upload-section {
    background: var(--bg);
    border: 1.5px dashed var(--line);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
}

.receipt-upload-section h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
}

.receipt-upload-section p {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 16px;
}

.receipt-upload-area {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.receipt-file-name {
    font-size: 13px;
    color: var(--muted);
}

.success-order-detail {
    margin-bottom: 24px;
    font-size: 14px;
    color: var(--muted);
}

.success-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.tracking-page {
    padding: 40px 0 60px;
}

.tracking-wrapper {
    max-width: 700px;
    margin: 0 auto;
}

.tracking-header {
    text-align: center;
    margin-bottom: 32px;
}

.tracking-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.tracking-header h1 {
    font-family: var(--display);
    font-size: 32px;
    font-weight: 700;
    color: var(--purple-deep);
    margin-bottom: 8px;
}

.tracking-header p {
    color: var(--muted);
}

.tracking-form {
    margin-bottom: 32px;
}

.tracking-input-group {
    display: flex;
    gap: 10px;
}

.tracking-input {
    flex: 1;
}

.tracking-error {
    text-align: center;
    padding: 24px;
    background: #fef2f2;
    border-radius: 12px;
    color: #dc2626;
}

.tracking-result {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}

.tracking-result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: var(--lavender);
    border-bottom: 1px solid var(--line);
}

.tracking-code-label {
    font-size: 12px;
    color: var(--muted);
    display: block;
}

.tracking-code-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--purple-deep);
}

.tracking-steps {
    display: flex;
    align-items: center;
    padding: 24px 20px;
    gap: 0;
    overflow-x: auto;
}

.tracking-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.step-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all 0.15s;
}

.tracking-step.completed .step-icon {
    background: var(--purple);
}

.tracking-step.current .step-icon {
    background: var(--purple-deep);
    box-shadow: 0 0 0 4px var(--lavender);
}

.step-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    text-align: center;
    white-space: nowrap;
}

.tracking-step.completed .step-label,
.tracking-step.current .step-label {
    color: var(--purple-deep);
}

.tracking-step-line {
    flex: 1;
    height: 2px;
    background: var(--line);
    min-width: 30px;
    margin-bottom: 20px;
    transition: background 0.15s;
}

.tracking-step-line.completed {
    background: var(--purple);
}

.tracking-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-top: 1px solid var(--line);
}

.tracking-detail-card {
    padding: 20px;
    border-right: 1px solid var(--line);
}

.tracking-detail-card:last-child {
    border-right: none;
}

.tracking-detail-card h3 {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tracking-detail-card p {
    font-size: 13px;
    margin-bottom: 4px;
}

.tracking-items {
    padding: 20px;
    border-top: 1px solid var(--line);
}

.tracking-items h3 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 12px;
}

.tracking-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
}

.tracking-item img {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
}

.tracking-item-info {
    flex: 1;
}

.tracking-item-name {
    font-size: 13px;
    font-weight: 600;
}

.tracking-item-qty {
    font-size: 12px;
    color: var(--muted);
}

.tracking-item-price {
    font-size: 14px;
    font-weight: 700;
    color: var(--purple-deep);
}

.tracking-total {
    padding-top: 12px;
    text-align: right;
    font-size: 16px;
}

.tracking-card-note {
    padding: 20px;
    border-top: 1px solid var(--line);
    background: var(--lavender);
}

.tracking-card-note h3 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 8px;
}

.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.badge-pending { background: #fef3c7; color: #92400e; }
.badge-confirmed { background: #d1fae5; color: #065f46; }
.badge-preparing { background: #dbeafe; color: #1e40af; }
.badge-delivered { background: #d1fae5; color: #065f46; }
.badge-cancelled { background: #fee2e2; color: #991b1b; }
.badge-success { background: #d1fae5; color: #065f46; }
.badge-warning { background: #fef3c7; color: #92400e; }
.badge-danger { background: #fee2e2; color: #991b1b; }
.badge-payment-waiting { background: #fef3c7; color: #92400e; }
.badge-payment-receipt_uploaded { background: #dbeafe; color: #1e40af; }
.badge-payment-confirmed { background: #d1fae5; color: #065f46; }
.badge-payment-failed { background: #fee2e2; color: #991b1b; }

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}

.status-green { background: #4caf7d; }
.status-red { background: #ef4444; }

.contact-page {
    padding: 40px 0 60px;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

.contact-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-card {
    display: flex;
    gap: 16px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 20px;
    transition: all 0.15s;
    box-shadow: var(--shadow-soft);
}

.contact-card:hover {
    border-color: var(--purple-soft);
    box-shadow: var(--shadow-card);
}

.contact-card-wa {
    border-color: var(--wa);
    background: #f0fdf4;
}

.contact-card-icon {
    font-size: 28px;
    flex-shrink: 0;
}

.contact-card-content h3 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 4px;
}

.contact-link {
    font-size: 15px;
    font-weight: 600;
    color: var(--purple-deep);
    display: block;
    margin-bottom: 4px;
}

.contact-note {
    font-size: 12px;
    color: var(--muted);
}

.contact-address {
    font-size: 14px;
    color: var(--ink);
}

.contact-social {
    margin-top: 24px;
}

.contact-social h3 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 12px;
}

.social-links {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.social-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.15s;
}

.social-instagram {
    background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    color: #fff;
}

.social-facebook {
    background: #1877f2;
    color: #fff;
}

.contact-map-placeholder {
    background: var(--lavender);
    border-radius: 20px;
    padding: 48px 32px;
    text-align: center;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-soft);
}

.map-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.contact-map-placeholder h3 {
    font-family: var(--display);
    font-size: 22px;
    font-weight: 700;
    color: var(--purple-deep);
    margin-bottom: 8px;
}

.contact-map-placeholder p {
    color: var(--muted);
    margin-bottom: 8px;
}

.map-note {
    font-size: 13px;
    margin-bottom: 24px;
}

.info-page {
    padding: 40px 0 60px;
}

.info-content {
    max-width: 800px;
    margin: 0 auto;
}

.info-content h1 {
    font-family: var(--display);
    font-size: 36px;
    font-weight: 700;
    color: var(--purple-deep);
    margin-bottom: 8px;
}

.info-updated {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 32px;
}

.info-intro {
    font-size: 16px;
    color: var(--muted);
    line-height: 1.7;
    margin-bottom: 32px;
    padding: 20px;
    background: var(--lavender);
    border-radius: 16px;
    border-left: 4px solid var(--purple);
}

.info-section {
    margin-bottom: 36px;
}

.info-section h2 {
    font-family: var(--display);
    font-size: 22px;
    font-weight: 700;
    color: var(--purple-deep);
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--lavender);
}

.info-section p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--ink);
    margin-bottom: 12px;
}

.info-section ul,
.info-section ol {
    padding-left: 20px;
    margin-bottom: 12px;
}

.info-section li {
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 6px;
}

.care-tips {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

.care-tip {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 20px;
    box-shadow: var(--shadow-soft);
}

.care-tip h3 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--purple-deep);
}

.care-tip p {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.6;
    margin: 0;
}

.seasonal-care {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.season-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 16px;
    box-shadow: var(--shadow-soft);
}

.season-card h3 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--purple-deep);
}

.season-card ul {
    padding-left: 16px;
}

.season-card li {
    font-size: 12px;
    margin-bottom: 4px;
    color: var(--muted);
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-item {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 16px 20px;
    box-shadow: var(--shadow-soft);
}

.faq-item h3 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--purple-deep);
}

.faq-item p {
    font-size: 14px;
    color: var(--muted);
    margin: 0;
}

.page-header {
    margin-bottom: 32px;
}

.page-title {
    font-family: var(--display);
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 700;
    color: var(--purple-deep);
    margin-bottom: 8px;
}

.page-desc {
    font-size: 15px;
    color: var(--muted);
}

.site-footer {
    background: linear-gradient(135deg, var(--purple-dark) 0%, #2d1b69 100%);
    color: rgba(255,255,255,0.85);
    padding: 48px 0 0;
    margin-top: 60px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 40px;
    padding-bottom: 40px;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    margin-bottom: 16px;
}

.footer-logo-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,0.3);
}

.footer-logo span {
    font-family: var(--display);
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}

.footer-desc {
    font-size: 13px;
    line-height: 1.7;
    opacity: 0.75;
    margin-bottom: 20px;
}

.footer-social {
    display: flex;
    gap: 10px;
}

.footer-social a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: background 0.15s;
}

.footer-social a:hover {
    background: rgba(255,255,255,.25);
}

.footer-heading {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #fff;
    margin-bottom: 16px;
}

.footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-links a {
    font-size: 13px;
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    transition: color 0.15s;
}

.footer-links a:hover {
    color: #fff;
}

.footer-contact {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: rgba(255,255,255,0.75);
}

.footer-contact svg {
    flex-shrink: 0;
    margin-top: 2px;
    opacity: 0.7;
}

.footer-contact a {
    color: rgba(255,255,255,0.85);
    text-decoration: none;
}

.footer-contact a:hover {
    color: #fff;
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 16px 0;
}

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

.footer-bottom p {
    font-size: 12px;
    opacity: 0.6;
}

.footer-bottom-links {
    display: flex;
    gap: 16px;
}

.footer-bottom-links a {
    font-size: 12px;
    color: rgba(255,255,255,0.6);
    text-decoration: none;
}

.footer-bottom-links a:hover {
    color: #fff;
}

.whatsapp-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--wa);
    color: #fff;
    padding: 12px 20px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 4px 20px rgba(37,211,102,0.4);
    z-index: 500;
    text-decoration: none;
    transition: all 0.15s;
}

.whatsapp-float:hover {
    background: var(--wa-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(37,211,102,0.5);
    color: #fff;
}

@media (max-width: 1024px) {
    .features-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .product-detail-grid { grid-template-columns: 1fr; }
    .category-layout { grid-template-columns: 1fr; }
    .cart-page-layout { grid-template-columns: 1fr; }
    .payment-layout { grid-template-columns: 1fr; }
    .contact-grid { grid-template-columns: 1fr; }
    .seasonal-care { grid-template-columns: repeat(2, 1fr); }
    .tracking-details-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .footer-grid { grid-template-columns: 1fr; gap: 24px; }
    .hero-section { padding: 40px 0; }
    .products-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .care-tips { grid-template-columns: 1fr; }
    .seasonal-care { grid-template-columns: 1fr 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .tracking-steps { gap: 0; }
}

@media (max-width: 480px) {
    .products-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .hero-actions { flex-direction: column; }
    .categories-grid { grid-template-columns: repeat(3, 1fr); }
    .seasonal-care { grid-template-columns: 1fr; }
    .whatsapp-float span { display: none; }
    .whatsapp-float { padding: 14px; border-radius: 50%; }
}

.header-menu-btn { display: none; }
@media (max-width: 720px) {
    .header-menu-btn { display: inline-flex; }
}

.category-pills {
    display: block !important;
    border-top: 1px solid var(--line);
    background: rgba(253,252,255,0.95);
    overflow-x: auto;
    scrollbar-width: none;
}
.category-pills::-webkit-scrollbar { display: none; }
.pills-inner {
    display: flex;
    gap: 4px;
    padding: 8px 0;
    white-space: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}
.pills-inner::-webkit-scrollbar { display: none; }
.pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    text-decoration: none;
    transition: all 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}
.pill:hover, .pill.active {
    background: var(--lavender-deep);
    color: var(--purple-deep);
}
@media (max-width: 720px) {
    .category-pills { display: none !important; }
}

.preset-note-btn {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-word;
    max-width: 100%;
    box-sizing: border-box;
}

.presets-panel {
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.preset-tab-content {
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 220px;
    box-sizing: border-box;
}

.card-note-presets {
    max-width: 100%;
    overflow: hidden;
}

.product-info-column,
.product-detail-section .product-info-column {
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.product-order-form {
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.product-info-column * {
    max-width: 100%;
    box-sizing: border-box;
}

.btn-primary-add {
    background: var(--cta);
    color: #fff;
    border: none;
    border-radius: 14px;
    padding: 14px 20px;
    font-weight: 800;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 10px 24px rgba(91,33,182,.25);
    transition: filter .15s, transform .15s;
    width: 100%;
    min-height: 52px;
}

.btn-primary-add:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.floating-whatsapp-btn {
    bottom: 90px;
}

@media (max-width: 720px) {
    .floating-whatsapp-btn {
        bottom: 90px;
    }
}