/* ==========================================================================
   Kalyani Gold Palace - Premium Luxury Stylesheet
   Inspired by Goldsmith, Djewno, and Malabar Gold
   ========================================================================== */

/* Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&family=Jost:wght@200;300;400;500;600;700&display=swap');

/* Variables */
:root {
    /* Color Palette - Royal Champagne Gold (Refined Luxury Tones) */
    --bg-primary: #fbf9f3;
    /* Luxury warm alabaster ivory */
    --bg-primary-rgb: 251, 249, 243;
    --bg-secondary: #f4eee1;
    /* Soft champagne gold cream */
    --bg-secondary-rgb: 244, 238, 225;
    --bg-tertiary: #e7dfcc;
    /* Warm luxury sand gold */

    --border-color: rgba(172, 131, 52, 0.20);
    /* Sleek gold-tinted borders */
    --border-solid: #dfd5c0;

    --text-primary: #1c1a16;
    /* Sophisticated dark bronze-charcoal */
    --text-secondary: #575249;
    /* Gold-tinted secondary text */
    --text-muted: #8d8578;

    --gold-primary: #ac8334;
    --gold-hover: #916c27;
    --gold-dark: #7a581e;
    --gold-light: #f5eedc;
    --gold-gradient: linear-gradient(135deg, #7a581e 0%, #f5eedc 50%, #ac8334 100%);

    --glass-bg: rgba(var(--bg-primary-rgb), 0.85);
    --glass-border: rgba(172, 131, 52, 0.15);
    --shadow-primary: rgba(172, 131, 52, 0.04);
    --shadow-glow: rgba(172, 131, 52, 0.04);

    --font-serif: "Cormorant Garamond", Georgia, serif;
    --font-sans: "Jost", sans-serif;

    --transition-smooth: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    --transition-quick: all 0.25s ease;
    --container-max-width: 1400px;
}

[data-theme="dark"] {
    /* Color Palette - Premium Charcoal & Liquid Gold */
    --bg-primary: #0a0908;
    /* Obsidian black with gold undertone */
    --bg-primary-rgb: 10, 9, 8;
    --bg-secondary: #12100e;
    /* Deep bronze charcoal */
    --bg-secondary-rgb: 18, 16, 14;
    --bg-tertiary: #1c1916;
    /* Soft warm charcoal */

    --border-color: rgba(197, 160, 89, 0.15);
    /* Thin gold-tinted borders */
    --border-solid: #222222;

    --text-primary: #f5f5f7;
    --text-secondary: #a1a1a6;
    --text-muted: #6e6e73;

    --gold-primary: #c5a059;
    --gold-hover: #b89047;
    --gold-dark: #8c6828;
    --gold-light: #e5cf9c;
    --gold-gradient: linear-gradient(135deg, #a67c32 0%, #e5cf9c 50%, #8c6828 100%);

    --glass-bg: rgba(var(--bg-primary-rgb), 0.8);
    --glass-border: rgba(197, 160, 89, 0.12);
    --shadow-primary: rgba(0, 0, 0, 0.6);
    --shadow-glow: rgba(197, 160, 89, 0.08);
}

/* Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    overflow-x: clip;
}

/* Responsive typography scaling - making font sizes larger on large screens */
@media (min-width: 1400px) {
    html {
        font-size: 17px;
    }
}

/* ==========================================================================
   Product Detail Page Styles (Eternal Solitaire Ring specific)
   ========================================================================== */
.breadcrumb-bar {
    background-color: var(--bg-secondary);
    padding: 14px 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.78rem;
    font-family: var(--font-sans);
    letter-spacing: 1px;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.breadcrumb-bar a {
    color: var(--text-muted);
    transition: var(--transition-quick);
}

.breadcrumb-bar a:hover {
    color: var(--gold-primary);
}

.breadcrumb-bar span {
    color: var(--gold-primary);
    font-weight: 500;
}

.product-detail-section {
    background-color: var(--bg-primary);
    padding: 60px 0;
    border-bottom: 1px solid var(--border-color);
}

.product-detail-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
}

/* Product Gallery */
.product-gallery-wrap {
    display: flex;
    flex-direction: column;
    gap: 15px;
    position: sticky;
    top: 130px;
    /* Offset for sticky header */
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

.main-image-container {
    width: 100%;
    aspect-ratio: 4/3;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--bg-secondary);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

.main-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.main-image-container:hover img {
    transform: scale(1.08);
}

.product-thumbnails {
    display: flex;
    gap: 12px;
}

.thumb-item {
    width: 75px;
    height: 75px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: var(--bg-secondary);
    cursor: pointer;
    overflow: hidden;
    padding: 2px;
    transition: var(--transition-quick);
}

.thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

.thumb-item:hover,
.thumb-item.active {
    border-color: var(--gold-primary);
    box-shadow: 0 4px 10px var(--shadow-glow);
}

/* Product Details Column */
.product-info-wrap {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.product-cat-tag {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--gold-primary);
}

.product-title {
    font-size: 2.5rem;
    line-height: 1.15;
    color: var(--text-primary);
    margin-top: -5px;
}

.product-rating-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: -10px;
}

.rating-stars {
    color: #e6b800;
    font-size: 0.85rem;
}

.rating-text {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    color: var(--text-muted);
}

.product-price-spec {
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    padding: 15px 0;
}

.curr-price {
    font-family: var(--font-sans);
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--gold-primary);
    display: block;
    line-height: 1;
}

.price-tax-label {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 4px;
    display: block;
}

.product-desc-short {
    font-size: 0.95rem;
    font-weight: 300;
    line-height: 1.65;
    color: var(--text-secondary);
}

.quick-specs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.spec-tile {
    border: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    border-radius: 4px;
}

.tile-label {
    font-family: var(--font-sans);
    font-size: 0.65rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.tile-val {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Size Selector */
.size-selector-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.size-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.size-label {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-primary);
}

.size-guide-link {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--gold-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: var(--transition-quick);
}

.size-guide-link:hover {
    color: var(--gold-hover);
}

.size-options {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.size-btn {
    width: 42px;
    height: 42px;
    border: 1px solid var(--border-color);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 4px;
    transition: var(--transition-quick);
}

.size-btn:hover {
    border-color: var(--gold-primary);
    color: var(--gold-primary);
}

.size-btn.active {
    background: var(--gold-gradient);
    border-color: var(--gold-primary);
    color: #000000;
    font-weight: 600;
    box-shadow: 0 4px 10px var(--shadow-glow);
}

/* Actions */
.product-actions-group {
    display: flex;
    gap: 15px;
    margin-top: 10px;
}

.add-to-bag-btn {
    flex: 1;
    font-size: 0.82rem;
    padding: 16px 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.wa-inquiry-btn {
    flex: 1;
    background: linear-gradient(135deg, #25D366 0%, #1ebe5d 100%);
    color: #ffffff;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 16px 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.15);
    transition: var(--transition-smooth);
}

.wa-inquiry-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.25);
    filter: brightness(1.05);
}

/* Trust list */
.trust-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
    border-top: 1px solid var(--border-color);
    padding-top: 18px;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.trust-item i {
    color: var(--gold-primary);
    font-size: 0.95rem;
    width: 18px;
}

.trust-item span {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    color: var(--text-secondary);
}

/* Spec Tabs */
.product-tabs-container {
    margin-top: 60px;
    border-top: 1px solid var(--border-color);
    padding-top: 40px;
}

.product-tabs-header {
    display: flex;
    justify-content: center;
    gap: 30px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 15px;
    margin-bottom: 25px;
}

.tab-trigger {
    background: none;
    border: none;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-muted);
    cursor: pointer;
    padding: 8px 0;
    position: relative;
    transition: var(--transition-quick);
}

.tab-trigger:hover {
    color: var(--gold-primary);
}

.tab-trigger::after {
    content: '';
    position: absolute;
    bottom: -16px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--gold-primary);
    transform: scaleX(0);
    transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.tab-trigger.active {
    color: var(--gold-primary);
    font-weight: 600;
}

.tab-trigger.active::after {
    transform: scaleX(1);
}

.tab-content-wrap {
    min-height: 150px;
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.specs-table {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    border-collapse: collapse;
}

.specs-table td {
    padding: 12px 20px;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    border-bottom: 1px solid var(--border-color);
}

.specs-table tr td:first-child {
    font-weight: 600;
    color: var(--text-muted);
    width: 40%;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 1px;
}

.specs-table tr td:second-child {
    color: var(--text-primary);
}

.tab-desc-text {
    max-width: 800px;
    margin: 0 auto;
    text-align: justify;
    line-height: 1.8;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

/* Related section */
.related-products-section {
    background-color: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    padding: 80px 0;
}

.related-products-section .section-title {
    font-size: 1.8rem;
    text-align: center;
    margin-bottom: 40px;
    letter-spacing: 1px;
    color: var(--text-primary);
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    justify-content: center;
    max-width: 1000px;
    margin: 0 auto;
}

/* Responsive updates for Product page */
@media (max-width: 992px) {
    .product-detail-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .product-gallery-wrap {
        position: static;
    }

    .product-title {
        font-size: 2.0rem;
    }

    .related-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 576px) {
    .product-title {
        font-size: 1.6rem;
    }

    .curr-price {
        font-size: 1.5rem;
    }

    .quick-specs-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .product-actions-group {
        flex-direction: column;
        gap: 10px;
    }

    .related-grid {
        grid-template-columns: 1fr;
        max-width: 300px;
    }
}

@media (min-width: 1600px) {
    html {
        font-size: 18px;
    }
}

@media (min-width: 1920px) {
    html {
        font-size: 19px;
    }
}

@media (min-width: 2560px) {
    html {
        font-size: 25px;
    }
}

/* Responsive typography scaling - setting base font size on phones to 15px */
@media (max-width: 1200px) {
    html {
        font-size: 15.8px;
    }
}

@media (max-width: 992px) {
    html {
        font-size: 15.5px;
    }
}

@media (max-width: 768px) {
    html {
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    html {
        font-size: 15px;
    }
}


body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-sans);
    line-height: 1.65;
    overflow-x: clip;
    transition: background-color 0.6s ease, color 0.6s ease;
}

a {
    color: inherit;
    text-decoration: none;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--gold-primary);
}

/* Base Layout Containers */
.container {
    width: 92%;
    max-width: var(--container-max-width);
    margin: 0 auto;
}

.section-padding {
    padding: 120px 0;
}

.text-center {
    text-align: center;
}

.text-gold {
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.logo a img {
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), filter 0.4s ease;
}

.logo a:hover img {
    transform: scale(1.03);
    filter: drop-shadow(0 0 8px rgba(172, 131, 52, 0.25)) brightness(1.05);
}

/* Typography Details */
h1,
h2,
h3,
h4,
.font-serif {
    font-family: var(--font-serif);
    font-weight: 400;
}

/* Section Header (Goldsmith Minimalist Style) */
.section-header {
    margin-bottom: 80px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.section-header span {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 5px;
    color: var(--gold-primary);
    display: block;
    margin-bottom: 15px;
}

.section-header h2 {
    font-size: 3rem;
    line-height: 1.15;
    color: var(--text-primary);
    letter-spacing: 0.5px;
}

.section-header .divider-line {
    width: 50px;
    height: 1px;
    background: var(--gold-primary);
    margin: 25px auto 0;
}

/* Buttons (Goldsmith Minimalist / Fine Borders) */
.btn-gold {
    display: inline-block;
    padding: 15px 36px;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    background: var(--gold-primary);
    color: #ffffff;
    border: none;
    cursor: pointer;
    transition: var(--transition-smooth);
    border-radius: 0;
    /* Pure square luxury theme */
}

.btn-gold:hover {
    box-shadow: 0 10px 25px rgba(172, 131, 52, 0.25);
    filter: brightness(1.08);
    transform: translateY(-2px);
}

.btn-outline {
    display: inline-block;
    padding: 14px 35px;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--gold-primary);
    cursor: pointer;
    transition: var(--transition-smooth);
}

.btn-outline:hover {
    background: var(--gold-gradient);
    color: #000;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px var(--shadow-glow);
}

/* ==========================================================================
   Header & Sliding Drawer Overlays
   ========================================================================== */
.utility-bar {
    background-color: #0d0b09;
    /* Deep obsidian solid charcoal */
    border-bottom: 1px solid rgba(172, 131, 52, 0.2);
    font-size: 0.72rem;
    letter-spacing: 0.5px;
    color: #a59c8d;
    /* Muted ivory text */
    padding: 8px 0;
    font-weight: 400;
    position: relative;
    z-index: 1001;
}

.utility-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.utility-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.utility-left a {
    color: #a59c8d;
    font-weight: 500;
    text-transform: uppercase;
    transition: var(--transition-quick);
}

.utility-left a:hover {
    color: var(--gold-primary);
}

.utility-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.support-text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    color: #a59c8d;
}

.support-text a {
    color: var(--gold-primary);
    font-weight: 600;
}

.rate-flash {
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.04);
    /* Translucent dark-mode rate flash */
    border: 1px solid rgba(172, 131, 52, 0.25);
    padding: 6px 16px;
    color: var(--gold-primary);
    font-weight: 600;
    font-size: 1.05rem;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border-radius: 4px;
}

.live-pulse-dot {
    width: 11px;
    height: 11px;
    background-color: #2ec153;
    border-radius: 50%;
    display: inline-block;
    position: relative;
}

.live-pulse-dot::after {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    width: 13px;
    height: 13px;
    background-color: #2ec153;
    border-radius: 50%;
    animation: livePulse 2s infinite ease-in-out;
}

.live-pulse-dot.silver-pulse {
    background-color: #cbd5e1;
}

.live-pulse-dot.silver-pulse::after {
    background-color: #cbd5e1;
}

.rate-flash.silver-flash {
    color: #cbd5e1;
    border-color: rgba(203, 213, 225, 0.25);
}

@keyframes livePulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

/* Dropdowns in Utility Bar */
.utility-dropdown {
    position: relative;
    cursor: pointer;
    padding: 3px 0;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.utility-dropdown i {
    font-size: 0.55rem;
    color: var(--text-secondary);
}

.utility-dropdown .dropdown-content {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    min-width: 120px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    z-index: 110;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: var(--transition-smooth);
    list-style: none;
    padding: 5px 0;
}

.utility-dropdown:hover .dropdown-content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.utility-dropdown .dropdown-content li a {
    display: block;
    padding: 6px 12px;
    color: var(--text-primary);
    font-size: 0.68rem;
    text-transform: uppercase;
    transition: var(--transition-quick);
}

.utility-dropdown .dropdown-content li a:hover {
    background-color: rgba(197, 160, 89, 0.04);
    color: var(--gold-primary);
}

/* Sticky Header */
header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #12100d;
    /* Matching footer background */
    border-bottom: 1px solid rgba(172, 131, 52, 0.18);
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
    transition: background-color 0.4s ease, box-shadow 0.4s ease;
}

header.scrolled {
    background: #12100d;
    border-bottom: 1px solid rgba(172, 131, 52, 0.28);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* Row 2: Main Row */
.header-main-row {
    padding: 14px 0;
    /* Constant comfortable padding for a stable fixed header */
    border-bottom: 1px solid rgba(172, 131, 52, 0.18);
    background-color: transparent;
    transition: padding 0.4s ease;
}

header.scrolled .header-main-row {
    padding: 14px 0;
    /* Keep height fixed and stable */
}

.header-main-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
}

/* Search Bar Wrapper */
.header-search-wrap {
    flex: 1;
    max-width: 480px;
    position: relative;
    display: flex;
    align-items: center;
    transition: max-width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.header-search-wrap:focus-within {
    max-width: 550px;
}

.search-icon-inner {
    position: absolute;
    left: 18px;
    color: #a59c8d;
    font-size: 0.85rem;
    cursor: pointer;
    transition: var(--transition-quick);
    z-index: 2;
}

.search-icon-inner:hover {
    color: var(--gold-primary);
    transform: scale(1.1);
}

.header-search-input {
    width: 100%;
    padding: 11px 20px 11px 46px;
    border: 1px solid rgba(172, 131, 52, 0.25);
    background-color: rgba(255, 255, 255, 0.05);
    color: #fbf9f3;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    border-radius: 30px;
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    letter-spacing: 0.5px;
}

.header-search-input::placeholder {
    color: #a59c8d;
    opacity: 0.8;
}

.header-search-input:focus {
    outline: none;
    border-color: var(--gold-primary);
    box-shadow: 0 4px 20px rgba(172, 131, 52, 0.25);
    background-color: rgba(255, 255, 255, 0.08);
}

/* Actions */
.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.action-btn,
.control-btn {
    background: none;
    border: none;
    color: #dfd5c0;
    /* Soft champagne gold */
    font-size: 1.15rem;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), color 0.3s ease, background-color 0.3s ease;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.action-btn:hover,
.control-btn:hover {
    color: var(--gold-primary);
    background-color: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px) scale(1.06);
}

.action-btn:active,
.control-btn:active {
    transform: translateY(0) scale(0.96);
}

.action-btn .badge-count {
    position: absolute;
    top: -2px;
    right: -2px;
    background: var(--gold-gradient);
    color: #000000;
    font-size: 0.55rem;
    font-weight: 700;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #12100d;
    /* Match header dark background */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

.action-btn:hover .badge-count {
    transform: scale(1.1);
}

/* Custom Premium Tooltips */
.action-btn[data-tooltip],
.control-btn[data-tooltip] {
    position: relative;
}

.action-btn[data-tooltip]::before,
.control-btn[data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: -32px;
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: #12100d;
    border: 1px solid rgba(172, 131, 52, 0.3);
    color: #fbf9f3;
    font-family: var(--font-sans);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 4px 10px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    z-index: 1005;
    pointer-events: none;
    border-radius: 2px;
}

.action-btn[data-tooltip]:hover::before,
.control-btn[data-tooltip]:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Row 3: Navigation & Ticker Row */
.header-nav-row {
    padding: 8px 0;
    background-color: transparent;
}

.header-nav-inner {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Desktop Navigation */
#nav-bar ul {
    display: flex;
    gap: 25px;
    list-style: none;
    /* Reset here explicitly: Bootstrap Reboot (loaded on about/scheme pages)
       forces ul { padding-left: 2rem }, which pushed the nav in and made the
       items wrap. Higher specificity than Reboot, so this always wins. */
    padding: 0;
    margin: 0;
    flex-wrap: nowrap;
}

#nav-bar ul li {
    position: relative;
}

#nav-bar ul li a {
    font-size: 0.92rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #dfd5c0;
    /* Soft champagne gold */
    padding: 10px 5px;
    display: flex;
    align-items: center;
    gap: 4px;
    position: relative;
    white-space: nowrap;
    /* Fixed underline bug */
    transition: var(--transition-quick);
}

#nav-bar ul li a i {
    transition: transform 0.3s ease;
}

#nav-bar ul li:hover a i {
    transform: rotate(180deg);
}

#nav-bar ul li a:hover {
    color: var(--gold-primary);
}

#nav-bar ul li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 5px;
    right: 5px;
    height: 1.5px;
    background: var(--gold-primary);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

