*,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    :root {
      /* Logo-Matched Deep Green & Gold Palette */
      --bg-deep: #0B1C15;
      /* Darkest background */
      --bg-main: #112A20;
      /* Main background matching logo */
      --bg-card: #18382B;
      /* Slightly lighter green for cards */
      --bg-hover: #1E4737;
      /* Hover states */

      --gold: #D6B054;
      /* Main metallic gold from logo */
      --gold-light: #F4D583;
      /* Highlight gold */
      --gold-dark: #A88636;
      /* Shadow gold */
      --gold-pale: rgba(214, 176, 84, 0.1);

      --text-light: #F5EFEB;
      /* Creamy white for readability */
      --text-muted: #9BAEA5;
      /* Muted greenish-grey for secondary text */
      --text-dark: #0B1C15;
      /* Dark green for text on gold elements */

      --border: #234737;
      /* Subtle green borders */

      --font-display: 'Cormorant Garamond', serif;
      --font-body: 'Nunito', sans-serif;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: var(--font-body);
      background: var(--bg-main);
      color: var(--text-light);
      overflow-x: hidden;
    }

    /* ── MARQUEE BAR ── */
    .topbar {
      background: var(--gold);
      color: var(--text-dark);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      padding: 8px 0;
      overflow: hidden;
      white-space: nowrap;
    }

    .topbar-track {
      display: inline-block;
      animation: marquee 28s linear infinite;
    }

    .topbar-track span {
      margin: 0 40px;
    }

    @keyframes marquee {
      0% {
        transform: translateX(0)
      }

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

   

    /* ── NAVBAR ── */
    nav {
      background: rgba(11, 28, 21, 0.95);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--border);
      position: sticky;
      top: 0;
      z-index: 100;
      padding: 0 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 75px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    }

    /* Hamburger Button (Hidden on Desktop) */
    .mobile-menu-btn {
      display: none;
      background: none;
      border: none;
      color: var(--gold);
      font-size: 24px;
      cursor: pointer;
      transition: color 0.2s;
    }

    .mobile-menu-btn:hover {
      color: var(--gold-light);
    }

    .nav-logo {
      font-family: var(--font-display);
      font-size: 32px;
      font-weight: 500;
      color: var(--gold);
      letter-spacing: 2px;
      text-decoration: none;
      display: flex;
      flex-direction: column;
      line-height: 1;
      align-items: center;
    }

    .nav-logo span {
      font-size: 9px;
      font-family: var(--font-body);
      font-weight: 400;
      letter-spacing: 5px;
      color: var(--gold-light);
      text-transform: uppercase;
      margin-top: 4px;
    }

    .nav-links {
      display: flex;
      gap: 32px;
      list-style: none;
    }

    .nav-links a {
      font-family: var(--font-body);
      font-size: 13px;
      font-weight: 400;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--text-light);
      text-decoration: none;
      position: relative;
      padding-bottom: 4px;
      transition: color .2s;
    }

    .nav-links a::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 1.5px;
      background: var(--gold);
      transition: width .3s;
    }

    .nav-links a:hover {
      color: var(--gold);
    }

    .nav-links a:hover::after {
      width: 100%;
    }

    .nav-icons {
      display: flex;
      gap: 20px;
      align-items: center;
    }

    .nav-icon {
      background: none;
      border: none;
      cursor: pointer;
      color: var(--text-light);
      font-size: 18px;
      position: relative;
      transition: color .2s;
    }

    .nav-icon:hover {
      color: var(--gold);
    }

    .cart-badge {
      position: absolute;
      top: -6px;
      right: -6px;
      background: var(--gold);
      color: var(--text-dark);
      font-size: 9px;
      font-weight: 700;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
.hero {
    min-height: 50vh;
    background-image: url('../images/banner/banner-1.png'), radial-gradient(circle at center right, var(--bg-card) 0%, var(--bg-deep) 100%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* Use Flexbox instead of Grid so the text doesn't get squeezed */
    display: flex;
    align-items: center;
    padding: 60px 80px;
    position: relative;
    overflow: hidden;
}

.hero-text {
    max-width: 600px; /* Prevents text from stretching too far */
}

    .hero-badge {
      display: inline-block;
      background: var(--gold-pale);
      color: var(--gold-light);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 3px;
      text-transform: uppercase;
      padding: 6px 16px;
      border-radius: 20px;
      border: 1px solid rgba(214, 176, 84, 0.3);
      margin-bottom: 24px;
    }

    .hero h1 {
      font-family: var(--font-display);
      font-size: 72px;
      font-weight: 400;
      line-height: 1.1;
      color: var(--text-light);
      margin-bottom: 20px;
    }

    .hero h1 em {
      font-style: italic;
      color: var(--gold);
      font-weight: 300;
    }

    .hero p {
      font-size: 16px;
      color: var(--text-muted);
      line-height: 1.8;
      max-width: 440px;
      margin-bottom: 40px;
      font-weight: 300;
    }

    .hero-btns {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
    }

    .btn-primary {
      background: var(--gold);
      color: var(--text-dark);
      border: none;
      padding: 16px 36px;
      font-family: var(--font-body);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      cursor: pointer;
      border-radius: 2px;
      text-decoration: none;
      display: inline-block;
      transition: background .2s, transform .15s;
    }

    .btn-primary:hover {
      background: var(--gold-light);
      transform: translateY(-2px);
    }

    .btn-outline {
      background: transparent;
      color: var(--gold);
      border: 1.5px solid var(--gold);
      padding: 16px 36px;
      font-family: var(--font-body);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 2px;
      text-transform: uppercase;
      cursor: pointer;
      border-radius: 2px;
      text-decoration: none;
      display: inline-block;
      transition: all .2s;
    }

    .btn-outline:hover {
      background: var(--gold-pale);
    }

    .hero-img-wrap {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .hero-img-bg {
      width: 420px;
      height: 520px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 60% 40% 55% 45% / 45% 55% 45% 55%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
      position: relative;
      overflow: hidden;
    }

    .hero-img-bg::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      border: 1px solid var(--gold);
      opacity: 0.2;
      transform: scale(0.95);
    }

    .hero-jewelry-svg {
      width: 320px;
      height: 320px;
      animation: float 5s ease-in-out infinite;
    }

    @keyframes float {

      0%,
      100% {
        transform: translateY(0)
      }

      50% {
        transform: translateY(-14px)
      }
    }

    .hero-stat {
      position: absolute;
      background: var(--bg-deep);
      border-radius: 12px;
      padding: 14px 20px;
      border: 1px solid var(--border);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
      font-family: var(--font-body);
    }

    .hero-stat.s1 {
      bottom: 40px;
      left: -20px;
    }

    .hero-stat.s2 {
      top: 60px;
      right: 0;
    }

    .hero-stat .num {
      font-family: var(--font-display);
      font-size: 28px;
      font-weight: 500;
      color: var(--gold);
    }

    .hero-stat .lbl {
      font-size: 11px;
      color: var(--text-muted);
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    /* ── WHOLESALE IMAGE RIBBON ── */
    .wholesale-ribbon-img {
        width: 100%;
        display: block;
        margin: 0;
        padding: 0;
        line-height: 0; /* Magic trick: Removes the tiny white gap below the image */
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        background: var(--bg-deep); /* Fallback background color */
    }

    .wholesale-ribbon-img a {
        display: block;
        width: 100%;
    }

    .wholesale-ribbon-img img {
        width: 100%;
        height: auto; /* Keeps the proportions perfect on mobile phones */
        display: block;
        object-fit: cover;
    }

    /* ── SECTION TITLES ── */
    .section-head {
      text-align: center;
      margin-bottom: 50px;
    }

    .section-head .overline {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 4px;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 12px;
    }

    .section-head h2 {
      font-family: var(--font-display);
      font-size: 46px;
      font-weight: 400;
      color: var(--text-light);
      line-height: 1.2;
    }

    .section-head h2 em {
      font-style: italic;
      color: var(--gold);
    }

    .divider {
      width: 60px;
      height: 1px;
      background: var(--gold);
      margin: 18px auto 0;
      opacity: 0.5;
    }

    /* ── CATEGORIES ── */
    .categories {
      padding: 30px 30px;
      background: var(--bg-main);
      background-image: url(../images/banner/bn.png);
      background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    }

    .cat-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
      gap: 40px;
    }

    .cat-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 30px;
      cursor: pointer;
      text-decoration: none;
      transition: transform .3s;
    }

    .cat-card:hover {
      transform: translateY(-5px);
    }

    .cat-circle {
      width: 150px;
      height: 150px;
      border-radius: 50%;
      border: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32px;
      transition: border-color .3s, background .3s;
    }


    /* This ensures the image perfectly fills the circular parent container */
    .cat-circle img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      /* Crops the image to fit the box without stretching */
      border-radius: 50%;
      /* 50% is the standard for perfect circles */
    }

    .cat-card:hover .cat-circle {
      border-color: var(--gold);
      background: var(--bg-hover);
    }

    .cat-label {
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--text-light);
      text-align: center;
      transition: color .3s;
    }

    .cat-card:hover .cat-label {
      color: var(--gold);
    }

    /* ── STATIC CATEGORY BANNER ── */
    .categories-banner {
        width: 100%;
        margin: 0;
        padding: 0;
        display: block;
        background: var(--bg-deep); /* Fallback color */
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
    }

    .responsive-cat-image {
        width: 100%;
        height: auto; /* This keeps the proportions perfect on small screens */
        display: block;
        object-fit: contain;
    }

    /* ── FEATURED BANNER ── */
    .featured-banner {
      background: var(--bg-deep);
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      background-image: url(../images/banner/banner-3.png);
      padding: 80px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: center;
    }

    .featured-banner h2 {
      font-family: var(--font-display);
      font-size: 56px;
      font-weight: 300;
      line-height: 1.1;
      margin-bottom: 20px;
    }

    .featured-banner h2 em {
      color: var(--gold);
      font-style: italic;
    }

    .featured-banner p {
      color: var(--text-light);
      line-height: 1.8;
      font-size: 15px;
      margin-bottom: 32px;
      font-weight: 300;
    }

    .banner-cards {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }

    .banner-card {
      /* Existing styles */
      background: var(--bg-card);
      /* Or whatever your background is */
      border: 1px solid var(--border);
      border-radius: 4px;
      padding: 24px;
      transition: border-color .3s;

      /* NEW FLEXBOX STYLES */
      display: flex;
      align-items: center;
      /* Centers the text vertically with the image. Use flex-start to align at the top */
      gap: 16px;
      /* This creates the space between the image and the text */
    }

    .banner-card:hover {
      border-color: rgba(214, 176, 84, 0.4);
    }

    .banner-card-icon {
      flex-shrink: 0;
      /* Prevents the image column from shrinking if the text gets too long */
      /* Remove margin-bottom if you had it previously, because 'gap' handles the spacing now */
    }

    .banner-card-icon img {
      width: 100px;
      /* Adjust this to fit your exact icons */
      height: auto;
    }

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

    .banner-text h4 {
      font-size: 14px;
      font-weight: 500;
      color: var(--gold-light);
      margin-bottom: 4px;
      /* Space between title and paragraph */
      margin-top: 0;
    }

    .banner-text p {
      font-size: 13px;
      color: var(--text-muted);
      margin: 0;
      line-height: 1.6;
    }

    .banner-card h4 {
      font-size: 14px;
      font-weight: 500;
      color: var(--gold-light);
      margin-bottom: 6px;
    }

    .banner-card p {
      font-size: 13px;
      color: var(--text-light);
      margin: 0;
      line-height: 1.6;
    }

    /* ── PRODUCTS GRID ── */
    .products-section {
      padding: 80px 60px;
      background: var(--bg-main);
    }

    .product-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 30px;
    }

    .product-card {
      background: var(--bg-card);
      border-radius: 4px;
      overflow: hidden;
      border: 1px solid var(--border);
      transition: border-color .3s, transform .3s;
      position: relative;
      cursor: pointer;
    }

    .product-card:hover {
      border-color: rgba(214, 176, 84, 0.5);
      transform: translateY(-5px);
    }

    .product-img {
      height: 260px;
      background: var(--bg-deep);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 80px;
      position: relative;
      border-bottom: 1px solid var(--border);
    }

    .product-badge {
      position: absolute;
      top: 16px;
      left: 16px;
      background: var(--gold);
      color: var(--text-dark);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 1px;
      padding: 4px 10px;
      border-radius: 2px;
      text-transform: uppercase;
    }

    .product-badge.sale {
      background: #8C3030;
      color: white;
    }

    .product-badge.new {
      background: var(--gold-light);
    }

    .wishlist-btn {
      position: absolute;
      top: 16px;
      right: 16px;
      background: rgba(11, 28, 21, 0.6);
      border: 1px solid var(--border);
      color: var(--text-light);
      width: 34px;
      height: 34px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      cursor: pointer;
      transition: all .2s;
      backdrop-filter: blur(4px);
    }

    .wishlist-btn:hover {
      background: var(--gold);
      color: var(--text-dark);
      border-color: var(--gold);
    }

    .product-info {
      padding: 20px;
      text-align: center;
    }

    .product-info h3 {
      font-size: 14px;
      font-weight: 400;
      color: var(--text-light);
      margin-bottom: 8px;
      line-height: 1.5;
      letter-spacing: 0.5px;
    }

    .product-price {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-bottom: 16px;
    }

    .price-current {
      font-family: var(--font-display);
      font-size: 22px;
      font-weight: 500;
      color: var(--gold);
    }

    .price-old {
      font-size: 13px;
      color: var(--text-muted);
      text-decoration: line-through;
    }

    .add-cart-btn {
      width: 100%;
      background: transparent;
      color: var(--gold);
      border: 1px solid var(--border);
      padding: 12px;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      cursor: pointer;
      border-radius: 2px;
      transition: all .3s;
      font-family: var(--font-body);
    }

    .add-cart-btn:hover {
      background: var(--gold);
      color: var(--text-dark);
      border-color: var(--gold);
    }
