@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap');

/* Consolidated stylesheet */
/* --- styles.css --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --page-bg: #f6f5fb;
    --surface: #ffffff;
    --surface-soft: #f5f1ff;
    --border: #e5e0f1;
    --text: #111111;
    --muted: #6c6c6c;
    --accent: #7f42ff;
    --accent-dark: #3850f3;
    --accent-soft: #efe8ff;
    --brand-pink: #ff3ea5;
    --brand-orange: #ffb000;
    --brand-blue: #0f87f2;
    --brand-gradient: linear-gradient(90deg, #7f42ff 0%, #ff3ea5 48%, #ffb000 100%);
    --shadow: 0 18px 40px rgba(17, 17, 17, 0.08);
    --radius-lg: 22px;
    --radius-md: 16px;
    --radius-sm: 12px;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

/* Institutional policy pages */
.policy-body {
    background: #f7f5fc;
}

.policy-page {
    padding-top: clamp(2rem, 5vw, 4rem);
    padding-bottom: clamp(3rem, 7vw, 6rem);
}

.policy-nav {
    display: flex;
    gap: 0.65rem;
    margin-bottom: 1.25rem;
    overflow-x: auto;
    scrollbar-width: none;
}

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

.policy-nav a {
    flex: 0 0 auto;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(125, 61, 255, 0.2);
    border-radius: 12px;
    background: #fff;
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
}

.policy-nav a.active,
.policy-nav a:hover {
    border-color: #7d3dff;
    color: #7134ed;
}

.policy-card {
    max-width: 960px;
    margin: 0 auto;
    padding: clamp(1.4rem, 4vw, 3.5rem);
    border: 1px solid rgba(125, 61, 255, 0.12);
    border-radius: clamp(20px, 3vw, 32px);
    background: #fff;
    box-shadow: 0 24px 70px rgba(48, 26, 88, 0.08);
}

.policy-card h1 {
    margin: 0.35rem 0 0;
    font-size: clamp(2rem, 5vw, 3.6rem);
    line-height: 1.03;
    letter-spacing: -0.045em;
}

.policy-updated {
    margin: 0.8rem 0 2.25rem;
    color: var(--muted);
    font-size: 0.88rem;
}

.policy-card section {
    padding: 1.4rem 0;
    border-top: 1px solid rgba(17, 17, 17, 0.08);
}

.policy-card section:last-child {
    padding-bottom: 0;
}

.policy-card h2 {
    margin: 0 0 0.65rem;
    font-size: clamp(1.08rem, 2vw, 1.3rem);
}

.policy-card p {
    margin: 0;
    color: #55515d;
    line-height: 1.75;
}

.policy-card p + p {
    margin-top: 0.8rem;
}

.policy-card a {
    color: #7134ed;
    font-weight: 700;
}

.policy-table-wrap {
    overflow-x: auto;
    border: 1px solid rgba(17, 17, 17, 0.08);
    border-radius: 16px;
}

.policy-table {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
    text-align: left;
}

.policy-table th,
.policy-table td {
    padding: 1rem;
    border-bottom: 1px solid rgba(17, 17, 17, 0.08);
    vertical-align: top;
}

.policy-table th {
    background: #f5f0ff;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.policy-table td {
    color: #55515d;
    line-height: 1.55;
}

.policy-table tr:last-child td {
    border-bottom: 0;
}

.policy-footer {
    margin-top: 0;
}

@media (max-width: 640px) {
    .policy-nav a {
        padding: 0.68rem 0.85rem;
        font-size: 0.8rem;
    }

    .policy-card {
        border-radius: 20px;
    }
}

body {
    font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
    background:
        radial-gradient(circle at top left, rgba(127, 66, 255, 0.10), transparent 30%),
        radial-gradient(circle at top right, rgba(255, 62, 165, 0.08), transparent 24%),
        radial-gradient(circle at 70% 0%, rgba(15, 135, 242, 0.08), transparent 18%),
        var(--page-bg);
    color: var(--text);
    line-height: 1.55;
    overflow-x: hidden;
}

a {
    color: inherit;
}

.container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

.utility-bar {
    background: linear-gradient(90deg, #111111 0%, #1a1240 52%, #111111 100%);
    color: #f7f4ef;
    font-size: 13px;
}

.utility-bar-marketplace {
    background: linear-gradient(90deg, #111111 0%, #22164d 52%, #111111 100%);
}

.utility-bar-inner {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.utility-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: var(--brand-gradient);
    color: white;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.utility-links {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.utility-links a {
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
}

.utility-links a:hover {
    color: white;
}

header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(17, 17, 17, 0.08);
    box-shadow: 0 8px 32px rgba(17, 17, 17, 0.04);
}

header>.brand-block,
header>.header-actions {
    flex: 0 0 auto;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem 1.25rem;
}

header h1 {
    font-size: clamp(1.45rem, 2.2vw, 2rem);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.site-header {
    display: block;
    padding: 0.7rem 0 0.45rem;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(17, 17, 17, 0.08);
}

.header-shell {
    display: grid;
    grid-template-columns: auto minmax(380px, 1fr) auto;
    gap: 1.35rem;
    align-items: center;
    padding: 0.45rem 1.25rem 0.9rem;
}

.brand-block {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.brand-home {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    text-decoration: none;
    min-width: 0;
    width: 64px;
    height: 64px;
    flex: 0 0 auto;
}

.site-logo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    flex: 0 0 auto;
}

.brand-kicker,
.eyebrow {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
}

.header-subtitle {
    font-size: 13px;
    color: var(--muted);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.marketplace-actions {
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.header-action-link {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    padding: 0;
    transition: color 0.2s ease, transform 0.2s ease;
}

.header-action-link:hover {
    color: var(--brand-pink);
    transform: translateY(-1px);
}

.action-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: inline-grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(127, 66, 255, 0.12), rgba(255, 62, 165, 0.12));
    color: var(--accent-dark);
    border: 1px solid rgba(127, 66, 255, 0.14);
    flex: 0 0 auto;
}

.action-icon svg {
    width: 18px;
    height: 18px;
}

.search-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 48px;
    padding: 0 0.55rem 0 1.2rem;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #e6dff8;
    box-shadow: 0 8px 18px rgba(127, 66, 255, 0.06);
}

.search-bar input {
    border: none;
    outline: none;
    width: 100%;
    font-size: 15px;
    background: transparent;
    color: var(--text);
}

.search-bar input::placeholder {
    color: #9a9a9a;
}

.search-icon {
    color: var(--accent);
    width: 36px;
    height: 36px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    flex: 0 0 auto;
}

.search-icon svg {
    width: 18px;
    height: 18px;
}

.category-nav {
    display: flex;
    gap: 1.5rem;
    flex-wrap: nowrap;
    justify-content: space-between;
    padding: 0.35rem 1.25rem 0.9rem;
    font-weight: 700;
    font-size: 14px;
    overflow-x: auto;
    scrollbar-width: none;
}

.category-nav a {
    text-decoration: none;
    color: var(--text);
    white-space: nowrap;
}

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

.nav-has-menu::after {
    content: "⌄";
    display: inline-block;
    margin-left: 0.28rem;
    font-size: 0.95em;
    line-height: 1;
    transform: translateY(-1px);
}

.category-nav a:hover {
    color: var(--accent);
}

.admin-link {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.cart-icon {
    cursor: pointer;
    position: relative;
    min-width: 56px;
    min-height: 56px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(127, 66, 255, 0.16), rgba(15, 135, 242, 0.14));
    color: #2f3f92;
    border: 1px solid rgba(127, 66, 255, 0.18);
    font-size: 1.05rem;
    transition: transform 0.2s ease, background 0.2s ease;
    text-decoration: none;
}

.cart-icon:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, rgba(127, 66, 255, 0.22), rgba(255, 62, 165, 0.18));
}

.cart-icon svg {
    width: 22px;
    height: 22px;
}

.cart-count {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--brand-gradient);
    color: white;
    border-radius: 999px;
    min-width: 20px;
    height: 20px;
    padding: 0 0.35rem;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 800;
    border: 2px solid white;
}

