﻿/*
Theme Name: YOUtoo professional
Description: YOUtoo professional store
Version: 1.0
Author: NWSR
WooCommerce: 9.0+
*/

/* ===== FONTS ===== */
@font-face {
    font-family: 'Circe';
    font-style: normal;
    font-weight: 400;
    src: url('https://cdn.shopify.com/s/files/1/0641/5876/1187/files/Circe-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Circe';
    font-style: normal;
    font-weight: 700;
    src: url('https://cdn.shopify.com/s/files/1/0641/5876/1187/files/Circe-Bold.woff2') format('woff2');
}

/* ===== RESET & BASE ===== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --color-primary: #151515;
    --color-secondary: #ffffff;
    --color-text: #151515;
    --color-text-light: #666666;
    --color-border: #e5e5e5;
    --color-background: #ffffff;
    --color-accent: #000000;
    --font-family: 'Circe', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --container-max: 1400px;
    --header-height: 120px;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: var(--font-family);
    font-size: 14px;
    line-height: 1.36;
    color: var(--color-text);
    background-color: var(--color-background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--color-text-light);
}

button {
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
}

ul,
ol {
    list-style: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}
 /* Padding Top Utility Classes */
    .pt-0 { padding-top: 0 !important; }
    .pt-sm { padding-top: 16px !important; }
    .pt-md { padding-top: 32px !important; }
    .pt-lg { padding-top: 48px !important; }
    .pt-xl { padding-top: 64px !important; }
   

    /* Margin Top Utility Classes */
    .mt-0 { margin-top: 0 !important; }
    .mt-sm { margin-top: 16px !important; }
    .mt-md { margin-top: 32px !important; }
    .mt-lg { margin-top: 48px !important; }
    .mt-xl { margin-top: 64px !important; }

    /* Padding Bottom Utility Classes */
    .pb-0 { padding-bottom: 0 !important; }
    .pb-sm { padding-bottom: 16px !important; }
    .pb-md { padding-bottom: 32px !important; }
    .pb-lg { padding-bottom: 48px !important; }
    .pb-xl { padding-bottom: 64px !important; }

    /* Breadcrumbs Styles (ul/li structure) */
    .breadcrumbs {
        background: #f8f8f8;
        padding: 12px 0;
        font-size: 14px;
    }
    .breadcrumbs__list {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        
    }
    .breadcrumbs__item {
        display: flex;
        align-items: center;
    }
    .breadcrumbs__item:not(:last-child)::after {
        content: '';
        display: inline-block;
        width: 16px;
        height: 16px;
        margin: 0 8px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
    }
    .breadcrumbs__item a {
        color: #666;
        text-decoration: none;
        transition: color 0.2s;
    }
    .breadcrumbs__item a:hover {
        color: #000;
    }
    .breadcrumbs__item--current {
        color: #333;
        font-weight: 500;
    }

    /* Page Content Styles */
    .page-content {
        padding: 48px 0;
    }
    .page-content__header {
        margin-bottom: 32px;
    }
    .page-content__title {
        font-size: 32px;
        font-weight: 700;
        margin: 0 0 16px;
        color: #111;
    }
    .page-content__body {
        font-size: 16px;
        line-height: 1.7;
        color: #333;
    }
    .page-content__body h2 {
        font-size: 24px;
        font-weight: 600;
        margin: 32px 0 16px;
        color: #111;
    }
    .page-content__body h3 {
        font-size: 20px;
        font-weight: 600;
        margin: 24px 0 12px;
        color: #111;
    }
    .page-content__body p {
        margin: 0 0 16px;
    }
    .page-content__body ul,
    .page-content__body ol {
        margin: 0 0 16px;
        padding-left: 24px;
    }
    .page-content__body ul {
        list-style-type: disc;
    }
    .page-content__body ol {
        list-style-type: decimal;
    }
    .page-content__body li {
        margin-bottom: 8px;
    }
    .page-content__body a {
        color: #000;
        text-decoration: underline;
        transition: opacity 0.2s;
    }
    .page-content__body a:hover {
        opacity: 0.7;
    }
    .page-content__body strong {
        font-weight: 600;
    }

/* ===== INFO CARDS (Shared: Payment, Delivery, Refund) ===== */
.info-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.info-cards--4 {
    grid-template-columns: repeat(4, 1fr);
}

.info-card {
    text-align: left;
}

.info-card__icon {
    margin-bottom: 12px;
}

.info-card__icon svg {
    width: 48px;
    height: 48px;
}

.info-card__title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    margin: 0 0 8px;
    color: #111;
}

.info-card__text {
    font-size: 15px;
    line-height: 1.36;
    color: #555;
    margin: 0;
}

/* Info Cards Responsive */
@media (max-width: 992px) {
    .info-cards,
    .info-cards--4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }
}

@media (max-width: 576px) {
    .info-cards,
    .info-cards--4 {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .info-card__icon svg {
        width: 36px;
        height: 36px;
    }

    .info-card__title {
        font-size: 18px;
    }

    .info-card__text {
        font-size: 14px;
    }
}

/* ===== DELIVERY PAGE ===== */
.delivery-section {
    margin-bottom: 48px;
}

.delivery-section:last-child {
    margin-bottom: 0;
}

/* Delivery Card Full (with icon left + list) */
.delivery-card--full {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 32px;
    background: #f8f8f8;
    border-radius: 12px;
    margin-bottom: 48px;
}

.delivery-card--full .info-card__icon {
    flex-shrink: 0;
    margin-bottom: 0;
}

.delivery-card--full .info-card__text {
    margin-bottom: 16px;
}

.delivery-card__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.delivery-card__list li {
    position: relative;
    padding-left: 16px;
    margin-bottom: 8px;
    font-size: 15px;
    line-height: 1.3;
}

.delivery-card__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 5px;
    height: 5px;
    background: #151515;
    border-radius: 50%;
}

.delivery-card__list a {
    color: #151515;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}

.delivery-card__list a:hover {
    border-bottom-color: #151515;
}

/* Delivery Notice */
.delivery-notice {
    margin-top: 48px;
    padding: 28px 32px;
    background: #fff;
    border: 2px solid #151515;
    border-radius: 12px;
}

.delivery-notice__header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.delivery-notice__header .info-card__icon {
    margin-bottom: 0;
}

.delivery-notice__title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    color: #111;
    margin: 0;
}

.delivery-notice__content {
    padding-left: 64px;
}

.delivery-notice__content p {
    font-size: 15px;
    line-height: 1.36;
    color: #555;
    margin: 0 0 12px;
}

.delivery-notice__content ul {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
}

.delivery-notice__content li {
    position: relative;
    padding-left: 16px;
    font-size: 15px;
    line-height: 1.3;
    color: #555;
    margin-bottom: 4px;
}

.delivery-notice__content li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 5px;
    height: 5px;
    background: #151515;
    border-radius: 50%;
}

/* Delivery Page Responsive */
@media (max-width: 768px) {
    .delivery-section {
        margin-bottom: 32px;
    }

    .delivery-card--full {
        flex-direction: column;
        gap: 12px;
        padding: 24px;
        margin-bottom: 32px;
    }

    .delivery-notice {
        margin-top: 32px;
        padding: 20px 24px;
    }

    .delivery-notice__content {
        padding-left: 0;
    }
}

@media (max-width: 576px) {
    .delivery-notice__title {
        font-size: 18px;
    }

    .delivery-notice__content p,
    .delivery-notice__content li {
        font-size: 14px;
    }
}

/* ===== COOPERATION PAGE ===== */
.cooperation-hero {
    position: relative;
    height: 70vh;
    min-height: 500px;
    background-size: cover;
    background-position: center;
    background-color: #3d3d3d;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cooperation-hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
}
.cooperation-hero__content {
    position: relative;
    z-index: 1;
    text-align: center;
    color: #fff;
}
.cooperation-hero__logo-img {
    display: block;
    max-width: 500px;
    width: 100%;
    height: auto;
    margin: 0 auto 16px;
}
.cooperation-hero__label {
    display: block;
    font-size: 14px;
    letter-spacing: 2px;
    margin-bottom: 8px;
    opacity: 0.9;
}
.cooperation-hero__logo {
    font-size: 48px;
    font-weight: 700;
    margin: 0 0 40px;
    letter-spacing: 4px;
}
.cooperation-hero__title {
    font-size: 36px;
    font-weight: 400;
    margin: 0;
    color: #fff;
}
/* Ambassador Section */
.cooperation-ambassador {
    padding: 80px 0;
}
.cooperation-ambassador__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}
.cooperation-ambassador__title {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}
.cooperation-ambassador__subtitle {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 16px;
    line-height: 1.4;
}
.cooperation-ambassador__text {
    font-size: 16px;
    line-height: 1.36;
    color: #555;
    margin: 0;
}

/* Steps Section */
.cooperation-steps {
    padding: 60px 0 80px;
}
.cooperation-steps__title {
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 48px;
}
.cooperation-steps__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}
.cooperation-step {
    padding-right: 20px;
}
.cooperation-step__number {
    width: 48px;
    height: 48px;
    background: #333;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
}
.cooperation-step__title {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 12px;
}
.cooperation-step__text {
    font-size: 14px;
    line-height: 1.36;
    color: #555;
    margin: 0;
}
.cooperation-step__text a {
    color: #000;
    text-decoration: underline;
}
.cooperation-step__text strong {
    font-weight: 600;
    color: #000;
}

/* FAQ Section */
.cooperation-faq {
    padding: 60px 0 80px;
    border-top: 1px solid #eee;
}
.cooperation-faq__title {
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 40px;
}
.cooperation-accordion-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 60px;
    align-items: start;
}
.cooperation-accordion .accordion-item {
    border-bottom: 1px solid #eee;
}
.cooperation-accordion .accordion-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 16px;
    font-weight: 500;
}
.cooperation-accordion .accordion-header span {
    flex: 1;
    padding-right: 20px;
}
.cooperation-accordion .accordion-icon {
    flex-shrink: 0;
    transition: transform 0.5s ease;
}
.cooperation-accordion .accordion-item--open .accordion-icon,
.cooperation-accordion .accordion-item.active .accordion-icon {
    transform: rotate(180deg);
}
.cooperation-accordion .accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease;
}
.cooperation-accordion .accordion-item--open .accordion-content,
.cooperation-accordion .accordion-item.active .accordion-content {
    max-height: 500px;
}
.cooperation-accordion .accordion-content p {
    padding: 0 0 20px;
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: #555;
}
.cooperation-faq__disclaimer {
    margin-top: 40px;
    font-size: 12px;
    color: #888;
}

/* Cooperation Page Responsive */
@media (max-width: 768px) {
    .cooperation-hero {
        height: 60vh;
        min-height: 400px;
    }
    .cooperation-hero__logo {
        font-size: 36px;
    }
    .cooperation-hero__title {
        font-size: 28px;
    }
    .cooperation-ambassador {
        padding: 60px 0;
    }
    .cooperation-ambassador__grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .cooperation-ambassador__title {
        font-size: 28px;
    }
    .cooperation-steps__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .cooperation-step {
        padding-right: 0;
    }
    .cooperation-accordion-wrapper {
        grid-template-columns: 1fr;
    }
}

/* ===== CONTAINER ===== */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 20px;
}

/* ===== ANNOUNCEMENT BAR ===== */
.announcement-bar {
    background-color: var(--color-primary);
    color: var(--color-secondary);
    padding: 10px 0;
    text-align: center;
    font-size: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.announcement-bar__slider {
    overflow: hidden;
    position: relative;
}

.announcement-bar__item {
    animation: slideText 10s infinite;
}

@keyframes slideText {

    0%,
    33% {
        opacity: 1;
        transform: translateY(0);
    }

    38%,
    100% {
        opacity: 0;
        transform: translateY(-100%);
    }
}

/* ===== HEADER ===== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--color-background);
    border-bottom: 1px solid var(--color-border);
}

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    gap: 40px;
}

.header__logo {
    flex-shrink: 0;
}

.header__logo a {
    display: block;
}

.header__logo-img {
    height: 50px;
    width: auto;
    max-width: 200px;
}

@media (max-width: 768px) {
    .header__logo-img {
        height: 36px;
        max-width: 140px;
    }
    .header__inner {
        gap: 20px;
    }

}

/* ===== NAVIGATION ===== */
.main-nav {
    flex: 1;
}

.main-nav__list {
    display: flex;
    justify-content: center;
    gap: 30px;
}

.main-nav__item {
    position: relative;
}

.main-nav__link {
    font-family: 'Circe', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    color: rgb(21, 21, 21);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 10px 0;
    display: block;
}

.main-nav__link:hover {
    opacity: 0.7;
}

/* Dropdown */
.main-nav__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    padding: 15px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 100;
}

.main-nav__item:hover .main-nav__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.main-nav__dropdown a {
    display: block;
    padding: 8px 20px;
    font-size: 12px;
    text-transform: none;
    letter-spacing: 0;
}

/* ===== HEADER ICONS ===== */
.header__icons {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header__icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--color-text);
    -webkit-tap-highlight-color: transparent;
}

.header__icon svg {
    width: 22px;
    height: 22px;
}

.header__cart-count {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--color-primary);
    color: var(--color-secondary);
    font-size: 10px;
    font-weight: 700;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (max-width: 768px) {
    .header__icons {
        gap: 5px;
    }
    .header__icon {
        width: 30px;
        height: 30px;
    }

}
/* ===== HERO SLIDER ===== */
.hero-slider {
    position: relative;
    padding: 0;
}

.hero-swiper {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
}

.hero-swiper .swiper-wrapper,
.hero-swiper .swiper-slide {
    width: 100%;
    height: 100%;
}

.hero-slide {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 35%;
    display: block !important;
    background-size: cover;
    background-position: center;
    background-color: #1a1a1a;
}

a.hero-slide {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

/* Hero slider navigation */
.hero-swiper .swiper-pagination {
    bottom: 16px;
}

.hero-swiper .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 1;
}

.hero-swiper .swiper-pagination-bullet-active {
    background: #ffffff;
}

@media (max-width: 768px) {
    .hero-swiper {
        border-radius: 8px;
    }

    .hero-slide {
        padding-bottom: 55%;
        /* background-position: left;
        background-size: 150% 150%; */
    }
}

/* ===== BUTTONS - YOUtoo miniapp style ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Circe', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0;
    padding: 10px 20px;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    background: #151515;
    color: #fff;
}

.btn:hover {
    background: #333;
    color: #fff;
}

/* Primary Button (Black Fill) - For Light Backgrounds */
.btn--primary {
    background-color: rgb(21, 21, 21);
    color: rgb(255, 255, 255);
    border-color: rgb(21, 21, 21);
}

.btn--primary:hover {
    background-color: transparent;
    color: rgb(21, 21, 21);
}

/* Secondary Button (Black Outline) - For Light Backgrounds */
.btn--secondary {
    background-color: transparent;
    color: rgb(21, 21, 21);
    border-color: rgb(21, 21, 21);
}

.btn--secondary:hover {
    background-color: rgb(21, 21, 21);
    color: rgb(255, 255, 255);
}

/* Primary White Button (White Fill) - For Dark Backgrounds */
.btn--primary-white {
    background-color: rgb(255, 255, 255);
    color: rgb(21, 21, 21);
    border-color: rgb(255, 255, 255);
}

.btn--primary-white:hover {
    background-color: transparent;
    color: rgb(255, 255, 255);
}

/* Secondary White Button (White Outline) - For Dark Backgrounds */
.btn--secondary-white {
    background-color: transparent;
    color: rgb(255, 255, 255);
    border-color: rgb(255, 255, 255);
}

.btn--secondary-white:hover {
    background-color: rgb(255, 255, 255);
    color: rgb(21, 21, 21);
}

/* Legacy support - map outline to secondary-white if needed, or just remove */
.btn--outline {
    background-color: transparent;
    color: rgb(255, 255, 255);
    border-color: rgb(255, 255, 255);
}