/* ── COLLECTIONS GRID (REDESIGNED) ── */
    .collections-section {
      padding: 80px 60px;
      background: var(--bg-deep);
      background-image: url(../images/banner/banner-7.png);
       width: 100%;
      height: auto;
      display: block;
      object-fit: cover;
      border-top: 1px solid var(--border);
    }

    .collection-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr); /* Forces exactly 6 boxes in a row */
      gap: 20px;
    }

    .collection-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-decoration: none;
      gap: 16px; /* Spacing between the box and the text below it */
      cursor: pointer;
    }

    /* The Rectangular Box */
    .collection-img-box {
      width: 100%;
      aspect-ratio: 3 / 4; /* Creates a tall, elegant rectangular shape */
      background: var(--bg-card);
      border-radius: 12px; /* Smooth rounded corners */
      border: 1px solid var(--border);
      overflow: hidden; /* Essential: keeps the zooming image inside the rounded corners */
      position: relative;
      transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
    }

    /* The Image Inside the Box */
    .collection-img-box img {
      width: 100%;
      height: 100%;
      object-fit: cover; /* Ensures the image fills the rectangle without stretching */
      transition: transform 0.6s ease; /* Smooth, slow zoom animation */
    }

    /* The Hover Animation Effects */
    .collection-item:hover .collection-img-box {
      transform: translateY(-8px); /* Lifts the box slightly up */
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4); /* Adds a deep shadow */
      border-color: var(--gold);
    }

    .collection-item:hover .collection-img-box img {
      transform: scale(1.08); /* Zooms the image in slightly */
    }

    /* The Collection Name Below the Box */
    .collection-title {
      font-family: var(--font-display);
      font-size: 22px;
      font-weight: 500;
      color: var(--text-light);
      text-align: center;
      margin: 0;
      transition: color 0.3s ease;
    }

    .collection-item:hover .collection-title {
      color: var(--gold-light);
    }



    /* ── WHY US ── */
    .why-section {
      padding: 80px 60px;
      background: var(--bg-main);
      border-top: 1px solid var(--border);
    }

    .why-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 30px;
    }

    .why-card {
      background: var(--bg-card);
      border-radius: 4px;
      padding: 40px 30px;
      text-align: center;
      border: 1px solid var(--border);
      transition: transform .3s;
    }

    .why-card:hover {
      transform: translateY(-5px);
      border-color: rgba(214, 176, 84, 0.3);
    }

    .why-icon {
      font-size: 36px;
      margin-bottom: 16px;
      filter: sepia(1) hue-rotate(10deg) saturate(2);
    }

    .why-card h4 {
      font-family: var(--font-display);
      font-size: 22px;
      font-weight: 400;
      color: var(--gold-light);
      margin-bottom: 10px;
    }

    .why-card p {
      font-size: 13px;
      color: var(--text-muted);
      line-height: 1.7;
      font-weight: 300;
    }

    /* ── STATS ── */
    .stats-section {
      background: var(--gold);
      padding: 60px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      text-align: center;
    }

    .stat-item h3 {
      font-family: var(--font-display);
      font-size: 56px;
      font-weight: 500;
      color: var(--text-dark);
      line-height: 1;
      margin-bottom: 8px;
    }

    .stat-item p {
      font-size: 12px;
      color: var(--bg-main);
      letter-spacing: 2px;
      text-transform: uppercase;
      font-weight: 600;
    }

    /* ── NEWSLETTER ── */
    .newsletter {
       background: var(--bg-deep);
      background-image: url(../images/banner/banner-8.png);
     
      padding: 90px 60px;
      text-align: center;
    }

    .newsletter h2 {
      font-family: var(--font-display);
      font-size: 46px;
      font-weight: 400;
      margin-bottom: 16px;
      color: var(--text-light);
    }

    .newsletter p {
      color: var(--text-muted);
      font-size: 15px;
      margin-bottom: 40px;
      font-weight: 300;
    }

    .newsletter-form {
      display: flex;
      max-width: 500px;
      margin: 0 auto;
      gap: 0;
    }

    .newsletter-form input {
      flex: 1;
      padding: 16px 24px;
      border: 1px solid var(--border);
      border-right: none;
      font-family: var(--font-body);
      font-size: 14px;
      background: var(--bg-card);
      color: var(--text-light);
      outline: none;
      border-radius: 2px 0 0 2px;
    }

    .newsletter-form input:focus {
      border-color: var(--gold);
    }

    .newsletter-form button {
      background: var(--gold);
      color: var(--text-dark);
      border: none;
      padding: 0 32px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      cursor: pointer;
      border-radius: 0 2px 2px 0;
      font-family: var(--font-body);
      transition: background .2s;
    }

    .newsletter-form button:hover {
      background: var(--gold-light);
    }
