/* === YOBESH DESIGN BUILD: COBALT BLUE + ROYAL PURPLE THEME === */

:root {
    /* === COBALT BLUE + PURPLE PALETTE === */
    --cobalt-deep:   #001F6B;   /* Deep cobalt navy — dark surfaces */
    --cobalt:        #0047AB;   /* True cobalt blue — primary brand */
    --cobalt-mid:    #0057D0;   /* Rich cobalt — hover states */
    --cobalt-light:  #1E6FF5;   /* Bright cobalt — accents */
    --purple-deep:   #4A0080;   /* Deep purple */
    --purple:        #7B2FBE;   /* Royal purple — buttons, CTAs */
    --purple-mid:    #9B3DE8;   /* Vivid purple — hover */
    --purple-soft:   #B76EF0;   /* Soft purple — highlights */
    --lavender:      #EDE0FF;   /* Light lavender — surfaces */
    --frost:         #EEF4FF;   /* Cool blue-white */
    --concrete:      #F4F4F8;
    --chalk:         #FAFBFF;
    --white:         #FFFFFF;
    --ink:           #0A0F1E;

    /* === SEMANTIC ALIASES — LIGHT THEME === */
    --bg-primary:     #ffffff;
    --bg-secondary:   #f4f4f8;
    --bg-tertiary:    #ede0ff;
    --text-primary:   #0a0f1e;
    --text-secondary: #3a3a5c;
    --text-muted:     #8888aa;
    --accent:         #7B2FBE;           /* PURPLE — primary CTA */
    --accent-hover:   #9B3DE8;           /* PURPLE hover */
    --accent-blue:    #0047AB;           /* COBALT — secondary accent */
    --accent-blue-hover: #0057D0;
    --accent-soft:    rgba(123, 47, 190, 0.09);
    --border-light:   #e2e2ee;
    --border-mid:     rgba(123, 47, 190, 0.22);

    /* === SHADOWS === */
    --shadow-sm:   0 1px 4px rgba(0, 15, 60, 0.07);
    --shadow-md:   0 4px 16px rgba(0, 15, 60, 0.10);
    --shadow-lg:   0 12px 36px rgba(0, 15, 60, 0.13);
    --shadow-xl:   0 24px 60px rgba(0, 15, 60, 0.16);
    --glow:        0 0 32px rgba(123, 47, 190, 0.30);
    --glow-violet: 0 0 32px rgba(155, 61, 232, 0.32);
    --glow-blue:   0 0 32px rgba(0, 71, 171, 0.28);

    /* Legacy compat aliases */
    --indigo-deep:   var(--ink);
    --indigo-dark:   var(--cobalt-deep);
    --indigo-mid:    var(--cobalt);
    --indigo-bright: var(--cobalt-light);
    --violet:        var(--purple);
    --violet-soft:   var(--purple-soft);
    --sage-dark:     var(--cobalt-deep);
    --sage:          var(--cobalt);
    --sage-light:    var(--purple-soft);
    --beige-warm:    var(--frost);
    --beige:         var(--concrete);
    --beige-light:   var(--chalk);
    --accent-gold:   var(--purple);
    --accent-dark:   var(--purple-deep);
    --walnut:        var(--cobalt);
    --cream:         var(--chalk);
    --muted-green:   var(--text-secondary);
    --black-refined: var(--ink);
    --blueprint:     var(--cobalt);
}

/* === DARK MODE === */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-primary:    #08091A;
        --bg-secondary:  #0F1128;
        --bg-tertiary:   #1A0A35;
        --text-primary:  #EEF0FF;
        --text-secondary:#9898C0;
        --text-muted:    #6060A0;
        --accent:        #9B3DE8;
        --accent-hover:  #B76EF0;
        --accent-blue:   #1E6FF5;
        --accent-soft:   rgba(155, 61, 232, 0.15);
        --border-light:  rgba(123, 47, 190, 0.18);
        --border-mid:    rgba(155, 61, 232, 0.32);
        --shadow-sm:  0 1px 4px rgba(0,0,0,0.40);
        --shadow-md:  0 4px 16px rgba(0,0,0,0.50);
        --shadow-lg:  0 12px 36px rgba(0,0,0,0.60);
        --shadow-xl:  0 24px 60px rgba(0,0,0,0.70);
        --chalk:      #08091A;
        --concrete:   #0F1128;
        --frost:      #1A0A35;
        --ink:        #EEF0FF;
        --cobalt:     #1E6FF5;
        --purple:     #9B3DE8;
        --purple-soft:#B76EF0;
    }
}