.btn {
    padding: 0.92rem 1.4rem;
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.01em;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn-primary {
    background: var(--brand-gradient);
    color: white;
    box-shadow: 0 12px 22px rgba(127, 66, 255, 0.22);
}

.btn-primary:hover {
    background: linear-gradient(90deg, #6934f2 0%, #ff2f98 50%, #ff9f00 100%);
    box-shadow: 0 14px 26px rgba(127, 66, 255, 0.28);
}

.btn-secondary {
    background: white;
    border-color: #ddd6f0;
    color: var(--text);
}

.btn-secondary:hover {
    border-color: var(--accent);
}

.page {
    display: none;
}

.page.active {
    display: block;
    animation: fadeIn 0.35s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-section {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
    gap: 1.5rem;
    align-items: stretch;
    margin: 1rem 0 2rem;
}

.hero-visual {
    position: relative;
    min-height: 560px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background:
        radial-gradient(circle at 35% 25%, rgba(90, 84, 255, 0.12), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #f7f6f2 100%);
    border: 1px solid rgba(17, 17, 17, 0.08);
    box-shadow: var(--shadow);
}

.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(1px);
}

.hero-orb-one {
    width: 220px;
    height: 220px;
    right: 76px;
    top: 110px;
    background: rgba(109, 79, 255, 0.9);
}

.hero-orb-two {
    width: 320px;
    height: 320px;
    right: -90px;
    top: 24px;
    background: linear-gradient(180deg, rgba(16, 16, 16, 0.06), rgba(16, 16, 16, 0));
}

.hero-visual-card {
    position: absolute;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(17, 17, 17, 0.08);
    box-shadow: 0 20px 44px rgba(17, 17, 17, 0.08);
    padding: 1.1rem;
}

.hero-visual-card-main {
    left: 1.2rem;
    top: 1.2rem;
    width: calc(100% - 2.4rem);
    height: calc(100% - 2.4rem);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    background:
        radial-gradient(circle at 52% 32%, rgba(109, 79, 255, 0.18), transparent 22%),
        linear-gradient(180deg, #fbfbf9 0%, #f1eee8 100%);
}

.hero-visual-art {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}

.hero-visual-mark {
    width: min(46vw, 320px);
    height: min(46vw, 320px);
    border-radius: 48px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #111111 0%, #2b2b2b 100%);
    color: white;
    font-size: clamp(4rem, 8vw, 7rem);
    font-weight: 900;
    letter-spacing: -0.08em;
    transform: rotate(-12deg);
    box-shadow: 0 22px 44px rgba(17, 17, 17, 0.2);
    opacity: 0.96;
}

.hero-visual-card-main h3,
.hero-visual-card-side h3 {
    position: relative;
    z-index: 1;
    margin-bottom: 0.3rem;
}

.hero-visual-card-main p,
.hero-visual-card-side p {
    position: relative;
    z-index: 1;
    color: var(--muted);
}

.hero-visual-card-main h3 {
    font-size: 1.4rem;
}

.hero-visual-card-side {
    width: 210px;
    min-height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.hero-visual-card-top {
    right: 1.1rem;
    top: 1.6rem;
    transform: rotate(10deg);
}

.hero-visual-card-bottom {
    right: 1.2rem;
    bottom: 1.1rem;
    transform: rotate(-8deg);
}

.hero-visual-card-side .card-tag {
    position: static;
    margin-bottom: 0.65rem;
    align-self: flex-start;
}

.hero-visual-card-side a {
    position: relative;
    z-index: 1;
    margin-top: 0.25rem;
    font-weight: 800;
    text-decoration: none;
    color: var(--accent);
}

.hero-copy,
.hero-showcase,
.info-strip,
.promo-card,
.testimonial-card,
.summary,
.success-box,
.product-card,
.category-card,
.site-footer {
    box-shadow: var(--shadow);
}

.hero-copy {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.88));
    border: 1px solid rgba(17, 17, 17, 0.08);
    border-radius: var(--radius-lg);
    padding: clamp(1.6rem, 4vw, 3rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.2rem;
}

.hero-copy h2,
.section-heading h2 {
    font-size: clamp(2rem, 4vw, 3.3rem);
    line-height: 1.05;
    letter-spacing: -0.05em;
}

.hero-copy p,
.section-heading p,
.promo-card p,
.testimonial-card p,
.site-footer p {
    color: var(--muted);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.hero-badges {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.hero-badge {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.9rem 1rem;
}

.hero-badge strong,
.info-item strong,
.testimonial-card strong,
.site-footer strong {
    display: block;
    font-size: 14px;
    margin-bottom: 0.2rem;
}

.hero-badge span,
.info-item span {
    color: var(--muted);
    font-size: 13px;
}

.hero-showcase {
    display: grid;
    grid-template-columns: 1fr 0.8fr;
    gap: 1rem;
}

.hero-card {
    position: relative;
    overflow: hidden;
    background: white;
    border: 1px solid rgba(17, 17, 17, 0.08);
    border-radius: var(--radius-lg);
    padding: 1.2rem;
}

.hero-card-main {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: linear-gradient(180deg, #ffffff 0%, #fbf7f2 100%);
}

.hero-card-image {
    min-height: 320px;
    border-radius: calc(var(--radius-lg) - 4px);
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 30% 20%, rgba(127, 66, 255, 0.16), transparent 28%),
        radial-gradient(circle at 75% 25%, rgba(255, 62, 165, 0.12), transparent 22%),
        linear-gradient(135deg, #f8f6ff, #ededf8);
    font-size: 5rem;
    margin-bottom: 1rem;
}

.hero-card-image-brand {
    background:
        radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.18), transparent 35%),
        linear-gradient(135deg, #5a54ff, #2e56f4);
}

.hero-card-image-brand span {
    font-size: clamp(3.4rem, 6vw, 4.8rem);
    font-weight: 900;
    letter-spacing: -0.08em;
    color: white;
}

.hero-card-main h3,
.promo-card h3 {
    font-size: 1.4rem;
    line-height: 1.1;
    margin-bottom: 0.4rem;
}

.hero-card-price {
    margin-top: 0.8rem;
    font-size: 1.65rem;
    font-weight: 800;
    color: var(--accent);
}

.hero-card-side {
    background: #111111;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 100%;
    gap: 0.85rem;
}

.hero-card-side p {
    color: rgba(255, 255, 255, 0.74);
}

.hero-card-side a,
.promo-card a {
    color: inherit;
    font-weight: 800;
    text-decoration: none;
}

.card-tag {
    position: absolute;
    top: 1rem;
    left: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem 0.55rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.card-tag.hot {
    background: var(--accent);
    color: white;
}

.info-strip {
    background: white;
    border: 1px solid rgba(17, 17, 17, 0.08);
    border-radius: var(--radius-lg);
    padding: 1rem;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.info-item {
    padding: 1rem;
    border-radius: var(--radius-sm);
    background: var(--surface-soft);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

button,
input,
select,
textarea {
    font-family: inherit;
}

.info-item img {
    width: 50px;
    height: 50px;
    padding: 0.55rem;
    flex: 0 0 auto;
    border-radius: 16px;
    background: rgba(127, 66, 255, 0.1);
    object-fit: contain;
}

.info-item:nth-child(2) img { background: rgba(15, 135, 242, 0.1); }
.info-item:nth-child(3) img { background: rgba(255, 176, 0, 0.14); }
.info-item:nth-child(4) img { background: rgba(37, 211, 102, 0.12); }

.info-item div {
    min-width: 0;
}

.editorial-section,
.testimonials-section,
.page {
    margin-bottom: 2.4rem;
}

.section-heading {
    margin-bottom: 1.2rem;
}

.section-heading h2 {
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    margin-top: 0.15rem;
}

.section-heading p {
    max-width: 66ch;
    margin-top: 0.7rem;
}

.line-icons-section {
    margin-bottom: 2.4rem;
    padding: 1.25rem;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(127, 66, 255, 0.1);
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow);
}

.line-icons-heading {
    margin-bottom: 1rem;
}

.line-icons-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.85rem;
}

.line-icon-card {
    text-decoration: none;
    background: white;
    border: 1px solid rgba(17, 17, 17, 0.08);
    border-radius: 18px;
    padding: 1rem 0.85rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.55rem;
    box-shadow: 0 12px 24px rgba(17, 17, 17, 0.06);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.line-icon-card:hover {
    transform: translateY(-4px);
    border-color: rgba(127, 66, 255, 0.24);
    box-shadow: 0 16px 28px rgba(127, 66, 255, 0.12);
}

.line-icon {
    width: 78px;
    height: 78px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: white;
    background: transparent;
    box-shadow: none;
    overflow: hidden;
    padding: 0;
}

.line-icon svg {
    width: 28px;
    height: 28px;
}

.line-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.line-icon-blue {
    background: linear-gradient(135deg, #0f87f2, #7f42ff);
}

.line-icon-pink {
    background: linear-gradient(135deg, #ff3ea5, #7f42ff);
}

.line-icon-orange {
    background: linear-gradient(135deg, #ffb000, #ff3ea5);
}

.line-icon-violet {
    background: linear-gradient(135deg, #7f42ff, #3850f3);
}

.line-icon-gold {
    background: linear-gradient(135deg, #ffb000, #ff7a18);
}

.line-icon-card strong {
    font-size: 1rem;
    line-height: 1.1;
}

.line-icon-card span {
    color: var(--muted);
    font-size: 0.84rem;
    line-height: 1.3;
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1rem;
}

.category-card {
    min-height: 160px;
    border-radius: var(--radius-lg);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.35rem;
    color: #111;
    border: 1px solid rgba(17, 17, 17, 0.08);
    position: relative;
    overflow: hidden;
}

.category-card::before {
    content: '';
    position: absolute;
    inset: auto -25% -35% auto;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.26);
}

.category-card span {
    font-size: 11px;
    letter-spacing: 0.12em;
    font-weight: 800;
}

.category-card strong {
    font-size: 1.15rem;
    line-height: 1.1;
}

.accent-warm {
    background: linear-gradient(180deg, #f9eee5, #f2d9c8);
}

.accent-cool {
    background: linear-gradient(180deg, #e8f1ff, #d9e6ff);
}

.accent-light {
    background: linear-gradient(180deg, #f8f8f2, #efefe7);
}

.accent-dark {
    background: linear-gradient(180deg, #222222, #404040);
    color: white;
}

.accent-soft {
    background: linear-gradient(180deg, #fff5e8, #fde2bf);
}

.accent-neutral {
    background: linear-gradient(180deg, #f3f2ef, #e5e1da);
}

.promo-grid {
    display: grid;
    grid-template-columns: 1.4fr 0.9fr;
    gap: 1rem;
    margin-bottom: 2.4rem;
}

.promo-card {
    background: white;
    border: 1px solid rgba(17, 17, 17, 0.08);
    border-radius: var(--radius-lg);
    padding: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.promo-card-wide {
    min-height: 230px;
}

.promo-art {
    font-size: 5rem;
    line-height: 1;
}

.promo-card-small {
    background: linear-gradient(135deg, #111111, #2d2d2d);
    color: white;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
}

.promo-card-small p {
    color: rgba(255, 255, 255, 0.72);
}

.instagram-banner-section {
    margin-bottom: 2.4rem;
}

.instagram-banner {
    display: block;
    overflow: hidden;
    border-radius: 22px;
}

.instagram-banner > img {
    display: block;
    width: 100%;
    height: auto;
}

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

.product-card {
    background: white;
    border: 3px solid rgba(127, 66, 255, 0.1);
    border-radius: var(--radius-lg);
    overflow: hidden;
    padding: 0;
    text-align: left;
    transition: border-color 0.25s ease;
}

.product-card:is(:hover, :focus-within, :active) {
    border-color: #7f42ff;
}

.product-card .btn:hover {
    transform: none;
}

.product-card .btn-secondary:hover {
    border-color: #ddd6f0;
    background: #fff;
    color: var(--text);
    box-shadow: none;
}

.product-card .btn-primary:hover {
    background: var(--brand-gradient);
    color: #fff;
    box-shadow: 0 12px 22px rgba(127, 66, 255, 0.22);
}

.product-image {
    min-height: 230px;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 30% 20%, rgba(127, 66, 255, 0.14), transparent 26%),
        radial-gradient(circle at 72% 28%, rgba(255, 62, 165, 0.11), transparent 20%),
        linear-gradient(180deg, #f7f6ff, #ece9f8);
    font-size: 4.4rem;
    position: relative;
    overflow: hidden;
}

.product-image img,
.cart-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.product-placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    padding: 1rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--muted);
    text-align: center;
    background: linear-gradient(180deg, #f7f7f3, #ece9e3);
}

.product-body {
    padding: 1.05rem 1.1rem 1.15rem;
}

.product-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.45rem;
}

.product-category {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.22rem 0.5rem;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(127, 66, 255, 0.10), rgba(255, 62, 165, 0.10));
    color: #5f34e6;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.product-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 22px;
    padding: 0 0.45rem;
    border-radius: 999px;
    background: var(--brand-gradient);
    color: white;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
}

.product-name {
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 0.45rem;
}

.product-link {
    color: inherit;
    text-decoration: none;
    display: block;
}

.product-link:hover {
    color: var(--brand-pink);
}

.product-rating {
    color: var(--brand-orange);
    font-size: 12px;
    margin-bottom: 0.45rem;
}

.product-price-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.product-price {
    font-size: 1.15rem;
    font-weight: 900;
    color: var(--accent);
}

.product-old-price {
    color: #9b9b9b;
    font-size: 0.92rem;
    text-decoration: line-through;
}

.product-actions {
    display: flex;
    gap: 0.65rem;
}

.product-actions .btn {
    flex: 1;
    min-height: 44px;
}

.btn-wishlist {
    width: 44px;
    flex: 0 0 44px !important;
    border-radius: 999px;
    background: var(--surface-soft);
    border-color: var(--border);
    color: var(--text);
}

.cart-item {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: 1.2rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 1rem;
    background: white;
}

.cart-item-image {
    width: 110px;
    height: 110px;
    background: linear-gradient(180deg, #f7f7f3, #ece9e3);
    border-radius: 18px;
    display: grid;
    place-items: center;
    font-size: 3rem;
    overflow: hidden;
}

.cart-item-info {
    min-width: 0;
}

.cart-item-name {
    font-size: 1rem;
    font-weight: 800;
    margin-bottom: 0.25rem;
}

.cart-item-price {
    color: var(--accent);
    font-size: 0.95rem;
    font-weight: 700;
}

.quantity-control {
    display: flex;
    gap: 0.7rem;
    align-items: center;
    margin-top: 1rem;
}

.quantity-control button {
    width: 34px;
    height: 34px;
    border: 1px solid var(--border);
    background: white;
    border-radius: 50%;
    cursor: pointer;
    font-weight: 800;
    font-size: 16px;
}

.quantity-control button:hover {
    background: var(--surface-soft);
}

.quantity-control span {
    min-width: 38px;
    text-align: center;
    font-weight: 700;
}

.remove-btn {
    color: #cb4c4c;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    margin-left: auto;
}

.summary,
.success-box {
    background: white;
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
}

.summary-row,
.summary-total,
.order-detail-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 15px;
}

.summary-row {
    margin-bottom: 0.95rem;
}

.summary-total {
    border-top: 1px solid var(--border);
    padding-top: 0.95rem;
    font-size: 18px;
    font-weight: 900;
}

.form-group {
    margin-bottom: 1.2rem;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 0.65rem;
    color: var(--text);
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 0.95rem 1rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    font-size: 14px;
    font-family: inherit;
    background: white;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: rgba(127, 66, 255, 0.7);
    box-shadow: 0 0 0 4px rgba(127, 66, 255, 0.12);
}

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

.two-column {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 1.4rem;
    margin-bottom: 1.8rem;
}

.card-title {
    font-size: 1.15rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: var(--text);
}

.empty-state {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--muted);
    background: white;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
}

.empty-state p {
    font-size: 16px;
    margin-bottom: 1.2rem;
}

.delivery-option {
    display: flex;
    align-items: center;
    padding: 1rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: 0.85rem;
    cursor: pointer;
    background: white;
    transition: border-color 0.2s, transform 0.2s;
}

.delivery-option:hover {
    border-color: rgba(127, 66, 255, 0.35);
    transform: translateY(-1px);
}

.delivery-option input[type="radio"] {
    margin-right: 1rem;
    cursor: pointer;
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
}

.delivery-info {
    flex: 1;
}

.delivery-type {
    font-weight: 800;
    font-size: 15px;
}

.delivery-time {
    font-size: 13px;
    color: var(--muted);
    margin-top: 0.2rem;
}

.delivery-price {
    font-weight: 800;
    color: var(--accent);
    font-size: 15px;
}

.actions-row {
    display: flex;
    gap: 0.9rem;
    margin-top: 1.4rem;
}

.success-box {
    text-align: center;
    padding: 2.2rem 1.6rem;
}

.success-box h2 {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    line-height: 1.1;
    margin-bottom: 0.75rem;
}

.success-box p {
    color: var(--muted);
    margin-bottom: 0.9rem;
}

.order-details {
    background: var(--surface-soft);
    padding: 1.15rem;
    border-radius: var(--radius-md);
    margin: 1.5rem 0;
    text-align: left;
    border: 1px solid var(--border);
}

.order-detail-row {
    padding: 0.8rem 0;
    border-bottom: 1px solid rgba(17, 17, 17, 0.06);
}

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

.success-status {
    color: #1d7a34;
}

.confirmation-action {
    margin-top: 1.6rem;
}

.testimonials-section {
    padding-bottom: 0.8rem;
}

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

.testimonial-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.2rem;
}

.testimonial-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    font-weight: 800;
    margin-bottom: 0.8rem;
}

.site-footer {
    margin-top: 2rem;
    background: #111111;
    color: white;
    padding: 2.2rem 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 0.8fr 0.8fr;
    gap: 1.2rem;
}

.site-footer p,
.site-footer a {
    color: rgba(255, 255, 255, 0.74);
    text-decoration: none;
}

.site-footer a {
    display: block;
    margin-top: 0.45rem;
}

.site-footer a:hover {
    color: white;
}

.loading {
    text-align: center;
    padding: 2rem;
    color: var(--muted);
}

@media (max-width: 1120px) {

    .hero-section,
    .promo-grid,
    .two-column,
    .testimonial-grid,
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .hero-showcase,
    .category-grid,
    .info-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .line-icons-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {

    .header-actions,
    .actions-row {
        flex-direction: column;
        align-items: stretch;
    }

    .header-shell {
        grid-template-columns: 1fr;
        gap: 0.85rem;
        padding: 0.55rem 1rem 0.85rem;
    }

    .brand-home {
        justify-content: center;
    }

    .search-bar {
        width: 100%;
    }

    .marketplace-actions {
        justify-content: center;
    }

    .header-action-link {
        flex: 1 1 calc(50% - 0.3rem);
        justify-content: flex-start;
    }

    .cart-icon {
        margin-inline: auto;
    }

    .category-nav {
        justify-content: flex-start;
        gap: 0.95rem;
        padding: 0.45rem 1rem 0.85rem;
    }

    .utility-bar-inner {
        padding: 0.7rem 0;
    }

    .utility-links {
        gap: 0.65rem;
    }

    .header-actions .btn,
    .header-actions .cart-icon {
        width: 100%;
    }

    .hero-badges,
    .hero-showcase,
    .category-grid,
    .info-strip,
    .line-icons-grid,
    .products-grid,
    .testimonial-grid {
        grid-template-columns: 1fr;
    }

    .hero-card-image {
        min-height: 240px;
    }

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

    .cart-item-image {
        width: 100%;
        height: 160px;
    }

    .product-actions {
        flex-wrap: wrap;
    }

    .product-actions .btn {
        min-width: 100%;
    }
}

/* --- cart.css --- */
.cart-page {
    padding-top: 1.4rem;
    padding-bottom: 2rem;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--muted);
    font-size: 13px;
    margin-bottom: 1.2rem;
    flex-wrap: wrap;
}

.breadcrumb a {
    text-decoration: none;
}

.cart-hero {
    background: white;
    border: 1px solid rgba(17, 17, 17, 0.08);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 1.4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.4rem;
}

.cart-hero h2 {
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    line-height: 1.05;
    letter-spacing: -0.05em;
    margin: 0.25rem 0 0.55rem;
}

.cart-hero p {
    color: var(--muted);
    max-width: 62ch;
}

.cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.7fr);
    gap: 1.25rem;
    align-items: start;
}

.cart-card,
.summary-card,
.help-card,
.cart-banner {
    background: white;
    border: 1px solid rgba(17, 17, 17, 0.08);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.cart-card {
    padding: 1.2rem;
}

.cart-card-head {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.cart-card h3,
.summary-card h3,
.help-card h3,
.cart-banner h3 {
    font-size: 1.3rem;
    line-height: 1.1;
    margin-top: 0.25rem;
}

.cart-meta {
    padding: 0.45rem 0.7rem;
    border-radius: 999px;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
}

.cart-empty {
    margin-top: 1rem;
}

.summary-column {
    position: relative;
}

.summary-sticky {
    position: sticky;
    top: 100px;
    padding: 1.2rem;
}

.checkout-btn,
.checkout-secondary {
    width: 100%;
    margin-top: 0.85rem;
}

.summary-note {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 13px;
}

.summary-note strong {
    display: block;
    margin-bottom: 0.2rem;
    color: var(--text);
}

.cart-help {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.help-card {
    padding: 1.1rem;
}

.help-card.light {
    background: var(--surface-soft);
}

.help-card p {
    color: var(--muted);
    margin-top: 0.35rem;
}

.help-card a {
    display: inline-block;
    margin-top: 0.75rem;
    font-weight: 800;
    text-decoration: none;
}

.cart-banner-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 1rem;
    margin-top: 1.4rem;
}

.cart-banner {
    min-height: 200px;
    padding: 1.25rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.cart-banner.dark {
    background: linear-gradient(135deg, #111111, #2a2a2a);
    color: white;
}

.cart-banner.light {
    background: linear-gradient(135deg, #f7efe6, #efe4d8);
}

.cart-banner p {
    color: inherit;
    opacity: 0.8;
}

.cart-banner a {
    align-self: center;
    font-weight: 800;
    text-decoration: none;
}

.cart-item {
    grid-template-columns: 110px minmax(0, 1fr) auto;
}

@media (max-width: 1120px) {

    .cart-layout,
    .cart-banner-grid,
    .cart-help {
        grid-template-columns: 1fr;
    }

    .summary-sticky {
        position: static;
    }
}

@media (max-width: 768px) {
    .cart-hero {
        flex-direction: column;
        align-items: flex-start;
    }

    .cart-card-head {
        flex-direction: column;
    }

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

/* --- checkout.css --- */
.checkout-page {
    padding-top: 1.4rem;
    padding-bottom: 2rem;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--muted);
    font-size: 13px;
    margin-bottom: 1.2rem;
    flex-wrap: wrap;
}

.breadcrumb a {
    text-decoration: none;
}

.checkout-hero {
    background: white;
    border: 1px solid rgba(17, 17, 17, 0.08);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 1.4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.4rem;
}

.checkout-hero h2 {
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    line-height: 1.05;
    letter-spacing: -0.05em;
    margin: 0.25rem 0 0.55rem;
}

.checkout-hero p {
    color: var(--muted);
    max-width: 68ch;
}

.checkout-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
    gap: 1.25rem;
    align-items: start;
}

.checkout-form-column {
    display: grid;
    gap: 1rem;
}

.checkout-card,
.order-box,
.payment-option,
.terms-box,
.trust-mini,
.checkout-banner {
    background: white;
    border: 1px solid rgba(17, 17, 17, 0.08);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.checkout-card {
    padding: 1.2rem;
}

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

.notice-text a {
    color: var(--accent-dark);
    font-weight: 800;
    text-decoration: none;
}

.coupon-row {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.85rem;
}

.coupon-row input {
    flex: 1;
}

.coupon-feedback {
    margin-top: 0.6rem;
    font-size: 13px;
    color: var(--muted);
    min-height: 18px;
}

.checkout-card textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 0.95rem 1rem;
    font: inherit;
    resize: vertical;
}

.checkout-card textarea:focus {
    outline: none;
    border-color: rgba(240, 90, 40, 0.7);
    box-shadow: 0 0 0 4px rgba(240, 90, 40, 0.12);
}

.checkout-summary-column {
    position: relative;
}

.summary-sticky {
    position: sticky;
    top: 100px;
    padding: 1.2rem;
}

.order-box {
    margin-top: 0.8rem;
    padding: 1rem;
    background: var(--surface-soft);
}

.order-box-head,
.order-line {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.order-box-head {
    font-size: 13px;
    font-weight: 800;
    color: var(--muted);
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--border);
}

#checkoutOrderItems {
    display: grid;
    gap: 0.6rem;
    padding: 0.8rem 0;
}

.checkout-item-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 13px;
    color: var(--text);
}

.checkout-item-row span:last-child {
    font-weight: 800;
}

.order-line {
    padding-top: 0.8rem;
    margin-top: 0.6rem;
    border-top: 1px solid var(--border);
    align-items: center;
}

.total-line {
    font-size: 18px;
}

.payment-methods {
    margin-top: 1rem;
}

.payment-option {
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
    padding: 1rem;
    margin-top: 0.75rem;
}

.payment-option input {
    margin-top: 0.2rem;
    accent-color: var(--accent);
}

.payment-option strong {
    display: block;
    margin-bottom: 0.1rem;
}

.payment-option span {
    color: var(--muted);
    font-size: 13px;
}

.credit-fields {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.terms-box {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 1rem;
    margin-top: 1rem;
}

.terms-box input {
    margin-top: 0.2rem;
    accent-color: var(--accent);
}

.place-order-btn {
    width: 100%;
    margin-top: 1rem;
}

.trust-mini-grid {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.trust-mini {
    padding: 0.85rem;
    background: var(--surface-soft);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    border-radius: 12px;
}

.postcode-feedback {
    display: block;
    min-height: 1.2rem;
    margin-top: 0.45rem;
    color: var(--muted);
    font-size: 0.78rem;
}

.postcode-feedback[data-state="loading"] {
    color: var(--accent-dark);
}

.postcode-feedback[data-state="success"] {
    color: #008f4c;
    font-weight: 700;
}

.postcode-feedback[data-state="error"] {
    color: #c43131;
    font-weight: 700;
}

.terms-box a {
    color: var(--accent-dark);
    font-weight: 700;
}

.product-category-box {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 0.75rem;
    padding: 0.65rem 0.8rem;
    border: 1px solid rgba(127, 66, 255, 0.28);
    border-radius: 13px;
    background: linear-gradient(135deg, rgba(127, 66, 255, 0.11), rgba(214, 190, 255, 0.18));
}

.product-category-box > strong {
    overflow: hidden;
    color: #6933e8;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.3;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.product-stock-row {
    justify-content: flex-end;
    margin-top: -0.2rem;
}

.product-card:is(:hover, :focus-within, :active) .product-category-box {
    border-color: rgba(127, 66, 255, 0.46);
}

.trust-mini img {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    object-fit: contain;
}

.checkout-banner-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 1rem;
    margin-top: 1.4rem;
}

.checkout-banner {
    min-height: 210px;
    padding: 1.25rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.checkout-banner.dark {
    background: linear-gradient(135deg, #111111, #2a2a2a);
    color: white;
}

.checkout-banner.light {
    background: linear-gradient(135deg, #f7efe6, #efe4d8);
}

.checkout-banner p {
    color: inherit;
    opacity: 0.8;
}

.checkout-banner a {
    align-self: center;
    font-weight: 800;
    text-decoration: none;
}

@media (max-width: 1120px) {

    .checkout-layout,
    .checkout-banner-grid {
        grid-template-columns: 1fr;
    }

    .summary-sticky {
        position: static;
    }
}

@media (max-width: 768px) {
    .checkout-hero {
        flex-direction: column;
        align-items: flex-start;
    }

    .coupon-row,
    .trust-mini-grid {
        grid-template-columns: 1fr;
        flex-direction: column;
    }
}

/* --- produto.css --- */
.product-page {
    padding-top: 1.4rem;
    padding-bottom: 2rem;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--muted);
    font-size: 13px;
    margin-bottom: 1.2rem;
    flex-wrap: wrap;
}

.breadcrumb a {
    text-decoration: none;
}

.product-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
    gap: 1.4rem;
    margin-bottom: 2rem;
}

.gallery-panel,
.summary-panel,
.tab-box,
.review-summary,
.review-card,
.related-card,
.info-banner,
.product-footer {
    background: white;
    border: 1px solid rgba(17, 17, 17, 0.08);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.gallery-panel {
    padding: 1rem;
}

.main-image {
    min-height: 560px;
    border-radius: calc(var(--radius-lg) - 4px);
    background:
        radial-gradient(circle at 30% 20%, rgba(240, 90, 40, 0.16), transparent 28%),
        linear-gradient(180deg, #faf8f5, #ece8e1);
    display: grid;
    place-items: center;
    font-size: clamp(5rem, 14vw, 10rem);
    margin-bottom: 1rem;
    overflow: hidden;
}

.main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.main-placeholder,
.thumb-placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    padding: 1rem;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--muted);
    background: linear-gradient(180deg, #f7f4ee, #ece8e1);
}

.thumb-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.7rem;
}

.thumb {
    min-height: 92px;
    border-radius: 14px;
    background: linear-gradient(180deg, #f6f4ef, #ece8e1);
    display: grid;
    place-items: center;
    font-size: 2.2rem;
    border: 1px solid var(--border);
    overflow: hidden;
}

.thumb.active {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(240, 90, 40, 0.1);
}

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

.summary-panel {
    padding: 1.5rem;
}

.product-topline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.65rem;
    color: var(--muted);
}

.product-status {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.product-status.hot {
    background: var(--accent);
    color: white;
}

.product-status.muted {
    padding: 0;
    background: transparent;
    color: var(--muted);
    letter-spacing: 0;
    text-transform: none;
}

.product-top-divider {
    color: #aaa;
    font-size: 12px;
}

.summary-panel h1 {
    max-width: 24ch;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.18;
    letter-spacing: 0;
    margin-bottom: 0.35rem;
}

.product-rating-summary { align-items: center; gap: 5px; color: #737373; font-size: 14px; margin-bottom: 0.25rem; }
.product-rating-summary:not([hidden]) { display: flex; }
.product-stars { color: #3483fa; font-size: 17px; letter-spacing: -2px; }
.ml-price-block { color: #222; margin: 0.25rem 0 1.45rem; }
.ml-original-price { display: block; min-height: 19px; color: #8c8c8c; font-size: 16px; line-height: 19px; }
.ml-current-price-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.ml-current-price { display: inline-flex; align-items: flex-start; color: #222; font-size: 28px; font-weight: 600; line-height: 1.08; letter-spacing: 0; }
.ml-price-currency { margin-right: 5px; }
.ml-current-price sup { font-size: 14px; line-height: 1; margin-top: 3px; }
.ml-discount-badge, .ml-free-shipping { background: #00a650; color: #fff; font-weight: 700; }
.ml-discount-badge { border-radius: 2px; padding: 1px 3px; font-size: 14px; }
.ml-pix-label { color: #00a650; font-size: 14px; font-weight: 600; }
.ml-other-price { margin: 3px 0 4px; font-size: 14px; }
.ml-payment-link { color: #3483fa; font-size: 14px; }
.payment-methods-highlight,
.shipping-origin-highlight {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 1rem;
    padding: 13px 15px;
    border: 1px solid rgba(16, 185, 154, 0.25);
    border-radius: 14px;
    background: linear-gradient(135deg, #f7fffc, #edfbf7);
}

.payment-methods-icon,
.shipping-origin-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    padding: 10px;
    border-radius: 50%;
    background: rgba(16, 185, 154, 0.14);
}

.payment-methods-icon img,
.shipping-origin-icon img { width: 100%; height: 100%; object-fit: contain; }
.payment-methods-copy { display: flex; flex: 1 1 auto; flex-direction: column; gap: 5px; min-width: 0; }
.payment-methods-copy > strong { color: #17211f; font-size: 15px; line-height: 1.25; }
.payment-methods-highlight .icons-payments { gap: 5px; }
.payment-methods-highlight .image-icon-payment { width: 31px; height: 22px; padding: 1px; border-radius: 4px; }
.shipping-origin-copy { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
.shipping-origin-copy span { color: #16866f; font-size: 10px; font-weight: 800; letter-spacing: 0.11em; }
.shipping-origin-copy strong { color: #17211f; font-size: 15px; line-height: 1.25; }
.shipping-origin-highlight .ml-free-shipping { flex: 0 0 auto; border-radius: 4px; padding: 4px 6px; font-size: 11px; line-height: 1.15; }

@media (max-width: 560px) {
    .shipping-origin-highlight { align-items: flex-start; flex-wrap: wrap; }
    .shipping-origin-highlight .ml-free-shipping { margin-left: 54px; }
}

.rating-row,
.price-range,
.support-strip,
.purchase-row,
.payment-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.rating-row {
    color: var(--muted);
    font-size: 13px;
    margin-bottom: 1rem;
}

.stars {
    color: #d39a00;
    letter-spacing: 0.08em;
}

.price-range {
    margin-bottom: 1rem;
    padding: 0;
    gap: 0.5rem;
    background: transparent;
    border: 0;
}

.price-range strong {
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    line-height: 1;
    letter-spacing: -0.045em;
}

.product-pix-copy {
    padding: 0.2rem 0.45rem;
    border-radius: 4px;
    background: #079447;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

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

.product-description {
    color: var(--muted);
    margin-bottom: 1rem;
}

.support-strip {
    margin-bottom: 1rem;
}

.support-item {
    flex: 1 1 240px;
    padding: 0.95rem 1rem;
    border-radius: 14px;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    font-size: 13px;
}

.product-payment-list {
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: linear-gradient(135deg, #fff, var(--surface-soft));
}

.methods-payment {
    margin-bottom: 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
}

.tittle-payments {
    margin-bottom: 0.75rem;
    color: var(--text);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.icons-payments {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.image-icon-payment {
    display: block;
    width: 44px;
    height: 30px;
    padding: 2px;
    border: 1px solid rgba(17, 17, 17, 0.08);
    border-radius: 5px;
    background: #fff;
    object-fit: contain;
}

.product-payment-title {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.85rem;
}

.product-payment-title img {
    width: 32px;
    height: 32px;
    padding: 0.35rem;
    border-radius: 10px;
    background: rgba(127, 66, 255, 0.1);
    object-fit: contain;
}

.product-payment-list ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
    list-style: none;
}

.payment-brand-logo {
    width: 70px;
    height: 36px;
    padding: 0.2rem;
    flex: 0 0 auto;
    border: 1px solid rgba(17, 17, 17, 0.08);
    border-radius: 8px;
    background: #eee;
    object-fit: contain;
}

.product-payment-list li {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: #444;
    font-size: 13px;
}

.payment-method-mark {
    min-width: 36px;
    height: 25px;
    padding: 0 0.35rem;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 7px;
    background: var(--brand-gradient);
    color: #fff;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.04em;
}

@media (max-width: 520px) {
    .product-payment-list ul {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .product-payment-list li {
        flex-direction: column;
        align-items: flex-start;
        font-size: 12px;
    }

    .payment-brand-logo {
        width: 100%;
        max-width: 78px;
    }
}

.variant-group {
    margin: 1rem 0;
}

.variant-group label {
    display: block;
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 0.7rem;
}

.variant-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.color-swatch {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--swatch-color);
    box-shadow: 0 0 0 1px #b8b8c2;
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.color-swatch:hover { transform: scale(1.08); }

.color-swatch.active {
    box-shadow: 0 0 0 3px var(--accent);
    transform: scale(1.06);
}

.color-swatch:focus-visible {
    outline: 3px solid rgba(52, 131, 250, 0.35);
    outline-offset: 4px;
}

.pill {
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 42px;
    padding: 0;
    border-radius: 11px;
    border: 1px solid var(--border);
    background: white;
    font-size: 13px;
    cursor: pointer;
    user-select: none;
}

.pill.active {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent-dark);
    font-weight: 700;
}

.purchase-row {
    margin: 1.1rem 0;
}

.quantity-box {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid var(--border);
    overflow: hidden;
    background: white;
}

.quantity-box button {
    width: 44px;
    height: 44px;
    border: none;
    background: white;
    font-size: 18px;
    font-weight: 800;
    cursor: pointer;
}

.quantity-box span {
    min-width: 42px;
    text-align: center;
    font-weight: 800;
}

.purchase-btn {
    min-height: 46px;
    flex: 1 1 170px;
    white-space: nowrap;
}

.buy-now-purchase {
    background: var(--brand-gradient);
    border-color: transparent;
    box-shadow: 0 10px 24px rgba(127, 66, 255, 0.2);
}

.add-cart-purchase:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.wishlist-btn {
    min-height: 46px;
}

.payment-strip {
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 13px;
}

.payment-icons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.payment-icons span {
    padding: 0.4rem 0.6rem;
    border-radius: 999px;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    font-weight: 700;
}

.trust-grid {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.purchase-info {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.8rem;
}

.purchase-info-card {
    min-height: 158px;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: linear-gradient(145deg, #fff, var(--surface-soft));
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.purchase-info-card:hover {
    transform: translateY(-2px);
    border-color: rgba(127, 66, 255, 0.3);
    box-shadow: 0 12px 26px rgba(17, 17, 17, 0.07);
}

.shipping-info-card {
    background: linear-gradient(145deg, #fff, #edfdf8);
}

.purchase-card-icon {
    width: 52px;
    height: 52px;
    padding: 0.65rem;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 15px;
    background: rgba(127, 66, 255, 0.1);
}

.shipping-info-card .purchase-card-icon {
    background: rgba(16, 185, 154, 0.12);
}

.purchase-card-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.purchase-card-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

.purchase-info-card .icons-payments {
    margin-top: 0.4rem;
    gap: 0.28rem;
}

.purchase-info-card .image-icon-payment {
    width: 31px;
    height: 22px;
    padding: 1px;
    border-radius: 4px;
}

.purchase-card-label {
    color: var(--muted);
    font-size: 12px;
}

.purchase-card-content strong {
    font-size: 15px;
    line-height: 1.25;
}

.purchase-info-row {
    display: grid;
    grid-template-columns: 96px minmax(82px, auto) minmax(0, 1fr);
    align-items: center;
    gap: 0.85rem;
    min-height: 46px;
    color: #444;
    font-size: 14px;
}

.purchase-info-label {
    color: var(--muted);
    line-height: 1.15;
}

.purchase-info-link {
    width: fit-content;
    padding: 0;
    border: 0;
    background: transparent;
    color: #0759b7;
    font: inherit;
    cursor: pointer;
    text-align: left;
}

.shipping-origin-row,
.shipping-price-row {
    grid-template-columns: 96px 20px 78px minmax(0, 1fr) auto;
}

.purchase-info-icon {
    width: 20px;
    height: 20px;
    color: #10b99a;
}

.purchase-info-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.purchase-info-chevron {
    color: var(--muted);
    font-size: 24px;
}

.shipping-old-price {
    color: #999;
    text-decoration: line-through;
}

@media (max-width: 520px) {
    .purchase-info {
        grid-template-columns: 1fr;
    }

    .purchase-info-card {
        min-height: 135px;
    }

    .purchase-info-row,
    .shipping-origin-row,
    .shipping-price-row {
        grid-template-columns: 82px minmax(0, 1fr);
        gap: 0.45rem 0.75rem;
        padding: 0.45rem 0;
    }

    .purchase-info-link,
    .shipping-origin-row strong,
    .shipping-price-row strong {
        grid-column: 2;
    }

    .shipping-origin-row .purchase-info-icon,
    .shipping-origin-row > span:nth-child(3),
    .shipping-price-row > span:nth-child(2),
    .shipping-price-row > span:nth-child(3),
    .purchase-info-chevron {
        display: none;
    }

    .shipping-price-row .shipping-old-price {
        grid-column: 2;
    }
}

.trust-card {
    padding: 0.9rem;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.trust-card img {
    width: 40px;
    height: 40px;
    padding: 0.4rem;
    flex: 0 0 auto;
    border-radius: 12px;
    background: #fff;
    object-fit: contain;
}

.trust-card strong {
    display: block;
    font-size: 13px;
    margin-bottom: 0.2rem;
}

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

.product-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}

.tab-box {
    padding: 1.4rem;
}

.tab-box h2 {
    font-size: 1.35rem;
    margin: 0.3rem 0 0.8rem;
    letter-spacing: -0.03em;
}

.details-table {
    width: 100%;
    border-collapse: collapse;
}

.details-table td {
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

.details-table td:first-child {
    width: 36%;
    font-weight: 800;
}

.reviews-section,
.related-section {
    margin-bottom: 2rem;
}

.testimonials-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.testimonial-demo-label { flex: 0 0 auto; padding: 0.4rem 0.65rem; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); background: rgba(255, 255, 255, 0.72); font-size: 10px; font-weight: 700; }
.testimonial-carousel { width: 100%; overflow: hidden; }
.product-testimonials { display: flex; gap: 1rem; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; }
.product-testimonials::-webkit-scrollbar { display: none; }
.product-testimonial-card { flex: 0 0 calc((100% - 3rem) / 4); min-width: 0; padding: 1.15rem; border: 1px solid var(--border); border-radius: 18px; background: #fff; box-shadow: 0 12px 28px rgba(41, 22, 78, 0.06); scroll-snap-align: start; }
.testimonial-card-top { display: flex; align-items: center; gap: 0.7rem; }
.testimonial-card-top > div { display: flex; flex-direction: column; }
.testimonial-card-top strong { font-size: 14px; }
.testimonial-card-top small { color: var(--muted); font-size: 11px; }
.testimonial-avatar-photo { width: 46px; height: 46px; flex: 0 0 46px; border: 2px solid #fff; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgba(127, 66, 255, 0.2); }
.testimonial-source { width: fit-content; margin-top: 2px; font-weight: 700; }
.testimonial-source.instagram { color: #c13584; }
.testimonial-source.whatsapp { color: #128c56; }
.testimonial-source.facebook { color: #1877f2; }
.testimonial-stars { margin-top: 0.85rem; color: #ffb000; font-size: 15px; letter-spacing: 1px; }
.product-testimonial-card p { margin-top: 0.55rem; color: #56515f; font-size: 13px; line-height: 1.6; }

@media (max-width: 960px) {
    .product-testimonial-card { flex-basis: calc((100% - 1rem) / 2); }
}

@media (max-width: 560px) {
    .testimonials-heading { align-items: flex-start; flex-direction: column; }
    .product-testimonial-card { flex-basis: 100%; }
}

.review-summary {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 1rem;
    padding: 1.2rem;
    margin-bottom: 1rem;
}

.review-score strong {
    display: block;
    font-size: 3rem;
    line-height: 1;
}

.review-score span {
    color: var(--muted);
    font-size: 13px;
}

.review-bars {
    display: grid;
    gap: 0.65rem;
}

.review-bars>div {
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 0.6rem;
    align-items: center;
    font-size: 13px;
}

.bar {
    height: 10px;
    background: #ebe7e1;
    border-radius: 999px;
    overflow: hidden;
}

.bar i {
    display: block;
    height: 100%;
    background: var(--accent);
}

.review-list,
.related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.review-card,
.related-card {
    padding: 1.1rem;
}

.review-card strong,
.related-card strong {
    display: block;
    margin-bottom: 0.25rem;
}

.review-card span,
.related-card span {
    color: var(--muted);
    font-size: 12px;
}

.review-card p {
    color: var(--muted);
    margin-top: 0.7rem;
}

.related-card {
    overflow: hidden;
}

.related-thumb {
    min-height: 220px;
    border-radius: 14px;
    background: linear-gradient(180deg, #f7f4ee, #ece8e1);
    display: grid;
    place-items: center;
    font-size: 4rem;
    margin-bottom: 0.85rem;
    overflow: hidden;
}

.related-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.related-card .btn {
    width: 100%;
    margin-top: 0.85rem;
}

.banner-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.info-banner {
    min-height: 220px;
    padding: 1.3rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.info-banner.dark {
    background: linear-gradient(135deg, #111111, #2a2a2a);
    color: white;
}

.info-banner.light {
    background: linear-gradient(135deg, #f7efe6, #efe4d8);
}

.info-banner p {
    color: inherit;
    opacity: 0.8;
}

.info-banner a {
    align-self: center;
    font-weight: 800;
    text-decoration: none;
}

.product-footer {
    margin-top: 2rem;
    background: #111111;
    color: white;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    box-shadow: none;
    padding: 2rem 0;
}

.product-footer p,
.product-footer a {
    color: rgba(255, 255, 255, 0.74);
    text-decoration: none;
}

.product-footer a {
    display: block;
    margin-top: 0.45rem;
}

.product-footer a:hover {
    color: white;
}

@media (max-width: 1120px) {

    .product-hero,
    .product-tabs,
    .review-summary,
    .banner-grid {
        grid-template-columns: 1fr;
    }

    .review-list,
    .related-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

@media (max-width: 768px) {
    .product-page {
        padding-top: 1rem;
    }

    .main-image {
        min-height: 360px;
    }

    .thumb-grid,
    .review-list,
    .related-grid,
    .trust-grid {
        grid-template-columns: 1fr;
    }

    .purchase-row {
        flex-direction: column;
        align-items: stretch;
    }

    .quantity-box,
    .purchase-btn,
    .wishlist-btn {
        width: 100%;
    }

    .summary-panel,
    .tab-box,
    .review-summary,
    .review-card,
    .related-card,
    .info-banner {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* --- produtos\admin.css --- */
.admin-layout {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 2rem;
}

.admin-card {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #ddd;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(8px);
}

.admin-table-card {
    grid-column: 1 / -1;
}

.admin-table-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.backend-sync {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid #e4e4ef;
    border-radius: 14px;
    background: #faf9ff;
}

.backend-sync input {
    min-height: 44px;
}

#syncBackendStatus {
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

.admin-table-filters {
    display: flex;
    gap: 0.85rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.admin-filter-group {
    min-width: 180px;
    margin-bottom: 0;
}

.admin-filter-group label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 12px;
    font-weight: 700;
    color: #4a4a69;
}

.admin-filter-group select {
    width: 100%;
}

.admin-table-wrap {
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 860px;
    background: white;
    border: 1px solid #e4e4ef;
    border-radius: 14px;
    overflow: hidden;
    table-layout: fixed;
}

.admin-table thead {
    background: linear-gradient(90deg, rgba(127, 66, 255, 0.08), rgba(255, 62, 165, 0.06));
}

.admin-table th,
.admin-table td {
    padding: 0.9rem 0.85rem;
    border-bottom: 1px solid #ececf5;
    text-align: left;
    vertical-align: top;
    font-size: 13px;
    overflow: hidden;
}

.admin-table th:nth-child(7),
.admin-table td:nth-child(7) {
    width: 140px;
}

.admin-table td:last-child {
    white-space: nowrap;
}

.admin-table td:last-child>* {
    margin-right: 0.5rem;
}

.admin-table td:last-child>*:last-child {
    margin-right: 0;
}

.admin-table th {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #4a4a69;
}

.admin-table tbody tr:hover {
    background: rgba(127, 66, 255, 0.03);
}

.admin-empty-row {
    text-align: center;
    color: #666;
    padding: 2rem 1rem;
}

.product-table-name {
    font-weight: 700;
    color: #111;
}

.product-table-note {
    margin-top: 0.2rem;
    color: #666;
    font-size: 12px;
    line-height: 1.35;
}

.admin-status {
    min-height: 1.5rem;
    margin-top: 0.75rem;
    font-weight: 600;
    color: #667eea;
}

.admin-actions {
    display: flex;
    justify-content: flex-start;
}

.stock-builder {
    margin: 1.2rem 0 1.4rem;
    padding: 1rem;
    border-radius: 16px;
    border: 1px solid #e5e5f2;
    background: linear-gradient(180deg, rgba(103, 126, 234, 0.05), rgba(118, 75, 162, 0.03));
}

.stock-builder-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.stock-builder-head label {
    font-size: 13px;
    font-weight: 800;
    color: #222;
}

.stock-builder-help {
    margin-bottom: 0.9rem;
    color: #666;
    font-size: 12px;
    line-height: 1.45;
}

.stock-rows {
    display: grid;
    gap: 0.75rem;
}

.stock-color-group {
    padding: 0.85rem;
    border-radius: 14px;
    border: 1px solid #e4e4f4;
    background: rgba(255, 255, 255, 0.92);
}

.stock-color-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.stock-color-group-head strong {
    font-size: 13px;
    color: #222;
}

.stock-color-group-head span {
    font-size: 11px;
    color: #666;
}

.stock-color-group-rows {
    display: grid;
    gap: 0.65rem;
}

.stock-row {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(110px, 0.7fr) minmax(120px, 0.8fr) 36px;
    gap: 0.8rem;
    align-items: end;
    padding: 0.85rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid #e7e7f3;
}

.stock-row.grouped {
    border-color: #ececff;
    background: #fff;
}

.stock-row .form-group {
    margin-bottom: 0;
}

.stock-row-actions {
    display: flex;
    gap: 0.35rem;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.stock-row-add-size {
    border: 1px solid rgba(103, 126, 234, 0.35);
    background: rgba(103, 126, 234, 0.08);
    color: #4d5ada;
    border-radius: 999px;
    padding: 0.45rem 0.7rem;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

.stock-row-add-size:hover {
    background: rgba(103, 126, 234, 0.14);
}

.stock-row-remove {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: #fff1f1;
    color: #c0392b;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.stock-summary {
    display: grid;
    gap: 0.45rem;
}

.stock-summary strong {
    font-size: 12px;
    color: #1f1f33;
}

.stock-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.stock-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    background: #f4f5ff;
    color: #4d5ada;
    font-size: 11px;
    font-weight: 700;
}

.stock-summary-empty {
    color: #777;
    font-size: 12px;
}

.gallery-preview-wrap {
    margin-bottom: 1.4rem;
}

.preview-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 0.65rem;
    color: #333;
}

.gallery-preview {
    width: 100%;
    min-height: 180px;
    border-radius: 16px;
    border: 1px dashed #cfcfcf;
    background: linear-gradient(135deg, #fafafa 0%, #f0f0f0 100%);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.75rem;
    overflow: hidden;
    color: #777;
    text-align: center;
    padding: 1rem;
}

.gallery-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gallery-preview.has-image {
    border-style: solid;
    color: transparent;
}

.gallery-preview .empty-gallery {
    grid-column: 1 / -1;
    align-self: center;
    justify-self: center;
}

.gallery-thumb {
    position: relative;
    min-height: 120px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #ddd;
    background: #fff;
}

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

.gallery-thumb button {
    position: absolute;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.72);
    color: white;
    cursor: pointer;
    font-weight: 700;
}

.gallery-thumb>button[data-pending-index] {
    top: 0.45rem;
    right: 0.45rem;
}

.gallery-thumb-actions {
    position: absolute;
    left: 0.45rem;
    right: 0.45rem;
    bottom: 0.45rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    pointer-events: none;
}

.gallery-thumb-actions button {
    position: static;
    width: 28px;
    height: 28px;
    pointer-events: auto;
}

.gallery-thumb-actions span,
.product-image-order span {
    min-width: 28px;
    height: 28px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    color: #222;
    font-size: 11px;
    font-weight: 800;
}

.gallery-thumb .thumb-label {
    position: absolute;
    left: 0.45rem;
    bottom: 0.45rem;
    background: rgba(255, 255, 255, 0.88);
    padding: 0.25rem 0.45rem;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.product-list {
    display: grid;
    gap: 1rem;
}

.product-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 12px;
    background: white;
}

.product-list-main {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

.product-placeholder {
    width: 100%;
    padding: 0.75rem;
    text-align: center;
    font-size: 12px;
    line-height: 1.3;
    color: #777;
}

.product-meta {
    min-width: 0;
}

.product-meta strong {
    display: block;
    font-size: 16px;
    margin-bottom: 0.25rem;
}

.product-meta span {
    color: #667eea;
    font-weight: 600;
}

.product-admin-link {
    display: block;
    margin-top: 0.35rem;
    font-size: 12px;
    font-weight: 700;
    color: #111;
    text-decoration: none;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
}

.product-admin-link:hover {
    color: #667eea;
}

.product-edit-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border: none;
    padding: 0.65rem 0.95rem;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 700;
    font-size: 12px;
    box-shadow: 0 8px 18px rgba(103, 126, 234, 0.22);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.product-edit-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.02);
    box-shadow: 0 10px 22px rgba(103, 126, 234, 0.28);
}

.product-edit-btn:active {
    transform: translateY(0);
    box-shadow: 0 6px 14px rgba(103, 126, 234, 0.2);
}

.product-private-note {
    margin-top: 0.5rem;
    padding: 0.7rem 0.8rem;
    border-radius: 12px;
    border: 1px solid #f0d8a8;
    background: #fff8eb;
    color: #6b4e12;
    font-size: 12px;
    line-height: 1.45;
}

.product-private-note strong {
    display: inline;
    margin-right: 0.25rem;
    color: #8a6110;
}

.product-image-strip {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 0.6rem;
    margin-top: 0.8rem;
}

.product-image-thumb {
    position: relative;
    min-height: 72px;
    border-radius: 12px;
    overflow: hidden;
    background: #f7f7f7;
    border: 1px solid #e4e4e4;
}

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

.product-image-order {
    position: absolute;
    left: 0.35rem;
    right: 0.35rem;
    bottom: 0.35rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.25rem;
    pointer-events: none;
}

.product-image-order button {
    pointer-events: auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    cursor: pointer;
    font-weight: 700;
    line-height: 1;
}

.product-image-thumb .remove-image-btn {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.product-no-images {
    color: #777;
    font-size: 12px;
}

.product-category-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.35rem;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    background: #f5f7ff;
    color: #4c5bd4;
    font-size: 11px;
    font-weight: 700;
}

.product-list-thumb {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%);
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-list-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.product-remove-btn {
    background: #fff;
    border: 1px solid #ff6b6b;
    color: #ff6b6b;
    padding: 0.65rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
}

.product-remove-btn:hover {
    background: #ff6b6b;
    color: white;
}

.cart-item-variant {
    margin-top: 0.35rem;
    font-size: 12px;
    font-weight: 700;
    color: #4d5ada;
}

.admin-empty {
    padding: 2rem;
    text-align: center;
    color: #666;
    border: 1px dashed #ccc;
    border-radius: 12px;
    background: #fafafa;
}

@media (max-width: 768px) {
    .admin-layout {
        grid-template-columns: 1fr;
    }

    .admin-table-card {
        grid-column: auto;
    }

    .product-list-item {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-actions {
        justify-content: stretch;
    }

    .admin-actions .btn {
        width: 100%;
    }

    .stock-builder-head,
    .stock-row {
        grid-template-columns: 1fr;
    }

    .stock-builder-head {
        align-items: flex-start;
    }

    .stock-row-remove {
        justify-self: start;
    }
}

/* --- pedido-confirmado.css --- */
.success-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 2rem 1rem;
}

.success-card {
    width: min(680px, 100%);
    background: white;
    border: 1px solid rgba(17, 17, 17, 0.08);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 2rem;
    text-align: center;
}

.success-card h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    margin: 0.4rem 0 0.8rem;
    letter-spacing: -0.05em;
}

.success-card p {
    color: var(--muted);
}

.success-card .order-status-number {
    display: inline-block;
    margin-top: 0.75rem;
    padding: 0.45rem 0.75rem;
    border-radius: 10px;
    background: var(--surface-soft);
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
}

.success-actions {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

/* Account and authentication */
.account-header .header-shell {
    justify-content: space-between;
}

.account-nav-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid #dedbea;
    border-radius: 10px;
    font-size: 18px;
}

.account-nav-icon svg {
    width: 19px;
    height: 19px;
}

.auth-page {
    min-height: calc(100vh - 110px);
    display: grid;
    place-items: center;
    padding-block: 3rem;
}

.auth-card {
    width: min(460px, 100%);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border: 1px solid #e1dcec;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 22px 60px rgba(49, 24, 89, 0.1);
}

.auth-card h1 {
    margin: 0.45rem 0 0.3rem;
    font-size: clamp(2rem, 5vw, 2.7rem);
}

.auth-card > p {
    margin: 0 0 1.5rem;
    color: var(--muted);
}

.auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
    margin-bottom: 1.5rem;
    padding: 0.35rem;
    border-radius: 14px;
    background: #f4f1fa;
}

.auth-tabs button {
    min-height: 42px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.auth-tabs button.active {
    background: #fff;
    box-shadow: 0 4px 14px rgba(49, 24, 89, 0.1);
}

.auth-form {
    display: grid;
    gap: 1rem;
}

.auth-form .form-group {
    margin: 0;
}

.auth-form small {
    display: block;
    margin-top: 0.35rem;
    color: var(--muted);
}

.auth-submit {
    width: 100%;
    margin-top: 0.35rem;
}

.auth-feedback {
    min-height: 1.35rem;
    margin: 0;
    color: #b42318;
    font-size: 13px;
    font-weight: 600;
}

.account-page {
    padding-block: clamp(2rem, 5vw, 4.5rem);
}

.account-welcome {
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border-radius: 24px;
    color: #fff;
    background: linear-gradient(120deg, #211044, #7f42ff 62%, #ff3ea5);
}

.account-welcome h1 {
    margin: 0.35rem 0 0;
    font-size: clamp(2rem, 5vw, 3.2rem);
}

.account-welcome p {
    margin: 0.35rem 0 0;
    color: rgba(255, 255, 255, 0.82);
}

.account-welcome .eyebrow {
    color: #fff;
}

.orders-section {
    margin-top: clamp(2.5rem, 6vw, 5rem);
}

.orders-section .section-heading h2 {
    margin: 0.25rem 0 0;
}

.orders-list {
    display: grid;
    gap: 1rem;
}

.account-order-card,
.account-empty {
    border: 1px solid #e3deec;
    border-radius: 18px;
    background: #fff;
}

.order-card-main {
    display: grid;
    grid-template-columns: minmax(110px, 1fr) minmax(100px, 1fr) minmax(100px, 1fr) auto auto;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem;
}

.order-card-main > div {
    display: grid;
    gap: 0.2rem;
}

.order-label {
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.order-status {
    padding: 0.45rem 0.65rem;
    border-radius: 9px;
    color: #6c4700;
    background: #fff3cd;
    font-size: 12px;
    font-weight: 700;
}

.order-status-paid {
    color: #087443;
    background: #dff7ec;
}

.order-status-rejected,
.order-status-cancelled,
.order-status-charged_back {
    color: #a1271b;
    background: #fee9e7;
}

.order-details {
    padding: 0 1.2rem 1.2rem;
    border-top: 1px solid #eeeaf4;
}

.order-items {
    display: grid;
}

.order-item-detail {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid #eeeaf4;
}

.order-item-detail div {
    display: grid;
    gap: 0.25rem;
}

.order-item-detail span,
.order-totals span,
.account-loading {
    color: var(--muted);
}

.order-totals {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
    padding-top: 1rem;
}

.account-empty {
    padding: 2.5rem;
    text-align: center;
}

.account-empty h3 {
    margin: 0;
}

.account-empty p {
    color: var(--muted);
}

.account-header-actions {
    display: flex;
    gap: 0.65rem;
}

@media (max-width: 800px) {
    .order-card-main {
        grid-template-columns: 1fr 1fr;
    }

    .order-card-main .order-details-button,
    .order-card-main .order-status {
        width: 100%;
    }
}

@media (max-width: 520px) {
    .account-header .site-logo {
        max-width: 125px;
    }

    .account-header-actions .btn {
        padding-inline: 0.75rem;
        font-size: 12px;
    }

    .order-card-main {
        grid-template-columns: 1fr;
    }

    .order-totals {
        display: grid;
        justify-content: stretch;
    }
}

/* Storefront usability refinements */
.hero-copy h1 {
    font-size: clamp(2rem, 4vw, 3.3rem);
    line-height: 1.05;
    letter-spacing: -0.05em;
}

.wishlist-count {
    display: inline-grid;
    place-items: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
}

.btn-wishlist.active {
    color: var(--brand-pink);
    border-color: var(--brand-pink);
}

.stock-label {
    color: var(--muted);
    font-size: 12px;
}

.field-help {
    display: block;
    margin-top: 0.4rem;
    color: var(--muted);
    font-size: 12px;
}

.universe-section {
    margin: 2rem 0;
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.universe-row {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}

.universe-title {
    padding: 0.65rem 0.85rem;
    border-radius: 999px;
    background: var(--brand-gradient);
    color: #fff;
    font-weight: 900;
    text-align: center;
    text-decoration: none;
}

.logo-marquee {
    overflow: hidden;
    min-width: 0;
    padding: 0.5rem 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.logo-track {
    --loop-distance: calc(6 * (126px + 1rem));
    display: flex;
    width: max-content;
    gap: 1rem;
    animation: logo-scroll 28s linear infinite;
}

.track-filmes { --loop-distance: calc(2 * (126px + 1rem)); }
.track-series { --loop-distance: calc(126px + 1rem); }
.track-jogos { --loop-distance: calc(3 * (126px + 1rem)); }

.universe-row.reverse .logo-track {
    animation-direction: reverse;
    animation-duration: 24s;
}

.logo-marquee:hover .logo-track,
.logo-marquee:focus-within .logo-track {
    animation-play-state: paused;
}

.logo-track a {
    width: 126px;
    min-height: 138px;
    padding: 0.65rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    flex: 0 0 auto;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: #fff;
    color: var(--text);
    text-align: center;
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.logo-track a:hover,
.logo-track a:focus-visible {
    transform: translateY(-3px);
    border-color: var(--accent);
}

.logo-track img {
    width: 82px;
    height: 82px;
    border-radius: 50%;
    object-fit: cover;
}

.category-card {
    text-decoration: none;
}

@keyframes logo-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-1 * var(--loop-distance))); }
}

@media (max-width: 768px) {
    .universe-section {
        padding: 1rem;
    }

    .universe-row {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }

    .universe-title {
        justify-self: start;
        min-width: 110px;
    }

    .logo-track a {
        width: 108px;
        min-height: 120px;
    }

    .logo-track { --loop-distance: calc(6 * (108px + 1rem)); }
    .track-filmes { --loop-distance: calc(2 * (108px + 1rem)); }
    .track-series { --loop-distance: calc(108px + 1rem); }
    .track-jogos { --loop-distance: calc(3 * (108px + 1rem)); }

    .logo-track img {
        width: 68px;
        height: 68px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .logo-track {
        animation: none;
    }

    .logo-marquee {
        overflow-x: auto;
        mask-image: none;
        -webkit-mask-image: none;
    }
}

/* Single free-form logo ribbon */
.whatsapp-float {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 140;
    width: 62px;
    height: 62px;
    padding: 2px;
    display: grid;
    place-items: center;
    border: 3px solid rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    background: #25d366;
    box-shadow: 0 12px 28px rgba(18, 140, 75, 0.34);
    animation: whatsapp-hop 60s ease-in-out 60s infinite;
}

.whatsapp-float img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0) invert(1);
    transform: scale(1.18);
}

/* The floating WhatsApp mark is white; service-card marks stay black. */
.info-item img[src$="Whatsapp.svg"],
.trust-card img[src$="Whatsapp.svg"],
.trust-mini img[src$="Whatsapp.svg"] {
    filter: brightness(0);
}

@keyframes whatsapp-hop {
    0%, 3%, 100% { transform: translateY(0); }
    1% { transform: translateY(-8px); }
    2% { transform: translateY(-2px); }
}

.best-sellers-section {
    margin: 0 0 2.4rem;
}

.best-sellers-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.best-sellers-heading > a {
    flex: 0 0 auto;
    color: var(--accent);
    font-weight: 800;
    text-decoration: none;
}

.best-sellers-heading > a:hover {
    color: var(--brand-pink);
}

.best-seller-card .product-image {
    text-decoration: none;
}

.hero-banner {
    position: relative;
    margin: 1rem 0 1.25rem;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: #54219b;
    box-shadow: var(--shadow);
}

.hero-banner img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1774 / 887;
    object-fit: cover;
}

.hero-banner-content {
    position: absolute;
    z-index: 1;
    left: clamp(1.5rem, 5vw, 4.5rem);
    top: 50%;
    width: min(41%, 470px);
    padding: clamp(1.25rem, 2.7vw, 2.5rem);
    transform: translateY(-50%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: clamp(16px, 2vw, 28px);
    background: linear-gradient(145deg, rgba(22, 7, 51, 0.82), rgba(66, 25, 112, 0.72));
    box-shadow: 0 24px 60px rgba(15, 3, 38, 0.3);
    backdrop-filter: blur(5px);
    color: #fff;
}

.hero-banner-kicker {
    display: block;
    margin-bottom: 0.65rem;
    color: #d8b8ff;
    font-size: clamp(10px, 1vw, 13px);
    font-weight: 900;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.hero-banner-content h1 {
    max-width: 10ch;
    font-size: clamp(1.8rem, 3.35vw, 3.55rem);
    line-height: 1.02;
    letter-spacing: -0.045em;
}

.hero-banner-content h1 em {
    color: #c58aff;
    font-style: normal;
}

.hero-banner-content p {
    max-width: 38ch;
    margin-top: 1rem;
    color: rgba(255, 255, 255, 0.8);
    font-size: clamp(12px, 1.15vw, 16px);
}

.hero-banner-button {
    display: inline-flex;
    width: auto;
    margin-top: 1.25rem;
    background: linear-gradient(90deg, var(--accent), var(--brand-pink), var(--brand-orange));
    color: #fff;
    border: 0;
}

.hero-banner-button:hover {
    color: #fff;
    transform: translateY(-2px);
}

.hero-banner-button:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

.universe-section {
    padding-left: 0;
    padding-right: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.universe-section > .section-heading {
    padding-inline: 1.25rem;
}

.universe-showcase-head {
    padding: 0 1.25rem 1.2rem;
    text-align: center;
}

.universe-showcase-head h2 {
    font-size: clamp(1.7rem, 3vw, 2.55rem);
    line-height: 1.12;
    letter-spacing: -0.04em;
}

.universe-tabs {
    margin-top: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.universe-tabs a {
    min-width: 112px;
    padding: 0.45rem 0.85rem;
    border: 2px solid transparent;
    border-radius: 5px;
    background: #eeedf2;
    color: var(--text);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-decoration: none;
    text-transform: uppercase;
}

.universe-tabs a:hover,
.universe-tabs a.active {
    border-color: var(--text);
    background: #fff;
}

.universe-section > .universe-row {
    display: none;
}

.universe-row-all {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 0.5rem;
}

.logo-carousel-arrow {
    width: 34px;
    height: 44px;
    padding: 0;
    display: grid;
    place-items: center;
    z-index: 2;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #777;
    font-size: 28px;
    cursor: pointer;
}

.logo-carousel-arrow:hover,
.logo-carousel-arrow:focus-visible {
    background: var(--accent-soft);
    color: var(--accent);
}

.universe-row-all .logo-marquee {
    padding: 1rem 0;
}

.track-all {
    --loop-distance: calc(13 * (108px + 1.5rem));
    gap: 1.5rem;
    animation-duration: 34s;
}

.track-all a {
    width: 108px;
    min-height: 108px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
}

.track-all a:hover,
.track-all a:focus-visible {
    border: 0;
    transform: translateY(-4px) scale(1.06);
    outline: 3px solid rgba(127, 66, 255, 0.35);
    outline-offset: 3px;
}

.track-all img {
    width: 108px;
    height: 108px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

@media (max-width: 768px) {
    .best-sellers-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .hero-banner {
        min-height: 430px;
        margin-top: 0.75rem;
        border-radius: 16px;
    }

    .hero-banner img {
        position: absolute;
        inset: 0;
        height: 100%;
        aspect-ratio: auto;
        object-position: 61% center;
    }

    .hero-banner::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(19, 4, 45, 0.92) 0%, rgba(32, 8, 70, 0.72) 48%, transparent 78%);
    }

    .hero-banner-content {
        left: 1rem;
        width: min(72%, 280px);
        padding: 1.1rem;
        border-radius: 16px;
        background: rgba(26, 7, 58, 0.6);
        backdrop-filter: blur(3px);
    }

    .hero-banner-content h1 {
        font-size: clamp(1.75rem, 8vw, 2.35rem);
    }

    .hero-banner-content p {
        font-size: 13px;
    }

    .universe-section {
        padding-left: 0;
        padding-right: 0;
    }

    .universe-section > .section-heading {
        padding-inline: 1rem;
    }

    .universe-showcase-head {
        padding-inline: 1rem;
    }

    .universe-tabs {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 0.35rem;
        scrollbar-width: none;
    }

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

    .universe-tabs a {
        min-width: max-content;
    }

    .universe-row-all {
        grid-template-columns: 26px minmax(0, 1fr) 26px;
        gap: 0.25rem;
    }

    .logo-carousel-arrow {
        width: 26px;
    }

    .track-all {
        --loop-distance: calc(13 * (76px + 1rem));
        gap: 1rem;
    }

    .track-all a,
    .track-all img {
        width: 76px;
        height: 76px;
        min-height: 76px;
    }
}

@media (max-width: 768px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .hero-section,
    .hero-copy,
    .hero-visual,
    .header-shell,
    .marketplace-actions,
    .product-card,
    .promo-card {
        min-width: 0;
        max-width: 100%;
    }

    .marketplace-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: stretch;
    }

    .header-action-link {
        min-width: 0;
    }

    .cart-icon {
        width: 100%;
        min-height: 48px;
        margin: 0;
    }

    .hero-copy {
        padding: 1.5rem;
    }

    .hero-copy h1,
    .hero-copy h2,
    .section-heading h2 {
        font-size: clamp(1.85rem, 9vw, 2.5rem);
        overflow-wrap: anywhere;
    }

    .hero-visual {
        min-height: 440px;
    }

    .hero-visual-card-side {
        width: min(190px, 55%);
    }
}

@media (max-width: 768px) {
    .whatsapp-float {
        right: 16px;
        bottom: 16px;
        width: 56px;
        height: 56px;
        padding: 2px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .whatsapp-float {
        animation: none;
    }
}

/* Ritmo vertical das principais seções da home. */
.info-strip {
    margin-bottom: 3.75rem;
}

.universe-section,
.best-sellers-section,
.instagram-banner-section,
#products-page {
    margin-bottom: 4.5rem;
}

@media (max-width: 768px) {
    .info-strip {
        margin-bottom: 2.75rem;
    }

    .universe-section,
    .best-sellers-section,
    .instagram-banner-section,
    #products-page {
        margin-bottom: 3.25rem;
    }
}

/* Espaçamento e banner de atendimento da página do produto. */
.product-page .product-hero,
.product-page .reviews-section,
.product-page .related-section {
    margin-bottom: 4rem;
}

.support-banner-section {
    position: relative;
    isolation: isolate;
    min-height: 280px;
    margin-bottom: 3.5rem;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: #22044f url('../assets/banners/support-background.png') center / cover no-repeat;
    box-shadow: var(--shadow);
    color: #fff;
}

.support-banner-content {
    position: relative;
    z-index: 2;
    width: min(62%, 690px);
    padding: clamp(1.25rem, 3vw, 2.2rem);
}

.support-banner-kicker,
.support-channels-label {
    display: block;
    color: #c99cff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.14em;
}

.support-banner-content h2 {
    margin: 0.25rem 0 0.7rem;
    color: #fff;
    font-size: clamp(1.65rem, 3.1vw, 2.75rem);
    line-height: 1;
    text-transform: uppercase;
}

.support-banner-content p {
    margin-bottom: 1.15rem;
    color: rgba(255, 255, 255, 0.84);
    font-size: clamp(13px, 1.4vw, 17px);
    line-height: 1.5;
}

.support-banner-content p strong { color: #d7a9ff; }
.support-channels-label { margin-bottom: 0.55rem; color: #fff; }
.support-channels { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.support-channels span { padding: 0.45rem 0.7rem; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 999px; background: rgba(255, 255, 255, 0.09); color: #fff; font-size: 11px; font-weight: 700; backdrop-filter: blur(5px); }
.support-banner-button { display: inline-flex; align-items: center; gap: 0.65rem; margin-top: 1.2rem; padding: 0.75rem 1.1rem; border-radius: 12px; background: linear-gradient(90deg, #fff, #dfb9ff); color: #2a0755; font-size: 12px; font-weight: 900; text-decoration: none; transition: transform 160ms ease, box-shadow 160ms ease; }
.support-banner-button span { font-size: 22px; line-height: 0.7; }
.support-banner-button:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(201, 156, 255, 0.24); }

.support-banner-character {
    position: absolute;
    z-index: 1;
    right: clamp(-45px, -2vw, -15px);
    bottom: -8%;
    width: min(43%, 440px);
    height: 135%;
    object-fit: contain;
    object-position: right bottom;
}

@media (max-width: 768px) {
    .product-page .product-hero,
    .product-page .reviews-section,
    .product-page .related-section {
        margin-bottom: 3rem;
    }

    .support-banner-section {
        min-height: 390px;
        margin-bottom: 2.75rem;
        border-radius: 16px;
    }

    .support-banner-content { width: 100%; padding: 1.4rem; }
    .support-banner-content p { max-width: 32ch; }
    .support-banner-character { right: -8%; bottom: -16%; width: 62%; height: 72%; opacity: 0.9; }
}