/* ── FOOTER ── */
    .footer-illustration {
      width: 100%;
      line-height: 0; /* Removes the tiny white gap below images */
      background: #FAF3E8; /* Fallback color matching the sky in the painting */
    }

    .footer-illustration img {
      width: 100%;
      height: auto;
      display: block;
      object-fit: cover;
    }

    footer {
      background: #07130E; /* Dark Green */
      background-image: url(../images/banner/banner-6.png);
      width: 100%;
      height: auto;
      display: block;
      object-fit: cover;
      color: var(--text-light);
      padding: 60px 60px 40px;
      border-top: none; /* Removed so it sits flush with the image */
    }
    /* ── FOOTER ── */
    
    .footer-grid {
      
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 50px;
      margin-bottom: 60px;
    }

    .footer-brand h3 {
      font-family: var(--font-display);
      font-size: 32px;
      font-weight: 500;
      color: var(--gold);
      letter-spacing: 2px;
      margin-bottom: 16px;
    }

    .footer-brand p {
      font-size: 14px;
      line-height: 1.8;
      font-weight: 300;
      max-width: 300px;
    }

    .footer-col h4 {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 24px;
    }

    .footer-col ul {
      list-style: none;
    }

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

    .footer-col ul li a {
      font-size: 13px;
      color: var(--text-light);
      text-decoration: none;
      transition: color .2s;
    }

    .footer-col ul li a:hover {
      color: var(--gold-light);
    }

    .footer-bottom {
      border-top: 1px solid var(--border);
      padding-top: 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      color: #4A6559;
    }

    .social-links {
      display: flex;
      gap: 14px;
    }

    .social-links a {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      text-decoration: none;
      color: var(--text-muted);
      transition: all .3s;
    }

    .social-links a:hover {
      border-color: var(--gold);
      color: var(--gold);
      background: var(--bg-card);
    }

   
    .product-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      /* This crops the image to perfectly fill the box. Change to 'contain' if you don't want any cropping. */
      display: block;
    }
    /* ── AUTH BUTTON ── */
    .auth-btn { 
      font-family: var(--font-body);
      color: var(--gold); 
      text-decoration: none; 
      font-size: 13px; 
      font-weight: 700; 
      text-transform: uppercase; 
      letter-spacing: 1.5px; 
      transition: color 0.3s; 
      margin-right: 10px;
    }
    .auth-btn:hover { 
      color: var(--gold-light); 
    }
