@font-face {
    font-family: "Vazir";
    src: url("../fonts/vazir/Vazir-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Vazir";
    src: url("../fonts/vazir/Vazir-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Vazir";
    src: url("../fonts/vazir/Vazir-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Vazir";
    src: url("../fonts/vazir/Vazir-Black.woff2") format("woff2");
    font-weight: 800 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --ink: #18201f;
    --muted: #66706e;
    --line: #dfe4e2;
    --paper: #ffffff;
    --soft: #f4f7f6;
    --green: #12665a;
    --green-dark: #0d4e46;
    --red: #b33a34;
    --amber: #a76816;
    --shadow: 0 12px 32px rgba(20, 39, 35, .08);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    font-family: "Vazir", Tahoma, Arial, sans-serif;
    line-height: 1.7;
    letter-spacing: 0;
}

button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img {
    display: block;
    max-width: 100%;
    object-position: center;
}
a { color: inherit; text-decoration: none; }

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

.topbar {
    min-height: 72px;
    padding: 10px clamp(18px, 4vw, 64px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: rgba(255, 255, 255, .97);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 50;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.brand-mark {
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    color: #fff;
    background: var(--green);
    border: 0px solid #dceeea;
    border-radius: 0%;
    font-size: 23px;
    font-weight: 800;
}

.brand-mark-image { overflow: hidden; padding: 0; background: #fff; }
.brand-mark-image img { width: 100%; height: 100%; object-fit: contain; }
.brand-mark.large { width: 58px; height: 58px; font-size: 30px; margin-inline: auto; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 15px; }
.brand small { color: var(--muted); font-size: 10px; margin-top: -2px; }

.icon-link, .icon-button {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    color: var(--ink);
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 6px;
    cursor: pointer;
    font-size: 21px;
}

.icon-link:hover, .icon-button:hover { border-color: var(--green); color: var(--green); }
.icon-button.danger:hover { border-color: var(--red); color: var(--red); }

.public-header-primary, .public-nav {
    display: flex;
    align-items: center;
}

.public-topbar { justify-content: flex-start; }
.public-header-primary {
    min-width: 0;
    flex: 0 0 auto;
}
.public-nav {
    gap: 3px;
    margin-right: clamp(18px, 3vw, 38px);
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--soft);
    position: relative;
}
.public-nav::before {
    content: "";
    width: 1px;
    height: 34px;
    background: var(--line);
    position: absolute;
    right: calc(clamp(18px, 3vw, 36px) * -0.55);
    top: 50%;
    transform: translateY(-50%);
}
.public-nav > a,
.nav-dropdown > button {
    display: inline-flex;
    min-height: 38px;
    padding: 7px 12px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 0;
    border-radius: 5px;
    color: var(--muted);
    background: transparent;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: color .18s ease, background .18s ease;
}
.public-nav > a:hover,
.public-nav > a:focus-visible,
.nav-dropdown > button:hover,
.nav-dropdown > button:focus-visible {
    color: var(--green);
    background: #fff;
    outline: 0;
}
.public-nav > a.active,
.nav-dropdown.active > button {
    color: #fff;
    background: var(--green);
}
.public-nav > a.active:hover,
.public-nav > a.active:focus-visible,
.nav-dropdown.active > button:hover {
    color: #fff;
    background: var(--green-dark);
}
.nav-dropdown { position: relative; }
.nav-dropdown > button span { font-size: 15px; transition: transform .18s ease; }
.nav-dropdown.open > button span { transform: rotate(180deg); }
.nav-dropdown-menu {
    display: none;
    width: 240px;
    max-height: min(420px, 70vh);
    padding: 7px;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow);
    position: absolute;
    top: calc(100% + 9px);
    right: 0;
    z-index: 60;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu { display: grid; }
.nav-dropdown-menu a {
    display: flex;
    min-height: 40px;
    padding: 8px 10px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-radius: 5px;
    color: var(--ink);
    font-size: 12px;
}
.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus-visible,
.nav-dropdown-menu a.active { color: var(--green); background: #eef5f3; outline: 0; }
.nav-dropdown-menu small {
    min-width: 24px;
    padding: 1px 6px;
    border-radius: 9px;
    color: var(--muted);
    background: var(--soft);
    text-align: center;
    font-size: 9px;
}
.mobile-menu-toggle {
    display: none;
    width: 40px;
    height: 40px;
    padding: 9px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--soft);
    cursor: pointer;
}
.mobile-menu-toggle span {
    display: block;
    height: 2px;
    margin: 4px 0;
    border-radius: 2px;
    background: var(--ink);
}
.account-link {
    display: inline-flex;
    min-height: 40px;
    margin-right: 14px;
    padding: 7px 11px;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--ink);
    background: var(--soft);
    font-size: 11px;
    font-weight: 700;
}
.account-link:hover { color: var(--green); border-color: var(--green); background: #fff; }
.account-link.signed-in { max-width: 190px; }
.account-link.signed-in > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; }
.account-icon { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; color: #fff; background: var(--green); }
.account-icon svg { width: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.header-search-form {
    display: grid;
    width: clamp(190px, 18vw, 280px);
    min-height: 40px;
    margin-right: auto;
    grid-template-columns: minmax(0, 1fr) 42px;
    overflow: hidden;
    border: 1px solid #cbd6d3;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(20, 39, 35, .06);
}
.header-search-form:focus-within {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(18, 102, 90, .1);
}
.header-search-form input {
    min-width: 0;
    padding: 8px 11px;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 11px;
}
.header-search-form button {
    border: 0;
    border-right: 1px solid var(--line);
    color: #fff;
    background: var(--green);
    cursor: pointer;
    font-size: 20px;
}
.header-search-form button:hover { background: var(--green-dark); }

.homepage-slider {
    width: 100%;
    min-height: clamp(330px, 48vw, 590px);
    overflow: hidden;
    color: #fff;
    background: #18312d;
    position: relative;
}
.homepage-slider-track { min-height: inherit; position: relative; }
.homepage-slide {
    min-height: inherit;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    inset: 0;
    transition: opacity .55s ease, visibility .55s ease;
}
.homepage-slide.active { opacity: 1; visibility: visible; z-index: 1; }
.homepage-slide > img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.homepage-slide-shade {
    background: linear-gradient(0deg, rgba(6, 22, 19, .72) 0%, rgba(6, 22, 19, .18) 45%, rgba(6, 22, 19, .04) 72%);
    position: absolute;
    inset: 0;
}
.homepage-slide-content {
    width: min(1240px, calc(100% - 36px));
    min-height: inherit;
    margin-inline: auto;
    padding: 40px 0 54px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    flex-direction: column;
    position: relative;
    z-index: 2;
}
.homepage-slide-content h1 {
    max-width: 520px;
    margin: 0;
    font-size: clamp(25px, 3.4vw, 42px);
    line-height: 1.4;
    text-shadow: 0 3px 18px rgba(0, 0, 0, .25);
}
.homepage-slide-content p {
    max-width: 500px;
    margin: 8px 0 0;
    color: #e2eeeb;
    font-size: clamp(11px, 1.3vw, 14px);
    line-height: 1.9;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .3);
}
.slider-button {
    display: inline-flex;
    min-height: 40px;
    margin-top: 16px;
    padding: 7px 15px;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(255, 255, 255, .78);
    border-radius: 6px;
    color: var(--green-dark);
    background: #fff;
    font-size: 12px;
    font-weight: 700;
    transition: color .18s ease, background .18s ease, transform .18s ease;
}
.slider-button:hover { color: #fff; background: var(--green); border-color: var(--green); transform: translateY(-2px); }
.slider-control {
    display: grid;
    width: 44px;
    height: 44px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .42);
    border-radius: 50%;
    color: #fff;
    background: rgba(10, 35, 30, .42);
    cursor: pointer;
    font-size: 29px;
    line-height: 1;
    position: absolute;
    top: 50%;
    z-index: 3;
    transform: translateY(-50%);
}
.slider-control:hover { background: var(--green); border-color: var(--green); }
.slider-next { right: clamp(12px, 2.5vw, 36px); }
.slider-prev { left: clamp(12px, 2.5vw, 36px); }
.slider-dots {
    display: flex;
    gap: 7px;
    position: absolute;
    right: 50%;
    bottom: 20px;
    z-index: 3;
    transform: translateX(50%);
}
.slider-dots button {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: width .18s ease, background .18s ease;
}
.slider-dots button.active { width: 25px; border-radius: 8px; background: #fff; }

.catalog-results { padding-top: 28px; }

.homepage-product-sections {
    padding: 42px 0 18px;
    background: #f7f9f8;
}
.homepage-product-section {
    width: min(1240px, calc(100% - 36px));
    margin: 0 auto 34px;
}
.homepage-section-heading {
    display: flex;
    margin-bottom: 14px;
    padding-inline: 4px;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
}
.homepage-section-heading .eyebrow { margin: 0 0 2px; }
.homepage-section-heading h2 { margin: 0; font-size: clamp(24px, 3vw, 34px); line-height: 1.4; }
.homepage-more-link {
    display: inline-flex;
    min-height: 40px;
    padding: 7px 13px;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--green);
    background: #fff;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.homepage-more-link:hover { color: #fff; border-color: var(--green); background: var(--green); }
.homepage-section-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
    padding: clamp(20px, 3vw, 32px);
    border-radius: 12px;
    background: linear-gradient(125deg, #a82924 0%, #c9453e 55%, #a82924 100%);
    box-shadow: 0 12px 30px rgba(126, 34, 29, .22);
}
.homepage-product-item {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, .82);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(20, 39, 35, .07);
    transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.homepage-product-item:hover {
    border-color: #b9ccc7;
    box-shadow: 0 14px 32px rgba(18, 102, 90, .13);
    transform: translateY(-4px);
}
.homepage-product-image {
    display: block;
    width: min(100%, 180px);
    aspect-ratio: 1;
    margin-inline: auto;
    padding: 6px;
    overflow: hidden;
    border: 3px solid #f0c4c1;
    border-radius: 50%;
    background: var(--soft);
    box-shadow: 0 7px 18px rgba(126, 34, 29, .13);
}
.homepage-product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
    transition: transform .3s ease;
}
.homepage-product-item:hover .homepage-product-image img { transform: scale(1.035); }
.homepage-product-copy {
    display: flex;
    min-height: 180px;
    padding: 14px 2px 0;
    flex: 1;
    flex-direction: column;
}
.homepage-product-copy h3 {
    height: 48px;
    margin: 0;
    display: -webkit-box;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.7;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.homepage-product-copy h3 a:hover { color: var(--green); }
.homepage-product-price {
    display: flex;
    height: 50px;
    margin-top: 8px;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    gap: 1px;
}
.homepage-product-price strong { color: var(--ink); font-size: 14px; }
.homepage-product-price del { color: var(--muted); font-size: 11px; }
.homepage-product-price.has-discount strong { color: var(--red); }
.homepage-product-action {
    display: inline-flex;
    min-height: 40px;
    margin-top: auto;
    padding: 7px 12px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--green);
    border-radius: 6px;
    color: #fff;
    background: var(--green);
    font-size: 11px;
    font-weight: 700;
}
.homepage-product-action:hover { border-color: var(--green-dark); background: var(--green-dark); }

.catalog-intro {
    display: flex;
    min-height: 230px;
    align-items: center;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
    background: #eef5f3;
}

.catalog-intro-copy {
    width: min(1240px, calc(100% - 36px));
    margin-inline: auto;
    padding-block: 46px;
}

.catalog-intro-copy h1 {
    max-width: 760px;
    margin: 0;
    padding-right: 16px;
    border-right: 4px solid var(--green);
    font-size: 42px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.catalog-intro-copy p {
    max-width: 680px;
    margin: 12px 20px 0 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.9;
    overflow-wrap: anywhere;
}

.catalog-shell, .product-page, .admin-main {
    width: min(1240px, calc(100% - 36px));
    margin-inline: auto;
}

.catalog-shell { padding: 46px 0 80px; }

.catalog-heading, .admin-title-row {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}

.catalog-heading h2, .admin-title-row h1 {
    margin: 0 0 2px;
    font-size: clamp(24px, 3vw, 36px);
    line-height: 1.4;
}

.catalog-heading p, .admin-title-row p { margin: 0; color: var(--muted); }

.search-form {
    display: grid;
    grid-template-columns: minmax(0, 250px) 44px;
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}

.search-form:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px rgba(18, 102, 90, .1); }
.search-form input { min-width: 0; padding: 10px 13px; border: 0; outline: 0; background: transparent; }
.search-form button { border: 0; border-right: 1px solid var(--line); color: var(--green); background: var(--soft); cursor: pointer; font-size: 22px; }

.category-filters {
    display: flex;
    gap: 8px;
    margin: -8px 0 26px;
    padding-bottom: 4px;
    overflow-x: auto;
    scrollbar-width: thin;
}
.category-filters a {
    flex: 0 0 auto;
    padding: 7px 13px;
    border: 1px solid var(--line);
    border-radius: 5px;
    color: var(--muted);
    background: #fff;
    font-size: 12px;
}
.category-filters a:hover { color: var(--green); border-color: var(--green); }
.category-filters a.active { color: #fff; border-color: var(--green); background: var(--green); font-weight: 700; }

.product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.product-card {
    display: flex;
    min-width: 0;
    overflow: hidden;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    transition: transform .2s ease, box-shadow .2s ease;
}

.product-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.product-image { display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--soft); }
.product-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .35s ease; }
.product-card:hover .product-image img { transform: scale(1.025); }

.stock-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 5px 9px;
    color: #fff;
    background: var(--red);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
}

.product-card-copy { display: flex; min-width: 0; padding: 18px; flex: 1; flex-direction: column; }
.eyebrow { color: var(--green); font-size: 11px; font-weight: 700; }
.product-card-copy .eyebrow { margin: 0 0 4px; }
.product-card h3 { margin: 0; font-size: 19px; line-height: 1.5; }
.product-card h3 a:hover { color: var(--green); }
.product-card-copy > p:not(.eyebrow) { min-height: 52px; margin: 7px 0 18px; color: var(--muted); font-size: 13px; }
.product-card-footer { display: flex; margin-top: auto; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--line); }
.product-card-footer strong { font-size: 18px; }
.catalog-card-price { display: flex; align-items: flex-start; flex-direction: column; }
.catalog-card-price del { color: var(--muted); font-size: 10px; }
.catalog-card-price.has-discount strong { color: var(--red); }
.arrow-link { color: var(--green); font-size: 24px; line-height: 1; }

.empty-state {
    padding: 70px 20px;
    text-align: center;
    border: 1px dashed #b7c4c1;
    background: var(--soft);
    border-radius: 8px;
}
.empty-state strong { display: block; font-size: 21px; }
.empty-state p { margin: 5px 0 20px; color: var(--muted); }

.button {
    display: inline-flex;
    min-height: 44px;
    padding: 9px 18px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--green);
    border-radius: 6px;
    color: #fff;
    background: var(--green);
    font-weight: 700;
    cursor: pointer;
}
.button:hover { background: var(--green-dark); }
.button.secondary { color: var(--ink); background: #fff; border-color: var(--line); }
.button.secondary:hover { color: var(--green); border-color: var(--green); }

.footer {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 24px clamp(18px, 4vw, 64px);
    color: #d4dcda;
    background: #17201e;
    font-size: 12px;
}

.whatsapp-float {
    display: inline-flex;
    min-height: 50px;
    padding: 8px 15px 8px 17px;
    align-items: center;
    gap: 9px;
    border: 1px solid #1faa59;
    border-radius: 26px;
    color: #fff;
    background: #25d366;
    box-shadow: 0 10px 28px rgba(20, 115, 58, .28);
    font-size: 12px;
    font-weight: 700;
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 90;
    transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.whatsapp-float:hover {
    background: #1fb75a;
    box-shadow: 0 14px 34px rgba(20, 115, 58, .36);
    transform: translateY(-3px);
}
.whatsapp-icon {
    display: grid;
    width: 31px;
    height: 31px;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .17);
}
.whatsapp-icon svg {
    width: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.contact-page {
    width: min(1120px, calc(100% - 36px));
    min-height: calc(100vh - 145px);
    margin-inline: auto;
    padding: 44px 0 80px;
}
.contact-hero {
    display: flex;
    min-height: 220px;
    padding: clamp(28px, 5vw, 56px);
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    overflow: hidden;
    color: #fff;
    background: var(--green);
    border-radius: 10px;
    position: relative;
}
.contact-hero::after {
    content: "";
    width: 260px;
    height: 260px;
    border: 54px solid rgba(255, 255, 255, .07);
    border-radius: 50%;
    position: absolute;
    left: -72px;
    bottom: -145px;
}
.contact-hero > div { position: relative; z-index: 1; }
.contact-hero .eyebrow { margin: 0 0 6px; color: #bfe3dc; }
.contact-hero h1 { margin: 0; font-size: clamp(32px, 5vw, 52px); line-height: 1.35; }
.contact-hero p:not(.eyebrow) { max-width: 600px; margin: 12px 0 0; color: #dceeea; }
.contact-hero-mark {
    display: grid;
    width: 92px;
    height: 92px;
    flex: 0 0 92px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    font-size: 42px;
    position: relative;
    z-index: 1;
}
.contact-layout {
    display: grid;
    grid-template-columns: minmax(260px, .7fr) minmax(0, 1.3fr);
    gap: clamp(28px, 6vw, 72px);
    padding-top: 52px;
    align-items: start;
}
.contact-copy { padding-top: 10px; }
.contact-copy .eyebrow { margin: 0 0 4px; }
.contact-copy h2 { margin: 0; font-size: 28px; }
.contact-copy > p:not(.eyebrow) { margin: 10px 0 28px; color: var(--muted); }
.contact-note {
    padding: 17px 0;
    border-top: 1px solid var(--line);
}
.contact-note strong, .contact-note span { display: block; }
.contact-note strong { margin-bottom: 3px; font-size: 14px; }
.contact-note span { color: var(--muted); font-size: 12px; }
.contact-form-card {
    padding: clamp(20px, 4vw, 36px);
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    box-shadow: var(--shadow);
}
.contact-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact-form-error { margin-bottom: 18px; padding: 10px 13px; color: #7c231f; background: #fff1ef; border: 1px solid #edc1bd; border-radius: 6px; font-size: 12px; }
.contact-form-error p { margin: 3px 0; }
.contact-honeypot { position: absolute; right: -10000px; }
.contact-submit { justify-self: start; min-width: 150px; }

.product-page { padding: 34px 0 80px; }
.back-link { display: inline-block; margin-bottom: 22px; color: var(--muted); font-size: 13px; }
.back-link:hover { color: var(--green); }
.product-detail { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(330px, .9fr); gap: clamp(32px, 6vw, 78px); align-items: start; }
.gallery-main { aspect-ratio: 1 / 1; overflow: hidden; background: var(--soft); border: 1px solid var(--line); border-radius: 8px; }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs { display: grid; grid-template-columns: repeat(5, 72px); gap: 10px; margin-top: 12px; }
.gallery-thumb { width: 72px; height: 72px; padding: 3px; border: 1px solid var(--line); border-radius: 6px; background: #fff; cursor: pointer; }
.gallery-thumb.active { border: 2px solid var(--green); padding: 2px; }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; }
.product-info { padding-top: 16px; }
.category-link {
    display: inline-block;
    margin-bottom: 5px;
    color: var(--green);
    font-size: 12px;
    font-weight: 700;
}
.category-link:hover { text-decoration: underline; }
.product-info h1 { margin: 4px 0 12px; font-size: clamp(30px, 4vw, 46px); line-height: 1.35; }
.lead { margin: 0 0 22px; color: var(--muted); font-size: 16px; }
.price-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.price-row > strong { font-size: 26px; }
.product-detail-price {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
}
.product-detail-price strong { font-size: 26px; }
.product-detail-price del { color: var(--muted); font-size: 14px; }
.product-detail-price.has-discount strong { color: var(--red); }
.available { color: var(--green); font-size: 13px; font-weight: 700; }
.available::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; background: #2a9d69; }
.product-description { margin-top: 26px; }
.prose { overflow-wrap: anywhere; }
.prose h2, .prose h3 { margin-top: 1.4em; line-height: 1.5; }
.prose p { margin: .7em 0; }
.prose ul, .prose ol { padding-right: 24px; }
.prose img { height: auto; border-radius: 6px; }
.prose a { color: var(--green); text-decoration: underline; }

.auth-page {
    min-height: calc(100vh - 145px);
    display: grid;
    place-items: center;
    padding: 40px 18px;
    background: var(--soft);
}
.auth-panel { width: min(100%, 430px); padding: clamp(25px, 5vw, 42px); background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }
.auth-heading { text-align: center; margin-bottom: 26px; }
.auth-heading h1 { margin: 12px 0 2px; font-size: 25px; }
.auth-heading p { margin: 0; color: var(--muted); font-size: 13px; }
.auth-user-icon { display: grid; width: 58px; height: 58px; margin-inline: auto; place-items: center; border-radius: 50%; color: #fff; background: var(--green); }
.auth-user-icon svg { width: 32px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 22px; padding: 4px; border-radius: 7px; background: var(--soft); }
.auth-tabs a { padding: 8px; border-radius: 5px; color: var(--muted); text-align: center; font-size: 12px; font-weight: 700; }
.auth-tabs a.active { color: #fff; background: var(--green); }
.auth-form-error { width: 100%; margin: 0 0 18px; }
.auth-form-error p { margin: 3px 0; }
.admin-auth-link { display: block; margin-top: 20px; color: var(--muted); text-align: center; font-size: 11px; }
.admin-auth-link:hover { color: var(--green); }

.stack-form { display: grid; gap: 18px; }
label { color: #323b39; font-size: 13px; font-weight: 700; }
input:not([type="checkbox"]):not([type="file"]), textarea, select {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 11px 12px;
    border: 1px solid #cbd3d1;
    border-radius: 5px;
    outline: 0;
    color: var(--ink);
    background: #fff;
}
textarea { resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(18, 102, 90, .1); }
.form-error { width: min(1240px, calc(100% - 36px)); margin: 18px auto; padding: 12px 14px; color: #7c231f; background: #fff1ef; border: 1px solid #edc1bd; border-radius: 6px; font-size: 13px; }
.form-error p { margin: 3px 0; }
.flash { position: fixed; z-index: 100; left: 18px; bottom: 18px; max-width: min(420px, calc(100% - 36px)); padding: 12px 16px; border-radius: 6px; box-shadow: var(--shadow); font-size: 13px; animation: flash-in .25s ease; }
.flash-success { color: #0d4e46; background: #e8f6f1; border: 1px solid #a7d9ca; }
.flash-error { color: #7c231f; background: #fff1ef; border: 1px solid #edc1bd; }
@keyframes flash-in { from { opacity: 0; transform: translateY(8px); } }

.admin-body {
    padding-right: 260px;
    background: var(--soft);
    transition: padding-right .24s ease;
}
.admin-topbar {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    display: flex;
    width: 260px;
    min-height: 100vh;
    padding: 16px 12px;
    align-items: stretch;
    justify-content: flex-start;
    flex-direction: column;
    gap: 14px;
    overflow: hidden;
    border: 0;
    border-left: 1px solid #e5e7e8;
    background: #fff;
    box-shadow: -8px 0 28px rgba(32, 34, 39, .06);
    transition: width .24s ease;
}
.admin-sidebar-head {
    display: flex;
    min-height: 52px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.admin-sidebar-head .brand { min-width: 0; }
.admin-brand-copy {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: opacity .15s ease, width .24s ease;
}
.admin-sidebar-toggle {
    display: grid;
    width: 40px;
    height: 40px;
    padding: 10px;
    flex: 0 0 40px;
    align-content: center;
    gap: 4px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
}
.admin-sidebar-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 999px;
    background: var(--ink);
    transition: transform .2s ease, opacity .2s ease;
}
.admin-sidebar-toggle:hover { border-color: #efb9bc; background: #fff5f5; }
.admin-nav {
    display: flex;
    min-height: 0;
    padding-left: 3px;
    align-items: stretch;
    flex: 1;
    flex-direction: column;
    gap: 3px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
}
.admin-nav a {
    position: relative;
    display: flex;
    min-height: 42px;
    padding: 8px 10px;
    align-items: center;
    gap: 10px;
    color: #596064;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.admin-nav a::before {
    display: grid;
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    place-items: center;
    content: attr(data-short);
    color: #6e7477;
    border-radius: 8px;
    background: #f1f3f3;
    font-size: 11px;
    font-weight: 800;
}
.admin-nav a:hover { color: var(--red); background: #fff5f5; }
.admin-nav a:hover::before { color: #fff; background: var(--red); }
.admin-nav a.active { color: var(--red); background: #fff0f1; }
.admin-nav a.active::before { color: #fff; background: var(--red); }
.admin-nav a span {
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity .15s ease;
}
.admin-nav .admin-logout-link { margin-top: auto; color: #a32a30; }
.admin-sidebar-backdrop { display: none; }
.admin-body.admin-sidebar-collapsed { padding-right: 78px; }
.admin-body.admin-sidebar-collapsed .admin-topbar { width: 78px; padding-inline: 10px; }
.admin-body.admin-sidebar-collapsed .admin-sidebar-head { justify-content: center; }
.admin-body.admin-sidebar-collapsed .admin-sidebar-head .brand { display: none; }
.admin-body.admin-sidebar-collapsed .admin-brand-copy,
.admin-body.admin-sidebar-collapsed .admin-nav a span { width: 0; opacity: 0; }
.admin-body.admin-sidebar-collapsed .admin-nav a {
    padding-inline: 9px;
    justify-content: center;
}
.admin-body.admin-sidebar-collapsed .admin-nav a::before { width: 34px; height: 34px; flex-basis: 34px; }
.admin-body.admin-sidebar-collapsed .admin-nav a:hover::after {
    position: fixed;
    right: 68px;
    z-index: 130;
    padding: 6px 10px;
    content: attr(title);
    color: #fff;
    border-radius: 6px;
    background: #25292b;
    font-size: 10px;
}
.contact-message-count { padding: 7px 11px; color: var(--green); background: #e8f6f1; border-radius: 5px; font-size: 12px; font-weight: 700; }
.contact-message-list { display: grid; gap: 14px; }
.contact-message { padding: 20px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.contact-message.unread { border-right: 4px solid var(--green); }
.contact-message-head { display: flex; justify-content: space-between; gap: 18px; color: var(--muted); font-size: 11px; }
.contact-message-head strong, .contact-message-head span { display: block; }
.contact-message-head strong { color: var(--ink); font-size: 14px; }
.contact-message h2 { margin: 16px 0 5px; font-size: 17px; }
.contact-message > p { margin: 10px 0 18px; color: #3f4947; font-size: 13px; }
.contact-message-actions { display: flex; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.contact-message-actions form { margin: 0; }
.contact-message-actions .button { min-height: 36px; padding: 6px 12px; font-size: 11px; }
.danger-button:hover { color: var(--red) !important; border-color: var(--red) !important; }
.admin-main { min-height: calc(100vh - 145px); padding: 42px 0 80px; }
.admin-title-row .eyebrow { margin-bottom: 1px; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 22px; }
.stats-grid > div { display: flex; min-height: 92px; padding: 16px; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.stats-grid span { color: var(--muted); font-size: 12px; }
.stats-grid strong { font-size: 25px; color: var(--green); }
.admin-list, .form-section { border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.list-head { display: flex; align-items: center; justify-content: space-between; padding: 17px 20px; border-bottom: 1px solid var(--line); }
.list-head h2 { margin: 0; font-size: 17px; }
.list-head span { color: var(--muted); font-size: 12px; }
.admin-list-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--line);
    background: #fbfcfc;
}
.admin-list-tools input,
.admin-list-tools select {
    flex: 1 1 220px;
    min-width: 0;
}
.admin-list-tools select { flex-basis: 150px; }
.admin-list-tools span {
    margin-inline-start: auto;
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
}
.admin-product-row { display: grid; grid-template-columns: minmax(280px, 1.5fr) minmax(115px, .45fr) minmax(105px, .5fr) 90px 100px 112px; gap: 20px; padding: 14px 18px; align-items: center; border-bottom: 1px solid var(--line); }
.admin-product-row:last-child { border-bottom: 0; }
.admin-product-main { display: flex; align-items: center; min-width: 0; gap: 12px; }
.admin-product-main img, .image-placeholder { flex: 0 0 120px; width: 120px; height: 120px; border-radius: 8px; object-fit: cover; background: var(--soft); }
.image-placeholder { display: grid; place-items: center; color: var(--muted); text-align: center; font-size: 11px; }
.admin-product-copy { min-width: 0; }
.admin-product-title { display: flex; min-width: 0; align-items: center; gap: 8px; }
.admin-product-main h3 { margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; }
.admin-product-main p { margin: 1px 0 0; color: var(--muted); font-size: 10px; }
.product-id-badge { flex: 0 0 auto; padding: 3px 6px; color: #195b51; border: 1px solid #b8d7d1; border-radius: 4px; background: #edf7f4; font-size: 10px; font-weight: 700; }
.row-metric span, .row-metric strong { display: block; }
.row-metric span { color: var(--muted); font-size: 10px; }
.row-metric strong { font-size: 13px; }
.brand-metric strong { overflow-wrap: anywhere; }
.admin-price-stack { display: flex; align-items: flex-start; flex-direction: column; gap: 2px; }
.admin-price-stack del { color: var(--muted); font-size: 10px; }
.admin-price-stack.has-discount strong { color: var(--red); }
.status { justify-self: start; padding: 4px 8px; color: #6c3c08; background: #fff1dc; border-radius: 4px; font-size: 10px; font-weight: 700; }
.status.active { color: #0e594b; background: #e4f4ef; }
.row-actions { display: flex; gap: 6px; justify-content: end; }
.row-actions form { margin: 0; }
.row-actions .icon-button { width: 32px; height: 32px; font-size: 17px; }

.category-admin-layout {
    display: grid;
    grid-template-columns: minmax(280px, .7fr) minmax(0, 1.3fr);
    gap: 18px;
    align-items: start;
}
.category-form { position: sticky; top: 94px; }
.category-form-actions { display: flex; gap: 8px; }
.category-form-actions .button { flex: 1; }
.category-row {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 80px 80px 82px;
    gap: 18px;
    padding: 15px 18px;
    align-items: center;
    border-bottom: 1px solid var(--line);
}
.category-row:last-child { border-bottom: 0; }
.category-row h3 { margin: 0; font-size: 14px; }
.category-row p { margin: 1px 0 0; color: var(--muted); font-size: 10px; }

.product-form { display: grid; gap: 18px; }
.form-section { padding: clamp(18px, 3vw, 28px); }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.section-heading h2 { margin: 0; font-size: 17px; }
.section-heading span { color: var(--muted); font-size: 11px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.span-2 { grid-column: 1 / -1; }

.editor { overflow: hidden; border: 1px solid #cbd3d1; border-radius: 6px; }
.editor-tabs { display: flex; background: var(--soft); border-bottom: 1px solid var(--line); }
.editor-tabs button { padding: 9px 13px; color: var(--muted); background: transparent; border: 0; border-left: 1px solid var(--line); cursor: pointer; font-size: 11px; }
.editor-tabs button.active { color: var(--green); background: #fff; font-weight: 700; }
.editor-toolbar { display: flex; gap: 4px; padding: 7px; border-bottom: 1px solid var(--line); }
.editor-toolbar button { min-width: 32px; height: 30px; padding: 0 6px; border: 1px solid var(--line); border-radius: 4px; background: #fff; cursor: pointer; }
.visual-editor, .source-editor { width: 100%; min-height: 280px; padding: 18px; border: 0; outline: 0; }
.source-editor { display: none; margin: 0; border-radius: 0; direction: ltr; text-align: left; font-family: Consolas, monospace; font-size: 13px; }
.editor.source-mode .visual-editor, .editor.source-mode .editor-toolbar { display: none; }
.editor.source-mode .source-editor { display: block; }

.existing-images { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.existing-image { position: relative; overflow: hidden; aspect-ratio: 1 / 1; border: 1px solid var(--line); border-radius: 6px; }
.existing-image img { width: 100%; height: 100%; object-fit: cover; }
.existing-image span { position: absolute; right: 5px; left: 5px; bottom: 5px; padding: 5px; color: #fff; background: rgba(25, 31, 30, .82); border-radius: 4px; font-size: 9px; text-align: center; }
.upload-zone { display: grid; min-height: 130px; place-items: center; align-content: center; gap: 3px; border: 1px dashed #9eafab; border-radius: 6px; color: var(--green); background: #f7fbfa; cursor: pointer; text-align: center; }
.upload-zone input { width: 1px; height: 1px; opacity: 0; position: absolute; }
.upload-zone span { color: var(--muted); font-size: 10px; }
.upload-zone.has-files { border-style: solid; border-color: var(--green); background: #eef8f5; }

.toggle-row { display: flex; min-height: 66px; padding: 10px 12px; align-items: center; justify-content: space-between; gap: 15px; border: 1px solid var(--line); border-radius: 6px; }
.toggle-row span, .toggle-row strong, .toggle-row small { display: block; }
.toggle-row small { max-width: 430px; color: var(--muted); font-weight: 400; line-height: 1.5; }
.toggle-row input { width: 44px; height: 24px; accent-color: var(--green); cursor: pointer; }
.pricing-formula {
    padding: 14px;
    border-right: 3px solid var(--green);
    color: var(--muted);
    background: var(--soft);
    border-radius: 5px;
}
.pricing-formula span, .pricing-formula strong { display: block; }
.pricing-formula span { font-size: 10px; }
.pricing-formula strong { margin-top: 3px; color: var(--ink); font-size: 12px; overflow-wrap: anywhere; }
.check-row {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-weight: 400;
}
.connection-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}
.bot-settings-form textarea[dir="ltr"],
.bot-settings-form input[dir="ltr"] {
    text-align: left;
}
.prompt-editor { min-height: 330px; line-height: 1.9; }
.prompt-editor.compact { min-height: 240px; }
.prompt-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 14px; }
.prompt-toolbar .button { min-height: 38px; }
.prompt-note { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.8; }
.bot-import-list { margin-top: 20px; }
.bot-import-row {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 100px minmax(130px, auto);
    gap: 18px;
    padding: 15px 18px;
    align-items: center;
    border-bottom: 1px solid var(--line);
}
.bot-import-row:last-child { border-bottom: 0; }
.bot-import-row h3 { margin: 0; font-size: 14px; }
.bot-import-row p { margin: 2px 0 0; color: var(--muted); font-size: 10px; }
.compact-button { min-height: 36px; padding: 6px 11px; font-size: 11px; }
.import-error { color: var(--red); font-size: 10px; overflow-wrap: anywhere; }
.site-logo-setting { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.site-logo-setting strong { display: block; font-size: 13px; }
.site-logo-setting p { margin: 2px 0 0; color: var(--muted); font-size: 10px; }
.site-logo-preview { width: 72px; height: 72px; flex: 0 0 72px; padding: 5px; object-fit: contain; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.favicon-preview {
    image-rendering: auto;
    background:
        linear-gradient(45deg, #eef2f1 25%, transparent 25%),
        linear-gradient(-45deg, #eef2f1 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #eef2f1 75%),
        linear-gradient(-45deg, transparent 75%, #eef2f1 75%);
    background-color: #fff;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    background-size: 16px 16px;
}
.site-logo-fallback { display: grid; place-items: center; padding: 0; color: #fff; background: var(--green); font-size: 28px; font-weight: 800; }
.form-actions { display: flex; justify-content: end; gap: 10px; padding-top: 5px; }
.narrow { width: min(620px, calc(100% - 36px)); }
.narrow .form-error { width: 100%; }
.slider-admin-layout { display: grid; grid-template-columns: minmax(320px, .75fr) minmax(0, 1.25fr); gap: 22px; align-items: start; }
.slider-admin-form { position: sticky; top: 92px; }
.slider-form-preview { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; border: 1px solid var(--line); border-radius: 7px; }
.slider-admin-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto auto; gap: 14px; padding: 14px 16px; align-items: center; border-bottom: 1px solid var(--line); }
.slider-admin-row:last-child { border-bottom: 0; }
.slider-admin-row > img { width: 120px; height: 70px; object-fit: cover; border-radius: 6px; background: var(--soft); }
.slider-admin-row h3 { margin: 0; font-size: 14px; }
.slider-admin-row p { margin: 3px 0 0; color: var(--muted); font-size: 10px; }
.homepage-section-admin-layout { display: grid; grid-template-columns: minmax(330px, .8fr) minmax(0, 1.2fr); gap: 22px; align-items: start; }
.homepage-section-form { position: sticky; top: 92px; }
.manual-product-picker {
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--soft);
}
.manual-product-picker > strong { display: block; font-size: 13px; }
.manual-product-picker > p { margin: 2px 0 10px; color: var(--muted); font-size: 10px; }
.manual-product-picker > input[type="search"] { margin-bottom: 8px; }
.manual-product-list { display: grid; max-height: 310px; gap: 5px; overflow-y: auto; }
.manual-product-list label {
    display: flex;
    padding: 8px;
    align-items: center;
    gap: 9px;
    border: 1px solid transparent;
    border-radius: 5px;
    background: #fff;
    cursor: pointer;
}
.manual-product-list label:has(input:checked) { border-color: var(--green); background: #eef8f5; }
.manual-product-list input { flex: 0 0 auto; accent-color: var(--green); }
.manual-product-list span, .manual-product-list strong, .manual-product-list small { display: block; }
.manual-product-list span { min-width: 0; }
.manual-product-list strong { overflow: hidden; color: var(--ink); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.manual-product-list small { color: var(--muted); font-size: 9px; font-weight: 400; }
.homepage-section-admin-row {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 75px 75px auto auto;
    gap: 14px;
    padding: 14px 16px;
    align-items: center;
    border-bottom: 1px solid var(--line);
}
.homepage-section-admin-row:last-child { border-bottom: 0; }
.homepage-section-admin-row h3 { margin: 0; font-size: 14px; }
.homepage-section-admin-row p { margin: 3px 0 0; color: var(--muted); font-size: 10px; }

@media (max-width: 900px) {
    .admin-body,
    .admin-body.admin-sidebar-collapsed { padding-right: 0; }
    .admin-topbar,
    .admin-body.admin-sidebar-collapsed .admin-topbar {
        width: 68px;
        height: 68px;
        min-height: 68px;
        padding: 13px;
        bottom: auto;
        border: 1px solid var(--line);
        border-top: 0;
        border-right: 0;
        border-radius: 0 0 0 16px;
        box-shadow: -5px 5px 20px rgba(32, 34, 39, .1);
        transition: width .24s ease, height .24s ease, padding .24s ease;
    }
    .admin-topbar .admin-sidebar-head,
    .admin-body.admin-sidebar-collapsed .admin-sidebar-head { justify-content: center; }
    .admin-topbar .admin-sidebar-head .brand { display: none; }
    .admin-topbar .admin-nav { display: none; }
    .admin-body.admin-sidebar-open .admin-topbar {
        width: min(290px, 86vw);
        height: 100vh;
        min-height: 100vh;
        padding: 16px 12px;
        bottom: 0;
        border: 0;
        border-left: 1px solid var(--line);
        border-radius: 0;
    }
    .admin-body.admin-sidebar-open .admin-topbar .admin-sidebar-head { justify-content: space-between; }
    .admin-body.admin-sidebar-open .admin-topbar .admin-sidebar-head .brand { display: inline-flex; }
    .admin-body.admin-sidebar-open .admin-topbar .admin-brand-copy,
    .admin-body.admin-sidebar-open .admin-topbar .admin-nav a span { width: auto; opacity: 1; }
    .admin-body.admin-sidebar-open .admin-topbar .admin-nav { display: flex; }
    .admin-body.admin-sidebar-open .admin-topbar .admin-nav a {
        padding-inline: 10px;
        justify-content: flex-start;
    }
    .admin-body.admin-sidebar-open .admin-topbar .admin-nav a::before {
        width: 27px;
        height: 27px;
        flex-basis: 27px;
    }
    .admin-sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 90;
        display: block;
        visibility: hidden;
        padding: 0;
        opacity: 0;
        border: 0;
        background: rgba(22, 25, 27, .35);
        transition: opacity .2s ease, visibility .2s ease;
    }
    .admin-body.admin-sidebar-open .admin-sidebar-backdrop {
        visibility: visible;
        opacity: 1;
    }
    .public-topbar { flex-wrap: wrap; }
    .public-header-primary { flex: 1 1 auto; justify-content: space-between; }
    .mobile-menu-toggle { display: block; margin-right: 14px; }
    .public-nav {
        display: none;
        width: 100%;
        margin: 8px 0 0;
        padding: 8px;
        flex-direction: column;
        align-items: stretch;
        gap: 5px;
        order: 4;
        border-right: 3px solid var(--green);
        box-shadow: 0 8px 22px rgba(20, 39, 35, .08);
    }
    .public-nav.open { display: flex; }
    .public-nav::before { display: none; }
    .public-nav > a,
    .nav-dropdown > button {
        width: 100%;
        min-height: 42px;
        padding-inline: 13px;
        justify-content: space-between;
        text-align: right;
    }
    .nav-dropdown-menu {
        width: 100%;
        max-height: 280px;
        margin-top: 5px;
        position: static;
        box-shadow: none;
    }
    .nav-dropdown:hover .nav-dropdown-menu { display: none; }
    .nav-dropdown.open .nav-dropdown-menu,
    .nav-dropdown:focus-within .nav-dropdown-menu { display: grid; }
    .header-search-form {
        width: 100%;
        margin: 8px 0 0;
        order: 3;
    }
    .account-link { margin-right: 8px; order: 2; }
    .slider-admin-layout { grid-template-columns: 1fr; }
    .slider-admin-form { position: static; }
    .homepage-section-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .homepage-section-admin-layout { grid-template-columns: 1fr; }
    .homepage-section-form { position: static; }
    .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .product-detail { grid-template-columns: 1fr; }
    .product-info { padding-top: 0; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .admin-product-row { grid-template-columns: minmax(220px, 1fr) 110px 100px 90px 100px; }
    .admin-product-row .price-metric { display: none; }
    .existing-images { grid-template-columns: repeat(4, 1fr); }
    .category-admin-layout { grid-template-columns: 1fr; }
    .category-form { position: static; }
}

@media (max-width: 680px) {
    .topbar { min-height: 62px; padding: 8px 14px; }
    .brand-mark { flex-basis: 38px; width: 38px; height: 38px; font-size: 20px; }
    .brand strong { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .brand small { display: none; }
    .mobile-menu-toggle { width: 38px; height: 38px; margin-right: 8px; }
    .public-nav { margin-top: 6px; padding: 6px; }
    .public-nav > a, .nav-dropdown > button { min-height: 40px; font-size: 11px; }
    .account-link { width: 38px; height: 38px; margin-right: 5px; padding: 0; justify-content: center; }
    .account-link > span:last-child { display: none; }
    .homepage-slider { min-height: 390px; }
    .homepage-slide-shade { background: linear-gradient(0deg, rgba(6, 22, 19, .82), rgba(6, 22, 19, .08) 62%); }
    .homepage-slide-content { width: min(100% - 44px, 1240px); padding: 40px 0 58px; justify-content: flex-end; }
    .homepage-slide-content h1 { max-width: 86%; font-size: 25px; }
    .homepage-slide-content p { max-width: 86%; font-size: 11px; line-height: 1.8; }
    .slider-button { min-height: 38px; margin-top: 13px; padding: 7px 13px; font-size: 11px; }
    .slider-control { width: 36px; height: 36px; top: 45%; font-size: 24px; }
    .slider-next { right: 8px; }
    .slider-prev { left: 8px; }
    .slider-dots { bottom: 16px; }
    .slider-admin-row { grid-template-columns: 82px minmax(0, 1fr) auto; gap: 10px; padding: 12px; }
    .slider-admin-row > img { width: 82px; height: 58px; }
    .slider-admin-row .status { grid-column: 2; justify-self: start; }
    .slider-admin-row .row-actions { grid-column: 3; grid-row: 1 / 3; }
    .homepage-product-sections { padding-top: 36px; }
    .homepage-product-section { width: min(100% - 28px, 1240px); margin-bottom: 24px; }
    .homepage-section-heading { align-items: center; margin-bottom: 16px; }
    .homepage-section-heading h2 { font-size: 23px; }
    .homepage-more-link { min-height: 36px; padding: 6px 10px; font-size: 10px; }
    .homepage-section-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
        margin-inline: 0;
        padding: 16px;
    }
    .homepage-product-item {
        min-height: 0;
        padding: 13px;
    }
    .homepage-product-image { width: 150px; height: 150px; aspect-ratio: 1; }
    .homepage-product-copy { min-height: 170px; padding: 12px 2px 0; text-align: center; }
    .homepage-product-price { align-items: center; }
    .homepage-product-copy h3 { height: 42px; font-size: 12px; }
    .homepage-product-price { height: 44px; margin-top: 4px; }
    .homepage-product-price strong { font-size: 12px; }
    .homepage-product-price del { font-size: 9px; }
    .homepage-product-action { min-height: 36px; font-size: 10px; }
    .homepage-section-admin-row {
        grid-template-columns: 1fr auto;
        gap: 9px 12px;
        margin-bottom: 10px;
        padding: 13px;
        border: 1px solid var(--line);
        border-radius: 7px;
        background: #fff;
    }
    .homepage-section-admin-row > div:first-child { grid-column: 1 / -1; }
    .homepage-section-admin-row .row-metric { display: none; }
    .homepage-section-admin-row .row-actions { grid-column: 2; grid-row: 2; }
    .catalog-intro { min-height: 180px; }
    .catalog-intro-copy { width: min(100% - 28px, 1240px); padding-block: 34px; }
    .catalog-intro-copy h1 { padding-right: 12px; font-size: 30px; }
    .catalog-intro-copy p { margin: 9px 16px 0 0; font-size: 13px; }
    .catalog-shell, .product-page, .admin-main { width: min(100% - 28px, 1240px); }
    .catalog-shell { padding: 30px 0 60px; }
    .catalog-heading, .admin-title-row { align-items: stretch; flex-direction: column; gap: 15px; }
    .search-form { grid-template-columns: minmax(0, 1fr) 44px; width: 100%; }
    .category-filters {
        margin-top: -4px;
        margin-inline: -14px;
        padding-inline: 14px;
    }
    .product-grid { grid-template-columns: 1fr; gap: 16px; }
    .product-card { display: grid; grid-template-columns: 42% minmax(0, 1fr); min-height: 190px; }
    .product-image { height: 100%; min-height: 190px; aspect-ratio: auto; }
    .product-card-copy { display: flex; min-width: 0; padding: 13px; flex-direction: column; }
    .product-card h3 { font-size: 16px; }
    .product-card-copy > p:not(.eyebrow) { min-height: 0; margin: 5px 0 10px; font-size: 11px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
    .product-card-footer { margin-top: auto; padding-top: 10px; }
    .product-card-footer strong { font-size: 15px; }
    .stock-badge { top: 8px; right: 8px; font-size: 9px; }
    .footer { flex-direction: column; gap: 2px; }
    .whatsapp-float {
        min-height: 46px;
        right: 12px;
        bottom: 12px;
        padding: 7px 11px 7px 13px;
        font-size: 10px;
    }
    .whatsapp-icon { width: 28px; height: 28px; }
    .contact-page { width: min(100% - 28px, 1120px); padding: 24px 0 60px; }
    .contact-hero { min-height: 190px; padding: 28px 22px; }
    .contact-hero h1 { font-size: 31px; }
    .contact-hero p:not(.eyebrow) { font-size: 13px; }
    .contact-hero-mark { display: none; }
    .contact-layout { grid-template-columns: 1fr; gap: 26px; padding-top: 32px; }
    .contact-copy { padding-top: 0; }
    .contact-copy h2 { font-size: 24px; }
    .contact-form-grid { grid-template-columns: 1fr; }
    .contact-submit { width: 100%; }
    .product-page { padding-top: 20px; }
    .gallery-thumbs { grid-template-columns: repeat(4, 58px); }
    .gallery-thumb { width: 58px; height: 58px; }
    .product-info h1 { font-size: 29px; }
    .admin-title-row .button { width: 100%; }
    .stats-grid { gap: 8px; }
    .stats-grid > div { min-height: 78px; padding: 12px; }
    .stats-grid strong { font-size: 21px; }
    .admin-list { border: 0; background: transparent; }
    .list-head { padding: 0 0 12px; }
    .admin-list-tools { flex-wrap: wrap; padding: 12px 0; background: transparent; }
    .admin-list-tools input { flex-basis: 100%; }
    .admin-list-tools span { width: 100%; margin-inline-start: 0; }
    .admin-product-row { grid-template-columns: 1fr auto; gap: 9px 14px; margin-bottom: 10px; padding: 13px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
    .admin-product-main { grid-column: 1 / -1; }
    .admin-product-main img, .image-placeholder { flex-basis: 96px; width: 96px; height: 96px; }
    .admin-product-title { align-items: flex-start; flex-direction: column; gap: 4px; }
    .admin-product-main h3 { width: 100%; }
    .admin-product-row .row-metric { display: block; }
    .admin-product-row .price-metric { display: none; }
    .status { align-self: center; }
    .row-actions { grid-column: 2; grid-row: 2; }
    .category-row {
        grid-template-columns: 1fr auto;
        gap: 9px 14px;
        margin-bottom: 10px;
        padding: 13px;
        border: 1px solid var(--line);
        border-radius: 7px;
        background: #fff;
    }
    .category-row > div:first-child { grid-column: 1 / -1; }
    .category-row .row-metric { display: none; }
    .category-row .row-actions { grid-column: 2; grid-row: 2; }
    .connection-actions .button { flex: 1 1 140px; }
    .bot-import-row {
        grid-template-columns: 1fr auto;
        gap: 8px 12px;
        margin-bottom: 10px;
        padding: 13px;
        border: 1px solid var(--line);
        border-radius: 7px;
        background: #fff;
    }
    .bot-import-row > div { grid-column: 1 / -1; }
    .bot-import-row .compact-button,
    .bot-import-row .import-error { grid-column: 1 / -1; }
    .form-grid { grid-template-columns: 1fr; }
    .span-2 { grid-column: auto; }
    .existing-images { grid-template-columns: repeat(2, 1fr); }
    .toggle-row { align-items: flex-start; }
    .section-heading { align-items: flex-start; flex-direction: column; gap: 2px; }
    .form-actions { position: sticky; bottom: 0; z-index: 20; margin-inline: -14px; padding: 10px 14px; background: rgba(244, 247, 246, .96); border-top: 1px solid var(--line); }
    .form-actions .button { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* Modern red storefront homepage */
.site-body {
    --ink: #202124;
    --muted: #74777d;
    --line: #ececee;
    --soft: #f7f7f8;
    --green: #d71920;
    --green-dark: #b91017;
    --red: #d71920;
    --shadow: 0 14px 38px rgba(31, 35, 41, .08);
    background: #fff;
}

.site-body main { overflow: hidden; }

.home-container {
    width: min(1280px, calc(100% - 40px));
    margin-inline: auto;
}

.site-body .public-topbar {
    display: grid;
    min-height: 0;
    padding: 14px max(20px, calc((100vw - 1280px) / 2));
    grid-template-columns: auto minmax(280px, 620px) auto;
    grid-template-areas:
        "brand search actions"
        "nav nav nav";
    gap: 14px 34px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 4px 20px rgba(30, 33, 37, .05);
}

.site-body .public-header-primary { grid-area: brand; }
.site-body .public-header-primary .brand { min-width: 190px; }
.site-body .brand-mark {
    color: #fff;
    background: var(--red);
    border-radius: 12px;
}
.site-body .brand strong { font-size: 16px; }
.site-body .brand small { color: #8a8d92; font-size: 10px; }

.site-body .header-search-form {
    grid-area: search;
    width: 100%;
    min-height: 44px;
    margin: 0;
    align-self: center;
    grid-template-columns: minmax(0, 1fr) 48px;
    border-color: #eeeeef;
    border-radius: 10px;
    background: #f7f7f8;
    box-shadow: none;
}
.site-body .header-search-form input { padding-inline: 18px; font-size: 12px; }
.site-body .header-search-form button { border: 0; background: var(--red); }
.site-body .header-search-form button:hover { background: var(--green-dark); }
.site-body .header-search-form button svg {
    width: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.header-actions {
    grid-area: actions;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}
.site-body .account-link,
.header-cart-link {
    display: inline-flex;
    min-height: 42px;
    margin: 0;
    padding: 7px 10px;
    align-items: center;
    gap: 7px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #333;
    font-size: 10px;
    font-weight: 700;
}
.site-body .account-link:hover,
.header-cart-link:hover { color: var(--red); background: #fff1f2; }
.site-body .account-icon {
    width: 30px;
    height: 30px;
    color: #333;
    border: 1px solid #e8e8ea;
    background: #fff;
}
.header-cart-link svg {
    width: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.social-icon-link {
    display: inline-grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    color: #333;
    border-radius: 9px;
}
.social-icon-link svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
}
.social-icon-link:hover {
    color: var(--red);
    background: #fff1f2;
}

.site-body .public-nav {
    grid-area: nav;
    width: 100%;
    margin: 0;
    padding: 8px 0 0;
    justify-content: center;
    gap: clamp(7px, 2vw, 28px);
    border: 0;
    border-top: 1px solid #f0f0f1;
    border-radius: 0;
    background: transparent;
}
.site-body .public-nav::before { display: none; }
.site-body .public-nav > a,
.site-body .nav-dropdown > button {
    min-height: 38px;
    padding: 6px 10px;
    color: #3d3f43;
    border-radius: 7px;
    font-size: 11px;
}
.site-body .public-nav > a:hover,
.site-body .public-nav > a:focus-visible,
.site-body .nav-dropdown > button:hover,
.site-body .nav-dropdown > button:focus-visible { color: var(--red); background: #fff1f2; }
.site-body .public-nav > a.active,
.site-body .nav-dropdown.active > button { color: var(--red); background: transparent; }
.site-body .nav-dropdown-menu {
    border-color: #eee;
    border-radius: 12px;
    box-shadow: 0 18px 45px rgba(25, 28, 33, .12);
}
.site-body .nav-dropdown-menu a:hover,
.site-body .nav-dropdown-menu a:focus-visible,
.site-body .nav-dropdown-menu a.active { color: var(--red); background: #fff1f2; }

.site-body .homepage-slider,
.homepage-hero {
    height: clamp(390px, 42vw, 560px);
    min-height: 0;
    margin-top: 24px;
    overflow: hidden;
    border-radius: 18px;
    color: #202124;
    background: #e9edf1;
    box-shadow: var(--shadow);
    position: relative;
}
.site-body .homepage-slider-track,
.site-body .homepage-slide { height: 100%; min-height: 0; }
.site-body .homepage-slide > img,
.homepage-hero > img { width: 100%; height: 100%; object-fit: cover; }
.homepage-hero > img { position: absolute; inset: 0; }
.site-body .homepage-slide-shade,
.homepage-hero-shade {
    background: linear-gradient(90deg, rgba(255, 255, 255, .03) 20%, rgba(255, 255, 255, .9) 78%, #fff 100%);
    position: absolute;
    inset: 0;
}
.site-body .homepage-slide-content,
.homepage-hero-content {
    width: min(47%, 570px);
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: clamp(34px, 5vw, 76px);
    align-items: flex-start;
    justify-content: center;
    color: #202124;
    position: relative;
    z-index: 2;
}
.homepage-hero-content {
    display: flex;
    flex-direction: column;
}
.hero-kicker {
    margin: 0 0 8px !important;
    color: var(--red) !important;
    font-size: 12px !important;
    font-weight: 800;
    text-shadow: none !important;
}
.site-body .homepage-slide-content h2,
.homepage-hero-content h2 {
    max-width: 540px;
    margin: 0;
    font-size: clamp(30px, 4vw, 50px);
    line-height: 1.35;
    text-shadow: none;
}
.homepage-hero-content h2 span { color: var(--red); }
.site-body .homepage-slide-content > p:not(.hero-kicker),
.homepage-hero-content > p:not(.hero-kicker) {
    max-width: 500px;
    margin: 12px 0 0;
    color: #555b62;
    font-size: clamp(12px, 1.2vw, 15px);
    line-height: 2;
    text-shadow: none;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.site-body .slider-button {
    min-height: 44px;
    margin: 0;
    padding: 9px 20px;
    border-color: var(--red);
    border-radius: 9px;
    color: #fff;
    background: var(--red);
    font-size: 11px;
    box-shadow: 0 8px 18px rgba(215, 25, 32, .2);
}
.site-body .slider-button:hover { border-color: var(--green-dark); background: var(--green-dark); }
.site-body .slider-button-secondary {
    color: #333;
    border-color: #e3e3e5;
    background: rgba(255, 255, 255, .92);
    box-shadow: none;
}
.site-body .slider-button-secondary:hover { color: var(--red); border-color: var(--red); background: #fff; }
.site-body .slider-control {
    width: 38px;
    height: 38px;
    color: #333;
    border-color: #eee;
    background: rgba(255, 255, 255, .9);
    font-size: 23px;
}
.site-body .slider-control:hover { color: #fff; background: var(--red); border-color: var(--red); }
.site-body .slider-dots button { border-color: var(--red); }
.site-body .slider-dots button.active { background: var(--red); }

.home-benefits {
    display: grid;
    margin-top: 18px;
    padding: 20px 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid #eeeeef;
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--shadow);
}
.home-benefits article {
    display: flex;
    min-width: 0;
    padding: 7px 22px;
    align-items: center;
    gap: 13px;
    border-left: 1px solid #eeeeef;
}
.home-benefits article:last-child { border-left: 0; }
.benefit-icon {
    display: grid;
    width: 45px;
    height: 45px;
    flex: 0 0 45px;
    place-items: center;
    color: var(--red);
    border-radius: 12px;
    background: #fff1f2;
}
.benefit-icon svg {
    width: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.home-benefits strong,
.home-benefits small { display: block; }
.home-benefits strong { font-size: 12px; }
.home-benefits small { margin-top: 2px; color: var(--muted); font-size: 9px; }

.home-categories,
.home-brands { padding-top: 58px; padding-bottom: 12px; }
.home-section-title,
.homepage-section-heading {
    display: flex;
    margin-bottom: 18px;
    padding: 0 2px;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}
.home-section-title span { color: var(--red); font-size: 10px; font-weight: 700; }
.home-section-title h2,
.site-body .homepage-section-heading h2 {
    margin: 2px 0 0;
    font-size: clamp(21px, 2.4vw, 29px);
    line-height: 1.45;
}
.home-section-title > a {
    color: var(--red);
    font-size: 10px;
    font-weight: 700;
}
.category-showcase {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}
.category-showcase-card {
    min-width: 0;
    padding: 14px 12px 13px;
    text-align: center;
    border: 1px solid #efeff0;
    border-radius: 14px;
    background: #fff;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.category-showcase-card:hover {
    border-color: #f1bec0;
    box-shadow: 0 12px 28px rgba(32, 35, 40, .08);
    transform: translateY(-4px);
}
.category-showcase-image {
    display: grid;
    width: 100%;
    aspect-ratio: 1.25;
    margin-bottom: 10px;
    overflow: hidden;
    place-items: center;
    border-radius: 10px;
    color: var(--red);
    background: #f8f8f9;
    font-size: 35px;
    font-weight: 800;
}
.category-showcase-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.category-showcase-card strong,
.category-showcase-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.category-showcase-card strong { font-size: 11px; }
.category-showcase-card small { margin-top: 2px; color: var(--muted); font-size: 9px; }

.site-body .homepage-product-sections {
    padding: 34px 0 22px;
    background: #fff;
}
.site-body .homepage-product-section {
    width: min(1280px, calc(100% - 40px));
    margin: 0 auto 48px;
}
.site-body .homepage-section-heading .eyebrow { color: var(--red); }
.site-body .homepage-more-link {
    min-height: 36px;
    padding: 6px 11px;
    color: var(--red);
    border: 0;
    background: transparent;
}
.site-body .homepage-more-link:hover { color: var(--green-dark); background: #fff1f2; }
.site-body .homepage-section-grid {
    display: grid;
    padding: 0;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.site-body .homepage-product-item {
    padding: 12px;
    border-color: #eeeeef;
    border-radius: 14px;
    box-shadow: 0 5px 18px rgba(31, 35, 41, .04);
}
.site-body .homepage-product-item:hover {
    border-color: #f0b8ba;
    box-shadow: 0 14px 32px rgba(31, 35, 41, .09);
}
.site-body .homepage-product-image {
    width: 100%;
    aspect-ratio: 1 / .9;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 11px;
    background: #f8f8f9;
    box-shadow: none;
    position: relative;
}
.site-body .homepage-product-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 0; }
.product-image-placeholder {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    color: #b9bbc0;
    font-size: 11px;
    font-weight: 700;
}
.product-discount-badge {
    padding: 4px 8px;
    color: #fff;
    border-radius: 7px;
    background: var(--red);
    font-size: 9px;
    font-weight: 700;
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
}
.site-body .homepage-product-copy { min-height: 158px; padding-top: 12px; }
.site-body .homepage-product-copy h3 { height: 43px; font-size: 12px; text-align: right; }
.site-body .homepage-product-copy h3 a:hover { color: var(--red); }
.site-body .homepage-product-price { height: 45px; align-items: flex-start; }
.site-body .homepage-product-price strong { font-size: 12px; }
.site-body .homepage-product-price del { font-size: 9px; }
.site-body .homepage-product-action {
    min-height: 36px;
    color: var(--red);
    border-color: #f1c6c8;
    border-radius: 8px;
    background: #fff5f5;
}
.site-body .homepage-product-action:hover { color: #fff; border-color: var(--red); background: var(--red); }

.custom-order {
    display: grid;
    min-height: 185px;
    margin-top: 8px;
    margin-bottom: 52px;
    padding: 26px clamp(24px, 4vw, 52px);
    grid-template-columns: 180px minmax(260px, 1fr) minmax(260px, 390px);
    align-items: center;
    gap: 30px;
    overflow: hidden;
    border: 1px solid #f6d7d9;
    border-radius: 18px;
    background: linear-gradient(105deg, #fff7f7, #fff0f1);
    scroll-margin-top: 150px;
}
.custom-order-art { color: var(--red); opacity: .85; }
.custom-order-art svg { width: 100%; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.custom-order-art .maple { stroke-width: 2; }
.custom-order-copy > span { color: var(--red); font-size: 10px; font-weight: 700; }
.custom-order-copy h2 { margin: 3px 0 6px; font-size: clamp(22px, 2.5vw, 31px); }
.custom-order-copy p { margin: 0; color: var(--muted); font-size: 11px; line-height: 2; }
.custom-order-form { display: grid; gap: 9px; }
.custom-order-form input {
    width: 100%;
    height: 45px;
    padding: 8px 14px;
    border: 1px solid #eee;
    border-radius: 9px;
    outline: 0;
    background: #fff;
    font-size: 11px;
}
.custom-order-form input:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(215, 25, 32, .09); }
.custom-order-form button {
    height: 44px;
    color: #fff;
    border: 0;
    border-radius: 9px;
    background: var(--red);
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
}
.custom-order-form button:hover { background: var(--green-dark); }

.brand-showcase {
    display: flex;
    gap: 18px;
    margin-inline: -6px;
    padding: 8px 6px 10px;
    overflow-x: auto;
    overflow-y: hidden;
    direction: ltr;
    scroll-behavior: smooth;
    scrollbar-color: transparent transparent;
    scrollbar-width: thin;
    transition: scrollbar-color .2s ease;
}
.brand-showcase:hover,
.brand-showcase:focus-within {
    scrollbar-color: rgba(215, 25, 32, .35) transparent;
}
.brand-showcase::-webkit-scrollbar { height: 4px; }
.brand-showcase::-webkit-scrollbar-track { background: transparent; }
.brand-showcase::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: transparent;
}
.brand-showcase:hover::-webkit-scrollbar-thumb,
.brand-showcase:focus-within::-webkit-scrollbar-thumb {
    background: rgba(215, 25, 32, .35);
}
.brand-showcase > .brand-card {
    display: grid;
    place-items: center;
}
.brand-showcase > .brand-card:nth-child(1),
.brand-showcase > .brand-card:nth-child(4) { color: #d71920; }

.home-testimonials {
    margin-top: 44px;
    padding: 52px 0 66px;
    background: #f8f8f9;
}
.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.testimonial-grid article {
    min-height: 160px;
    padding: 25px;
    border: 1px solid #eeeeef;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(31, 35, 41, .05);
}
.testimonial-grid article::before {
    content: "★★★★★";
    display: block;
    margin-bottom: 12px;
    color: #f4b000;
    direction: ltr;
    font-size: 12px;
    letter-spacing: 2px;
}
.testimonial-grid strong { font-size: 13px; }
.testimonial-grid p { margin: 7px 0 0; color: var(--muted); font-size: 11px; line-height: 2; }

.site-body .footer {
    display: block;
    padding: 0;
    color: #62666d;
    background: #fff;
    font-size: 11px;
}
.footer-trust {
    display: grid;
    padding: 20px max(20px, calc((100vw - 1280px) / 2));
    grid-template-columns: repeat(3, 1fr);
    color: #fff;
    background: var(--red);
}
.footer-trust span { padding: 0 24px; text-align: center; border-left: 1px solid rgba(255, 255, 255, .25); }
.footer-trust span:last-child { border-left: 0; }
.footer-trust strong,
.footer-trust small { display: block; }
.footer-trust strong { font-size: 12px; }
.footer-trust small { margin-top: 2px; color: rgba(255, 255, 255, .78); font-size: 9px; }
.footer-main {
    display: grid;
    width: min(1280px, calc(100% - 40px));
    margin-inline: auto;
    padding: 42px 0 34px;
    grid-template-columns: 1.5fr repeat(3, 1fr) 120px;
    gap: 36px;
}
.footer-about p { max-width: 310px; margin: 15px 0 0; line-height: 2; }
.footer-column { display: flex; flex-direction: column; gap: 7px; }
.footer-column > strong { margin-bottom: 5px; color: #202124; font-size: 12px; }
.footer-column a:hover { color: var(--red); }
.footer-social-link {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 7px;
}
.footer-social-link .social-icon-link {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
    border: 1px solid #eeeeef;
    background: #fff;
}
.footer-social-link .social-icon-link svg {
    width: 17px;
    height: 17px;
}
.footer-symbol {
    display: grid;
    min-height: 110px;
    place-items: center;
    align-content: center;
    border: 1px dashed #d7d8da;
    border-radius: 12px;
    text-align: center;
}
.footer-symbol span { font-size: 9px; }
.footer-symbol strong { color: var(--red); font-size: 34px; }
.footer-bottom {
    display: flex;
    padding: 15px max(20px, calc((100vw - 1280px) / 2));
    justify-content: space-between;
    gap: 20px;
    border-top: 1px solid #eeeeef;
    color: #8a8d92;
    background: #fafafa;
    font-size: 9px;
}

@media (max-width: 1040px) {
    .site-body .public-topbar {
        grid-template-columns: auto minmax(220px, 1fr) auto;
        gap-inline: 18px;
    }
    .site-body .public-header-primary .brand { min-width: 160px; }
    .site-body .public-nav { gap: 4px; }
    .home-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-benefits article:nth-child(2) { border-left: 0; }
    .home-benefits article:nth-child(-n+2) { border-bottom: 1px solid #eeeeef; }
    .category-showcase { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .site-body .homepage-section-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .custom-order { grid-template-columns: 130px 1fr; }
    .custom-order-form { grid-column: 1 / -1; grid-template-columns: 1fr 210px; }
    .brand-showcase { gap: 14px; }
    .footer-main { grid-template-columns: 1.3fr repeat(3, 1fr); }
    .footer-symbol { display: none; }
}

@media (max-width: 900px) {
    .site-body .public-topbar {
        display: flex;
        padding: 10px 18px;
        gap: 9px;
    }
    .site-body .public-header-primary { width: 100%; }
    .site-body .public-header-primary .brand { min-width: 0; }
    .site-body .header-actions { margin-right: auto; order: 2; }
    .site-body .header-search-form { margin-top: 2px; order: 3; }
    .site-body .public-nav {
        margin-top: 2px;
        padding: 8px;
        order: 4;
        border: 1px solid #eee;
        border-right: 3px solid var(--red);
        border-radius: 10px;
        box-shadow: var(--shadow);
    }
    .site-body .account-link { order: initial; }
    .site-body .homepage-slide-content,
    .homepage-hero-content { width: 58%; padding: 40px; }
    .footer-main { grid-template-columns: repeat(2, 1fr); }
    .custom-order { scroll-margin-top: 190px; }
}

@media (max-width: 680px) {
    .home-container,
    .site-body .homepage-product-section,
    .footer-main { width: min(100% - 28px, 1280px); }
    .site-body .public-topbar { padding: 8px 14px; }
    .site-body .brand strong { max-width: 120px; font-size: 13px; }
    .header-actions { gap: 2px; }
    .header-cart-link,
    .site-body .account-link { width: 38px; height: 38px; padding: 0; justify-content: center; }
    .header-cart-link span,
    .site-body .account-link > span:last-child { display: none; }
    .site-body .account-icon { width: 29px; height: 29px; }
    .site-body .homepage-slider,
    .homepage-hero { height: 460px; margin-top: 14px; border-radius: 14px; }
    .site-body .homepage-slide > img,
    .homepage-hero > img { object-position: 35% center; }
    .site-body .homepage-slide-shade,
    .homepage-hero-shade {
        background: linear-gradient(0deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .9) 44%, rgba(255, 255, 255, .1) 78%);
    }
    .site-body .homepage-slide-content,
    .homepage-hero-content {
        width: 100%;
        padding: 30px 24px 42px;
        align-items: flex-start;
        justify-content: flex-end;
    }
    .site-body .homepage-slide-content h2,
    .homepage-hero-content h2 { max-width: 90%; font-size: 29px; }
    .site-body .homepage-slide-content > p:not(.hero-kicker),
    .homepage-hero-content > p:not(.hero-kicker) { max-width: 94%; font-size: 11px; }
    .hero-actions { margin-top: 16px; }
    .site-body .slider-button { min-height: 40px; padding: 7px 13px; font-size: 10px; }
    .site-body .slider-control { top: 35%; }
    .home-benefits { padding: 8px; grid-template-columns: 1fr; }
    .home-benefits article { padding: 13px 10px; border-left: 0; border-bottom: 1px solid #eeeeef; }
    .home-benefits article:nth-child(3) { border-bottom: 1px solid #eeeeef; }
    .home-benefits article:last-child { border-bottom: 0; }
    .home-categories,
    .home-brands { padding-top: 42px; }
    .home-section-title { align-items: center; }
    .home-section-title h2,
    .site-body .homepage-section-heading h2 { font-size: 20px; }
    .category-showcase {
        display: flex;
        margin-inline: -14px;
        padding: 0 14px 10px;
        gap: 10px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
    }
    .category-showcase-card { min-width: 145px; scroll-snap-align: start; }
    .site-body .homepage-product-sections { padding-top: 28px; }
    .site-body .homepage-product-section { margin-bottom: 38px; }
    .site-body .homepage-section-heading { margin-bottom: 13px; }
    .site-body .homepage-section-grid {
        display: flex;
        margin-inline: -14px;
        padding: 0 14px 12px;
        gap: 11px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
    }
    .site-body .homepage-product-item { min-width: 220px; scroll-snap-align: start; }
    .site-body .homepage-product-image { width: 100%; height: auto; }
    .site-body .homepage-product-copy { min-height: 155px; text-align: right; }
    .site-body .homepage-product-price { align-items: flex-start; }
    .custom-order {
        min-height: 0;
        margin-bottom: 40px;
        padding: 24px 20px;
        grid-template-columns: 1fr;
        gap: 18px;
        scroll-margin-top: 170px;
    }
    .custom-order-art { display: none; }
    .custom-order-form { grid-column: auto; grid-template-columns: 1fr; }
    .brand-showcase {
        display: flex;
        margin-inline: -14px;
        padding: 0 14px 12px;
        overflow-x: auto;
    }
    .brand-showcase .brand-card { flex-basis: 164px; min-width: 164px; min-height: 168px; }
    .brand-logo-circle { width: 124px; height: 124px; padding: 18px; }
    .home-testimonials { margin-top: 32px; padding: 42px 0; }
    .testimonial-grid { grid-template-columns: 1fr; }
    .footer-trust { grid-template-columns: 1fr; padding: 8px 20px; }
    .footer-trust span { padding: 12px; border-left: 0; border-bottom: 1px solid rgba(255, 255, 255, .2); }
    .footer-trust span:last-child { border-bottom: 0; }
    .footer-main { padding: 32px 0; grid-template-columns: 1fr 1fr; gap: 28px 20px; }
    .footer-about { grid-column: 1 / -1; }
    .footer-bottom { align-items: center; flex-direction: column; gap: 3px; text-align: center; }
}

.account-menu { position: relative; }
.account-menu .account-link { border: 0; cursor: pointer; }
.account-dropdown {
    display: none;
    width: 210px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 18px 42px rgba(25, 28, 33, .14);
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 80;
}
.account-menu.open .account-dropdown { display: grid; }
.account-dropdown a { padding: 9px 11px; border-radius: 7px; font-size: 11px; font-weight: 600; }
.account-dropdown a:hover { color: var(--red); background: #fff1f2; }
.account-dropdown .logout-link { color: #b4232a; border-top: 1px solid var(--line); border-radius: 0 0 7px 7px; }
.cart-count {
    display: grid;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    place-items: center;
    color: #fff;
    border-radius: 10px;
    background: var(--red);
    font-size: 9px;
}
.cart-count.is-empty { display: none; }
.shop-notice {
    max-width: min(360px, calc(100% - 28px));
    padding: 11px 16px;
    color: #fff;
    border-radius: 10px;
    background: #15803d;
    box-shadow: 0 14px 36px rgba(20, 32, 25, .22);
    opacity: 0;
    pointer-events: none;
    position: fixed;
    right: 18px;
    bottom: 82px;
    z-index: 120;
    transform: translateY(12px);
    transition: opacity .2s ease, transform .2s ease;
    font-size: 11px;
    font-weight: 700;
}
.shop-notice.visible { opacity: 1; transform: translateY(0); }
.shop-notice.error { background: #b4232a; }
form[action$="/shop-action.php"] button.is-loading {
    opacity: .65;
    cursor: wait;
}

.category-showcase-card {
    position: relative;
    padding: 0 0 16px;
    overflow: hidden;
    border: 0;
    border-radius: 22px 8px 22px 8px;
    background: linear-gradient(155deg, #fff 42%, #fff2f3 100%);
    box-shadow: 0 10px 28px rgba(34, 37, 42, .08);
}
.category-showcase-card::after {
    content: "";
    width: 46px;
    height: 4px;
    border-radius: 4px;
    background: var(--red);
    position: absolute;
    right: 50%;
    bottom: 0;
    transform: translateX(50%);
}
.category-showcase-image {
    aspect-ratio: 1.35;
    margin-bottom: 13px;
    border-radius: 0 0 28px 8px;
    background: #f4f4f5;
}
.category-showcase-card strong,
.category-showcase-card small { padding-inline: 10px; }

.product-quick-actions {
    display: grid;
    margin-top: 8px;
    grid-template-columns: 1fr 38px;
    gap: 7px;
}
.product-quick-actions form { margin: 0; }
.product-quick-actions button {
    width: 100%;
    min-height: 36px;
    padding: 6px 9px;
    color: #fff;
    border: 1px solid var(--red);
    border-radius: 8px;
    background: var(--red);
    cursor: pointer;
    font-size: 10px;
    font-weight: 700;
}
.product-quick-actions .favorite-button {
    padding: 0;
    color: var(--red);
    background: #fff;
    font-size: 20px;
}
.product-quick-actions .favorite-button.active { color: #fff; background: var(--red); }
.catalog-actions { margin-top: 12px; }
.product-purchase-actions { display: flex; flex-wrap: wrap; gap: 9px; margin: 18px 0; }
.product-purchase-actions form { margin: 0; }

.brand-select-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 10px;
    align-items: end;
}
.brand-select-field > label:first-child { min-width: 0; }
.brand-select-field input[type="search"] { margin-bottom: 7px; }
.brand-add-toggle { min-height: 42px; padding-inline: 12px; font-size: 10px; }
.brand-new-field { grid-column: 1 / -1; }

.brand-showcase .brand-card {
    display: flex;
    flex: 0 0 clamp(170px, 16vw, 220px);
    min-height: 190px;
    padding: 14px 12px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 13px;
    color: #444;
    border: 0;
    border-radius: 14px;
    background: transparent;
    box-shadow: none;
    direction: rtl;
    text-align: center;
}
.brand-logo-circle {
    display: grid;
    width: clamp(138px, 13vw, 172px);
    height: clamp(138px, 13vw, 172px);
    padding: 20px;
    overflow: hidden;
    place-items: center;
    border: 1px solid #eeeeef;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 10px 26px rgba(31, 35, 41, .08);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.brand-logo-circle img { width: 100%; height: 100%; object-fit: contain; }
.brand-logo-circle > span {
    color: var(--red);
    font-size: 38px;
    font-weight: 900;
}
.brand-card strong { max-width: 190px; font-size: 12px; line-height: 1.6; }
.brand-card:hover .brand-logo-circle {
    border-color: #f0b8ba;
    box-shadow: 0 14px 30px rgba(215, 25, 32, .12);
    transform: translateY(-4px);
}

.brand-page { padding-top: 34px; }
.brand-page-header {
    display: flex;
    margin-bottom: 28px;
    padding: 24px;
    align-items: center;
    gap: 20px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--shadow);
}
.brand-page-header > img {
    width: 118px;
    height: 118px;
    flex: 0 0 118px;
    padding: 16px;
    object-fit: contain;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--soft);
}
.brand-page-header h1 { margin: 2px 0 6px; font-size: clamp(26px, 4vw, 40px); }
.brand-page-header p { max-width: 720px; margin: 0; color: var(--muted); }
.pagination {
    display: flex;
    margin-top: 26px;
    justify-content: center;
    gap: 8px;
}
.pagination a,
.pagination button {
    display: grid;
    min-width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.pagination a.active,
.pagination a:hover,
.pagination button.active,
.pagination button:hover {
    color: #fff;
    border-color: var(--red);
    background: var(--red);
}
.admin-pagination { padding: 0 18px 18px; }

.home-vlogs { padding-top: 58px; padding-bottom: 58px; }
.vlog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.vlog-card {
    display: flex;
    min-width: 0;
    min-height: 100%;
    overflow: hidden;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(31, 35, 41, .05);
}
.vlog-card > a { display: block; flex: 0 0 auto; aspect-ratio: 16 / 9; overflow: hidden; background: var(--soft); }
.vlog-card img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .3s ease; }
.vlog-card:hover img { transform: scale(1.035); }
.vlog-card > div { display: flex; min-width: 0; padding: 18px; flex: 1; flex-direction: column; }
.vlog-card h2,
.vlog-card h3 {
    min-height: calc(1.7em * 2);
    margin: 0;
    display: -webkit-box;
    overflow: hidden;
    font-size: 15px;
    line-height: 1.7;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.vlog-card h2 a,
.vlog-card h3 a { display: block; }
.vlog-card p {
    min-height: calc(1.9em * 3);
    margin: 7px 0 12px;
    display: -webkit-box;
    overflow: hidden;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.9;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
.vlog-card .arrow-link,
.vlog-link { margin-top: auto; }
.vlog-link { color: var(--red); font-size: 10px; font-weight: 700; }
.vlog-page { width: min(900px, calc(100% - 36px)); margin: 38px auto 70px; }
.vlog-page article > img { width: 100%; aspect-ratio: 16 / 9; max-height: 510px; object-fit: cover; object-position: center; border-radius: 18px; }
.vlog-page h1 { margin: 5px 0 10px; font-size: clamp(27px, 4vw, 44px); }
.vlog-page .eyebrow { margin-top: 24px; }
.vlog-lead { color: var(--muted); font-size: 15px; line-height: 2; }

.account-page { width: min(1120px, calc(100% - 36px)); min-height: 55vh; margin: 42px auto 72px; }
.account-page-heading { margin-bottom: 24px; }
.account-page-heading .eyebrow { margin: 0; }
.account-page-heading h1 { margin: 2px 0 0; font-size: clamp(26px, 4vw, 38px); }
.profile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.profile-card { padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow); }
.profile-card span, .profile-card strong { display: block; }
.profile-card span { color: var(--muted); font-size: 10px; }
.profile-card strong { margin-top: 5px; font-size: 17px; }
.account-links { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.account-links a { padding: 9px 14px; border: 1px solid var(--line); border-radius: 8px; font-size: 11px; font-weight: 700; }
.account-links a:hover { color: var(--red); border-color: var(--red); }
.account-links .danger-link { color: #b4232a; }
.account-product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.account-product-card { display: grid; padding: 14px; grid-template-columns: 125px 1fr; gap: 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.account-product-card > img { width: 125px; height: 125px; padding: 8px; object-fit: contain; border-radius: 10px; background: var(--soft); }
.account-product-card h2 { margin: 0 0 8px; font-size: 15px; }
.account-product-actions { display: flex; gap: 7px; margin-top: 14px; }
.account-product-actions form { margin: 0; }
.account-product-actions .button { min-height: 36px; padding: 6px 10px; font-size: 10px; }
.cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
.cart-list { display: grid; gap: 12px; }
.cart-row { display: grid; padding: 13px; grid-template-columns: 90px minmax(0, 1fr) auto; gap: 15px; align-items: center; border: 1px solid var(--line); border-radius: 13px; }
.cart-row > img { width: 90px; height: 90px; padding: 7px; object-fit: contain; border-radius: 9px; background: var(--soft); }
.cart-row h2 { margin: 0 0 5px; font-size: 14px; }
.cart-row small { display: block; color: var(--muted); font-size: 9px; }
.cart-row [data-line-total] { display: block; margin-top: 3px; color: var(--red); }
.cart-row form { display: flex; align-items: center; gap: 6px; }
.cart-row input { width: 65px; padding: 6px; border: 1px solid var(--line); border-radius: 7px; }
.cart-quantity-button {
    display: grid;
    width: 34px;
    height: 34px;
    padding: 0;
    place-items: center;
    color: var(--red);
    border: 1px solid #f1c6c8;
    border-radius: 8px;
    background: #fff5f5;
    cursor: pointer;
    font-size: 18px;
}
.cart-quantity-button:hover { color: #fff; border-color: var(--red); background: var(--red); }
.cart-update-button { min-height: 34px; padding: 5px 9px; font-size: 9px; }
.cart-summary { padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow); position: sticky; top: 120px; }
.cart-summary span, .cart-summary strong { display: block; }
.cart-summary strong { margin-top: 4px; color: var(--red); font-size: 22px; }
.cart-summary p { color: var(--muted); font-size: 10px; line-height: 1.9; }
.whatsapp-checkout { width: 100%; margin-top: 10px; border-color: #25d366; background: #25d366; }

.custom-order-admin-row { display: grid; padding: 16px 18px; grid-template-columns: 1fr auto; gap: 20px; align-items: center; border-bottom: 1px solid var(--line); }
.custom-order-admin-row div { min-width: 0; }
.custom-order-admin-row strong, .custom-order-admin-row a, .custom-order-admin-row small { display: block; }
.custom-order-admin-row a { overflow: hidden; color: var(--green); text-overflow: ellipsis; white-space: nowrap; direction: ltr; text-align: left; }
.custom-order-admin-row small { color: var(--muted); }
.custom-order-admin-row form { display: flex; gap: 7px; }
.custom-order-admin-row select { padding: 7px; border: 1px solid var(--line); border-radius: 7px; }
.category-admin-thumb { width: 45px; height: 45px; margin-left: 9px; float: right; object-fit: contain; border-radius: 7px; background: var(--soft); }

.catalog-feature-page {
    width: min(100% - 32px, 1280px);
    margin: 24px auto 70px;
}
.catalog-feature-hero {
    position: relative;
    min-height: 360px;
    overflow: hidden;
    border: 1px solid #f0eeee;
    border-radius: 18px;
    background: linear-gradient(120deg, #fff 18%, #f8f8f8 100%);
    box-shadow: 0 16px 45px rgba(31, 34, 38, .08);
}
.catalog-feature-hero > img {
    width: 100%;
    height: 360px;
    object-fit: cover;
}
.catalog-feature-hero-copy {
    display: flex;
    margin: 14px 0 0;
    padding: 18px 24px;
    align-items: center;
    gap: 16px;
    border: 1px solid #f0eeee;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(31, 34, 38, .05);
}
.catalog-feature-hero-copy h1 {
    margin: 0;
    font-size: clamp(20px, 2.4vw, 29px);
    line-height: 1.4;
}
.catalog-feature-hero-copy > strong {
    color: var(--red);
    font-size: clamp(18px, 2vw, 25px);
}
.catalog-feature-hero-copy p {
    margin: 0 auto 0 0;
    color: #555b60;
    font-size: 11px;
    line-height: 1.8;
}
.catalog-feature-hero-copy:only-child {
    text-align: center;
}
.catalog-simple-heading { padding: 45px; border-radius: 16px; background: var(--soft); text-align: center; }
.catalog-simple-heading h1 { margin: 0; }
.catalog-feature-list { display: grid; gap: 18px; margin-top: 22px; }
.catalog-feature-product {
    display: grid;
    min-height: 260px;
    overflow: hidden;
    grid-template-columns: minmax(320px, .85fr) 1.15fr;
    border: 1px solid #ece8e8;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 32px rgba(32, 34, 39, .06);
}
.catalog-feature-product.is-reversed { grid-template-columns: 1.15fr minmax(320px, .85fr); }
.catalog-feature-product.is-reversed .catalog-feature-image { order: 2; }
.catalog-feature-image {
    min-height: 260px;
    overflow: hidden;
    background: radial-gradient(circle at 50% 45%, #fff 0, #f6f3f1 62%, #ece7e3 100%);
}
.catalog-feature-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.catalog-feature-copy {
    display: flex;
    padding: clamp(24px, 3.5vw, 46px);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
.catalog-feature-category {
    padding: 4px 11px;
    color: var(--red);
    border: 1px solid #ef9da1;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
}
.catalog-feature-copy h2 { margin: 12px 0 7px; font-size: clamp(19px, 2.2vw, 27px); line-height: 1.45; }
.catalog-feature-copy p { margin: 0; color: #5f6468; font-size: 11px; line-height: 1.9; }
.catalog-feature-copy > small { margin-top: 11px; font-size: 9px; color: var(--muted); }
.catalog-feature-price { display: flex; margin: 8px 0 13px; flex-direction: column; gap: 1px; }
.catalog-feature-price del { color: #999; font-size: 10px; }
.catalog-feature-price strong { color: var(--red); font-size: 16px; }
.catalog-feature-copy .button { min-width: 135px; min-height: 38px; padding: 8px 16px; font-size: 10px; }
.catalog-benefits {
    display: grid;
    margin-top: 30px;
    padding: 25px 18px;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    border: 1px solid #ece8e8;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(32, 34, 39, .06);
}
.catalog-benefits span { padding: 5px 22px; border-left: 1px solid var(--line); }
.catalog-benefits span:last-child { border-left: 0; }
.catalog-benefits strong, .catalog-benefits small { display: block; }
.catalog-benefits strong { color: var(--red); font-size: 13px; }
.catalog-benefits small { margin-top: 5px; color: var(--muted); }
.catalog-admin-form { display: grid; grid-template-columns: minmax(300px, .75fr) minmax(0, 1.25fr); gap: 22px; align-items: start; }
.catalog-admin-hero-preview { width: 100%; height: 180px; object-fit: cover; border-radius: 12px; }
.catalog-picker-tools {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) auto;
    gap: 12px;
    align-items: end;
}
.catalog-search-box span {
    display: block;
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
}
.catalog-picker-actions {
    display: flex;
    gap: 8px;
}
.catalog-picker-actions .button {
    min-height: 38px;
    padding: 7px 12px;
    white-space: nowrap;
    font-size: 10px;
}
.catalog-product-picker { display: grid; gap: 8px; }
.catalog-product-picker [hidden] { display: none !important; }
.catalog-product-picker article {
    display: grid;
    padding: 9px;
    grid-template-columns: minmax(0, 1fr) 85px 65px minmax(260px, .8fr);
    gap: 8px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 10px;
}
.catalog-product-choice { display: flex !important; min-width: 0; flex-direction: row !important; align-items: center; gap: 9px; }
.catalog-product-choice img { width: 90px; height: 90px; padding: 5px; object-fit: contain; border-radius: 10px; background: var(--soft); }
.catalog-product-choice span { min-width: 0; }
.catalog-product-choice strong, .catalog-product-choice small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catalog-active-choice { display: flex !important; flex-direction: row !important; align-items: center; gap: 5px; }
.catalog-image-admin {
    display: grid;
    min-width: 0;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
}
.catalog-image-admin img,
.catalog-image-admin .image-placeholder {
    width: 110px;
    height: 110px;
    object-fit: cover;
    border-radius: 8px;
    background: var(--soft);
}
.catalog-image-admin label {
    min-width: 0;
    margin: 0;
    font-size: 10px;
}
.catalog-image-admin input[type="file"] {
    margin-top: 3px;
    font-size: 9px;
}
.catalog-image-admin .check-row,
.catalog-image-admin small {
    grid-column: 2;
    margin: -3px 0 0;
    color: var(--muted);
    font-size: 9px;
}
.blog-list-page .vlog-card h2 { font-size: 16px; }

@media (max-width: 900px) {
    .vlog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .profile-grid { grid-template-columns: 1fr 1fr; }
    .account-product-grid { grid-template-columns: 1fr; }
    .cart-layout { grid-template-columns: 1fr; }
    .cart-summary { position: static; }
    .catalog-admin-form { grid-template-columns: 1fr; }
    .catalog-picker-tools { grid-template-columns: 1fr; }
    .catalog-picker-actions { flex-wrap: wrap; }
    .catalog-product-picker article { grid-template-columns: minmax(0, 1fr) 80px 65px; }
    .catalog-image-admin { grid-column: 1 / -1; }
    .catalog-feature-hero, .catalog-feature-hero > img { min-height: 320px; height: 320px; }
    .catalog-feature-product { grid-template-columns: minmax(260px, .9fr) 1.1fr; }
    .catalog-feature-product.is-reversed { grid-template-columns: 1.1fr minmax(260px, .9fr); }
    .catalog-benefits { grid-template-columns: repeat(2, 1fr); }
    .catalog-benefits span:nth-child(2) { border-left: 0; }
}

@media (max-width: 680px) {
    .account-dropdown { position: fixed; top: 62px; right: 14px; left: 14px; width: auto; }
    .product-purchase-actions { display: grid; grid-template-columns: 1fr; }
    .product-purchase-actions .button { width: 100%; }
    .brand-select-field { grid-template-columns: 1fr; }
    .brand-add-toggle { width: 100%; }
    .brand-page-header {
        padding: 18px;
        align-items: flex-start;
        flex-direction: column;
    }
    .brand-page-header > img {
        width: 96px;
        height: 96px;
        flex-basis: 96px;
    }
    .vlog-grid, .profile-grid { grid-template-columns: 1fr; }
    .home-vlogs { padding-top: 42px; padding-bottom: 42px; }
    .account-product-card { grid-template-columns: 95px 1fr; }
    .account-product-card > img { width: 95px; height: 95px; }
    .cart-row { grid-template-columns: 70px 1fr; }
    .cart-row > img { width: 70px; height: 70px; }
    .cart-row form { grid-column: 1 / -1; }
    .custom-order-admin-row { grid-template-columns: 1fr; }
    .shop-notice { right: 14px; bottom: 70px; }
    .catalog-feature-page { width: min(100% - 20px, 1280px); margin-top: 12px; }
    .catalog-feature-hero, .catalog-feature-hero > img { min-height: 340px; height: 340px; }
    .catalog-feature-hero > img { object-position: center; }
    .catalog-feature-hero-copy {
        padding: 16px 18px;
        flex-direction: column;
        gap: 5px;
        text-align: center;
    }
    .catalog-feature-hero-copy p { margin: 4px 0 0; }
    .catalog-feature-product, .catalog-feature-product.is-reversed { min-height: 0; grid-template-columns: 1fr; }
    .catalog-feature-product.is-reversed .catalog-feature-image { order: 0; }
    .catalog-feature-image { min-height: 190px; aspect-ratio: 16 / 10; }
    .catalog-feature-image img { width: 100%; height: 100%; max-width: none; padding: 0; }
    .catalog-feature-copy { padding: 22px 18px 25px; }
    .catalog-feature-copy h2 { font-size: 19px; }
    .catalog-benefits { grid-template-columns: 1fr; }
    .catalog-benefits span { border-left: 0; border-bottom: 1px solid var(--line); }
    .catalog-benefits span:last-child { border-bottom: 0; }
    .catalog-product-picker article { grid-template-columns: minmax(0, 1fr) 70px; }
    .catalog-active-choice { grid-column: 1 / -1; }
    .catalog-image-admin { grid-template-columns: 86px minmax(0, 1fr); }
    .catalog-image-admin img,
    .catalog-image-admin .image-placeholder { width: 86px; height: 86px; }
}

.admin-nav a {
    font-size: 13px;
}
.admin-nav a::before {
    font-size: 12px;
}
.site-body .public-nav > a,
.site-body .nav-dropdown > button,
.public-nav > a,
.nav-dropdown > button {
    font-size: 13px;
}
.site-body .nav-dropdown-menu a,
.nav-dropdown-menu a {
    font-size: 13px;
}
.site-body .nav-dropdown-menu small,
.nav-dropdown-menu small {
    font-size: 10px;
}

@media (max-width: 760px) {
    .site-body .public-nav > a,
    .site-body .nav-dropdown > button,
    .public-nav > a,
    .nav-dropdown > button {
        font-size: 13px;
    }
}