/*
 * Herbo Power brand theme — colors pulled from the logo (gold ring, dark
 * brown wordmark, herbal green leaves, lavender figure) plus black as
 * requested. Brand variables and the button colors apply site-wide; the
 * rest of the rules below are scoped to .herbo-home (home page only).
 */
:root {
    --green: #C9A227; /* overrides the theme's pastel-lime var used by button/hover states */
    --herbo-gold: #C9A227;
    --herbo-gold-soft: #F1E4C1;
    --herbo-gold-deep: #8C6D1F;
    --herbo-brown: #4A3D1C;
    --herbo-green: #6B8E3E;
    --herbo-lavender: #B9B6DC;
}

/* Product cards render two Add to Cart/Buy Now button rows: a hover-reveal
   overlay pair meant for desktop only (.list-action, max-lg:hidden) and a
   persistent pair meant for mobile only (lg:hidden, below the price). The
   Tailwind max-lg:hidden rule isn't reliably beating the theme's own
   .product-thumb .list-action opacity/visibility rule below 1024px, so both
   pairs show at once on mobile. Force the desktop-only overlay pair off
   below 1024px explicitly so only the mobile pair remains. */
@media (max-width: 1023px) {
    .product-item .product-thumb .list-action {
        display: none !important;
    }
}

/* Buttons — site-wide */
.button-main {
    background-color: var(--herbo-brown);
}
.button-main:hover {
    background-color: var(--herbo-gold);
    color: var(--herbo-brown);
}
.button-main.bg-white {
    background-color: #fff;
    color: var(--herbo-brown);
    border-color: var(--herbo-brown) !important;
}
.button-main.bg-white:hover {
    background-color: var(--herbo-brown);
    color: #fff;
}

/* Sale / new / discount badges */
.herbo-home .bg-green {
    background-color: var(--herbo-gold) !important;
}
.herbo-home .text-green {
    color: var(--herbo-gold-deep) !important;
}

/* Hero eyebrow text */
.herbo-home .text-sub-display {
    color: var(--herbo-gold-deep);
}

/* "View All Collection" underline */
.herbo-home .heading .text-button.border-b-2.border-black {
    border-color: var(--herbo-gold) !important;
}

/* Marquee divider ticks */
.herbo-home .banner-top .line.bg-white {
    background-color: var(--herbo-gold) !important;
}

/* Best sellers / on sale / new arrivals tab pill */
.herbo-home .menu-tab .indicator {
    background: var(--herbo-gold-soft) !important;
}
.herbo-home .menu-tab .tab-item.active {
    color: var(--herbo-brown);
}

/* Collection cards */
.herbo-home .collection-item .collection-name:hover {
    background-color: var(--herbo-brown) !important;
    color: #fff !important;
}

/* Flash sale + testimonial surface panels */
.herbo-home .flash-sale-block.bg-surface {
    background-color: var(--herbo-gold-soft);
}
.herbo-home .countdown-time .time {
    color: var(--herbo-brown);
}

/* Discount % pill on spotlight product */
.herbo-home .product-sale.bg-green {
    color: var(--herbo-brown) !important;
}

/* Benefit icons */
.herbo-home .benefit-item i {
    color: var(--herbo-gold-deep);
}

/* Instagram-style shop grid hover icon */
.herbo-home .instagram-block .icon.hover\:bg-black:hover {
    background-color: var(--herbo-brown) !important;
}

/* Swiper nav arrows (collections / spotlight product gallery / reels) */
.herbo-home .section-swiper-navigation .swiper-button-prev:hover,
.herbo-home .section-swiper-navigation .swiper-button-next:hover {
    background-color: var(--herbo-brown) !important;
    color: #fff;
}
.herbo-home .style-small-border.section-swiper-navigation .swiper-button-prev,
.herbo-home .style-small-border.section-swiper-navigation .swiper-button-next {
    border-color: var(--herbo-gold);
}