/* ── SEARCH BAR ── */
    .nav-search { 
        display: flex; 
        align-items: center; 
        background: var(--bg-main); 
        border: 1px solid var(--border); 
        border-radius: 20px; 
        padding: 5px 15px; 
        margin-right: 15px;
        transition: border-color 0.3s;
    }
    .nav-search:focus-within {
        border-color: var(--gold);
    }
    .nav-search input { 
        background: transparent; 
        border: none; 
        color: var(--text-light); 
        font-family: var(--font-body); 
        font-size: 13px; 
        width: 150px; 
        outline: none; 
    }
    .nav-search input::placeholder { 
        color: var(--text-muted); 
    }
    .nav-search button { 
        background: transparent; 
        border: none; 
        color: var(--gold); 
        cursor: pointer; 
        font-size: 14px; 
        padding: 0; 
    }
    
    /* Hide search bar on very small phones to save space, keeping only the icon */
    @media (max-width: 600px) {
        .nav-search input { width: 80px; }
    }
    /* ── MOBILE RESPONSIVENESS UPDATES ── */
    @media (max-width: 900px) {
      nav { padding: 0 20px; justify-content: space-between; }
      .mobile-menu-btn { display: block; }
      .nav-logo { font-size: 26px; }
      
      .nav-links {
        display: none; position: absolute; top: 75px; left: 0; width: 100%;
        background: rgba(11, 28, 21, 0.98); flex-direction: column; padding: 30px 0;
        text-align: center; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
        border-bottom: 1px solid var(--border); gap: 20px;
      }
      .nav-links.active { display: flex; }

      /* Hero Banner Phone Fixes */
     .hero {
        /* 1. Reduce the height so it doesn't force the image to zoom in as much */
        min-height: 60vh; 
        
        /* 2. Padding adjustments for small screens */
        padding: 40px 24px; 
        
        /* 3. Shift the focus! If your model/jewelry is on the right side of the image, 
              change 'center' to 'right center' so it doesn't get cropped out. 
              (You can also try 'top center' or 'left center' depending on your specific image) */
        background-position: right center; 
        
        /* 4. Optional: Add a dark tint over the image ON MOBILE ONLY so your white text is easier to read! */
        background-image: linear-gradient(rgba(11, 28, 21, 0.6), rgba(11, 28, 21, 0.6)), url('../images/banner/banner-1.png');
    }
    
    .hero h1 { 
        font-size: 42px; 
    }
      .hero-btns { justify-content: center; }
      
      /* Bring the image back on tablets, but scale it down slightly */
      .hero-img-wrap { transform: scale(0.8); margin-top: 20px; }
      .hero-img-bg { height: 400px; } /* Prevent it from being too tall */

      .featured-banner { grid-template-columns: 1fr; padding: 60px 24px; text-align: center; }
      .stats-section { grid-template-columns: repeat(2, 1fr); padding: 40px 24px; }
      .footer-grid { grid-template-columns: 1fr 1fr; }
      
      /* Shrink category circles for tablets */
      .cat-circle { width: 120px; height: 120px; }
      .cat-grid { gap: 15px; }

      .categories, .products-section, .collections-section, .why-section, .newsletter {
        padding: 60px 24px;
      }
    }

    /* ── STRICT PHONE RESPONSIVENESS (Screens smaller than 600px) ── */
    @media (max-width: 600px) {
      /* Hero Banner Phone Fixes */
     .hero {
        /* 1. Reduce the height so it doesn't force the image to zoom in as much */
        min-height: 60vh; 
        
        /* 2. Padding adjustments for small screens */
        padding: 40px 24px; 
        
        /* 3. Shift the focus! If your model/jewelry is on the right side of the image, 
              change 'center' to 'right center' so it doesn't get cropped out. 
              (You can also try 'top center' or 'left center' depending on your specific image) */
        background-position: right center; 
        
        /* 4. Optional: Add a dark tint over the image ON MOBILE ONLY so your white text is easier to read! */
        background-image: linear-gradient(rgba(11, 28, 21, 0.6), rgba(11, 28, 21, 0.6)), url('../images/banner/banner-1.png');
    }
    
    .hero h1 { 
        font-size: 42px; 
    }
     
      
      /* Categories Phone Fixes: Force 3 items per row and shrink circles */
      .cat-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
      .cat-circle { width: 80px; height: 80px; }
      .cat-label { font-size: 10px; }

      /* Featured Banner Cards Phone Fixes: Stack them in 1 column instead of 2 */
      .banner-cards { grid-template-columns: 1fr; gap: 15px; }
      
      /* Footer Phone Fixes: Stack everything */
      .footer-grid { grid-template-columns: 1fr; gap: 40px; text-align: center; }
      .social-links { justify-content: center; }
      .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
    }
