/* ===================================================== */
/* BASE STYLES & VARIABLES
/* ===================================================== */

:root {
    --primary-green: #0d4a2e;
    --primary-gold: #b3a377;
    --dark-gold: #a48f54;
    --text-dark: #212529;

  /* Greens — primary brand palette */
  --fp-g900: #0a2e12;
  --fp-g800: #133d1e;
  --fp-g700: #1a5228;
  --fp-g600: #256836;
  --fp-g500: #2f8044;
  --fp-g400: #46a85e;
  --fp-g300: #72c48a;
  --fp-g100: #e2f4e8;
  --fp-g50:  #f2faf5;
 
  /* Warm */
  --fp-gold:      #c8891e;
  --fp-gold-bg:   #fef5e4;
  --fp-amber:     #e8a020;
 
  /* Neutrals */
  --fp-white:     #ffffff;
  --fp-card-bg:   #ffffff;
  --fp-border:    #d4e8da;
  --fp-ink:       #122313;   /* matches site's body color */
  --fp-dim:       #5a7562;
  --fp-faint:     #9ab5a0;
  --fp-tag-bg:    #eef7f1;
 
  /* Danger */
  --fp-red:       #c0392b;
  --fp-red-bg:    #fdf0ef;
 
  /* Shape */
  --fp-r:      16px;
  --fp-r-sm:   10px;
  --fp-r-pill: 100px;
 
  /* Motion */
  --fp-dur:    0.28s;
  --fp-ease:   cubic-bezier(0.4, 0, 0.2, 1);
  --fp-spring: cubic-bezier(0.34, 1.48, 0.64, 1);

}

a, a:hover {
    color: var(--primary-gold);
    text-decoration: none;
}

a {
    transition: color .2s;
}

body {
    font-family: Arial, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f8f9fa;
    color: var(--text-dark);
    line-height: 1.6;
}

 .suggestion {
    cursor: pointer;
}

/* ===================================================== */
/* BOOTSTRAP OVERRIDES
/* ===================================================== */

.btn-outline-primary,
.btn-primary {
    --bs-btn-border-color: var(--primary-green);
    --bs-btn-focus-shadow-rgb: 13, 74, 46;
    --bs-btn-disabled-border-color: var(--primary-green);
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--primary-green);
    --bs-btn-hover-bg: #0b3e27;
    --bs-btn-hover-border-color: #0a3723;
    --bs-btn-active-bg: #0a3723;
    --bs-btn-active-border-color: #082e1e;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--primary-green);
}

.btn-outline-primary {
    --bs-btn-color: var(--primary-green);
    --bs-btn-hover-bg: var(--primary-green);
    --bs-btn-hover-border-color: var(--primary-green);
    --bs-btn-active-bg: #0b3e27;
    --bs-btn-active-border-color: #0a3723;
    --bs-btn-disabled-color: var(--primary-green);
    --bs-btn-disabled-bg: transparent;
}

.btn-dark {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--dark-gold);
    --bs-btn-border-color: var(--dark-gold);
    --bs-btn-hover-bg: #927f4b;
    --bs-btn-hover-border-color: #8a7847;
    --bs-btn-focus-shadow-rgb: 164, 143, 84;
    --bs-btn-active-bg: #7f6f42;
    --bs-btn-active-border-color: #76683f;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--dark-gold);
    --bs-btn-disabled-border-color: var(--dark-gold);
}

.btn-dark,
.btn-outline-primary,
.btn-primary {
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.bg-primary {
    --bs-primary-rgb: 13, 74, 46;
    background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity, 1)) !important;
}

.text-primary {
    --bs-primary-rgb: 164, 143, 84;
    --bs-text-opacity: 1;
    color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}

/* ===================================================== */
/* LAYOUT COMPONENTS
/* ===================================================== */

.full-width-container {
    width: 100vw;
    max-width: 100%;
    min-height: 500px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Cards */
.card,
.product-card {
    border: none;
    border-radius: 10px;
    overflow: hidden;
    transition: transform .3s, box-shadow .3s;
}

.card {
    margin-top: 20px;
}

.card:hover,
.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, .1);
}

.product-card {
    border-radius: .75rem;
}

.product-card:hover {
    box-shadow: 0 12px 28px rgba(0, 0, 0, .08);
}

.card-header {
    font-weight: 600;
}

.card-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: .5rem;
}

.card-title a {
    color: var(--text-dark);
    display: inline-block;
    overflow: hidden;
    max-width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-text.text-success {
    font-size: 1.1rem;
}

/* Forms */
.form-control:focus {
    border-color: #1d3c2f;
    box-shadow: 0 0 0 .25rem rgba(16, 73, 33, .25);
}

.invalid-feedback {
    display: none;
    color: #dc3545;
}

.was-validated .form-control:invalid ~ .invalid-feedback {
    display: block;
}

.password-strength .progress {
    height: 5px;
    margin-top: 5px;
}

/* Alerts */
.alert {
    border-radius: 8px;
}

/* ===================================================== */
/* HEADER & NAVIGATION
/* ===================================================== */

.main-header {
    height: 64px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    border-bottom: 1px solid #ddd;
    z-index: 100;
    transition: box-shadow .3s, background-color .3s;
}

.navbar-brand {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    font-weight: 700;
    color: #004225 !important;
    gap: .2rem;
    user-select: none;
}

.navbar-brand img {
    max-height: 42px;
    width: auto;
}

.hamburger-btn {
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 1.5rem;
    color: #004225;
    border: none;
    padding: 0;
    margin-right: 1rem;
    background: none;
    cursor: pointer;
    user-select: none;
}

.hamburger-btn:hover {
    color: #7db44b;
}

.header-icons {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    color: #004225;
}

.header-icons a {
    color: inherit;
    text-decoration: none;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

.header-icons a:hover {
    color: #7db44b;
}

.header-icons i {
    font-size: 16px;
}

.header-icons .badge {
    font-size: 11px;
    padding: 3px 5px;
    line-height: 1;
}

.header-icons .badge.ms-2 {
    margin-left: 4px !important;
}

.cart-count {
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.cart-count.bump {
    transform: scale(1.25);
}

/* ===================================================== */
/* SIDEBAR
/* ===================================================== */

#sidebar {
    position: fixed;
    top: 0;
    left: -280px;
    width: 280px;
    height: 100vh;
    background-color: #fff;
    box-shadow: 2px 0 5px rgba(0, 0, 0, .2);
    padding: 1.5rem 1rem;
    transition: left .3s;
    z-index: 1102;
    overflow-y: auto;
}

#sidebar.active {
    left: 0;
}

#sidebar ul {
    list-style: none;
    padding-left: 0;
}

#sidebar ul li {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

#sidebar ul li a {
    color: #004225;
    display: block;
    padding: .3rem .5rem;
    border-radius: 4px;
    flex: 1;
    text-align: left;
    font-size: 0.95rem;
    font-weight: 400;
    text-decoration: none;
}

#sidebar ul li a:hover {
    background-color: #7db44b;
    color: #fff;
}

#sidebar ul li i {
    margin-left: 15px;
    font-size: 1rem;
    opacity: 0.8;
    color: #004225;
    transition: color 0.3s;
    min-width: 20px;
    text-align: center;
}

#sidebar ul li:hover i {
    color: #fff;
}

#sidebar .close-btn {
    background: none;
    user-select: none;
    cursor: pointer;
    font-size: 1.5rem;
    color: #004225;
    border: none;
    margin-bottom: 2rem;
}

#sidebar .close-btn:hover {
    color: #7db44b;
}

#sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, .4);
    z-index: 1040;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s;
}

#sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
    z-index: 100;
}

/* ===================================================== */
/* DROPDOWNS
/* ===================================================== */

.header-icons .dropdown {
    position: relative !important;
}

.header-icons .dropdown-toggle {
    text-decoration: none;
    color: inherit;
    font-size: 1.25rem;
    padding: .25rem;
    display: flex;
    align-items: center;
}

.dropdown-toggle::after {
    display: none !important;
}

.header-icons .dropdown-menu {
    position: absolute !important;
    right: 0 !important;
    left: auto !important;
    min-width: 240px !important;
    padding: 6px 0;
    text-align: left !important;
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease-in-out;
    z-index: 1101;
}

.dropdown-menu.show {
    display: block !important;
    opacity: 1;
    visibility: visible;
}

.dropdown-menu .dropdown-item {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px;
    white-space: nowrap;
    padding: 8px 14px;
}

.dropdown-menu .dropdown-item .dd-text {
    flex: 1 1 auto;
    text-align: left;
}

.dropdown-menu .dropdown-item .dd-icon {
    flex: 0 0 auto;
    width: 18px;
    text-align: center;
}

.dropdown-menu .dropdown-item .dd-badge {
    flex: 0 0 auto;
    margin-left: 6px;
}

.dropdown-menu .dropdown-item i,
.dropdown-menu .dropdown-item .badge {
    flex-shrink: 0;
}

/* ===================================================== */
/* PRODUCTS
/* ===================================================== */

.product-image-wrapper {
    background-color: #fff;
    overflow: hidden;
    width: 100%;
    height: 220px;
    border-top-left-radius: .75rem;
    border-top-right-radius: .75rem;
    position: relative;
    line-height: 0;
}

.product-image-wrapper.bg-light {
    height: 220px;
}

.product-image-wrapper img.product-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform .35s ease-in-out;
}

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

.product-img {
    height: 200px;
    object-fit: contain;
    padding: 0;
}

.badge {
    font-size: .75rem;
    font-weight: 500;
    padding: .4em .75em;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

.rating i {
    font-size: .875rem;
    margin-right: 2px;
    vertical-align: middle;
}

.btn-sm {
    font-size: .875rem;
    padding: .4rem .75rem;
    border-radius: .375rem;
    transition: .2s;
}

.btn-outline-primary:hover,
.btn-outline-secondary:hover {
    box-shadow: 0 4px 10px rgba(0, 123, 255, .15);
}

/* ===================================================== */
/* PRODUCT CAROUSEL
/* ===================================================== */

/* ===================================================== */
/* HERO SLIDER & BANNER
/* ===================================================== */

@keyframes floatUpDown {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

.hero-slide {
    background-color: #1d2b1d;
    color: #bfa76f;
}

.hero-slide .btn-primary {
    background-color: #bfa76f;
    border-color: #bfa76f;
    color: #1d1d1d;
}

.hero-slide .btn-outline-primary {
    border-color: #bfa76f;
    color: #bfa76f;
}

.hero-slide .btn-outline-primary:hover {
    background-color: #bfa76f;
    color: #1d1d1d;
}

.banner-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.banner-slider {
    position: relative;
    width: 100%;
    height: 100%;
}

.banner-slides {
    display: flex;
    transition: transform .8s ease-in-out;
    width: 100%;
    height: 100%;
}

.banner-slide {
    position: relative;
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    transition: opacity 0.5s ease-in-out;
}

.banner-slide img {
    width: 100%;
    height: 100%;
    display: block;
}

.banner-dots {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}

.banner-dot {
    width: 12px;
    height: 12px;
    background-color: #ddd;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color .3s;
}

.banner-dot.active {
    background-color: #4caf50;
}

/* ===================================================== */
/* ANNOUNCEMENT BAR
/* ===================================================== */

.top-announcement {
    width: 100%;
    overflow: hidden;
    background-color: #9b8653;
    color: #fff;
    font-size: 13px;
    font-weight: normal;
    padding: 10px 0;
    box-sizing: border-box;
    text-align: center;
    position: relative;
}

.flashing-star {
    display: inline-block;
    margin-left: 6px;
    animation: flash 1.2s ease-in-out infinite;
}

@keyframes flash {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
        filter: brightness(1.5);
    }
    50% {
        opacity: 0.3;
        transform: scale(1.3);
        filter: brightness(3);
    }
}

/* ===================================================== */
/* VSN BANNER
/* ===================================================== */

.VSNbanner {
    background-color: #1e2e1e;
    color: #fff;
    text-align: center;
    position: relative;
}

/* ===================================================== */
/* EMPLOYEE SIDEBAR
/* ===================================================== */

.custom-sidebar {
    min-height: 100vh;
}

.custom-sidebar {
    background-color: #19381f !important;
    color: #fff;
    border-right: 1px solid rgba(255, 255, 255, .1);
}

.custom-sidebar .nav-link {
    color: #fff;
    padding: 12px 20px;
    font-size: 16px;
    border-left: 4px solid transparent;
    transition: .3s;
    display: flex;
    align-items: center;
}

.custom-sidebar .nav-link i {
    color: #70a12b;
    font-size: 16px;
    min-width: 24px;
    margin-right: 12px;
}

.custom-sidebar .nav-link:focus,
.custom-sidebar .nav-link:hover {
    background-color: #4c934c;
    color: #fff;
    border-left: 4px solid #d0c911;
}

.custom-sidebar .nav-link.active {
    background-color: #2e4d32;
    color: #d0c911;
    border-left: 4px solid #d0c911;
}

.custom-sidebar .logout-link {
    color: #ff4d4d;
}

.custom-sidebar .logout-link:hover {
    background-color: #5e0b0b;
    color: #fff;
    border-left: 4px solid #ff4d4d;
}

.t-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    height: 100vh;
    overflow-y: auto;
    transition: width 0.3s ease, transform 0.3s ease;
    background: #1d3a2d;
    border-right: 1px solid #e5e5e5;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    width: 260px;
}

.t-sidebar.collapsed {
    transform: translateX(-100%);
}

