/*
 * Things Remembered — Master Theme Stylesheet
 * Phase 2: Global Theme & Styling Overhaul
 * Stack: Laravel · Blade · Bootstrap 5
 * --------------------------------------------------------
 * Sections:
 *   1. CSS Custom Properties (Design Tokens)
 *   2. Base / Reset Overrides
 *   3. Typography System
 *   4. Section Title Decorative Style
 *   5. Product Card Component
 *   6. Category Card Component
 *   7. Sidebar Component
 *   8. Badge Styles
 *   9. Button Styles
 *  10. Coupon Card Style
 *  11. Breadcrumb Style
 *  12. Utility classes
 * --------------------------------------------------------
 */

/* =============================================================
   1. CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================================= */
:root {
    /* ========== PAGE BACKGROUNDS ========== */
    --tr-bg-cream:         #FAF6F1;   /* Main page background                         */
    --tr-bg-light:         #F5EDE4;   /* Sidebar bg, section headers, cards alt bg    */
    --tr-bg-white:         #FFFFFF;   /* Card backgrounds, content areas              */
    --tr-bg-warm:          #F8F2EB;   /* Subtle warm sections                         */

    /* ========== TEXT COLORS ========== */
    --tr-text-heading:     #2C1810;   /* H1–H3 headings — deep chocolate brown        */
    --tr-text-body:        #3B2314;   /* Body text — dark brown                       */
    --tr-text-muted:       #8B7355;   /* Secondary/caption text — warm gray-brown     */
    --tr-text-light:       #A89279;   /* Placeholders, disabled text                  */
    --tr-text-white:       #FFFFFF;   /* Text on dark backgrounds                     */

    /* ========== ACCENT COLORS ========== */
    --tr-accent-brown:     #8B4513;   /* Section title text, sidebar active, links    */
    --tr-accent-gold:      #C8A96E;   /* Decorative lines, dividers, borders          */
    --tr-accent-bronze:    #B8860B;   /* Hover states, focus rings                    */
    --tr-accent-gold-dark: #A0884E;   /* Darker gold for text on light bg             */

    /* ========== BUTTON COLORS ========== */
    --tr-btn-primary-bg:   #3B3B3B;   /* "Shop Now" button — charcoal dark            */
    --tr-btn-primary-hover:#2A2A2A;   /* Button hover — darker charcoal               */
    --tr-btn-primary-text: #FFFFFF;   /* Button text — white                          */
    --tr-btn-outline-border:#8B4513;  /* Outline button border — brown                */
    --tr-btn-outline-text: #8B4513;   /* Outline button text — brown                  */
    --tr-btn-outline-hover-bg:#8B4513;/* Outline hover fill                           */

    /* ========== SALE / DEAL COLORS ========== */
    --tr-sale-red:         #8B0000;   /* "SALE" badge bg, sale text                   */
    --tr-sale-banner-bg:   #6B0F1A;   /* Sale banner background start                 */
    --tr-sale-banner-end:  #8B1A1A;   /* Sale banner gradient end                     */
    --tr-sale-banner-text: #FFD700;   /* Gold text on sale banner                     */
    --tr-discount-badge-bg:#D4AF37;   /* "20%" badge background — gold                */
    --tr-discount-badge-text:#FFFFFF; /* Badge text — white                           */
    --tr-discount-price:   #2E7D32;   /* Sale price text — green                      */
    --tr-original-price:   #999999;   /* Strikethrough original price — gray          */

    /* ========== BORDERS & SHADOWS ========== */
    --tr-border:           #E8E0D8;
    --tr-border-light:     #F0EBE3;
    --tr-border-sidebar:   #E8E0D8;
    --tr-shadow-card:      0 2px 12px rgba(44, 24, 16, 0.08);
    --tr-shadow-card-hover:0 8px 24px rgba(44, 24, 16, 0.12);
    --tr-shadow-header:    0 2px 8px rgba(44, 24, 16, 0.06);

    /* ========== SIDEBAR ========== */
    --tr-sidebar-bg:       #FAF6F1;
    --tr-sidebar-hover:    #F0EBE3;
    --tr-sidebar-active:   #E8DFD3;
    --tr-sidebar-title-bg: #F5EDE4;

    /* ========== COUPON CARDS ========== */
    --tr-coupon-bg:        #F5EDE4;
    --tr-coupon-border:    #D4C5B2;
    --tr-coupon-code-bg:   #E8DFD3;

    /* ========== COMING SOON BADGE ========== */
    --tr-coming-soon-bg:   rgba(139, 69, 19, 0.85);
    --tr-coming-soon-text: #FFFFFF;
}

/* =============================================================
   2. BASE / RESET OVERRIDES
   ============================================================= */

/* Apply warm cream background to the full page */
body.things-remembered-theme {
    background-color: var(--tr-bg-cream) !important;
    color: var(--tr-text-body);
    font-family: 'Inter', sans-serif;
}

body.things-remembered-theme a {
    color: var(--tr-accent-brown);
    text-decoration: none;
    transition: color 0.2s;
}

body.things-remembered-theme a:hover {
    color: var(--tr-accent-bronze);
}

/* =============================================================
   3. TYPOGRAPHY SYSTEM
   ============================================================= */

/* Brand logo text */
.tr-logo-text {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 28px;
    color: var(--tr-text-heading);
    letter-spacing: 0.5px;
}