.btn--outline:hover {
    background-color: rgb(255, 255, 255);
    color: rgb(21, 21, 21);
}

/* ===== HEADINGS - Circe 700 ===== */
h1,
.h1 {
    font-family: 'Circe', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 48px;
    line-height: 53px;
    color: rgb(21, 21, 21);
}

h2,
.h2 {
    font-family: 'Circe', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 36px;
    line-height: 42px;
    color: rgb(21, 21, 21);
}

h3,
.h3 {
    font-family: 'Circe', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 30px;
    color: rgb(21, 21, 21);
}

h4,
.h4 {
    font-family: 'Circe', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 27px;
    color: rgb(21, 21, 21);
}

h5,
.h5,
h6,
.h6 {
    font-family: 'Circe', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    color: rgb(21, 21, 21);
}

/* ===== SECTION TITLES (romanovamakeup style) ===== */
.section-title {
    text-align: left;
    margin-bottom: 30px;
}

.section-title h2 {
    font-family: 'Circe', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.1;
    color: rgb(21, 21, 21);
    text-transform: uppercase;
    letter-spacing: 0;
}

@media (max-width: 768px) {
    .section-title h2 {
        font-size: 24px;
    }
}


/* ===== PRODUCTS GRID ===== */
.products-section {
    padding: 60px 0;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

/* 5 columns for bestsellers */
.products-grid--5 {
    grid-template-columns: repeat(5, 1fr);
}

/* 3 columns */
.products-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

/* 4 columns */
.products-grid--4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1200px) {
    .products-grid--5 {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 1024px) {

    .products-grid,
    .products-grid--5,
    .products-grid--4 {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
    .products-grid--3 {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 768px) {

    .products-grid,
    .products-grid--5,
    .products-grid--4,
    .products-grid--3 {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .product-card__subtitle {
        font-size: 11px;
    }
}
@media (max-width: 360px) {

    .products-grid,
    .products-grid--5,
    .products-grid--4,
    .products-grid--3 {
        grid-template-columns: repeat(1, 1fr);
    }
}

/* ===== SLIDER NAV (unified arrows for all sliders) ===== */
.slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background: #fff;
    border: 1px solid #151515;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s;
}
.slider-nav:not(.swiper-button-disabled):hover {
    background: #151515;
    border-color: #151515;
    color: #fff;
}
 .slider-nav--prev {
    left: 0px;
}
.slider-nav--next {
    right: 0px;
}
.slider-nav.swiper-button-disabled {
    opacity: 0.3;
    cursor: default;
}
@media (max-width: 1200px) {
    .slider-nav--prev {
        left: 20px;
    }
    .slider-nav--next {
        right: 20px;
    }
}
@media (max-width: 768px) {
   
    .slider-nav {
        width: 36px;
        height: 36px;
    }
    .slider-nav svg {
        width: 18px;
        height: 18px;
    }
}

/* ===== PRODUCTS SLIDER (bestsellers, new arrivals) ===== */
.products-mobile-slider {
    position: relative;
}
.products-grid-swiper {
    overflow: hidden;
}
.products-grid-swiper .swiper-slide {
    height: auto;
}

@media (max-width: 1200px) {
    .products-mobile-slider {
        overflow: visible !important;

    }
    .products-mobile-slider {
        padding: 0 20px;
        margin: 0 -20px;
    }
}

/* ===== PRODUCT CARD (romanovamakeup.us exact style) ===== */
.product-card {
    position: relative;
    text-align: left;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.product-card__image {
    position: relative;
    overflow: hidden;
    margin-bottom: 12px;
    aspect-ratio: 0.8;
    background: #f5f5f5;
}

.product-card__image a {
    display: block;
    width: 100%;
    height: 100%;
}

.product-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
}

.product-card:hover .product-card__image img {
    opacity: 0.95;
}

/* Badges container */
.product-card__badges {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    z-index: 2;
}

/* Badge - romanovamakeup exact style */
.product-card__badge {
    background: #ffffff;
    color: #151515;
    font-size: 13px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 6px;
    font-family: 'Circe', sans-serif;
    line-height: 1.4;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.product-card__badge--sale {
    background: #ffffff;
    color: #151515;
}

/* ===== WISHLIST TOGGLE ON PRODUCT CARDS ===== */
.product-card__image .wishlist-toggle {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    padding: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.product-card__image .wishlist-toggle svg {
    width: 18px;
    height: 18px;
    transition: all 0.3s ease;
}

.product-card__image .wishlist-toggle:hover {
    background: #fff;
    transform: scale(1.1);
}

.product-card__image .wishlist-toggle:hover svg {
    color: #EC008C;
    stroke: #EC008C;
}

.product-card__image .wishlist-toggle.active svg {
    fill: #EC008C;
    stroke: #EC008C;
}

.wishlist-toggle.wishlist-loading {
    opacity: 0.5;
    pointer-events: none;
}

/* Product Info */
.product-card__info {
    text-align: left;
    padding: 0;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Title - Circe 700, 18px/27px (romanovamakeup exact) */
.product-card__title {
    font-family: 'Circe', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2;
    color: rgb(21, 21, 21);
    text-transform: uppercase;
    letter-spacing: 0;
    margin-bottom: 5px;
}

.product-card__title a {
    color: rgb(21, 21, 21);
    text-decoration: none;
}

.product-card__title a:hover {
    text-decoration: none;
    opacity: 0.7;
}

/* Subtitle/Description - Circe 400, 13px/20px (romanovamakeup exact) */
.product-card__subtitle {
    font-family: 'Circe', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 1.3;
    color: rgb(21, 21, 21);
    text-transform: uppercase;
    letter-spacing: 0;
    margin-bottom: 4px;
}

/* Rating - outline stars exactly like romanovamakeup (judge.me style) */
.product-card__rating {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-bottom: 4px;
}

/* Ozon Style Rating */
.ozon-rating {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    font-family: 'Circe', sans-serif;
}

.rating-value {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 700;
    font-size: 14px;
    color: #151515;
}

.rating-count {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: #888888;
    /* textSecondary color */
}

.rating-value svg {
    color: #FFA800;
    /* graphicRating color */
}

.rating-count svg {
    color: #A2A2A2;
    /* graphicTertiary color */
}

/* Price - romanovamakeup exact */
.product-card__price {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #151515 !important;
    font-family: 'Circe', sans-serif !important;
    line-height: 1.2 !important;
}

.product-card__price del {
    color: #888888;
    font-weight: 700 !important;
    margin-right: 6px;
    font-size: 14px;
    text-decoration: line-through;
}

.product-card__price ins {
    text-decoration: none;
    font-weight: 400;
}

/* Price Row with Bonus */
.product-card__price-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.product-card__bonus {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #F2F2F2;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    color: #151515;
    font-family: 'Circe', sans-serif;
}

.bonus-icon {
    font-size: 0;
    line-height: 1;
    display: flex;
    align-items: center;
}

.bonus-icon svg {
    width: 16px;
    height: 16px;
}

/* Add to Cart Button - inherits from .btn */
.product-card__add-to-cart {
    width: auto;
    margin-top: auto;
}

/* In-cart state for add-to-cart buttons */
.product-card__add-to-cart.in-cart,
.product-single__add-to-cart.in-cart {
    background-color: transparent;
    color: #151515;
    border-color: #151515;
}

/* ===== VIEW ALL LINK ===== */
.section-view-all {
    text-align: center;
    margin-top: 40px;
}

.view-all-link {
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #151515;
    text-decoration: none;
    border-bottom: 1px solid #151515;
    padding-bottom: 4px;
    transition: opacity 0.3s ease;
}

.view-all-link:hover {
    opacity: 0.6;
}

/* ===== COLOR SWATCHES ===== */
.product-card__swatches {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.color-swatch {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    cursor: pointer;
    transition: transform 0.2s ease;
}

.color-swatch:hover {
    transform: scale(1.2);
}

/* ===== CATEGORIES TABS ===== */
.categories-tabs {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 40px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.categories-tabs::-webkit-scrollbar {
    display: none;
}

.category-tab {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 10px 20px;
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text);
    transition: all 0.3s ease;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

.category-tab:hover,
.category-tab.active {
    background: var(--color-primary);
    color: var(--color-secondary);
    border-color: var(--color-primary);
}

@media (max-width: 1440px) {
    .categories-tabs {
        margin: 0 -20px 40px;
        padding: 0 20px;
    }
}

@media (max-width: 960px) {
    .categories-tabs {
        justify-content: flex-start;
    }
}

/* ===== CAROUSEL ===== */
.carousel-section {
    padding: 60px 0;
    overflow: hidden;
}

.carousel {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 20px;
}

.carousel::-webkit-scrollbar {
    display: none;
}

.carousel__item {
    flex: 0 0 280px;
    scroll-snap-align: start;
}

/* ===== PROMO BANNERS SECTION ===== */
.promo-banners {
    padding: 60px 0;
}
.promo-slider {
    position: relative;
}
.promo-swiper {
    overflow: visible !important;
}
.promo-swiper .swiper-wrapper {
    align-items: stretch;
}
.promo-swiper .swiper-slide {
    height: auto;
}
.promo-card {
    border-radius: 10px;
    overflow: hidden;
    background: #f5f5f5;
    height: 100%;
    padding: 32px;
    display: flex;
    flex-direction: column;
}
.promo-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.promo-card__wrapper-img {
margin-top: auto;    
}
.promo-card__title {
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.2;
    margin: 0 0 12px;
    color: #111;
}
.promo-card__text {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #333;
    margin: 0;
}
.promo-card__image {
    margin-top: 24px;
    text-align: center;
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.promo-card__image img {
    max-width: 75%;
    height: auto;
    border-radius: 0;
    display: block;
    margin: 0 auto;
}
.promo-card__btn.btn {
    width: 100%;
    gap: 10px;
}
.promo-card__btn.btn span{
    margin-top: 3px;
}

/* Promo Banners Responsive */
@media (max-width: 1200px) {
    .promo-slider {
        padding: 0 20px;
        margin: 0 -20px;
    }
}
@media (max-width: 576px) {
    .promo-card {
        padding: 20px;
    }
    .promo-card__title {
        font-size: 20px;
    }
    .promo-card__text {
        font-size: 14px;
    }
    .promo-card__btn.btn {
        padding: 12px 20px;
        font-size: 12px;
    }
}

/* ===== ABOUT SECTION ===== */
.about-section {
    padding: 80px 0;
    background: #f9f9f9;
}

.about-section__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

@media (max-width: 768px) {
    .about-section__inner {
        grid-template-columns: 1fr;
    }
}

.about-section__image img {
    width: 100%;
}

.about-section__content h2 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0;
}

.about-section__content p {
    margin-bottom: 15px;
    color: var(--color-text-light);
    line-height: 1.8;
}

/* ===== NEWSLETTER ===== */
.newsletter-section {
    padding: 60px 0;
    background: var(--color-primary);
    color: var(--color-secondary);
    text-align: center;
}

.newsletter-section h2 {
    font-size: 24px;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #ffffff;
}

.newsletter-section p {
    margin-bottom: 30px;
    opacity: 0.8;
}

.newsletter-form {
    display: flex;
    max-width: 500px;
    margin: 0 auto;
    gap: 10px;
}

.newsletter-form input {
    flex: 1;
    padding: 15px 20px;
    border: none;
    font-family: inherit;
    font-size: 14px;
}

.newsletter-form button {
    font-family: 'Circe', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.4;
    padding: 12px 24px;
    background: rgb(255, 255, 255);
    color: rgb(21, 21, 21);
    text-transform: uppercase;
    letter-spacing: 0;
    transition: all 0.2s ease;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

.newsletter-form button:hover {
    background: rgb(230, 230, 230);
}

/* Privileges Club Button */
.privileges-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;

}

.privileges-btn:hover {
    /* background: rgb(230, 230, 230); */
    /* transform: translateY(-2px); */
}

.privileges-btn svg {
    flex-shrink: 0;
}

.privileges-club {
    background-color: #F5F5F7;
    padding: 80px 0;
    text-align: center;
}

.privileges-club h2 {
    color: #151515;
    font-size: 36px;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0;
}

.privileges-description {
    font-size: 18px;
    opacity: 1;
    margin: 0 auto 40px;
    color: #666666;
    line-height: 1.36;
    max-width: 600px;
}

/* AI Consultant Section - Split Layout */
.ai-consultant-section {
    background: #ffffff;
    padding: 60px 0;
    overflow: hidden;
}

.ai-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.ai-content {
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    /* Left align text */
    text-align: left;
}

.ai-image {
    position: relative;
    width: 100%;
}

.ai-image-hover-container {
    position: relative;
    width: 100%;
    /* Aspect ratio hack or fixed height might be needed if images differ,
       but assuming they are same size or we let the main one dictate height */
    overflow: hidden;
    border-radius: 12px;
}

.ai-image-hover-container img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    transition: opacity 0.5s ease;
}

.ai-img-main {
    position: relative;
    z-index: 1;
}

.ai-img-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 2;
    object-fit: cover;
}

.ai-image-hover-container:hover .ai-img-hover {
    opacity: 1;
}

.ai-consultant-section h2 {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 30px;
    text-transform: uppercase;
    color: #151515;
    line-height: 1.2;
    max-width: 500px;
}

.ai-text-wrapper {
    margin-bottom: 40px;
    max-width: 500px;
}

.ai-description {
    font-size: 16px;
    color: #171717;
    line-height: 1.5;
    margin-bottom: 12px;
}

.ai-description:last-child {
    margin-bottom: 0;
}

.ai-consultant-btn {
    /* Styles inherited from btn--primary or user custom styles */
}

.ai-consultant-btn:hover {
    /* background: #151515; */
    /* color: #ffffff; */
}

@media (max-width: 992px) {
    .ai-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .ai-content {
        padding: 0;
        align-items: center;
        text-align: center;
    }

    .ai-consultant-section h2,
    .ai-text-wrapper {
        max-width: 100%;
    }

    .ai-image {
        order: -1;
    }
}

@media (max-width: 576px) {
    .ai-consultant-section h2 {
        font-size: 28px;
    }

    .ai-description {
        font-size: 15px;
    }

    .ai-consultant-btn {
        padding: 12px 30px;
    }
}

/* ===== FOOTER ===== */
.site-footer {
    background: var(--color-primary);
    color: var(--color-secondary);
    padding: 60px 0 30px;
}

.footer__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.5fr;
    gap: 60px;
    margin-bottom: 40px;
}

@media (max-width: 768px) {
    .footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
}

@media (max-width: 480px) {
    .footer__grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

.footer__logo {
    margin-bottom: 20px;
}

.footer__logo-img {
    height: 40px;
    width: auto;
    filter: brightness(0) invert(1);
}

.footer__company-info {
    font-size: 13px;
    opacity: 0.7;
    line-height: 1.8;
}

.footer__column h4 {
    font-family: 'Circe', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    color: rgb(255, 255, 255);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.footer__column ul li {
    margin-bottom: 10px;
}

.footer__column a {
    font-size: 13px;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.footer__column a:hover {
    opacity: 1;
}

.footer__contacts li {
    margin-bottom: 15px;
}

.footer__contacts a {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer__contacts svg {
    flex-shrink: 0;
    opacity: 0.7;
}

.footer__social {
    display: flex;
    gap: 12px;
    margin-top: 25px;
}

.footer__social a {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.footer__social a:hover {
    background: var(--color-secondary);
    color: var(--color-primary);
    border-color: var(--color-secondary);
}

.footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 12px;
    opacity: 0.6;
}

.footer__bottom p {
    margin: 0;
}

.footer__legal {
    display: flex;
    gap: 30px;
}

.footer__legal a {
    opacity: 1;
    transition: opacity 0.3s ease;
}

.footer__legal a:hover {
    opacity: 0.7;
}

@media (max-width: 768px) {
    .footer__bottom {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    .footer__legal {
        flex-direction: column;
        gap: 10px;
    }
}

/* ===== WOOCOMMERCE OVERRIDES ===== */
.woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.woocommerce ul.products li.product {
    text-align: center;
    margin: 0;
    padding: 0;
    width: 100%;
    float: none;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 13px;
    font-weight: 400;
    padding: 0;
    margin: 15px 0 8px;
}

.woocommerce ul.products li.product .price {
    color: var(--color-primary);
    font-size: 14px;
}

.woocommerce ul.products li.product .button {
    background: var(--color-primary);
    color: var(--color-secondary);
    border-radius: 0;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 12px 25px;
    margin-top: 15px;
}

.woocommerce ul.products li.product .button:hover {
    background: #333;
}

.woocommerce .star-rating {
    color: var(--color-primary);
}

/* ===== MOBILE MENU ===== */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 10px;
}

.mobile-menu-toggle span {
    width: 25px;
    height: 2px;
    background: var(--color-primary);
    transition: all 0.3s ease;
}

@media (max-width: 992px) {
    .mobile-menu-toggle {
        display: flex;
    }

    .main-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--color-background);
        border-top: 1px solid var(--color-border);
        padding: 20px;
    }

    .main-nav.active {
        display: block;
    }

    .main-nav__list {
        flex-direction: column;
        gap: 0;
    }

    .main-nav__link {
        padding: 15px 0;
        border-bottom: 1px solid var(--color-border);
    }
}

/* ===== PRODUCTS SWIPER (romanovamakeup.us exact style) ===== */
.products-swiper {
    position: relative;
    overflow: visible;
    padding: 0;
}

.products-swiper .swiper-wrapper {
    display: flex;
    gap: 0;
}

.products-swiper .swiper-slide {
    width: auto;
    flex-shrink: 0;
}

/* Desktop: 24px gap, Mobile: 12px gap - exact romanovamakeup values */
.products-swiper .swiper-slide {
    margin-right: 24px;
}

@media (max-width: 900px) {
    .products-swiper .swiper-slide {
        margin-right: 12px;
    }
}

/* Swiper Navigation - exact romanovamakeup style */
.products-swiper .swiper-button-next,
.products-swiper .swiper-button-prev {
    width: 48px;
    height: 48px;
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 0;
    color: #151515;
    top: 35%;
    transform: translateY(-50%);
}

.products-swiper .swiper-button-next::after,
.products-swiper .swiper-button-prev::after {
    font-size: 14px;
    font-weight: 700;
}

.products-swiper .swiper-button-next {
    right: -24px;
}

.products-swiper .swiper-button-prev {
    left: -24px;
}

.products-swiper .swiper-button-next:hover,
.products-swiper .swiper-button-prev:hover {
    background: #151515;
    color: #ffffff;
    border-color: #151515;
}

@media (max-width: 1200px) {
    .products-swiper .swiper-button-next {
        right: 0;
    }

    .products-swiper .swiper-button-prev {
        left: 0;
    }
}

@media (max-width: 900px) {

    .products-swiper .swiper-button-next,
    .products-swiper .swiper-button-prev {
        display: none;
    }
}

/* ===== BESTSELLERS SECTION ===== */
.bestsellers-section {
    padding: 60px 0 40px;
}

.bestsellers-section .section-title {
    margin-bottom: 30px;
}

.bestsellers-section .section-title h2 {
    font-size: 36px;
}


/* ===== UTILITIES ===== */
.text-center {
    text-align: center;
}

.text-uppercase {
    text-transform: uppercase;
}

.mb-0 {
    margin-bottom: 0;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-40 {
    margin-bottom: 40px;
}

.py-60 {
    padding-top: 60px;
    padding-bottom: 60px;
}

/* ===== ABOUT ACCORDION ===== */
.about-accordion {
    margin-bottom: 30px;
}

.accordion-item {
    border-bottom: 1px solid var(--color-border);
}

.accordion-item:first-child {
    border-top: 1px solid var(--color-border);
}

.accordion-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: 'Circe', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.4;
    color: var(--color-text);
    transition: color 0.3s ease;
}

.accordion-header:hover {
    color: var(--color-text-light);
}

.accordion-icon {
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.accordion-item.active .accordion-icon {
    transform: rotate(180deg);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.accordion-item.active .accordion-content {
    max-height: 200px;
}

.accordion-content p {
    padding: 0 0 20px 0;
    margin: 0;
    color: var(--color-text-light);
    font-size: 15px;
    line-height: 1.7;
}

/* ===== SIDE CART ===== */
.cart-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 9998;
}

.cart-overlay.active {
    opacity: 1;
    visibility: visible;
}

.side-cart {
    position: fixed;
    top: 0;
    right: -500px;
    width: 100%;
    max-width: 500px;
    height: 100%;
    background: #fff;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    transition: right 0.3s ease;
    z-index: 9999;
    overflow-y: auto;
}

.side-cart.active {
    right: 0;
}

body.cart-open {
    overflow: hidden;
}

.side-cart__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    border-bottom: 1px solid var(--color-border);
}

.side-cart__header h3 {
    font-family: 'Circe', sans-serif;
    font-weight: 700;
    font-size: 24px;
    margin: 0;
}

.cart-close {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
}

.cart-close:hover {
    opacity: 0.6;
}

.side-cart__body {
    padding: 24px;
}

.cart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.cart-empty svg {
    width: 80px;
    height: 80px;
    stroke: #ccc;
    margin-bottom: 20px;
}

.cart-empty p {
    font-size: 16px;
    color: var(--color-text-light);
}

.cart-item {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--color-border);
    position: relative;
}

.cart-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.cart-item-image {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
}

.cart-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.cart-item-details {
    flex: 1;
}

.cart-item-title {
    font-family: 'Circe', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.4;
    margin-bottom: 8px;
}

.cart-item-price {
    font-size: 15px;
    margin-bottom: 12px;
    color: var(--color-text);
}

.cart-item-qty {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}

.cart-item-qty button {
    width: 32px;
    height: 32px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cart-item-qty button:hover {
    background: #f5f5f5;
    border-color: var(--color-text);
}

.cart-item-qty span {
    min-width: 30px;
    text-align: center;
    font-weight: 500;
}

.cart-item-remove {
    position: absolute;
    top: 0;
    right: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
}

.cart-item-remove:hover {
    opacity: 0.6;
}

.side-cart__footer {
    padding: 24px;
    border-top: 1px solid var(--color-border);
    background: #fff;
}

.cart-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 700;
}

.cart-total-amount {
    font-size: 20px;
}

.checkout-btn {
    width: 100%;
}

/* Cart count badge */
.cart-count {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--color-text);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
}

/* Wishlist header icon & badge */
.header__wishlist {
    position: relative;
    text-decoration: none;
    color: inherit;
}

.wishlist-count {
    display: none !important;
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--color-text);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
}

.header__cart {
    position: relative;
}

/* Checkout Form Slide */
.checkout-form-slide {
    position: fixed;
    top: 0;
    right: -500px;
    width: 100%;
    max-width: 500px;
    height: 100%;
    background: #fff;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
    z-index: 10000;
}

.checkout-form-slide.active {
    right: 0;
}

.checkout-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;
    border-bottom: 1px solid var(--color-border);
}

.checkout-back {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
}

.checkout-back:hover {
    opacity: 0.6;
}

.checkout-header h3 {
    font-family: 'Circe', sans-serif;
    font-weight: 700;
    font-size: 24px;
    margin: 0;
}

.checkout-form-content {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 14px;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-family: 'Circe', sans-serif;
    font-size: 14px;
    transition: border-color 0.2s ease;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--color-text);
}

.form-group textarea {
    resize: vertical;
}

.form-group.error input,
.form-group.error textarea,
.form-group.error select,
p.error input,
p.error textarea,
p.error select,
.comment-form-rating.error select,
.account-form__field.error input,
.account-form__field.error textarea,
.account-form__field.error select,
.form-row.error input,
.form-row.error textarea,
.form-row.error select {
    border-color: #EF4444;
}

.form-group.error input::placeholder,
.form-group.error textarea::placeholder,
p.error input::placeholder,
p.error textarea::placeholder,
.account-form__field.error input::placeholder,
.form-row.error input::placeholder {
    color: #EF4444;
}

.checkout-footer {
    padding: 24px;
    border-top: 1px solid var(--color-border);
    background: #fff;
}

.order-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 700;
}

.order-total-amount {
    font-size: 20px;
}

.place-order-btn {
    width: 100%;
}

.order-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 20px;
}