#nav-bar ul li a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* Dropdown Menu for Row 3 (Desktop Mode) */
@media (min-width: 769px) {
    .header-nav-inner {
        position: relative;
    }

    #nav-bar ul li.dropdown {
        position: static;
    }

    .dropdown-menu {
        display: grid !important;
        grid-template-columns: repeat(6, auto);
        /* 6 columns, forming 2 rows for 12 items */
        justify-content: center !important;
        align-content: center !important;
        gap: 15px 30px !important;
        /* 15px row gap, 30px column gap */
        position: absolute;
        top: 100%;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        background: #12100d !important;
        /* Premium Obsidian Black matching header */
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(172, 131, 52, 0.25) !important;
        border-top: 2px solid var(--gold-primary) !important;
        /* Gold top accent border */
        padding: 22px 30px !important;
        opacity: 0;
        visibility: hidden;
        transform: translateY(12px);
        transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.4s ease, visibility 0.4s ease;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
        z-index: 100;
        list-style: none;
        border-radius: 0 0 4px 4px;
        box-sizing: border-box;
    }

    #nav-bar ul li:hover .dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .dropdown-menu li {
        display: block !important;
        width: auto !important;
        text-align: center;
    }

    .dropdown-menu li a {
        padding: 10px 18px !important;
        font-size: 1.08rem !important;
        text-transform: capitalize;
        letter-spacing: 0.5px;
        display: block !important;
        color: #dfd5c0 !important;
        /* Light champagne text on black background */
        transition: color 0.3s ease, background-color 0.3s ease, transform 0.3s ease !important;
        border-radius: 4px;
    }

    .dropdown-menu li a::after {
        display: none;
    }

    .dropdown-menu li a:hover {
        background: rgba(197, 160, 89, 0.12) !important;
        color: var(--gold-primary) !important;
        padding-left: 18px !important;
        /* Keep padding stable horizontally */
        transform: translateY(-1px);
    }
}

/* Countdown Ticker styles */
.countdown-ticker-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.countdown-label {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #fbf9f3;
}

.countdown-timer {
    display: flex;
    align-items: center;
    gap: 5px;
}

.countdown-box {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(172, 131, 52, 0.25);
    color: #dfd5c0;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 4px;
    min-width: 28px;
    text-align: center;
}

.countdown-colon {
    font-weight: 700;
    color: #a59c8d;
    font-size: 0.72rem;
}

.countdown-arrow {
    font-size: 0.62rem;
    color: #a59c8d;
    margin-left: 2px;
    cursor: pointer;
}

/* Row 4: Service Highlights Bar */
.service-highlights-bar {
    background-color: #fff;
    border-bottom: 1px solid var(--border-color);
    padding: 12px 0;
}

.highlights-inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.highlight-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.highlight-icon {
    font-size: 1.2rem;
    color: var(--gold-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: rgba(197, 160, 89, 0.05);
    border-radius: 50%;
}

.highlight-text {
    display: flex;
    flex-direction: column;
}

.highlight-text strong {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.highlight-text span {
    font-family: var(--font-sans);
    font-size: 0.62rem;
    color: var(--text-secondary);
    margin-top: 1px;
}

.badge-count {
    position: absolute;
    top: 1px;
    right: 1px;
    background: #e21b1b;
    color: #ffffff;
    font-size: 0.55rem;
    font-weight: 700;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Sliding Side Drawer Overlays */
.sidebar-panel {
    position: fixed;
    top: 0;
    right: -460px;
    /* Hidden initially */
    width: 450px;
    height: 100vh;
    background-color: var(--bg-secondary);
    border-left: 1px solid var(--border-color);
    z-index: 1200;
    padding: 40px;
    transition: right 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.sidebar-panel.active {
    right: 0;
    box-shadow: -20px 0 50px rgba(0, 0, 0, 0.7);
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 20px;
    margin-bottom: 30px;
}

.sidebar-header h3 {
    font-family: var(--font-serif);
    font-size: 1.8rem;
    color: var(--text-primary);
}

.close-sidebar {
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 1.25rem;
    cursor: pointer;
    transition: var(--transition-quick);
}

.close-sidebar:hover {
    color: var(--gold-primary);
    transform: rotate(90deg);
}

/* Drawer contents */
.sidebar-body {
    flex-grow: 1;
    overflow-y: auto;
}

.sidebar-empty-state {
    text-align: center;
    padding: 60px 0;
    color: var(--text-secondary);
}

.sidebar-empty-state i {
    font-size: 2.5rem;
    color: var(--border-color);
    margin-bottom: 20px;
}

.sidebar-empty-state p {
    font-size: 16px;
    margin-bottom: 20px;
}

/* Sidebar Search Form */
.search-form-wrap {
    position: relative;
    margin-top: 20px;
}

.search-input {
    width: 100%;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 16px 20px;
    padding-right: 50px;
    font-family: var(--font-sans);
    font-size: 0.95rem;
}

.search-submit-btn {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--gold-primary);
    cursor: pointer;
    font-size: 1.1rem;
}

/* Background Blur Overlay for Drawer */
.blur-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1100;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-quick);
}

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

/* Hamburger mobile */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
}

.hamburger span {
    width: 25px;
    height: 1.5px;
    background-color: #fbf9f3;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s ease;
}

.hamburger.active span:nth-child(1) {
    transform: translateY(7.5px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: translateY(-7.5px) rotate(-45deg);
}

/* ==========================================================================
   Hero Slider (Split Screen Cinematic Luxury Style)
   ========================================================================== */
.hero-slider {
    position: relative;
    height: 700px;
    /* Expansive cinematic height */
    overflow: hidden;
    background-color: #0c0a08;
    /* Dark base for cinematic contrast */
    border-bottom: 1px solid var(--border-color);
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.8s cubic-bezier(0.25, 1, 0.3, 1), visibility 1.8s ease;
}

.slide.active {
    opacity: 1;
    visibility: visible;
}

.slide-split-container {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
}

.slide-text-col {
    /* width: 45%;
    height: 100%;
    background: linear-gradient(90deg, #0f0d0b 0%, #15120e 80%, rgba(21, 18, 14, 0.85) 100%);
    display: flex;
    align-items: center;
    padding: 0 5% 0 max(4%, calc((100% - var(--container-max-width)) / 2));
    z-index: 3;
    transition: var(--transition-smooth);
    position: relative; */
    /* display: none; */
}

/* Luxury Divider border between text and image columns */
.slide-text-col::after {
    content: '';
    position: absolute;
    top: 15%;
    right: 0;
    width: 1px;
    height: 70%;
    background: linear-gradient(to bottom, transparent, var(--gold-primary), transparent);
    opacity: 0.5;
}

.slide-image-col {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Dark gradient overlay on the image column to blend seamlessly into the text column */
.slide-image-col::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: linear-gradient(90deg, #15120e 0%, rgba(21, 18, 14, 0.4) 10%, rgba(21, 18, 14, 0) 18%),
        linear-gradient(0deg, rgba(21, 18, 14, 0.6) 0%, transparent 40%); */
    z-index: 2;
    pointer-events: none;
}

.slide-image-inner {
    width: 100%;
    height: 100%;
    background-size: cover;
    /* background-position: center center; */
    background-repeat: no-repeat;
    transform: scale(1);
    transition: transform 1.8s cubic-bezier(0.25, 1, 0.3, 1), filter 1.8s ease;
}

/* 
.slide.active .slide-image-inner {
    animation: cinematicPanZoom 10s ease-in-out infinite alternate;
} */

@keyframes cinematicPanZoom {
    0% {
        transform: scale(1.03) translate(0px, 0px) rotate(0deg);
    }

    50% {
        transform: scale(1.10) translate(-10px, -5px) rotate(0.2deg);
    }

    100% {
        transform: scale(1.06) translate(5px, 8px) rotate(-0.2deg);
    }
}

.slide-text-inner {
    transform: translateY(40px);
    opacity: 0;
    transition: transform 1.6s cubic-bezier(0.2, 1, 0.2, 1) 0.3s, opacity 1.6s ease 0.3s;
}

.slide.active .slide-text-inner {
    transform: translateY(0);
    opacity: 1;
}

.slide-text-inner h4 {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: var(--gold-primary);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.slide-text-inner h4::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 1px;
    background-color: var(--gold-primary);
}

.slide-text-inner h2 {
    font-size: 3.6rem;
    line-height: 1.1;
    margin-bottom: 22px;
    letter-spacing: 0.5px;
    color: #fbf9f3;
    font-family: var(--font-serif);
    font-weight: 300;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.slide-text-inner p {
    font-size: 0.98rem;
    font-weight: 300;
    color: #dfd5c0;
    margin-bottom: 35px;
    line-height: 1.7;
    max-width: 500px;
    opacity: 0.95;
}

.slide-text-inner-2 .btn-group {
    display: flex;
    gap: 20px;
    /* Position the button group over the slider on the top-left */
    position: absolute;
    left: 40px;
    bottom: 120px;
    transform: translateY(0);
    z-index: 8;
    /* sit above slide image but below any modal overlays */
}

/* Special Button Styling Overrides inside Hero section for ultra premium look */
.hero-slider .btn-gold {
    background: var(--gold-gradient);
    color: #0c0a08;
    font-weight: 600;
    border: 1px solid transparent;
}

.hero-slider .btn-outline {
    border: 1px solid rgba(172, 131, 52, 0.6);
    color: #fbf9f3;
}

.hero-slider .btn-outline:hover {
    border-color: transparent;
    color: #0c0a08;
}

/* Navigation Controls for Slider */
.slider-arrows {
    position: absolute;
    bottom: 50px;
    right: max(4%, calc((100% - var(--container-max-width)) / 2 + 10px));
    z-index: 10;
    display: flex;
    gap: 15px;
}

.arrow-btn {
    background: rgba(21, 18, 14, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(172, 131, 52, 0.3);
    color: #dfd5c0;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    transition: var(--transition-smooth);
}

.arrow-btn:hover {
    background: var(--gold-gradient);
    color: #0c0a08;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(172, 131, 52, 0.15);
}

.slider-dots {
    position: absolute;
    bottom: 50px;
    left: max(4%, calc((100% - var(--container-max-width)) / 2));
    z-index: 10;
    display: flex;
    gap: 16px;
    align-items: center;
}

/* Dots transformed into elegant minimal bar indicators with cinematic loading look */
.dot {
    width: 45px;
    height: 2px;
    background: rgba(255, 255, 255, 0.15);
    cursor: pointer;
    transition: var(--transition-smooth);
    position: relative;
}

.dot.active {
    background: var(--gold-primary);
    width: 70px;
}

.dot::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background-color: var(--gold-light);
    transition: width 7s linear;
}

.dot.active::after {
    width: 100%;
}

/* Make product images square and responsive so admin-uploaded images of
   varying resolutions behave like 800x800 and scale to smaller boxes (e.g. 320x320)
   Uses aspect-ratio with a padding-top fallback for older browsers. */
.coll-card-img-wrap,
.bs-card-img-wrap,
.main-image-container.zoomable {
    width: 100%;
    aspect-ratio: 1 / 1;
    /* makes the container square */
    position: relative;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.03);
}

.coll-card-img-wrap img,
.bs-card-img-wrap img,
.main-image-container.zoomable img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* crop and fill the square without distortion */
    object-position: center center;
    display: block;
}

/* Fallback for browsers that don't support aspect-ratio */
@supports not (aspect-ratio: 1 / 1) {

    .coll-card-img-wrap,
    .bs-card-img-wrap,
    .main-image-container.zoomable {
        width: 100%;
        padding-top: 100%;
        /* square via padding hack */
    }

    .coll-card-img-wrap img,
    .bs-card-img-wrap img,
    .main-image-container.zoomable img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

/* ==========================================================================
   Live Rates Marquee Section (Post-Hero Section)
   ========================================================================== */
.marquee-tag {
    background: var(--gold-gradient);
    color: #000;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 6px 24px;
    box-shadow: 10px 0 25px rgba(0, 0, 0, 0.5);
    z-index: 12;
    position: relative;
    gap: 2px;
}

/* Live label row */
.live-label {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Pulse dot */
.marquee-tag .pulse-dot {
    width: 8px;
    height: 8px;
    background-color: #2ec153;
    border-radius: 50%;
    display: inline-block;
    position: relative;
}

/* Optional animation */
.marquee-tag .pulse-dot::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: #2ec153;
    border-radius: 50%;
    animation: pulse 1.5s infinite;
    opacity: 0.6;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }

    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

/* Date styling */
.live-date {
    font-size: 15px;
    /* opacity: 1; */
    margin: 0;
}

.rates-marquee-section {
    display: flex;
    align-items: center;
    background-color: #0d0b09;
    /* Sleek obsidian background matching top bar */
    border-top: 1px solid rgba(172, 131, 52, 0.25);
    border-bottom: 1px solid rgba(172, 131, 52, 0.25);
    height: 70px;
    position: relative;
    z-index: 10;
    overflow: hidden;
}

.marquee-tag {
    background: var(--gold-gradient);
    color: #000;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    height: 100%;
    display: flex;
    flex-direction: column;
    /* 👈 key change */
    justify-content: center;
    padding: 6px 24px;
    box-shadow: 10px 0 25px rgba(0, 0, 0, 0.5);
    z-index: 12;
    white-space: nowrap;
    position: relative;
    gap: 2px;
    align-items: center;

}

.marquee-tag .pulse-dot {
    width: 8px;
    height: 8px;
    background-color: #2ec153;
    border-radius: 50%;
    margin-right: 8px;
    display: inline-block;
    position: relative;
}

.marquee-tag .pulse-dot::after {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    width: 10px;
    height: 10px;
    background-color: #2ec153;
    border-radius: 50%;
    animation: livePulse 2s infinite ease-in-out;
}

.rates-marquee-wrapper {
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
}

.rates-marquee-track {
    display: flex;
    align-items: center;
    gap: 50px;
    width: max-content;
    padding-left: 20px;
    will-change: transform;
}

.rate-ticker-item {
    font-family: var(--font-sans);
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--gold-primary);
    white-space: nowrap;
}

.rate-ticker-item strong {
    font-weight: 700;
    color: #fff;
}

.rate-ticker-item.silver-item {
    color: #cbd5e1;
}

/* ==========================================================================
   Shop By Category Section (Malabar Gold Style)
   ========================================================================== */
.category-section {
    background-color: #ffffff;
    border-bottom: 1px solid var(--border-color);
    padding: 50px 0;
}

.category-section .container {
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
    margin: 0;
}

.category-header {
    text-align: left;
    margin-bottom: 30px;
    width: 100%;
    padding-left: 40px;
}

.category-header h2 {
    font-family: var(--font-sans);
    font-size: 2.2rem;
    /* Reduced font size from 2.6rem */
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.5px;
}

/* Marquee infinite scroll animation */
@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.category-marquee-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
    /* Fade edges left & right */
    mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

.category-marquee-track {
    display: flex;
    align-items: center;
    gap: 40px;
    width: max-content;
    animation: marquee-scroll 22s linear infinite;
    padding: 10px 0 20px;
}

/* Pause on hover */
.category-marquee-wrapper:hover .category-marquee-track {
    animation-play-state: paused;
}


.category-card {
    flex: 0 0 120px;
    /* Enforces uniform width across all cards */
    width: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.category-circle {
    width: 120px;
    /* Enforces identical width for the circle container */
    height: 120px;
    /* Enforces identical height for the circle container */
    flex-shrink: 0;
    /* Prevents circles from compressing when text wraps */
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background-color: var(--bg-primary);
    padding: 4px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: var(--transition-smooth);
}

.category-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    transition: var(--transition-smooth);
}

.category-name {
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-primary);
    transition: var(--transition-quick);
    text-align: center;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    height: 34px;
    /* Fixed height to accommodate 2 lines of wrapped text */
    width: 100%;
}

/* Hover effects */
.category-card:hover .category-circle {
    transform: translateY(-8px);
    border-color: var(--gold-primary);
    box-shadow: 0 15px 30px var(--shadow-glow);
}

.category-card:hover .category-circle img {
    transform: scale(1.08);
}

.category-card:hover .category-name {
    color: var(--gold-primary);
}

/* ==========================================================================
   Best Sellers Section (PCJ Style — horizontal scroll cards)
   ========================================================================== */
.best-sellers-section {
    background-color: var(--bg-primary);
    padding: 70px 0 60px;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.bs-header {
    text-align: center;
    margin-bottom: 40px;
}

.bs-header h1,
.bs-header h2 {
    font-family: var(--font-sans);
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.bs-divider {
    width: 80px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold-primary), transparent);
    margin: 0 auto;
    border-radius: 2px;
}

/* Category Filter Tabs (PCJ Style) */
.bs-tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-bottom: 45px;
    flex-wrap: wrap;
    padding: 0 20px;
    position: relative;
    z-index: 100;
}

.bs-tab-btn {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    padding: 8px 22px;
    border-radius: 30px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    z-index: 101;
    pointer-events: auto;
}

.bs-tab-btn:hover {
    border-color: var(--gold-primary);
    color: var(--gold-primary);
    transform: translateY(-1px);
}

.bs-tab-btn.active {
    background: var(--gold-primary);
    border-color: var(--gold-primary);
    color: var(--bg-primary);
    font-weight: 600;
    box-shadow: 0 4px 15px var(--shadow-glow);
}

/* Horizontal row on desktop - Space Between, fits 4 cards */
.bs-scroll-track {
    display: flex;
    gap: 20px;
    justify-content: space-between;
    padding: 0 50px 20px;
    scrollbar-width: none;
    /* Firefox */
    overflow-x: hidden;
    /* No scrollbar on desktop */
}

.bs-scroll-track::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

/* Individual product card - 25% width for 4 cards in a row */
.bs-card {
    flex: 0 0 calc(25% - 15px);
    min-width: 200px;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    cursor: pointer;
    transition: opacity 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), display 0.5s ease;
}

.bs-card-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4/4;
    overflow: hidden;
    border-radius: 4px;
    background-color: var(--bg-secondary);
}

.bs-card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
}

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

/* Hover overlay with WhatsApp button */
.bs-card-hover-actions {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, transparent 100%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 16px 12px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.bs-card:hover .bs-card-hover-actions {
    opacity: 1;
}

.bs-wa-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #25D366;
    color: #fff;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 30px;
    text-decoration: none;
    letter-spacing: 0.5px;
    transition: background 0.2s ease, transform 0.2s ease;
}

.bs-wa-btn:hover {
    background: #1ebe5d;
    transform: scale(1.04);
}

/* Card text info */
.bs-card-info {
    text-align: center;
    padding: 0 4px;
}

.bs-card-name {
    font-family: var(--font-serif);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
    line-height: 1.3;
    margin-top: 10px;
}

.bs-card-meta {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    color: var(--text-secondary);
    letter-spacing: 0.5px;
}

@media (max-width: 768px) {
    .bs-scroll-track {
        display: flex;
        flex-wrap: wrap;
        padding: 0 20px 16px;
        gap: 18px 12px;
        justify-content: space-between;
    }

    .bs-card {
        flex: 0 0 calc(50% - 6px);
        min-width: 0;
        max-width: none;
    }

    .bs-card-name {
        font-size: 0.85rem;
    }

    .bs-card-price {
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--gold-primary);
    }

    .bs-header h1,
    .bs-header h2 {
        font-size: 1.2rem;
    }
}