.t-sidebar.mini {
    width: 53px;
}

.t-sidebar.expanded {
    width: 249px;
}

.t-sidebar .menu-text {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.t-sidebar.expanded .menu-text {
    opacity: 1;
    visibility: visible;
    margin-left: 12px;
}

.t-sidebar.mini .collapse {
    display: none !important;
}

.t-sidebar.mini .nav .nav {
    padding-left: 0 !important;
}

.t-sidebar.mini .nav-link i {
    margin-right: 0 !important;
    min-width: auto;
    font-size: 18px;
}

.sidebar-handle {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 40px;
    background-color: #1d3a2d;
    border-radius: 4px;
    color: #fff;
    font-weight: bold;
    font-size: 18px;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1061;
    user-select: none;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
    transition: left 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}

.sidebar-handle.mini::after {
    content: '>';
}

.sidebar-handle.expanded::after {
    content: '<';
}

.sidebar-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: 1049;
}

.sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* ===================================================== */
/* COUNTDOWN TIMER
/* ===================================================== */

/* ===================================================== */
/* MOBILE LAYOUT
/* ===================================================== */

.offer-title {
    font-size: 18px;
    font-weight: bold;
    margin: 0 0 5px 0;
    line-height: 1.2;
}

/* ===================================================== */
/* BEFORE/AFTER COMPARISON
/* ===================================================== */

.before-after-container {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .1);
}

.before-after-image {
    position: relative;
    height: 400px;
    width: 100%;
    cursor: col-resize;
}

.before-after-image .after,
.before-after-image .before {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

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

.before-after-image .after {
    z-index: 2;
    clip-path: inset(0 50% 0 0);
    transition: .1s linear;
}

.before-after-image .before {
    z-index: 1;
}

.before-after-image .label {
    position: absolute;
    bottom: 20px;
    padding: 5px 10px;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    border-radius: 4px;
    font-weight: 700;
    z-index: 3;
}

.before-after-image .before .label {
    left: 20px;
}

.before-after-image .after .label {
    right: 20px;
}

.before-after-image .slider-handle {
    position: absolute;
    top: 0;
    left: 50%;
    width: 4px;
    height: 100%;
    background: #fff;
    z-index: 4;
    cursor: ew-resize;
    box-shadow: 0 0 10px rgba(0, 0, 0, .3);
    transition: .1s linear;
}

.before-after-image .slider-handle:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    border: 4px solid #1d3c2f;
}

.before-after-image .slider-handle:after {
    content: '\f337';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #1d3c2f;
    font-size: 14px;
}

/* ===================================================== */
/* ABOUT SECTION
/* ===================================================== */

.about-section {
    position: relative;
    background-color: #000;
    overflow: hidden;
    z-index: 0;
}

.parallax-video-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%;
    overflow: hidden;
    z-index: 1;
    will-change: transform;
}

.parallax-video {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    pointer-events: none;
}

.video-overlay,
.text-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    pointer-events: none;
}

.video-overlay {
    background: rgba(0, 0, 0, .3);
    z-index: 2;
}

.text-overlay {
    background: rgba(0, 0, 0, .7);
    z-index: 2;
}

.container.position-relative,
.row.position-relative {
    position: relative;
    z-index: 2;
}

.about-content,
.values-content {
    background: 0 0;
    backdrop-filter: none;
    box-shadow: none;
    color: #fff;
    padding: 20px 0;
}

.about-content h2,
.about-content p,
.values-content h2,
.values-content h5,
.values-content p {
    color: #fff;
}

.about-content .btn,
.values-content .btn {
    background-color: transparent;
    border: 1px solid #fff;
    color: #fff;
}

.about-content .btn:hover,
.values-content .btn:hover {
    background-color: rgba(255, 255, 255, .2);
    color: #fff;
}

/* ===================================================== */
/* FEATURE & ICON STYLES
/* ===================================================== */

.feature-list {
    list-style: none;
    padding-left: 0;
}

.feature-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.icon-circle {
    width: 60px;
    height: 60px;
    background-color: #70a12b;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.5rem;
    margin-bottom: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
}

/* ===================================================== */
/* ANIMATIONS & TRANSITIONS
/* ===================================================== */

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-15px);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}

.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .6s ease-out, transform .6s ease-out;
    will-change: opacity, transform;
}

.fade-in-up.in-view,
.section-visible {
    opacity: 1;
    transform: translateY(0);
}

.section-animate {
    opacity: 1; /* Changed from 0 */
    transform: translateX(0); /* Changed from -50% */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    margin: 50px 0;
    will-change: opacity, transform;
}

.slide-in-left {
    transform: translateX(0); /* Changed from -100% */
}

.slide-in-left.section-visible {
    transform: translateX(0);
}

.slide-in-right {
    transform: translateX(100%);
}

.slide-in-right.section-visible {
    transform: translateX(0);
}

.transition-hover {
    transition: transform .3s;
}

.transition-scale {
    transition: transform .35s ease-in-out;
}

.spinner {
    display: none;
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #007bff;
    border-radius: 50%;
    animation: 1s linear infinite spin;
    margin: 20px auto;
}

/* ===================================================== */
/* SECTION TITLES
/* ===================================================== */

.section-title {
    position: relative;
    font-weight: 700;
    color: #19381f;
    display: inline-block;
}

.section-title::after {
    content: "";
    position: absolute;
    width: 60%;
    height: 3px;
    background-color: #d0c911;
    left: 0;
    bottom: -6px;
    border-radius: 3px;
}

/* ===================================================== */
/* NEWSLETTER
/* ===================================================== */

.newsletter-form .form-control {
    border: none;
    padding: 12px 15px;
    border-radius: 4px 0 0 4px;
}

.newsletter-form .btn {
    border-radius: 0 4px 4px 0;
}

/* ===================================================== */
/* CART ITEMS
/* ===================================================== */

/* ===================================================== */
/* SCROLL TO TOP BUTTON
/* ===================================================== */

#scrollTopBtn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 45px;
    height: 45px;
    background-color: #a7a328;
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, transform .3s, visibility .3s;
}

#scrollTopBtn.show {
    opacity: 1;
    visibility: visible;
    z-index: 100;
}

#scrollTopBtn:hover {
    background-color: #218838;
    transform: scale(1.1);
}

/* ===================================================== */
/* UTILITIES
/* ===================================================== */

.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mrgnt {
    margin-top: 0;
}

.exp-shop-now {
    background-color: #0d4a2e;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 999px;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: background-color .3s;
}

.exp-shop-now:hover {
    background-color: #0b3e27;
}

/* ===================================================== */
/* RESPONSIVE MEDIA QUERIES (ALL CONSOLIDATED)
/* ===================================================== */

/* Desktop: >= 992px */

/* Desktop: 769px and above */
@media (min-width: 769px) {
    .main-header {
        position: sticky;
        top: 0;
        z-index: 100;
    }
    
    .t-sidebar {
        position: static;
        width: 260px !important;
        transform: translateX(0) !important;
        height: 100%;
        box-shadow: none;
    }

    .t-sidebar .menu-text {
        opacity: 1 !important;
        visibility: visible !important;
        margin-left: 12px !important;
    }

    .sidebar-handle {
        display: none !important;
    }

    .sidebar-overlay {
        display: none !important;
    }
}

/* Tablet & Mobile: <= 768px */
@media (max-width: 768px) {
    .main-header {
        height: 56px;
    }
    
    .navbar-brand img {
        max-height: 34px;
    }
    
    .header-icons {
        gap: 4px;
    }
    
    .header-icons i {
        font-size: 15px;
    }
    
    .top-announcement {
        font-size: 12px;
        padding: 8px 0;
    }
    
    .navbar-brand {
        font-size: 1.1rem;
    }
    
    .card {
        margin-bottom: 1.5rem;
    }
    
    .parallax-video-wrapper {
        display: none;
    }
    
    .about-section {
        background-color: #111;
        margin-top: 35px;
    }
    
    .before-after-image {
        height: 300px;
    }
    
    .banner-container {
        height: auto;
    }
    
    .banner-slide {
        height: 100%;
        position: relative;
    }
    
    .banner-dots {
        bottom: 10px;
    }
    
    footer {
        font-size: 12px;
        padding: 10px 5px;
    }
    
    #scrollTopBtn {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
    
    .header-icons,
    .navbar-brand {
        font-size: 1.1rem;
    }
    
    .product-image-wrapper {
        height: 180px;
    }
    
    .before-after-image {
        height: 280px;
    }
    
    .header-icons {
        gap: 1rem;
    }
    
    table {
        display: block;
        overflow-x: auto;
    }
    
    .form-control {
        font-size: .9rem;
        padding: .5rem;
    }
    
    #sidebar {
        width: 260px;
    }
    
    #sidebar ul li a {
        font-size: 0.9rem;
    }
    
    #sidebar ul li i {
        font-size: 0.95rem;
        margin-left: 10px;
    }
    
    .table-responsive table thead {
        display: none;
    }
    
    .table-responsive table,
    .table-responsive tbody,
    .table-responsive td,
    .table-responsive tr {
        display: block;
        width: 100%;
    }
    
    .table-responsive tr {
        margin-bottom: 1.5rem;
        border: 1px solid #dee2e6;
        border-radius: .75rem;
        padding: 1rem;
        background: #fff;
    }
    
    .table-responsive td {
        border: none;
        padding: .5rem 0;
        position: relative;
    }
    
    .table-responsive td[data-label=Product] {
        display: flex;
        align-items: flex-start;
        margin-bottom: 1rem;
    }
    
    .table-responsive td[data-label=Product] img {
        width: 70px;
        height: 70px;
        object-fit: cover;
        border-radius: .5rem;
        margin-right: .75rem;
    }
    
    .table-responsive td[data-label=Product] div {
        flex: 1;
    }
    
    .table-responsive td[data-label=Product] h6 {
        margin: 0;
        font-size: 1rem;
        font-weight: 600;
    }
    
    .table-responsive td[data-label=Product] small {
        display: block;
        font-size: .85rem;
        color: #6c757d;
    }
    
    .table-responsive td[data-label=Price],
    .table-responsive td[data-label=Quantity],
    .table-responsive td[data-label=Total] {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    .table-responsive td[data-label=Price]::before {
        content: "Price";
        font-weight: 600;
        margin-right: 1rem;
        color: #212529;
    }
    
    .table-responsive td[data-label=Quantity]::before {
        content: "Quantity";
        font-weight: 600;
        margin-right: 1rem;
        color: #212529;
    }
    
    .table-responsive td[data-label=Quantity] input {
        max-width: 80px;
        margin: 0 .5rem;
        text-align: center;
    }
    
    .table-responsive td[data-label=Quantity] small {
        white-space: nowrap;
        font-size: .8rem;
        color: #6c757d;
    }
    
    .table-responsive td[data-label=Total]::before {
        content: "Total";
        font-weight: 600;
        margin-right: 1rem;
        color: #212529;
    }
    
    .table-responsive td[data-label=Action] {
        text-align: right;
    }
    
    .py-5 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    
    .exp-shop-now {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 50%;
        text-align: center;
    }
}

/* Small Mobile: <= 576px */
@media (max-width: 576px) {
    .card-title {
        font-size: .9rem;
    }
    
    .card-text.text-success,
    .header-icons,
    .navbar-brand {
        font-size: 1rem;
    }
    
    .product-image-wrapper {
        height: 150px;
    }
    
    .header-icons {
        gap: .6rem;
    }
    
    .header-icons .dropdown-menu {
        min-width: 220px !important;
    }
    
    .cart-buttons {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: .4rem;
    }
    
    .cart-buttons .btn {
        flex: 1;
        font-size: 9px;
        padding: .35rem .4rem;
        white-space: nowrap;
    }
}

/* Very Small Mobile: <= 450px */
@media (max-width: 450px) {
    
    .offer-title {
        font-size: 16px;
    }
}

/* Extra Small Mobile: <= 400px */
@media (max-width: 400px) {
    .top-announcement {
        font-size: 11px;
        padding: 6px 0;
    }
}

/* Ultra Small Mobile: <= 350px */
@media (max-width: 350px) {
    
    .offer-title {
        font-size: 15px;
    }
    
    #sidebar {
        width: 240px;
    }
    
    #sidebar ul li a {
        font-size: 0.85rem;
    }
    
    #sidebar ul li i {
        font-size: 0.9rem;
        margin-left: 8px;
    }
}

/* ===================================================== */
/* VIDEO RATIOS
/* ===================================================== */

.ratio {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    overflow: hidden;
}

.ratio-9x16 {
    position: relative;
    width: 100%;
    padding-top: 0;
    overflow: hidden;
}

.ratio iframe,
.ratio-9x16 iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}




@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
 
/* ── Section ─────────────────────────────────────── */
#featured-products {
  background: transparent;
  padding: 72px 0 96px;
  font-family: "Poppins", system-ui, sans-serif;
}
 
/* ── Header ──────────────────────────────────────── */
.fp-header {
  text-align: center;
  margin-bottom: 48px;
}
 
.fp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--fp-g100);
  border: 1px solid #b2d9bc;
  border-radius: var(--fp-r-pill);
  padding: 5px 18px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--fp-g600);
  margin-bottom: 14px;
}
 
.fp-eyebrow-dot {
  width: 6px; height: 6px;
  background: var(--fp-g400);
  border-radius: 50%;
  pointer-events: none;
  animation: fp-blink 2.4s ease-in-out infinite;
}
 