.order-success svg {
    width: 80px;
    height: 80px;
    stroke: #4caf50;
    margin-bottom: 24px;
}

.order-success h3 {
    font-size: 24px;
    margin-bottom: 16px;
}

.order-success p {
    font-size: 15px;
    color: var(--color-text-light);
    line-height: 1.36;
    margin-bottom: 24px;
}

.loading-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ===== CART PROMO CODE ===== */
.cart-promo {
    margin-bottom: 20px;
}

.cart-promo-toggle {
    margin-bottom: 0;
}

.cart-promo-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    background: #f5f5f5;
    border: 1px dashed #ccc;
    border-radius: 8px;
    font-family: 'Circe', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #151515;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cart-promo-btn:hover {
    background: #eee;
    border-color: #999;
}

.cart-promo-btn svg {
    flex-shrink: 0;
}

.cart-promo-btn span {
    flex: 1;
    text-align: left;
}

.cart-promo-arrow {
    transition: transform 0.2s ease;
}

.cart-promo-arrow.rotated {
    transform: rotate(180deg);
}

.cart-promo-form {
    margin-top: 12px;
}

.cart-promo-input-wrap {
    display: flex;
    gap: 8px;
}

.cart-promo-input {
    flex: 1;
    padding: 12px 14px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    font-family: 'Circe', sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    transition: border-color 0.2s ease;
}

.cart-promo-input:focus {
    outline: none;
    border-color: #151515;
}

.cart-promo-apply {
    padding: 12px 20px;
    white-space: nowrap;
}

.cart-promo-message {
    margin-top: 10px;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
}

.cart-promo-message.error {
    background: #ffebee;
    color: #c62828;
}

.cart-promo-message.success {
    background: #e8f5e9;
    color: #2e7d32;
}

/* Applied Coupons */
.cart-applied-coupons {
    margin-top: 12px;
}

.cart-applied-coupon {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #e8f5e9;
    border-radius: 8px;
    margin-bottom: 8px;
}

.cart-applied-coupon:last-child {
    margin-bottom: 0;
}

.coupon-code {
    font-family: 'Circe', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #2e7d32;
    flex: 1;
}

.coupon-discount {
    font-size: 13px;
    font-weight: 600;
    color: #2e7d32;
}

.coupon-remove {
    background: transparent;
    border: none;
    padding: 4px;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.coupon-remove:hover {
    opacity: 1;
}

.coupon-remove svg {
    display: block;
}

@media screen and (max-width: 767px) {
    .cart-promo-input {
        font-size: 10px;
    padding: 10px 10px 8px 10px;
    }
    .cart-promo-apply {
            font-size: 12px;
        padding: 12px 15px 10px 15px;
    }
}
/* ===== CART SHIPPING & PAYMENT ===== */
.cart-section-title {
    font-size: 14px;
    font-weight: 600;
    color: #151515;
    margin-bottom: 8px;
}

.cart-shipping {
    margin-bottom: 16px;
}

.custom-select {
    position: relative;
    width: 100%;
}

.custom-select__trigger {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    color: #151515;
    transition: border-color 0.2s;
    user-select: none;
}

.custom-select__trigger:hover {
    border-color: #bbb;
}

.custom-select.open .custom-select__trigger {
    border-color: #151515;
    border-radius: 8px 8px 0 0;
}

.custom-select__label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.custom-select__cost {
    flex-shrink: 0;
    font-weight: 500;
    color: #666;
    margin-left: 8px;
    font-size: 13px;
}

.custom-select__arrow {
    flex-shrink: 0;
    margin-left: 8px;
    transition: transform 0.2s;
    color: #666;
}

.custom-select.open .custom-select__arrow {
    transform: rotate(180deg);
}

.custom-select__dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #151515;
    border-top: none;
    border-radius: 0 0 8px 8px;
    z-index: 100;
    max-height: 260px;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.custom-select.open .custom-select__dropdown {
    display: block;
}

.custom-select__group-label {
    padding: 8px 12px 4px;
    font-size: 11px;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.custom-select__option {
    display: flex;
    align-items: center;
    padding: 9px 12px;
    cursor: pointer;
    font-size: 13px;
    color: #333;
    transition: background 0.15s;
}

.custom-select__option:hover {
    background: #f5f5f5;
}

.custom-select__option.active {
    background: #f0f0f0;
    font-weight: 500;
}

.custom-select__option:last-child {
    border-radius: 0 0 8px 8px;
}

.custom-select__option-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.custom-select__option-cost {
    flex-shrink: 0;
    font-size: 12px;
    color: #888;
    margin-left: 8px;
}

.cart-pvz-map {
    margin-top: 10px;
}

.cart-pvz-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 10px 12px;
    border: 1px dashed #bbb;
    border-radius: 8px;
    background: #fafafa;
    color: #151515;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.cart-pvz-btn:hover {
    border-color: #151515;
    background: #f5f5f5;
}

.cart-pvz-btn svg {
    flex-shrink: 0;
    color: #666;
}

.cart-pvz-selected {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 12px;
    background: #e8f5e9;
    border-radius: 6px;
    font-size: 12px;
    color: #2e7d32;
}

.cart-pvz-selected .pvz-address {
    font-weight: 500;
}

.cart-pvz-selected .pvz-change {
    background: none;
    border: none;
    color: #666;
    font-size: 12px;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
    font-family: inherit;
}

.cart-payment {
    margin-bottom: 16px;
}

.cart-payment-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cart-payment-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.2s;
    font-size: 14px;
}

.cart-payment-option:hover {
    border-color: #999;
}

.cart-payment-option.active {
    border-color: #151515;
    background: #fafafa;
}

.cart-payment-option input[type="radio"] {
    accent-color: #151515;
    margin: 0;
}

.cart-payment-option .payment-label {
    color: #151515;
    font-weight: 500;
}

/* ===== CART SUMMARY ===== */
.cart-summary {
    margin-bottom: 16px;
    padding: 16px;
    background: #f9f9f9;
    border-radius: 10px;
}

.cart-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 14px;
    color: #666;
}

.cart-summary-row:last-child {
    margin-bottom: 0;
}

.cart-summary-row span:last-child {
    font-weight: 500;
    color: #151515;
}

.cart-discount-row span:last-child {
    color: #2e7d32;
}

.cart-summary-total {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e5e5e5;
    font-size: 16px;
    font-weight: 700;
}

.cart-summary-total span {
    color: #151515 !important;
}

.cart-free-delivery-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    margin: 10px 0;
    background: #fff3e0;
    border-radius: 6px;
    font-size: 12px;
    color: #e65100;
}

.cart-free-delivery-notice svg {
    flex-shrink: 0;
}

/* ===== CART BONUS EARNED ===== */
.cart-bonus-earned {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    margin-bottom: 16px;
    background: #f2f2f2;
    border-radius: 8px;
    font-size: 14px;
    color: #666;
}

.cart-bonus-earned svg {
    color: #151515;
}

.cart-bonus-earned .bonus-amount {
    color: #151515;
}

/* ===== CART CONTACT LINKS ===== */
.cart-contact {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e5e5e5;
    text-align: center;
}

.cart-contact > span {
    display: block;
    margin-bottom: 12px;
    font-size: 13px;
    color: #666;
}

.cart-contact-links {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.cart-contact-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #f5f5f5;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #151515;
    text-decoration: none;
    transition: all 0.2s ease;
}

.cart-contact-link:hover {
    background: #eee;
    color: #151515;
}

.cart-contact-link svg {
    flex-shrink: 0;
}