/* ── SEARCH BAR MOBILE FIX ── */
    @media (max-width: 900px) {
        /* 1. Make the navigation bar taller to create a second row */
        nav { 
            height: 130px !important; 
            align-items: flex-start !important; 
            padding-top: 25px !important; 
        }
        
        /* 2. Break the search bar out of the top row and pin it to the bottom */
        .nav-search { 
            position: absolute; 
            bottom: 15px; 
            left: 20px; 
            width: calc(100% - 40px); /* Spans the full screen width */
            margin: 0 !important; 
            box-sizing: border-box;
        }
        
        /* 3. Stretch the input box to fill the new wide space */
        .nav-search input { 
            width: 100% !important; 
        }
        
        /* 4. Push the mobile dropdown menu further down so it doesn't overlap */
        .nav-links { 
            top: 130px !important; 
        }
    }

    @media (max-width: 600px) {
        /* 5. On tiny phones, hide the "My Profile" text and show a sleek icon instead */
        .auth-btn { 
            font-size: 0 !important; 
            margin-right: 0 !important; 
        }
        .auth-btn::after { 
            content: '👤'; 
            font-size: 20px; 
        }
        .nav-icons { 
            gap: 15px !important; 
        }
    }

    /* ── BULLETPROOF COLLECTION GRID MOBILE FIX ── */
    
    @media (max-width: 1000px) {
        .collection-grid {
            grid-template-columns: repeat(3, 1fr) !important; 
            gap: 20px !important;
        }
    }

    @media (max-width: 600px) {
        /* Force the section to stay inside the screen */
        .collections-section {
            padding: 50px 20px !important; 
            width: 100% !important;
            box-sizing: border-box !important;
            overflow: hidden !important;
        }

        /* Force the grid to break into exactly 2 columns */
        .collection-grid {
            grid-template-columns: repeat(2, 1fr) !important; 
            gap: 15px !important; 
            width: 100% !important;
        }
        
        .collection-title {
            font-size: 16px !important;
        }
        
        .collection-item {
            gap: 8px !important;
        }
    }

    /* ── LITESTYLE CATEGORIES ── */