/* Hero heading — "Perfect Gifts" */
.tr-hero-heading {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 600;
    font-size: 52px;
    color: var(--tr-text-heading);
    line-height: 1.15;
}

/* Hero subheading — "for Every Occasion" */
.tr-hero-subheading {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 28px;
    color: var(--tr-text-body);
    letter-spacing: 0.3px;
}

/* Page titles — "Shop", "Categories", "Deals" */
.tr-page-title {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 32px;
    color: var(--tr-text-heading);
}

/* Subsection headings — "Gifts For Her", "Discounted Items" */
.tr-subsection-heading {
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    font-size: 22px;
    color: var(--tr-text-heading);
}

/* Navigation links */
.tr-nav-link {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 15px;
    color: var(--tr-text-body);
    letter-spacing: 0.3px;
}

/* Body text */
.tr-body-text {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 15px;
    color: var(--tr-text-body);
}

/* Responsive hero heading */
@media (max-width: 767.98px) {
    .tr-hero-heading    { font-size: 32px; }
    .tr-hero-subheading { font-size: 18px; }
}

/* =============================================================
   4. SECTION TITLE DECORATIVE STYLE
   — Centered italic heading with gold lines either side —
   e.g.:  ────────── Personalized Products ──────────
   ============================================================= */

.tr-section-title {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 28px;
    color: var(--tr-accent-brown);
    text-align: center;
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 48px 0 32px;
    line-height: 1.3;
}

.tr-section-title::before,
.tr-section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--tr-accent-gold);
}

/* =============================================================
   5. PRODUCT CARD COMPONENT
   Used: homepage, shop, categories, deals, new arrivals
   ============================================================= */

.tr-product-card {
    background: var(--tr-bg-white);
    border: 1px solid var(--tr-border);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
    display: block;
    position: relative; /* needed for badge positioning */
}

.tr-product-card:hover {
    box-shadow: var(--tr-shadow-card-hover);
    transform: translateY(-4px);
    border-color: var(--tr-accent-gold);
    text-decoration: none;
}

.tr-product-card .card-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

.tr-product-card .card-body {
    padding: 14px 16px;
    text-align: center;
}

.tr-product-card .product-name {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 15px;
    color: var(--tr-text-heading);
    margin: 0;
    line-height: 1.4;
}

.tr-product-card .product-price {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: var(--tr-accent-brown);
    margin-top: 6px;
}

.tr-product-card .product-price .original {
    font-weight: 400;
    font-size: 14px;
    color: var(--tr-original-price);
    text-decoration: line-through;
    margin-left: 8px;
}

/* Coming-soon overlay — entire card dimmed */
.tr-product-card.is-coming-soon {
    pointer-events: none;
    opacity: 0.85;
}

/* =============================================================
   6. CATEGORY CARD COMPONENT
   Used: homepage category cards, categories page grid
   ============================================================= */

.tr-category-card {
    background: var(--tr-bg-white);
    border: 1px solid var(--tr-border);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    text-decoration: none;
    display: block;
}

.tr-category-card:hover {
    box-shadow: var(--tr-shadow-card-hover);
    transform: translateY(-4px);
    text-decoration: none;
}

.tr-category-card .card-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.tr-category-card .card-label {
    padding: 14px;
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: var(--tr-text-heading);
}

/* =============================================================
   7. SIDEBAR COMPONENT
   Used: Shop page (PDF p3) and Categories page (PDF p4)
   ============================================================= */

.tr-sidebar {
    background: var(--tr-bg-white);
    border: 1px solid var(--tr-border);
    border-radius: 12px;
    overflow: hidden;
    position: sticky;
    top: 100px;
}

.tr-sidebar-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--tr-text-heading);
    padding: 14px 16px;
    background: var(--tr-sidebar-title-bg);
    border-bottom: 1px solid var(--tr-border);
    margin: 0;
}

.tr-sidebar-list {
    list-style: none;
    padding: 8px;
    margin: 0;
}

.tr-sidebar-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--tr-border-sidebar);
    border-radius: 8px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    color: var(--tr-text-body);
}

.tr-sidebar-item:hover {
    background: var(--tr-sidebar-hover);
    border-color: var(--tr-accent-gold);
    color: var(--tr-text-body);
    text-decoration: none;
}

.tr-sidebar-item.active {
    background: var(--tr-sidebar-active);
    border-color: var(--tr-accent-brown);
}

.tr-sidebar-item img {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}

.tr-sidebar-item .name {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: var(--tr-accent-brown);
}

/* =============================================================
   8. BADGE STYLES
   ============================================================= */

/* Gold discount percentage badge — e.g. "20%" */
.tr-badge-discount {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    background: var(--tr-discount-badge-bg);
    color: var(--tr-discount-badge-text);
    padding: 4px 10px;
    border-radius: 4px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.5px;
}