@keyframes fp-blink {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.25; transform: scale(0.6); }
}
 
.fp-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.8rem, 4.5vw, 3rem);
  font-weight: 700;
  color: var(--fp-ink);
  line-height: 1.15;
  margin: 0 0 10px;
  letter-spacing: -0.025em;
}
 
.fp-title em {
  font-style: italic;
  color: var(--fp-g600);
}
 
.fp-subtitle {
  font-size: 14.5px;
  font-weight: 300;
  color: var(--fp-dim);
  margin: 0;
  letter-spacing: 0.01em;
}
 
/* ── Carousel scaffolding ────────────────────────── */
.fp-carousel-outer { position: relative; }
 
/* Nav arrows */
.fp-nav {
  position: absolute;
  top: 50%;
  transform: translateY(calc(-50% - 20px));
  z-index: 20;
  width: 46px; height: 46px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--fp-white);
  border: 1.5px solid var(--fp-border);
  color: var(--fp-g700);
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 3px 14px rgba(10,46,18,0.10);
  transition:
    background   var(--fp-dur) var(--fp-ease),
    border-color var(--fp-dur) var(--fp-ease),
    color        var(--fp-dur) var(--fp-ease),
    box-shadow   var(--fp-dur) var(--fp-ease),
    transform    var(--fp-dur) var(--fp-spring);
}
 
.fp-nav:hover, .fp-nav:focus-visible {
  background: var(--fp-g700);
  border-color: var(--fp-g700);
  color: #c8f0d4;
  box-shadow: 0 8px 28px rgba(10,46,18,0.22);
  transform: translateY(calc(-50% - 20px)) scale(1.10);
  outline: none;
}
 
.fp-nav:focus-visible { outline: 3px solid var(--fp-g300); outline-offset: 2px; }
.fp-nav--prev { left:  -23px; }
.fp-nav--next { right: -23px; }
 
@media (max-width: 767px) {
  .fp-nav {
    top: auto; bottom: -54px;
    transform: none;
    width: 40px; height: 40px; font-size: 13px;
  }
  .fp-nav:hover, .fp-nav:focus-visible { transform: scale(1.10); }
  .fp-nav--prev { left:  calc(50% - 50px); }
  .fp-nav--next { right: calc(50% - 50px); }
}
 
/* Viewport */
.fp-viewport {
  overflow: hidden;
  padding: 14px 3px 18px;
  margin: -14px -3px -18px;
}
 
.fp-track {
  display: flex;
  gap: 22px;
  transition: transform 0.46s var(--fp-ease);
}
 
.fp-slide { flex: 0 0 calc(25% - 16.5px); min-width: 0; }
 
@media (max-width: 1199px) and (min-width: 992px) {
  .fp-slide { flex: 0 0 calc(33.333% - 15px); }
}
@media (max-width: 991px) and (min-width: 576px) {
  .fp-slide { flex: 0 0 calc(50% - 11px); }
}
@media (max-width: 575px) {
  .fp-slide { flex: 0 0 calc(50% - 6px); }
  .fp-track  { gap: 12px; }
}
 
/* ══════════════════════════════════════════════════
   PRODUCT CARD
══════════════════════════════════════════════════ */
.fp-card {
  background: var(--fp-card-bg);
  border: 1.5px solid var(--fp-border);
  border-radius: var(--fp-r);
  display: flex;
  flex-direction: column;
  height: 100%;
  text-align: center;
  position: relative;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  /* Layered shadow for depth */
  box-shadow:
    0 1px 3px rgba(10,46,18,0.04),
    0 4px 12px rgba(10,46,18,0.06);
  transition:
    transform    var(--fp-dur) var(--fp-spring),
    box-shadow   var(--fp-dur) var(--fp-ease),
    border-color var(--fp-dur) var(--fp-ease);
}
 
.fp-card:hover {
  transform: translateY(-8px);
  border-color: rgba(70,168,94,0.40);
  box-shadow:
    0 2px 6px  rgba(10,46,18,0.04),
    0 12px 32px rgba(10,46,18,0.12),
    0 24px 56px rgba(10,46,18,0.08);
}
 
/* Animated gradient border on hover */
.fp-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: var(--fp-r);
  padding: 1.5px;
  background: linear-gradient(
    120deg,
    transparent,
    transparent,
    var(--fp-g500),
    var(--fp-g300),
    var(--fp-g500),
    transparent,
    transparent
  );
  background-size: 300% 300%;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
 
.fp-card:hover::before {
  opacity: 1;
  animation: fp-neon-sweep 2.2s linear infinite;
  filter: drop-shadow(0 0 5px var(--fp-g300));
}
 
@keyframes fp-neon-sweep {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}
 
/* ══════════════════════════════════════════════════
   TOP-LEFT CORNER: Hot Badge
   (Positioned absolutely, opposite the wishlist)
══════════════════════════════════════════════════ */
.fp-corner-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px 4px 8px;
  border-radius: var(--fp-r-pill);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
}
 
.fp-corner-badge--hot {
  background: rgba(210, 110, 20, 0.92);
  border: 1px solid rgba(230, 130, 30, 0.50);
  color: #fff;
  box-shadow:
    0 2px 8px rgba(200,100,10,0.30),
    0 0 0 2px rgba(200,100,10,0.08);
  animation: fp-hot-pulse 2.8s ease-in-out infinite;
}
 
.fp-corner-badge--hot i {
  font-size: 10px;
  animation: fp-fire-flicker 1.4s ease-in-out infinite alternate;
}
 
@keyframes fp-hot-pulse {
  0%, 100% { box-shadow: 0 2px 8px rgba(200,100,10,0.30), 0 0 0 2px rgba(200,100,10,0.08); }
  50%       { box-shadow: 0 4px 16px rgba(200,100,10,0.50), 0 0 0 4px rgba(200,100,10,0.12); }
}
 
@keyframes fp-fire-flicker {
  from { transform: scale(1) rotate(-4deg);   opacity: 1;    }
  to   { transform: scale(1.15) rotate(4deg); opacity: 0.80; }
}
 
/* ══════════════════════════════════════════════════
   TOP-RIGHT CORNER: Wishlist
══════════════════════════════════════════════════ */
.fp-wishlist {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 8;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1.5px solid rgba(47,128,68,0.18);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--fp-faint);
  font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(10,46,18,0.10);
  transition:
    color        var(--fp-dur) var(--fp-ease),
    background   var(--fp-dur) var(--fp-ease),
    border-color var(--fp-dur) var(--fp-ease),
    transform    var(--fp-dur) var(--fp-spring);
}
 
.fp-wishlist:hover, .fp-wishlist:focus-visible {
  color: var(--fp-red);
  background: var(--fp-red-bg);
  border-color: rgba(192,57,43,0.28);
  transform: scale(1.15);
  outline: none;
}
 
.fp-wishlist:focus-visible { outline: 3px solid var(--fp-g300); outline-offset: 2px; }
.fp-wishlist[aria-pressed="true"] {
  color: var(--fp-red);
  background: var(--fp-red-bg);
  border-color: rgba(192,57,43,0.28);
}
 
/* ══════════════════════════════════════════════════
   IMAGE WRAPPER
   overflow:hidden lives ONLY here — card is free
   to lift without clipping
══════════════════════════════════════════════════ */
.fp-img-wrap {
  overflow: hidden;
  border-radius: var(--fp-r) var(--fp-r) 0 0;
  background: var(--fp-g50);
  aspect-ratio: 1 / 1;
  position: relative;
}
 
.fp-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.55s var(--fp-ease);
}
 
.fp-card:hover .fp-img-wrap img {
  transform: scale(1.06);
}
 
.fp-img-placeholder {
  aspect-ratio: 1 / 1;
  border-radius: var(--fp-r) var(--fp-r) 0 0;
  background: linear-gradient(150deg, var(--fp-g100), var(--fp-g50));
  display: flex; align-items: center; justify-content: center;
  color: var(--fp-g300);
  font-size: clamp(2.2rem, 5vw, 3rem);
}
 
/* ── Quick-view overlay ──────────────────────────── */
.fp-img-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 46, 18, 0.44);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.30s ease;
  border-radius: var(--fp-r) var(--fp-r) 0 0;
  pointer-events: none;
}
 
.fp-card:hover .fp-img-overlay {
  opacity: 1;
  pointer-events: auto;
}
 
.fp-quickview-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  border-radius: var(--fp-r-pill);
  background: rgba(255,255,255,0.95);
  color: var(--fp-g700);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-decoration: none;
  border: 1.5px solid rgba(47,128,68,0.22);
  box-shadow: 0 4px 16px rgba(10,46,18,0.18);
  transform: translateY(8px);
  transition:
    background   0.22s ease,
    color        0.22s ease,
    transform    0.26s var(--fp-spring),
    box-shadow   0.22s ease;
  white-space: nowrap;
}
 
.fp-card:hover .fp-quickview-btn {
  transform: translateY(0);
}
 
.fp-quickview-btn:hover {
  background: var(--fp-g700);
  color: #cef0d6;
  box-shadow: 0 6px 20px rgba(10,46,18,0.30);
  text-decoration: none;
}
 
/* ── Bottom image bar: Category (left) + Stock (right) ── */
.fp-img-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 6;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 28px 8px 8px;
  pointer-events: none;
}
 
/* ── Shared badge base ───────────────────────────── */
.fp-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: var(--fp-r-pill);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  line-height: 1.5;
  white-space: nowrap;
}
 
/* Category badge — bottom-left */
.fp-badge-cat {
  background: rgba(255,255,255,0.88);
  border: 1px solid rgba(47,128,68,0.22);
  color: var(--fp-g700);
}
 
/* In-stock badge — bottom-right */
.fp-badge-instock {
  background: rgba(30,100,50,0.82);
  border: 1px solid rgba(70,168,94,0.40);
  color: #d0f5db;
}
 
/* Out-of-stock badge — bottom-right */
.fp-badge-outstock {
  background: rgba(192,57,43,0.82);
  border: 1px solid rgba(192,57,43,0.40);
  color: #fde8e4;
}
 
/* ── Card body ───────────────────────────────────── */
.fp-body {
  padding: 16px 16px 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
 
/* Product name */
.fp-name {
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--fp-ink);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-decoration: none;
  transition: color var(--fp-dur) var(--fp-ease);
  width: 100%;
}
 
.fp-name:hover, .fp-name:focus-visible {
  color: var(--fp-g600);
  text-decoration: none;
  outline: none;
}
 
/* Star rating — score + stars + count all on one line */
.fp-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
}
 
.fp-stars {
  display: flex; gap: 2px;
  font-size: 12px;
  color: var(--fp-amber);
  line-height: 1;
}
 
.fp-stars .fp-star-empty { opacity: 0.22; }
 
.fp-rating-score {
  font-size: 12px;
  font-weight: 700;
  color: var(--fp-ink);
}
 
/* Review count — inline with stars row */
.fp-review-count {
  font-size: 11px;
  font-weight: 400;
  color: var(--fp-dim);
}
 
/* Sold count row */
.fp-sold-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 11px;
  color: var(--fp-dim);
}
 
.fp-sold-row i {
  font-size: 10px;
  color: var(--fp-amber);
}
 
/* Benefit tags */
.fp-benefits {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  width: 100%;
}
 
.fp-benefit-tag {
  display: none;
  background: var(--fp-tag-bg);
  border: 1px solid #c4e0cc;
  border-radius: var(--fp-r-pill);
  padding: 3px 10px;
  font-size: 10px;
  font-weight: 500;
  color: var(--fp-g600);
  letter-spacing: 0.3px;
  white-space: nowrap;
}
 
/* Thin separator */
.fp-rule {
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--fp-border), transparent);
  border: none; margin: 2px 0;
}
 
/* Price block */
.fp-price-block {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  margin-top: auto;
}
 
.fp-price-sale {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--fp-g800);
  letter-spacing: -0.02em;
  line-height: 1;
}
 
.fp-price-sale .fp-sym {
  font-size: 13px;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
  color: var(--fp-dim);
  vertical-align: super;
  margin-right: 1px;
}
 
.fp-price-orig {
  font-size: 12.5px;
  color: var(--fp-faint);
  text-decoration: line-through;
  font-weight: 400;
}
 
.fp-price-off {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--fp-red);
  background: var(--fp-red-bg);
  border-radius: var(--fp-r-pill);
  padding: 2px 8px;
  border: 1px solid rgba(192,57,43,0.18);
}
 
.fp-tax {
  font-size: 10px;
  color: var(--fp-faint);
  font-weight: 300;
  width: 100%;
  text-align: center;
  margin-top: -2px;
}
 
/* ── Footer / CTA ────────────────────────────────── */
.fp-footer {
  padding: 10px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
 
/* Shared button base */
.fp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  min-height: 42px;
  padding: 11px 14px;
  border-radius: var(--fp-r-sm);
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  line-height: 1;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition:
    background   var(--fp-dur) var(--fp-ease),
    border-color var(--fp-dur) var(--fp-ease),
    color        var(--fp-dur) var(--fp-ease),
    box-shadow   var(--fp-dur) var(--fp-ease),
    transform    var(--fp-dur) var(--fp-spring);
}
 
.fp-btn:focus-visible {
  outline: 3px solid var(--fp-g300);
  outline-offset: 2px;
}
 
/* Primary */
.fp-btn-primary {
  background: var(--fp-g700);
  border-color: var(--fp-g700);
  color: #cef0d6;
}
 
