/*
Theme Name: Tuttireal Child
Theme URI: https://tuttireal.com
Author: Appledill
Author URI: https://tuttireal.com
Description: Ultra-performance high-fidelity marketplace theme.
Version: 2.3.50
Template: tuttireal
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tuttireal-child
*/

/* ============================================================
   § 1 — LIGHT THEME ENFORCEMENT
   Override CSS variables and disable the dark-mode media query
   so the site is always light, regardless of OS preference.

   !important on the custom properties themselves (not just their
   consumers) because the parent theme registers its own root
   style.css under a second stylesheet handle ("tuttireal-theme",
   used by woocommerce.css's dependency chain) separate from the
   handle this child theme depends on ("tuttireal-parent-style") —
   so there's no guaranteed load order between the two, and on a
   dark-mode device the parent's dark values could otherwise print
   after these and silently win (e.g. product gallery pillarboxing
   turning navy instead of white).
   ============================================================ */

:root {
    /* Surfaces */
    --tr-color-surface:         #ffffff !important;
    --tr-color-surface-alt:     #f5f6f8 !important;
    --tr-color-surface-raised:  #ffffff !important;

    /* Text */
    --tr-color-text:            #1a1a2e !important;
    --tr-color-text-muted:      #6b7280 !important;
    --tr-color-text-inverse:    #ffffff !important;

    /* Borders */
    --tr-color-border:          #e5e7eb !important;
    --tr-color-border-light:    #f0f1f3 !important;

    /* Brand stays as-is from parent / customizer */
}

/* Force light values even when OS is in dark mode */
@media (prefers-color-scheme: dark) {
    :root {
        --tr-color-surface:         #ffffff !important;
        --tr-color-surface-alt:     #f5f6f8 !important;
        --tr-color-surface-raised:  #ffffff !important;
        --tr-color-text:            #1a1a2e !important;
        --tr-color-text-muted:      #6b7280 !important;
        --tr-color-text-inverse:    #ffffff !important;
        --tr-color-border:          #e5e7eb !important;
        --tr-color-border-light:    #f0f1f3 !important;
    }
}

/* Body always on white */
body {
    background-color: #ffffff !important;
    color: #1a1a2e !important;
}


/* ============================================================
   § 2 — HOMEPAGE SECTIONS — White-to-gray gradient backgrounds
   ============================================================ */