/* Dark red SALE badge */
.tr-badge-sale {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    background: var(--tr-sale-red);
    color: #fff;
    padding: 4px 12px;
    border-radius: 4px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Semi-transparent brown COMING SOON badge */
.tr-badge-coming-soon {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    background: var(--tr-coming-soon-bg);
    color: var(--tr-coming-soon-text);
    padding: 4px 10px;
    border-radius: 4px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Brown NEW badge */
.tr-badge-new {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    background: var(--tr-accent-brown);
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* =============================================================
   9. BUTTON STYLES
   ============================================================= */

/* Primary CTA — "Shop Now" charcoal button */
/* .tr-btn  — the canonical gold CTA button used site-wide */
.tr-btn,
.tr-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--tr-gold, #b3915a);
    color: #fff;
    border: 2px solid var(--tr-gold, #b3915a);
    padding: 12px 28px;
    border-radius: 2px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    line-height: 1;
    white-space: nowrap;
}

.tr-btn:hover,
.tr-btn:focus,
.tr-btn-primary:hover,
.tr-btn-primary:focus {
    background: #9a7a47;
    border-color: #9a7a47;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(179, 145, 90, 0.35);
    text-decoration: none;
}

.tr-btn:disabled,
.tr-btn-primary:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Outline button — ghost style */
.tr-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: transparent;
    color: var(--tr-gold, #b3915a);
    border: 2px solid var(--tr-gold, #b3915a);
    padding: 10px 24px;
    border-radius: 2px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
    line-height: 1;
    white-space: nowrap;
}

.tr-btn-outline:hover,
.tr-btn-outline:focus {
    background: var(--tr-gold, #b3915a);
    color: #fff;
    transform: translateY(-1px);
    text-decoration: none;
}

.tr-btn-outline:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Copy Code button for coupon cards */
.tr-btn-copy {
    background: var(--tr-coupon-code-bg);
    color: var(--tr-text-body);
    border: 1px solid var(--tr-coupon-border);
    padding: 6px 16px;
    border-radius: 4px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.3px;
}

.tr-btn-copy:hover {
    background: var(--tr-accent-gold);
    border-color: var(--tr-accent-gold);
    color: #fff;
}

/* Copied state feedback */
.tr-btn-copy.copied {
    background: var(--tr-discount-price);
    border-color: var(--tr-discount-price);
    color: #fff;
}

/* =============================================================
   10. COUPON CARD STYLE
   Used: Deals page "Coupons & Vouchers" section (PDF p5)
   ============================================================= */

.tr-coupon-card {
    background: var(--tr-coupon-bg);
    border: 2px dashed var(--tr-coupon-border);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    transition: border-color 0.2s;
}

.tr-coupon-card:hover {
    border-color: var(--tr-accent-brown);
}

.tr-coupon-card .discount-text {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 20px;
    color: var(--tr-sale-red);
    margin-bottom: 4px;
    line-height: 1.2;
}

.tr-coupon-card .condition-text {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: var(--tr-text-muted);
    margin-bottom: 12px;
}

.tr-coupon-card .code-display {
    display: inline-block;
    background: var(--tr-coupon-code-bg);
    padding: 6px 16px;
    border-radius: 4px;
    font-family: 'Courier New', 'Courier', monospace;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 2px;
    color: var(--tr-text-heading);
    margin-bottom: 12px;
}

/* =============================================================
   11. BREADCRUMB STYLE
   ============================================================= */

.tr-breadcrumb {
    background: var(--tr-bg-light);
    padding: 10px 0;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--tr-border-light);
}

.tr-breadcrumb a {
    color: var(--tr-text-muted);
    text-decoration: none;
}

.tr-breadcrumb a:hover {
    color: var(--tr-accent-brown);
}

.tr-breadcrumb .separator {
    color: var(--tr-text-muted);
    margin: 0 8px;
}

.tr-breadcrumb .current {
    color: var(--tr-text-body);
    font-weight: 500;
}

/* =============================================================
   12. UTILITY CLASSES
   ============================================================= */

/* Warm section wrapper */
.tr-section {
    background: var(--tr-bg-cream);
    padding: 40px 0;
}

.tr-section-warm {
    background: var(--tr-bg-warm);
    padding: 40px 0;
}

/* Gold decorative divider line */
.tr-divider {
    border: none;
    border-top: 1px solid var(--tr-accent-gold);
    margin: 32px 0;
    opacity: 0.6;
}

/* Price helpers */
.tr-price {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: var(--tr-accent-brown);
}

.tr-price-original {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: var(--tr-original-price);
    text-decoration: line-through;
    margin-left: 6px;
}

.tr-price-sale {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: var(--tr-discount-price);
}

/* Text color helpers */
.tr-text-heading { color: var(--tr-text-heading); }
.tr-text-body    { color: var(--tr-text-body); }
.tr-text-muted   { color: var(--tr-text-muted); }
.tr-text-brown   { color: var(--tr-accent-brown); }
.tr-text-gold    { color: var(--tr-accent-gold); }

/* Background helpers */
.tr-bg-cream  { background-color: var(--tr-bg-cream); }
.tr-bg-light  { background-color: var(--tr-bg-light); }
.tr-bg-white  { background-color: var(--tr-bg-white); }
.tr-bg-warm   { background-color: var(--tr-bg-warm); }

/* Card shadow */
.tr-shadow { box-shadow: var(--tr-shadow-card); }
.tr-shadow-hover:hover { box-shadow: var(--tr-shadow-card-hover); }

/* Rounded card border */
.tr-card-border {
    border: 1px solid var(--tr-border);
    border-radius: 12px;
}

/* =============================================================
   13. NAVIGATION (Phase 3)
   ============================================================= */

/* --- Main nav bar --- */
.tr-main-nav {
    background: var(--tr-bg-white);
    border-top: 1px solid var(--tr-border-light);
    border-bottom: 1px solid var(--tr-border);
}

.tr-nav-wrapper {
    position: relative;
}

/* --- Nav list --- */
.tr-nav-list {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 0;
    margin: 0;
    padding: 0;
}

.tr-nav-list > li > a {
    display: block;
    padding: 14px 20px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 15px;
    color: var(--tr-text-body);
    text-decoration: none;
    letter-spacing: 0.3px;
    transition: color 0.2s;
    position: relative;
}

.tr-nav-list > li.active > a,
.tr-nav-list > li:hover > a {
    color: var(--tr-accent-brown);
}

.tr-nav-list > li.active > a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20px;
    right: 20px;
    height: 2px;
    background: var(--tr-accent-brown);
    border-radius: 1px;
}

/* --- Standard dropdown --- */
.tr-dropdown {
    position: relative;
}

.tr-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: var(--tr-bg-white);
    border: 1px solid var(--tr-border);
    border-top: 2px solid var(--tr-accent-brown);
    border-radius: 0 0 8px 8px;
    box-shadow: var(--tr-shadow-card-hover);
    list-style: none;
    padding: 6px 0;
    margin: 0;
    z-index: 1000;
}

.tr-dropdown:hover > .tr-dropdown-menu {
    display: block;
}

.tr-dropdown-menu li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--tr-text-body);
    text-decoration: none;
    transition: background 0.15s;
}