.litestyle-categories {
    padding: 60px 40px;
    background: linear-gradient(180deg, rgba(24, 56, 43, 0.5) 0%, var(--bg-main) 100%);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.ls-header {
    text-align: center;
    margin-bottom: 50px;
}

.ls-overline {
    font-size: 14px;
    font-family: var(--font-display);
    color: var(--gold);
    letter-spacing: 2px;
    margin-bottom: 10px;
    font-style: italic;
}

.ls-header h2 {
    font-family: var(--font-display);
    font-size: 42px;
    color: var(--text-light);
    font-weight: 500;
    letter-spacing: 1px;
}

.ls-divider {
    width: 60px;
    height: 2px;
    background: var(--gold);
    margin: 15px auto 0;
}

.ls-cat-container {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
}

.ls-cat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    transition: transform 0.3s ease;
}

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

.ls-cat-circle {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    border: 2px solid rgba(214, 176, 84, 0.4);
    padding: 6px;
    background: var(--bg-deep);
    transition: border-color 0.3s ease;
    margin-bottom: 15px;
}

.ls-cat-item:hover .ls-cat-circle {
    border-color: var(--gold);
}

.ls-cat-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.ls-cat-name {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-light);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* ── LITESTYLE PRODUCTS ── */
.litestyle-products {
    padding: 80px 40px;
    background: var(--bg-main);
    max-width: 1400px;
    margin: 0 auto;
}