/* ==========================================================================
   Brand Legacy / About Section (Luxury Editorial Magazine Style)
   ========================================================================== */
.brand-legacy-section {
    position: relative;
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    padding: 80px 0;
    /* Reduced padding from 120px */
    overflow: hidden;
}

.split-about-container,
.luxury-three-col-about {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 35px;
    /* Reduced gap from 50px */
}

.about-col {
    position: relative;
}

.about-img-col {
    flex: 0 0 240px;
    /* Reduced width from 280px */
    width: 240px;
    height: 380px;
    /* Reduced height from 440px */
}

.about-text-col {
    flex: 1;
    min-width: 0;
    padding: 0 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Typography & Headers */
.about-tag {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 6px;
    color: var(--gold-primary);
    display: block;
    margin-bottom: 12px;
}

.brand-legacy-section h2 {
    font-size: 2.3rem;
    /* Reduced font size from 2.8rem */
    line-height: 1.15;
    color: var(--text-primary);
    margin-bottom: 20px;
    /* Reduced margin from 25px */
    letter-spacing: 0.5px;
}

.brand-legacy-section .text-gold {
    background: none;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: initial;
    color: var(--gold-dark);
    /* Solid rich gold for maximum legibility */
    font-weight: 500;
}

.about-header-wrap {
    margin-bottom: 20px;
    /* Reduced margin from 30px */
    text-align: center;
    width: 100%;
}

/* Diamond Divider */
.diamond-divider {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 15px 0 0;
    /* Reduced margin from 20px */
}

.diamond-divider.justify-center {
    justify-content: center;
}

.divider-line-left,
.divider-line-right {
    height: 1px;
    width: 50px;
    background: var(--border-color);
}

.divider-diamond {
    font-size: 0.7rem;
    color: var(--gold-primary);
}

/* Editorial Content Flow */
.about-editorial-flow {
    display: flex;
    flex-direction: column;
    gap: 15px;
    /* Reduced gap from 20px */
    text-align: justify;
    margin-bottom: 2px;
    /* Reduced margin further to pull signature up */
    max-width: 580px;
    /* Reduced max-width from 620px to keep lines neat */
}

.editorial-p {
    font-size: 0.92rem;
    /* Slightly reduced font size from 0.95rem */
    font-weight: 300;
    line-height: 1.75;
    color: var(--text-secondary);
}

/* Luxury Drop Cap */
.drop-cap {
    font-family: var(--font-serif);
    font-size: 3.0rem;
    /* Reduced font size from 3.6rem */
    font-weight: 400;
    float: left;
    line-height: 0.8;
    margin-right: 10px;
    /* Reduced from 12px */
    margin-top: 2px;
    /* Reduced from 4px */
    color: var(--gold-primary);
}

/* Cursive Signature */
.signature-block {
    margin-top: 0;
    /* Reduced margin from 10px to pull signature up */
    border-top: 1px solid var(--border-color);
    padding-top: 30px;
    /* Reduced padding further to pull signature up */
    width: 100%;
    max-width: 380px;
    /* Reduced max-width from 400px */
}

.signature-text {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.6rem;
    /* Reduced font size from 1.8rem */
    color: var(--gold-primary);
    line-height: 1;
    margin-bottom: 2px;
}

.signature-sub {
    font-family: var(--font-sans);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-muted);
}

/* Arched Image Frames */
.arched-image-frame {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 120px 120px 0 0;
    /* Reduced radius from 140px */
    border: 1px solid var(--border-color);
    padding: 6px;
    /* Reduced padding from 8px */
    background-color: var(--bg-primary);
    overflow: hidden;
    transition: var(--transition-smooth);
}

.arched-image-frame:hover {
    transform: translateY(-6px);
    /* Reduced translate from -8px */
    border-color: var(--gold-primary);
    box-shadow: 0 15px 35px var(--shadow-glow);
}

.arched-image-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 114px 114px 0 0;
    /* Adjusted radius from 132px */
    transition: var(--transition-smooth);
}

.arched-image-frame:hover img {
    transform: scale(1.06);
}

/* Arched Frame Labels */
.frame-overlay-label {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 6px 18px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--gold-primary);
    white-space: nowrap;
    transition: var(--transition-quick);
}

.arched-image-frame:hover .frame-overlay-label {
    border-color: var(--gold-primary);
    box-shadow: 0 4px 15px rgba(172, 131, 52, 0.1);
}

/* ==========================================================================
   Shop in Budget Section
   ========================================================================== */
.budget-section {
    background-color: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.budget-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
    margin-top: 50px;
}

.budget-card {
    display: block;
    text-align: center;
    transition: var(--transition-smooth);
}

.budget-circle {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: var(--transition-smooth);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.01);
}

.budget-circle span {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-secondary);
    display: block;
}

.budget-circle .price-val {
    font-family: var(--font-serif);
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--gold-primary);
    line-height: 1;
    margin-top: 4px;
}

/* Hover effects */
.budget-card:hover .budget-circle {
    transform: translateY(-8px);
    border-color: var(--gold-primary);
    box-shadow: 0 15px 30px var(--shadow-glow);
    background-color: var(--bg-tertiary);
}

.budget-card:hover .budget-circle span {
    color: var(--gold-primary);
}


/* ==========================================================================
   Featured Showcase (3-Column Grid)
   ========================================================================== */
.featured-showcase-section {
    background-color: var(--bg-primary);
}

.showcase-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.showcase-card {
    position: relative;
    height: 480px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: var(--transition-smooth);
}

.showcase-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: var(--transition-smooth);
}

.showcase-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.15) 100%);
    z-index: 2;
    transition: var(--transition-smooth);
}

.showcase-content {
    position: absolute;
    bottom: 40px;
    left: 40px;
    right: 40px;
    z-index: 3;
    color: #ffffff;
    transform: translateY(15px);
    transition: var(--transition-smooth);
}

.showcase-content span {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--gold-primary);
    display: block;
    margin-bottom: 8px;
}

.showcase-content h3 {
    font-size: 2.0rem;
    font-family: var(--font-serif);
    margin-bottom: 12px;
    line-height: 1.2;
    color: #ffffff;
}

.showcase-cta {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
    transition: var(--transition-smooth);
}

/* Hover effects */
.showcase-card:hover .showcase-img {
    transform: scale(1.08);
}

.showcase-card:hover .showcase-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(172, 131, 52, 0.08) 100%);
}

.showcase-card:hover .showcase-content {
    transform: translateY(0);
}

.showcase-card:hover .showcase-cta {
    opacity: 1;
    color: var(--gold-primary);
}


/* ==========================================================================
   Book A Visit Banner
   ========================================================================== */
.book-visit-banner {
    background-color: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    padding: 60px 0;
}

.book-visit-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}

.book-visit-text h2 {
    font-family: var(--font-serif);
    font-size: 2.2rem;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.book-visit-text p {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    color: var(--text-secondary);
    max-width: 650px;
}


/* ==========================================================================
   Goldsmith Style Thin-Bordered Grid Mesh
   ========================================================================== */
.bordered-grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 4 columns */
    border-top: 1px solid var(--border-color);
    border-left: 1px solid var(--border-color);
    margin-top: 60px;
    background-color: var(--bg-primary);
}

.product-card-wrap {
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    background-color: var(--bg-primary);
    position: relative;
    padding: 30px;
    transition: var(--transition-smooth);
}

.product-card-wrap:hover {
    background-color: var(--bg-secondary);
    box-shadow: inset 0 0 30px rgba(197, 160, 89, 0.03);
}

.product-media {
    position: relative;
    width: 100%;
    padding-top: 110%;
    /* Elegant aspect ratio */
    overflow: hidden;
    margin-bottom: 25px;
}

.product-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-smooth);
}

.product-img.hover-img {
    opacity: 0;
    transform: scale(1.05);
}

.product-card-wrap:hover .product-img.main-img {
    opacity: 0;
}

.product-card-wrap:hover .product-img.hover-img {
    opacity: 1;
    transform: scale(1);
}

.product-badges {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 5;
}

.badge-new {
    font-family: var(--font-sans);
    font-size: 0.65rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 4px 10px;
    background: var(--gold-gradient);
    color: #000;
}

/* Quick Action Icons */
.product-actions-bar {
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 10;
    opacity: 0;
    transition: var(--transition-smooth);
}

.product-card-wrap:hover .product-actions-bar {
    bottom: 20px;
    opacity: 1;
}

.action-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-quick);
}

.action-btn:hover {
    border-color: var(--gold-primary);
    color: var(--gold-primary);
    transform: scale(1.08);
}

/* Product Info */
.product-meta {
    text-align: center;
}

.product-cat {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--gold-primary);
    margin-bottom: 8px;
    display: block;
}

.product-title-text {
    font-size: 1.55rem;
    color: var(--text-primary);
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.product-price-tag {
    font-family: var(--font-sans);
    font-size: 0.88rem;
    font-weight: 400;
    color: var(--text-secondary);
}

/* ==========================================================================
   Live Rates Board & Estimator Widget
   ========================================================================== */
.rates-calculator-section {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.gold-rates-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 50px;
    align-items: center;
}

.rates-side {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    padding: 50px 40px;
    position: relative;
    overflow: hidden;
}

.rates-side h3 {
    font-size: 1.8rem;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.rates-side h3 i {
    font-size: 1.1rem;
    color: var(--gold-primary);
}

.rate-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid var(--border-color);
}

.rate-row:last-child {
    border-bottom: none;
}

.rate-title {
    font-size: 0.95rem;
    color: var(--text-secondary);
    letter-spacing: 0.5px;
}

.rate-price {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--gold-primary);
}

.rate-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 20px;
    line-height: 1.5;
}

/* Calculator Card (Showroom Estimator) */
.calculator-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    padding: 50px;
}

.calculator-card h3 {
    font-size: 1.8rem;
    margin-bottom: 30px;
}

.calc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-bottom: 30px;
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.input-group label {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.input-group input,
.input-group select {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 15px 18px;
    font-size: 16px;
    font-family: var(--font-sans);
    transition: var(--transition-quick);
}

.input-group input:focus,
.input-group select:focus {
    border-color: var(--gold-primary);
    box-shadow: 0 0 15px var(--shadow-glow);
}

.estimation-results {
    border-top: 1px dashed var(--border-color);
    padding-top: 30px;
    margin-top: 10px;
}

.result-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    font-size: 16px;
    color: var(--text-secondary);
}

.result-row.total {
    font-family: var(--font-serif);
    font-size: 1.85rem;
    color: var(--text-primary);
    margin-top: 15px;
    border-top: 1px solid var(--border-color);
    padding-top: 20px;
}

/* ==========================================================================
   Promises Section (Malabar style grid)
   ========================================================================== */
.promises-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 60px;
}

.promise-card {
    text-align: center;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    padding: 50px 35px;
    transition: var(--transition-smooth);
}

.promise-card:hover {
    border-color: var(--gold-primary);
    transform: translateY(-8px);
    box-shadow: 0 15px 35px var(--shadow-glow);
}

.promise-icon {
    font-size: 2.2rem;
    color: var(--gold-primary);
    margin-bottom: 25px;
    display: inline-block;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.promise-card:hover .promise-icon {
    transform: rotateY(180deg);
}

.promise-card h3 {
    font-size: 1.45rem;
    margin-bottom: 15px;
}

.promise-card p {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* ==========================================================================
   Heritage Banner (Cinematic Parallax)
   ========================================================================== */


/* ==========================================================================
   VIP Showroom Booking
   ========================================================================== */
.booking-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.booking-info h2 {
    font-size: 3rem;
    margin-bottom: 25px;
    line-height: 1.15;
}

.booking-info p {
    color: var(--text-secondary);
    font-size: 1.05rem;
    margin-bottom: 40px;
}

.info-feature {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
}

.info-feature-icon {
    color: var(--gold-primary);
    font-size: 1.25rem;
    margin-top: 4px;
}

.info-feature-text h4 {
    font-size: 1.2rem;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.info-feature-text p {
    font-size: 16px;
    margin-bottom: 0;
}

/* Booking Form Card */
.booking-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    padding: 50px;
}

.booking-card form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.booking-card .full-width {
    grid-column: span 2;
}

.booking-card .btn-gold {
    width: 100%;
}

/* ==========================================================================
   Testimonials Carousel
   ========================================================================== */
.testimonials-slider {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    overflow: hidden;
}

.testimonial-slide {
    display: none;
    text-align: center;
    padding: 30px;
}

.testimonial-slide.active {
    display: block;
    animation: fadeInSlide 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.testimonial-slide p {
    font-size: 1.85rem;
    font-family: var(--font-serif);
    line-height: 1.75;
    color: var(--text-primary);
    margin-bottom: 35px;
    font-style: italic;
}

.testimonial-slide .author {
    font-family: var(--font-sans);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--gold-primary);
    font-size: 0.85rem;
    margin-bottom: 5px;
}

.testimonial-slide .city {
    font-size: 0.75rem;
    color: var(--text-muted);
    letter-spacing: 1px;
}

/* ==========================================================================
   Footer
   ========================================================================== */

/* ==========================================================================
   Newsletter Subscribe Section — Join The Kalyani Family
   ========================================================================== */
.newsletter-section {
    background-color: #f5ede0;
    padding: 80px 20px;
    text-align: center;
    border-top: 1px solid #e8d9c5;
    border-bottom: 1px solid #e8d9c5;
}

.newsletter-inner {
    max-width: 680px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.nl-diamond {
    color: #b8922a;
    font-size: 1.1rem;
    line-height: 1;
    display: block;
}

.nl-heading {
    font-family: var(--font-serif);
    font-size: 2.8rem;
    font-weight: 600;
    color: #3b1a14;
    line-height: 1.2;
    margin: 0;
    letter-spacing: -0.5px;
}

.nl-sub {
    font-family: var(--font-sans);
    font-size: 1rem;
    color: #7a6a5a;
    line-height: 1.7;
    max-width: 520px;
    margin: 0;
}

.nl-form {
    display: flex;
    width: 100%;
    max-width: 600px;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    margin-top: 6px;
}

.nl-input {
    flex: 1;
    padding: 16px 22px;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    color: #3b1a14;
    background: #fff;
    border: none;
    outline: none;
}

.nl-input::placeholder {
    color: #b0a090;
}

.nl-btn {
    padding: 16px 32px;
    background-color: #6b1a1a;
    color: #fff;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition: background 0.25s ease;
    white-space: nowrap;
}

.nl-btn:hover {
    background-color: #8b2020;
}

@media (max-width: 600px) {
    .nl-heading {
        font-size: 2rem;
    }

    .nl-form {
        flex-direction: column;
        border-radius: 6px;
    }

    .nl-input {
        border-radius: 4px 4px 0 0;
    }

    .nl-btn {
        border-radius: 0 0 4px 4px;
        padding: 14px;
    }
}

footer {
    background-color: #12100d;
    /* Premium deep obsidian charcoal */
    border-top: 1px solid var(--border-color);
    padding-top: 100px;
    color: #a59c8d;
    /* Elegant muted ivory-gold text */
    transition: background-color 0.6s ease;
}

[data-theme="dark"] footer {
    background-color: #030303;
}

.footer-top {
    display: grid;
    grid-template-columns: 1.3fr 0.9fr 0.9fr 1.1fr;
    gap: 80px;
    margin-bottom: 80px;
}

.footer-col h3 {
    font-size: 1.3rem;
    color: var(--gold-primary);
    /* Gold header tags */
    margin-bottom: 30px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.footer-col p {
    font-size: 1.02rem;
    line-height: 1.75;
    margin-bottom: 30px;
    color: #a59c8d;
}

.footer-socials {
    display: flex;
    gap: 15px;
}

.social-link {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(172, 131, 52, 0.3);
    color: #fbf9f3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    transition: var(--transition-quick);
}

.social-link:hover {
    background: var(--gold-gradient);
    color: #000;
    border-color: transparent;
    transform: translateY(-3px);
}

.footer-links li {
    margin-bottom: 14px;
}

.footer-links li a {
    font-size: 1.02rem;
    color: #dfd5c0;
    /* Soft champagne link text */
    transition: var(--transition-quick);
}

.footer-links li a:hover {
    color: var(--gold-primary);
    padding-left: 5px;
}

.footer-contact-item {
    display: flex;
    gap: 15px;
    margin-bottom: 22px;
    font-size: 1.02rem;
    color: #a59c8d;
}

.footer-contact-item i {
    color: var(--gold-primary);
    margin-top: 5px;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    /* Soft dark-mode separator */
    padding: 35px 0;
    font-size: 1.1rem;
    color: #8d8578;
}

.footer-bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-bottom-inner a:hover {
    color: var(--gold-primary);
}

/* Animations */
@keyframes fadeInSlide {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   Responsive Styles
   ========================================================================== */
@media (max-width: 1200px) {
    .bordered-grid-container {
        grid-template-columns: repeat(3, 1fr);
    }
    .hero-slider {
    /* position: relative; */
    height: 630PX;
    }
}

@media (max-width: 1024px) {
    .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }

    .dropdown-menu {
        max-height: 250px;
        overflow-y: auto;
    }

    .luxury-three-col-about {
        flex-wrap: wrap;
        justify-content: center;
        gap: 40px;
    }

    .about-text-col {
        flex: 0 0 100%;
        width: 100%;
        max-width: 750px;
        order: 1;
    }

    .about-img-col {
        flex: 0 0 240px;
        height: 360px;
    }

    .about-img-col.left-col {
        order: 2;
    }

    .about-img-col.right-col {
        order: 3;
    }



    /* Category horizontal scroll on mobile/tablet */
    .category-grid {
        overflow-x: auto;
        padding-bottom: 15px;
        justify-content: flex-start;
        gap: 25px;
        scrollbar-width: none;
        /* Hide scrollbar Firefox */
    }

    .category-grid::-webkit-scrollbar {
        display: none;
        /* Hide scrollbar Chrome/Safari */
    }

    .category-card {
        flex: 0 0 95px;
    }

    .category-circle {
        width: 95px;
        height: 95px;
        padding: 3px;
    }

    .category-name {
        font-size: 0.72rem;
        height: 30px;
    }

    .hero-slider {
        height: 500px;
    }
}

@media (max-width: 768px) {
    .hamburger {
        display: flex;
    }

    .brand-legacy-section h2 {
        font-size: 2.2rem;
    }

    .category-header h2 {
        font-size: 1.8rem;
    }

    .about-img-col.right-col {
        display: none;
    }

    .about-img-col.left-col {
        flex: 0 0 230px;
        width: 230px;
        height: 345px;
        margin: 0 auto;
        order: 2;
    }

    #nav-bar {
        position: fixed;
        top: 180px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 180px);
        background: rgba(18, 16, 13, 0.96);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        z-index: 999;
        transition: left 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
        padding: 40px;
        border-top: 1px solid rgba(172, 131, 52, 0.2);
        overflow-y: auto;
    }

    #nav-bar.active {
        left: 0;
        top: 80px;
    }

    #nav-bar ul {
        flex-direction: column;
        gap: 25px;
    }

    #nav-bar ul li a {
        font-size: 1.3rem;
    }

    /* Mobile Collapsible Submenus */
    #nav-bar .dropdown-menu {
        position: static !important;
        transform: none !important;
        box-shadow: none !important;
        width: 100% !important;
        opacity: 0;
        visibility: hidden;
        max-height: 0;
        overflow: hidden;
        background: transparent !important;
        border: none !important;
        padding: 0 0 0 15px !important;
        transition: max-height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s ease, padding 0.3s ease;
    }

    #nav-bar .dropdown-menu.submenu-active {
        opacity: 1;
        visibility: visible;
        max-height: 600px;
        /* Increased to fit 12 submenus cleanly */
        padding: 10px 0 0 15px;
    }

    #nav-bar .dropdown-menu li a {
        color: #dfd5c0 !important;
        /* Mobile: soft champagne gold on dark menu background */
        font-size: 1.18rem !important;
        padding: 8px 0;
        text-transform: capitalize;
        letter-spacing: 0.5px;
        display: block;
        background: transparent !important;
    }

    #nav-bar .dropdown-menu li a:hover {
        color: var(--gold-primary) !important;
        background: transparent !important;
        padding-left: 5px;
    }

    /* Mobile chevron and link state */
    #nav-bar ul li a i {
        transition: transform 0.3s ease;
    }

    #nav-bar ul li a.link-active i {
        transform: rotate(180deg);
        color: var(--gold-primary);
    }

    .dropdown-menu::before {
        display: none;
    }

    .hero-slider {
        height: 520px;
        /* Keep enough height on mobile for stacked split slider */
    }

    .slide-split-container {
        flex-direction: column-reverse;
    }

    .slide-text-col {
        width: 100%;
        height: 45%;
        padding: 25px 20px;
        text-align: center;
        justify-content: center;
    }

    .slide-image-col {
        width: 100%;
        height: 55%;
    }

    .slide-text-inner {
        transform: translateY(15px);
    }

    .slide-text-inner h2 {
        font-size: 1.8rem;
        margin-bottom: 8px;
    }

    .slide-text-inner p {
        font-size: 0.85rem;
        margin-bottom: 15px;
        margin-left: auto;
        margin-right: auto;
        max-width: 100%;
    }

    .slide-text-inner .btn-group {
        justify-content: center;
        gap: 12px;
    }

    .slide-text-inner .btn-gold,
    .slide-text-inner .btn-outline {
        padding: 10px 20px;
        font-size: 0.72rem;
    }

    .slider-arrows {
        display: none;
    }

    .slider-dots {
        left: 50% !important;
        transform: translateX(-50%);
        bottom: 15px;
    }

    .sidebar-panel {
        width: 100%;
        right: -100%;
    }

    .bordered-grid-container {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Responsive reference sections */
    .showcase-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .showcase-card {
        height: 380px;
    }

    .book-visit-inner {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .book-visit-text h2 {
        font-size: 1.8rem;
    }

    /* Responsive layout enhancements for tablet/mobile */
    .bs-scroll-track {
        overflow-x: auto !important;
        /* Enable swipe scroll on mobile */
        padding: 0 16px 16px;
        gap: 12px;
    }

    .gold-rates-wrapper {
        grid-template-columns: 1fr !important;
        gap: 30px;
    }

    .booking-wrapper {
        grid-template-columns: 1fr !important;
        gap: 40px;
    }

    .booking-card {
        padding: 30px !important;
    }

    .booking-info h2 {
        font-size: 2rem !important;
        text-align: center;
    }

    .booking-info p {
        text-align: center;
    }

    .slide-image-inner {
        background-size: 100% auto;
        background-position: center top;
        transform: none;
    }
}

@media (max-width: 480px) {
    .hero-slider {
        height: 480px;
        /* Comfortably fits the stacked content on narrow mobile screens */
    }

    .slide-text-col {
        height: 50%;
        padding: 15px 15px;
    }

    .slide-image-col {
        height: 50%;
    }

    .slide-text-inner h2 {
        font-size: 1.45rem;
        margin-bottom: 6px;
    }

    .slide-text-inner p {
        display: none;
        /* Hide description text on very small mobile to prevent overflow */
    }

    .slide-text-inner .btn-group {
        gap: 8px;
    }

    .slide-text-inner .btn-gold,
    .slide-text-inner .btn-outline {
        padding: 8px 15px;
        font-size: 0.68rem;
    }

    .bordered-grid-container {
        grid-template-columns: 1fr;
    }

    .footer-top {
        grid-template-columns: 1fr;
        padding: 0 20px;
    }

    .footer-links {
        padding-left: 4px;
    }

    .footer-col h3 {
        padding-left: 2px;
    }

    .footer-bottom-inner {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    .calc-grid {
        grid-template-columns: 1fr;
    }

    .calculator-card {
        padding: 30px;
    }

    .booking-card form {
        grid-template-columns: 1fr !important;
    }

    .booking-card .full-width {
        grid-column: span 1 !important;
    }

    .brand-legacy-section h2 {
        font-size: 1.9rem;
    }

    .about-img-col.left-col {
        flex: 0 0 220px;
        width: 220px;
        height: 330px;
    }



    .category-header h2 {
        font-size: 1.5rem;
    }

    .budget-circle {
        width: 100px;
        height: 100px;
    }

    .budget-circle .price-val {
        font-size: 1.25rem;
    }

    .budget-grid {
        gap: 15px;
    }

    .showcase-card {
        height: 320px;
    }

    .showcase-content {
        bottom: 25px;
        left: 25px;
        right: 25px;
    }

    .showcase-content h3 {
        font-size: 1.6rem;
    }

    .book-visit-banner {
        padding: 40px 0;
    }

    .book-visit-text h2 {
        font-size: 1.5rem;
    }

    .book-visit-text p {
        font-size: 0.85rem;
    }
}

/* Reusable Section Image Banners (Malabar Gold style dividers) */
.section-image-banner {
    position: relative;
    width: 100%;
    height: 380px;
    /* Elegant height for divider banners */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.section-banner-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 1;
}

.section-image-banner:hover .section-banner-bg {
    transform: scale(1.03);
}

.section-banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.3) 100%);
    z-index: 2;
}