.tr-dropdown-menu li a:hover {
    background: var(--tr-bg-light);
    color: var(--tr-accent-brown);
}

/* --- Mega menu (Categories) --- */
.tr-mega-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 560px;
    background: var(--tr-bg-white);
    border: 1px solid var(--tr-border);
    border-top: 2px solid var(--tr-accent-brown);
    border-radius: 0 0 12px 12px;
    box-shadow: var(--tr-shadow-card-hover);
    padding: 20px;
    z-index: 1000;
}

.tr-mega:hover > .tr-mega-menu {
    display: block;
}

.tr-mega-heading {
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    font-size: 14px;
    color: var(--tr-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--tr-border-light);
}

.tr-mega-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    margin-bottom: 14px;
}

.tr-mega-item {
    display: block;
    padding: 8px 12px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--tr-text-body);
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.15s;
}

.tr-mega-item:hover {
    background: var(--tr-bg-light);
    color: var(--tr-accent-brown);
}

.tr-mega-footer {
    padding-top: 10px;
    border-top: 1px solid var(--tr-border-light);
    text-align: center;
}

.tr-mega-footer a {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--tr-accent-brown);
    text-decoration: none;
    letter-spacing: 0.3px;
}

.tr-mega-footer a:hover {
    color: var(--tr-accent-bronze);
}

/* --- Mobile nav links --- */
.tr-mobile-nav-link {
    display: block;
    padding: 10px 16px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 15px;
    color: var(--tr-text-body);
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.15s;
    border: 1px solid var(--tr-border);
    background: var(--tr-bg-white);
}

.tr-mobile-nav-link:hover,
.tr-mobile-nav-link.active {
    background: var(--tr-bg-light);
    color: var(--tr-accent-brown);
    border-color: var(--tr-accent-gold);
    text-decoration: none;
}

.tr-mobile-nav-sub {
    display: block;
    padding: 7px 12px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: var(--tr-text-muted);
    text-decoration: none;
    border-radius: 4px;
}

.tr-mobile-nav-sub:hover {
    color: var(--tr-accent-brown);
    background: var(--tr-bg-light);
    text-decoration: none;
}

/* --- Search bar restyle (headersticky) --- */
.top-header .search-box .input-group .form-control {
    border: 1px solid var(--tr-border) !important;
    border-radius: 25px 0 0 25px !important;
    background: var(--tr-bg-white) !important;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: var(--tr-text-body);
    padding-left: 20px;
}

.top-header .search-box .input-group .form-control::placeholder {
    color: var(--tr-text-light);
}

.top-header .search-box .input-group .btn {
    border: 1px solid var(--tr-border) !important;
    border-left: none !important;
    border-radius: 0 25px 25px 0 !important;
    background: var(--tr-bg-white) !important;
    color: var(--tr-accent-brown) !important;
}

.top-header .search-box .input-group .btn:hover {
    background: var(--tr-bg-light) !important;
}

/* Sticky header white background */
.top-nav.top-header {
    background: var(--tr-bg-white) !important;
    box-shadow: var(--tr-shadow-header) !important;
}

/* =============================================================
   14. HOMEPAGE — ENHANCED VISUAL COMPONENTS
   ============================================================= */

/* ---------- Hero Section ---------- */
.tr-hero-section {
    position: relative;
    overflow: hidden;
}

/* Decorative dot-grid pattern overlay (pure CSS) */
.tr-hero-pattern {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(200,169,110,0.18) 1px, transparent 1px);
    background-size: 28px 28px;
    z-index: 1;
    pointer-events: none;
}

/* Floating decorative circles */
.tr-hero-circle {
    position: absolute;
    border-radius: 50%;
    opacity: 0.12;
    pointer-events: none;
}

/* Feature strip below hero */
.tr-feature-strip {
    background: var(--tr-text-heading);
    color: #fff;
    padding: 14px 0;
}

.tr-feature-item {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    color: rgba(255,255,255,0.92);
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 500;
}

.tr-feature-item svg,
.tr-feature-item .tr-icon {
    color: var(--tr-accent-gold);
    flex-shrink: 0;
}

.tr-feature-divider {
    width: 1px;
    height: 28px;
    background: rgba(255,255,255,0.2);
    margin: 0 auto;
}