/* Scrollbar drag (collections carousel) */
.herbo-home .swiper-scrollbar-drag {
    background: var(--herbo-gold-deep) !important;
}

/* Explore Collections circle/label sizing — the w-[Npx] Tailwind classes
   here don't exist in the purged theme CSS (never applied), leaving the
   circles and name labels unsized and badly wrapping on mobile. */
.herbo-home .collection-item .collection-circle,
.herbo-home .collection-item .collection-name {
    width: 100px;
}
@media (min-width: 768px) {
    .herbo-home .collection-item .collection-circle,
    .herbo-home .collection-item .collection-name {
        width: 160px;
    }
}
@media (min-width: 1024px) {
    .herbo-home .collection-item .collection-circle,
    .herbo-home .collection-item .collection-name {
        width: 200px;
    }
}

/* The scrollbar track sits too close to the collection labels on small
   screens and visually overlaps them — hide it below tablet width. */
@media (max-width: 767px) {
    .herbo-home .collection-block .swiper-scrollbar {
        display: none;
    }

    /* .heading5 is 24px — way too big for the 100px-wide label box, so
       two-word category names ("Men Wellness") wrap onto two lines. */
    .herbo-home .collection-item .collection-name {
        font-size: 12px;
        line-height: 16px;
        padding-left: 6px;
        padding-right: 6px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Testimonial stars stay gold-toned to match brand */
.herbo-home .text-yellow {
    color: var(--herbo-gold-deep) !important;
}

/* ==========================================================================
   Shopping cart page — the base template's cart.html markup is a bare,
   low-contrast table (pastel-lime "FREE"/checkmark text, flat surface-grey
   rows) with no brand styling. Re-skin it in a restrained gold/brown accent
   on white cards (not flat tan color blocks) and add light motion so the
   page feels alive rather than static.
   ========================================================================== */
.herbo-cart .accent-text {
    color: var(--herbo-gold-deep) !important;
}
.herbo-cart .accent-bg {
    background-color: var(--herbo-gold) !important;
}

@keyframes herboFadeUp {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes herboFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}
@keyframes herboRingPulse {
    0% {
        transform: scale(0.85);
        opacity: 0.55;
    }
    100% {
        transform: scale(1.35);
        opacity: 0;
    }
}
@keyframes herboShimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(220%);
    }
}

/* Freeship banner: a plain white notice card with a slim gold accent edge
   and icon chip, instead of a flat tan color block. */
.herbo-cart .freeship-banner {
    background: #fff;
    border: 1px solid rgb(233 233 233);
    border-left: 3px solid var(--herbo-gold);
    border-radius: 14px;
    padding: 16px 20px;
    box-shadow: 0 6px 20px -14px rgba(0, 0, 0, 0.18);
    animation: herboFadeUp 0.45s ease both;
}
.herbo-cart .freeship-icon {
    width: 38px;
    height: 38px;
    background: var(--herbo-gold-soft);
    color: var(--herbo-gold-deep);
}
.herbo-cart .tow-bar-block {
    position: relative;
    overflow: hidden;
}
.herbo-cart .progress-line {
    position: relative;
    overflow: hidden;
    transition: width 0.6s ease;
}
.herbo-cart .progress-line::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    animation: herboShimmer 2.2s ease-in-out infinite;
}

.herbo-cart .cart-item-card {
    background: #fff;
    border: 1px solid rgb(233 233 233);
    padding: 16px;
    transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
    animation: herboFadeUp 0.45s ease both;
}
.herbo-cart .cart-item-card:nth-child(2) { animation-delay: 0.05s; }
.herbo-cart .cart-item-card:nth-child(3) { animation-delay: 0.1s; }
.herbo-cart .cart-item-card:nth-child(4) { animation-delay: 0.15s; }
.herbo-cart .cart-item-card:nth-child(n+5) { animation-delay: 0.2s; }
.herbo-cart .cart-item-card:hover {
    border-color: var(--herbo-gold);
    box-shadow: 0 10px 26px -14px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}