[data-theme="dark"] {
    --bg-primary:    #08091A;
    --bg-secondary:  #0F1128;
    --bg-tertiary:   #1A0A35;
    --text-primary:  #EEF0FF;
    --text-secondary:#9898C0;
    --text-muted:    #6060A0;
    --accent:        #9B3DE8;
    --accent-hover:  #B76EF0;
    --accent-blue:   #1E6FF5;
    --accent-soft:   rgba(155, 61, 232, 0.15);
    --border-light:  rgba(123, 47, 190, 0.18);
    --border-mid:    rgba(155, 61, 232, 0.32);
    --shadow-sm:  0 1px 4px rgba(0,0,0,0.40);
    --shadow-md:  0 4px 16px rgba(0,0,0,0.50);
    --shadow-lg:  0 12px 36px rgba(0,0,0,0.60);
    --chalk:      #08091A;
    --concrete:   #0F1128;
    --frost:      #1A0A35;
    --ink:        #EEF0FF;
    --cobalt:     #1E6FF5;
    --purple:     #9B3DE8;
    --purple-soft:#B76EF0;
}

/* === TYPOGRAPHY === */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-sizing: border-box;
}

html {
    color-scheme: light dark;
    transition: background-color 0.3s ease, color 0.3s ease;
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    line-height: 1.6;
    transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

p { color: var(--text-secondary); }

/* === GRADIENT UTILITIES === */
.gradient-brand {
    background: linear-gradient(135deg, var(--indigo-mid) 0%, var(--violet) 100%);
}
.gradient-brand-text {
    background: linear-gradient(135deg, var(--indigo-bright) 0%, var(--violet) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.gradient-surface {
    background: linear-gradient(160deg, var(--bg-primary) 0%, var(--frost) 100%);
}

/* === BUTTONS === */
.btn-primary {
    background: linear-gradient(135deg, #7B2FBE 0%, #9B3DE8 100%);
    color: #FFFFFF;
    border: none;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 0.82rem 1.9rem;
    border-radius: 0.5rem;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 18px rgba(123, 47, 190, 0.38);
}
.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(123, 47, 190, 0.50), var(--glow);
    filter: brightness(1.08);
}

.btn-secondary {
    background: transparent;
    color: #0047AB;
    border: 2px solid #0047AB;
    font-weight: 700;
    padding: 0.78rem 1.7rem;
    border-radius: 0.5rem;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-secondary:hover {
    background: #0047AB;
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 71, 171, 0.35);
}

/* Legacy compat */
.btn-accent  { background: linear-gradient(135deg, #7B2FBE, #9B3DE8); color:#fff; border:none; box-shadow:0 4px 18px rgba(123,47,190,0.38); }
.btn-premium { background: #001F6B; color:#fff; border:none; }
.btn-gold    { background: #7B2FBE; color:#fff; border:none; }

/* === CARDS === */
.card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 1rem;
    box-shadow: var(--shadow-sm);
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.card:hover {
    border-color: var(--border-mid);
    box-shadow: var(--shadow-xl), var(--glow);
    transform: translateY(-6px);
}

/* === PRODUCT CARDS === */
.product-card {
    transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
    border-radius: 1rem;
    overflow: hidden;
}
.product-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-xl), 0 0 40px rgba(75,79,232,0.12);
    border-color: rgba(75, 79, 232, 0.35);
}
.product-card .image-wrap {
    overflow: hidden;
    background: var(--bg-tertiary);
    position: relative;
}
.product-card .image-wrap {
    width: 100%;
    padding-top: 75%; /* maintains consistent card image height */
    position: relative;
    overflow: hidden;
    background: #f5f3fb;
}
.product-card .image-wrap img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.product-card .card-info {
    padding: 11px 13px 13px;
}

/* Ensure product grid items line up in rows without large gaps
   Make each product-card stretch to fill the grid cell and use
   flex layout to keep image area fixed and info area filling space. */
.products-grid, .products-grid-home {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1024px) {
    .products-grid, .products-grid-home { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}
@media (max-width: 768px) {
    .products-grid, .products-grid-home { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (max-width: 480px) {
    .products-grid, .products-grid-home { grid-template-columns: 1fr; gap: 12px; }
}

/* Category grid — responsive for home page */
.cat-grid-home {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 900px) {
    .cat-grid-home { grid-template-columns: repeat(4, 1fr); gap: 14px; }
}
@media (max-width: 700px) {
    .cat-grid-home { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}
@media (max-width: 480px) {
    .cat-grid-home { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
.products-grid .product-card,
.products-grid-home .product-card {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    height: auto;
}
.product-card .image-wrap {
    flex: 0 0 auto; /* image keeps its aspect ratio */
}

@media (max-width: 900px) {
    .products-grid .product-card, .products-grid-home .product-card { min-height: 220px; }
}
@media (max-width: 580px) {
    .products-grid .product-card, .products-grid-home .product-card { min-height: 200px; }
}
.product-card .card-info {
    flex: 1 1 auto; /* info fills remaining height */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.product-card .product-name { margin-bottom: 0.75rem; }

.product-card .category-label {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 4px;
}
.product-card .product-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.28;
    margin-bottom: 9px;
    height: 2.56em;
    overflow: hidden;
}
.product-card .price-row {
    display:flex;align-items:center;justify-content:space-between;gap:4px;
}
.product-card .price { font-size:14px;font-weight:700;color:var(--accent-blue); }
.product-card .price.sale { color: var(--accent); }
.product-card .regular-price { font-size:10px;color:#bbb;text-decoration:line-through;margin-right:3px; }
.product-card .stock-badge {
    font-size:9px;font-weight:700;color:var(--accent-blue);background:rgba(0,71,171,0.08);padding:2px 7px;border-radius:3px;text-transform:uppercase;white-space:nowrap;
}
.product-card .stock-badge.soldout { color:#b91c1c;background:#fee2e2; }
.product-card .badge-sale {
    position:absolute;top:9px;left:9px;background:var(--accent);color:#fff;font-size:9px;font-weight:800;padding:2px 8px;border-radius:3px;letter-spacing:0.8px;text-transform:uppercase;
}

/* Gallery thumbnails used on the product detail page */
.gallery-thumb { cursor:pointer; border:2px solid transparent; border-radius:10px; overflow:hidden; }
.gallery-thumb img { display:block; width:100%; height:100%; object-fit:cover; }
.gallery-thumb.selected { border-color: var(--accent); }

/* Product detail main image */
.detail-image-frame .main-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gallery-grid .gallery-thumb { border: 1px solid var(--border-light); }
.gallery-thumb.selected { border-color: var(--accent); box-shadow: 0 6px 18px rgba(123,47,190,0.12); }

.product-card img {
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.product-card:hover img { transform: scale(1.06); }

/* Blueprint corner accent on card hover */
.product-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 1rem;
    background: linear-gradient(135deg, rgba(75,79,232,0.06) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
.product-card:hover::before { opacity: 1; }

/* === BADGES === */
.badge-premium {
    background: rgba(75, 79, 232, 0.12);
    color: var(--indigo-bright);
    border: 1px solid rgba(75, 79, 232, 0.25);
    border-radius: 50px;
    padding: 0.35rem 0.85rem;
    font-size: 10px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    font-weight: 600;
}
.badge-sale {
    background: linear-gradient(135deg, var(--indigo-bright), var(--violet));
    color: white;
    border-radius: 50px;
    padding: 0.3rem 0.8rem;
    font-size: 10px;
    letter-spacing: 1.4px;
    font-weight: 700;
    text-transform: uppercase;
}

/* === NAVIGATION === */
.nav-link {
    position: relative;
    color: var(--text-primary);
    transition: color 0.25s ease;
    font-weight: 500;
    letter-spacing: 0.01em;
}
.nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(to right, var(--indigo-bright), var(--violet));
    border-radius: 2px;
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-link:hover { color: var(--accent); }
.nav-link:hover::after { width: 100%; }

/* === INPUTS === */
.premium-input {
    background: var(--bg-primary);
    border: 1.5px solid var(--border-light);
    transition: all 0.2s ease;
    font-size: 0.93rem;
    color: var(--text-primary);
    border-radius: 0.5rem;
}
.premium-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(75, 79, 232, 0.10);
    outline: none;
}
.premium-input::placeholder { color: var(--text-muted); }

/* === HERO ELEMENTS === */
.hero-premium {
    background: linear-gradient(135deg, var(--indigo-deep) 0%, var(--indigo-dark) 55%, #251757 100%);
    color: var(--white);
    position: relative;
    overflow: hidden;
}
.hero-premium::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 50%, rgba(75,79,232,0.18) 0%, transparent 55%),
        radial-gradient(circle at 80% 20%, rgba(124,92,246,0.15) 0%, transparent 50%);
    pointer-events: none;
}

/* Blueprint grid overlay — architectural texture */
.blueprint-grid {
    background-image:
        linear-gradient(rgba(75,79,232,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(75,79,232,0.06) 1px, transparent 1px);
    background-size: 48px 48px;
}

/* === SECTION DIVIDER === */
.luxury-divider {
    height: 1px;
    background: linear-gradient(to right, transparent, var(--border-mid), transparent);
}
.section-title {
    font-family: 'Playfair Display', Georgia, serif;
    color: var(--text-primary);
    font-weight: 500;
    letter-spacing: -0.025em;
}

/* Gold/violet underline accent */
.gold-underline { position: relative; }
.gold-underline::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(to right, var(--indigo-bright), var(--violet));
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.gold-underline:hover::after { width: 100%; }

/* === FOOTER === */
footer {
    background: var(--indigo-deep);
    color: rgba(232, 234, 255, 0.75);
    border-top: 1px solid rgba(75,79,232,0.20);
}
footer a {
    color: rgba(232, 234, 255, 0.65);
    transition: color 0.3s ease;
}
footer a:hover { color: var(--violet-soft); }

/* === UTILITY CLASSES === */
.text-accent       { color: var(--accent); }
.text-muted        { color: var(--text-muted); }
.text-violet       { color: var(--violet); }
.bg-cream          { background-color: var(--bg-primary); }
.bg-beige          { background-color: var(--bg-secondary); }
.border-subtle     { border-color: var(--border-light); }

/* Architectural shadow utility */
.premium-shadow    { box-shadow: var(--shadow-md); }
.architectural-hero {
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* === LOGO STYLE === */
.logo-brand {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-weight: 300;
    font-size: 30px;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, var(--indigo-bright) 0%, var(--violet) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: filter 0.3s ease;
}
.logo-brand:hover { filter: brightness(1.15); }

/* === STATS / COUNTER ELEMENTS === */
.stat-num {
    font-family: 'Playfair Display', Georgia, serif;
    background: linear-gradient(135deg, var(--indigo-bright), var(--violet));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}

/* === DARK MODE TOGGLE === */
.theme-toggle {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--indigo-bright), var(--violet));
    color: white;
    border: none;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 24px rgba(75,79,232,0.45), var(--glow);
    transition: all 0.3s ease;
    z-index: 999;
}
.theme-toggle:hover {
    transform: scale(1.12);
    box-shadow: 0 10px 32px rgba(75,79,232,0.55), var(--glow-violet);
}

/* === FEATURE STRIP (trust bar) === */
.trust-bar {
    background: linear-gradient(90deg, var(--indigo-dark) 0%, var(--indigo-mid) 50%, var(--indigo-dark) 100%);
    color: rgba(232,234,255,0.85);
    font-size: 11px;
    letter-spacing: 1.4px;
}

/* === COLLECTION CARDS === */
.collection-card {
    position: relative;
    border-radius: 1.25rem;
    overflow: hidden;
    background: var(--indigo-dark);
}
.collection-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(75,79,232,0.18) 0%, transparent 50%, rgba(124,92,246,0.20) 100%);
    pointer-events: none;
    transition: opacity 0.4s ease;
    opacity: 0;
}
.collection-card:hover::after { opacity: 1; }
.collection-card:hover { box-shadow: var(--glow-violet), var(--shadow-xl); }

/* === PRODUCT DETAIL PAGE === */
.detail-image-wrap {
    background: linear-gradient(145deg, var(--frost) 0%, var(--bg-secondary) 100%);
    border-radius: 1.25rem;
    overflow: hidden;
    border: 1px solid var(--border-light);
}

/* Responsive container */
.tail-container {
    max-width: 1480px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 2.25rem;
    padding-right: 2.25rem;
}
@media (max-width: 640px) {
    .tail-container { padding-left: 1.25rem; padding-right: 1.25rem; }
}

/* === SCROLL-TO-TOP GLOW LINE === */
body::before {
    content: '';
    display: block;
    height: 3px;
    background: linear-gradient(90deg, var(--indigo-bright) 0%, var(--violet) 50%, var(--blueprint) 100%);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
}

/* ============================================================
   YOBESH PRODUCT GRID + CARD SYSTEM  (final)
   Same structure as category tiles — gap-based, no nth-child.
   ============================================================ */

.products-grid-home {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.products-grid-5 {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.cat-grid-home {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

/* Responsive */
@media (max-width: 1024px) {
    .products-grid-home,
    .products-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .products-grid-5 { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .cat-grid-home  { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 580px) {
    .products-grid-home,
    .products-grid-5,
    .products-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .cat-grid-home  { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
}