.section-banner-content {
    position: relative;
    z-index: 3;
    color: #ffffff;
    text-align: left;
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

.section-banner-content h3 {
    font-family: var(--font-serif);
    font-size: 2.8rem;
    line-height: 1.2;
    margin-bottom: 12px;
    letter-spacing: 1px;
    color: #ffffff;
}

.section-banner-content p {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold-primary);
    margin-bottom: 8px;
    display: block;
}

@media (max-width: 768px) {
    .section-image-banner {
        height: 250px;
    }

    .section-banner-content h3 {
        font-size: 1.8rem;
    }

    .section-banner-content p {
        font-size: 0.72rem;
        letter-spacing: 1.5px;
    }
}

/* Brand Trust Banner (At the bottom of the page) */
.brand-trust-banner-section {
    width: 100%;
    overflow: hidden;
    background-color: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.trust-banner-img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    display: block;
}

@media (max-width: 768px) {
    .trust-banner-img {
        height: 200px;
    }
}

/* Brides of India Banner (Under Best Sellers) */
.brides-india-banner-wrap {
    width: 100%;
    overflow: hidden;
    background-color: var(--bg-primary);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.brides-india-img {
    width: 100%;
    height: auto;
    display: block;
    transition: var(--transition-smooth);
}

.brides-india-banner-wrap:hover .brides-india-img {
    transform: scale(1.015);
}


/* ==========================================================================
   Collections Grid Section (Reference Style layout)
   ========================================================================== */
.collections-grid-section {
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    padding: 16px 0;
    /* Radically reduced from 40px */
}

.collections-grid-container {
    display: flex;
    gap: 12px;
    margin-top: 10px;
}

/* Left Tall Banner Column */
.collections-left-banner {
    flex: 0 0 33%;
    /* Further increased width for category prominence */
    max-width: 33%;
    display: flex;
    flex-direction: column;
}

.collections-left-banner .banner-img-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    flex-grow: 1;
    /* Stretch banner image height to match right grid */
    overflow: hidden;
    background-color: #000;
}

.collections-left-banner .featured-banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%) contrast(125%) brightness(85%);
    transition: var(--transition-smooth);
}

.collections-left-banner:hover .featured-banner-img {
    transform: scale(1.05);
}

.collections-left-banner .banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.4) 40%, transparent 100%);
    z-index: 2;
}

.collections-left-banner .banner-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px;
    z-index: 3;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.collections-left-banner .banner-tag {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--gold-primary);
    margin-bottom: 10px;
}

.collections-left-banner .banner-title {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    /* Shrunk from 1.5rem */
    font-weight: 400;
    letter-spacing: 1.5px;
    margin-bottom: 6px;
    /* Shrunk from 12px */
    color: #ffffff;
}

.collections-left-banner .banner-link-btn {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #ffffff;
    border-bottom: 1px solid var(--gold-primary);
    padding-bottom: 5px;
    transition: var(--transition-quick);
}

.collections-left-banner .banner-link-btn i {
    font-size: 0.7rem;
    margin-left: 5px;
    transition: transform 0.3s ease;
}

.collections-left-banner .banner-link-btn:hover {
    color: var(--gold-primary);
}

.collections-left-banner .banner-link-btn:hover i {
    transform: translateX(4px);
}

/* Right Grid Column */
.collections-right-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: stretch;
    /* Force equal height for all cards in a row */
}

/* Product Card Styling */
.coll-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    /* Ensure card fills the full height of grid cell */
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    transition: var(--transition-smooth);
}

.coll-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
    border-color: var(--gold-primary);
}

.coll-card-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    /* Shrunk from 1/1 to landscape 4/3 to reduce image height */
    overflow: hidden;
    background-color: var(--bg-primary);
}

.coll-card-img-wrap img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-smooth);
}

.coll-card:hover .coll-card-img-wrap img {
    transform: scale(1.04);
}

.coll-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    font-family: var(--font-sans);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 3px 10px;
    z-index: 5;
    color: #ffffff;
}

.coll-badge.bestseller {
    background-color: #000000;
    color: #ffffff;
}

.coll-badge.new {
    background-color: var(--gold-primary);
    color: #000000;
}

.coll-badge.sale {
    background-color: #b12704;
    color: #ffffff;
}

.coll-wishlist-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    color: var(--text-secondary);
    transition: var(--transition-quick);
}

.coll-wishlist-btn:hover {
    color: #b12704;
    background-color: var(--bg-primary);
    transform: scale(1.1);
}

.coll-wishlist-btn.active {
    color: #e21b1b;
    border-color: #e21b1b;
}

.coll-wishlist-btn.active i {
    font-weight: 900;
    /* Filled heart icon */
}

.coll-wishlist-btn i {
    font-size: 0.82rem;
}

/* Hover Actions overlays */
.coll-card-hover-actions {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: var(--transition-quick);
    z-index: 4;
}

.coll-card:hover .coll-card-hover-actions {
    opacity: 1;
}

.coll-wa-btn {
    background: var(--gold-gradient);
    color: #000;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 12px 24px;
    border: none;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition-quick);
}

.coll-wa-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    filter: brightness(1.1);
}

.coll-card-info {
    padding: 8px;
    /* Shrunk from 10px */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 4px;
    /* Shrunk from 6px */
    background-color: var(--bg-secondary);
    flex-grow: 1;
    border-top: 1px solid var(--border-color);
}

.coll-card-name {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    /* Shrunk from 0.78rem */
    font-weight: 500;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.coll-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.coll-card-price {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    /* Shrunk from 0.82rem */
    font-weight: 600;
    color: var(--gold-primary);
}

.coll-card-status.out-of-stock {
    color: #d93838;
    font-size: 0.72rem;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
}

.coll-stars {
    display: flex;
    gap: 3px;
    color: #e6b800;
    font-size: 0.72rem;
}

/* Responsiveness */
@media (max-width: 1300px) {
    .collections-left-banner {
        flex: 0 0 32%;
        max-width: 32%;
    }

    .collections-right-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

@media (max-width: 992px) {
    .collections-grid-container {
        flex-direction: column;
    }

    .collections-left-banner {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .collections-left-banner .banner-img-wrap {
        min-height: 450px;
        height: 450px;
    }

    .collections-right-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
}

@media (max-width: 576px) {
    .collections-right-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .coll-card {
        max-width: 290px;
        margin: 0 auto;
        width: 100%;
    }

    .collections-grid-section {
        padding: 40px 0;
    }

    .sidebar-panel {
        width: 100%;
        right: -100%;
        padding: 24px;
    }
}


/* ==========================================================================
   Latest Collections Section (Three Column Layout)
   ========================================================================== */
/* ==========================================================================
   Latest Collections Section (Three Column Layout) - Used for Gifting
   ========================================================================== */
.latest-collections-section {
    background-color: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    padding: 60px 0;
}

.gifting-grid-container.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -12px;
    margin-left: -12px;
    margin-top: 25px;
}

.gifting-grid-container.row>[class*="col-"] {
    padding-right: 12px;
    padding-left: 12px;
    margin-bottom: 24px;
    box-sizing: border-box;
}

.gifting-grid-container .col-12 {
    flex: 0 0 100%;
    max-width: 100%;
}

@media (min-width: 768px) {
    .gifting-grid-container .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .gifting-grid-container .col-md-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .gifting-grid-container .offset-md-2 {
        margin-left: 16.666667%;
    }
}

.gifting-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    transition: var(--transition-smooth);
}

.gifting-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    border-color: var(--gold-primary);
}

.gifting-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    /* Widescreen ratio for 1920x1080 videos/images */
    overflow: hidden;
    background-color: #000;
}

.gifting-img-wrap img,
.gifting-img-wrap video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: var(--transition-smooth);
}

.gifting-card:hover .gifting-img-wrap img,
.gifting-card:hover .gifting-img-wrap video {
    transform: scale(1.04);
}

.gifting-card-hover-actions {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: var(--transition-quick);
    z-index: 4;
}

.gifting-img-wrap:hover .gifting-card-hover-actions {
    opacity: 1;
}

.gifting-wa-btn {
    background: var(--gold-gradient);
    color: #000 !important;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: var(--transition-quick);
}

.gifting-wa-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    filter: brightness(1.1);
}

.gifting-label {
    text-align: center;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    padding: 15px 10px;
    letter-spacing: 0.5px;
    border-top: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
}

/* Responsive styles for Gifting Grid handled by bootstrap-replica flex rules */


/* ==========================================================================
   Namaste Welcome Banner Section
   ========================================================================== */
.namaste-banner-section {
    position: relative;
    background-image: url('assets/images/navratri-banner.webp');
    background-size: cover;
    background-position: left center;
    background-attachment: scroll;
    min-height: 380px;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 40px 0;
    margin-top: 50px;
    /* Added spacing from top section */
}

.namaste-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Gradient leaves the left 40% (where the gentleman is) relatively clear, 
       while fading to a dark theme on the right for readability */
    background: linear-gradient(to right, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.5) 45%, rgba(0, 0, 0, 0.8) 100%);
    z-index: 1;
}

/* Ensure container elements stay above overlay */
.namaste-container {
    position: relative;
    z-index: 2;
    width: 100%;
}

.namaste-content-wrap {
    max-width: 50%;
    margin-left: auto;
    /* Push text to the right side where the space is empty */
    color: #ffffff;
    padding: 30px;
    background: rgba(0, 0, 0, 0.25);
    /* Subtle dark box backing for text readability */
    backdrop-filter: blur(4px);
    border-left: 3px solid var(--gold-primary);
    border-radius: 4px;
}

.namaste-subtitle {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--gold-primary);
    display: block;
    margin-bottom: 12px;
}

.namaste-title {
    font-size: 2.2rem;
    font-weight: 400;
    margin-bottom: 20px;
    line-height: 1.25;
    letter-spacing: 1px;
}

.namaste-desc {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 30px;
}

.namaste-action .btn-gold {
    display: inline-block;
    padding: 12px 28px;
    font-size: 0.78rem;
    letter-spacing: 2px;
}

/* Responsive updates for Namaste Banner */
@media (max-width: 992px) {
    .namaste-overlay {
        /* On tablet/mobile, use a stronger uniform dark overlay so text is readable overlaying the gentleman */
        background: rgba(0, 0, 0, 0.7);
    }

    .namaste-content-wrap {
        max-width: 100%;
        margin-left: 0;
        text-align: center;
        border-left: none;
        border-top: 3px solid var(--gold-primary);
        padding: 24px;
    }

    .namaste-title {
        font-size: 1.8rem;
    }
}

@media (max-width: 576px) {
    .namaste-banner-section {
        min-height: 280px;
    }

    .namaste-title {
        font-size: 1.5rem;
    }

    .namaste-desc {
        font-size: 0.85rem;
    }
}

/* ==========================================================================
   New Premium Responsive Header Styles
   ========================================================================== */
@media (max-width: 1024px) {
    .header-search-wrap {
        max-width: 320px;
    }

    .service-highlights-bar {
        display: none !important;
        /* Hide highlights bar on phone and tablet */
    }
}

@keyframes tickerMarquee {
    0% {
        transform: translate3d(100vw, 0, 0);
    }

    100% {
        transform: translate3d(-100%, 0, 0);
    }
}