.cart-contact-link span { margin-top: 3px; }
.cart-contact-link[href*="t.me"] svg { fill: #2AABEE; }
.cart-contact-link[href*="wa.me"] svg { fill: #25D366; }
.cart-contact-link[href*="vk.com"] svg { fill: #0077FF; }

@media screen and (max-width: 767px) {
    .cart-contact-link { 
        padding: 6px 10px;
    }
}
/* ===== CART SUGGESTED PRODUCTS SLIDER ===== */
.cart-suggested-section {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #e5e5e5;
}

.cart-suggested-title {
    font-family: 'Circe', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #151515;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cart-suggested-slider {
    position: relative;
    overflow: hidden;
}

.cart-suggested-slider .swiper-slide {
    width: auto;
}

.cart-suggested-nav {
    position: absolute;
    top: -44px;
    right: 0;
    display: flex;
    gap: 4px;
    z-index: 10;
}

.cart-suggested-prev,
.cart-suggested-next {
    width: 28px;
    height: 28px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cart-suggested-prev:hover,
.cart-suggested-next:hover {
    background: #151515;
    border-color: #151515;
    color: #fff;
}

.cart-suggested-prev svg,
.cart-suggested-next svg {
    width: 16px;
    height: 16px;
}

/* Suggested Product Card - Horizontal Layout */
.suggested-product {
    padding: 12px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    transition: all 0.2s ease;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.suggested-product:hover {
    border-color: #151515;
}

.suggested-product.locked {
    opacity: 0.7;
}

.suggested-product-image {
    width: 70px;
    height: 70px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    background: #f5f5f5;
}

.suggested-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.suggested-product-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.suggested-product-name {
    font-family: 'Circe', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #151515;
    line-height: 1.3;
    text-transform: uppercase;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.suggested-product-price {
    font-size: 14px;
    font-weight: 700;
    color: #151515;
}

.suggested-product-bonus {
    font-size: 11px;
    color: #666;
    background: #f2f2f2;
    padding: 2px 8px;
    border-radius: 10px;
    display: inline-block;
    align-self: flex-start;
}

.suggested-product-add {
    width: 100%;
    padding: 8px 12px;
    font-size: 12px;
    margin-top: 4px;
}

.suggested-product-add:disabled {
    background: #f5f5f5;
    border-color: #e5e5e5;
    color: #999;
    cursor: not-allowed;
}


/* ===== BONUS REWARDS SLIDER ===== */

.cart-bonus-rewards-section {
    margin-top: 24px;
    padding-top: 24px;

    border-top: 1px solid #e5e5e5;
}

.cart-bonus-rewards-title {
    font-family: 'Circe', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #151515;
    margin-bottom: 16px;
}

.cart-bonus-link-hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
    text-decoration: none;
    margin-bottom: 5px;
}

.cart-bonus-link-hint:hover {
    opacity: 0.7;
}

.cart-bonus-link-hint svg {
    flex-shrink: 0;
    color: #2AABEE;
}

.cart-bonus-rewards-slider {
    overflow: hidden;
    position: relative;
}

.cart-bonus-rewards-slider .swiper-wrapper {
    display: flex;
}

.cart-bonus-rewards-slider .swiper-slide {
    width: 200px;
    flex-shrink: 0;
}

.bonus-reward-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.bonus-reward-card:hover {
    border-color: #151515;
}

.bonus-reward-card.locked {
    opacity: 0.6;
}

.bonus-reward-card.locked .bonus-reward-image {
    filter: grayscale(100%);
}

.bonus-reward-card.locked .bonus-reward-btn {
    background: #e5e5e5;
    color: #999;
    cursor: not-allowed;
}

.bonus-reward-card.selected {
    border-color: #151515;
    background: #f8f8f8;
}

.bonus-reward-card.selected .bonus-reward-btn {
    background: #4CAF50;
    color: #fff;
}

.bonus-reward-card.loading {
    opacity: 0.5;
    pointer-events: none;
}

.bonus-balance {
    font-weight: 400;
    font-size: 13px;
    color: #666;
}

.bonus-balance strong {
    color: #151515;
}

.bonus-rewards-hint {
    font-size: 13px;
    color: #666;
    margin: 0 0 12px 0;
    padding: 8px 12px;
    background: #f5f5f5;
    border-radius: 8px;
}

.bonus-rewards-hint strong {
    color: #151515;
}

.bonus-spent {
    font-size: 12px;
    color: #999;
    font-weight: 400;
}

.bonus-reward-image {
    width: 70px;
    height: 70px;
    min-width: 70px;
    border-radius: 8px;
    overflow: hidden;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bonus-reward-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bonus-reward-image .placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
}

.bonus-reward-info {
    flex: 1;
    min-width: 0;
}

.bonus-reward-name {
    font-family: 'Circe', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #151515;
    line-height: 1.3;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bonus-reward-btn {
    display: inline-block;
    background: #151515;
    color: #fff;
    font-family: 'Circe', sans-serif;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.bonus-reward-btn:hover:not(:disabled) {
    background: #333;
}

.bonus-reward-btn.free {
    background: #fff;
    color: #151515;
    border: 1px solid #151515;
}

.bonus-reward-btn.free:hover {
    background: #151515;
    color: #fff;
}

/* ===== BONUS POINTS SYSTEM ===== */

/* Base bonus badge style (like in product card) */
.product-bonus-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #F2F2F2;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    color: #151515;
    font-family: 'Circe', sans-serif;
}

/* Single Product Page Bonus */
.single-product-bonus {
    margin-top: 10px;
    margin-bottom: 20px;
}

/* Cart Item Bonus (in side cart) */
.cart-item-bonus {
    margin-top: 6px;
    font-size: 12px;
    padding: 4px 10px;
}

/* ===== WOOCOMMERCE BUTTONS STYLING ===== */

/* Single Product Add to Cart Button */
.single_add_to_cart_button {
    font-family: 'Circe', sans-serif !important;
    font-style: normal;
    font-weight: 700 !important;
    font-size: 14px !important;
    line-height: 1.4;
    color: rgb(255, 255, 255) !important;
    background: #151515 !important;
    border: none !important;
    padding: 10px 20px !important;
    text-transform: uppercase !important;
    letter-spacing: 0;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 6px !important;
}

.single_add_to_cart_button:hover {
    background: #333333 !important;
    color: rgb(255, 255, 255) !important;
}

/* Cart & Checkout Buttons */
.wc-proceed-to-checkout .checkout-button,
.woocommerce-cart-form button[type="submit"],
.woocommerce-checkout button[type="submit"],
.woocommerce-Button,
.woocommerce button.button {
    font-family: 'Circe', sans-serif !important;
    font-style: normal;
    font-weight: 700 !important;
    font-size: 14px !important;
    line-height: 1.4;
    color: rgb(255, 255, 255) !important;
    background: #151515 !important;
    border: none !important;
    padding: 10px 20px !important;
    text-transform: uppercase !important;
    letter-spacing: 0;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 6px !important;
}

.wc-proceed-to-checkout .checkout-button:hover,
.woocommerce-cart-form button[type="submit"]:hover,
.woocommerce-checkout button[type="submit"]:hover,
.woocommerce-Button:hover,
.woocommerce button.button:hover {
    background: #333333 !important;
    color: rgb(255, 255, 255) !important;
}

/* ===== PAGE LAYOUTS - UNIFIED WIDTH ===== */

/* Shop/Archive Pages - same width as homepage */
.site-main {
    overflow: hidden;
}
.woocommerce-page .site-main,
.archive.woocommerce .site-main,
.post-type-archive-product .site-main,
.page-template-page-wishlist .site-main,
.page-template-page-search .site-main {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* Single Product Page - same width as homepage */
.single-product .site-main {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Product Content Container */
.single-product .product {
    max-width: 100%;
}

/* ===== SHOP/ARCHIVE PAGE STYLES ===== */

/* Page Header */
.page-header {
    margin-bottom: 40px;
    text-align: center;
}

.page-title {
    font-family: 'Circe', sans-serif;
    font-size: 36px;
    font-weight: 700;
    color: #151515;
    margin-bottom: 15px;
}

.category-description {
    font-family: 'Circe', sans-serif;
    font-size: 16px;
    color: #666;
    max-width: 800px;
    margin: 0 auto;
}

/* No Products Found */
.no-products-found {
    text-align: center;
    padding: 60px 20px;
}

.no-products-found p {
    font-family: 'Circe', sans-serif;
    font-size: 18px;
    color: #666;
}

/* Hide default WooCommerce elements */
.woocommerce-result-count,
.woocommerce-ordering {
    display: none;
}

/* ===== 404 ERROR PAGE ===== */
.error-404-page {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
}

.error-404-content {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.error-404-title {
    font-size: 120px;
    font-weight: 700;
    color: #151515;
    line-height: 1;
    margin-bottom: 20px;
    font-family: 'Circe', sans-serif;
}

.error-404-subtitle {
    font-size: 32px;
    font-weight: 600;
    color: #151515;
    margin-bottom: 20px;
    font-family: 'Circe', sans-serif;
}

.error-404-text {
    font-size: 16px;
    color: #666;
    margin-bottom: 40px;
    font-family: 'Circe', sans-serif;
}

.error-404-btn {
    display: inline-block;
    font-family: 'Circe', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #fff;
    background: #151515;
    padding: 12px 30px;
    text-decoration: none;
    text-transform: uppercase;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.error-404-btn:hover {
    background: #333;
    color: #fff;
}

/* ===== SIDE AUTH PANEL ===== */
.auth-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 9998;
}

.auth-overlay.active {
    opacity: 1;
    visibility: visible;
}

.side-auth {
    position: fixed;
    top: 0;
    right: -500px;
    width: 100%;
    max-width: 500px;
    height: 100%;
    background: #fff;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    transition: right 0.3s ease;
    z-index: 9999;
    display: flex;
    flex-direction: column;
}

.side-auth.active {
    right: 0;
}

body.auth-open {
    overflow: hidden;
}

.side-auth__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    border-bottom: 1px solid var(--color-border);
}

.side-auth__header h3 {
    font-family: 'Circe', sans-serif;
    font-weight: 700;
    font-size: 24px;
    margin: 0;
}

.auth-close {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
}

.auth-close:hover {
    opacity: 0.6;
}

.side-auth__body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

/* Auth Forms */
.auth-form {
    display: none;
}

.auth-form.active {
    display: block;
}

.auth-form__description {
    color: var(--color-text-light);
    font-size: 14px;
    line-height: 1.36;
    margin-bottom: 24px;
}

.auth-submit-btn {
    width: 100%;
    margin-top: 8px;
}

.auth-links {
    margin-top: 24px;
    text-align: center;
    font-size: 14px;
    color: var(--color-text-light);
}

.auth-links p {
    margin: 0;
}

.auth-link {
    background: none;
    border: none;
    color: var(--color-text);
    font-family: 'Circe', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
    transition: opacity 0.2s ease;
}

.auth-link:hover {
    opacity: 0.7;
}

.auth-forgot-link {
    display: block;
    margin-bottom: 16px;
}

/* Page Auth — centered login on my-account pages */
.page-auth {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 40px 16px 60px;
}

.page-auth__card {
    width: 100%;
    max-width: 420px;
    padding: 40px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
}

.page-auth__title {
    font-family: 'Circe', sans-serif;
    font-weight: 700;
    font-size: 24px;
    margin: 0 0 24px;
}

/* Inside page-auth all forms are visible via .active, same as sidebar */
.page-auth .auth-form {
    display: none;
}

.page-auth .auth-form.active {
    display: block;
}

/* Hide register link on page auth (registration only via sidebar) */
.page-auth .auth-form--login .auth-links p {
    display: none;
}

/* Form Checkbox */
.form-group--checkbox label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-weight: 400;
}

.form-group--checkbox input[type="checkbox"] {
    width: auto;
    cursor: pointer;
}

/* Form Messages */
.form-error {
    background: #ffebee;
    color: #c62828;
    padding: 12px;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 16px;
}

.form-success {
    background: #e8f5e9;
    color: #2e7d32;
    padding: 12px;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 16px;
}

/* Logged In State */
.auth-logged-in {
    text-align: center;
}

.user-avatar {
    margin-bottom: 16px;
}

.user-avatar img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}

.user-info h4 {
    font-family: 'Circe', sans-serif;
    font-weight: 700;
    font-size: 20px;
    margin: 0 0 4px 0;
}

.user-info p {
    color: var(--color-text-light);
    font-size: 14px;
    margin: 0;
}

.user-bonus-section {
    margin-top: 10px;
    font-size: 16px;
}

.tg-link-btn,
.tg-link-btn:hover,
.tg-link-btn:focus {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 20px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: #f5f5f5;
    color: var(--color-text);
    font-family: 'Circe', sans-serif;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none !important;
    transition: all 0.2s ease;
    margin-top: 16px;
}

.tg-link-btn:hover {
    border-color: var(--color-text);
    background: #f9f9f9;
}

.tg-link-btn svg {
    flex-shrink: 0;
}

.user-menu {
    margin: 32px 0;
    text-align: left;
}

.user-menu__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    margin-bottom: 12px;
    text-decoration: none;
    color: var(--color-text);
    font-family: 'Circe', sans-serif;
    font-weight: 500;
    font-size: 15px;
    transition: all 0.2s ease;
}

.user-menu__item:last-child {
    margin-bottom: 0;
}

.user-menu__item:hover {
    border-color: var(--color-text);
    background: #f9f9f9;
}

.user-menu__item svg {
    flex-shrink: 0;
    stroke: var(--color-text);
}

.auth-logout-btn {
    width: 100%;
}

.btn--outline {
    background: transparent;
    border: 1px solid var(--color-text);
    color: var(--color-text);
}

.btn--outline:hover {
    background: var(--color-text);
    color: #fff;
}

/* Auth Toggle Button */
.auth-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .side-cart,
    .side-auth {
        max-width: 100%;
        right: -100%;
    }
}

/* ===== MY ACCOUNT PAGE ===== */

/* Hide page-level title on my-account — title is inside content */
.woocommerce-account .page-content__header {
    display: none;
}

.woocommerce-account .site-main {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Override woocommerce.css flex layout — we use custom .account-layout */
.woocommerce-account .woocommerce {
    display: block;
    gap: 0;
}

/* Remove WooCommerce default top border/hr */
.woocommerce-account .woocommerce-MyAccount-content > h2:first-child,
.woocommerce-account .woocommerce hr {
    border: none;
}

.woocommerce-account .woocommerce-MyAccount-content::before {
    display: none;
}

.account-layout {
    display: flex;
    gap: 0;
    width: 100%;

}

.account-sidebar {
    width: 320px;
    min-width: 320px;
    padding: 30px 30px 0 0;
    border-right: 1px solid var(--color-border);
}

.account-sidebar__name {
    font-family: 'Circe', sans-serif;
    font-weight: 700;
    font-size: 22px;
    margin: 0 0 16px 0;
    color: var(--color-text);
}

.account-sidebar__bonus {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: var(--color-text);
    margin-bottom: 16px;
}

.account-sidebar__bonus svg {
    flex-shrink: 0;
}

a.account-sidebar__bonus,
a.account-sidebar__bonus:hover,
a.account-sidebar__bonus:focus {
    text-decoration: none !important;
    color: var(--color-text);
    transition: opacity 0.2s ease;
}

a.account-sidebar__bonus:hover {
    opacity: 0.7;
}

.account-sidebar .tg-link-btn {
    margin-top: 0;
    margin-bottom: 32px;
}

.account-nav {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--color-border);
    padding-top: 24px;
}

.account-nav__item,
.account-nav__item:hover,
.account-nav__item:focus {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    text-decoration: none !important;
    color: var(--color-text);
    font-family: 'Circe', sans-serif;
    font-size: 15px;
    font-weight: 500;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.account-nav__item:hover {
    background: #f5f5f5;
}

.account-nav__item--active {
    background: #f0f0f0;
}

.account-nav__item--logout {
    color: #E53935;
}

.account-nav__item--logout svg {
    stroke: #E53935;
}

.account-nav__item svg {
    flex-shrink: 0;
}

.account-content {
    flex: 1;
    padding: 40px 0 40px 60px;
}

.account-content .woocommerce-MyAccount-content {
    max-width: 100%;
}

/* Hide default WooCommerce navigation */
.woocommerce-account .woocommerce-MyAccount-navigation {
    display: none;
}

/* Style WooCommerce content inside account */
.woocommerce-account .woocommerce-MyAccount-content {
    width: 100%;
    float: none;
    padding: 0;
}

@media (max-width: 768px) {
    .account-layout {
        flex-direction: column;
    }

    .account-sidebar {
        width: 100%;
        min-width: 100%;
        padding: 24px 0;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
    }

    .account-content {
        padding: 24px 0;
    }
}

/* Account section title */
.account-section-title {
    font-family: 'Circe', sans-serif;
    font-weight: 700;
    font-size: 28px;
    margin: 0 0 24px 0;
    color: var(--color-text);
}

/* Orders tabs */
.orders-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 32px;
}

.orders-tabs__item {
    padding: 12px 24px;
    font-family: 'Circe', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text-light);
    text-decoration: none !important;
    border: 1px solid var(--color-border);
    background: #fff;
    transition: all 0.2s ease;
}

.orders-tabs__item:first-child {
    border-radius: 8px 0 0 8px;
}

.orders-tabs__item:last-child {
    border-radius: 0 8px 8px 0;
}

.orders-tabs__item + .orders-tabs__item {
    border-left: none;
}

.orders-tabs__item:hover {
    color: var(--color-text);
    background: #f9f9f9;
}

.orders-tabs__item--active {
    color: var(--color-text);
    font-weight: 600;
    background: #f0f0f0;
    border-color: var(--color-border);
}

/* Orders empty state */
.orders-empty {
    margin-top: 160px;
    width: 100%;
    background: #f5f5f5;
    border-radius: 12px;
    padding: 60px 40px;
    text-align: center;
}

.orders-empty__title {
    font-family: 'Circe', sans-serif;
    font-weight: 700;
    font-size: 22px;
    margin: 0 0 8px 0;
    color: var(--color-text);
}

.orders-empty__text {
    color: var(--color-text-light);
    font-size: 15px;
    margin: 0 0 24px 0;
}

.orders-empty__btn {
    display: inline-block;
}
@media  screen and (max-width: 767px) {
    .orders-empty {
        margin-top: 0;
    }
}
/* Orders pagination */
.orders-pagination {
    margin-top: 24px;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.orders-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    font-size: 13px;
    color: #333;
    text-decoration: none;
    transition: all 0.2s;
}

.orders-pagination .page-numbers:hover {
    border-color: #151515;
    color: #151515;
}

.orders-pagination .page-numbers.current {
    background: #151515;
    color: #fff;
    border-color: #151515;
}

/* Orders list */
.orders-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.order-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    text-decoration: none !important;
    color: var(--color-text);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.order-card:hover {
    border-color: var(--color-text);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.order-card__thumb {
    flex-shrink: 0;
}

.order-card__thumb img {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    object-fit: cover;
}

.order-card__info {
    flex: 1;
}

.order-card__number {
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 4px;
}

.order-card__meta {
    display: flex;
    gap: 12px;
    font-size: 13px;
    color: var(--color-text-light);
    margin-bottom: 4px;
}

.order-card__status--processing { color: #F59E0B; }
.order-card__status--completed  { color: #10B981; }
.order-card__status--cancelled  { color: #EF4444; }
.order-card__status--on-hold    { color: #6B7280; }
.order-card__status--pending    { color: #8B5CF6; }

.order-card__total {
    font-weight: 600;
    font-size: 15px;
}

.order-card__pay-btn {
    flex-shrink: 0;
    padding: 8px 16px;
    background: var(--color-text);
    color: #fff;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.2s;
    cursor: pointer;
}

.order-card__pay-btn:hover {
    opacity: 0.8;
}

/* Hide WooCommerce default notices on account */
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-notice--info {
    border-top: none;
}

/* ===== VIEW ORDER PAGE ===== */

.view-order__back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--color-text-light);
    text-decoration: none !important;
    margin-bottom: 24px;
    transition: color 0.2s ease;
}

.view-order__back:hover {
    color: var(--color-text);
}

.view-order__header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 8px;
}

.view-order__header .account-section-title {
    margin-bottom: 0;
}

.view-order__status {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.view-order__meta {
    display: flex;
    gap: 20px;
    font-size: 14px;
    color: var(--color-text-light);
    margin-bottom: 32px;
}

.view-order__section {
    margin-bottom: 32px;
}

.view-order__section-title {
    font-family: 'Circe', sans-serif;
    font-weight: 700;
    font-size: 18px;
    margin: 0 0 16px 0;
    color: var(--color-text);
}

.view-order__items {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
}

.view-order__item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
}

.view-order__item + .view-order__item {
    border-top: 1px solid var(--color-border);
}

.view-order__item-thumb img {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    object-fit: cover;
}

.view-order__item-info {
    flex: 1;
}

.view-order__item-name {
    font-weight: 500;
    font-size: 15px;
    margin-bottom: 2px;
}

.view-order__item-name a {
    color: inherit;
    text-decoration: none;
}

.view-order__item-name a:hover {
    color: var(--color-primary);
}

.view-order__item-qty {
    font-size: 13px;
    color: var(--color-text-light);
}

.view-order__item-total {
    font-weight: 600;
    font-size: 15px;
    white-space: nowrap;
}

/* View order totals */
.view-order__totals {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 32px;
}

.view-order__totals-row {
    display: flex;
    justify-content: space-between;
    padding: 14px 20px;
    font-size: 14px;
}

.view-order__totals-row + .view-order__totals-row {
    border-top: 1px solid var(--color-border);
}

.view-order__totals-row--total {
    background: #f9f9f9;
    font-weight: 700;
    font-size: 16px;
}

.view-order__totals-label {
    color: var(--color-text-light);
}

.view-order__totals-row--total .view-order__totals-label {
    color: var(--color-text);
}

/* Addresses on view order */
.view-order__addresses {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 32px;
}

.view-order__address {
    background: #f9f9f9;
    border-radius: 12px;
    padding: 24px;
}

.view-order__address .view-order__section-title {
    margin-bottom: 12px;
}

.view-order__address address {
    font-style: normal;
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text);
}

.view-order__address p {
    font-size: 14px;
    margin: 4px 0 0;
    color: var(--color-text-light);
}

/* Order notes */
.view-order__notes {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.view-order__note {
    padding: 16px 20px;
    background: #f9f9f9;
    border-radius: 10px;
}

.view-order__note-date {
    display: block;
    font-size: 12px;
    color: var(--color-text-light);
    margin-bottom: 6px;
}

.view-order__note-text p {
    margin: 0;
    font-size: 14px;
}

/* Bonus gift item */
.view-order__item--bonus {
    background: #fef9e7;
}

.view-order__item-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 8px;
    vertical-align: middle;
}

.view-order__item-badge--bonus {
    background: #FEF3C7;
    color: #92400E;
}

.view-order__item-points {
    margin-left: 8px;
    font-size: 12px;
    color: #92400E;
}

.view-order__item-free {
    font-weight: 600;
    color: #10B981;
    font-size: 14px;
}

/* Extras: promo code, bonuses */
.view-order__extras {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 32px;
}

.view-order__extra-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    font-size: 14px;
}

.view-order__extra-row + .view-order__extra-row {
    border-top: 1px solid var(--color-border);
}

.view-order__extra-icon {
    flex-shrink: 0;
    color: var(--color-text-light);
}

.view-order__extra-icon--spent {
    color: #F59E0B;
}

.view-order__extra-icon--earned {
    color: #10B981;
}

.view-order__extra-value {
    margin-left: auto;
    font-weight: 600;
    white-space: nowrap;
}

.view-order__extra-value--discount {
    color: #EF4444;
}

.view-order__extra-value--spent {
    color: #F59E0B;
}

.view-order__extra-value--earned {
    color: #10B981;
}

/* Reorder button */
.view-order__actions {
    margin-top: 32px;
}

@media (max-width: 768px) {
    .view-order__meta {
        flex-direction: column;
        gap: 5px;
        margin-bottom: 20px;
    }
    .view-order__addresses {
        grid-template-columns: 1fr;
    }

    .view-order__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* ===== ADDRESSES PAGE ===== */

.address-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 32px;
}

.address-tabs__item {
    padding: 12px 24px;
    font-family: 'Circe', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text-light);
    text-decoration: none !important;
    border: 1px solid var(--color-border);
    background: #fff;
    transition: all 0.2s ease;
}

.address-tabs__item:first-child {
    border-radius: 8px 0 0 8px;
}

.address-tabs__item:last-child {
    border-radius: 0 8px 8px 0;
}

.address-tabs__item + .address-tabs__item {
    border-left: none;
}

.address-tabs__item:hover {
    color: var(--color-text);
    background: #f9f9f9;
}

.address-tabs__item--active {
    color: var(--color-text);
    font-weight: 600;
    background: #f0f0f0;
    border-color: var(--color-border);
}

.address-card {
    background: #f9f9f9;
    border-radius: 12px;
    padding: 32px;
}

.address-card__text {
    font-style: normal;
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-text);
    margin-bottom: 24px;
}

.address-card__empty {
    font-size: 15px;
    color: var(--color-text-light);
    margin: 0 0 24px;
}

.address-card__btn {
    display: inline-block;
}

/* ===== ACCOUNT TABS (reusable for edit-account, addresses) ===== */

.account-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 32px;
}

.account-tabs__item {
    padding: 12px 24px;
    font-family: 'Circe', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text-light);
    text-decoration: none !important;
    border: 1px solid var(--color-border);
    background: #fff;
    transition: all 0.2s ease;
}