/* ---------- Occasion Cards (category-cards section) ---------- */
.tr-occasion-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

@media (max-width: 767.98px) {
    .tr-occasion-grid { grid-template-columns: 1fr; }
}

.tr-occasion-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 20px rgba(44,24,16,0.10);
}

.tr-occasion-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 36px rgba(44,24,16,0.18);
    text-decoration: none;
}

.tr-occasion-card__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease;
}

.tr-occasion-card:hover .tr-occasion-card__bg {
    transform: scale(1.06);
}

.tr-occasion-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(44,24,16,0.05) 0%,
        rgba(44,24,16,0.55) 60%,
        rgba(44,24,16,0.82) 100%
    );
}

.tr-occasion-card__emoji {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 2.4rem;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35));
    z-index: 2;
}

.tr-occasion-card__body {
    position: relative;
    z-index: 2;
    padding: 20px 22px;
}

.tr-occasion-card__name {
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
    line-height: 1.2;
}

.tr-occasion-card__sub {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tr-accent-gold);
    font-weight: 500;
}

/* ---------- Homepage Product Cards ---------- */
.tr-hp-product-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 10px rgba(44,24,16,0.07);
    border: 1px solid var(--tr-border-light);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.tr-hp-product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 32px rgba(44,24,16,0.14);
    text-decoration: none;
}

.tr-hp-product-card__image-wrap {
    position: relative;
    overflow: hidden;
    height: 220px;
}

.tr-hp-product-card__image-wrap img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.tr-hp-product-card:hover .tr-hp-product-card__image-wrap img {
    transform: scale(1.06);
}

.tr-hp-product-card__badges {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 2;
}

.tr-hp-product-card__wishlist {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    transition: background 0.2s, transform 0.2s;
    color: var(--tr-accent-brown);
    font-size: 0.95rem;
}

.tr-hp-product-card__wishlist:hover {
    background: var(--tr-accent-gold);
    color: #fff;
    transform: scale(1.1);
}

.tr-hp-product-card__body {
    padding: 12px 14px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.tr-hp-product-card__name {
    font-family: 'Playfair Display', serif;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--tr-text-heading);
    line-height: 1.3;
    margin-bottom: 4px;
}

.tr-hp-product-card__price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: auto;
    padding-top: 10px;
}

.tr-hp-product-card__price .current {
    font-family: 'Inter', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--tr-accent-brown);
}

.tr-hp-product-card__price .original {
    font-size: 0.88rem;
    color: var(--tr-original-price);
    text-decoration: line-through;
}

.tr-hp-product-card__cta {
    display: inline-block;
    margin-top: 12px;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--tr-accent-brown);
    border-bottom: 1px solid var(--tr-accent-gold);
    padding-bottom: 2px;
    transition: color 0.2s, border-color 0.2s;
}

.tr-hp-product-card__cta:hover {
    color: var(--tr-accent-bronze);
    border-color: var(--tr-accent-bronze);
    text-decoration: none;
}

/* ---------- Sale Banner Shimmer ---------- */
@keyframes tr-shimmer {
    0%   { background-position: -800px 0; }
    100% { background-position: 800px 0; }
}

.tr-sale-banner-section {
    position: relative;
    overflow: hidden;
}

.tr-sale-banner-shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 215, 0, 0.08) 40%,
        rgba(255, 215, 0, 0.18) 50%,
        rgba(255, 215, 0, 0.08) 60%,
        transparent 100%
    );
    background-size: 800px 100%;
    animation: tr-shimmer 3s infinite linear;
    pointer-events: none;
}

/* ---------- Section background alternation---------- */
.tr-section-alt { background: var(--tr-bg-warm); }
.tr-section-light { background: var(--tr-bg-cream); }
.tr-section-white { background: var(--tr-bg-white); }

/* ============================================================
   SECTION 15 — SHOP PAGE & SHARED SIDEBAR
   ============================================================ */

/* ----- Page title ----- */
.tr-page-title {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--tr-text-heading);
    letter-spacing: 0;
    margin-bottom: 0;
}

/* ----- Sidebar ----- */
.tr-sidebar {
    background: var(--tr-sidebar-bg);
    border: 1px solid var(--tr-border-light);
    border-radius: 10px;
    overflow: hidden;
    position: sticky;
    top: 90px;
}

.tr-sidebar-title {
    background: var(--tr-sidebar-title-bg);
    font-family: 'Playfair Display', serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tr-text-heading);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--tr-border);
}

.tr-sidebar-link {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 16px;
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--tr-text-body);
    text-decoration: none;
    border-bottom: 1px solid var(--tr-border-light);
    transition: background 0.15s, color 0.15s, padding-left 0.15s;
}

.tr-sidebar-link:last-child {
    border-bottom: none;
}

.tr-sidebar-link:hover,
.tr-sidebar-link.active {
    background: var(--tr-sidebar-hover);
    color: var(--tr-accent-brown);
    padding-left: 20px;
    text-decoration: none;
}

.tr-sidebar-link.active {
    background: var(--tr-sidebar-active);
    font-weight: 600;
}

/* ----- Shop section heading bar ----- */
.tr-shop-section-bar {
    background: var(--tr-bg-light);
    padding: 10px 18px;
    border-left: 4px solid var(--tr-accent-brown);
    border-radius: 0 6px 6px 0;
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--tr-text-heading);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.tr-shop-section-more {
    margin-left: auto;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tr-accent-brown);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-bottom: 1px solid var(--tr-accent-gold);
    padding-bottom: 1px;
    transition: color 0.15s;
}