@media (max-width: 768px) {
    .utility-bar {
        position: sticky !important;
        top: 0 !important;
        z-index: 1002 !important;
        display: block !important;
        padding: 8px 0;
        overflow: hidden !important;
    }

    header {
        position: sticky !important;
        top: 0 !important;
        /* Offset for the sticky utility bar */
        z-index: 1000 !important;
    }

    .utility-inner {
        width: 100%;
        padding: 0;
        overflow: hidden !important;
    }

    .utility-right {
        display: none !important;
    }

    .utility-left {
        display: flex !important;
        align-items: center;
        gap: 15px;
        flex-wrap: nowrap !important;
        width: max-content !important;
        animation: tickerMarquee 25s linear infinite !important;
        will-change: transform;
    }

    .utility-left:hover,
    .utility-left:active {
        animation-play-state: paused !important;
    }

    .utility-left .rate-flash {
        flex: 0 0 auto !important;
        padding: 6px 14px !important;
        font-size: 16px !important;
    }

    .header-main-inner {
        flex-wrap: wrap;
        justify-content: space-between;
        row-gap: 12px;
    }

    /* App-style header: menu at the far left, logo centred, wishlist right.
       The three items are equal-width flex cells so the logo stays optically
       centred no matter how wide the side icons are. */
    .hamburger {
        order: 1;
        display: flex !important;
        margin-left: 0;
        flex: 0 0 44px;
        /* comfortable 44px tap target */
        align-items: center;
        justify-content: flex-start;
        min-height: 44px;
    }

    .logo {
        order: 2;
        flex: 1 1 auto;
        display: flex;
        justify-content: center;
    }

    .logo a {
        justify-content: center;
    }

    .header-actions {
        order: 3;
        margin-left: 0;
        flex: 0 0 44px;
        justify-content: flex-end;
        min-height: 44px;
    }

    #cart-btn {
        display: none !important;
    }

    .header-search-wrap {
        display: flex !important;
        order: 4;
        width: 100%;
        max-width: 100%;
        margin-top: 5px;
    }

    .header-actions .action-btn#search-btn {
        display: none !important;
    }

    .header-nav-row {
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
    }

    .countdown-ticker-wrap {
        display: none !important;
    }

    /* Old rule hid EVERY action button on phones, which left the right side of
       the header empty. The wishlist heart is a real feature, so it stays —
       only the (removed) cart / theme buttons and the duplicate search icon go. */
    .header-actions .action-btn:not(#wishlist-trigger-btn) {
        display: none !important;
    }

    .header-actions #wishlist-trigger-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        position: relative;
        min-width: 44px;
        min-height: 44px;
    }

    .highlights-inner {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    /* Cinematic Hero Slider Mobile Adjustments */
    .hero-slider {
        height: auto;
        min-height: 390px;
    }

    .slide-split-container {
        flex-direction: column;
    }

    .slide-text-col {
        width: 100%;
        height: auto;
        order: 2;
        padding: 40px 20px 80px;
        background: #12100d;
        text-align: center;
    }

    .slide-text-col::after {
        display: none;
    }

    .slide-image-col {
        width: 100%;
        height: 400px;
        order: 1;
    }

    .slide-image-col::before {
        /* background: linear-gradient(0deg, #12100d 0%, rgba(18, 16, 13, 0.4) 40%, rgba(18, 16, 13, 0) 100%); */
        background: linear-gradient(0deg, #12100db3 0%, rgba(18, 16, 13, 0.4) 40%, rgba(18, 16, 13, 0) 100%);
    }

    .slide-text-inner {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .slide-text-inner h4 {
        font-size: 0.72rem;
        justify-content: center;
    }

    .slide-text-inner h2 {
        font-size: 2.2rem;
        margin-bottom: 15px;
    }

    .slide-text-inner p {
        font-size: 0.88rem;
        margin-bottom: 25px;
        text-align: center;
    }

    .slide-text-inner,
    .slide.active .slide-text-inner,
    .slide-text-inner .btn-group {
        transform: none !important;
        opacity: 1 !important;
        transition: none !important;
        animation: none !important;
    }

    .slide-text-inner .btn-group {
        position: sticky;
        bottom: 18px;
        left: 0;
        width: calc(100% + 0px);
        justify-content: center;
        flex-wrap: wrap;
        gap: 12px;
        z-index: 12;
        margin-top: 0;
        padding-top: 6px;
    }

    .slide-text-inner .btn-group a {
        flex: 1 1 auto;
        min-width: 150px;
        width: 100%;
        max-width: 320px;
        padding: 16px 20px;
        font-size: 0.72rem;
        letter-spacing: 2px;
        border-radius: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 54px;
        line-height: 1.2;
        font-weight: 600;
        transition: none;
        position: relative;
    }

    .slide-text-inner .btn-gold {
        background: linear-gradient(135deg, rgba(184, 143, 74, 0.95), rgba(230, 204, 143, 0.9));
        color: #120f0c;
        border: 1px solid rgba(226, 188, 94, 0.95);
        box-shadow: 0 8px 22px rgba(175, 129, 55, 0.18);
    }

    .slide-text-inner .btn-outline {
        background: rgba(18, 16, 13, 0.32);
        color: #f4efe8;
        border: 1px solid rgba(196, 156, 73, 0.75);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    }

    .slider-arrows {
        bottom: auto;
        top: 220px;
        right: 15px;
        gap: 8px;
    }

    .arrow-btn {
        width: 40px;
        height: 40px;
        font-size: 0.8rem;
    }

    .slider-dots {
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        gap: 8px;
    }

    .dot {
        width: 25px;
    }

    .dot.active {
        width: 40px;
    }

    /* Category Section Mobile Styling */
    .category-section {
        padding: 30px 0;
    }

    .category-header {
        margin-bottom: 20px;
        padding-left: 20px;
    }

    .category-header h2 {
        font-size: 1.6rem;
    }

    .category-marquee-track {
        gap: 20px;
        padding: 5px 0 10px;
    }

    .category-card {
        flex: 0 0 85px;
        width: 85px;
        gap: 8px;
    }

    .category-circle {
        width: 80px;
        height: 80px;
        padding: 2px;
    }

    .category-name {
        font-size: 0.7rem;
        letter-spacing: 1px;
        height: 28px;
    }
}

/* Remove WhatsApp Inquiry Hover Actions completely from all pages */
.bs-card-hover-actions,
.coll-card-hover-actions,
.latest-card-hover-actions {
    display: none !important;
}

/* ==========================================================================
   Ultra-Wide Screen Optimization (Responsive enhancements for 1600px, 1920px, 2560px+)
   ========================================================================== */

/* Base style for the new logo-img class */
.logo-img {
    height: 50px;
    width: auto;
    display: block;
    object-fit: contain;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), filter 0.4s ease;
}

@media (min-width: 1600px) {
    :root {
        --container-max-width: 1520px;
    }

    .logo-img {
        height: 60px;
    }

    .header-search-wrap {
        max-width: 550px;
    }

    .header-search-wrap:focus-within {
        max-width: 620px;
    }

    .action-btn,
    .control-btn {
        width: 44px;
        height: 44px;
        font-size: 1.25rem;
    }

    #nav-bar ul {
        gap: 30px;
    }

    #nav-bar ul li a {
        font-size: 16px;
    }

    /* Namaste banner scaling */
    .namaste-banner-section {
        min-height: 480px;
    }
}

@media (min-width: 1920px) {
    :root {
        --container-max-width: 1820px;
    }

    .logo-img {
        height: 70px;
    }

    .header-search-wrap {
        max-width: 650px;
    }

    .header-search-wrap:focus-within {
        max-width: 750px;
    }

    .action-btn,
    .control-btn {
        width: 48px;
        height: 48px;
        font-size: 1.35rem;
    }

    #nav-bar ul {
        gap: 38px;
    }

    #nav-bar ul li a {
        font-size: 18px;
    }

    /* Highlight bar scaling */
    .highlight-icon {
        width: 38px;
        height: 38px;
        font-size: 1.35rem;
    }

    .highlight-text strong {
        font-size: 0.82rem;
    }

    .highlight-text span {
        font-size: 0.72rem;
    }

    /* Hero section scaling */
    /* .hero-slider {
        height: 620px;
    } */
    .hero-slider {
        height: 900px;
    }

    .slide-text-inner h4 {
        font-size: 0.95rem;
    }

    .slide-text-inner h2 {
        font-size: 3.8rem;
    }

    .slide-text-inner p {
        font-size: 1.1rem;
        max-width: 650px;
    }

    /* Center cards in best sellers to prevent too large gaps */
    .bs-scroll-track {
        justify-content: center;
        gap: 35px;
    }

    .bs-card {
        flex: 0 0 380px;
        max-width: 380px;
    }

    .bs-card-name {
        font-size: 1.15rem;
    }

    .bs-card-meta {
        font-size: 0.88rem;
    }

    .bs-card-price {
        font-size: 1.15rem;
    }

    /* About section scaling */
    .about-img-col {
        flex: 0 0 300px;
        width: 300px;
        height: 460px;
    }

    .about-editorial-flow {
        max-width: 700px;
    }

    /* Namaste banner scaling */
    .namaste-banner-section {
        min-height: 540px;
    }

    /* Gifting section scaling */
    .latest-cols-container {
        height: 620px;
    }

    .latest-img-wrap.split-wrap {
        height: 250px;
    }

    /* Product detail page scaling */
    .product-detail-inner {
        max-width: 1500px;
        margin: 0 auto;
        gap: 70px;
    }

    .breadcrumb-bar {
        font-size: 1.05rem;
    }

    .product-cat-tag {
        font-size: 16px;
    }

    .product-title {
        font-size: 3.2rem;
    }

    .curr-price {
        font-size: 2.4rem;
    }

    .product-desc-short {
        font-size: 1.2rem;
    }

    .tile-label {
        font-size: 0.8rem;
    }

    .tile-val {
        font-size: 1.1rem;
    }

    .size-label {
        font-size: 1.0rem;
    }

    .size-guide-link {
        font-size: 16px;
    }

    .size-btn {
        width: 52px;
        height: 52px;
        font-size: 1.05rem;
    }

    .add-to-bag-btn,
    .wa-inquiry-btn {
        font-size: 1.05rem;
        padding: 20px 28px;
    }

    .trust-item span {
        font-size: 1.0rem;
    }

    .tab-trigger {
        font-size: 1.1rem;
    }

    .specs-table td {
        font-size: 1.1rem;
        padding: 16px 28px;
    }

    .specs-table tr td:first-child {
        font-size: 16px;
    }

    .tab-desc-text {
        font-size: 1.15rem;
    }

    .product-gallery-wrap {
        max-width: 700px;
    }
}

@media (min-width: 2560px) {
    :root {
        --container-max-width: 2320px;
    }

    .logo-img {
        height: 85px;
    }

    .header-search-wrap {
        max-width: 800px;
    }

    .header-search-wrap:focus-within {
        max-width: 900px;
    }

    .action-btn,
    .control-btn {
        width: 54px;
        height: 54px;
        font-size: 1.55rem;
    }

    #nav-bar ul {
        gap: 48px;
    }

    #nav-bar ul li a {
        font-size: 1.18rem;
    }

    /* Highlight bar scaling */
    .highlight-icon {
        width: 46px;
        height: 46px;
        font-size: 1.6rem;
    }

    .highlight-text strong {
        font-size: 0.95rem;
    }

    .highlight-text span {
        font-size: 0.85rem;
    }

    /* Hero section scaling */
    .hero-slider {
        height: 750px;
    }

    .slide-text-inner h4 {
        font-size: 1.15rem;
        letter-spacing: 7px;
    }

    .slide-text-inner h2 {
        font-size: 4.8rem;
        margin-bottom: 24px;
    }

    .slide-text-inner p {
        font-size: 1.3rem;
        max-width: 800px;
        margin-bottom: 40px;
    }

    /* Best Sellers alignment and cards */
    .bs-scroll-track {
        justify-content: center;
        gap: 50px;
    }

    .bs-card {
        flex: 0 0 480px;
        max-width: 480px;
    }

    .bs-card-name {
        font-size: 1.35rem;
    }

    .bs-card-meta {
        font-size: 1.05rem;
    }

    .bs-card-price {
        font-size: 1.35rem;
    }

    /* About section scaling */
    .about-img-col {
        flex: 0 0 380px;
        width: 380px;
        height: 580px;
    }

    .about-editorial-flow {
        max-width: 850px;
    }

    /* Namaste banner scaling */
    .namaste-banner-section {
        min-height: 640px;
    }

    .editorial-p {
        font-size: 1.1rem;
        line-height: 1.85;
    }

    .drop-cap {
        font-size: 4.0rem;
    }

    .brand-legacy-section h2 {
        font-size: 3.2rem;
    }

    .about-tag {
        font-size: 0.95rem;
        letter-spacing: 8px;
    }

    .signature-block {
        max-width: 500px;
    }

    .signature-text {
        font-size: 2.2rem;
    }

    .signature-sub {
        font-size: 0.85rem;
    }

    /* Gifting section scaling */
    .latest-cols-container {
        height: 750px;
    }

    .latest-img-wrap.split-wrap {
        height: 310px;
    }

    /* Product detail page scaling */
    .product-detail-inner {
        max-width: 1800px;
        margin: 0 auto;
        gap: 85px;
    }

    .breadcrumb-bar {
        font-size: 1.05rem;
        padding: 18px 0;
    }

    .product-cat-tag {
        font-size: 0.95rem;
        letter-spacing: 4px;
    }

    .product-title {
        font-size: 4.2rem;
    }

    .rating-stars {
        font-size: 1.15rem;
    }

    .rating-text {
        font-size: 0.95rem;
    }

    .curr-price {
        font-size: 3.2rem;
    }

    .price-tax-label {
        font-size: 16px;
    }

    .product-desc-short {
        font-size: 1.45rem;
        line-height: 1.75;
    }

    .tile-label {
        font-size: 0.82rem;
        letter-spacing: 1.5px;
    }

    .tile-val {
        font-size: 1.3rem;
    }

    .size-label {
        font-size: 1.05rem;
    }

    .size-guide-link {
        font-size: 0.95rem;
    }

    .size-btn {
        width: 64px;
        height: 64px;
        font-size: 1.2rem;
    }

    .add-to-bag-btn,
    .wa-inquiry-btn {
        font-size: 1.2rem;
        padding: 24px 38px;
    }

    .trust-item i {
        font-size: 1.2rem;
        width: 24px;
    }

    .trust-item span {
        font-size: 1.2rem;
    }

    .tab-trigger {
        font-size: 1.3rem;
        letter-spacing: 3px;
    }

    .specs-table td {
        font-size: 1.3rem;
        padding: 20px 35px;
    }

    .specs-table tr td:first-child {
        font-size: 1.05rem;
    }

    .tab-desc-text {
        font-size: 1.4rem;
        line-height: 2.0;
        max-width: 1000px;
    }

    .product-gallery-wrap {
        top: 180px;
        max-width: 880px;
    }

    .main-image-container {
        border-radius: 12px;
    }

    .thumb-item {
        width: 120px;
        height: 120px;
        border-radius: 8px;
    }

    .thumb-item img {
        border-radius: 6px;
    }
}

@media (max-width:1440x) {
    .hero-slider {
        height: 750px;
    }
}

@media (max-width: 768px) {
    .product-tabs-header {
        gap: 15px;
    }

    .tab-trigger {
        font-size: 0.7rem;
        letter-spacing: 1px;
    }
}

/* ==========================================================================
   RESPONSIVE - Missing sections coverage (768px tablets & 480px phones)
   Sections: Rates, Calculator, Testimonials, Booking, Contact, Newsletter
   ========================================================================== */

@media (max-width: 768px) {

    /* ---- Rates & Calculator Section ---- */
    .gold-rates-wrapper {
        grid-template-columns: 1fr;
        /* Stack rates and calculator vertically */
        gap: 30px;
    }

    .rates-side {
        padding: 30px 20px;
    }

    .rates-side h3 {
        font-size: 1.4rem;
        margin-bottom: 20px;
    }

    .calculator-card {
        padding: 30px 20px;
    }

    .calculator-card h3 {
        font-size: 1.4rem;
        margin-bottom: 20px;
    }

    .calc-grid {
        grid-template-columns: 1fr;
        /* Stack input fields */
        gap: 18px;
    }

    .rate-price {
        font-size: 1.2rem;
    }

    .result-row.total {
        font-size: 1.4rem;
    }

    /* ---- Testimonials ---- */
    .testimonials-slider {
        max-width: 100%;
        padding: 0 10px;
    }

    .testimonial-slide {
        padding: 20px 10px;
    }

    .testimonial-slide p {
        font-size: 1.2rem;
        /* Smaller quote text on mobile */
        margin-bottom: 20px;
    }

    .testimonial-slide .author {
        font-size: 0.75rem;
        letter-spacing: 2px;
    }

    /* ---- Booking / Appointment Section ---- */
    .booking-grid {
        grid-template-columns: 1fr;
        /* Stack booking cards */
        gap: 20px;
    }

    .booking-card {
        padding: 30px 20px;
    }

    .booking-form-grid {
        grid-template-columns: 1fr;
        /* Stack form inputs */
        gap: 15px;
    }

    .booking-card h3 {
        font-size: 1.4rem;
    }

    /* ---- Contact Section ---- */
    .contact-grid {
        grid-template-columns: 1fr;
        /* Stack map and form vertically */
        gap: 30px;
    }

    .contact-info-wrap {
        padding: 30px 20px;
    }

    .contact-form-wrap {
        padding: 30px 20px;
    }

    .contact-form-row {
        grid-template-columns: 1fr;
        /* Stack name/phone inputs */
        gap: 15px;
    }

    /* ---- Newsletter Section ---- */
    .newsletter-section {
        padding: 50px 15px;
    }

    .nl-heading {
        font-size: 1.8rem;
    }

    .nl-sub {
        font-size: 16px;
    }

    .nl-form {
        flex-direction: column;
        border-radius: 6px;
    }

    .nl-input {
        border-radius: 4px 4px 0 0;
        padding: 14px 18px;
    }

    .nl-btn {
        border-radius: 0 0 4px 4px;
        padding: 14px;
        width: 100%;
        text-align: center;
    }

    /* ---- Footer ---- */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        /* 2-column footer on tablet */
        gap: 30px;
    }

    .footer-col:first-child {
        grid-column: 1 / -1;
        /* Brand column spans full width */
    }
}

@media (max-width: 480px) {

    /* ---- Rates ---- */
    .rate-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 14px 0;
    }

    .rate-price {
        font-size: 1.1rem;
    }

    /* ---- Testimonials ---- */
    .testimonial-slide p {
        font-size: 1rem;
        line-height: 1.6;
    }

    /* ---- Booking ---- */
    .booking-card {
        padding: 24px 16px;
    }

    /* ---- Newsletter ---- */
    .nl-heading {
        font-size: 1.5rem;
    }

    /* ---- Footer ---- */
    .footer-grid {
        grid-template-columns: 1fr;
        /* Single column on small phones */
    }

    .footer-col:first-child {
        grid-column: auto;
    }

    .footer-bottom-inner {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
}

/* ==========================================================================
   Catalog / Categories Page Premium Styles
   ========================================================================== */
.catalog-banner {
    background: linear-gradient(rgba(18, 16, 13, 0.8), rgba(18, 16, 13, 0.9)), url('assets/images/hero-bridal-new.webp') center/cover no-repeat;
    padding: 80px 0;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
}

.catalog-banner-title {
    font-size: 3rem;
    color: #dfd5c0;
    margin-bottom: 10px;
    letter-spacing: 2px;
}

.catalog-banner-sub {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 3px;
}

.catalog-layout-container {
    background-color: var(--bg-primary);
    padding: 60px 0;
}

.catalog-layout-inner {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 40px;
    align-items: start;
}

/* Sidebar Styling */
.catalog-sidebar {
    position: sticky;
    top: 140px;
    /* Beneath sticky header */
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    padding: 30px;
    border-radius: 4px;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.02);
    transition: top 0.4s ease;
    max-height: calc(100vh - 180px);
    overflow-y: auto;
}

/* Scrollbar inside sidebar if needed */
.catalog-sidebar::-webkit-scrollbar {
    width: 4px;
}

.catalog-sidebar::-webkit-scrollbar-thumb {
    background: var(--border-solid);
}

.sidebar-header-inline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 15px;
    margin-bottom: 25px;
}

.sidebar-header-inline h3 {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    color: var(--text-primary);
}

.close-mobile-filters {
    display: none;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 1.2rem;
    cursor: pointer;
}

.filter-group {
    margin-bottom: 25px;
}

.filter-group-title {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--gold-primary);
    margin-bottom: 15px;
    display: block;
}

.filter-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.filter-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition-quick);
}

.filter-item:hover {
    color: var(--text-primary);
}

.filter-item input {
    accent-color: var(--gold-primary);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.filter-item.active {
    color: var(--gold-primary);
    font-weight: 500;
}

.btn-clear-filters {
    display: block;
    width: 100%;
    background: transparent;
    border: 1px solid var(--gold-primary);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 12px;
    cursor: pointer;
    text-align: center;
    transition: var(--transition-smooth);
    margin-top: 10px;
}

.btn-clear-filters:hover {
    background: var(--gold-gradient);
    color: #000;
    border-color: transparent;
}

/* Catalog Filter Header and Grid */
.catalog-filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 15px;
}