.account-tabs__item:first-child {
    border-radius: 8px 0 0 8px;
}

.account-tabs__item:last-child {
    border-radius: 0 8px 8px 0;
}

.account-tabs__item + .account-tabs__item {
    border-left: none;
}

.account-tabs__item:hover {
    color: var(--color-text);
    background: #f9f9f9;
}

.account-tabs__item--active {
    color: var(--color-text);
    font-weight: 600;
    background: #f0f0f0;
    border-color: var(--color-border);
}

/* ===== BONUS HISTORY ===== */

.bonus-history-balance {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;
    background: #f9f9f9;
    border-radius: 12px;
    margin-bottom: 16px;
}

.bonus-history-balance + .bonus-history {
    margin-top: 16px;
}

.bonus-history-balance--frozen {
    background: #FFF7ED;
    margin-bottom: 32px;
}

.bonus-history-balance--frozen .bonus-history-balance__icon {
    background: #FFEDD5;
    color: #EA580C;
}

.bonus-history-balance--frozen .bonus-history-balance__amount {
    font-size: 22px;
    color: #EA580C;
}

.bonus-history-balance__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FEF3C7;
    border-radius: 50%;
    color: #F59E0B;
    flex-shrink: 0;
}

.bonus-history-balance__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bonus-history-balance__label {
    font-size: 13px;
    color: var(--color-text-light);
}

.bonus-history-balance__amount {
    font-size: 28px;
    font-weight: 700;
    font-family: 'Circe', sans-serif;
    color: var(--color-text);
}

.bonus-history {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
}

.bonus-history__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    gap: 16px;
}

.bonus-history__item + .bonus-history__item {
    border-top: 1px solid var(--color-border);
}

.bonus-history__left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.bonus-history__icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}

.bonus-history__icon--earned {
    background: #ecfdf5;
    color: #10B981;
}

.bonus-history__icon--refund {
    background: #ecfdf5;
    color: #10B981;
}

.bonus-history__icon--spent {
    background: #FEF3C7;
    color: #F59E0B;
}

.bonus-history__icon--pending {
    background: #EFF6FF;
    color: #3B82F6;
}

.bonus-history__details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.bonus-history__desc {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bonus-history__date {
    font-size: 12px;
    color: var(--color-text-light);
}

.bonus-history__amount {
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    flex-shrink: 0;
}

.bonus-history__amount--earned,
.bonus-history__amount--refund {
    color: #10B981;
}

.bonus-history__amount--spent {
    color: #F59E0B;
}

.bonus-history__amount--pending {
    color: #3B82F6;
}

.bonus-history__empty {
    text-align: center;
    padding: 60px 40px;
    background: #f9f9f9;
    border-radius: 12px;
}

.bonus-history__empty p {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--color-text);
}

.bonus-history__empty span {
    font-size: 14px;
    color: var(--color-text-light);
}

@media (max-width: 768px) {
    .bonus-history__item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .bonus-history__amount {
        margin-left: 44px;
    }
}

/* ===== ACCOUNT FORMS (edit-account, edit-address) ===== */

.account-form__fields {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.account-form__row--half {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.account-form__field {
    display: flex;
    flex-direction: column;
}

.account-form__field label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 14px;
    color: var(--color-text);
}

.account-form__field label .required {
    color: #E53935;
}

.account-form__input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-family: 'Circe', sans-serif;
    font-size: 14px;
    transition: border-color 0.2s ease;
    background: #fff;
}

.account-form__input:focus {
    outline: none;
    border-color: var(--color-text);
}

.account-form__hint {
    font-size: 12px;
    color: var(--color-text-light);
    margin-top: 6px;
}

.account-form__section {
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid var(--color-border);
}

.account-form__section-title {
    font-family: 'Circe', sans-serif;
    font-weight: 700;
    font-size: 18px;
    margin: 0 0 20px 0;
    color: var(--color-text);
}

.account-form__submit {
    margin-top: 32px;
}

.account-form__submit .btn {
    min-width: 180px;
}

/* Style WooCommerce form fields inside account pages (address forms) */
.account-form .form-row {
    margin: 0 0 20px;
    padding: 0;
}

.account-form .form-row label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 14px;
    color: var(--color-text);
}

.account-form .form-row label .required {
    color: #E53935;
}

.account-form .form-row input.input-text,
.account-form .form-row textarea,
.account-form .form-row select {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-family: 'Circe', sans-serif;
    font-size: 14px;
    transition: border-color 0.2s ease;
    background: #fff;
}

.account-form .form-row input.input-text:focus,
.account-form .form-row textarea:focus,
.account-form .form-row select:focus {
    outline: none;
    border-color: var(--color-text);
}

/* Two columns for first/last fields */
.account-form .woocommerce-address-fields__field-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 0 20px;
}

.account-form .form-row-first,
.account-form .form-row-last {
    width: calc(50% - 10px);
    float: none;
}

.account-form .form-row-wide {
    width: 100%;
    float: none;
}

/* Select2 inside account forms */
.account-form .select2-container .select2-selection--single {
    height: 46px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 0 16px;
}

.account-form .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 46px;
    font-size: 14px;
    padding: 0;
}

.account-form .select2-container .select2-selection--single .select2-selection__arrow {
    height: 46px;
    right: 12px;
}

/* WooCommerce notices inside account */
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-info {
    border-radius: 8px;
    margin-bottom: 24px;
    padding: 16px 20px;
    font-size: 14px;
}

.woocommerce-account .woocommerce-message {
    background: #f0fdf4;
    border-top: none;
    border-left: 4px solid #10B981;
    color: #166534;
}

.woocommerce-account .woocommerce-error {
    background: #fef2f2;
    border-top: none;
    border-left: 4px solid #EF4444;
    color: #991b1b;
}

.woocommerce-account .woocommerce-message::before,
.woocommerce-account .woocommerce-error::before,
.woocommerce-account .woocommerce-info::before {
    display: none;
}

/* Clean up WooCommerce form defaults inside account */
.woocommerce-account .woocommerce-EditAccountForm > fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

.woocommerce-account .woocommerce-EditAccountForm > fieldset > legend {
    display: none;
}