.litestyle-products .ls-header p {
    color: var(--text-muted);
    font-size: 15px;
    margin-top: 10px;
}

.ls-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 30px;
}

.ls-product-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
    display: flex;
    flex-direction: column;
}

.ls-product-card:hover {
    border-color: var(--gold);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.ls-card-link {
    text-decoration: none;
    color: inherit;
    flex-grow: 1;
}

.ls-img-wrap {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--bg-deep);
    position: relative;
    overflow: hidden;
}

.ls-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.ls-product-card:hover .ls-img-wrap img {
    transform: scale(1.05);
}

.ls-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: var(--gold);
    color: var(--bg-deep);
    font-size: 10px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ls-prod-info {
    padding: 20px;
    text-align: center;
}

.ls-prod-title {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    color: var(--text-light);
    margin: 0 0 10px 0;
    line-height: 1.4;
}

.ls-price-row {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 10px;
}

.ls-current-price {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 600;
    color: var(--gold);
}

.ls-old-price {
    font-size: 13px;
    color: var(--text-muted);
    text-decoration: line-through;
}

.ls-action-row {
    padding: 0 20px 20px;
}

.ls-add-btn {
    width: 100%;
    background: transparent;
    color: var(--gold);
    border: 1px solid var(--gold);
    padding: 12px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s;
}

.ls-add-btn:hover {
    background: var(--gold);
    color: var(--bg-deep);
}

.ls-add-btn.disabled {
    border-color: var(--border);
    color: var(--text-muted);
    cursor: not-allowed;
}
.ls-add-btn.disabled:hover {
    background: transparent;
}

/* ── MOBILE RESPONSIVENESS ── */
@media (max-width: 768px) {
    .ls-cat-container { gap: 20px; }
    .ls-cat-circle { width: 90px; height: 90px; }
    .ls-cat-name { font-size: 11px; }
    .ls-product-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }
    .litestyle-categories, .litestyle-products { padding: 40px 20px; }
    .ls-img-wrap { aspect-ratio: 4 / 5; } /* Taller images on mobile look better */
    .ls-current-price { font-size: 18px; }
    .ls-add-btn { padding: 10px; font-size: 10px; }
}