.catalog-results-count {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.catalog-sort-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.catalog-sort-label {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.catalog-sort-select {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 8px 16px;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    border-radius: 4px;
    outline: none;
    cursor: pointer;
}

.catalog-products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* Animation for filtered products */
.catalog-products-grid .bs-card {
    animation: itemFadeIn 0.5s ease forwards;
}

@keyframes itemFadeIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.catalog-empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 80px 20px;
}

.catalog-empty-state i {
    font-size: 3rem;
    color: var(--border-color);
    margin-bottom: 20px;
}

.catalog-empty-state p {
    font-family: var(--font-sans);
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

/* Mobile Filter Controls */
.mobile-filter-controls {
    display: none;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    gap: 15px;
}

.btn-mobile-filter {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 12px;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
}

/* Responsive Overrides */
@media (max-width: 992px) {
    .catalog-layout-inner {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .catalog-products-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mobile-filter-controls {
        display: flex;
    }

    /* Transform sidebar to slide-in drawer on mobile */
    .catalog-sidebar {
        position: fixed;
        top: 0;
        left: -100%;
        width: 300px;
        height: 100vh;
        max-height: 100vh;
        z-index: 2000;
        background-color: var(--bg-secondary);
        box-shadow: none;
        transition: left 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
        overflow-y: auto;
        border-radius: 0;
        border: none;
        border-right: 1px solid var(--border-color);
    }

    .catalog-sidebar.active {
        left: 0;
        box-shadow: 15px 0 40px rgba(0, 0, 0, 0.4);
    }

    .close-mobile-filters {
        display: block;
    }
}

@media (max-width: 576px) {
    .catalog-products-grid {
        grid-template-columns: 1fr;
        max-width: 320px;
        margin: 0 auto;
    }

    .catalog-banner-title {
        font-size: 2.2rem;
    }
}

/* ul.dropdown-menu.flex-column.d-flex{
    display: flex !important;
    flex-direction: column !important;
    width: max-content;
} */

.latest-img-wrap {
    position: relative;
    overflow: hidden;
}

.latest-img-wrap video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Keep content above video */
.latest-card-hover-actions,
.latest-label {
    position: relative;
    z-index: 2;
}

.text-dark {
    color: #1f1f1f !important;
}

/* ==========================================================================
   Contact Us Page - Custom Luxury Styling
   ========================================================================== */
.contact-hero-banner {
    position: relative;
    background-image: url('assets/images/breadcrumb-bg.webp');
    background-size: cover;
    background-position: center 35%;
    padding: 130px 0 110px;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
    overflow: hidden;
}

.contact-hero-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(10, 9, 8, 0.6) 0%, rgba(10, 9, 8, 0.8) 100%);
    z-index: 1;
}

.contact-hero-banner .container {
    position: relative;
    z-index: 2;
}

/* Premium Glassmorphic Breadcrumbs */
.trendy-breadcrumbs {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: rgba(18, 16, 14, 0.7);
    border: 1px solid rgba(197, 160, 89, 0.3);
    padding: 10px 28px;
    border-radius: 50px;
    margin-bottom: 30px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    animation: fadeInDown 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.trendy-breadcrumbs a {
    color: #dfd5c0;
    position: relative;
    transition: var(--transition-quick);
}

.trendy-breadcrumbs a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--gold-primary);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease;
}

.trendy-breadcrumbs a:hover {
    color: #ffffff;
}

.trendy-breadcrumbs a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.trendy-breadcrumbs .separator {
    color: var(--gold-primary);
    font-size: 0.6rem;
    opacity: 0.8;
}

.trendy-breadcrumbs span.active {
    color: #ffffff;
    font-weight: 600;
}

.contact-hero-banner h1 {
    font-size: 50px;
    font-weight: 700;
    line-height: 1.1;
    color: #ffffff;
    margin-bottom: 16px;
    letter-spacing: 3px;
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.4);
    animation: fadeInUp 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.1s both;
}

.contact-hero-banner p {
    font-family: var(--font-sans);
    color: #dfd5c0;
    font-size: 1rem;
    letter-spacing: 1.5px;
    max-width: 650px;
    margin: 0 auto;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    animation: fadeInUp 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.2s both;
}

/* Cardless Editorial Contact Layout */
.contact-more {
    background-color: var(--bg-primary);
    padding: 110px 0;
}

.contact-more h2 {
    font-family: var(--font-serif);
    font-size: 3.2rem;
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
    letter-spacing: 3px;
    margin-bottom: 75px;
    position: relative;
    text-transform: uppercase;
}

.contact-part {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: stretch;
}

.contact-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.info-box {
    padding: 30px 0;
    border-bottom: 1px solid var(--border-color);
    border-left: 2px solid transparent;
    display: grid;
    grid-template-columns: 50px 1fr;
    align-items: start;
    transition: transform 0.4s ease, border-left-color 0.4s ease, padding-left 0.4s ease;
}

.info-box:hover {
    border-left-color: var(--gold-primary);
    padding-left: 15px;
    transform: translateX(8px);
}

.info-box:first-child {
    padding-top: 0;
}

.info-box:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.info-box i {
    font-size: 1.4rem;
    color: var(--gold-primary);
    margin-top: 5px;
    transition: transform 0.3s ease;
}

.info-box:hover i {
    transform: scale(1.15);
}

.info-box h3 {
    font-family: var(--font-serif);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 10px;
    letter-spacing: 0.5px;
}

.info-box p {
    font-family: var(--font-sans);
    color: var(--text-secondary);
    font-size: 0.98rem;
    line-height: 1.8;
}

.info-box a {
    color: var(--text-primary);
    transition: var(--transition-quick);
    font-weight: 600;
    position: relative;
    display: inline-block;
}

.info-box a::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--gold-primary);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease;
}

.info-box a:hover {
    color: var(--gold-primary);
}

.info-box a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* Map Column Styling */
.contact-map-wrapper {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    box-shadow: 0 15px 40px rgba(172, 131, 52, 0.03);
    min-height: 480px;
    height: 100%;
    width: 100%;
}

.contact-map-wrapper iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    filter: grayscale(0.2) contrast(1.02);
    transition: filter 0.5s ease;
}

.contact-map-wrapper:hover iframe {
    filter: grayscale(0);
}

/* Animations */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Custom Breakpoints */
@media (max-width: 992px) {
    .contact-part {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .contact-map-wrapper {
        min-height: 380px;
    }
}

@media (max-width: 768px) {
    .contact-hero-banner {
        padding: 100px 0 80px;
    }

    .contact-hero-banner h1 {
        font-size: 2.8rem;
    }

    .contact-more {
        padding: 60px 0;
    }

    .contact-more h2 {
        font-size: 2.2rem;
        margin-bottom: 50px;
    }

    .info-box {
        grid-template-columns: 40px 1fr;
        padding: 22px 0;
    }
}

/* ==========================================================================
   About Us Page - Custom Luxury Styling
   ========================================================================== */
.about-legacy-banner {
    background-position: center 25%;
}

/* Introduction Section styling */
.about-intro-wrap {
    padding: 100px 0;
    background-color: var(--bg-primary);
}

.about-intro-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 70px;
    align-items: center;
}

/* Collage of Craftsmanship */
.about-collage-container {
    position: relative;
    height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-collage-img-main {
    width: 65%;
    height: 85%;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);
    z-index: 2;
    transition: var(--transition-smooth);
}

.about-collage-img-sub {
    position: absolute;
    width: 50%;
    height: 60%;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    z-index: 1;
    transition: var(--transition-smooth);
}

.about-collage-img-sub.img-left {
    left: 0;
    bottom: 5%;
}

.about-collage-img-sub.img-right {
    right: 0;
    top: 5%;
}

.about-collage-container:hover .about-collage-img-main {
    transform: scale(1.02);
    z-index: 3;
}

.about-collage-container:hover .about-collage-img-sub.img-left {
    transform: translate(-10px, 10px);
}

.about-collage-container:hover .about-collage-img-sub.img-right {
    transform: translate(10px, -10px);
}

/* Editorial flow for intro */
.about-editorial-wrap {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.about-tagline {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: var(--gold-primary);
}

.about-editorial-wrap h2 {
    font-size: 3.2rem;
    line-height: 1.15;
    color: var(--text-primary);
}

.about-editorial-wrap p {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text-secondary);
    text-align: justify;
}

/* Drop-cap */
.drop-cap {
    font-family: var(--font-serif);
    font-size: 3.8rem;
    float: left;
    line-height: 0.8;
    margin-right: 10px;
    margin-top: 5px;
    font-weight: 700;
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Mission & Vision unique design */
.about-mv-wrap {
    padding: 100px 0;
    background-color: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.mv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.mv-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    padding: 50px 45px;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(172, 131, 52, 0.02);
    transition: var(--transition-smooth);
}

.mv-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--gold-gradient);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.mv-card:hover {
    transform: translateY(-8px);
    border-color: rgba(172, 131, 52, 0.4);
    box-shadow: 0 20px 40px rgba(172, 131, 52, 0.08);
}

.mv-card:hover::before {
    transform: scaleX(1);
}

.mv-icon-box {
    width: 60px;
    height: 60px;
    background: rgba(172, 131, 52, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    color: var(--gold-primary);
    font-size: 1.6rem;
    transition: var(--transition-quick);
}

.mv-card:hover .mv-icon-box {
    background: var(--gold-gradient);
    color: #000;
    transform: rotate(360deg);
}

.mv-card h3 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--text-primary);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.mv-card p {
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--text-secondary);
}

/* Responsiveness for About Us page */
@media (max-width: 992px) {
    .about-intro-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .about-collage-container {
        height: 380px;
    }

    .mv-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .about-pillars-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .about-intro-wrap,
    .about-mv-wrap,
    .about-pillars-wrap {
        padding: 70px 0;
    }

    .about-editorial-wrap h2 {
        font-size: 2.5rem;
    }
}

/* ==========================================================================
   "Dream it, Craft it" Section Styles
   ========================================================================== */
.about-dream-section {
    padding: 80px 0;
    position: relative;
    background-color: var(--bg-primary);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 550px;
    width: 100%;
}

.dream-layout-container {
    width: 100%;
    max-width: 100%;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 2.2fr 1fr;
    align-items: center;
    gap: 20px;
    position: relative;
}

.dream-img-wrap {
    width: 100%;
    height: 440px;
    position: relative;
    overflow: hidden;
    transition: var(--transition-smooth);
}

.dream-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.dream-img-wrap:hover img {
    transform: scale(1.05);
}

/* Image 1 (Left): Pushed to the left edge of viewport */
.dream-img-left {
    border-top-left-radius: 0;
    border-top-right-radius: 80px;
    border-bottom-right-radius: 80px;
    border-bottom-left-radius: 0;
    border: 1px solid var(--border-color);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);
    /* margin-left: -50px;  */
}

/* Image 2 (Right): Pushed to the right edge of viewport */
.dream-img-right {
    border-top-left-radius: 80px;
    /* border-top-right-radius: 80px; */
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 80px;
    border: 1px solid var(--border-color);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);
    /* margin-right: -50px;      */
}

/* Center Content */
.dream-center-content {
    text-align: center;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.dream-star-icon {
    font-size: 2.2rem;
    color: var(--gold-primary);
    margin-bottom: 5px;
    animation: pulseGlow 3s infinite ease-in-out;
}

.dream-center-content h2 {
    font-family: var(--font-serif);
    font-size: 2.8rem;
    line-height: 1.25;
    color: var(--text-primary);
    font-weight: 500;
}

.dream-center-content h2 em {
    font-style: italic;
    font-family: var(--font-serif);
    font-weight: 300;
}

.dream-center-content p {
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text-secondary);
    /* max-width: 580px; */
    margin: 0 auto;
}

/* Solid Black / Dark Bronze Button */
.btn-dream-action {
    display: inline-block;
    background-color: #000000;
    color: #ffffff;
    border: 1px solid #000000;
    padding: 14px 36px;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: var(--transition-smooth);
    border-radius: 4px;
    margin-top: 10px;
}

.btn-dream-action:hover {
    background-color: var(--gold-primary);
    border-color: var(--gold-primary);
    color: #000000;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(172, 131, 52, 0.2);
}

@keyframes pulseGlow {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.1);
        opacity: 1;
    }
}

/* Responsive collapse */
@media (max-width: 992px) {
    .dream-layout-container {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .dream-img-wrap {
        height: 300px;
        width: 80%;
        max-width: 400px;
        margin: 0 auto !important;
    }

    .dream-img-left {
        border-radius: 40px;
        margin-left: auto !important;
    }

    .dream-img-right {
        border-radius: 40px;
        margin-right: auto !important;
    }

    .about-dream-section {
        padding: 60px 0;
    }

    .dream-center-content h2 {
        font-size: 2.2rem;
    }
}

/* ==========================================================================
   Creative Alternating Arched Mission & Vision Section Styles
   ========================================================================== */
.about-mv-alternating {
    padding: 120px 0;
    background-color: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    position: relative;
}

/* .about-mv-alternating .container {
    max-width: 1100px;
} */

.about-mv-alternating .row:not(:last-child) {
    margin-bottom: 100px;
}

/* Arched Image Container */
.mv-arched-image-frame {
    width: 100%;
    /* max-width: 420px;
    aspect-ratio: 3 / 4; */
    overflow: hidden;
    position: relative;
    border: 1px solid var(--border-color);
    box-shadow: 0 20px 45px rgba(172, 131, 52, 0.04);
    transition: var(--transition-smooth);
}

/* Arched Border Radii & Alignment to push closer to text */
.mv-arch-mission {
    border-top-left-radius: 200px;
    border-top-right-radius: 200px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    /* margin-left: auto; */
    margin-right: 0;
    /* Align right to content */
}

.mv-arch-vision {
    border-top-left-radius: 200px;
    border-top-right-radius: 200px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-left: 0;
    margin-right: auto;
    /* Align left to content */
}

.mv-arched-image-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.mv-arched-image-frame:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 50px rgba(172, 131, 52, 0.08);
}

.mv-arched-image-frame:hover img {
    transform: scale(1.05);
}

/* Content Columns styling */
.mv-text-col {
    padding: 0 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
}

.mv-deco-diamond {
    font-size: 1.5rem;
    color: var(--gold-primary);
    line-height: 1;
    margin-bottom: 5px;
}

.mv-text-col h3 {
    font-family: var(--font-serif);
    font-size: 3rem;
    line-height: 1.15;
    color: var(--text-primary);
    font-weight: 400;
}

.mv-text-col p {
    font-family: var(--font-sans);
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--text-secondary);
    text-align: justify;
}

/* Responsiveness */
@media (max-width: 992px) {
    .about-mv-alternating {
        padding: 80px 0;
    }

    .about-mv-alternating .row:not(:last-child) {
        margin-bottom: 60px;
    }

    .mv-arched-image-frame {
        max-width: 320px;
        margin-bottom: 30px;
        /* Spacing between arched image and stacked text */
    }

    .mv-text-col h3 {
        font-size: 2.3rem;
    }

    /* .mv-text-col p {
        text-align: center;
    } */
    .mv-text-col {
        gap: 0px;
    }
}

@media (max-width: 576PX) {
    .mv-arched-image-frame {
        max-width: 100%;
    }
}

/* ==========================================================================
   Investment & Booking Schemes Styles
   ========================================================================== */
.scheme-hero-banner {
    background-image: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), url('assets/images/hero-bridal-new.webp');
    background-size: cover;
    background-position: center;
    padding: 100px 0 80px 0;
    text-align: center;
    color: #ffffff;
}

.scheme-section {
    padding: 80px 0;
    background-color: var(--bg-primary);
}

.scheme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
}

.scheme-card {
    background-color: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(172, 131, 52, 0.14);
    padding: 40px 30px;
    text-align: center;
    border-radius: 16px;
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.04);
}

.scheme-card::before {
    content: '';
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    width: 64px;
    height: 4px;
    background: var(--gold-primary);
    border-radius: 999px;
    opacity: 0.55;
    transition: var(--transition-quick);
}

.scheme-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
}

.scheme-card:hover::before {
    opacity: 1;
}

.scheme-card-duration {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--gold-dark);
    margin-bottom: 10px;
    font-weight: 700;
}

.plan-pill {
    display: inline-block;
    margin-bottom: 18px;
    padding: 8px 16px;
    background: rgba(172, 131, 52, 0.10);
    color: var(--gold-dark);
    font-family: var(--font-sans);
    font-size: 0.78rem;
    letter-spacing: 1px;
    border-radius: 999px;
}

.scheme-card-benefit {
    font-family: var(--font-serif);
    font-size: 2.2rem;
    color: var(--text-primary);
    margin-bottom: 18px;
    line-height: 1.05;
}

.scheme-card-desc {
    font-family: var(--font-sans);
    font-size: 16px;
    color: var(--text-secondary);
}

/* Features List */
.features-section {
    padding: 80px 0;
    background-color: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
}

.feature-item {
    display: flex;
    flex-direction: column;
    gap: 15px;
    background-color: var(--bg-primary);
    border: 1px solid rgba(172, 131, 52, 0.12);
    padding: 28px 24px;
    border-radius: 18px;
    min-height: 220px;
    justify-content: flex-start;
    box-shadow: 0 12px 30px rgba(172, 131, 52, 0.03);
}

.feature-icon-wrap {
    width: 54px;
    height: 54px;
    background-color: var(--gold-light);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-dark);
    font-size: 1.35rem;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(172, 131, 52, 0.1);
}

.feature-title {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    color: var(--text-primary);
    font-weight: 600;
}

.feature-desc {
    font-family: var(--font-sans);
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Interactive Calculator Styling */
.calculator-section {
    padding: 100px 0;
    background-color: var(--bg-primary);
}

.calculator-wrapper {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 50px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.02);
}

.calculator-form-side {
    padding: 50px;
}

.calculator-result-side {
    background-color: var(--bg-tertiary);
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-left: 1px solid var(--border-color);
}

.calc-title {
    font-family: var(--font-serif);
    font-size: 2rem;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.calc-subtitle {
    font-family: var(--font-sans);
    font-size: 16px;
    color: var(--text-secondary);
    margin-bottom: 40px;
}

.calc-form-group {
    margin-bottom: 30px;
}

.calc-label {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.calc-label span.value-bubble {
    color: var(--gold-primary);
    font-weight: 700;
}

.calc-input-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: var(--border-solid);
    outline: none;
    margin-bottom: 15px;
}

.calc-input-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--gold-primary);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(172, 131, 52, 0.3);
    transition: transform 0.1s ease;
}

.calc-input-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.calc-input-number {
    width: 100%;
    padding: 12px 18px;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 500;
}

.duration-options-flex {
    display: flex;
    gap: 15px;
}

.duration-option-btn {
    flex: 1;
    padding: 15px;
    border: 1px solid var(--border-color);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: var(--transition-quick);
    text-align: center;
}

.duration-option-btn:hover {
    border-color: var(--gold-primary);
    color: var(--gold-primary);
}