/* Hide original WooCommerce default buttons (replaced by custom templates) */
.woocommerce-account .woocommerce-address-fields p > .button:not(.btn),
.woocommerce-account .woocommerce-EditAccountForm p > .woocommerce-Button:not(.btn) {
    display: none;
}

@media (max-width: 768px) {
    .account-form__row--half {
        grid-template-columns: 1fr;
    }

    .account-form .form-row-first,
    .account-form .form-row-last {
        width: 100%;
    }

    .address-tabs {
        flex-wrap: wrap;
    }

    .address-tabs__item:first-child {
        border-radius: 8px 0 0 8px;
    }

    .address-tabs__item:last-child {
        border-radius: 0 8px 8px 0;
    }
}

/* ===== FORTUNE WHEEL POPUP ===== */
.fortune-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.fortune-overlay.active {
    opacity: 1;
    visibility: visible;
}

.fortune-popup {
    background: #fff;
    border-radius: 16px;
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    position: relative;
    display: flex;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.fortune-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    background: #f5f5f5;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
}

.fortune-close:hover {
    background: #e5e5e5;
}

.fortune-close svg {
    width: 20px;
    height: 20px;
    stroke: #151515;
}

/* Fortune Slot Section */
.fortune-slot-section {
    width: 400px;
    flex-shrink: 0;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #1a1a1a;
    border-radius: 16px 0 0 16px;
    position: relative;
}

.fortune-slot-container {
    position: relative;
    width: 100%;
    height: 500px;

}

/* Slot Track */
.fortune-slot-track {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

.fortune-slot-items {
    display: flex;
    flex-direction: column;
    gap: 20px;
    transition: transform 0.1s linear;
}

.fortune-slot-items.spinning {
    transition: none;
}

.fortune-slot-items.stopping {
    transition: transform 3s cubic-bezier(0.15, 0.85, 0.3, 1);
}

/* Prize Cards */
.fortune-prize-card {
    width: 100%;
    height: 140px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    opacity: 0.5;
    transition: opacity 0.3s;
}

.fortune-prize-card.active {
    opacity: 1;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

.fortune-prize-card__overlay {
    position: absolute;
    inset: 0;
    /* background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.7) 100%); */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 16px 20px;
}

.fortune-prize-card__title {
    font-family: 'Circe', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    line-height: 1.3;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.fortune-prize-card__subtitle {
    font-family: 'Circe', sans-serif;
    font-size: 13px;
    color: rgba(255,255,255,0.85);
    margin-top: 4px;
}

/* Selection Indicator - С‚РѕС‡РЅРѕ СЃРѕРІРїР°РґР°РµС‚ СЃ РєР°СЂС‚РѕС‡РєРѕР№ */
.fortune-slot-indicator {
    position: absolute;
    top: 50%;
    left: -3px;
    right: -3px;
    transform: translateY(-50%);
    height: 146px;
   
    border-radius: 15px;
    pointer-events: none;
    z-index: 3;
   
    box-sizing: border-box;
}

.fortune-slot-indicator::before,
.fortune-slot-indicator::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
}

.fortune-slot-indicator::before {
    left: -18px;
    border-right: 15px solid #fff;
}

.fortune-slot-indicator::after {
    right: -18px;
    border-left: 15px solid #fff;
}

/* Gradient masks for slot */
.fortune-slot-track::before,
.fortune-slot-track::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 120px;
    z-index: 2;
    pointer-events: none;
}

.fortune-slot-track::before {
    top: 0;
    background: linear-gradient(to bottom, #1a1a1a 0%, transparent 100%);
}

.fortune-slot-track::after {
    bottom: 0;
    background: linear-gradient(to top, #1a1a1a 0%, transparent 100%);
}

/* Fortune Form Section */
.fortune-form-section {
    flex: 1;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.fortune-title {
    font-family: 'Circe', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #151515;
    margin-bottom: 16px;
    line-height: 1.2;
}

.fortune-description {
    font-family: 'Circe', sans-serif;
    font-size: 15px;
    color: #666;
    line-height: 1.36;
    margin-bottom: 24px;
}

/* Fortune Form */
.fortune-form .form-group {
    margin-bottom: 16px;
}

.fortune-form .form-group label {
    display: block;
    font-family: 'Circe', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #151515;
    margin-bottom: 8px;
}

.fortune-form .form-group label .required {
    color: #e53935;
}

.fortune-form .form-group input {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    font-family: 'Circe', sans-serif;
    font-size: 15px;
    transition: border-color 0.2s ease;
}

.fortune-form .form-group input:focus {
    outline: none;
    border-color: #151515;
}

.fortune-form .form-group input::placeholder {
    color: #999;
}

.fortune-spin-btn {
    width: 100%;
    padding: 16px 24px;
    background: #151515;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-family: 'Circe', sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 8px;
}

.fortune-spin-btn:hover {
    background: #333;
}

.fortune-spin-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}

/* Privacy Checkbox */
.fortune-privacy {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 16px;
    font-size: 12px;
    color: #666;
    line-height: 1.5;
}

.fortune-privacy input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    flex-shrink: 0;
    cursor: pointer;
}

.fortune-privacy a {
    color: #151515;
    text-decoration: underline;
}

.fortune-privacy a:hover {
    color: #666;
}

/* Contact Form 7 Styles inside Fortune Popup */
.fortune-form-wrapper .wpcf7 {
    width: 100%;
}

.fortune-form-wrapper .wpcf7-form p {
    margin-bottom: 16px;
}

.fortune-form-wrapper .wpcf7-form label {
    display: block;
    font-family: 'Circe', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #151515;
    margin-bottom: 8px;
}

.fortune-form-wrapper .wpcf7-form-control-wrap {
    display: block;
}

.fortune-form-wrapper .wpcf7-form input[type="text"],
.fortune-form-wrapper .wpcf7-form input[type="email"] {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    font-family: 'Circe', sans-serif;
    font-size: 15px;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.fortune-form-wrapper .wpcf7-form input[type="text"]:focus,
.fortune-form-wrapper .wpcf7-form input[type="email"]:focus {
    outline: none;
    border-color: #151515;
}

.fortune-form-wrapper .wpcf7-form input[type="text"]::placeholder,
.fortune-form-wrapper .wpcf7-form input[type="email"]::placeholder {
    color: #999;
}

.fortune-form-wrapper .wpcf7-form .wpcf7-acceptance {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 16px;
    font-size: 12px;
    color: #666;
    line-height: 1.5;
}

.fortune-form-wrapper .wpcf7-form .wpcf7-acceptance input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    flex-shrink: 0;
    cursor: pointer;
}

.fortune-form-wrapper .wpcf7-form .wpcf7-acceptance a {
    color: #151515;
    text-decoration: underline;
}

.fortune-form-wrapper .wpcf7-form .wpcf7-submit {
    width: 100%;
    padding: 16px 24px;
    background: #151515;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-family: 'Circe', sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 8px;
}

.fortune-form-wrapper .wpcf7-form .wpcf7-submit:hover {
    background: #333;
}

.fortune-form-wrapper .wpcf7-form .wpcf7-submit:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.fortune-form-wrapper .wpcf7-form .wpcf7-response-output {
    margin: 16px 0 0 0;
    padding: 12px 16px;
    border-radius: 8px;
    font-family: 'Circe', sans-serif;
    font-size: 14px;
}

.fortune-form-wrapper .wpcf7-form .wpcf7-not-valid-tip {
    color: #e53935;
    font-size: 12px;
    margin-top: 4px;
}

/* Result Screen */
.fortune-result {
    display: none;
    text-align: center;
    padding: 20px 0;
}

.fortune-result.active {
    display: block;
}

.fortune-result-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    background: linear-gradient(135deg, #151515 0%, #333 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fortune-result-icon svg {
    width: 40px;
    height: 40px;
    stroke: #fff;
}

.fortune-result-title {
    font-family: 'Circe', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #151515;
    margin-bottom: 12px;
}

.fortune-result-prize {
    font-family: 'Circe', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #151515;
    background: #f5f5f5;
    padding: 16px 24px;
    border-radius: 8px;
    margin-bottom: 16px;
    display: inline-block;
}

.fortune-result-description {
    font-family: 'Circe', sans-serif;
    font-size: 14px;
    color: #666;
    line-height: 1.36;
    margin-bottom: 24px;
}

.fortune-result-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: #151515;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-family: 'Circe', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.2s ease;
}

.fortune-result-btn:hover {
    background: #333;
    color: #fff;
}

.fortune-result-btn svg {
    width: 20px;
    height: 20px;
}

/* Prizes Tab */
.fortune-prizes-tab {
    position: absolute;
    top: 16px;
    right: 70px;
    background: #f5f5f5;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-family: 'Circe', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #151515;
    cursor: pointer;
    transition: all 0.2s ease;
}

.fortune-prizes-tab:hover {
    background: #e5e5e5;
}

/* Prizes List Panel - Grid Style */
.fortune-prizes-panel {
    display: none;
    position: absolute;
    top: 0;
   width: calc(100% - 400px);
    right: 0;
    bottom: 0;
    background: #fff;
    z-index: 25;
    padding: 20px;
    overflow-y: auto;
    border-radius: 16px;
}

.fortune-prizes-panel.active {
    display: flex;
    flex-direction: column;
}

.fortune-prizes-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f0f0f0;
}

.fortune-prizes-back {
    width: 40px;
    height: 40px;
    background: #f5f5f5;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.fortune-prizes-back:hover {
    background: #e5e5e5;
}

.fortune-prizes-back svg {
    stroke: #151515;
}

.fortune-prizes-heading {
    font-family: 'Circe', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #151515;
    margin: 0;
    flex: 1;
    text-align: center;
    padding-right: 40px;
}

.fortune-prizes-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    flex: 1;
}

.fortune-prizes-card {
    position: relative;
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    cursor: default;
}

.fortune-prizes-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 30%, rgba(0,0,0,0.7) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 12px;
}

.fortune-prizes-card__name {
    font-family: 'Circe', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.fortune-prizes-card__subtitle {
    font-family: 'Circe', sans-serif;
    font-size: 11px;
    color: rgba(255,255,255,0.85);
    margin-top: 2px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* Spinning State */
.fortune-wheel.spinning {
    animation: none;
}

/* Mobile Responsive */
@media (max-width: 868px) {
    .fortune-popup {
        flex-direction: column;
        max-height: 95vh;
        overflow-y: scroll;
    }

    .fortune-slot-section {
        width: 100%;
        height: 320px;
        padding: 20px;
        border-radius: 16px 16px 0 0;
    }

    .fortune-slot-container {
        height: 280px;
    }

    .fortune-prize-card {
        height: 100px;
    }

    .fortune-slot-indicator {
        height: 106px; /* 100px + 6px border */
    }

    .fortune-slot-track::before,
    .fortune-slot-track::after {
        height: 80px;
    }

    .fortune-form-section {
        padding: 30px 20px;
    }

    .fortune-title {
        font-size: 24px;
    }

    .fortune-prizes-tab {
        top: 12px;
        right: 60px;
        padding: 8px 14px;
        font-size: 12px;
    }

    .fortune-close {
        width: 36px;
        height: 36px;
    }

    .fortune-prizes-heading {
        font-size: 18px;
        padding-right: 0;
    }

    .fortune-prizes-grid {
        gap: 10px;
    }

    .fortune-prizes-card__name {
        font-size: 12px;
    }

    .fortune-prizes-card__subtitle {
        font-size: 10px;
    }
}

/* ===== VIDEO CAROUSEL ===== */
.video-carousel-section {
    padding: 60px 0;
    overflow: hidden;
}

.video-carousel {
    position: relative;
    padding: 0 50px;
}

.video-carousel-swiper {
    overflow: visible !important;
}

.video-carousel-swiper.no-init-transition .swiper-slide,
.video-carousel-swiper.no-init-transition .video-carousel__video-container {
    transition: none !important;
}

.video-carousel-swiper .swiper-wrapper {
    align-items: center;
}

.video-carousel__slide {
    width: 320px;
    height: auto;
    transition: all 0.4s ease;
}

/* Active slide */


.video-carousel__slide.swiper-slide-active .video-carousel__video-container {
    aspect-ratio: 2 / 4;
    border-radius: 16px;
}

.video-carousel__card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: transparent;
    border-radius: 16px;
    overflow: visible;
}

/* Video Container */
.video-carousel__video-container {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 3;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    background: #000;
    transition: all 0.4s ease;
}

.video-carousel__video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
    min-height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.video-carousel__video.is-playing {
    opacity: 1;
}

.video-carousel__poster {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
    min-height: 100%;
    object-fit: cover;
    border-radius: 14px;
    transition: opacity 0.3s ease;
}

.video-carousel__video.is-playing + .video-carousel__poster {
    opacity: 0;
}

/* Video Controls */
.video-carousel__controls {
    position: absolute;
    bottom: 12px;
    left: 12px;
    display: flex;
    gap: 8px;
    z-index: 10;
}

.video-carousel__mute-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s ease;
}

.video-carousel__mute-btn:hover {
    background: rgba(0, 0, 0, 0.7);
}

.video-carousel__mute-btn svg {
    width: 16px;
    height: 16px;
}