.herbo-cart .cart-item-card .bg-img img {
    transition: transform 0.4s ease;
}
.herbo-cart .cart-item-card:hover .bg-img img {
    transform: scale(1.06);
}

.herbo-cart .quantity-block button {
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
}
.herbo-cart .quantity-block button:hover {
    background: var(--herbo-gold-soft);
    color: var(--herbo-gold-deep);
}
.herbo-cart .quantity-block button:active {
    transform: scale(0.88);
}

.herbo-cart .remove-btn {
    color: rgb(160 160 160);
    transition: color 0.2s ease;
}
.herbo-cart .remove-btn:hover {
    color: #db4444;
}
.herbo-cart .remove-btn i {
    transition: transform 0.2s ease;
}
.herbo-cart .remove-btn:hover i {
    transform: translateY(-1px) rotate(-6deg);
}

.herbo-cart .checkout-block {
    border: 1px solid rgb(233 233 233);
    border-top: 3px solid var(--herbo-gold);
    box-shadow: 0 12px 32px -18px rgba(0, 0, 0, 0.16);
    animation: herboFadeUp 0.5s ease 0.1s both;
}

.herbo-cart .checkout-btn {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.herbo-cart .checkout-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -12px rgba(74, 61, 28, 0.45);
}
.herbo-cart .checkout-btn:active {
    transform: translateY(0);
}

.herbo-cart .discount-code input {
    transition: border-color 0.2s ease;
}
.herbo-cart .discount-code input:focus {
    border-color: var(--herbo-gold-deep) !important;
}