.fp-btn-primary:hover, .fp-btn-primary:focus-visible {
  background: var(--fp-g800);
  border-color: var(--fp-g800);
  color: #d8f5e2;
  box-shadow: 0 8px 24px rgba(10,46,18,0.26);
  transform: translateY(-2px);
  text-decoration: none;
}
 
/* Ghost secondary */
 
/* Disabled */
.fp-btn-disabled {
  background: #f0f0f0;
  border-color: #e0e0e0;
  color: #b0b0b0;
  cursor: not-allowed;
  opacity: 0.70;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.fp-btn-disabled:hover { transform: none; box-shadow: none; }
 
/* ── Dots ────────────────────────────────────────── */
.fp-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  margin-top: 36px;
  min-height: 10px;
}
 
@media (max-width: 767px) { .fp-dots { margin-top: 70px; } }
 
.fp-dot {
  width: 7px; height: 7px;
  border-radius: 4px;
  background: var(--fp-g100);
  border: 1px solid var(--fp-border);
  padding: 0;
  cursor: pointer;
  transition:
    width        0.28s var(--fp-ease),
    background   0.28s var(--fp-ease),
    border-color 0.28s var(--fp-ease);
}
 
.fp-dot:focus-visible { outline: 3px solid var(--fp-g300); outline-offset: 2px; }
.fp-dot--active {
  width: 24px;
  background: var(--fp-g500);
  border-color: var(--fp-g500);
}
 
/* ── Mobile ──────────────────────────────────────── */
@media (max-width: 575px) {
  #featured-products  { padding: 52px 0 78px; }
  .fp-body            { padding: 12px 12px 8px; gap: 6px; }
  .fp-footer          { padding: 8px 12px 12px; gap: 7px; }
  .fp-price-sale      { font-size: 17px; }
  .fp-name            { font-size: 13px; }
  .fp-btn             { font-size: 8px; min-height: 30px; padding: 5px 8px; }
  .fp-header          { margin-bottom: 38px; }
  .fp-benefit-tag     { display: inline-flex; }
  .fp-badge-cat       { display: none; }
  .fp-review-count    { display: none; }
  .fp-dots            { margin-top: 90px; }
  .fp-container       { padding: 0; }
 
  /* Quick-view disabled on mobile touch */
  .fp-img-overlay     { display: none; }
 
  /* Hot corner badge smaller on mobile */
  .fp-corner-badge    { font-size: 8.5px; padding: 3px 8px 3px 7px; }
 
  .mob-card {
    width: 90%;
    max-width: 90%;
    margin-left: 5%;
  }
}

/* ══════════════════════════════════════════════════
   TRENDING PRODUCTS — design tokens
   Mirrors the Featured Products (fp-*) variable set
   exactly; only the prefix changes to tp-*.
══════════════════════════════════════════════════ */
#trending-products {
  /* ── Palette ── */
  --tp-g50:    #f3f7f4;
  --tp-g100:   #e6f0e9;
  --tp-g300:   #a8d5ba;
  --tp-g400:   #5f9b6e;
  --tp-g500:   #46a85e;
  --tp-g600:   #2b6e3f;
  --tp-g700:   #2b6e3f;
  --tp-g800:   #1a4230;

  --tp-ink:    #1a2e21;
  --tp-dim:    #6c757d;
  --tp-faint:  #a8b9b0;

  --tp-amber:  #ffc107;
  --tp-red:    #c0392b;
  --tp-red-bg: #fee9e7;

  --tp-white:     #ffffff;
  --tp-card-bg:   #ffffff;
  --tp-border:    #dee7e0;
  --tp-tag-bg:    #e6f0e9;

  /* ── Radii ── */
  --tp-r:      20px;
  --tp-r-sm:   12px;
  --tp-r-pill: 999px;

  /* ── Motion ── */
  --tp-dur:    0.24s;
  --tp-ease:   ease;
  --tp-spring: cubic-bezier(0.2, 0.91, 0.38, 1.28);
}

/* ── Section ─────────────────────────────────────── */
#trending-products {
  background: transparent;
  padding: 72px 0 96px;
  font-family: "Poppins", system-ui, sans-serif;
}

/* ── Header ──────────────────────────────────────── */
.tp-header {
  text-align: center;
  margin-bottom: 48px;
}

.tp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--tp-g100);
  border: 1px solid #b2d9bc;
  border-radius: var(--tp-r-pill);
  padding: 5px 18px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--tp-g600);
  margin-bottom: 14px;
}

.tp-eyebrow-dot {
  width: 6px; height: 6px;
  background: var(--tp-g400);
  border-radius: 50%;
  pointer-events: none;
  animation: tp-blink 2.4s ease-in-out infinite;
}

@keyframes tp-blink {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.25; transform: scale(0.6); }
}

.tp-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.8rem, 4.5vw, 3rem);
  font-weight: 700;
  color: var(--tp-ink);
  line-height: 1.15;
  margin: 0 0 10px;
  letter-spacing: -0.025em;
}

.tp-title em {
  font-style: italic;
  color: var(--tp-g600);
}

.tp-subtitle {
  font-size: 14.5px;
  font-weight: 300;
  color: var(--tp-dim);
  margin: 0;
  letter-spacing: 0.01em;
}

/* ── Grid ────────────────────────────────────────── */
.tp-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}

.tp-col {
  flex: 0 0 calc(25% - 16.5px);
  min-width: 0;
}

@media (max-width: 1199px) and (min-width: 992px) {
  .tp-col { flex: 0 0 calc(33.333% - 15px); }
}

@media (max-width: 991px) and (min-width: 576px) {
  .tp-col { flex: 0 0 calc(50% - 11px); }
}

@media (max-width: 575px) {
  .tp-col  { flex: 0 0 calc(50% - 6px); }
  .tp-grid { gap: 12px; }
}

/* ══════════════════════════════════════════════════
   PRODUCT CARD
══════════════════════════════════════════════════ */
.tp-card {
  background: var(--tp-card-bg);
  border: 1.5px solid var(--tp-border);
  border-radius: var(--tp-r);
  display: flex;
  flex-direction: column;
  height: 100%;
  text-align: center;
  position: relative;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  box-shadow:
    0 1px 3px rgba(10,46,18,0.04),
    0 4px 12px rgba(10,46,18,0.06);
  transition:
    transform    var(--tp-dur) var(--tp-spring),
    box-shadow   var(--tp-dur) var(--tp-ease),
    border-color var(--tp-dur) var(--tp-ease);
}

.tp-card:hover {
  transform: translateY(-8px);
  border-color: rgba(70,168,94,0.40);
  box-shadow:
    0 2px 6px  rgba(10,46,18,0.04),
    0 12px 32px rgba(10,46,18,0.12),
    0 24px 56px rgba(10,46,18,0.08);
}

/* Animated gradient border on hover */
.tp-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: var(--tp-r);
  padding: 1.5px;
  background: linear-gradient(
    120deg,
    transparent,
    transparent,
    var(--tp-g500),
    var(--tp-g300),
    var(--tp-g500),
    transparent,
    transparent
  );
  background-size: 300% 300%;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.tp-card:hover::before {
  opacity: 1;
  animation: tp-neon-sweep 2.2s linear infinite;
  filter: drop-shadow(0 0 5px var(--tp-g300));
}

@keyframes tp-neon-sweep {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* ══════════════════════════════════════════════════
   TOP-LEFT CORNER: Hot Badge
══════════════════════════════════════════════════ */
.tp-corner-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px 4px 8px;
  border-radius: var(--tp-r-pill);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
}

.tp-corner-badge--hot {
  background: rgba(210, 110, 20, 0.92);
  border: 1px solid rgba(230, 130, 30, 0.50);
  color: #fff;
  box-shadow:
    0 2px 8px rgba(200,100,10,0.30),
    0 0 0 2px rgba(200,100,10,0.08);
  animation: tp-hot-pulse 2.8s ease-in-out infinite;
}

.tp-corner-badge--hot i {
  font-size: 10px;
  animation: tp-fire-flicker 1.4s ease-in-out infinite alternate;
}

@keyframes tp-hot-pulse {
  0%, 100% { box-shadow: 0 2px 8px rgba(200,100,10,0.30), 0 0 0 2px rgba(200,100,10,0.08); }
  50%       { box-shadow: 0 4px 16px rgba(200,100,10,0.50), 0 0 0 4px rgba(200,100,10,0.12); }
}

@keyframes tp-fire-flicker {
  from { transform: scale(1) rotate(-4deg);   opacity: 1;    }
  to   { transform: scale(1.15) rotate(4deg); opacity: 0.80; }
}

/* ══════════════════════════════════════════════════
   TOP-RIGHT CORNER: Wishlist
══════════════════════════════════════════════════ */
.tp-wishlist {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 8;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1.5px solid rgba(47,128,68,0.18);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--tp-faint);
  font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(10,46,18,0.10);
  transition:
    color        var(--tp-dur) var(--tp-ease),
    background   var(--tp-dur) var(--tp-ease),
    border-color var(--tp-dur) var(--tp-ease),
    transform    var(--tp-dur) var(--tp-spring);
}

.tp-wishlist:hover, .tp-wishlist:focus-visible {
  color: var(--tp-red);
  background: var(--tp-red-bg);
  border-color: rgba(192,57,43,0.28);
  transform: scale(1.15);
  outline: none;
}

.tp-wishlist:focus-visible { outline: 3px solid var(--tp-g300); outline-offset: 2px; }

.tp-wishlist[aria-pressed="true"] {
  color: var(--tp-red);
  background: var(--tp-red-bg);
  border-color: rgba(192,57,43,0.28);
}

/* ══════════════════════════════════════════════════
   IMAGE WRAPPER
══════════════════════════════════════════════════ */
.tp-img-wrap {
  overflow: hidden;
  border-radius: var(--tp-r) var(--tp-r) 0 0;
  background: var(--tp-g50);
  aspect-ratio: 1 / 1;
  position: relative;
}

.tp-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.55s var(--tp-ease);
}

.tp-card:hover .tp-img-wrap img {
  transform: scale(1.06);
}

.tp-img-placeholder {
  aspect-ratio: 1 / 1;
  border-radius: var(--tp-r) var(--tp-r) 0 0;
  background: linear-gradient(150deg, var(--tp-g100), var(--tp-g50));
  display: flex; align-items: center; justify-content: center;
  color: var(--tp-g300);
  font-size: clamp(2.2rem, 5vw, 3rem);
}

/* ── Quick-view overlay ──────────────────────────── */
.tp-img-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 46, 18, 0.44);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.30s ease;
  border-radius: var(--tp-r) var(--tp-r) 0 0;
  pointer-events: none;
}

.tp-card:hover .tp-img-overlay {
  opacity: 1;
  pointer-events: auto;
}

.tp-quickview-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  border-radius: var(--tp-r-pill);
  background: rgba(255,255,255,0.95);
  color: var(--tp-g700);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-decoration: none;
  border: 1.5px solid rgba(47,128,68,0.22);
  box-shadow: 0 4px 16px rgba(10,46,18,0.18);
  transform: translateY(8px);
  transition:
    background   0.22s ease,
    color        0.22s ease,
    transform    0.26s var(--tp-spring),
    box-shadow   0.22s ease;
  white-space: nowrap;
}

.tp-card:hover .tp-quickview-btn {
  transform: translateY(0);
}

.tp-quickview-btn:hover {
  background: var(--tp-g700);
  color: #cef0d6;
  box-shadow: 0 6px 20px rgba(10,46,18,0.30);
  text-decoration: none;
}

/* ── Bottom image bar ────────────────────────────── */
.tp-img-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 6;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 28px 8px 8px;
  pointer-events: none;
}

/* ── Shared badge base ───────────────────────────── */
.tp-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: var(--tp-r-pill);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  line-height: 1.5;
  white-space: nowrap;
}

/* Category badge */
.tp-badge-cat {
  background: rgba(255,255,255,0.88);
  border: 1px solid rgba(47,128,68,0.22);
  color: var(--tp-g700);
}

/* In-stock badge */
.tp-badge-instock {
  background: rgba(30,100,50,0.82);
  border: 1px solid rgba(70,168,94,0.40);
  color: #d0f5db;
}

/* Out-of-stock badge */
.tp-badge-outstock {
  background: rgba(192,57,43,0.82);
  border: 1px solid rgba(192,57,43,0.40);
  color: #fde8e4;
}

/* ── Card body ───────────────────────────────────── */
.tp-body {
  padding: 16px 16px 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}

/* Product name */
.tp-name {
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--tp-ink);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-decoration: none;
  transition: color var(--tp-dur) var(--tp-ease);
  width: 100%;
}

.tp-name:hover, .tp-name:focus-visible {
  color: var(--tp-g600);
  text-decoration: none;
  outline: none;
}

/* Star rating — score + stars + count on one line */
.tp-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
}

.tp-stars {
  display: flex; gap: 2px;
  font-size: 12px;
  color: var(--tp-amber);
  line-height: 1;
}

.tp-stars .tp-star-empty { opacity: 0.22; }

.tp-rating-score {
  font-size: 12px;
  font-weight: 700;
  color: var(--tp-ink);
}

/* Review count — inline with stars row */
.tp-review-count {
  font-size: 11px;
  font-weight: 400;
  color: var(--tp-dim);
}

/* Sold count row */
.tp-sold-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 11px;
  color: var(--tp-dim);
}

.tp-sold-row i {
  font-size: 10px;
  color: var(--tp-amber);
}