.tr-shop-section-more:hover {
    color: var(--tr-accent-bronze);
    text-decoration: none;
}

/* Highlight flash when sidebar link clicked */
@keyframes tr-section-flash {
    0%   { background: rgba(212,175,55,0.15); }
    100% { background: transparent; }
}

.tr-shop-section--highlight {
    animation: tr-section-flash 1.2s ease forwards;
    border-radius: 6px;
}

/* ============================================================
   SECTION 16 — FILTER BAR & CATEGORY CARDS
   ============================================================ */

/* ----- Filter bar ----- */
.tr-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    background: var(--tr-bg-cream);
    border: 1px solid var(--tr-border-light);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 20px;
}

.tr-filter-bar__search {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid var(--tr-border);
    border-radius: 20px;
    padding: 5px 12px;
    flex: 1;
    min-width: 160px;
}

.tr-filter-input {
    border: none;
    outline: none;
    background: transparent;
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    color: var(--tr-text-body);
    width: 100%;
}

.tr-filter-bar__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tr-filter-pill {
    padding: 4px 12px;
    border-radius: 20px;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid var(--tr-border);
    color: var(--tr-text-body);
    background: #fff;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.tr-filter-pill:hover,
.tr-filter-pill.active {
    background: var(--tr-accent-brown);
    color: #fff;
    border-color: var(--tr-accent-brown);
    text-decoration: none;
}

.tr-filter-bar__price {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tr-filter-bar__price .tr-filter-input {
    background: #fff;
    border: 1px solid var(--tr-border);
    border-radius: 6px;
    padding: 4px 8px;
    width: 80px !important;
    text-align: center;
}

.tr-filter-bar__sort {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tr-filter-select {
    border: 1px solid var(--tr-border);
    border-radius: 6px;
    padding: 5px 10px;
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    color: var(--tr-text-body);
    background: #fff;
    cursor: pointer;
    outline: none;
}

.tr-filter-clear {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    color: var(--tr-text-muted);
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}

.tr-filter-clear:hover {
    color: var(--tr-accent-brown);
    background: var(--tr-bg-light);
    text-decoration: none;
}

/* ----- Category card ----- */
.tr-category-card {
    background: #fff;
    border: 1px solid var(--tr-border-light);
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s;
}

.tr-category-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(44,24,16,0.12);
    border-color: var(--tr-accent-gold);
}

.tr-category-card__image-wrap {
    height: 160px;
    overflow: hidden;
}

.tr-category-card__image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
    display: block;
}

.tr-category-card:hover .tr-category-card__image-wrap img {
    transform: scale(1.05);
}

.tr-category-card__body {
    padding: 12px 14px 14px;
    border-top: 1px solid var(--tr-border-light);
}

.tr-category-card__name {
    font-family: 'Playfair Display', serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--tr-text-heading);
    line-height: 1.3;
}

.tr-category-card__sub {
    font-size: 0.75rem;
    color: var(--tr-text-muted);
    margin: 4px 0 0;
    line-height: 1.4;
}

/* ================================================================
   Section 17 — AUTH PAGES (Login / Register / Forgot)
   ================================================================ */
.tr-auth-wrap {
    min-height: 70vh;
    display: flex;
    align-items: center;
    padding: 60px 0;
}
.tr-auth-card {
    background: #fff;
    border: 1px solid var(--tr-border-light);
    border-radius: 2px;
    padding: 40px;
    max-width: 440px;
    margin: 0 auto;
    box-shadow: 0 4px 28px rgba(0,0,0,0.06);
}
.tr-auth-card__logo {
    text-align: center;
    margin-bottom: 28px;
}
.tr-auth-card__logo span {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--tr-gold);
    letter-spacing: 0.08em;
}
.tr-auth-card__title {
    font-family: 'Playfair Display', serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--tr-text-heading);
    text-align: center;
    margin-bottom: 6px;
}
.tr-auth-card__sub {
    font-size: 0.82rem;
    color: var(--tr-text-muted);
    text-align: center;
    margin-bottom: 28px;
}
.tr-form-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--tr-text-body);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 5px;
}
.tr-form-control {
    border: 1px solid var(--tr-border-light);
    border-radius: 2px;
    padding: 10px 14px;
    font-size: 0.88rem;
    color: var(--tr-text-body);
    background: #fafaf8;
    width: 100%;
    outline: none;
    transition: border-color 0.2s;
}
.tr-form-control:focus {
    border-color: var(--tr-gold);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(179,145,90,0.1);
}
.tr-form-control.is-invalid { border-color: #dc3545; }
.tr-auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    color: var(--tr-text-muted);
    font-size: 0.77rem;
}
.tr-auth-divider::before,
.tr-auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--tr-border-light);
}
.tr-auth-link {
    color: var(--tr-gold);
    font-size: 0.82rem;
    text-decoration: none;
}
.tr-auth-link:hover { text-decoration: underline; }

/* ================================================================
   Section 18 — CART PAGE
   ================================================================ */