.herbo-cart .trust-item {
    border: 1px solid rgb(233 233 233);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.herbo-cart .trust-item:hover {
    box-shadow: 0 10px 22px -14px rgba(0, 0, 0, 0.18);
    transform: translateY(-3px);
}
.herbo-cart .trust-item i {
    transition: transform 0.25s ease;
}
.herbo-cart .trust-item:hover i {
    transform: scale(1.15);
}

/* Empty cart — layered, softly pulsing badge instead of a single flat grey
   circle, so the empty state reads as intentional rather than a placeholder. */
.herbo-cart .empty-cart {
    animation: herboFadeUp 0.5s ease both;
}
.herbo-cart .empty-cart-icon-wrap {
    position: relative;
    width: 112px;
    height: 112px;
    margin: 0 auto 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.herbo-cart .empty-cart-icon-wrap .pulse-ring {
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background: var(--herbo-gold-soft);
    animation: herboRingPulse 2.6s ease-out infinite;
}
.herbo-cart .empty-cart-icon-wrap .pulse-ring.delay {
    animation-delay: 1.3s;
}
.herbo-cart .empty-cart-icon {
    position: relative;
    z-index: 1;
    width: 84px;
    height: 84px;
    border-radius: 9999px;
    background: linear-gradient(155deg, #fff, var(--herbo-gold-soft));
    box-shadow: 0 12px 28px -10px rgba(140, 109, 31, 0.35), inset 0 0 0 1px rgba(201, 162, 39, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: herboFloat 3.6s ease-in-out infinite;
}
.herbo-cart .empty-cart-icon i {
    color: var(--herbo-brown);
}

@media (prefers-reduced-motion: reduce) {
    .herbo-cart * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ==========================================================================
   My Account page — plain grey sidebar card, flat stat boxes and an unstyled
   table. Give it the same restrained gold/brown accent + card treatment as
   the cart, so the two match instead of the account page feeling generic.
   ========================================================================== */
.herbo-account .user-infor {
    border: 1px solid rgb(233 233 233);
    animation: herboFadeUp 0.45s ease both;
}

.herbo-account .avatar-ring {
    width: 108px;
    height: 108px;
    border-radius: 9999px;
    padding: 4px;
    background: linear-gradient(155deg, var(--herbo-gold), var(--herbo-gold-soft));
    box-shadow: 0 8px 20px -10px rgba(140, 109, 31, 0.45);
}
.herbo-account .avatar-ring .avatar {
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 0 3px #fff;
}
.herbo-account .avatar-ring .avatar i {
    color: var(--herbo-brown);
}

.herbo-account .category-item {
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.herbo-account .category-item:hover {
    transform: translateX(2px);
}
.herbo-account .category-item.active {
    background: #fff;
    color: var(--herbo-brown);
    box-shadow: 0 6px 16px -10px rgba(0, 0, 0, 0.25);
}
.herbo-account .category-item.active span {
    color: var(--herbo-gold-deep);
}

.herbo-account .overview-item {
    background: #fff;
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
    animation: herboFadeUp 0.45s ease both;
}
.herbo-account .overview-item:nth-child(2) { animation-delay: 0.06s; }
.herbo-account .overview-item:nth-child(3) { animation-delay: 0.12s; }
.herbo-account .overview-item:hover {
    border-color: var(--herbo-gold);
    box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}
.herbo-account .overview-item .counter h5 {
    color: var(--herbo-brown);
}
.herbo-account .stat-icon {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    background: var(--herbo-gold-soft);
    color: var(--herbo-gold-deep);
    transition: transform 0.25s ease;
}
.herbo-account .overview-item:hover .stat-icon {
    transform: scale(1.08) rotate(-4deg);
}

.herbo-account .recent_order,
.herbo-account .filter-item > div.pt-5,
.herbo-account .filter-item.tab_address {
    background: #fff;
    border-color: rgb(233 233 233) !important;
    box-shadow: 0 10px 26px -18px rgba(0, 0, 0, 0.16);
    animation: herboFadeUp 0.5s ease 0.08s both;
}

.herbo-account table tbody tr {
    transition: background-color 0.2s ease;
}
.herbo-account table tbody tr:hover {
    background: var(--herbo-gold-soft);
}
.herbo-account table .product img {
    transition: transform 0.3s ease;
}
.herbo-account table tbody tr:hover .product img {
    transform: scale(1.08);
}

.herbo-account .tag {
    letter-spacing: 0.02em;
}

.herbo-account input:not([type="checkbox"]),
.herbo-account textarea,
.herbo-account select {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.herbo-account input:not([type="checkbox"]):focus,
.herbo-account textarea:focus,
.herbo-account select:focus {
    border-color: var(--herbo-gold-deep) !important;
    box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.15);
    outline: none;
}

.herbo-account .tab_btn {
    transition: color 0.2s ease;
}
.herbo-account .tab_btn.active {
    color: var(--herbo-gold-deep);
}
.herbo-account .tab_btn .ic_down {
    transition: transform 0.25s ease;
}
.herbo-account .tab_btn.active .ic_down {
    transform: rotate(180deg);
    color: var(--herbo-gold-deep);
}

.herbo-account .button-main {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.herbo-account .button-main:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px -12px rgba(74, 61, 28, 0.4);
}
.herbo-account .button-main:active {
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .herbo-account * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Login / Register / Forgot / Reset password pages share the same
   two-column .content-main layout — fade the form and side panel in and
   give the decorative icon badge on Forgot/Reset the same treatment as the
   empty-cart badge instead of a plain flat icon. */
.herbo-account .login-block .left,
.herbo-account.login-block .left {
    animation: herboFadeUp 0.45s ease both;
}
.herbo-account .login-block .right,
.herbo-account.login-block .right {
    animation: herboFadeUp 0.5s ease 0.08s both;
}

.herbo-account .reset-icon-wrap {
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.herbo-account .reset-icon {
    width: 76px;
    height: 76px;
    background: linear-gradient(155deg, #fff, var(--herbo-gold-soft));
    box-shadow: 0 10px 26px -10px rgba(140, 109, 31, 0.35), inset 0 0 0 1px rgba(201, 162, 39, 0.3);
    color: var(--herbo-brown);
    animation: herboFloat 3.6s ease-in-out infinite;
}