/* Benefit tags */
.tp-benefits {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  width: 100%;
}

.tp-benefit-tag {
  display: none;
  background: var(--tp-tag-bg);
  border: 1px solid #c4e0cc;
  border-radius: var(--tp-r-pill);
  padding: 3px 10px;
  font-size: 10px;
  font-weight: 500;
  color: var(--tp-g600);
  letter-spacing: 0.3px;
  white-space: nowrap;
}

/* Thin separator */
.tp-rule {
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--tp-border), transparent);
  border: none; margin: 2px 0;
}

/* Price block */
.tp-price-block {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  margin-top: auto;
}

.tp-price-sale {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--tp-g800);
  letter-spacing: -0.02em;
  line-height: 1;
}

.tp-price-sale .tp-sym {
  font-size: 13px;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
  color: var(--tp-dim);
  vertical-align: super;
  margin-right: 1px;
}

.tp-price-orig {
  font-size: 12.5px;
  color: var(--tp-faint);
  text-decoration: line-through;
  font-weight: 400;
}

.tp-price-off {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--tp-red);
  background: var(--tp-red-bg);
  border-radius: var(--tp-r-pill);
  padding: 2px 8px;
  border: 1px solid rgba(192,57,43,0.18);
}

.tp-tax {
  font-size: 10px;
  color: var(--tp-faint);
  font-weight: 300;
  width: 100%;
  text-align: center;
  margin-top: -2px;
}

/* ── Footer / CTA ────────────────────────────────── */
.tp-footer {
  padding: 10px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Shared button base */
.tp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  min-height: 42px;
  padding: 11px 14px;
  border-radius: var(--tp-r-sm);
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  line-height: 1;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition:
    background   var(--tp-dur) var(--tp-ease),
    border-color var(--tp-dur) var(--tp-ease),
    color        var(--tp-dur) var(--tp-ease),
    box-shadow   var(--tp-dur) var(--tp-ease),
    transform    var(--tp-dur) var(--tp-spring);
}

.tp-btn:focus-visible {
  outline: 3px solid var(--tp-g300);
  outline-offset: 2px;
}

/* Primary */
.tp-btn-primary {
  background: var(--tp-g700);
  border-color: var(--tp-g700);
  color: #cef0d6;
}

.tp-btn-primary:hover, .tp-btn-primary:focus-visible {
  background: var(--tp-g800);
  border-color: var(--tp-g800);
  color: #d8f5e2;
  box-shadow: 0 8px 24px rgba(10,46,18,0.26);
  transform: translateY(-2px);
  text-decoration: none;
}

/* Ghost / outline */

/* Disabled */
.tp-btn-disabled {
  background: #f0f0f0;
  border-color: #e0e0e0;
  color: #b0b0b0;
  cursor: not-allowed;
  opacity: 0.70;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.tp-btn-disabled:hover { transform: none; box-shadow: none; }

/* ── Mobile ──────────────────────────────────────── */
@media (max-width: 767px) {
  #trending-products { padding: 52px 0 78px; }
  .tp-header         { margin-bottom: 38px; }
}

@media (max-width: 575px) {
  #trending-products  { padding: 52px 0 78px; }
  .tp-body            { padding: 12px 12px 8px; gap: 6px; }
  .tp-footer          { padding: 8px 12px 12px; gap: 7px; }
  .tp-price-sale      { font-size: 17px; }
  .tp-name            { font-size: 13px; }
  .tp-btn             { font-size: 8px; min-height: 30px; padding: 5px 8px; }
  .tp-header          { margin-bottom: 38px; }
  .tp-benefit-tag     { display: inline-flex; }
  .tp-badge-cat       { display: none; }
  .tp-review-count    { display: none; }
  .tp-container       { padding: 0; }

  /* Quick-view disabled on mobile touch */
  .tp-img-overlay     { display: none; }

  /* Hot corner badge smaller on mobile */
  .tp-corner-badge    { font-size: 8.5px; padding: 3px 8px 3px 7px; }
}


/* ══════════════════════════════════════════════════
   BEST SELLERS — design tokens
   Mirrors the Featured Products (fp-*) variable set;
   amber/gold accent palette replaces the green theme.
══════════════════════════════════════════════════ */
#best-sellers {
  /* ── Palette ── */
  --bs-a50:    #fff9f0;
  --bs-a100:   #fff2dd;
  --bs-a300:   #ffd9a8;
  --bs-a400:   #f39c12;
  --bs-a500:   #e67e22;
  --bs-a600:   #b45b0f;
  --bs-a700:   #b45b0f;
  --bs-a800:   #8a450c;

  --bs-ink:    #1a2e21;
  --bs-dim:    #6c757d;
  --bs-faint:  #a8b9b0;

  --bs-amber:  #ffc107;
  --bs-red:    #c0392b;
  --bs-red-bg: #fee9e7;

  --bs-white:    #ffffff;
  --bs-card-bg:  #ffffff;
  --bs-border:   #dee7e0;
  --bs-tag-bg:   #fff2dd;

  /* ── Radii ── */
  --bs-r:      20px;
  --bs-r-sm:   12px;
  --bs-r-pill: 999px;

  /* ── Motion ── */
  --bs-dur:    0.24s;
  --bs-ease:   ease;
  --bs-spring: cubic-bezier(0.2, 0.91, 0.38, 1.28);
}

/* ── Section ─────────────────────────────────────── */
#best-sellers {
  background: transparent;
  padding: 72px 0 96px;
  font-family: "Poppins", system-ui, sans-serif;
}

/* ── Header ──────────────────────────────────────── */
.bs-header {
  text-align: center;
  margin-bottom: 48px;
}

.bs-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bs-a100);
  border: 1px solid var(--bs-a300);
  border-radius: var(--bs-r-pill);
  padding: 5px 18px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--bs-a600);
  margin-bottom: 14px;
}

.bs-eyebrow-dot {
  width: 6px; height: 6px;
  background: var(--bs-a400);
  border-radius: 50%;
  pointer-events: none;
  animation: bs-blink 2.4s ease-in-out infinite;
}

@keyframes bs-blink {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.25; transform: scale(0.6); }
}

.bs-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.8rem, 4.5vw, 3rem);
  font-weight: 700;
  color: var(--bs-ink);
  line-height: 1.15;
  margin: 0 0 10px;
  letter-spacing: -0.025em;
}

.bs-title em {
  font-style: italic;
  color: var(--bs-a600);
}

.bs-subtitle {
  font-size: 14.5px;
  font-weight: 300;
  color: var(--bs-dim);
  margin: 0;
  letter-spacing: 0.01em;
}

/* ── Grid ────────────────────────────────────────── */
.bs-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}

.bs-col {
  flex: 0 0 calc(25% - 16.5px);
  min-width: 0;
}

@media (max-width: 1199px) and (min-width: 992px) {
  .bs-col { flex: 0 0 calc(33.333% - 15px); }
}

@media (max-width: 991px) and (min-width: 576px) {
  .bs-col { flex: 0 0 calc(50% - 11px); }
}

@media (max-width: 575px) {
  .bs-col  { flex: 0 0 calc(50% - 6px); }
  .bs-grid { gap: 12px; }
}

/* ══════════════════════════════════════════════════
   PRODUCT CARD
══════════════════════════════════════════════════ */
.bs-card {
  background: var(--bs-card-bg);
  border: 1.5px solid var(--bs-border);
  border-radius: var(--bs-r);
  display: flex;
  flex-direction: column;
  height: 100%;
  text-align: center;
  position: relative;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  box-shadow:
    0 1px 3px rgba(110,65,10,0.04),
    0 4px 12px rgba(110,65,10,0.06);
  transition:
    transform    var(--bs-dur) var(--bs-spring),
    box-shadow   var(--bs-dur) var(--bs-ease),
    border-color var(--bs-dur) var(--bs-ease);
}

.bs-card:hover {
  transform: translateY(-8px);
  border-color: rgba(244,157,28,0.40);
  box-shadow:
    0 2px 6px  rgba(110,65,10,0.04),
    0 12px 32px rgba(110,65,10,0.12),
    0 24px 56px rgba(110,65,10,0.08);
}

/* Animated amber gradient border on hover */
.bs-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: var(--bs-r);
  padding: 1.5px;
  background: linear-gradient(
    120deg,
    transparent,
    transparent,
    var(--bs-a500),
    var(--bs-a300),
    var(--bs-a500),
    transparent,
    transparent
  );
  background-size: 300% 300%;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.bs-card:hover::before {
  opacity: 1;
  animation: bs-neon-sweep 2.2s linear infinite;
  filter: drop-shadow(0 0 5px var(--bs-a300));
}

@keyframes bs-neon-sweep {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* ══════════════════════════════════════════════════
   TOP-LEFT CORNER: Best Seller Badge
══════════════════════════════════════════════════ */
.bs-corner-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px 4px 8px;
  border-radius: var(--bs-r-pill);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
}

.bs-corner-badge--best {
  background: rgba(244, 157, 28, 0.92);
  border: 1px solid rgba(255, 190, 90, 0.55);
  color: #fff;
  box-shadow:
    0 2px 8px rgba(180,91,15,0.30),
    0 0 0 2px rgba(180,91,15,0.08);
  animation: bs-best-pulse 2.8s ease-in-out infinite;
}

.bs-corner-badge--best i {
  font-size: 10px;
  animation: bs-crown-shine 1.8s ease-in-out infinite alternate;
}

@keyframes bs-best-pulse {
  0%, 100% { box-shadow: 0 2px 8px rgba(180,91,15,0.30), 0 0 0 2px rgba(180,91,15,0.08); }
  50%       { box-shadow: 0 4px 16px rgba(180,91,15,0.50), 0 0 0 4px rgba(180,91,15,0.14); }
}

@keyframes bs-crown-shine {
  from { transform: scale(1) rotate(-6deg);   opacity: 1;    }
  to   { transform: scale(1.15) rotate(6deg); opacity: 0.80; }
}

/* ══════════════════════════════════════════════════
   TOP-RIGHT CORNER: Wishlist
══════════════════════════════════════════════════ */
.bs-wishlist {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 8;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1.5px solid rgba(180,91,15,0.18);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--bs-faint);
  font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(110,65,10,0.10);
  transition:
    color        var(--bs-dur) var(--bs-ease),
    background   var(--bs-dur) var(--bs-ease),
    border-color var(--bs-dur) var(--bs-ease),
    transform    var(--bs-dur) var(--bs-spring);
}

.bs-wishlist:hover, .bs-wishlist:focus-visible {
  color: var(--bs-red);
  background: var(--bs-red-bg);
  border-color: rgba(192,57,43,0.28);
  transform: scale(1.15);
  outline: none;
}

.bs-wishlist:focus-visible { outline: 3px solid var(--bs-a300); outline-offset: 2px; }

.bs-wishlist[aria-pressed="true"] {
  color: var(--bs-red);
  background: var(--bs-red-bg);
  border-color: rgba(192,57,43,0.28);
}

/* ══════════════════════════════════════════════════
   IMAGE WRAPPER
══════════════════════════════════════════════════ */
.bs-img-wrap {
  overflow: hidden;
  border-radius: var(--bs-r) var(--bs-r) 0 0;
  background: var(--bs-a50);
  aspect-ratio: 1 / 1;
  position: relative;
}

.bs-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.55s var(--bs-ease);
}

.bs-card:hover .bs-img-wrap img {
  transform: scale(1.06);
}

.bs-img-placeholder {
  aspect-ratio: 1 / 1;
  border-radius: var(--bs-r) var(--bs-r) 0 0;
  background: linear-gradient(150deg, var(--bs-a100), var(--bs-a50));
  display: flex; align-items: center; justify-content: center;
  color: var(--bs-a300);
  font-size: clamp(2.2rem, 5vw, 3rem);
}

/* ── Quick-view overlay ──────────────────────────── */
.bs-img-overlay {
  position: absolute;
  inset: 0;
  background: rgba(110, 65, 10, 0.44);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.30s ease;
  border-radius: var(--bs-r) var(--bs-r) 0 0;
  pointer-events: none;
}

.bs-card:hover .bs-img-overlay {
  opacity: 1;
  pointer-events: auto;
}

.bs-quickview-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  border-radius: var(--bs-r-pill);
  background: rgba(255,255,255,0.95);
  color: var(--bs-a700);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-decoration: none;
  border: 1.5px solid rgba(180,91,15,0.22);
  box-shadow: 0 4px 16px rgba(110,65,10,0.18);
  transform: translateY(8px);
  transition:
    background   0.22s ease,
    color        0.22s ease,
    transform    0.26s var(--bs-spring),
    box-shadow   0.22s ease;
  white-space: nowrap;
}

.bs-card:hover .bs-quickview-btn {
  transform: translateY(0);
}

.bs-quickview-btn:hover {
  background: var(--bs-a700);
  color: #fff9f0;
  box-shadow: 0 6px 20px rgba(110,65,10,0.30);
  text-decoration: none;
}

/* ── Bottom image bar ────────────────────────────── */
.bs-img-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 6;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 28px 8px 8px;
  pointer-events: none;
}

/* ── Shared badge base ───────────────────────────── */
.bs-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: var(--bs-r-pill);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  line-height: 1.5;
  white-space: nowrap;
}

/* Category badge */
.bs-badge-cat {
  background: rgba(255,255,255,0.88);
  border: 1px solid rgba(180,91,15,0.22);
  color: var(--bs-a700);
}