/* Product Card */
.video-carousel__product {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

.video-carousel__product:hover {
    border-color: #ccc;
    color: inherit;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.video-carousel__product-image {
    flex-shrink: 0;
    width: 70px;
    height: 70px;
    border-radius: 8px;
    overflow: hidden;
    background: #f5f5f5;
    position: relative;
}

.video-carousel__product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

/* Discount Badge */
.video-carousel__discount-badge {
    position: absolute;
    top: 4px;
    left: 4px;
    background: #e53935;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 4px;
    line-height: 1.2;
    z-index: 1;
}

.video-carousel__product-info {
    flex: 1;
    min-width: 0;
}

.video-carousel__product-name {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #151515;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Price Row */
.video-carousel__price-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.video-carousel__product-price {
    font-size: 15px;
    font-weight: 700;
    color: #151515;
}

.video-carousel__product-price del {
    color: #999;
    font-weight: 400;
    font-size: 13px;
    text-decoration: line-through;
}

.video-carousel__product-price ins {
    text-decoration: none;
    color: #151515;
    font-weight: 700;
}

.video-carousel__old-price {
    font-size: 13px;
    color: #999;
    text-decoration: line-through;
    font-weight: 400;
}

/* Bonus Badge */
.video-carousel__product-bonus {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    color: #555;
    background: #f5f5f5;
    padding: 4px 10px;
    border-radius: 12px;
    margin-top: 8px;
    border: 1px solid #e8e8e8;
    font-weight: 500;
}

.video-carousel__expand-btn {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #bbb;
    transform: rotate(90deg);
    transition: color 0.3s ease;
    margin-left: auto;
    align-self: center;
}

.video-carousel__product:hover .video-carousel__expand-btn {
    color: #666;
}

/* Navigation — video-carousel specific overrides */
.video-carousel__nav {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.video-carousel__nav:hover {
    background: #151515;
    border-color: #151515;
    color: #fff;
}

/* Responsive */
@media (max-width: 1400px) {
    .video-carousel__slide {
        width: 280px;
    }
    .video-carousel__slide.swiper-slide-active {
        width: 340px;
    }
}

@media (max-width: 1200px) {
        .video-carousel {
        padding: 0; margin: 0 -20px;
    }
    .video-carousel__slide {
        width: 260px;
    }
    .video-carousel__slide.swiper-slide-active {
        width: 320px;
    }
}

@media (max-width: 992px) {

    .video-carousel__slide {
        width: 240px;
    }
    .video-carousel__slide.swiper-slide-active {
        width: 300px;
    }
}

@media (max-width: 768px) {
    .video-carousel-section {
        padding: 40px 0;
    }
   
    .video-carousel__slide {
        width: 200px;
    }
    .video-carousel__slide.swiper-slide-active {
        width: 260px;
    }
}

@media (max-width: 576px) {

    .video-carousel-swiper {
        padding: 0;
    }
    .video-carousel__slide {
        width: 180px;
    }
    .video-carousel__slide.swiper-slide-active {
        width: 240px;
    }

    .video-carousel__product {
        padding: 10px;
    }

    .video-carousel__product-image {
        width: 50px;
        height: 50px;
    }

    .video-carousel__product-name {
        font-size: 12px;
    }

    .video-carousel__product-bonus {
        font-size: 10px;
        padding: 2px 6px;
    }

    .video-carousel__discount-badge {
        font-size: 9px;
        padding: 1px 4px;
    }
}

/* ===== SINGLE PRODUCT PAGE ===== */

.single-product-page {
    padding-bottom: 60px;
}

/* Product Single Layout */
.product-single {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    padding: 40px 0;
}

/* Gallery */
.product-single__gallery {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.product-gallery__thumbs-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 80px;
    flex-shrink: 0;
}

.product-gallery__thumbs-arrow {
    display: none;
    flex-shrink: 0;
    position: static;
    transform: none;
    width: 36px;
    height: 36px;
}

.product-gallery__thumbs-wrapper.has-overflow .product-gallery__thumbs-arrow {
    display: flex;
}

.product-gallery__thumbs {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 80px;
    overflow-y: scroll;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.product-gallery__thumbs::-webkit-scrollbar {
    display: none;
}

.product-gallery__thumb {
    width: 80px;
    min-height: 100px;
    height: 100px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.3s;
}

.product-gallery__thumb:hover,
.product-gallery__thumb.active {
    border-color: #151515;
}

.product-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.product-gallery__main {
    flex: 1;
    position: relative;
    background: #f8f8f8;
    border-radius: 16px;
    width: 100%;
    overflow: hidden;
}

.product-gallery__image {
    width: 100%;
    height: auto;
    aspect-ratio: 0.8;
    object-fit: cover;
    border-radius: 16px;
}

.product-single__badges {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    z-index: 5;
}

.product-single__badge {
    background: #ffffff;
    color: #151515;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 14px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.product-single__badge--sale {
    background: #ffffff;
    color: #151515;
}

.product-single__badge--hit {
    background: #151515;
    color: #ffffff;
}

.product-gallery__nav--prev {
    left: 16px;
}

.product-gallery__nav--next {
    right: 16px;
}

/* Video in gallery */
.product-gallery__thumb--video {
    position: relative;
}

.product-gallery__thumb--video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.product-gallery__play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 28px;
    height: 28px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.product-gallery__play-icon svg {
    margin-left: 2px;
}

.product-gallery__video {
    width: 100%;
    aspect-ratio: 0.8;
    object-fit: cover;
    border-radius: 16px;
    background: #000;
}

/* Product Info */
.product-single__info {
    display: flex;
    flex-direction: column;
}

.product-single__rating {
    cursor: pointer;
    display: flex;
    /* align-items: center; */
    gap: 8px;
    font-size: 14px;
    color: #666;
    width: fit-content;
    margin-bottom: 12px;
}

.product-single__rating svg {
    flex-shrink: 0;
}

.product-single__rating-value {
    font-weight: 600;
    color: #151515;
}

.product-single__rating-separator {
    color: #ccc;
}

.product-single__share {
    margin-left: auto;
    color: #EC008C;
    text-decoration: none;
    font-size: 13px;
}

.product-single__share:hover {
    text-decoration: underline;
}

.product-single__title {
    font-family: 'Circe', sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;
    color: #151515;
    margin: 0 0 16px;
}

/* Product Tags */
.product-single__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.product-tag {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
}

/* Variations */
.product-single__variations {
    margin-bottom: 20px;
}

.product-variation {
    margin-bottom: 16px;
}

.product-variation__label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #151515;
    margin-bottom: 8px;
}

.product-variation__options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.product-variation__option {
    padding: 10px 20px;
    border: 2px solid #e5e5e5;
    border-radius: 8px;
    background: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
}

.product-variation__option:hover,
.product-variation__option.active {
    border-color: #151515;
    background: #f5f5f5;
}

/* Price */
.product-single__price-block {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
}

.product-single__price {
    font-size: 32px;
    font-weight: 700;
    color: #151515;
}

.product-single__price del {
    color: #888;
    font-size: 20px;
    font-weight: 400;
    margin-right: 12px;
}

.product-single__price ins {
    text-decoration: none;
}

.product-single__installment {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    color: #666;
    margin-top: 8px;
}

/* Bonus */
.product-single__bonus {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #F2F2F2;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 14px;
    color: #717182;
}

/* Actions */
.product-single__actions {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
}

.product-single__add-to-cart {
    flex: 1;
    padding: 16px 32px;
    font-size: 15px;
}

.product-single__wishlist {
    width: 56px;
    height: 56px;
    border: 2px solid #e5e5e5;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    cursor: pointer;
    transition: all 0.3s;
}

.product-single__wishlist:hover {
    border-color: #EC008C;
    color: #EC008C;
}

.product-single__wishlist:hover svg {
    stroke: #EC008C;
}

.product-single__wishlist.active {
    border-color: #EC008C;
    color: #EC008C;
}

.product-single__wishlist.active svg {
    fill: #EC008C;
    stroke: #EC008C;
}

/* Availability */
.product-single__availability {
    background: #f8f8f8;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.availability-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.availability-tab {
    padding: 10px 20px;
    background: transparent;
    border: none;
    font-size: 14px;
    color: #666;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s;
}

.availability-tab:hover {
    color: #151515;
}

.availability-tab.active {
    background: #151515;
    color: #fff;
}

.availability-content {
    display: none;
}

.availability-content.active {
    display: block;
}

.availability-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #e5e5e5;
}

.availability-item:last-child {
    border-bottom: none;
}

.availability-item__location {
    font-size: 14px;
    color: #151515;
}

.availability-item__status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.availability-item__status--in-stock {
    color: #22C55E;
}

.availability-item__status--in-stock .status-dot {
    background: #22C55E;
}

.availability-item__status--low {
    color: #F59E0B;
}

.availability-item__status--low .status-dot {
    background: #F59E0B;
}

.availability-item__status--out-stock {
    color: #888;
}

.availability-item__status--out-stock .status-dot {
    background: #888;
}

.availability-item__status--preorder {
    color: #e68a00;
}

.availability-item__status--preorder .status-dot {
    background: #e68a00;
}

/* Brand */
.product-single__brand {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 0;
    border-top: 1px solid #e5e5e5;
}

.brand-link {
    font-size: 14px;
    color: #666;
}

.brand-name {
    font-weight: 600;
    color: #151515;
    margin-left: auto;
}

/* Product About Section */
.product-single__about {
    padding: 40px 0;
    border-top: 1px solid #e5e5e5;
}

.product-single__section-title {
    font-family: 'Circe', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #151515;
    margin: 0 0 24px;
}

/* Product Tabs */
.product-tabs__nav {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 24px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.product-tabs__nav::-webkit-scrollbar {
    display: none;
}

.product-tabs__btn {
    padding: 14px 24px;
    background: transparent;
    border: none;
    font-size: 15px;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    position: relative;
    transition: color 0.3s;
    white-space: nowrap;
    flex-shrink: 0;
}

.product-tabs__btn:hover {
    color: #151515;
}

.product-tabs__btn.active {
    color: #151515;
}

.product-tabs__btn.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: #151515;
}

.product-tabs__pane {
    display: none;
}

.product-tabs__pane.active {
    display: block;
}

.product-tabs__pane p {
    font-size: 15px;
    line-height: 1.7;
    color: #333;
    margin-bottom: 16px;
}

/* Product Attributes Table */
.product-attributes {
    width: 100%;
    border-collapse: collapse;
}

.product-attributes tr {
    border-bottom: 1px solid #e5e5e5;
}

.product-attributes th,
.product-attributes td {
    padding: 14px 0;
    font-size: 14px;
    text-align: left;
}

.product-attributes th {
    font-weight: 500;
    color: #666;
    width: 40%;
}

.product-attributes td {
    color: #151515;
}

/* Related Products */
.product-single__related {
    padding: 40px 0;
    border-top: 1px solid #e5e5e5;
}

/* Responsive */
@media (max-width: 1024px) {
    .product-single {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .product-single__gallery {
        max-width: 600px;
        width: 100%;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .product-single {
        padding: 24px 0;
    }

    .product-single__gallery {
        display: flex;
        flex-direction: column-reverse;
    }

    .product-gallery__thumbs-wrapper {
        flex-direction: row;
        width: 100%;
        max-height: none;
        overflow: visible;
    }

    .product-gallery__thumbs-arrow {
        display: none !important;
    }

    .product-gallery__thumbs {
        gap: 6px;
        flex-direction: row;
        width: 0;
        min-width: 100%;
        max-width: 100%;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .product-gallery__thumb {
        width: 60px;
        height: 75px;
        min-height: auto;
        flex-shrink: 0;
    }

    .product-single__title {
        font-size: 22px;
    }

    .product-single__price {
        font-size: 26px;
    }

    .product-single__price del {
        font-size: 16px;
    }

    .product-single__actions {
        flex-wrap: wrap;
    }

    .product-single__quantity {
        width: 100%;
    }



    .product-single__add-to-cart {
        flex: 1;
        font-size: 13px;
    }

    .product-single__wishlist {
        width: 56px;
    }

    .product-tabs__nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        margin: 0 -20px 24px;
        padding: 0 20px;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .product-tabs__nav::-webkit-scrollbar {
        display: none;
    }

    .product-tabs__btn {
        white-space: nowrap;
        padding: 12px 16px;
        font-size: 14px;
    }

    .product-single__about,
    .product-single__related {
        padding: 24px 0;
    }

    .product-single__section-title {
        font-size: 22px;
    }
}

/* Quantity Selector */
.product-single__quantity {
    display: flex;
    align-items: center;
    border: 2px solid #e5e5e5;
    border-radius: 12px;
    overflow: hidden;
}

.quantity-btn {
    width: 48px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: none;
    font-size: 20px;
    font-weight: 400;
    color: #151515;
    cursor: pointer;
    transition: background 0.2s;
}

.quantity-btn:hover {
    background: #f5f5f5;
}

.quantity-input {
    width: 50px;
    height: 52px;
    border: none;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: #151515;
    -moz-appearance: textfield;
    appearance: textfield;
}

.quantity-input::-webkit-outer-spin-button,
.quantity-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Related Products Slider */
.related-products-slider {
    position: relative;
}

.related-products-swiper {
    overflow: hidden;
}

.related-products-swiper .swiper-slide {
    height: auto;
}
@media (max-width: 1200px) { 
.related-products-slider {
    overflow: visible !important;
}
}
@media (max-width: 768px) {
    .related-products-slider {
        padding: 0 40px;
        margin: 0 -20px;
    }

    .related-products-swiper {
        padding: 0;
    }

    .product-single__quantity {
        width: 100%;
        justify-content: center;
    }

    .quantity-btn {
        width: 56px;
    }

    .quantity-input {
        width: 60px;
    }
}

/* Product Reviews */
#tab-reviews {
    max-width: 800px;
}

#tab-reviews .woocommerce-Reviews-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
}

#tab-reviews .commentlist {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
}

#tab-reviews .commentlist > .comment {
    padding: 24px 0;
    border-bottom: 1px solid #e5e5e5;
}

#tab-reviews .commentlist > .comment:last-child {
    border-bottom: none;
}

/* Пагинация отзывов */
#tab-reviews .comment-navigation,
#tab-reviews .woocommerce-pagination {
    margin-top: 24px;
    display: flex;
    justify-content: center;
    gap: 8px;
}

#tab-reviews .comment-navigation .page-numbers,
#tab-reviews .woocommerce-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    font-size: 13px;
    color: #333;
    text-decoration: none;
    transition: all 0.2s;
}

#tab-reviews .comment-navigation .page-numbers:hover,
#tab-reviews .woocommerce-pagination .page-numbers:hover {
    border-color: #151515;
    color: #151515;
}

#tab-reviews .comment-navigation .page-numbers.current,
#tab-reviews .woocommerce-pagination .page-numbers.current {
    background: #151515;
    color: #fff;
    border-color: #151515;
}

/* Ответ магазина — отступ слева по уровню текста отзыва */
#tab-reviews .commentlist .children {
    list-style: none;
    padding: 0;
    margin: 12px 0 0 52px;
}

#tab-reviews .commentlist .children .comment {
    padding: 12px 16px;
    border-bottom: none;
    background: #f8f8fa;
    border-radius: 8px;
}

/* Ответ админа: без аватара, без звёзд */
#tab-reviews .commentlist .children .comment .comment_container {
    gap: 0;
}

#tab-reviews .commentlist .children .comment .comment_container img.avatar {
    display: none;
}
.woocommerce-Reviews .commentlist {
    display: flex;
    gap: 30px;
    flex-direction: column;
}

/* Бейдж "Представитель бренда" */
#tab-reviews .review-admin-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

#tab-reviews .review-admin-badge .admin-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    color: #0a7c42;
    background: #e6f4ed;
    padding: 2px 8px;
    border-radius: 4px;
}

#tab-reviews .review-admin-badge .woocommerce-review__published-date {
    font-size: 12px;
    color: #888;
}

#tab-reviews .comment_container {
    display: flex;
    gap: 12px;
}
#tab-reviews .comment_container p { 
    margin-bottom: 0;
}
#tab-reviews .comment_container img.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
}

#tab-reviews .comment-text {
    flex: 1;
}

#tab-reviews .star-rating {
    display: flex;
    gap: 2px;
    margin-bottom: 6px;
    font-size: 12px;
    color: #FFA800;
}

#tab-reviews .star-rating::before {
    content: "★★★★★";
    letter-spacing: 1px;
}

#tab-reviews .star-rating span {
    overflow: hidden;
    position: absolute;
    clip: rect(0,0,0,0);
}

#tab-reviews .woocommerce-review__author {
    font-weight: 600;
    font-size: 13px;
    color: #151515;
}

#tab-reviews .woocommerce-review__dash {
    display: none;
}

#tab-reviews .woocommerce-review__published-date {
    font-size: 12px;
    color: #888;
}

#tab-reviews .description p {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: #333;
}

/* Review Form */
#tab-reviews #review_form_wrapper {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #e5e5e5;
}

#tab-reviews .comment-reply-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
}

#tab-reviews .comment-form-rating {
    margin-bottom: 12px;
}

#tab-reviews .comment-form-rating label {
    display: block;
    font-weight: 500;
    font-size: 13px;
    margin-bottom: 6px;
}

/* Star rating selector - icon style */
#tab-reviews .comment-form-rating .stars {
    display: flex;
    gap: 2px;
    font-size: 0;
}

#tab-reviews .comment-form-rating .stars a {
    display: inline-block;
    width: 20px;
    height: 20px;
    text-indent: -9999px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23E5E5E5'%3E%3Cpath d='M8 2a1 1 0 0 1 .87.508l1.538 2.723 2.782.537a1 1 0 0 1 .538 1.667L11.711 9.58l.512 3.266A1 1 0 0 1 10.8 13.9L8 12.548 5.2 13.9a1 1 0 0 1-1.423-1.055l.512-3.266-2.017-2.144a1 1 0 0 1 .538-1.667l2.782-.537 1.537-2.723A1 1 0 0 1 8 2'/%3E%3C/svg%3E");
    background-size: 16px 16px;
    background-repeat: no-repeat;
    background-position: center;
}

#tab-reviews .comment-form-rating .stars a:hover,
#tab-reviews .comment-form-rating .stars a.active,
#tab-reviews .comment-form-rating .stars.selected a.active,
#tab-reviews .comment-form-rating .stars:hover a {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23FFA800'%3E%3Cpath d='M8 2a1 1 0 0 1 .87.508l1.538 2.723 2.782.537a1 1 0 0 1 .538 1.667L11.711 9.58l.512 3.266A1 1 0 0 1 10.8 13.9L8 12.548 5.2 13.9a1 1 0 0 1-1.423-1.055l.512-3.266-2.017-2.144a1 1 0 0 1 .538-1.667l2.782-.537 1.537-2.723A1 1 0 0 1 8 2'/%3E%3C/svg%3E");
}