/* Standard section: pure white → very light gray */
.tr-home-section {
    background: linear-gradient(180deg, #ffffff 0%, #f7f8fa 100%);
}

/* Alt section (Categories, Vendors): dark professional wash */
.tr-home-section--alt {
    background: #0f172a !important; /* Deep navy/black */
    padding: 80px 0 !important;
}

.tr-home-section--alt .tr-section-header__title {
    color: #ffffff !important;
    font-weight: 800 !important;
}

.tr-home-section--alt .tr-section-header__eyebrow {
    color: #ef7a5c !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
}

.tr-home-section--alt .tr-btn--outline {
    border: 1px solid rgba(255,255,255,0.3) !important;
    color: #ffffff !important;
}

.tr-home-section--alt .tr-btn--outline:hover {
    background: rgba(255,255,255,0.1) !important;
}

/* Stats bar */
.tr-stats-bar {
    background: linear-gradient(90deg, #ffffff 0%, #f0f2f5 100%);
    border-top: 1px solid var(--tr-color-border, #e5e7eb);
    border-bottom: 1px solid var(--tr-color-border, #e5e7eb);
}
.tr-stats-bar__number { color: var(--tr-color-primary, #e76f51); }
.tr-stats-bar__label  { color: var(--tr-color-text-muted, #6b7280); }

/* Section headers */
.tr-section-header__title { color: #1a1a2e; }
.tr-section-header__eyebrow { color: var(--tr-color-primary, #e76f51); }

/* Footer — light background with dark readable text */
.tr-footer,
footer.tr-footer {
    background: linear-gradient(180deg, #f0f2f5 0%, #e4e6eb 100%);
    color: #1a1a2e !important;
    padding: 60px 0 0 !important;
}

/* Override all the white-on-dark text the parent set */
.tr-footer__brand,
.tr-footer__heading {
    color: #1a1a2e !important;
}
.tr-footer__tagline {
    color: #4a5568 !important;
}
.tr-footer__links a {
    color: #4a5568 !important;
}
.tr-footer__links a:hover {
    color: var(--tr-color-primary, #e76f51) !important;
}
.tr-footer__social-link {
    color: #4a5568 !important;
}
.tr-footer__social-link:hover {
    color: var(--tr-color-primary, #e76f51) !important;
}

/* Bottom bar (copyright) */
.tr-footer__bottom,
.tr-footer__copy {
    background: #dde0e6 !important;
    color: #4a5568 !important;
    border-top: 1px solid #c8ccd4 !important;
}
.tr-footer__bottom a,
.tr-footer__copy a {
    color: var(--tr-color-primary, #e76f51) !important;
}

/* Logo: remove the dark-mode brightness invert filter */
.tr-footer__logo img {
    filter: none !important;
}


/* ============================================================
   § 3 — MISC UTILITIES (tags, dashboard, breadcrumbs)
   ============================================================ */

.product_meta .tagged_as { display: none !important; }

.woocommerce-account .tr-container.tr-layout--no-sidebar {
    max-width: 100%;
    padding-inline: 0;
}
.woocommerce-account .tr-entry,
.woocommerce-account .tr-entry__content {
    padding: 0;
    margin: 0;
}

/* Single product breadcrumb */
#sticky-menu-bar { display: none !important; }

.tr-product-breadcrumb {
    padding: 14px 0 6px;
}
.tr-product-breadcrumb .tr-breadcrumbs,
.tr-product-breadcrumb .wc-breadcrumb {
    padding: 0;
    margin: 0;
}
.tr-product-breadcrumb .tr-bc__sep {
    margin-inline: 6px;
    color: var(--tr-color-text-muted, #6b7280);
    font-size: .8rem;
}


/* ============================================================
   § 4 — CART PAGE
   ============================================================ */

.tr-cart-layout {
    display: flex;
    gap: 32px;
    align-items: flex-start;
}
.tr-cart-items {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.tr-cart-sidebar {
    width: 320px;
    flex-shrink: 0;
}
@media (max-width: 900px) {
    .tr-cart-layout  { flex-direction: column; }
    .tr-cart-sidebar { width: 100%; }
}

/* Cart item card — light surface */
.tr-cart-item {
    display: flex;
    gap: 16px;
    background: #ffffff;
    border: 1px solid var(--tr-color-border, #e5e7eb);
    border-radius: 12px;
    padding: 16px;
    align-items: flex-start;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

/* Product image thumbnail */
.tr-cart-item__img {
    flex-shrink: 0;
    width: 96px;
    height: 96px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--tr-color-surface-alt, #f5f6f8);
}
.tr-cart-item__img a,
.tr-cart-item__img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Details column */
.tr-cart-item__details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tr-cart-item__name a,
.tr-cart-item__name {
    font-size: .95rem;
    font-weight: 600;
    color: var(--tr-color-text, #1a1a2e);
    text-decoration: none;
    line-height: 1.4;
}
.tr-cart-item__name a:hover { color: var(--tr-color-primary, #e53e3e); }
.tr-cart-item__price {
    font-size: 1rem;
    font-weight: 700;
    color: var(--tr-color-primary, #e53e3e);
}
.tr-cart-item__price .woocommerce-Price-amount { color: inherit; }

/* Controls: stepper + trash */
.tr-cart-item__controls {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* Qty stepper */
.tr-qty {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    border: 1px solid var(--tr-color-border, #e5e7eb);
    border-radius: 8px;
    overflow: hidden;
    height: 34px;
}
.tr-qty__btn {
    width: 30px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--tr-color-text, #1a1a2e);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background .15s, color .15s;
}
.tr-qty__btn:hover {
    background: var(--tr-color-primary, #e53e3e);
    color: #fff;
}

/* Qty dropdown */
.tr-qty select.qty,
.tr-qty .tr-qty__select {
    width: 60px !important;
    height: 34px !important;
    border: none !important;
    border-left: 1px solid var(--tr-color-border, #e5e7eb) !important;
    border-right: 1px solid var(--tr-color-border, #e5e7eb) !important;
    background: #ffffff !important;
    color: var(--tr-color-text, #1a1a2e) !important;
    text-align: center;
    font-size: .88rem;
    font-weight: 600;
    padding: 0 4px !important;
    outline: none;
    flex-shrink: 0;
    box-shadow: none !important;
    border-radius: 0 !important;
    cursor: pointer;
    -webkit-appearance: auto;
    appearance: auto;
}

/* Trash row */
.tr-qty-remove {
    display: flex;
    justify-content: center;
    width: 100%;
}
.tr-cart-item__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid var(--tr-color-border, #e5e7eb);
    color: #9ca3af;
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
    flex-shrink: 0;
}
.tr-cart-item__remove:hover {
    background: #fff1f1;
    border-color: #e53e3e;
    color: #e53e3e;
}

/* Cart footer */
.tr-cart-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}
.tr-cart-footer__right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.tr-coupon {
    display: flex;
    gap: 6px;
}
.tr-coupon__input {
    padding: 8px 12px;
    border: 1px solid var(--tr-color-border, #e5e7eb);
    border-radius: 6px;
    background: #ffffff;
    color: var(--tr-color-text, #1a1a2e);
    font-size: .88rem;
    width: 180px;
}

/* Coupon form relocated (via JS) to sit right under the "Cart totals"
   heading — fill the sidebar width instead of the fixed footer-bar size. */
.cart_totals .tr-coupon {
    margin: 14px 0 20px;
}
.cart_totals .tr-coupon__input {
    flex: 1;
    width: auto;
}
.tr-cart-footer__update {
    font-size: .85rem;
    padding: 8px 16px;
}


/* ============================================================
   § 5 — PRODUCT CARDS (shop loop + homepage featured)
   ============================================================ */

/* Electronics skin card actions */
.product-block.inner .tr-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}
.product-block.inner .tr-card-actions .tr-card-atc,
.product-block.inner .tr-card-actions .add_to_cart_button,
.product-block.inner .tr-card-actions .button {
    flex: 1;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: .85rem;
    font-weight: 600;
    background: var(--tr-color-primary, #e53e3e);
    color: #fff !important;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: opacity .15s;
    white-space: nowrap;
}

/* ============================================================
   § 6 — SHOP BY CATEGORY — Photo Cards Carousel
   ============================================================ */

/* Carousel shell */
.tr-cat-carousel {
    position: relative;
}

/* Arrow buttons: hidden on mobile, shown on desktop */
.tr-cat-carousel__arrow {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #ffffff;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(0,0,0,0.45);
    align-items: center;
    justify-content: center;
    font-size: 30px;
    font-weight: 300;
    line-height: 1;
    color: #222222;
    transition: box-shadow 0.15s, opacity 0.15s;
}
.tr-cat-carousel__arrow:hover:not(:disabled) { box-shadow: 0 4px 20px rgba(0,0,0,0.60); }
.tr-cat-carousel__arrow:disabled { opacity: 0.25; pointer-events: none; }
.tr-cat-carousel__arrow--prev { left: -22px; }
.tr-cat-carousel__arrow--next { right: -22px; }

@media (min-width: 768px) {
    .tr-cat-carousel__arrow { display: flex; }
}

/* Scroll track */
.tr-cat-carousel__track {
    display: flex !important;
    gap: 12px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    scroll-behavior: smooth !important;
}
.tr-cat-carousel__track::-webkit-scrollbar { display: none; }

/* Card: mobile shows 2 full cards + peek of 3rd */
.tr-shop-by-category .tr-cat-card {
    flex: 0 0 42% !important;
    scroll-snap-align: start !important;
    aspect-ratio: 3 / 4 !important;
    border-radius: 12px !important;
    display: block !important;
    overflow: hidden !important;
    position: relative !important;
    text-decoration: none !important;
    transition: transform 0.35s ease, box-shadow 0.35s ease !important;
    background: #0d1b2a !important;
}

.tr-shop-by-category .tr-cat-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5) !important;
}

/* Desktop: exactly 6 per row */
@media (min-width: 768px) {
    .tr-shop-by-category .tr-cat-card {
        flex: 0 0 calc((100% - 5 * 12px) / 6) !important;
    }
}

/* Photo — fills the card, zooms on hover */
.tr-shop-by-category .tr-cat-card__img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    display: block !important;
    transition: transform 0.45s ease !important;
}

.tr-shop-by-category .tr-cat-card:hover .tr-cat-card__img {
    transform: scale(1.08) !important;
}

/* Category name — bottom gradient overlay */
.tr-home-section--alt .tr-cat-card__name {
    position: absolute !important;
    inset: auto 0 0 0 !important;
    z-index: 5 !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 0.95rem !important;
    line-height: 1.3 !important;
    padding: 44px 12px 14px !important;
    text-shadow: 0 1px 6px rgba(0,0,0,0.7) !important;
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0) 100%) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.tr-home-section--alt .tr-cat-card::after {
    display: none !important;
}

/* All Categories full page */
.tr-all-cats-page {
    min-height: calc(100vh - 80px) !important;
    padding-bottom: 100px !important;
}

.tr-all-cats-page .tr-cat-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px !important;
}
@media (min-width: 480px) {
    .tr-all-cats-page .tr-cat-grid { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (min-width: 768px) {
    .tr-all-cats-page .tr-cat-grid { grid-template-columns: repeat(5, 1fr) !important; }
}
@media (min-width: 1024px) {
    .tr-all-cats-page .tr-cat-grid { grid-template-columns: repeat(6, 1fr) !important; gap: 16px !important; }
}


/* ============================================================
   § 9 — HEADER & MEGA MENU REFINEMENTS
   ============================================================ */

/* Header Layout Override */
#tr-header.tr-header {
    background: #ffffff !important;
    border-bottom: 1px solid #f0f0f0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    min-height: 80px !important;
    display: flex !important;
    align-items: center !important;
    overflow: visible !important;
    margin-bottom: 0 !important;
}

#tr-header .tr-header__inner {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    gap: 15px !important;
    justify-content: space-between !important;
    padding: 0 20px !important;
}

/* Search Bar (Centered & Rounded) */
.tr-header__search-form {
    flex: 1 !important;
    max-width: 500px !important;
    background: #f1f3f5 !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 15px !important;
    height: 44px !important;
}

.tr-header__search-input {
    background: transparent !important;
    border: none !important;
    width: 100% !important;
    height: 100% !important;
    font-size: 0.95rem !important;
    color: #1a202c !important;
}

.tr-header__search-submit {
    background: transparent !important;
    color: #4a5568 !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
}

/* Nav Buttons */
.tr-header__sell-btn,
.tr-header__influencer-btn {
    color: #000000 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    font-size: 0.95rem !important;
}

/* Affiliate button — desktop, sits right after Influencer (matches Influencer style) */
.tr-header__affiliate-btn {
    color: #000000 !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    text-decoration: none !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

/* Utility row — desktop: completely hidden */
.tr-header__utility-row {
    display: none !important;
}

.tr-header__register-btn {
    background: #ef7a5c !important;
    color: #ffffff !important;
    padding: 10px 22px !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

/* Categories Toggle Button */
.tr-header__cat-btn {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 0 15px !important;
    height: 44px !important;
    cursor: pointer !important;
    color: #1a202c !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
}

.tr-header__cat-btn:hover {
    background: #f7fafc !important;
    border-color: #cbd5e0 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
}

.tr-header__cat-btn svg {
    color: #4a5568 !important;
}

/* Logo Styling */
.tr-logo-text {
    font-size: 1.6rem !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    letter-spacing: -0.02em !important;
}
.tr-logo-text__tutti { color: var(--tr-color-primary, #ef6b4d) !important; }
.tr-logo-text__real  { color: #000000 !important; }

/* ══════════════════════════════════════════════════════════
   § 7 — INTERACTIVE MEGA MENU (Professional Design)
   ══════════════════════════════════════════════════════════ */

.tr-cat-mega {
    position: absolute !important;
    top: 100% !important; /* FIXED: Correct dropdown position */
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: #ffffff !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.12) !important;
    border-top: 1px solid #edf2f7 !important;
    height: 650px !important; 
    max-height: 85vh !important;
    z-index: 9999 !important;
    display: none !important;
}

.tr-cat-mega.is-active {
    display: block !important;
    animation: tr-slide-down 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes tr-slide-down {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.tr-cat-mega__inner {
    display: flex !important;
    padding: 0 !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    height: 100% !important;
    align-items: stretch !important;
    background: #ffffff !important;
}

/* Sidebar */
.tr-cat-mega__sidebar {
    width: 260px !important;
    background: #ffffff !important;
    padding: 10px 0 !important;
    border-right: 1px solid #f1f5f9 !important;
    flex-shrink: 0 !important;
    overflow-y: auto !important;
    height: 100% !important;
}

.tr-cat-mega__sidebar::-webkit-scrollbar { width: 5px; }
.tr-cat-mega__sidebar::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 10px; }

.tr-cat-mega__sidebar-link {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 24px !important;
    color: #4a5568 !important;
    text-decoration: none !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important; 
    transition: all 0.2s !important;
    border-left: 3px solid transparent !important;
}

.tr-cat-mega__sidebar-link:hover,
.tr-cat-mega__sidebar-link.is-active {
    background: #ffffff !important;
    color: var(--tr-color-primary, #ef6b4d) !important;
    border-left-color: var(--tr-color-primary, #ef6b4d) !important;
}

/* Grid Wrapper */
.tr-cat-mega__grid-wrapper {
    flex: 1 !important;
    background: #ffffff !important;
    overflow-y: auto !important;
    height: 100% !important;
}

.tr-cat-mega__grid-content {
    display: none !important;
    padding: 40px 50px !important;
}

.tr-cat-mega__grid-content.is-visible {
    display: block !important;
}

.tr-cat-mega__grid-header {
    margin-bottom: 40px !important;
    padding-bottom: 15px !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.tr-cat-mega__all-link {
    font-size: 1.6rem !important;
    font-weight: 800 !important;
    color: #1a202c !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    transition: color 0.2s !important;
}

.tr-cat-mega__all-link:hover {
    color: var(--tr-color-primary, #ef6b4d) !important;
}

/* 5-Column Grid */
.tr-cat-mega__grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 40px 25px !important;
}

.tr-cat-mega__item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    text-decoration: none !important;
    gap: 15px !important;
}

.tr-cat-mega__item-img {
    width: 120px !important;
    height: 120px !important;
    border-radius: 50% !important;
    object-fit: cover !important; /* FIXED: Fill the circle */
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important;
    background: #f8fafc !important;
    border: 1px solid #edf2f7 !important;
}

.tr-cat-mega__item:hover .tr-cat-mega__item-img {
    transform: scale(1.1) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1) !important;
}

.tr-cat-mega__item-name {
    font-size: 0.9rem !important;
    color: #2d3748 !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    transition: color 0.2s !important;
}

.tr-cat-mega__item:hover .tr-cat-mega__item-name {
    color: var(--tr-color-primary, #ef6b4d) !important;
}

.tr-cat-mega__badge {
    position: absolute !important;
    top: 5px !important;
    right: 15px !important;
    background: #ff4d4f !important;
    color: #ffffff !important;
    font-size: 0.65rem !important;
    font-weight: 800 !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
    z-index: 2 !important;
}

/* ============================================================
   § 11 — SUMMER COLLECTION HERO (High Fidelity)
   ============================================================ */

.tr-hero-summer {
    background: linear-gradient(135deg, #f3a683 0%, #f7d794 100%) !important;
    padding: 60px 0 !important;
    overflow: hidden !important;
    position: relative !important;
}

.tr-hero-summer__inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 32px !important;
    position: relative !important;
    z-index: 2 !important;
}

.tr-hero-summer__content {
    max-width: 700px !important;
}

.tr-hero-summer__title {
    font-size: clamp(1.4rem, 2.8vw, 2.25rem) !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1.15 !important;
    margin: 0 !important;
    max-width: 900px !important;
}

.tr-hero-summer__text {
    font-size: 1.2rem !important;
    color: #ffffff !important;
    line-height: 1.6 !important;
    margin-bottom: 30px !important;
}

.tr-hero-summer__location {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(0,0,0,0.3) !important;
    color: #ffffff !important;
    padding: 8px 16px !important;
    border-radius: 50px !important;
    font-size: 0.9rem !important;
    margin-bottom: 30px !important;
}

.tr-hero-summer__btns {
    display: flex !important;
    justify-content: center !important;
    gap: 15px !important;
}

.tr-btn-summer {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 30px !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all 0.2s !important;
}

.tr-btn-summer--white {
    background: #ffffff !important;
    color: #f3a683 !important;
}

.tr-btn-summer--outline {
    border: 2px solid #ffffff !important;
    color: #ffffff !important;
}

.tr-hero-summer__visual {
    width: 100% !important;
}

.tr-hero-summer__collage {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
}

.tr-collage-item {
    display: block !important;
    aspect-ratio: 4 / 3 !important;
    background: #ffffff !important;
    padding: 8px !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
    overflow: hidden !important;
}

.tr-collage-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 8px !important;
}

@media (max-width: 600px) {
    .tr-hero-summer__collage { gap: 10px !important; }
    .tr-collage-item { padding: 4px !important; border-radius: 8px !important; }
    .tr-collage-item img { border-radius: 6px !important; }
}

.tr-hero--slider {
    position: relative !important;
    overflow: hidden !important;
    padding: 0 !important;
    background: #0d0d0d !important;
    height: clamp(500px, 70vh, 700px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.tr-hero__slides {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
}

.tr-hero__slide {
    position: absolute !important;
    inset: 0 !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    opacity: 0;
    animation: trHeroFade 60s infinite ease-in-out !important;
    visibility: hidden;
}

@keyframes trHeroFade {
    0%      { opacity: 0; visibility: visible; }
    0.83%   { opacity: 1; visibility: visible; }
    7.5%    { opacity: 1; visibility: visible; }
    8.33%   { opacity: 0; visibility: visible; }
    100%    { opacity: 0; visibility: hidden; }
}

.tr-hero__overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.6) 100%) !important;
}

.tr-hero__content {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: 800px !important;
    margin: 0 auto !important;
    text-align: center !important;
    color: #ffffff !important;
    padding: 20px !important;
}

.tr-hero__eyebrow {
    display: inline-block !important;
    background: rgba(255,255,255,0.15) !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    border-radius: 50px !important;
    padding: 5px 20px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    margin-bottom: 20px !important;
}

.tr-hero__title {
    font-size: clamp(2rem, 6vw, 4rem) !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    margin-bottom: 20px !important;
    color: #ffffff !important;
}

.tr-hero__title span {
    color: var(--tr-color-primary, #e76f51) !important;
}

.tr-hero__sub {
    font-size: clamp(1rem, 2.5vw, 1.25rem) !important;
    line-height: 1.6 !important;
    max-width: 600px !important;
    margin: 0 auto 40px !important;
    opacity: 0.9 !important;
}

.tr-hero__search {
    display: flex !important;
    max-width: 600px !important;
    margin: 0 auto 30px !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2) !important;
}

.tr-hero__search-input {
    flex: 1 !important;
    padding: 18px 25px !important;
    border: none !important;
    font-size: 1.1rem !important;
    outline: none !important;
    color: #333 !important;
}

.tr-hero__search-btn {
    padding: 0 30px !important;
    background: var(--tr-color-primary, #e76f51) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    border: none !important;
}

.tr-hero__ctas {
    display: flex !important;
    gap: 15px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
}

.tr-hero__dots {
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 40px !important;
}

.tr-hero__dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.3) !important;
    animation: trHeroDot 60s infinite ease-in-out !important;
}

@keyframes trHeroDot {
    0%      { background: rgba(255,255,255,0.3); transform: scale(1); }
    0.83%   { background: #ffffff; transform: scale(1.3); }
    7.5%    { background: #ffffff; transform: scale(1.3); }
    8.33%   { background: rgba(255,255,255,0.3); transform: scale(1); }
    100%    { background: rgba(255,255,255,0.3); transform: scale(1); }
}

@media (max-width: 767px) {
    .tr-hero--slider {
        height: 550px !important;
    }
    .tr-hero__title {
        font-size: 2.2rem !important;
    }
    .tr-hero__search {
        max-width: 90% !important;
    }
    .tr-hero__search-btn span {
        display: none !important;
    }
}

@media (min-width: 1025px) {
    .tr-main-content {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    /* Reset banner padding to default plugin behavior */
    .tr-mh {
        margin-top: 0 !important;
    }
}

.tr-loop-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

@media (min-width: 1025px) {
    .tr-loop-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 24px !important;
    }
}

.tr-pagination {
    display: flex !important;
    justify-content: center !important;
    margin: 40px 0 !important;
}

.tr-pagination ul.page-numbers {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.tr-pagination .page-numbers li {
    display: flex !important;
}

.tr-pagination .page-numbers .page-numbers {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 44px !important;
    height: 44px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    border: 1.5px solid #dfe1e6 !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    color: #1a1a2e !important;
    text-decoration: none !important;
    background: #ffffff !important;
    transition: all 0.2s ease !important;
}

.tr-pagination .page-numbers .page-numbers:hover {
    border-color: var(--tr-color-primary, #e76f51) !important;
    color: var(--tr-color-primary, #e76f51) !important;
}

.tr-pagination .page-numbers .page-numbers.current {
    background: var(--tr-color-primary, #e76f51) !important;
    border-color: var(--tr-color-primary, #e76f51) !important;
    color: #ffffff !important;
}

.tr-pagination .page-numbers .page-numbers.dots {
    background: transparent !important;
    border: none !important;
    min-width: auto !important;
}

.tr-pagination .page-numbers .page-numbers.dots:hover {
    border: none !important;
    color: #1a1a2e !important;
}

.tr-pagination .page-numbers .page-numbers.next,
.tr-pagination .page-numbers .page-numbers.prev {
    border-color: #dfe1e6 !important;
    font-weight: 400 !important;
}

.tr-shop-card,
.tr-product-card {
    border: none !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important;
    transition: all 0.3s ease !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

.tr-shop-card:hover,
.tr-product-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 12px 30px rgba(0,0,0,0.12) !important;
}

.tr-shop-card__img-wrap,
.tr-product-card__img-wrap {
    aspect-ratio: 1 / 1 !important; /* Square for clean grid */
    border-radius: 20px 20px 0 0 !important;
    overflow: hidden !important;
    background: #f8f8f8 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.tr-shop-card__img,
.tr-product-card__img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.5s ease !important;
}

.tr-shop-card:hover .tr-shop-card__img,
.tr-product-card:hover .tr-product-card__img {
    transform: scale(1.08) !important;
}

.tr-shop-card__body,
.tr-product-card__body {
    padding: 18px !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

.tr-shop-card__title,
.tr-product-card__title {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    margin-bottom: 8px !important;
}

.tr-shop-card__title a,
.tr-product-card__title a {
    color: #111111 !important;
    text-decoration: none !important;
}

.tr-shop-card__price,
.tr-product-card__price {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    color: var(--tr-color-primary) !important;
    margin-top: auto !important;
}

.tr-shop-card__badge,
.tr-product-card__badge {
    border-radius: 6px !important;
    padding: 3px 9px !important;
    font-size: 0.68rem !important;
    top: 15px !important;
    left: 15px !important;
    z-index: 5 !important;
}

/* Ensure no overlap of text */
.tr-shop-card__title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 2.8em;
}

/* ── Featured Products Horizontal Scroller (v2.3.11) ──────────────── */
.tr-featured-products {
    padding: 60px 0;
    overflow: hidden;
}

.tr-featured-grid {
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    grid-auto-flow: column;
    grid-auto-columns: 280px; /* Base width for each product column */
    gap: 20px;
    overflow-x: auto;
    padding: 10px 0 30px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--tr-color-primary, #e76f51) #f0f0f0;
}

/* Hide scrollbar for Chrome/Safari if desired, or keep for UX */
.tr-featured-grid::-webkit-scrollbar {
    height: 6px;
}
.tr-featured-grid::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 10px;
}
.tr-featured-grid::-webkit-scrollbar-thumb {
    background: var(--tr-color-primary, #e76f51);
    border-radius: 10px;
}

.tr-featured-grid .tr-shop-card {
    scroll-snap-align: start;
    width: 280px;
    flex-shrink: 0;
}

@media (max-width: 1200px) {
    .tr-featured-grid {
        grid-auto-columns: 240px;
    }
    .tr-featured-grid .tr-shop-card {
        width: 240px;
    }
}

@media (max-width: 768px) {
    .tr-featured-grid {
        grid-auto-columns: calc(50% - 10px); /* 2 products visible per row */
        gap: 15px;
    }
    .tr-featured-grid .tr-shop-card {
        width: 100%;
    }
}

.tr-featured-products .tr-section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 30px;
}

/* Use the standard container but ensure it doesn't block scrolling */
.tr-mobile-nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    height: 100dvh !important;
    z-index: 1000000 !important; 
    visibility: hidden !important;
    pointer-events: none !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    background: transparent !important; /* Let parent overlay handle backdrop */
    overflow: hidden !important;
}

.tr-mobile-nav.is-open {
    visibility: visible !important;
    pointer-events: auto !important;
}

/* The actual scrollable drawer */
.tr-mobile-nav__inner {
    width: 290px !important;
    max-width: 85% !important;
    height: 100% !important;
    background: #ffffff !important;
    box-shadow: 10px 0 30px rgba(0,0,0,0.2) !important;
    overflow-y: scroll !important; /* FORCE SCROLL HERE */
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s ease !important;
    pointer-events: auto !important;
    display: block !important;
    padding: 0 !important;
}

.tr-mobile-nav.is-open .tr-mobile-nav__inner {
    transform: translateX(0) !important;
}

/* Close button - absolute inside the drawer */
.tr-mobile-nav__close {
    position: sticky !important;
    top: 0 !important;
    float: right !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 50px !important;
    height: 50px !important;
    background: #ffffff !important;
    z-index: 100 !important;
    border: none !important;
    color: #000 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
}

/* Mobile branding in drawer */
.tr-mobile-nav__header {
    padding: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

.tr-mobile-nav__account-link {
    color: #000000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Category section */
.tr-mobile-nav__cats {
    padding: 20px !important;
    clear: both !important;
    display: block !important;
}

.tr-mobile-nav__section-title {
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    color: #999 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 20px !important;
    border-bottom: 2px solid #f0f0f0 !important;
    padding-bottom: 10px !important;
    display: block !important;
}

.tr-mobile-nav__cat-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.tr-mobile-nav__cat-link {
    display: flex !important;
    align-items: center !important;
    padding: 16px 0 !important;
    border-bottom: 1px solid #f5f5f5 !important;
    color: #111 !important;
    text-decoration: none !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    width: 100% !important;
}

.tr-mobile-nav__cat-img {
    width: 36px !important;
    height: 36px !important;
    margin-right: 15px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
}

/* ============================================================
   § 12 — MOBILE RESPONSIVE HEADER & MEGA MENU
   ============================================================ */

/* ── Desktop: hide mobile-only elements ────────────────────── */
@media (min-width: 769px) {
    .tr-header__menu-toggle      { display: none !important; }
    .tr-header__search-toggle    { display: none !important; }
    .tr-cat-mega__mobile-bar     { display: none !important; }
    .tr-mobile-mega-overlay      { display: none !important; }
}

/* ── Mobile overlay backdrop ───────────────────────────────── */
.tr-mobile-mega-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 9998;
    cursor: pointer;
}
.tr-mobile-mega-overlay.is-active { display: block !important; }

/* ── Mobile header: 2-row layout ──────────────────────────── */
@media (max-width: 768px) {

    /* Row 1: hamburger | logo (center) | icons */
    #tr-header.tr-header {
        min-height: auto !important;
        height: auto !important;
        overflow: visible !important;
        background-color: #ffffff !important;
        border-bottom: 1px solid #f0f0f0 !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
        width: 100% !important;
        display: block !important;
    }

    #tr-header .tr-header__inner {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        height: auto !important;
        overflow: visible !important;
        padding: 8px 0 !important;
        gap: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Hamburger — leftmost */
    .tr-header__menu-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        order: 1 !important;
        flex: 0 0 50px !important;
        background: none !important;
        border: none !important;
        cursor: pointer !important;
        padding: 0 !important;
        height: 50px !important;
        color: #1a1a2e !important;
    }

    /* Logo — centered */
    .tr-header__logo {
        order: 2 !important;
        flex: 1 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 0 !important;
    }

    /* Actions (wishlist + account + cart) — rightmost */
    .tr-header__actions {
        order: 3 !important;
        flex: 0 0 auto !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        padding-right: 15px !important;
    }

    /* Search bar — second row, full width */
    .tr-header__search-form {
        order: 10 !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin: 0 !important;
        height: 54px !important;
        background: #ffffff !important;
        border-radius: 0 !important; 
        border-top: 1px solid #f0f1f3 !important;
        border-bottom: 1px solid #f0f1f3 !important;
        padding: 8px 15px !important;
        display: flex !important;
        box-sizing: border-box !important;
    }

    .tr-header__search-input {
        background: #f1f3f5 !important;
        border: 1px solid #e2e8f0 !important;
        border-right: none !important;
        border-radius: 6px 0 0 6px !important;
        padding: 0 15px !important;
        flex: 1 !important;
        height: 100% !important;
    }

    .tr-header__search-submit {
        background: var(--tr-color-primary, #ef6b4d) !important;
        color: #fff !important;
        border: none !important;
        border-radius: 0 6px 6px 0 !important;
        padding: 0 18px !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
        height: 100% !important;
    }

    /* Hide desktop-only header elements */
    .tr-header__cat-btn          { display: none !important; }
    .tr-header__sell-btn         { display: none !important; }
    .tr-header__influencer-btn   { display: none !important; }
    .tr-header__affiliate-btn    { display: none !important; }
    .tr-header__register-btn     { display: none !important; }
    .tr-header__search-toggle    { display: none !important; }

    /* ── Row 3: Influencer · Affiliate strip (mobile only) ── */
    .tr-header__utility-row {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        order: 20 !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        gap: 8px !important;
        padding: 7px 16px !important;
        background: #fafafa !important;
        border-top: 1px solid #f0f1f3 !important;
        box-sizing: border-box !important;
    }

    .tr-header__utility-link {
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
        font-size: 0.8rem !important;
        font-weight: 700 !important;
        text-decoration: none !important;
        padding: 5px 13px !important;
        border-radius: 20px !important;
        transition: background 0.15s !important;
        white-space: nowrap !important;
    }

    .tr-header__utility-link--influencer {
        color: var(--tr-color-primary, #ef6b4d) !important;
        background: rgba(239,107,77,0.09) !important;
        border: 1.5px solid rgba(239,107,77,0.2) !important;
    }

    .tr-header__utility-link--influencer svg {
        fill: var(--tr-color-primary, #ef6b4d) !important;
    }

    .tr-header__utility-link--affiliate {
        color: #1a1a2e !important;
        background: #f0f2f5 !important;
        border: 1.5px solid #e2e8f0 !important;
    }

    .tr-header__utility-link--affiliate svg {
        stroke: #1a1a2e !important;
    }

    .tr-header__utility-sep {
        color: #c8cfd8 !important;
        font-size: 1rem !important;
        line-height: 1 !important;
        user-select: none !important;
    }

    /* Ensure content is pushed down correctly */
    .tr-main-content {
        margin-top: 0 !important;
        padding-top: 10px !important;
    }

    /* Fix body overflow when mobile menu is open */
    body.tr-menu-open {
        overflow: hidden !important;
    }

    /* ── Mobile Hero: full-width buttons, centered ─────────── */
    .tr-hero-summer__btns {
        flex-direction: column !important;
        gap: 12px !important;
        align-items: stretch !important;
    }
    .tr-btn-summer {
        width: 100% !important;
        justify-content: center !important;
    }
    .tr-hero-summer__location {
        justify-content: center !important;
    }
    .tr-hero-summer__content {
        padding: 0 8px !important;
    }
}

/* ── Desktop-only: hide mobile drawer on screens wider than 768px ── */
@media (min-width: 769px) {
    #tr-mobile-drawer { display: none !important; }
}

/* ── Mobile-only: hide desktop mega menu on phones ── */
@media (max-width: 768px) {
    #tr-cat-mega.tr-cat-mega { display: none !important; }
}

/* ── Influencer icon — orange star in actions bar ── */
.tr-header__influencer-icon         { color: var(--tr-color-primary, #ef6b4d) !important; }
.tr-header__influencer-icon svg     { fill: var(--tr-color-primary, #ef6b4d) !important; stroke: var(--tr-color-primary, #ef6b4d) !important; }

/* ═══════════════════════════════════════════════════════════
   MOBILE NAVIGATION DRAWER  (#tr-mobile-drawer)
   ═══════════════════════════════════════════════════════════ */

/* Hidden by default; shown via JS on hamburger tap */
#tr-mobile-drawer {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #fff;
    flex-direction: column;
}

#tr-mobile-drawer.is-active { display: flex !important; }

/* ── Top bar: Logo | ★ | 👤 | ✕ ── */
.tr-mobile-drawer__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    min-height: 56px;
    border-bottom: 1px solid #ebebeb;
    background: #fff;
    flex-shrink: 0;
}

.tr-mobile-drawer__logo {
    font-size: 1.35rem;
    font-weight: 900;
    text-decoration: none;
    line-height: 1;
}

.tr-mobile-drawer__bar-actions {
    display: flex;
    align-items: center;
    gap: 2px;
}

.tr-mobile-drawer__bar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 7px;
    color: #1a1a2e;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.15s;
}

.tr-mobile-drawer__bar-btn:hover { background: #f5f6f8; }

.tr-mobile-drawer__influencer-btn       { color: #ef6b4d; }
.tr-mobile-drawer__influencer-btn svg   { fill: #ef6b4d; }

/* ── Two-panel body ── */
.tr-mobile-drawer__body {
    display: flex;
    flex-direction: row;
    flex: 1;
    overflow: hidden;
}

/* ── LEFT: Category list sidebar ── */
.tr-mobile-drawer__sidebar {
    width: 44%;
    max-width: 175px;
    min-width: 125px;
    overflow-y: auto;
    background: #f8f9fa;
    border-right: 1px solid #ebebeb;
    display: flex;
    flex-direction: column;
    padding: 6px 0;
    flex-shrink: 0;
    -webkit-overflow-scrolling: touch;
}

.tr-mobile-drawer__cat-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 13px 10px 13px 14px;
    background: none;
    border: none;
    border-left: 3px solid transparent;
    cursor: pointer;
    text-align: left;
    font-size: 0.81rem;
    font-weight: 500;
    color: #555;
    line-height: 1.3;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.tr-mobile-drawer__cat-btn.is-active {
    background: #fff;
    border-left-color: #ef6b4d;
    color: #1a1a2e;
    font-weight: 700;
}

/* ============================================================
   § — SINGLE PRODUCT BUY BOX (Carlee layout panel)
   Previously unstyled (WooCommerce defaults only) — this block
   gives it a proper buy-box treatment: pill Add to Cart/Buy Now
   buttons, Ships from/Sold by/Returns/Payment rows, bordered
   full-width Add to Favourites ("Add to List").
   ============================================================ */

.tr-carlee-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 16px 60px;
}

.tr-carlee-gallery {
    flex: 1 1 420px;
    min-width: 300px;
}

/* Belt-and-suspenders: hardcoded white regardless of the
   --tr-color-surface-alt variable's resolved value, since the
   parent theme's own gallery pillarbox rule also targets this
   exact selector and either could load last depending on the
   stylesheet registration path (see § 1 note above). */
body.single-product .tr-carlee-gallery .woocommerce-product-gallery__image {
    background: #ffffff !important;
}

.tr-carlee-panel {
    flex: 1 1 380px;
    min-width: 300px;
}

.tr-sp-title-wrap .product_title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 8px;
}

.tr-sp-meta-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.tr-sp-meta-row .star-rating {
    font-size: 14px;
}

.tr-sp-meta-row .woocommerce-review-link {
    color: var(--tr-color-primary, #e76f51);
    font-weight: 600;
    text-decoration: none;
}

.tr-sp-condition {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #16a34a;
    font-weight: 600;
    font-size: 0.9rem;
}

.tr-sp-condition--out {
    color: #dc2626;
}

.tr-sp-divider {
    border: none;
    border-top: 1px solid #ececec;
    margin: 16px 0;
}

.tr-sp-price-block .price {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1a1a2e;
}

.tr-sp-price-block del {
    font-size: 1rem;
    color: #9ca3af;
    margin-right: 8px;
}

.tr-sp-price-block ins {
    text-decoration: none;
}

.tr-sp-qty-total {
    margin-top: 6px;
    font-size: 0.9rem;
    color: #6b7280;
}

.tr-sp-excerpt {
    color: #4b5563;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Add-to-cart form: variations, quantity, buttons */
.tr-sp-form-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tr-sp-form-wrap form.cart {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Variable products nest quantity + Add to cart two levels deep inside
   this wrapper (form.cart > .single_variation_wrap > here) — the gap
   above only covers form.cart's direct children, so this needs its own. */
.tr-sp-form-wrap .woocommerce-variation-add-to-cart {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tr-sp-form-wrap .variations {
    width: 100%;
    margin-bottom: 4px;
}

.tr-sp-form-wrap table.variations td {
    padding: 6px 0;
}

.tr-sp-form-wrap .variations select {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1.5px solid #dfe1e6;
    background: #fff;
    font-family: inherit;
}

.tr-sp-form-wrap .quantity {
    display: block;
}

.tr-sp-form-wrap .quantity .qty {
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1.5px solid #dfe1e6;
    font-size: 1rem;
    font-family: inherit;
}

/* Quantity dropdown (select, replacing the old number spinner) */
select.qty {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px !important;
    cursor: pointer;
}

select.qty:focus {
    outline: none;
    border-color: var(--tr-color-primary, #e76f51);
    box-shadow: 0 0 0 1px var(--tr-color-primary, #e76f51);
}

.tr-sp-form-wrap button.single_add_to_cart_button,
.tr-sp-form-wrap .tr-sp-buy-now {
    display: block;
    width: 100%;
    border: none;
    border-radius: 999px;
    padding: 14px 20px;
    font-size: 1rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    text-align: center;
    transition: filter 0.15s ease, transform 0.1s ease;
}

.tr-sp-form-wrap button.single_add_to_cart_button:hover,
.tr-sp-form-wrap .tr-sp-buy-now:hover {
    filter: brightness(0.96);
}

.tr-sp-form-wrap button.single_add_to_cart_button:active,
.tr-sp-form-wrap .tr-sp-buy-now:active {
    transform: scale(0.98);
}

.tr-sp-form-wrap button.single_add_to_cart_button {
    background: #FFD814;
    color: #0f1111;
}

.tr-sp-form-wrap .tr-sp-buy-now {
    background: var(--tr-color-primary, #e76f51);
    color: #ffffff;
}

.tr-sp-form-wrap button.single_add_to_cart_button.disabled,
.tr-sp-form-wrap .apdill-buy-now.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Ships from / Sold by / Returns / Payment */
.tr-sp-info-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 16px 0;
    font-size: 0.9rem;
}

.tr-sp-info-row {
    display: flex;
    gap: 8px;
}

.tr-sp-info-row__label {
    flex: 0 0 90px;
    color: #6b7280;
}

.tr-sp-info-row__value {
    color: #1a1a2e;
    font-weight: 500;
}

.tr-sp-info-row__link {
    color: #2563eb;
    text-decoration: none;
}

.tr-sp-info-row__link:hover {
    text-decoration: underline;
}

/* Wishlist / "Add to List" */
.tr-sp-wishlist-row .tr-wishlist-btn--single {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 20px;
    border-radius: 10px;
    border: 1.5px solid #dfe1e6;
    background: #f7f8fa;
    color: #1a1a2e;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease;
}

.tr-sp-wishlist-row .tr-wishlist-btn--single:hover {
    background: #eef0f3;
}

.tr-sp-wishlist-row .tr-wishlist-btn--single .tr-heart-icon {
    width: 18px;
    height: 18px;
    stroke: var(--tr-color-primary, #e76f51);
    fill: none;
    stroke-width: 2;
}

.tr-sp-wishlist-row .tr-wishlist-btn--single.is-wishlisted .tr-heart-icon {
    fill: var(--tr-color-primary, #e76f51);
}

.tr-sp-wishlist-row .tr-wishlist-view-link {
    display: block;
    text-align: center;
    margin-top: 8px;
    color: var(--tr-color-primary, #e76f51);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
}

/* Trust strip */
.tr-sp-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.tr-sp-trust__item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #4b5563;
    font-size: 0.85rem;
    font-weight: 500;
}

@media (max-width: 768px) {
    .tr-carlee-layout {
        flex-direction: column;
        gap: 20px;
    }
}

.tr-mobile-drawer__cat-arrow {
    flex-shrink: 0;
    opacity: 0.35;
    transition: opacity 0.12s;
}

.tr-mobile-drawer__cat-btn.is-active .tr-mobile-drawer__cat-arrow {
    opacity: 1;
    stroke: #ef6b4d;
}

/* ── RIGHT: Subcategory grid panels ── */
.tr-mobile-drawer__panels {
    flex: 1;
    overflow-y: auto;
    background: #fff;
    -webkit-overflow-scrolling: touch;
}

.tr-mobile-drawer__panel {
    display: none;
    flex-direction: column;
    padding: 14px 10px 24px;
}

.tr-mobile-drawer__panel.is-active { display: flex; }

.tr-mobile-drawer__panel-title {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.9rem;
    font-weight: 700;
    color: #1a1a2e;
    text-decoration: none;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
}

.tr-mobile-drawer__panel-title:hover { color: #ef6b4d; }

/* 2-column subcategory grid */
.tr-mobile-drawer__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 6px;
}

.tr-mobile-drawer__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    gap: 6px;
}

/* Circular image */
.tr-mobile-drawer__item-circle {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    overflow: hidden;
    background: #f5f6f8;
    border: 2px solid #ebebeb;
    flex-shrink: 0;
    transition: border-color 0.15s;
}

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

.tr-mobile-drawer__item-name {
    font-size: 0.72rem;
    font-weight: 500;
    color: #555;
    text-align: center;
    line-height: 1.25;
    max-width: 78px;
}

.tr-mobile-drawer__item:hover .tr-mobile-drawer__item-circle { border-color: #ef6b4d; }
.tr-mobile-drawer__item:hover .tr-mobile-drawer__item-name   { color: #ef6b4d; }

/* ── Scroll lock when drawer is open ── */
body.tr-menu-open { overflow: hidden !important; }

/* ═══════════════════════════════════════════════════════════
   § 13 — FEATURED PRODUCTS GRID (64 products)
   Parent theme: 2 col mobile / 3 col tablet / 4 col desktop
   Override: 5 col at 1280px+, 6 col at 1600px+
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 1280px) {
    .tr-grid-products--shop { grid-template-columns: repeat(5, 1fr) !important; }
}
@media (min-width: 1600px) {
    .tr-grid-products--shop { grid-template-columns: repeat(6, 1fr) !important; }
}

/* Mobile: tighten card gap so 64 items scroll comfortably */
@media (max-width: 639px) {
    .tr-grid-products--shop { gap: 12px !important; }
}

/* ============================================================
   § 14 — CUSTOM CATEGORY ARCHIVE (Modern Subcat Grid)
   ============================================================ */

.tr-cat-modern-grid {
    padding: 30px 0;
    background: #ffffff;
    border-bottom: 1px solid #f0f1f3;
    margin-bottom: 20px;
}

.tr-cat-grid-scroll {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 15px;
    padding-bottom: 15px;
    justify-content: center;
}

@media (max-width: 1024px) {
    .tr-cat-grid-scroll {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .tr-cat-grid-scroll {
        grid-template-columns: repeat(2, 1fr);
        padding-inline: 8px;
        gap: 8px;
    }
}

.tr-cat-grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-decoration: none !important;
    transition: transform 0.2s ease;
    width: 100%;
}

.tr-cat-grid-item:hover {
    transform: translateY(-5px);
}

.tr-cat-grid-item__image {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 12px; /* Modern rounded corners instead of circle */
    overflow: hidden;
    background: #f8f8f8;
    border: 1px solid #eef0f2;
    transition: all 0.2s ease;
}

.tr-cat-grid-item:hover .tr-cat-grid-item__image {
    border-color: var(--tr-color-primary, #e76f51);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.tr-cat-grid-item__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tr-cat-grid-item__name {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1a1a2e;
    text-align: center;
}

/* Subcategory Sections */
.tr-subcat-section {
    padding: 40px 0;
}

.tr-subcat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f0f1f3;
}

.tr-subcat-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #1a1a2e;
    margin: 0;
    position: relative;
}

.tr-subcat-title::after {
    content: "";
    position: absolute;
    bottom: -12px;
    left: 0;
    width: 60px;
    height: 2px;
    background: var(--tr-color-primary, #e76f51);
}

.tr-subcat-view-all {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--tr-color-primary, #e76f51);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tr-subcat-view-all:hover {
    text-decoration: underline;
}

/* ============================================================
   § — VARIATION SWATCHES (color/size picker)
   Native <select> dropdowns stay in the DOM (functional, hidden)
   — these swatches are a display layer driven by tr-variation-
   swatches.js, which keeps them synced to the real selects so
   WooCommerce's price/stock/gallery matching still works.
   ============================================================ */

table.variations.tr-swatches-native-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.tr-swatches-wrap {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 8px;
}

.tr-swatch-group__title {
    font-size: 0.9rem;
    color: #6b7280;
    margin-bottom: 8px;
}

.tr-swatch-group__title strong {
    color: #1a1a2e;
    font-weight: 700;
}

.tr-swatch-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Pill buttons (size, or any non-color attribute) */
.tr-swatch--pill {
    padding: 10px 16px;
    border-radius: 10px;
    border: 1.5px solid #dfe1e6;
    background: #ffffff;
    color: #1a1a2e;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tr-swatch--pill:hover {
    border-color: var(--tr-color-primary, #e76f51);
}

.tr-swatch--pill.tr-swatch--active {
    border-color: var(--tr-color-primary, #e76f51);
    border-width: 2px;
    box-shadow: 0 0 0 1px var(--tr-color-primary, #e76f51);
    padding: 9px 15px; /* offset the extra 0.5px border width */
}

/* Photo cards (color) */
.tr-swatch-options--photo {
    gap: 12px;
}

.tr-swatch--photo {
    display: flex;
    flex-direction: column;
    width: 96px;
    padding: 6px;
    border-radius: 10px;
    border: 1.5px solid #dfe1e6;
    background: #ffffff;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tr-swatch--photo img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 6px;
}

.tr-swatch__price {
    font-size: 0.8rem;
    font-weight: 600;
    color: #1a1a2e;
    padding: 0 2px;
}

.tr-swatch--photo:hover {
    border-color: var(--tr-color-primary, #e76f51);
}

.tr-swatch--photo.tr-swatch--active {
    border-color: var(--tr-color-primary, #e76f51);
    border-width: 2px;
    box-shadow: 0 0 0 1px var(--tr-color-primary, #e76f51);
}

/* Unavailable combination — dashed border, non-interactive */
.tr-swatch--disabled {
    opacity: 0.45;
    border-style: dashed !important;
    cursor: not-allowed;
    box-shadow: none !important;
}

.tr-swatches-clear {
    align-self: flex-start;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--tr-color-primary, #e76f51);
    text-decoration: none;
}

.tr-swatches-clear:hover {
    text-decoration: underline;
}

/* ============================================================
   § — PRODUCT TABS AS ACCORDION ROWS
   WooCommerce's own tab JS already toggles one panel visible at a
   time and adds .active to the clicked <li> — this only restyles
   the horizontal pill/underline tabs into stacked bordered rows
   with a chevron, so it reads as a tappable accordion menu.
   ============================================================ */

.woocommerce div.product .woocommerce-tabs .tabs {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    border-bottom: none !important;
    border-top: 1px solid var(--tr-color-border, #e5e7eb) !important;
}

.woocommerce div.product .woocommerce-tabs .tabs li {
    margin: 0 !important;
    border-bottom: 1px solid var(--tr-color-border, #e5e7eb) !important;
}

.woocommerce div.product .woocommerce-tabs .tabs li a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 4px !important;
    margin-bottom: 0 !important;
    border-bottom: none !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    color: #1a1a2e !important;
}

.woocommerce div.product .woocommerce-tabs .tabs li a::after {
    content: '';
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-left: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231a1a2e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.2s ease;
}

.woocommerce div.product .woocommerce-tabs .tabs li.active a::after {
    transform: rotate(180deg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23e76f51' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

.woocommerce div.product .woocommerce-tabs .tabs li.active a,
.woocommerce div.product .woocommerce-tabs .tabs li a:hover {
    color: var(--tr-color-primary, #e76f51) !important;
    border-bottom: none !important;
}

.woocommerce div.product .woocommerce-tabs .panel {
    padding: 20px 4px !important;
}

/* ============================================================
   § — MY ACCOUNT / LOGIN PAGE: LIGHT THEME OVERRIDE
   The PARENT theme's own style.css has a ~170-line "Buyer Account
   Page: dark theme overrides" block (body.woocommerce-account...)
   that paints the whole account/login area dark navy. This block
   converts every one of those rules back to the site's light
   theme. Selectors are prefixed with "html" beyond the parent's
   own "body.woocommerce-account" prefix specifically to guarantee
   higher specificity than the parent's rules — both use
   !important, and since the parent registers its stylesheet under
   a second, separately-timed handle (see the § 1 note above this
   same ambiguity caused the product gallery bug), load order
   between parent and child isn't reliable, so specificity is the
   only guaranteed way to win here regardless of order.
   ============================================================ */

html body.woocommerce-account,
html body.woocommerce-account .tr-container,
html body.woocommerce-account .tr-layout {
    background: #ffffff !important;
    color: #1a1a2e !important;
}

html body.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation,
html body.woocommerce-account .woocommerce .woocommerce-MyAccount-content,
html body.woocommerce-account .woocommerce-MyAccount-navigation,
html body.woocommerce-account .woocommerce-MyAccount-content {
    background: #ffffff !important;
    color: #1a1a2e !important;
}

html body.woocommerce-account .tr-buyer-myaccount {
    background: #ffffff !important;
}

html body.woocommerce-account .tr-buyer-myaccount__nav,
html body.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation {
    background: #ffffff !important;
    border-color: #e5e7eb !important;
}

html body.woocommerce-account .tr-buyer-account-header {
    background: #ffffff !important;
    border-bottom-color: #e5e7eb !important;
}

html body.woocommerce-account .tr-buyer-account-header__name,
html body.woocommerce-account .tr-buyer-account-header__orders {
    color: #1a1a2e !important;
}

html body.woocommerce-account .tr-buyer-myaccount__nav .tr-buyer-nav__link {
    color: #64748b !important;
}
html body.woocommerce-account .tr-buyer-myaccount__nav .tr-buyer-nav__link:hover {
    color: #1a1a2e !important;
    background: #f5f6f8 !important;
}
html body.woocommerce-account .tr-buyer-myaccount__nav .tr-buyer-nav__item.is-active .tr-buyer-nav__link,
html body.woocommerce-account .tr-buyer-myaccount__nav .tr-buyer-nav__link[aria-current="page"] {
    color: #1a1a2e !important;
    background: #f5f6f8 !important;
    border-left-color: #e76f51 !important;
}

html body.woocommerce-account .tr-buyer-myaccount__content {
    background: #ffffff !important;
    color: #1a1a2e !important;
}

html body.woocommerce-account .tr-buyer-myaccount__content h2,
html body.woocommerce-account .tr-buyer-myaccount__content h3,
html body.woocommerce-account .tr-buyer-myaccount__content p,
html body.woocommerce-account .tr-buyer-myaccount__content span:not(.tr-buyer-pm-badge):not(.tr-buyer-btn__text) {
    color: #1a1a2e !important;
}

html body.woocommerce-account .woocommerce-MyAccount-content p {
    color: #1a1a2e !important;
}

html body.woocommerce-account .woocommerce-MyAccount-content a:not(.woocommerce-button):not(.tr-buyer-btn) {
    color: #e76f51 !important;
}

html body.woocommerce-account .tr-buyer-notice--info {
    background: #eff6ff !important;
    color: #2563eb !important;
    border-left-color: #3b82f6 !important;
}

/* Login card itself */
html body.woocommerce-account .tr-buyer-myaccount-login .tr-buyer-register__card {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 4px 24px rgba(0,0,0,.08) !important;
}

html body.woocommerce-account .tr-buyer-myaccount-login .tr-buyer-register__title {
    color: #1a1a2e !important;
}

html body.woocommerce-account .tr-buyer-myaccount-login .tr-buyer-label,
html body.woocommerce-account .tr-buyer-myaccount-login label {
    color: #374151 !important;
}

html body.woocommerce-account .tr-buyer-myaccount-login .tr-buyer-input,
html body.woocommerce-account .tr-buyer-myaccount-login input[type="text"],
html body.woocommerce-account .tr-buyer-myaccount-login input[type="password"] {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    color: #1a1a2e !important;
}

html body.woocommerce-account .tr-buyer-myaccount-login .tr-buyer-input:focus,
html body.woocommerce-account .tr-buyer-myaccount-login input:focus {
    border-color: #e76f51 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(231,111,81,.15) !important;
}

html body.woocommerce-account .tr-buyer-myaccount-login .tr-buyer-checkbox-label {
    color: #64748b !important;
}

html body.woocommerce-account .tr-buyer-myaccount-login .tr-buyer-link--muted:hover {
    color: #1a1a2e !important;
}

html body.woocommerce-account .tr-buyer-myaccount-login .tr-buyer-toggle-pass:hover {
    color: #1a1a2e !important;
}

/* ============================================================
   § — HEADER ACCOUNT DROPDOWN (logged-in state)
   Shows the display name next to the account icon; clicking/
   tapping opens a dropdown with the same links as the My
   Account sidebar (sourced from wc_get_account_menu_items()).
   ============================================================ */

.tr-header__account-container {
    position: relative;
}

.tr-header__account-trigger {
    display: flex !important;
    align-items: center;
    gap: 6px;
    /* The parent theme's shared .tr-header__action-btn fixes icon buttons
       to a rigid 40x40 square, which clipped the name text entirely once
       this button needed to hold icon + name + chevron. */
    width: auto !important;
    height: 40px !important;
    padding: 0 10px !important;
    border-radius: 20px !important;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}
.tr-header__account-trigger:hover {
    background: #fff5f2 !important;
}

.tr-header__account-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1a1a2e;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tr-header__account-chevron {
    color: #6b7280;
    transition: transform 0.15s ease;
}

.tr-header__account-trigger[aria-expanded="true"] .tr-header__account-chevron {
    transform: rotate(180deg);
}

.tr-header__account-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 220px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.12);
    padding: 8px;
    z-index: 200;
}

.tr-header__account-dropdown.is-open {
    display: block;
    animation: tr-slide-down 0.2s ease;
}

.tr-header__account-dropdown__item {
    display: block;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #1a1a2e;
    text-decoration: none;
    white-space: nowrap;
}

.tr-header__account-dropdown__item:hover {
    background: #f5f6f8;
    color: var(--tr-color-primary, #e76f51);
}

@media (max-width: 991px) {
    .tr-header__account-name,
    .tr-header__account-chevron {
        display: none;
    }
}

/* ============================================================
   § — MY ACCOUNT DASHBOARD: ICON TILE GRID
   ============================================================ */

.tr-account-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
    margin-top: 24px;
}

.tr-account-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px 12px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    text-decoration: none;
    color: #1a1a2e;
    text-align: center;
    position: relative;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.tr-account-tile:hover {
    border-color: var(--tr-color-primary, #e76f51);
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
    transform: translateY(-2px);
    color: #1a1a2e;
}

.tr-account-tile__icon {
    font-size: 2rem;
    line-height: 1;
}

.tr-account-tile__label {
    font-size: 0.9rem;
    font-weight: 600;
}

.tr-account-tile--disabled {
    cursor: not-allowed;
    opacity: 0.55;
}
.tr-account-tile--disabled:hover {
    border-color: #e5e7eb;
    box-shadow: none;
    transform: none;
}

.tr-account-tile__badge {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    background: #f5f6f8;
    padding: 2px 8px;
    border-radius: 20px;
}

/* Remove the avatar/name/order-count block above the My Account sidebar
   — it can't be cleanly unhooked from PHP (TR_Buyer_Dashboard isn't a
   singleton, so there's no stored object reference to target with
   remove_action from outside the plugin), so this hides it instead.
   Combined with hiding the page-hero above it (functions.php,
   is_account_page() check), the sidebar now sits right below the
   header with no leftover gap. */
body.woocommerce-account .tr-buyer-account-header {
    display: none !important;
}

/* Sidebar account nav removed (see woocommerce/myaccount/my-account.php
   override) since it duplicated the header's account dropdown — let the
   content column fill the full width instead of leaving dead space where
   the nav used to sit. */
body.woocommerce-account .tr-buyer-myaccount__content--full {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
}