/* In-stock badge */
.bs-badge-instock {
  background: rgba(30,100,50,0.82);
  border: 1px solid rgba(70,168,94,0.40);
  color: #d0f5db;
}

/* Out-of-stock badge */
.bs-badge-outstock {
  background: rgba(192,57,43,0.82);
  border: 1px solid rgba(192,57,43,0.40);
  color: #fde8e4;
}

/* ── Card body ───────────────────────────────────── */
.bs-body {
  padding: 16px 16px 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}

/* Product name */
.bs-name {
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--bs-ink);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-decoration: none;
  transition: color var(--bs-dur) var(--bs-ease);
  width: 100%;
}

.bs-name:hover, .bs-name:focus-visible {
  color: var(--bs-a600);
  text-decoration: none;
  outline: none;
}

/* Star rating — score + stars + count on one line */
.bs-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
}

.bs-stars {
  display: flex; gap: 2px;
  font-size: 12px;
  color: var(--bs-amber);
  line-height: 1;
}

.bs-stars .bs-star-empty { opacity: 0.22; }

.bs-rating-score {
  font-size: 12px;
  font-weight: 700;
  color: var(--bs-ink);
}

/* Review count — inline with stars row */
.bs-review-count {
  font-size: 11px;
  font-weight: 400;
  color: var(--bs-dim);
}

/* Sold count row */
.bs-sold-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 11px;
  color: var(--bs-dim);
}

.bs-sold-row i {
  font-size: 10px;
  color: var(--bs-amber);
}

/* Benefit tags */
.bs-benefits {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  width: 100%;
}

.bs-benefit-tag {
  display: none;
  background: var(--bs-tag-bg);
  border: 1px solid var(--bs-a300);
  border-radius: var(--bs-r-pill);
  padding: 3px 10px;
  font-size: 10px;
  font-weight: 500;
  color: var(--bs-a600);
  letter-spacing: 0.3px;
  white-space: nowrap;
}

/* Thin separator */
.bs-rule {
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--bs-border), transparent);
  border: none; margin: 2px 0;
}

/* Price block */
.bs-price-block {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  margin-top: auto;
}

.bs-price-sale {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--bs-a800);
  letter-spacing: -0.02em;
  line-height: 1;
}

.bs-price-sale .bs-sym {
  font-size: 13px;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
  color: var(--bs-dim);
  vertical-align: super;
  margin-right: 1px;
}

.bs-price-orig {
  font-size: 12.5px;
  color: var(--bs-faint);
  text-decoration: line-through;
  font-weight: 400;
}

.bs-price-off {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--bs-red);
  background: var(--bs-red-bg);
  border-radius: var(--bs-r-pill);
  padding: 2px 8px;
  border: 1px solid rgba(192,57,43,0.18);
}

.bs-tax {
  font-size: 10px;
  color: var(--bs-faint);
  font-weight: 300;
  width: 100%;
  text-align: center;
  margin-top: -2px;
}

/* ── Footer / CTA ────────────────────────────────── */
.bs-footer {
  padding: 10px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Shared button base */
.bs-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  min-height: 42px;
  padding: 11px 14px;
  border-radius: var(--bs-r-sm);
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  line-height: 1;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition:
    background   var(--bs-dur) var(--bs-ease),
    border-color var(--bs-dur) var(--bs-ease),
    color        var(--bs-dur) var(--bs-ease),
    box-shadow   var(--bs-dur) var(--bs-ease),
    transform    var(--bs-dur) var(--bs-spring);
}

.bs-btn:focus-visible {
  outline: 3px solid var(--bs-a300);
  outline-offset: 2px;
}

/* Primary — amber theme */
.bs-btn-primary {
  background: var(--bs-a700);
  border-color: var(--bs-a700);
  color: #fff2dd;
}

.bs-btn-primary:hover, .bs-btn-primary:focus-visible {
  background: var(--bs-a800);
  border-color: var(--bs-a800);
  color: #fff9f0;
  box-shadow: 0 8px 24px rgba(110,65,10,0.26);
  transform: translateY(-2px);
  text-decoration: none;
}

/* Ghost / outline */

/* Disabled */
.bs-btn-disabled {
  background: #f0f0f0;
  border-color: #e0e0e0;
  color: #b0b0b0;
  cursor: not-allowed;
  opacity: 0.70;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.bs-btn-disabled:hover { transform: none; box-shadow: none; }

/* ── Mobile ──────────────────────────────────────── */
@media (max-width: 767px) {
  #best-sellers { padding: 52px 0 78px; }
  .bs-header    { margin-bottom: 38px; }
}

@media (max-width: 575px) {
  #best-sellers   { padding: 52px 0 78px; }
  .bs-body        { padding: 12px 12px 8px; gap: 6px; }
  .bs-footer      { padding: 8px 12px 12px; gap: 7px; }
  .bs-price-sale  { font-size: 17px; }
  .bs-name        { font-size: 13px; }
  .bs-btn         { font-size: 8px; min-height: 30px; padding: 5px 8px; }
  .bs-header      { margin-bottom: 38px; }
  .bs-benefit-tag { display: inline-flex; }
  .bs-badge-cat   { display: none; }
  .bs-review-count { display: none; }
  .bs-container   { padding: 0; }

  /* Quick-view disabled on mobile touch */
  .bs-img-overlay  { display: none; }

  /* Best seller corner badge smaller on mobile */
  .bs-corner-badge { font-size: 8.5px; padding: 3px 8px 3px 7px; }
}


/* ============================================================
   VSN BANNER — Enhanced Modern Styles
   ============================================================ */

/* ---------- Base container ---------- */
.VSNbanner {
  position: relative;
  width: 100%;
  background: #141f14;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.banner-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* ---------- Progress bar ---------- */
.banner-progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: rgba(255,255,255,0.12);
  z-index: 50;
}

.banner-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #bfa76f, #e8c97c);
  width: 0%;
  transition: width 0.1s linear;
}

/* ---------- Slider track ---------- */
.banner-slider {
  position: relative;
  width: 100%;
}

.banner-slides {
  display: flex;
  transition: transform 0.75s cubic-bezier(0.77, 0, 0.175, 1);
  will-change: transform;
}

/* ---------- Individual slide ---------- */
.banner-slide {
  flex-shrink: 0;
  width: 100%;
  position: relative;
  overflow: hidden;
}

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

/* ---------- Standard slide overlays ---------- */
.slide-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.55s ease, transform 0.55s ease;
  pointer-events: none;
}

.banner-slide.is-active .slide-overlay {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ------------------------------------------------------------------
   SLIDE 1 OVERLAY — "Vedsudha Naturals / Ayurvedic Range"
   Content is centred horizontally and sits near the top of the banner,
   leaving the product images in the lower half fully visible.

   ▸ align-items      → vertical position of the content block
                        flex-start = top | center = middle | flex-end = bottom
   ▸ padding-top      → distance from the top edge of the banner
                        increase to push content further down
   ▸ justify-content  → horizontal alignment of the content block
                        center = centred | flex-start = left | flex-end = right
   ▸ background       → top-to-bottom dark fade so text stays readable
                        tweak rgba alpha (0–1) for stronger / weaker tint
   ------------------------------------------------------------------ */
.overlay-1 {
  background: linear-gradient(180deg, rgba(20,31,20,0.55) 0%, rgba(20,31,20,0.15) 55%, transparent 100%);
  align-items: flex-start;    /* ← vertical:   flex-start | center | flex-end */
  justify-content: center;    /* ← horizontal: center | flex-start | flex-end */
  padding-top: 30px;          /* ← gap from top edge — increase to push content down */
}

/* Centre text + button for Slide 1 */
.overlay-1 .slide-content {
  text-align: center;         /* ← text-align: center | left | right */
  max-width: 720px;           /* ← widen/narrow the text column */
  padding: 0 5%;
}

.overlay-1 .slide-btn {
  margin: 0 auto;             /* keeps the inline-flex button centred */
}

/* ------------------------------------------------------------------
   SLIDE 2 OVERLAY — "Psoro Sudha"
   Content sits vertically centred on the left side of the image.

   ▸ align-items      → flex-start | center | flex-end
   ▸ background       → warm dark fade from left edge
   ▸ To push content lower, change align-items to flex-end and
     add padding-bottom instead of padding-top
   ------------------------------------------------------------------ */
.overlay-2 {
  background: linear-gradient(90deg, rgba(20,10,5,0.80) 0%, rgba(20,10,5,0.2) 65%, transparent 100%);
  align-items: center;       /* ← vertical: flex-start | center | flex-end */
}

/* ------------------------------------------------------------------
   SLIDE 3 OVERLAY — "Yakrit Sudha"
   Content sits vertically centred on the left side of the image.

   ▸ align-items      → flex-start | center | flex-end
   ▸ background       → dark green fade from left edge
   ▸ To push content lower, change align-items to flex-end and
     add padding-bottom instead of padding-top
   ------------------------------------------------------------------ */
.overlay-3 {
  background: linear-gradient(90deg, rgba(10,20,15,0.82) 0%, rgba(10,20,15,0.2) 65%, transparent 100%);
  align-items: center;       /* ← vertical: flex-start | center | flex-end */
}

.slide-content {
  padding: 0 5%;
  max-width: 480px;
}

.slide-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #bfa76f;
  background: rgba(191,167,111,0.12);
  border: 1px solid rgba(191,167,111,0.3);
  border-radius: 20px;
  padding: 4px 12px;
  margin-bottom: 12px;
}

.slide-content h2 {
  font-size: clamp(22px, 3vw, 38px);
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  margin: 0 0 10px;
}

.slide-content p {
  font-size: clamp(12px, 1.4vw, 16px);
  color: rgba(255,255,255,0.78);
  line-height: 1.6;
  margin: 0 0 20px;
}

.slide-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #bfa76f;
  color: #1a1a1a;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  padding: 11px 22px;
  border-radius: 40px;
  text-decoration: none;
  transition: background 0.25s, transform 0.2s, box-shadow 0.25s;
  box-shadow: 0 4px 20px rgba(191,167,111,0.3);
}

.slide-btn:hover {
  background: #d4bc88;
  color: #111;
  transform: translateY(-1px);
  box-shadow: 0 6px 28px rgba(191,167,111,0.45);
}

/* ---------- Prev / Next arrows ---------- */
.banner-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.banner-arrow:hover {
  background: rgba(191,167,111,0.22);
  border-color: rgba(191,167,111,0.55);
  transform: translateY(-50%) scale(1.08);
}

.banner-arrow-prev { left: 16px; }
.banner-arrow-next { right: 16px; }

/* ---------- Dot navigation ---------- */
.banner-dots {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 30;
}

.banner-dot {
  width: 8px;
  height: 8px;
  background: rgba(255,255,255,0.35);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s, width 0.3s, border-radius 0.3s;
  padding: 0;
}

.banner-dot.active {
  width: 26px;
  border-radius: 4px;
  background: #bfa76f;
}

/* ============================================================
   HERO SLIDE
   ============================================================ */

.hero-slide {
  background: #141f14;
  min-height: 480px;
}

/* ---------- Desktop layout ---------- */
.hero-desktop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 480px;
  padding: 60px 6% 60px 7%;
  position: relative;
  overflow: hidden;
}

.hero-bg-pattern {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 70% 50%, rgba(191,167,111,0.08) 0%, transparent 55%),
    radial-gradient(circle at 20% 80%, rgba(191,167,111,0.05) 0%, transparent 40%);
  pointer-events: none;
}

.hero-text-col {
  flex: 0 0 50%;
  max-width: 50%;
  z-index: 2;
}

.hero-img-col {
  flex: 0 0 44%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  z-index: 2;
}

.hero-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #bfa76f;
  background: rgba(191,167,111,0.1);
  border: 1px solid rgba(191,167,111,0.3);
  border-radius: 20px;
  padding: 5px 14px;
  margin-bottom: 16px;
}

.hero-heading {
  font-size: clamp(26px, 3.5vw, 46px);
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}

.hero-desc {
  font-size: clamp(13px, 1.3vw, 16px);
  color: rgba(255,255,255,0.72);
  line-height: 1.65;
  margin: 0 0 28px;
  max-width: 420px;
}

/* ---------- Countdown ---------- */
.hero-countdown {
  margin-bottom: 32px;
}

.countdown-label-text {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(191,167,111,0.7);
  margin: 0 0 12px;
}

.countdown-boxes {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cbox {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(191,167,111,0.2);
  border-radius: 10px;
  padding: 10px 14px;
  text-align: center;
  min-width: 58px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.cnum {
  display: block;
  font-size: 26px;
  font-weight: 800;
  color: #bfa76f;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.02em;
}

.clbl {
  display: block;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-top: 4px;
}

.csep {
  font-size: 22px;
  font-weight: 700;
  color: rgba(191,167,111,0.5);
  margin-bottom: 16px;
}

/* ---------- CTA ---------- */
.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #bfa76f;
  color: #111;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  padding: 14px 28px;
  border-radius: 40px;
  text-decoration: none;
  transition: background 0.25s, transform 0.2s, box-shadow 0.25s;
  box-shadow: 0 6px 24px rgba(191,167,111,0.35);
}

.hero-cta:hover {
  background: #d4bc88;
  color: #111;
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(191,167,111,0.5);
}

/* ---------- Hero image ---------- */
.hero-img-glow {
  position: absolute;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(191,167,111,0.18) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
}

.hero-product-img {
  max-width: 420px;
  width: 100%;
  object-fit: contain;
  animation: heroFloat 3.5s ease-in-out infinite;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.5));
}