#tab-reviews .comment-form-rating .stars:hover a:hover ~ a {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23E5E5E5'%3E%3Cpath d='M8 2a1 1 0 0 1 .87.508l1.538 2.723 2.782.537a1 1 0 0 1 .538 1.667L11.711 9.58l.512 3.266A1 1 0 0 1 10.8 13.9L8 12.548 5.2 13.9a1 1 0 0 1-1.423-1.055l.512-3.266-2.017-2.144a1 1 0 0 1 .538-1.667l2.782-.537 1.537-2.723A1 1 0 0 1 8 2'/%3E%3C/svg%3E");
}

#tab-reviews .comment-form-comment label {
    display: block;
    font-weight: 500;
    font-size: 13px;
    margin-bottom: 6px;
}

#tab-reviews .comment-form-comment textarea {
    width: 100%;
    min-height: 100px;
    padding: 10px 14px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    resize: vertical;
}

#tab-reviews .comment-form-comment textarea:focus {
    outline: none;
    border-color: #151515;
}

#tab-reviews .form-submit input[type="submit"] {
    background: #151515;
    color: #fff;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.3s;
}

#tab-reviews .form-submit input[type="submit"]:hover {
    opacity: 0.8;
}

#tab-reviews .comment-form-author,
#tab-reviews .comment-form-email {
    margin-bottom: 12px;
}

#tab-reviews .comment-form-author label,
#tab-reviews .comment-form-email label {
    display: block;
    font-weight: 500;
    font-size: 13px;
    margin-bottom: 6px;
}

#tab-reviews .comment-form-author input,
#tab-reviews .comment-form-email input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    font-size: 13px;
}

#tab-reviews .comment-form-author input:focus,
#tab-reviews .comment-form-email input:focus {
    outline: none;
    border-color: #151515;
}

#tab-reviews .woocommerce-noreviews {
    color: #666;
    font-size: 14px;
}

/* ===== ABOUT PAGE STYLES (romanovamakeup.com style) ===== */

/* Hero Section - fullscreen with background image */
.about-hero {
    position: relative;
    height: 70vh;
    min-height: 500px;
    background-size: cover;
    background-position: center;
    background-color: #3d3d3d;
    display: flex;
    align-items: center;
    justify-content: center;
}
.about-hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
}
.about-hero__content {
    position: relative;
    z-index: 1;
    text-align: center;
    color: #fff;
}
.about-hero__logo-img {
    display: block;
    max-width: 500px;
    width: 100%;
    height: auto;
    margin: 0 auto 16px;
}
.about-hero__title {
    font-family: 'Circe', sans-serif;
    font-size: 36px;
    font-weight: 400;
    line-height: 1.3;
    color: #fff;
    margin: 0;
}
/* Intro Section - centered text below hero */
.about-intro {
    padding: 50px 0;
    text-align: center;
    background: #fff;
}

.about-intro__text {
    font-family: 'Circe', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
    color: #151515;
    margin: 0 auto;
    max-width: 700px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Founder Section - photo left, text right */
.about-founder {
    padding: 60px 0 80px;
    background: #fff;
}

.about-founder__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

.about-founder__image img {
    width: 100%;
    height: auto;
    border-radius: 0;
}

.about-founder__image-placeholder {
    width: 100%;
    aspect-ratio: 0.85;
    background: #f5f5f5;
}

.about-founder__content {
    padding-top: 20px;
}

.about-founder__name {
    font-family: 'Circe', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #151515;
    margin: 0 0 8px;
    text-transform: uppercase;
}

.about-founder__role {
    font-family: 'Circe', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #666;
    margin: 0 0 30px;
    font-style: italic;
}

.about-founder__text {
    font-family: 'Circe', sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: #151515;
    margin-bottom: 30px;
}

.about-founder__text p {
    margin: 0 0 16px;
}

.about-founder__text p:last-child {
    margin-bottom: 0;
}

.about-founder__quote {
    font-family: 'Circe', sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: #151515;
    padding-top: 20px;
    border-top: 1px solid #e5e5e5;
}

.about-founder__quote p {
    margin: 0;
}

/* Bestsellers Section */
.about-bestsellers {
    padding: 60px 0;
    background: #fff;
}

.about-bestsellers__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

.about-bestsellers__title {
    font-family: 'Circe', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #151515;
    margin: 0;
}

.about-bestsellers__link {
    font-family: 'Circe', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #151515;
    text-decoration: none;
    padding-bottom: 2px;
    border-bottom: 1px solid #151515;
    transition: opacity 0.3s;
}

.about-bestsellers__link:hover {
    opacity: 0.7;
}

.about-bestsellers__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.about-bestsellers__item {
    background: #fff;
}

.about-bestsellers__item-link {
    display: block;
    text-decoration: none;
}

.about-bestsellers__item-image {
    aspect-ratio: 0.8;
    background: #f8f8f8;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
}

.about-bestsellers__item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.about-bestsellers__item-link:hover .about-bestsellers__item-image img {
    transform: scale(1.05);
}

.about-bestsellers__item-title {
    font-family: 'Circe', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #151515;
    margin: 0 0 8px;
    line-height: 1.4;
}

.about-bestsellers__item-price {
    font-family: 'Circe', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #151515;
}

/* Newsletter Section */
.about-newsletter {
    padding: 80px 0;
    background: #151515;
    text-align: center;
}

.about-newsletter__content {
    max-width: 600px;
    margin: 0 auto;
}

.about-newsletter__title {
    font-family: 'Circe', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 16px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.about-newsletter__text {
    font-family: 'Circe', sans-serif;
    font-size: 16px;
    line-height: 1.36;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 32px;
}

.about-newsletter__form {
    display: flex;
    gap: 12px;
    max-width: 450px;
    margin: 0 auto;
}

.about-newsletter__input {
    flex: 1;
    padding: 14px 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    background: transparent;
    color: #fff;
    font-family: 'Circe', sans-serif;
    font-size: 14px;
}

.about-newsletter__input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.about-newsletter__input:focus {
    outline: none;
    border-color: #fff;
}

.about-newsletter__button {
    padding: 14px 28px;
    background: #fff;
    color: #151515;
    border: none;
    border-radius: 8px;
    font-family: 'Circe', sans-serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.3s;
    white-space: nowrap;
}

.about-newsletter__button:hover {
    opacity: 0.9;
}

/* About Page Responsive */
@media (max-width: 992px) {
    .about-hero__title {
        font-size: 28px;
    }

    .about-intro__text {
        font-size: 14px;
    }

    .about-founder__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .about-founder__name {
        font-size: 26px;
    }

    .about-bestsellers__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .about-newsletter__title {
        font-size: 26px;
    }
}

@media (max-width: 576px) {
    .about-hero {
        height: 60vh;
        min-height: 400px;
    }

    .about-hero__logo-img {
        max-width: 280px;
    }

    .about-hero__title {
        font-size: 28px;
    }

    .about-intro {
        padding: 30px 0;
    }

    .about-intro__text {
        font-size: 13px;
    }

    .about-founder {
        padding: 40px 0 60px;
    }

    .about-founder__name {
        font-size: 22px;
    }

    .about-founder__text,
    .about-founder__quote {
        font-size: 14px;
    }

    .about-bestsellers__header {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }

    .about-bestsellers__title {
        font-size: 22px;
    }

    .about-newsletter {
        padding: 50px 0;
    }

    .about-newsletter__title {
        font-size: 22px;
    }

    .about-newsletter__form {
        flex-direction: column;
    }

    .about-newsletter__button {
        width: 100%;
    }
}

/* ===== ABOUT PAGE - ADVANTAGES SECTION ===== */
.about-advantages {
    padding: 80px 0;
    background: #fff;
}

.about-advantages__grid {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 60px;
    align-items: start;
}

.about-advantages__image img {
    width: 100%;
    height: auto;
    border-radius: 0;
}

.about-advantages__image-placeholder {
    width: 100%;
    aspect-ratio: 0.75;
    background: #f5f5f5;
}

.about-advantages__title {
    font-family: 'Circe', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #151515;
    margin: 0 0 40px;
}

.about-advantages__items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 50px;
}

.advantage-item {
    text-align: left;
}

.advantage-item__icon {
    margin-bottom: 16px;
}

.advantage-item__icon svg {
    width: 48px;
    height: 48px;
}

.advantage-item__title {
    font-family: 'Circe', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #151515;
    margin: 0 0 10px;
}

.advantage-item__text {
    font-family: 'Circe', sans-serif;
    font-size: 14px;
    line-height: 1.36;
    color: #666;
    margin: 0;
}

/* ===== ABOUT PAGE - AWARDS SECTION (SLIDER) ===== */
.about-awards {
    padding: 80px 0;
    background: #f9f9f9;
}

.about-awards__title {
    font-family: 'Circe', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #151515;
    margin: 0 0 50px;
}

.about-awards__slider-wrapper {
    position: relative;
}

.awards-swiper {
    overflow: hidden;
}

.awards-swiper .swiper-slide {
    height: auto;
}

.award-item {
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.award-item a {
    display: block;
    text-decoration: none;
}

.award-item__image {
    margin-bottom: 20px;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.award-item__image:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.award-item__image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.award-item__text {
    font-family: 'Circe', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #151515;
    margin: 0;
    padding: 0 10px;
}

/* Awards Navigation */
.awards-navigation {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 40px;
}

.awards-nav {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid #151515;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    color: #151515;
}

.awards-nav:hover {
    background: #151515;
    color: #fff;
}

.awards-nav.swiper-button-disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.awards-nav.swiper-button-disabled:hover {
    background: transparent;
    color: #151515;
}

/* Advantages & Awards Responsive */
@media (max-width: 992px) {
    .about-advantages__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .about-advantages__title {
        font-size: 26px;
        margin-bottom: 30px;
    }

    .about-awards__title {
        font-size: 26px;
        margin-bottom: 40px;
    }
}

@media (max-width: 576px) {
    .about-advantages {
        padding: 50px 0;
    }

    .about-advantages__title {
        font-size: 22px;
    }

    .about-advantages__items {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .advantage-item__title {
        font-size: 16px;
    }

    .about-awards {
        padding: 50px 0;
    }

    .about-awards__title {
        font-size: 22px;
        margin-bottom: 30px;
    }

    .award-item__text {
        font-size: 13px;
    }

    .awards-nav {
        width: 40px;
        height: 40px;
    }
}

/* =====================================================
   PROMOTIONS — модалка 1+1, секция подарков, бейджи
   ===================================================== */

/* Modal overlay */
.promo-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.promo-modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.promo-modal {
    background: #fff;
    border-radius: 12px;
    padding: 32px 24px;
    max-width: 360px;
    width: 90%;
    text-align: center;
}
.promo-modal__icon {
    font-size: 40px;
    margin-bottom: 12px;
}
.promo-modal__title {
    font-family: 'Circe', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #151515;
    margin-bottom: 8px;
}
.promo-modal__text {
    font-size: 14px;
    color: #555;
    line-height: 1.5;
    margin-bottom: 20px;
}
.promo-modal__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.promo-modal__actions .btn {
    width: 100%;
}

/* Promo gifts section in side-cart */
.promo-gifts-section {
    padding: 12px 16px;
    border-top: 1px solid #f0f0f0;
}

/* Promo banner */
.promo-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #f8f4ff;
    border-radius: 8px;
    margin-bottom: 12px;
}
.promo-banner__icon {
    font-size: 18px;
}
.promo-banner__text {
    font-size: 13px;
    font-weight: 500;
    color: #151515;
}

/* Gift picker (2+1, 3+1) */
.promo-gift-picker {
    margin-bottom: 12px;
}
.promo-gift-picker__title {
    font-size: 13px;
    font-weight: 700;
    color: #151515;
    margin-bottom: 8px;
}
.promo-gift-picker__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.promo-gift-picker__empty {
    font-size: 13px;
    color: #999;
    padding: 8px 0;
}

/* Gift option card */
.promo-gift-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    background: #fafafa;
    border-radius: 8px;
    border: 1px solid #eee;
}
.promo-gift-option__img {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}
.promo-gift-option__info {
    flex: 1;
    min-width: 0;
}
.promo-gift-option__name {
    font-size: 13px;
    font-weight: 500;
    color: #151515;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.promo-gift-option__price {
    font-size: 12px;
    color: #999;
}
.promo-gift-option .btn--small {
    padding: 4px 12px;
    font-size: 12px;
    flex-shrink: 0;
}

/* Promo gifts list (items in cart) */
.promo-gifts-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}
.promo-gift-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    background: #f0faf0;
    border-radius: 8px;
    border: 1px solid #e0f0e0;
}
.promo-gift-item__img {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}
.promo-gift-item__info {
    flex: 1;
    min-width: 0;
}
.promo-gift-item__name {
    font-size: 13px;
    font-weight: 500;
    color: #151515;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.promo-gift-item__badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    color: #717182;
    background: #f3f3f5;
    border-radius: 4px;
    padding: 1px 6px;
    margin-top: 2px;
}
.promo-gift-item__price {
    font-size: 14px;
    font-weight: 700;
    color: #2e7d32;
    flex-shrink: 0;
}
.promo-gift-remove {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: #999;
    flex-shrink: 0;
}
.promo-gift-remove:hover {
    color: #151515;
}

/* Savings & hints */
.promo-savings {
    font-size: 13px;
    color: #2e7d32;
    padding: 6px 0;
}
.promo-bag-hint {
    font-size: 13px;
    color: #717182;
    padding: 4px 0;
}

/* Qty locked (promo items) */
.qty-locked {
    display: inline-block;
    padding: 0 8px;
    font-size: 14px;
    color: #999;
}

/* =====================================================
   CF7 Form Validation (matching cart style)
   ===================================================== */
.wpcf7-form input.wpcf7-not-valid,
.wpcf7-form textarea.wpcf7-not-valid,
.wpcf7-form select.wpcf7-not-valid {
    border-color: #EF4444 !important;
}
.wpcf7-form input.wpcf7-not-valid::placeholder,
.wpcf7-form textarea.wpcf7-not-valid::placeholder {
    color: #EF4444;
}
.wpcf7-form .wpcf7-not-valid-tip {
    display: none !important;
}
.wpcf7 .wpcf7-response-output {
    display: none !important;
}

/* =====================================================
   CF7 Success Modal
   ===================================================== */
.cf7-success-modal {
    position: fixed;
    inset: 0;
    z-index: 10010;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.cf7-success-modal.active {
    opacity: 1;
    visibility: visible;
}
.cf7-success-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}
.cf7-success-modal__box {
    position: relative;
    background: #fff;
    border-radius: 12px;
    padding: 48px 32px 32px;
    max-width: 400px;
    width: calc(100% - 32px);
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    transform: translateY(20px);
    transition: transform 0.3s ease;
}
.cf7-success-modal.active .cf7-success-modal__box {
    transform: translateY(0);
}
.cf7-success-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: #999;
    transition: color 0.2s;
}
.cf7-success-modal__close:hover {
    color: #151515;
}
.cf7-success-modal__icon {
    color: #2e7d32;
    margin-bottom: 16px;
}
.cf7-success-modal__icon svg {
    display: inline-block;
}
.cf7-success-modal__title {
    font-family: 'Circe', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #151515;
    margin: 0 0 12px;
}
.cf7-success-modal__text {
    font-size: 15px;
    line-height: 1.5;
    color: #555;
    margin: 0 0 24px;
}
.cf7-success-modal__btn {
    min-width: 140px;
}

/* Promo notice (toast) */
.promo-notice {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    z-index: 10002;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
}
.promo-notice.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.promo-notice--success {
    background: #2e7d32;
    color: #fff;
}
.promo-notice--error {
    background: #c62828;
    color: #fff;
}