.duration-option-btn.active {
    border-color: var(--gold-primary);
    background-color: var(--gold-light);
    color: var(--gold-dark);
    font-weight: 600;
}

/* Calculator Results Side */
.result-header-title {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-muted);
    margin-bottom: 25px;
}

.result-rows {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 30px;
}

.result-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed var(--border-color);
    padding-bottom: 12px;
}

.result-label {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.result-value {
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.maturity-benefit-wrap {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    padding: 25px;
    border-radius: 8px;
    text-align: center;
    margin-bottom: 35px;
}

.maturity-label {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--gold-primary);
    margin-bottom: 8px;
}

.maturity-val {
    font-family: var(--font-sans);
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--gold-dark);
}

/* Policy Note Styling */
.policy-note-card {
    background-color: var(--bg-secondary);
    border: 1px solid rgba(172, 131, 52, 0.3);
    border-radius: 8px;
    padding: 30px;
    margin-top: 60px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.policy-icon {
    font-size: 1.5rem;
    color: var(--gold-primary);
}

.policy-text h4 {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.policy-text p {
    font-family: var(--font-sans);
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.6;
}

@media screen and (min-width: 1239px) and (max-width: 1340px) {
    #nav-bar ul li a {
        font-size: 0.92rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        color: #dfd5c0;
        padding: 10px 3px;
        display: flex;
        align-items: center;
        gap: 4px;
        position: relative;
        transition: var(--transition-quick);
    }

    #nav-bar ul {
        padding-left: 0;
        gap: 15px;
    }
}

/* Responsiveness for calculators */
@media (max-width: 992px) {
    .calculator-wrapper {
        grid-template-columns: 1fr;
    }

    .calculator-result-side {
        border-left: none;
        border-top: 1px solid var(--border-color);
    }
}

@media (max-width: 576px) {

    .calculator-form-side,
    .calculator-result-side {
        padding: 30px 20px;
    }
}

/* ============================================================
   FIX (July integration): Bootstrap is loaded on the about /
   scheme pages for its grid, but its .container caps width at
   1320px and narrows the shared site header there. Force the
   site's own container width to win so the header/chrome match
   every other page. (Bootstrap grid .row/.col still work.)
   ============================================================ */
.container {
    width: 92% !important;
    max-width: var(--container-max-width) !important;
}

/* Accessible, crawlable but visually hidden (used for the page's primary SEO H1). */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   Wishlist heart button (browser localStorage wishlist)
   ============================================================ */
.bs-card-img-wrap {
    position: relative;
}

.wishlist-heart {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #ac8334;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease;
}

.wishlist-heart:hover {
    background: #fff;
    transform: scale(1.1);
}

.wishlist-heart.active {
    color: #d4324a;
}

/* Cart feature removed (catalog + WhatsApp enquiry only) — hide orphaned drawer. */
#cart-sidebar {
    display: none !important;
}

/* ============================================================
   RESPONSIVE FIX: collapse the nav to the hamburger on tablets too.
   The menu grew to 8 items (incl. the long "Investment & Booking
   Schemes"), which overflowed between 769–991px where the desktop
   nav still showed. This mirrors the mobile drawer up to 991px.
   ============================================================ */
@media (min-width: 769px) and (max-width: 991px) {
    .hamburger {
        display: flex;
    }

    #nav-bar {
        position: fixed;
        top: 180px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 180px);
        background: rgba(18, 16, 13, 0.96);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        z-index: 999;
        transition: left 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
        padding: 40px;
        border-top: 1px solid rgba(172, 131, 52, 0.2);
        overflow-y: auto;
    }

    #nav-bar.active {
        left: 0;
        top: 80px;
    }

    #nav-bar ul {
        flex-direction: column;
        gap: 25px;
    }

    #nav-bar ul li a {
        font-size: 1.3rem;
    }

    #nav-bar .dropdown-menu {
        position: static !important;
        transform: none !important;
        box-shadow: none !important;
        width: 100% !important;
        opacity: 0;
        visibility: hidden;
        max-height: 0;
        overflow: hidden;
        background: transparent !important;
        border: none !important;
        padding: 0 0 0 15px !important;
        transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease;
    }

    #nav-bar .dropdown-menu.submenu-active {
        opacity: 1;
        visibility: visible;
        max-height: 600px;
        padding: 10px 0 0 15px;
    }

    #nav-bar .dropdown-menu li a {
        display: block;
    }
}

/* ==========================================================================
   CUSTOM RICH FOOTER & TRUST BADGES STYLES (5 COLUMNS DESIGN SYSTEM)
   ========================================================================== */

#contact {
    background-color: #12100d;
    color: #ffffff;
    padding: 70px 0 30px;
    border-top: 3px solid var(--gold-primary, #ac8334);
    font-family: var(--font-sans);
}

.footer-top.five-cols {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 30px;
    /* padding-bottom: 50px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); */
}