@keyframes heroFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-12px); }
}

/* ---------- Hero mobile layout ---------- */
.hero-mobile {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 20px 28px;
  background: #141f14;
}

.hero-mobile-img {
  width: 55%;
  max-width: 200px;
  object-fit: contain;
  margin: 12px auto;
  animation: heroFloat 3.5s ease-in-out infinite;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,0.5));
}

.hero-countdown.mobile .cbox {
  min-width: 48px;
  padding: 8px 10px;
}

.hero-countdown.mobile .cnum {
  font-size: 20px;
}

.mobile-cta {
  font-size: 14px;
  padding: 12px 24px;
  margin-top: 20px;
}

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */

/* Large desktop */
@media (min-width: 1200px) {
  .hero-heading    { font-size: 50px; }
  .cnum            { font-size: 30px; }
  .cbox            { min-width: 66px; }
}

/* Tablet landscape → 992px */
@media (max-width: 991px) {
  .hero-desktop {
    padding: 44px 5%;
    min-height: 380px;
  }

  .hero-heading  { font-size: 28px; }
  .hero-desc     { font-size: 13px; }
  .cnum          { font-size: 20px; }
  .cbox          { min-width: 50px; padding: 8px 10px; }
  .hero-product-img { max-width: 260px; }

  .slide-content h2  { font-size: 22px; }
  .slide-content p   { font-size: 12px; }
  .slide-btn         { font-size: 12px; padding: 9px 18px; }

  .banner-arrow {
    width: 36px;
    height: 36px;
  }
}

/* Tablet portrait → 768px: switch hero to mobile layout */
@media (max-width: 767px) {
  .hero-desktop { display: none; }
  .hero-mobile  { display: flex; }

  .hero-slide { min-height: unset; }

  .slide-content h2 { font-size: 18px; }
  .slide-content p  { font-size: 11px; margin-bottom: 14px; }
  .slide-btn        { font-size: 11px; padding: 8px 16px; }

  .banner-arrow     { display: none; }
  .banner-dots      { bottom: 12px; gap: 6px; }

  /* ── Mobile overlay positions ──────────────────────────────────
     All three slides: content sits at the TOP, centred horizontally,
     so it never overlaps the product images in the lower half.

     ▸ align-items    → flex-start keeps content pinned to the top
     ▸ padding-top    → gap from the banner's top edge;
                        increase to push content further down
     ▸ justify-content → center = horizontally centred
     ▸ background     → top-to-bottom fade so text stays readable;
                        tweak rgba alpha (0–1) for stronger/weaker tint
  ─────────────────────────────────────────────────────────────── */

  /* Slide 1 — mobile */
  .overlay-1 {
    align-items: flex-start;    /* ← vertical:   flex-start | center | flex-end */
    justify-content: center;    /* ← horizontal: center | flex-start | flex-end */
    padding-top: 20px;          /* ← increase to push content further down */
    background: linear-gradient(180deg, rgba(20,31,20,0.60) 0%, rgba(20,31,20,0.15) 50%, transparent 100%);
  }

  /* Slide 2 — mobile (fixed: was bottom-aligned, now top-centred) */
  .overlay-2 {
    align-items: flex-start;    /* ← vertical:   flex-start | center | flex-end */
    justify-content: center;    /* ← horizontal: center | flex-start | flex-end */
    padding-top: 20px;          /* ← increase to push content further down */
    background: linear-gradient(180deg, rgba(20,10,5,0.70) 0%, rgba(20,10,5,0.15) 50%, transparent 100%);
  }

  /* Slide 3 — mobile (fixed: was bottom-aligned, now top-centred) */
  .overlay-3 {
    align-items: flex-start;    /* ← vertical:   flex-start | center | flex-end */
    justify-content: center;    /* ← horizontal: center | flex-start | flex-end */
    padding-top: 20px;          /* ← increase to push content further down */
    background: linear-gradient(180deg, rgba(10,20,15,0.70) 0%, rgba(10,20,15,0.15) 50%, transparent 100%);
  }

  /* Centre the text & button for slides 2 & 3 on mobile */
  .overlay-2 .slide-content,
  .overlay-3 .slide-content {
    text-align: center;         /* ← text-align: center | left | right */
    max-width: 90%;
    padding: 0 5%;
  }

  .overlay-2 .slide-btn,
  .overlay-3 .slide-btn {
    margin: 0 auto;             /* centres the inline-flex button */
  }
}

/* Small phones */
@media (max-width: 400px) {
  .hero-heading { font-size: 18px; }
  .hero-desc    { font-size: 12px; }
  .cnum         { font-size: 18px; }
  .clbl         { font-size: 9px; }
  .csep         { font-size: 18px; }
  .cbox         { min-width: 42px; padding: 7px 8px; }
}

/* ==========================================================
   pdp.css  —  Product Detail Page
   Scoped to .pdp-* classes only.
   No ElevateZoom. Custom magnifier built into the PHP.
   Responsive: Desktop / Tablet / Mobile.
   Fonts: Fraunces (display) + Plus Jakarta Sans (body)
   ========================================================== */

/* ── Design tokens ─────────────────────────────────── */
:root {
  --g:          #0d4a2e;
  --g-dk:       #082b1a;
  --g-md:       #176238;
  --g-lt:       #eaf5ee;
  --g-pale:     #f4fbf6;
  --gold:       #c09a3e;
  --ink:        #0e1a11;
  --ink-2:      #3d5442;
  --muted:      #7a9882;
  --bd:         #c8ddd0;
  --bd-soft:    #deeee6;
  --bg:         #f0f5f2;
  --white:      #ffffff;
  --red:        #b5322a;
  --amber:      #d4880a;

  --r:          14px;
  --r-sm:       8px;
  --r-pill:     999px;

  --sh-sm:  0 1px 4px rgba(13,74,46,.06), 0 4px 14px rgba(13,74,46,.06);
  --sh:     0 2px 10px rgba(13,74,46,.07), 0 10px 32px rgba(13,74,46,.08);
  --sh-md:  0 6px 24px rgba(13,74,46,.11), 0 20px 56px rgba(13,74,46,.10);
  --sh-lg:  0 12px 40px rgba(13,74,46,.16), 0 32px 80px rgba(13,74,46,.12);

  --ease:   cubic-bezier(.4,0,.2,1);
  --spring: cubic-bezier(.34,1.28,.64,1);
  --dur:    .2s;
}

/* ── Page ──────────────────────────────────────────── */
.pdp-page {
  background: var(--bg);
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--ink);
}

/* ── Not found ─────────────────────────────────────── */
.pdp-not-found {
  text-align: center;
  padding: 80px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  color: var(--muted);
}
.pdp-not-found i    { font-size: 56px; color: var(--bd); }
.pdp-not-found h2   { font-family: 'Fraunces', serif; font-size: 26px; color: var(--ink); margin: 0; }
.pdp-not-found p    { font-size: 14px; margin: 0; max-width: 360px; }

/* ══════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════ */
.pdp-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--white);
  border-radius: var(--r);
  box-shadow: var(--sh);
  /* NO overflow:hidden — magnifier needs to escape this box */
  overflow: visible;
  margin-bottom: 20px;
}

/* ── Gallery ───────────────────────────────────────── */
.pdp-gallery {
  padding: 28px 24px;
  background: var(--g-pale);
  border-right: 1px solid var(--bd-soft);
  border-radius: var(--r) 0 0 var(--r);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Zoom container ────────────────────────────────── */
.pdp-zoom-container {
  position: relative;   /* lens is positioned relative to this */
  width: 100%;
  line-height: 0;       /* kills inline-block gap under image */
}

/* The stage holds the image — plain, no overflow, no clip */
.pdp-zoom-stage {
  width: 100%;
  background: var(--white);
  border: 1px solid var(--bd-soft);
  border-radius: var(--r-sm);
  overflow: visible;    /* MUST be visible — clip kills lens */
  cursor: crosshair;
}

.pdp-main-image {
  width: 100%;
  max-height: 400px;
  object-fit: contain;
  display: block;
  border-radius: var(--r-sm);
  padding: 12px;
}

/* No-image placeholder */
.pdp-no-image {
  width: 100%;
  height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--muted);
  border: 2px dashed var(--bd);
  border-radius: var(--r-sm);
}
.pdp-no-image i { font-size: 40px; color: var(--bd); }

/* ── Lens (circular, floats over image) ────────────── */
.pdp-zoom-lens {
  display: none;                  /* shown by JS on hover/touch */
  position: absolute;
  border: 2px solid var(--g);
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  cursor: crosshair;
  pointer-events: none;           /* clicks pass through to stage */
  z-index: 10;
  box-shadow: 0 0 0 1px rgba(13,74,46,.3);
}

/* ── Zoom result panel ─────────────────────────────── */
.pdp-zoom-result {
  display: none;                  /* shown by JS on hover/touch */
  position: absolute;
  left: calc(100% + 12px);       /* right of the image */
  top: 0;
  width: 340px;
  height: 340px;
  border: 1px solid var(--bd);
  border-radius: var(--r-sm);
  background-color: var(--white);
  background-repeat: no-repeat;
  box-shadow: var(--sh-lg);
  z-index: 100;
  overflow: hidden;
}

/* On narrow viewports the panel goes below the image */
@media (max-width: 1100px) {
  .pdp-zoom-result {
    left: 0;
    top: calc(100% + 8px);
    width: 100%;
    height: 260px;
  }
}

/* ── Thumbnails ────────────────────────────────────── */
.pdp-thumbs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.pdp-thumb {
  width: 62px;
  height: 62px;
  border-radius: var(--r-sm);
  border: 2px solid var(--bd);
  background: var(--white);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--dur), transform var(--dur), box-shadow var(--dur);
  flex-shrink: 0;
}
.pdp-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 3px;
  display: block;
}
.pdp-thumb:hover        { border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(13,74,46,.14); }
.pdp-thumb.active       { border-color: var(--g); box-shadow: 0 0 0 3px rgba(13,74,46,.15); }

/* ── Info panel ────────────────────────────────────── */
.pdp-info {
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Category pill */
.pdp-category-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--g-lt);
  border: 1px solid rgba(13,74,46,.16);
  color: var(--g-md);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  width: fit-content;
}

/* Product name */
.pdp-product-name {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(22px, 2.6vw, 36px);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: 0;
  padding-bottom: 14px;
  position: relative;
}
.pdp-product-name::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 52px; height: 3px;
  background: linear-gradient(90deg, var(--gold), transparent);
  border-radius: 3px;
}

/* Stars */
.pdp-meta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.pdp-stars { display: flex; align-items: center; gap: 3px; }
.pdp-stars .fa-star     { color: var(--amber); font-size: 13px; }
.pdp-stars .far.fa-star { color: #cde0d5; }
.pdp-review-count       { font-size: 12px; color: var(--muted); margin-left: 4px; }
.pdp-not-rated          { font-size: 12px; color: var(--muted); font-style: italic; }

.pdp-sold-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg,#fff4e0,#fff9ed);
  border: 1px solid rgba(212,136,10,.25);
  border-radius: var(--r-pill);
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  color: #8a5c00;
}
.pdp-sold-badge .fa-fire { color: var(--red); }

/* Price card */
.pdp-price-card {
  background: linear-gradient(145deg, var(--g-lt), #edf7f1);
  border: 1px solid rgba(13,74,46,.12);
  border-radius: var(--r-sm);
  padding: 16px 18px;
  position: relative;
  overflow: hidden;
}
.pdp-price-card::before {
  content: '';
  position: absolute;
  top: -20px; right: -20px;
  width: 72px; height: 72px;
  border-radius: 50%;
  background: rgba(192,154,62,.10);
  pointer-events: none;
}
.pdp-price-amount {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 700;
  color: var(--g);
  line-height: 1;
  letter-spacing: -.03em;
}
.pdp-price-symbol {
  font-size: 55%;
  vertical-align: super;
  font-weight: 500;
  color: var(--g-md);
}
.pdp-price-tag {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--g-md);
  margin-top: 4px;
}
.pdp-price-breakdown {
  font-size: 11.5px;
  color: var(--ink-2);
  margin-top: 3px;
}

/* Stock */
.pdp-stock-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.pdp-badge-stock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--r-pill);
  padding: 5px 13px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.pdp-badge-stock.in   { background: rgba(22,98,52,.09); border: 1px solid rgba(22,98,52,.20); color: #166234; }
.pdp-badge-stock.out  { background: rgba(181,50,42,.09); border: 1px solid rgba(181,50,42,.20); color: var(--red); }
.pdp-pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #43a047;
  display: inline-block;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.5; transform:scale(1.35); } }

.pdp-stock-count {
  font-size: 12px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: var(--r-pill);
}
.pdp-stock-count.good     { background:#e8f5e9; color:#2e7d32; }
.pdp-stock-count.low      { background:#fff8e1; color:#e65100; }
.pdp-stock-count.critical { background:rgba(181,50,42,.09); color:var(--red); }

/* Description */
.pdp-description {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.85;
}
.pdp-hsn {
  font-size: 11.5px;
  color: var(--muted);
}

/* CTA */
.pdp-cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.pdp-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--g) 0%, var(--g-md) 100%);
  color: #d6f5e2;
  border: none;
  border-radius: var(--r-pill);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  padding: 13px 28px;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(13,74,46,.28);
  transition: transform var(--dur), box-shadow var(--dur);
  position: relative;
  overflow: hidden;
}
.pdp-btn-primary::after {
  content: '';
  position: absolute;
  inset: 0; left: -100%;
  width: 60%;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);
  transition: left .5s ease;
}
.pdp-btn-primary:hover::after { left: 150%; }
.pdp-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(13,74,46,.36); color: #d6f5e2; text-decoration: none; }
.pdp-btn-primary:active { transform: none; }