.tr-cart-table {
    width: 100%;
    border-collapse: collapse;
}
.tr-cart-table th {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tr-text-muted);
    border-bottom: 2px solid var(--tr-border-light);
    padding: 10px 12px;
}
.tr-cart-table td {
    padding: 16px 12px;
    border-bottom: 1px solid var(--tr-border-light);
    vertical-align: middle;
    font-size: 0.88rem;
}
.tr-cart-table tbody tr:last-child td { border-bottom: none; }
.tr-cart-img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 2px;
    border: 1px solid var(--tr-border-light);
}
.tr-qty-control {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--tr-border-light);
    border-radius: 2px;
    overflow: hidden;
}
.tr-qty-btn {
    background: none;
    border: none;
    padding: 4px 10px;
    font-size: 1rem;
    color: var(--tr-text-body);
    cursor: pointer;
    transition: background 0.15s;
    line-height: 1;
}
.tr-qty-btn:hover { background: var(--tr-cream); }
.tr-qty-val {
    padding: 4px 12px;
    font-size: 0.88rem;
    min-width: 32px;
    text-align: center;
    border-left: 1px solid var(--tr-border-light);
    border-right: 1px solid var(--tr-border-light);
}
.tr-cart-summary {
    background: #fff;
    border: 1px solid var(--tr-border-light);
    border-radius: 2px;
    padding: 26px;
}
.tr-cart-summary__title {
    font-family: 'Playfair Display', serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--tr-text-heading);
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--tr-border-light);
}
.tr-cart-summary__row {
    display: flex;
    justify-content: space-between;
    font-size: 0.88rem;
    margin-bottom: 10px;
    color: var(--tr-text-body);
}
.tr-cart-summary__row.total {
    font-weight: 700;
    font-size: 1rem;
    color: var(--tr-text-heading);
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--tr-border-light);
}
.tr-coupon-row {
    display: flex;
    gap: 8px;
    margin: 14px 0;
}
.tr-coupon-input {
    flex: 1;
}

/* ================================================================
   Section 19 — CHECKOUT & PAYMENT PAGES
   ================================================================ */