.footer-col h4.footer-title,
.footer-col h3 {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    color: var(--gold-primary, #ac8334);
    margin-bottom: 22px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 600;
}

.footer-col p {
    font-size: 0.9rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 20px;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links li a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    display: inline-block;
}

.footer-links li a:hover {
    color: var(--gold-primary, #ac8334);
    transform: translateX(4px);
}

.footer-socials {
    display: flex;
    gap: 12px;
    /* margin-top: 15px; */
}

.footer-socials .social-link {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid rgba(172, 131, 52, 0.3);
}

.footer-socials .social-link:hover {
    background: var(--gold-primary, #ac8334);
    color: #ffffff;
    transform: translateY(-3px);
}

.footer-contact-item {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.75);
}

.footer-contact-item i {
    color: var(--gold-primary, #ac8334);
    margin-top: 4px;
}

.footer-contact-item a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-contact-item a:hover {
    color: var(--gold-primary, #ac8334);
}

.footer-badges-row-new {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.footer-badges-row-new .badge-item {
    font-size: 0.82rem;
    font-weight: 600;
    color: #e5dccb;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(172, 131, 52, 0.1);
    border: 1px solid rgba(172, 131, 52, 0.3);
    padding: 6px 14px;
    border-radius: 30px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.footer-badges-row-new .badge-item i {
    color: #d4af37;
    font-size: 0.9rem;
}

.footer-credit {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    padding-top: 25px;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.6);
}

.footer-credit a {
    color: var(--gold-primary, #ac8334);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.footer-credit a:hover {
    color: #ffffff;
}

@media (max-width: 768px) {
    .footer-credit {
        justify-content: center;
        text-align: center;
        flex-direction: column;
        gap: 8px;
    }
}

/* Responsive Grid for Footer */
@media (max-width: 1200px) {
    .footer-top.five-cols {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .footer-top.five-cols {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .footer-top.five-cols {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   ATTRACTIVE TERMS & CONDITIONS PAGE LAYOUT STYLES (SINGLE COLUMN)
   ========================================================================== */

.terms-hero-banner {
    position: relative;
    background: linear-gradient(rgba(18, 15, 12, 0.78), rgba(18, 15, 12, 0.88)), url('assets/images/breadcrumb-bg.webp') center/cover no-repeat;
    padding: 120px 0 90px;
    text-align: center;
    color: #ffffff;
    border-bottom: 3px solid var(--gold-primary, #ac8334);
}

.terms-hero-banner .trendy-breadcrumbs a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: color 0.3s ease;
}

.terms-hero-banner .trendy-breadcrumbs a:hover {
    color: var(--gold-primary, #ac8334);
}

.terms-content-section {
    padding: 100px 0;
    background-color: var(--bg-primary, #fbf9f3);
}

.terms-single-container {
    background: #ffffff;
    border: 1px solid rgba(172, 131, 52, 0.18);
    border-radius: 16px;
    padding: 60px 50px;
    box-shadow: 0 15px 40px rgba(172, 131, 52, 0.05);
    max-width: 950px;
    margin: 0 auto;
}

.terms-intro-p-new {
    font-size: 1.15rem;
    line-height: 1.85;
    color: var(--text-primary, #1c1a16);
    margin-bottom: 45px;
    padding-bottom: 30px;
    border-bottom: 1px dashed rgba(172, 131, 52, 0.25);
    font-family: var(--font-serif);
    font-style: italic;
    text-align: center;
}

.terms-block-new {
    margin-bottom: 40px;
    padding-bottom: 35px;
    border-bottom: 1px dashed rgba(172, 131, 52, 0.2);
}

.terms-block-new:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.terms-block-title-new {
    font-family: var(--font-serif);
    font-size: 1.6rem;
    color: var(--text-primary, #1c1a16);
    font-weight: 600;
    margin-bottom: 18px;
    letter-spacing: 0.5px;
    position: relative;
    padding-left: 25px;
}

.terms-block-title-new::before {
    content: "❖";
    color: var(--gold-primary, #ac8334);
    font-size: 0.8rem;
    position: absolute;
    left: 0;
    top: 3px;
}

.terms-block-desc-new {
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--text-secondary, #575249);
    margin-bottom: 0;
}

.terms-block-new .terms-list {
    margin-top: 20px;
    margin-bottom: 0;
    padding-left: 20px;
    list-style: none;
}

.terms-block-new .terms-list li {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--text-secondary, #575249);
    margin-bottom: 10px;
    position: relative;
    padding-left: 20px;
}

.terms-block-new .terms-list li::before {
    content: "❖";
    color: var(--gold-primary, #ac8334);
    font-size: 0.65rem;
    position: absolute;
    left: 0;
    top: 2px;
}

.terms-block-new .terms-list li:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .terms-single-container {
        padding: 40px 25px;
    }

    .terms-block-title-new {
        font-size: 1.4rem;
    }
}

/* Footer social/badges strip — Bootstrap-free equivalent of the designer's
   d-flex utility row so it renders identically on pages without Bootstrap. */
.footer-strip {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 40px;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.footer-strip-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-credit-wrap {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* Scheme card point-wise description (admin: Schemes → Description points) */
.scheme-card-points {
    list-style: none;
    padding: 0;
    margin: 0 0 10px;
    text-align: left;
}

.scheme-card-points li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 8px;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

.scheme-card-points li::before {
    content: "✦";
    position: absolute;
    left: 0;
    top: 2px;
    color: var(--gold-primary, #ac8334);
    font-size: 0.8rem;
}

.scheme-card-points li:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   SHOP MEGA-MENU OVERFLOW FIX (Aug-2026)
   The client can add ANY number of categories; the original repeat(6, auto)
   grid grew wider than the screen with 25+ long names and spilled off both
   edges. Equal-width columns always fit the header; very long lists scroll.
   ========================================================================== */
@media (min-width: 992px) {
    #nav-bar .dropdown-menu {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        max-height: calc(100vh - 200px) !important;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    #nav-bar .dropdown-menu li a {
        white-space: normal;
        line-height: 1.35;
        font-size: 0.95rem !important;
        padding: 9px 10px !important;
        letter-spacing: 0.3px;
    }
}

/* Slightly fewer columns on smaller desktops so names don't wrap awkwardly. */
@media (min-width: 992px) and (max-width: 1280px) {
    #nav-bar .dropdown-menu {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

/* ==========================================================================
   CLIENT FEEDBACK FIXES — Aug-2026
   ========================================================================== */

/* --- Trending strip: JS-driven scroll so it can be swiped/dragged by hand.
       The old CSS keyframe animation could not be moved manually. --- */
.category-marquee-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* old Edge */
    cursor: grab;
    -webkit-overflow-scrolling: touch;
}

.category-marquee-wrapper::-webkit-scrollbar {
    display: none;
    /* Chrome / Safari */
}

.category-marquee-wrapper.is-dragging {
    cursor: grabbing;
    user-select: none;
}

/* NOTE: `pointer-events: none` used to be applied here on pointerdown, which
   made the tapped card un-hittable at pointerup — so the browser never fired a
   click and category links did not open (iPhone + some desktops). The class is
   now added only after a real drag begins, and it must NOT block hit-testing. */
.category-marquee-wrapper.is-dragging .category-card {
    pointer-events: none;
    /* only while genuinely dragging */
}

.category-marquee-track,
.category-marquee-wrapper:hover .category-marquee-track {
    animation: none !important;
    /* movement is handled in app.js §20 */
}

/* --- Live rate strip on phones: the desktop row squeezed the rates until they
       were unreadable. Stack the label above a full-width scrolling ticker. --- */
@media (max-width: 768px) {
    .rates-marquee-section {
        flex-direction: column;
        align-items: stretch;
        height: auto;
        padding-bottom: 10px;
    }

    .rates-marquee-section .marquee-tag {
        width: 100%;
        height: auto;
        flex-direction: row;
        gap: 8px;
        padding: 8px 16px;
        font-size: 0.68rem;
        box-shadow: none;
    }

    .rates-marquee-wrapper {
        width: 100%;
        padding: 8px 0 2px;
    }

    .rates-marquee-track {
        gap: 26px;
        padding-left: 16px;
    }

    .rate-ticker-item {
        font-size: 0.9rem !important;
        white-space: nowrap;
    }
}

/* --- Mobile header: keep the search bar visible and give every block the
       same fixed gutter so the layout stops feeling loose. --- */
@media (max-width: 768px) {
    .header-main-inner {
        flex-wrap: wrap;
        align-items: center;
        row-gap: 10px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    /* Search sits on its own full-width row under the logo — never collapsed. */
    .header-search-wrap {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        order: 4;
        flex: 0 0 100%;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 44px;
        margin: 0;
        padding: 0 14px;
        box-sizing: border-box;
    }

    .header-search-wrap .header-search-input {
        display: block !important;
        width: 100%;
        font-size: 16px;
        /* stops iOS from zooming on focus */
    }

    /* One consistent gutter for every full-width block on phones. */
    .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box;
    }

    /* Nothing may push the page sideways. */
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    img,
    video,
    iframe,
    table {
        max-width: 100%;
    }
}

/* ==========================================================================
   ONE PAGE GUTTER ON PHONES  (client: "har cheez ka margin fix ho, koi
   flexibility nahi") — measured at 384px the page had FIVE different left
   edges (16 / 20 / 26 / 36 / 40px), which is what read as "casual".
   Every left-aligned block now starts at exactly the same x.
   ========================================================================== */
@media (max-width: 768px) {
    :root {
        --page-gutter: 16px;
    }

    /* Full-width sections that carry their own padding. */
    .container,
    .newsletter-section,
    .best-sellers-section,
    .category-section,
    .section-padding {
        padding-left: var(--page-gutter) !important;
        padding-right: var(--page-gutter) !important;
        box-sizing: border-box;
    }

    /* Vertical rhythm of those sections must not be flattened by the rule above. */
    .newsletter-section {
        padding-top: 56px !important;
        padding-bottom: 56px !important;
    }

    /* Inner columns must NOT add a second gutter on top of the section's. */
    .about-text-col,
    .about-editorial-flow,
    .about-header-wrap,
    .bs-header,
    .nl-form,
    .footer-credit,
    .footer-col {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* A .container nested inside an already-padded section would double up. */
    .newsletter-section .container,
    .best-sellers-section .container,
    .category-section .container,
    .section-padding .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Hero + banner overlays: full width, same gutter, no 50% side-box. */
    .slide-text-col,
    .namaste-content-wrap {
        max-width: 100% !important;
        width: 100% !important;
        margin-left: 0 !important;
        padding-left: var(--page-gutter) !important;
        padding-right: var(--page-gutter) !important;
        box-sizing: border-box;
    }

    /* Cards keep their own inner padding — that is intentional depth,
       not a page gutter — but they must sit flush with the gutter. */
    .bs-card,
    .scheme-card,
    .bullion-card,
    .terms-single-container {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* The product rail carries a 50px desktop inset; on phones that pushed the
       cards 32px in while every heading sat at 16px. */
    .bs-scroll-track,
    .category-marquee-track {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ==========================================================================
   MOBILE HEADER POLISH (client: search icon centred, menu + wishlist in line)
   ========================================================================== */
@media (max-width: 768px) {

    /* --- Menu and wishlist must sit on exactly the same line as each other.
           Identical 44px boxes, centred, and no hover transform that could
           nudge one of them off the line on touch screens. --- */
    .header-main-inner {
        align-items: center;
    }

    .hamburger,
    .header-actions,
    .header-actions #wishlist-trigger-btn {
        height: 44px;
        align-self: center;
    }

    .header-actions #wishlist-trigger-btn {
        padding: 0;
        line-height: 1;
        transform: none !important;
        /* hover/active shift must not offset it */
    }

    .header-actions #wishlist-trigger-btn .badge-count {
        top: 2px;
        right: 2px;
    }

    /* --- Search bar keeps its ORIGINAL look (icon pinned inside the left of
           the pill). On phones only, the client wants it a little further in. --- */
    .search-icon-inner {
        left: 33px;
    }

    /* Same visual gap between icon and text as before (icon ends ~46px). */
    .header-search-input {
        padding-left: 61px;
    }
}

/* ==========================================================================
   IMAGE-DRAG FIX (found with real WebKit/Safari testing, Aug-2026)
   <img> is draggable by default. Clicking a category circle or product photo
   with a few px of mouse/finger movement started a native image-drag, and the
   browser then SUPPRESSED the click — so the link never opened. This is what
   made "trending product click nahi khulta" happen on iPhone and on some PCs.
   ========================================================================== */
.category-marquee-wrapper img,
.category-marquee-wrapper a,
.category-card,
.category-card img,
.bs-card img,
.bs-card a,
.bullion-card img,
.product-card img {
    -webkit-user-drag: none;
    user-drag: none;
    -webkit-touch-callout: none;
    /* no long-press image menu on iOS */
}

/* ==========================================================================
   MOBILE MENU DRAWER — no sideways scrolling (client: menu items ka pehla
   akshar kat raha tha). "INVESTMENT & BOOKING SCHEMES" 446px chaudा ho raha
   tha jabki drawer mein sirf 381px jagah thi (40px padding × 2), aur text
   wrap nahi hota tha — isliye drawer side mein scroll ho jata tha.
   ========================================================================== */
@media (max-width: 991px) {
    #nav-bar {
        padding: 32px 22px !important;
        /* 40px was too generous on 393px phones */
        overflow-x: hidden !important;
        /* can never scroll sideways again */
        box-sizing: border-box;
    }

    #nav-bar ul {
        width: 100%;
        max-width: 100%;
        gap: 20px;
    }

    #nav-bar ul li {
        width: 100%;
        max-width: 100%;
    }

    /* Long labels now wrap onto a second line instead of overflowing. */
    #nav-bar ul li a {
        font-size: 1.08rem !important;
        line-height: 1.35;
        white-space: normal !important;
        overflow-wrap: anywhere;
        max-width: 100%;
        letter-spacing: 0.4px;
    }

    /* Submenu links stay inside too. */
    #nav-bar .dropdown-menu li a {
        font-size: 0.98rem !important;
        white-space: normal !important;
        max-width: 100%;
    }
}

/* ==========================================================================
   TRENDING STRIP — transform-driven (app.js §20)
   scrollLeft was rounded to whole pixels by the browser, so a 0.5px/frame
   step never advanced and the strip visibly vibrated instead of gliding.
   Movement is now a CSS transform, exactly like the live-rates ticker.
   ========================================================================== */
.category-marquee-wrapper {
    overflow-x: hidden !important;
    /* JS owns the movement now */
    touch-action: pan-y;
    /* page still scrolls up/down normally */
}

.category-marquee-track {
    will-change: transform;
    transform: translateZ(0);
    /* smooth on phones */
}

/* ==========================================================================
   TRENDING STRIP — category names were being cut off
   .category-name had a fixed height of 34px "for 2 lines", but two lines at
   0.82rem actually need ~39px, so the second line (e.g. "CHAIN" of
   "GENTS GOLD CHAIN") was clipped. Height is now flexible.
   ========================================================================== */
.category-marquee-track {
    align-items: flex-start;
    /* circles stay in line even if a name needs 3 rows */
}

.category-name {
    height: auto !important;
    min-height: 42px;
    line-height: 1.3;
    letter-spacing: 1.4px;
    /* slightly tighter so most names fit in 2 rows */
    align-items: flex-start;
    padding-bottom: 2px;
}

/* ==========================================================================
   1) FULL-WIDTH CONTAINER ON LARGE SCREENS
      --container-max-width is 1400px (2320px with the older override), so on a
      4K screen the page sat in the middle with huge empty sides.
   ========================================================================== */
@media (min-width: 1600px) {
    .container {
        width: 94% !important;
        max-width: 94% !important;
        /* grows with the screen instead of stopping */
    }
}

/* ==========================================================================
   2) MOBILE HERO — remove the empty black band under the slide
      .slide is absolutely positioned, so the slider needed an explicit
      min-height (650px). Content is only ~565px tall, leaving a black gap.
      Letting the ACTIVE slide sit in normal flow makes the slider hug it.
   ========================================================================== */
@media (max-width: 768px) {
    .hero-slider {
        height: auto !important;
        min-height: 0 !important;
    }

    .slide.active {
        position: relative;
        /* the visible slide now defines the height */
        height: auto;
    }

    .slide-text-col {
        padding-top: 26px !important;
        padding-bottom: 34px !important;
    }
}

/* ============================================================
   FESTIVE PRODUCT GRID (home) — compact cards, 5-up on desktop.
   Overrides the 3-col .collections-right-grid base (declared later
   in the file, same specificity, so these win).
   ============================================================ */
.festive-products-grid {
    margin-top: 30px;
    grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 1200px) {
    .festive-products-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 992px) {
    .festive-products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .festive-products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

@media (max-width: 576px) {
    .festive-products-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .festive-products-grid .coll-card {
        max-width: none;
    }

    .legacy-section-block .row.align-items-center.flex-row-reverse .col-lg-7.col-md-6 div {
        padding-right: 0px !important;
    }

    .btn-gold {
        padding: 14px 6px;
        letter-spacing: .5px;
    }

    .btn-outline {
        padding: 14px 6px;
        letter-spacing: .5px;
    }

    .slide-text-inner-2 .btn-group {
        display: flex;
        gap: 10px;
        position: absolute;
        left: 20%;
        bottom: 40px;
        transition: none !important;
        justify-content: center;
    }

    .hero-slider {
        height: 385px !important;
    }

    .about-hero-banner {
        padding: 40px 0 30px !important;
    }

    h1.page-title.font-serif {
        font-size: 34px !important;
        letter-spacing: 2px !important;
    }

    p.page-subtitle {
        font-size: 16px !important;
        letter-spacing: 0 !important;
    }

    .section-header {
        margin-bottom: 30px;
    }

    .footer-top {
        display: grid;
        grid-template-columns: 1.3fr 0.9fr 0.9fr 1.1fr;
        gap: 80px;
        margin-bottom: 30px;
    }
}

@media (max-width: 425px) {
    .slide-text-inner-2 .btn-group {
        display: flex;
        gap: 10px;
        position: absolute;
        left: 6%;
        bottom: 40px;
        transition: none !important;
        justify-content: center;
    }

    .hero-slider {
        height: 310px !important;
    }
}

@media (max-width: 375px) {
    .slide-text-inner-2 .btn-group {
        left: 12px;
    }

    .hero-slider {
        height: 285px !important;
    }
}

/* Clickable product cards — whole card navigates to the product page */
.coll-card,
.bs-card {
    cursor: pointer;
}

/* ==========================================================================
   PRODUCT GRIDS — never let a card push the column wider than the screen
   `1fr` is really minmax(auto, 1fr): a long product name or price made one
   column grow (measured 159px + 214px inside a 322px row at 360px width), so
   cards were cut off on the right. minmax(0, 1fr) lets columns shrink, and
   min-width:0 + wrapping stops any single word from forcing an overflow.
   Applies to New Arrivals, Festive and every other .coll-card grid.
   ========================================================================== */
.collections-right-grid,
.festive-products-grid,
.new-arrivals-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.festive-products-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.collections-right-grid>*,
.festive-products-grid>*,
.new-arrivals-grid>*,
.coll-card {
    min-width: 0;
}

.coll-card-name,
.coll-card-title,
.coll-card-price,
.coll-card-meta {
    overflow-wrap: anywhere;
    word-break: break-word;
}

@media (max-width: 1200px) {
    .festive-products-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 992px) {

    .collections-right-grid,
    .festive-products-grid,
    .new-arrivals-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {

    .collections-right-grid,
    .festive-products-grid,
    .new-arrivals-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }
}

/* Very narrow phones (<=380px): two columns still fit, but tighten the gap
   and card padding so the text has room instead of overflowing. */
@media (max-width: 380px) {

    .collections-right-grid,
    .festive-products-grid,
    .new-arrivals-grid {
        gap: 10px;
    }

    .coll-card-info,
    .coll-card-body {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

/* ==========================================================================
   SMALL PHONES (<=389px) — keep menu, logo and wishlist on ONE line
   Measured at 320px and 360px the wishlist heart wrapped onto a second row
   (y=84 instead of y=27) because the fixed-height logo was ~253px wide and
   left no room for the 44px icon. Letting the logo shrink fixes it.
   ========================================================================== */
@media (max-width: 389px) {
    .header-main-inner {
        column-gap: 6px;
    }

    .logo {
        min-width: 0;
        /* allow the flex item to shrink */
        flex: 1 1 auto;
    }

    .logo-img {
        height: auto;
        /* was a fixed 50px -> forced a wide box */
        max-height: 46px;
        max-width: 100%;
        width: auto;
    }
}

@media (max-width: 320px) {

    .btn-gold {
        padding: 15px 5px;
        letter-spacing: 0;
    }

    .btn-outline {
        padding: 14px 4px;
        letter-spacing: 0;
    }

    .slide-text-inner-2 .btn-group {
        display: flex;
        gap: 3px;
    }

    .slide-text-inner-2 .btn-group {
        left: 4px;
    }
}
/* ==========================================================================
   NEW SECTIONS (Sep-2026): 92.5 Jewellery + Gift & Articles
   Both reuse the existing .coll-card / .collections-right-grid styling; these
   rules only add the live-rate strip and the two-column product detail layout.
   ========================================================================== */
.live-rate-strip {
    background: #110f0c;
    border-bottom: 1px solid rgba(172, 131, 52, 0.25);
    padding: 16px 0;
    color: #fff;
}

.live-rate-strip-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    text-align: center;
}

.live-rate-pill {
    background: rgba(172, 131, 52, 0.12);
    border: 1px solid rgba(172, 131, 52, 0.4);
    padding: 9px 20px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
}

.live-rate-pill i { color: #4cd964; }
.live-rate-pill strong { color: var(--gold-primary, #ac8334); }

.live-rate-note {
    font-size: 0.85rem;
    color: #bbb;
}

/* Listing grids: 4 across, shrinking with the screen (minmax(0,1fr) so a long
   product name can never widen a column past the viewport). */
.silver-grid,
.gift-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

@media (max-width: 1200px) {
    .silver-grid, .gift-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .silver-grid, .gift-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

    /* Product detail: stack the gallery above the details on phones. */
    .sj-layout { grid-template-columns: 1fr !important; gap: 26px !important; }
}

/* Gift Type filter pills — same look as the Coins & Biscuits category pills. */
.gift-pill,
.silver-pill {
    display: inline-block;
    padding: 9px 20px;
    border: 1px solid #d8cfb8;
    border-radius: 50px;
    font-size: 0.88rem;
    letter-spacing: 0.5px;
    color: var(--text-primary, #2b2b2b);
    background: #fff;
    text-decoration: none;
    transition: all 0.25s ease;
}

.gift-pill:hover,
.silver-pill:hover {
    border-color: var(--gold-primary, #ac8334);
    color: var(--gold-dark, #7a581e);
}

.gift-pill.active,
.silver-pill.active {
    background: var(--gold-primary, #ac8334);
    border-color: var(--gold-primary, #ac8334);
    color: #fff;
}

/* ==========================================================================
   GOLD BOOKING ENQUIRY FORM (partials/gold-booking-form.blade.php)
   ========================================================================== */
.gb-enquiry-section {
    padding: 60px 0;
    background: var(--bg-primary, #fbf9f3);
}

.gb-enquiry-card {
    max-width: 720px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #e3d9c2;
    border-radius: 14px;
    padding: 34px;
}

.gb-enquiry-intro {
    text-align: center;
    color: var(--text-secondary, #6b6b6b);
    line-height: 1.7;
    margin-bottom: 26px;
}

.gb-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.gb-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.gb-field > span {
    font-size: 0.78rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-secondary, #6b6b6b);
}

.gb-field > span em {
    color: #c0392b;
    font-style: normal;
}

.gb-field input,
.gb-field select {
    padding: 12px 14px;
    border: 1px solid #d8cfb8;
    border-radius: 6px;
    /* 16px keeps iOS Safari from zooming the page on focus. */
    font-size: 16px;
    background: #fff;
    width: 100%;
}

.gb-field input:focus,
.gb-field select:focus {
    outline: none;
    border-color: var(--gold-primary, #ac8334);
}

.gb-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 22px;
}

.gb-chip {
    padding: 7px 16px;
    border: 1px solid #d8cfb8;
    border-radius: 50px;
    background: #fff;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.gb-chip:hover {
    border-color: var(--gold-primary, #ac8334);
    color: var(--gold-dark, #7a581e);
}

/* The look comes from .wa-inquiry-btn (the same green button as the product
   page). Only the things a <button> needs are added here — keep this rule free
   of padding/font-size so it cannot override that shared style. */
.gb-submit {
    width: 100%;
    border: none;
    cursor: pointer;
    font-family: var(--font-sans);
}

.gb-form-msg {
    min-height: 20px;
    margin: 12px 0 0;
    text-align: center;
    font-size: 0.9rem;
}

.gb-form-msg.is-ok { color: #2d7a2d; }
.gb-form-msg.is-error { color: #c0392b; }

.gb-form-note {
    font-size: 0.82rem;
    color: var(--text-secondary, #6b6b6b);
    text-align: center;
    margin-top: 6px;
    line-height: 1.6;
}

.gb-form-note a { color: var(--gold-primary, #ac8334); }

@media (max-width: 640px) {
    .gb-enquiry-card { padding: 24px 18px; }
    .gb-form-row { grid-template-columns: 1fr; gap: 14px; }
}

/* ==========================================================================
   DESKTOP NAV — fits 10 items (two were added in Sep-2026)
   The bar was already overflowing below 1440px with 8 items; these rules
   tighten the spacing as the screen narrows, and wrap to two centred rows at
   tablet width where ten uppercase labels simply cannot fit on one line.
   (Below 992px the hamburger drawer takes over, untouched.)
   ========================================================================== */
@media (min-width: 769px) {
    #nav-bar ul {
        gap: 18px;
    }

    #nav-bar ul li a {
        font-size: 0.85rem;
        letter-spacing: 1px;
        padding: 10px 4px;
    }
}

@media (min-width: 769px) and (max-width: 1799px) {
    #nav-bar ul {
        gap: 12px;
    }

    #nav-bar ul li a {
        font-size: 0.78rem;
        letter-spacing: 0.4px;
    }
}

@media (min-width: 992px) and (max-width: 1399px) {
    #nav-bar ul {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 0;
    }

    .header-nav-row {
        padding: 4px 0 8px;
    }
}

/* Product names on the two new listing grids wrap to two lines instead of
   being cut with an ellipsis. The shared .coll-card-name rule is nowrap +
   ellipsis, which suits the homepage's short category names but chopped real
   product names ("Silver Photo Frame — Classic") on phones. Scoped to these
   grids so the homepage keeps its single-line look. */
.silver-grid .coll-card-name,
.gift-grid .coll-card-name {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
    min-height: 2.7em;
}

/* ==========================================================================
   BOOKING BREAKDOWN — payable / GST / booking amount / weight
   Filled in live by app.js §21 as the customer types.
   ========================================================================== */
.gb-breakdown {
    background: var(--bg-primary, #fbf9f3);
    border: 1px solid #e3d9c2;
    border-radius: 10px;
    padding: 16px 18px;
    margin: 4px 0 22px;
}

.gb-breakdown[hidden] { display: none; }

/* A row holding a single field spans the full width rather than leaving an
   empty half beside it. */
.gb-form-row-single { grid-template-columns: 1fr; }

.gb-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    padding: 5px 0;
    font-size: 0.92rem;
    color: var(--text-secondary, #6b6b6b);
}

.gb-row strong {
    color: var(--text-primary, #2b2b2b);
    font-weight: 600;
    white-space: nowrap;
}

/* The weight — what the customer actually came for. */
.gb-row-total {
    border-top: 2px solid #ded3b8;
    margin-top: 6px;
    padding-top: 10px;
    font-size: 1rem;
}

.gb-row-total span { color: var(--text-primary, #2b2b2b); font-weight: 600; }

.gb-row-total strong {
    font-size: 1.25rem;
    color: var(--gold-dark, #7a581e);
}

.gb-locked {
    margin: 10px 0 0;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--text-secondary, #6b6b6b);
}

/* ==========================================================================
   PAY NOW — QR code and bank details under the booking form
   Hidden entirely until the owner fills Store Settings → Payment Details.
   ========================================================================== */
.gb-payment {
    margin-top: 26px;
    padding-top: 24px;
    border-top: 1px dashed #ded3b8;
}

.gb-payment-title {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    text-align: center;
    margin: 0 0 16px;
    color: var(--gold-dark, #7a581e);
}

.gb-payment-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    align-items: flex-start;
    justify-content: center;
}

.gb-qr {
    text-align: center;
    flex: 0 0 auto;
}

.gb-qr img {
    width: 160px;
    height: 160px;
    object-fit: contain;
    background: #fff;
    border: 1px solid #e3d9c2;
    border-radius: 8px;
    padding: 8px;
    display: block;
}

.gb-qr span {
    display: block;
    margin-top: 7px;
    font-size: 0.78rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-secondary, #6b6b6b);
}

.gb-payment-details {
    flex: 1 1 240px;
    min-width: 0;
}

.gb-pay-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 6px 0;
    border-bottom: 1px solid #efe8d7;
    font-size: 0.9rem;
    color: var(--text-secondary, #6b6b6b);
}

.gb-pay-row:last-child { border-bottom: 0; }

.gb-pay-row strong {
    color: var(--text-primary, #2b2b2b);
    font-weight: 600;
    text-align: right;
    overflow-wrap: anywhere;
}

.gb-payment-note {
    margin: 16px 0 0;
    text-align: center;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-secondary, #6b6b6b);
}

.gb-payment-note i { color: #25D366; }

@media (max-width: 480px) {
    .gb-qr img { width: 140px; height: 140px; }
    .gb-pay-row { flex-direction: column; gap: 2px; }
    .gb-pay-row strong { text-align: left; }
}

/* Home page previews for the 92.5 Jewellery and Gift & Articles sections.
   The grid itself reuses .collections-right-grid + .silver-grid / .gift-grid. */
.home-module-section {
    padding-top: 40px;
}

.home-module-cta {
    text-align: center;
    margin-top: 32px;
}

.home-module-cta .btn-gold {
    display: inline-block;
    padding: 14px 34px;
}

/* ==========================================================================
   BRIDAL COLLECTION RAIL — wrapping responsive grid
   The track used to be one non-wrapping flex row (`overflow-x: hidden`), so
   from the fifth card on everything was simply clipped off the right edge —
   on desktop there was no scrollbar to reach it either. It is now a grid with
   a fixed column count per breakpoint, so the ten cards the controller sends
   always land in whole rows and nothing is ever cut.

   Scoped to `.bs-scroll-track` throughout: `.bs-card` is reused by the catalog
   grid and the wishlist page, which must keep their own sizing.
   ========================================================================== */
.bs-scroll-track {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 34px 24px;
    align-items: start;
    padding: 0 50px 20px;
    /* A grid wraps, so the mobile `overflow-x: auto !important` swipe rail
       (and the desktop clip it came from) is no longer wanted. */
    overflow: visible !important;
}

/* The old flex sizing — including the 1920/2560 overrides that pin a card to
   380px/480px — must not cage a grid cell. */
.bs-scroll-track .bs-card {
    flex: initial;
    width: auto;
    min-width: 0;
    max-width: none;
}

/* A long product name must wrap inside its column, never widen it. */
.bs-scroll-track .bs-card-info > p {
    overflow-wrap: anywhere;
}

.bs-scroll-track .bs-card-name {
    font-size: 0.95rem;
}

.bs-scroll-track .bs-card-meta {
    font-size: 0.75rem;
}

.bs-scroll-track .bs-card-price {
    font-family: var(--font-serif);
    font-size: 0.95rem;
    font-weight: 600;
    margin-top: 4px;
}

/* Desktop: five across, so the ten products read as two even rows. */
@media (min-width: 1280px) {
    .bs-scroll-track {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 38px 26px;
    }
}

/* Wide desktops: more air, and the rail stops stretching on 4K panels. */
@media (min-width: 1600px) {
    .bs-scroll-track {
        gap: 40px 28px;
        padding: 0 60px 20px;
        max-width: 2000px;
        margin-left: auto;
        margin-right: auto;
    }

    .bs-scroll-track .bs-card-name,
    .bs-scroll-track .bs-card-price {
        font-size: 1.1rem;
    }

    .bs-scroll-track .bs-card-meta {
        font-size: 0.85rem;
    }
}

/* Small laptops / landscape tablets. */
@media (max-width: 1199px) {
    .bs-scroll-track {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 30px 20px;
        padding: 0 32px 20px;
    }
}

/* Portrait tablets. */
@media (max-width: 991px) {
    .bs-scroll-track {
        gap: 28px 18px;
        padding: 0 24px 20px;
    }
}

/* Phones: two across, flush with the page gutter the section already adds.
   768px, not 767px — that is the breakpoint the rest of this stylesheet uses
   for the mobile gutters, so the layout and the gutters flip together. */
@media (max-width: 768px) {
    .bs-scroll-track {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 26px 14px;
        padding: 0 0 16px;
    }

    .bs-scroll-track .bs-card-name {
        font-size: 0.85rem;
    }

    .bs-scroll-track .bs-card-meta {
        font-size: 0.7rem;
    }

    .bs-scroll-track .bs-card-price {
        font-size: 0.85rem;
    }
}

@media (max-width: 380px) {
    .bs-scroll-track {
        gap: 22px 10px;
    }

    .bs-scroll-track .bs-card-name {
        font-size: 0.8rem;
    }
}