.pdp-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  color: var(--ink-2);
  border: 1.5px solid var(--bd);
  border-radius: var(--r-pill);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 12px 22px;
  text-decoration: none;
  transition: background var(--dur), border-color var(--dur), color var(--dur);
}
.pdp-btn-ghost:hover { background: var(--g-lt); border-color: var(--g); color: var(--g); text-decoration: none; }

.pdp-btn-disabled {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #e2e8e4;
  color: #a0b0a5;
  border: none;
  border-radius: var(--r-pill);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  padding: 13px 28px;
  cursor: not-allowed;
  opacity: .75;
}

/* Trust strip */
.pdp-trust {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  padding-top: 16px;
  border-top: 1px solid var(--bd-soft);
}
.pdp-trust div {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-2);
}
.pdp-trust div i { color: var(--g); font-size: 13px; }

/* ══════════════════════════════════════════════════════
   TABS
══════════════════════════════════════════════════════ */
.pdp-tabs-wrap {
  background: var(--white);
  border-radius: var(--r);
  box-shadow: var(--sh-sm);
  margin-bottom: 20px;
  overflow: hidden;
}

.pdp-tab-nav {
  display: flex;
  background: var(--g-pale);
  border-bottom: 2px solid var(--bd-soft);
  overflow-x: auto;
  scrollbar-width: none;
}
.pdp-tab-nav::-webkit-scrollbar { display: none; }

.pdp-tab-btn {
  flex: 0 0 auto;
  padding: 14px 22px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
  background: none;
  border: none;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  white-space: nowrap;
  gap: 6px;
  display: inline-flex;
  align-items: center;
  transition: color var(--dur), border-color var(--dur), background var(--dur);
}
.pdp-tab-btn:hover  { color: var(--g); background: rgba(13,74,46,.04); }
.pdp-tab-btn.active { color: var(--g); border-bottom-color: var(--g); background: var(--white); font-weight: 700; }

.pdp-tab-panels { padding: 28px 30px; }

.pdp-tab-panel          { display: none; }
.pdp-tab-panel.active   { display: block; }

.pdp-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 10px;
}
.pdp-panel-header h4 {
  font-family: 'Fraunces', serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  letter-spacing: -.01em;
}

/* Spec table */
.pdp-spec-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--bd-soft);
  border-radius: var(--r-sm);
  overflow: hidden;
  font-size: 13.5px;
}
.pdp-spec-table tr { border-bottom: 1px solid var(--bd-soft); transition: background var(--dur); }
.pdp-spec-table tr:last-child { border-bottom: none; }
.pdp-spec-table tr:nth-child(odd)  { background: var(--g-pale); }
.pdp-spec-table tr:hover           { background: var(--g-lt); }
.pdp-spec-key {
  padding: 10px 14px;
  font-weight: 600;
  color: var(--ink);
  width: 38%;
  border-right: 1px solid var(--bd-soft);
  vertical-align: top;
}
.pdp-spec-val {
  padding: 10px 14px;
  color: var(--ink-2);
  vertical-align: top;
}

/* Detail blocks */
.pdp-detail-block        { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--bd-soft); }
.pdp-detail-block:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.pdp-detail-block h6     { font-size: 14px; font-weight: 700; color: var(--g); margin-bottom: 6px; }
.pdp-detail-block p      { font-size: 13.5px; color: var(--ink-2); line-height: 1.85; margin: 0; }
.pdp-tab-panel > p       { font-size: 13.5px; color: var(--ink-2); line-height: 1.85; }

/* FAQ */
.pdp-faq-item {
  border: 1px solid var(--bd-soft);
  border-radius: var(--r-sm);
  margin-bottom: 8px;
  overflow: hidden;
  transition: box-shadow var(--dur), border-color var(--dur);
}
.pdp-faq-item:last-child { margin-bottom: 0; }
.pdp-faq-item:hover      { box-shadow: var(--sh-sm); border-color: var(--bd); }
.pdp-faq-item.open       { border-color: rgba(13,74,46,.25); }

.pdp-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  background: var(--g-pale);
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-2);
  user-select: none;
  transition: background var(--dur);
}
.pdp-faq-q:hover              { background: var(--g-lt); }
.pdp-faq-item.open .pdp-faq-q { background: var(--g-lt); color: var(--g); }
.pdp-faq-q .fa-chevron-down   { flex-shrink: 0; font-size: 11px; color: var(--muted); transition: transform .28s var(--spring), color var(--dur); }
.pdp-faq-item.open .pdp-faq-q .fa-chevron-down { transform: rotate(180deg); color: var(--g); }

.pdp-faq-a {
  display: none;
  padding: 13px 16px;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.8;
  border-top: 1px solid var(--bd-soft);
  background: var(--white);
}
.pdp-faq-item.open .pdp-faq-a { display: block; }

/* ══════════════════════════════════════════════════════
   REVIEWS
══════════════════════════════════════════════════════ */
.pdp-reviews-wrap {
  background: var(--white);
  border-radius: var(--r);
  box-shadow: var(--sh-sm);
  padding: 30px;
  margin-bottom: 20px;
}

.pdp-section-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.02em;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--bd-soft);
}

.pdp-reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.pdp-review-card {
  background: var(--g-pale);
  border: 1px solid var(--bd-soft);
  border-radius: var(--r-sm);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow var(--dur), transform var(--dur);
}
.pdp-review-card:hover { box-shadow: var(--sh); transform: translateY(-2px); }

.pdp-review-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pdp-reviewer-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--g), var(--g-md));
  color: #d6f5e2;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pdp-reviewer-meta strong { font-size: 13px; color: var(--ink); display: block; }
.pdp-reviewer-meta span   { font-size: 11px; color: var(--muted); }

.pdp-review-stars .fa-star     { color: var(--amber); font-size: 12px; }
.pdp-review-stars .far.fa-star { color: #cde0d5; }
.pdp-review-title  { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.pdp-review-body   { font-size: 13px; color: var(--ink-2); line-height: 1.75; }

.pdp-no-reviews {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 36px;
  border: 1.5px dashed var(--bd);
  border-radius: var(--r-sm);
  background: var(--g-pale);
  color: var(--muted);
  text-align: center;
  margin-bottom: 24px;
}
.pdp-no-reviews i { font-size: 32px; color: var(--bd); }
.pdp-no-reviews p { margin: 0; font-size: 14px; }

/* Review form */
.pdp-review-form-wrap {
  background: var(--g-lt);
  border: 1px solid rgba(13,74,46,.14);
  border-radius: var(--r);
  padding: 24px 26px;
}
.pdp-review-form-wrap h5 {
  font-family: 'Fraunces', serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--g);
  margin-bottom: 18px;
  letter-spacing: -.01em;
}
.pdp-field { margin-bottom: 14px; }
.pdp-field label {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--ink);
  margin-bottom: 6px;
}
.pdp-field .form-control {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13.5px;
  border: 1.5px solid var(--bd) !important;
  border-radius: var(--r-sm) !important;
  padding: 10px 13px !important;
  background: var(--white);
  color: var(--ink);
  transition: border-color var(--dur), box-shadow var(--dur);
}
.pdp-field .form-control:focus {
  border-color: var(--g) !important;
  box-shadow: 0 0 0 3px rgba(13,74,46,.10) !important;
  outline: none;
}

.pdp-star-input { display: flex; gap: 5px; }
.pdp-star-input .star {
  font-size: 26px;
  color: #cde0d5;
  cursor: pointer;
  transition: color .12s, transform .14s var(--spring);
}
.pdp-star-input .star.hover,
.pdp-star-input .star.selected,
.pdp-star-input .star.fas { color: var(--amber); }
.pdp-star-input .star:hover { transform: scale(1.2); }

/* Alerts */
.pdp-alert {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px 14px;
  border-radius: var(--r-sm);
  font-size: 13px;
  margin-bottom: 14px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.pdp-alert.info    { background: #e6f2fc; border: 1px solid #b0d4f1; color: #1a5276; }
.pdp-alert.warning { background: #fff9e6; border: 1px solid #f5d77a; color: #7d4d00; }
.pdp-alert.success { background: #e8f5e9; border: 1px solid #a5d6a7; color: #1b5e20; }
.pdp-alert.error   { background: #fdf1f0; border: 1px solid rgba(181,50,42,.22); color: var(--red); }
.pdp-alert a       { color: inherit; font-weight: 700; text-decoration: underline; }

/* ══════════════════════════════════════════════════════
   LIVE VIEWER TOAST
══════════════════════════════════════════════════════ */
.lv-toast-container {
  position: fixed;
  bottom: 26px;
  left: 0;
  z-index: 9998;
  pointer-events: none;
}
.lv-toast {
  display: none;
  background: linear-gradient(135deg,#0e1a11,#182b1e);
  color: #fff;
  border-left: 3px solid var(--g);
  border-radius: 0 12px 12px 0;
  box-shadow: 4px 6px 28px rgba(0,0,0,.32);
  padding: 12px 36px 12px 15px;
  min-width: 210px;
  max-width: 270px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12.5px;
  pointer-events: auto;
  position: relative;
  animation: lv-in .5s var(--spring) both;
}
@keyframes lv-in { from { transform:translateX(-110%); opacity:0; } to { transform:translateX(0); opacity:1; } }
.lv-toast-body { display:flex; flex-direction:column; gap:3px; }
.lv-toast-muted { font-size:11px; color:rgba(255,255,255,.46); }
#lvToastClose {
  position: absolute;
  top: 9px; right: 10px;
  font-size: 17px;
  cursor: pointer;
  color: rgba(255,255,255,.4);
  transition: color .15s;
  line-height: 1;
}
#lvToastClose:hover { color:#fff; }

/* ══════════════════════════════════════════════════════
   OFFER BAR — compact 2-row card, works on all screens
══════════════════════════════════════════════════════ */
.offer-bar {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #0d4a2e, #174e30, #0c3822);
  color: #fff;
  padding: 12px 16px 10px;
  border-radius: 14px;           /* rectangle, not pill/circle */
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
  display: none;
  z-index: 9999;
  width: min(420px, calc(100vw - 24px));  /* never wider than screen */
  border: 1px solid rgba(255,255,255,.12);
  animation: offer-up .45s var(--spring);
  font-family: 'Plus Jakarta Sans', sans-serif;
  box-sizing: border-box;
}
@keyframes offer-up {
  from { opacity: 0; transform: translateX(-50%) translateY(16px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Row 1 — title + text + close */
.offer-content {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}
.offer-title {
  font-size: 12.5px;
  font-weight: 700;
  color: #fcd07a;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.4;
}
#offerText {
  font-size: 12.5px;
  font-weight: 400;
  color: #fff;
  flex: 1;
  line-height: 1.4;
  word-break: break-word;  /* wrap long text, never overflow */
}
.offer-close {
  flex-shrink: 0;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.20);
  color: rgba(255,255,255,.80);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  position: static;       /* NOT absolute — stays in flow */
  transform: none;
  transition: background .15s;
  margin-top: 1px;
}
.offer-close:hover { background: rgba(255,255,255,.25); color: #fff; }

/* Row 2 — timer + apply button */
.offer-row2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.14);
  width: 100%;
  box-sizing: border-box;
}
#offerTimer {
  font-size: 12px;
  font-weight: 700;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 20px;
  padding: 3px 10px;
  letter-spacing: .3px;
  white-space: nowrap;
  flex-shrink: 0;
}
#applyCouponBtn {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border-radius: 20px !important;
  padding: 6px 16px !important;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Mobile — same structure, just slightly smaller text */
@media (max-width: 480px) {
  .offer-bar {
    bottom: 12px;
    width: calc(100vw - 20px);
    border-radius: 12px;
    padding: 10px 13px 9px;
  }
  .offer-title  { font-size: 12px; }
  #offerText    { font-size: 12px; }
  #offerTimer   { font-size: 11px; padding: 3px 8px; }
  #applyCouponBtn { font-size: 11px !important; padding: 5px 13px !important; }
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .pdp-hero { grid-template-columns: 45% 55%; }
}

@media (max-width: 700px) {
  .pdp-hero {
    grid-template-columns: 1fr;
  }
  .pdp-gallery {
    border-right: none;
    border-bottom: 1px solid var(--bd-soft);
    border-radius: var(--r) var(--r) 0 0;
  }
  .pdp-info {
    border-radius: 0 0 var(--r) var(--r);
    padding: 22px 18px;
  }
  .pdp-zoom-result {
    left: 0;
    top: calc(100% + 8px);
    width: 100%;
    height: 220px;
  }
  .pdp-tab-panels { padding: 20px 16px; }
  .pdp-reviews-wrap { padding: 20px 16px; }
  .pdp-review-form-wrap { padding: 18px 16px; }
  .pdp-reviews-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .pdp-cta { flex-direction: column; }
  .pdp-btn-primary,
  .pdp-btn-ghost,
  .pdp-btn-disabled { width: 100%; justify-content: center; }
  .pdp-trust { flex-direction: column; gap: 8px; }
}
}

@media (max-width: 640px) {
  .lv-toast { min-width: 160px; max-width: 230px; font-size: 12px; }
}