.tr-checkout-step {
    background: #fff;
    border: 1px solid var(--tr-border-light);
    border-radius: 2px;
    padding: 24px;
    margin-bottom: 16px;
}
.tr-checkout-step__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--tr-border-light);
}
.tr-checkout-step__num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--tr-gold);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.tr-checkout-step__title {
    font-family: 'Playfair Display', serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--tr-text-heading);
    margin: 0;
}
.tr-address-card {
    border: 1px solid var(--tr-border-light);
    border-radius: 2px;
    padding: 14px 16px;
    cursor: pointer;
    transition: border-color 0.2s;
    position: relative;
}
.tr-address-card:has(input:checked),
.tr-address-card.selected {
    border-color: var(--tr-gold);
    background: rgba(179,145,90,0.04);
}
.tr-address-card__badge {
    font-size: 0.68rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--tr-gold);
    background: rgba(179,145,90,0.12);
    padding: 2px 8px;
    border-radius: 2px;
    display: inline-block;
    margin-bottom: 8px;
}
.tr-payment-method {
    border: 1px solid var(--tr-border-light);
    border-radius: 2px;
    padding: 14px 16px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color 0.2s;
}
.tr-payment-method:has(input:checked) {
    border-color: var(--tr-gold);
    background: rgba(179,145,90,0.04);
}
.tr-order-summary {
    background: #fff;
    border: 1px solid var(--tr-border-light);
    border-radius: 2px;
    padding: 22px;
    position: sticky;
    top: 80px;
}
.tr-order-summary__title {
    font-family: 'Playfair Display', serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--tr-text-heading);
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--tr-border-light);
}
.tr-order-summary__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--tr-border-light);
}
.tr-order-summary__img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 2px;
    flex-shrink: 0;
    border: 1px solid var(--tr-border-light);
}
.tr-order-summary__row {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    padding: 6px 0;
    color: var(--tr-text-body);
}
.tr-order-summary__row.total {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--tr-text-heading);
    border-top: 2px solid var(--tr-border-light);
    margin-top: 6px;
    padding-top: 10px;
}
.tr-success-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(179,145,90,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

/* ================================================================
   Section 20 — ACCOUNT / DASHBOARD PAGES
   ================================================================ */
.tr-account-layout {
    display: flex;
    gap: 28px;
    align-items: flex-start;
}
.tr-account-nav {
    width: 220px;
    flex-shrink: 0;
    background: #fff;
    border: 1px solid var(--tr-border-light);
    border-radius: 2px;
    padding: 8px 0;
    position: sticky;
    top: 80px;
}
.tr-account-nav__header {
    padding: 14px 18px 10px;
    border-bottom: 1px solid var(--tr-border-light);
    margin-bottom: 4px;
}
.tr-account-nav__name {
    font-family: 'Playfair Display', serif;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--tr-text-heading);
}
.tr-account-nav__email {
    font-size: 0.74rem;
    color: var(--tr-text-muted);
}
.tr-account-nav__link {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 18px;
    font-size: 0.84rem;
    color: var(--tr-text-body);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.tr-account-nav__link svg { width:15px; height:15px; flex-shrink:0; }
.tr-account-nav__link:hover,
.tr-account-nav__link.active {
    background: rgba(179,145,90,0.07);
    color: var(--tr-gold);
}
.tr-account-nav__link.active { font-weight: 600; }
.tr-account-main { flex: 1; min-width: 0; }
.tr-stat-card {
    background: #fff;
    border: 1px solid var(--tr-border-light);
    border-radius: 2px;
    padding: 22px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.tr-stat-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(179,145,90,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.tr-stat-card__icon svg { width:20px; height:20px; color: var(--tr-gold); }
.tr-stat-card__num {
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--tr-text-heading);
    line-height: 1;
}
.tr-stat-card__label {
    font-size: 0.78rem;
    color: var(--tr-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 2px;
}
.tr-account-card {
    background: #fff;
    border: 1px solid var(--tr-border-light);
    border-radius: 2px;
    padding: 22px;
    margin-bottom: 18px;
}
.tr-account-card__title {
    font-family: 'Playfair Display', serif;
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--tr-text-heading);
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--tr-border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.tr-order-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 110px 90px;
    gap: 12px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--tr-border-light);
    font-size: 0.85rem;
}
.tr-order-row:last-child { border-bottom: none; }
.tr-order-row th {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tr-text-muted);
    font-weight: 700;
}
.tr-status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 2px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.tr-status-badge.pending    { background: #fff3cd; color: #856404; }
.tr-status-badge.processing { background: #cff4fc; color: #055160; }
.tr-status-badge.shipped    { background: #d1ecf1; color: #0c5460; }
.tr-status-badge.delivered  { background: #d4edda; color: #155724; }
.tr-status-badge.cancelled  { background: #f8d7da; color: #721c24; }
.tr-status-badge.paid       { background: #d4edda; color: #155724; }
.tr-address-badge {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--tr-gold);
    background: rgba(179,145,90,0.1);
    padding: 2px 8px;
    border-radius: 2px;
}

/* ================================================================
   Section 21 — STATIC PAGES (About / Contact / FAQ)
   ================================================================ */
.tr-static-hero {
    background: var(--tr-cream);
    border-bottom: 1px solid var(--tr-border-light);
    padding: 60px 0 50px;
    text-align: center;
}
.tr-static-hero__title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.6rem;
    font-weight: 700;
    color: var(--tr-text-heading);
    margin-bottom: 10px;
}
.tr-static-hero__sub {
    font-size: 1rem;
    color: var(--tr-text-muted);
    max-width: 520px;
    margin: 0 auto;
}
.tr-static-divider {
    width: 48px;
    height: 2px;
    background: var(--tr-gold);
    margin: 16px auto 0;
}
.tr-value-card {
    text-align: center;
    padding: 28px 20px;
    border: 1px solid var(--tr-border-light);
    border-radius: 2px;
    background: #fff;
    transition: box-shadow 0.2s;
}
.tr-value-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.07); }
.tr-value-card__icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(179,145,90,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
}
.tr-value-card__icon svg { width:22px; height:22px; color: var(--tr-gold); }
.tr-faq-item {
    border: 1px solid var(--tr-border-light);
    border-radius: 2px;
    margin-bottom: 8px;
    overflow: hidden;
}
.tr-faq-item__q {
    padding: 16px 20px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--tr-text-heading);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    background: #fff;
    transition: background 0.15s;
}
.tr-faq-item__q:hover { background: var(--tr-cream); }
.tr-faq-item__q svg { flex-shrink:0; transition: transform 0.2s; }
.tr-faq-item.open .tr-faq-item__q svg { transform: rotate(180deg); }
.tr-faq-item__a {
    display: none;
    padding: 0 20px 16px;
    font-size: 0.87rem;
    color: var(--tr-text-body);
    line-height: 1.65;
    background: #fafaf8;
    border-top: 1px solid var(--tr-border-light);
}
.tr-faq-item.open .tr-faq-item__a { display: block; }
.tr-contact-card {
    text-align: center;
    padding: 30px 20px;
    border: 1px solid var(--tr-border-light);
    border-radius: 2px;
    background: #fff;
}
.tr-contact-card__icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(179,145,90,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
}
.tr-contact-card__icon svg { width:20px; height:20px; color: var(--tr-gold); }

/* responsive account nav */
@media (max-width: 767px) {
    .tr-account-nav { width: 100%; position: static; }
    .tr-account-layout { flex-direction: column; }
    .tr-order-row { grid-template-columns: 1fr 1fr; }
}

/* ─────────────────────────────────────────────────────────
   Section 22 — Product Detail Page
───────────────────────────────────────────────────────── */

/* qty input inside tr-qty-control */
input.tr-qty-val {
    width: 48px;
    border: none;
    background: transparent;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 700;
    outline: none;
    -moz-appearance: textfield;
    border-left: 1px solid var(--tr-border-light);
    border-right: 1px solid var(--tr-border-light);
    padding: 6px 4px;
    color: var(--tr-text-heading);
}
input.tr-qty-val::-webkit-inner-spin-button,
input.tr-qty-val::-webkit-outer-spin-button { -webkit-appearance: none; }

/* product desc tab buttons */
.tr-tab-btn { outline: none; }
.tr-tab-btn:hover { color: var(--tr-gold) !important; border-bottom-color: var(--tr-gold) !important; }

/* thumb buttons hover */
.tr-thumb-btn:hover { border-color: var(--tr-gold) !important; }

/* ─────────────────────────────────────────────────────────
   Section 25 — Loader Spinner (TR color override)
───────────────────────────────────────────────────────── */
.fullpage-loader span {
    background: var(--tr-gold, #b3915a) !important;
}

/* ─────────────────────────────────────────────────────────
   Section 25 — Loader Spinner (TR color override)
───────────────────────────────────────────────────────── */
.fullpage-loader span {
    background: var(--tr-gold, #b3915a) !important;
}