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

    html { scroll-behavior: smooth; }  /* smooth scroll when clicking nav links */

    body {
      font-family: 'Lato', sans-serif;
      color: #1a1a1a;
      background: #fff;
    }

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

    /* ════════════════════════════════════════════════════════════════════
       TOP ANNOUNCEMENT BAR
       A thin strip at the very top — common in jewellery stores
    ════════════════════════════════════════════════════════════════════ */
    .announcement-bar {
      background: #2d2d2d;
      color: #e8d5b7;
      text-align: center;
      padding: 8px 20px;
      font-size: 0.8em;
      letter-spacing: 1.5px;
    }

    /* ════════════════════════════════════════════════════════════════════
       NAVBAR
       Two rows:
         Row 1 — logo (center) + icons (right)
         Row 2 — navigation links
    ════════════════════════════════════════════════════════════════════ */
    .navbar {
      background: #fff;
      border-bottom: 1px solid #f0e8e0;
      position: sticky;   /* stays at top when scrolling */
      top: 0;
      z-index: 100;
    }

    /* Row 1: logo + icons */
    .navbar-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 60px;
    }

    .logo {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.8em;
      font-weight: 600;
      letter-spacing: 4px;
      color: #1a1a1a;
    }

    .logo span {
      color: #c4687a;   /* rose accent on one letter */
    }

    /* Icons: search, wishlist, cart */
    .navbar-icons {
      display: flex;
      gap: 20px;
      align-items: center;
    }

    .navbar-icons a {
      color: #555;
      display: flex;
      align-items: center;
      transition: color 0.2s;
    }

    .navbar-icons a:hover { color: #c4687a; }

    /* SVG icons inherit colour from parent <a> automatically */
    .navbar-icons a svg {
      display: block;
      transition: stroke 0.2s;
    }

    /* Cart badge */
    .cart-wrapper { position: relative; }
    .cart-badge {
      position: absolute;
      top: -6px; right: -8px;
      background: #c4687a;
      color: white;
      font-size: 0.55em;
      width: 16px; height: 16px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-family: 'Lato', sans-serif;
    }

    /* Row 2: navigation links */
    .navbar-links {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 40px;
      padding: 12px 60px;
      border-top: 1px solid #f5eded;
    }

    .navbar-links a {
      font-size: 0.85em;
      letter-spacing: 1px;
      color: #333;
      transition: color 0.2s;
      position: relative;
    }

    /* Underline animation on hover */
    .navbar-links a::after {
      content: "";
      position: absolute;
      bottom: -3px; left: 0;
      width: 0; height: 1px;
      background: #c4687a;
      transition: width 0.3s;
    }

    .navbar-links a:hover { color: #c4687a; }
    .navbar-links a:hover::after { width: 100%; }

    /* WhatsApp + Buyback buttons on the right of nav */
    .navbar-links-right {
      display: flex;
      gap: 20px;
      align-items: center;
      margin-left: auto;
    }

    .btn-whatsapp {
      display: flex; align-items: center; gap: 6px;
      background: #25D366; color: white;
      padding: 7px 14px; border-radius: 20px;
      font-size: 0.8em; font-weight: 700;
      transition: background 0.2s;
    }
    .btn-whatsapp:hover { background: #1da851; }

    /* ════════════════════════════════════════════════════════════════════
       HERO CAROUSEL — FADE VERSION
       - All slides stack on top of each other (position: absolute)
       - Only the active slide has opacity: 1 (visible)
       - All others have opacity: 0 (invisible)
       - CSS transition makes the opacity change smooth = fade effect
    ════════════════════════════════════════════════════════════════════ */

    /* The outer container — FIXED height so image height:100% works correctly */
    .hero-carousel {
      position: relative;
      height: 580px;        /* fixed — image measures against this */
      overflow: hidden;
    }

    .carousel-track {
      position: relative;
      height: 580px;
    }

    /* ── Each slide: 2-column grid — image LEFT, text RIGHT ─────────────
       The carousel has a fixed height (580px), so the image column also
       has a fixed height. background-size:cover fills it perfectly.
    ──────────────────────────────────────────────────────────────────── */
    .carousel-slide {
      position: absolute;
      inset: 0;
      display: grid;
      grid-template-columns: 1fr 1fr;   /* 50% image | 50% text */
      overflow: hidden;

      opacity: 0;
      transition: opacity 0.8s ease-in-out;
      pointer-events: none;
    }

    .carousel-slide.active {
      opacity: 1;
      pointer-events: auto;
    }

    /* ── Left column — image ────────────────────────────────────────────
       background-image set via inline style in JS.
       background-size:cover fills the column without stretching.
    ──────────────────────────────────────────────────────────────────── */
    .hero-image-col {
      background-size: contain;        /* show full image, never crop */
      background-position: center center;
      background-repeat: no-repeat;
      background-color: #ffffff;       /* white fills any gaps around the image */
      overflow: hidden;
    }

    /* Placeholder shown when no image is uploaded */
    .hero-image-col .hero-placeholder {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: white;
      font-family: 'Cormorant Garamond', serif;
    }

    .hero-image-col .placeholder-ring {
      font-size: 8em;
      margin-bottom: 10px;
      filter: drop-shadow(0 4px 12px rgba(0,0,0,0.2));
    }

    .hero-image-col .placeholder-label {
      font-size: 1em;
      letter-spacing: 3px;
      opacity: 0.9;
    }

    /* Placeholder gradient themes */
    .slide-1 .hero-image-col { background-color: #e8b89e; }
    .slide-2 .hero-image-col { background-color: #a8c8bc; }
    .slide-3 .hero-image-col { background-color: #c8a8c8; }

    .slide-1 .hero-placeholder { background: linear-gradient(135deg, #f0d5c8 0%, #e8b89e 50%, #d4956b 100%); }
    .slide-2 .hero-placeholder { background: linear-gradient(135deg, #d4e8e0 0%, #a8c8bc 50%, #6a9e8e 100%); }
    .slide-3 .hero-placeholder { background: linear-gradient(135deg, #e8d4e8 0%, #c8a8c8 50%, #9e6a9e 100%); }

    /* ── Right column — text ───────────────────────────────────────────── */
    .hero-content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 60px 70px;
      background: #fdf8f5;
    }

    .slide-2 .hero-content { background: #f5fdf8; }
    .slide-3 .hero-content { background: #fdf5fd; }

    /* ── Dip to black overlay ────────────────────────────────────────────
       Sits on top of everything during slide transitions.
    ──────────────────────────────────────────────────────────────────── */
    .carousel-blackout {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: #000;
      opacity: 0;
      transition: opacity 0.4s ease;
      z-index: 5;
      pointer-events: none;
    }

    .carousel-blackout.dark { opacity: 1; }

    .hero-tagline-script {
      font-family: 'Dancing Script', cursive;
      font-size: 2.8em;
      color: #c4687a;
      margin-bottom: 10px;
      line-height: 1.1;
    }

    .hero-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: 2.6em;
      font-weight: 600;
      color: #1a1a1a;
      line-height: 1.2;
      margin-bottom: 16px;
    }

    .hero-subtitle {
      font-size: 0.85em;
      letter-spacing: 2px;
      color: #888;
      margin-bottom: 36px;
      text-transform: uppercase;
    }

    .btn-shop-now {
      display: inline-block;
      background: #1a1a1a;
      color: white;
      padding: 14px 40px;
      border-radius: 30px;
      font-size: 0.9em;
      letter-spacing: 2px;
      text-transform: uppercase;
      transition: background 0.2s, transform 0.2s;
      width: fit-content;
    }

    .btn-shop-now:hover {
      background: #c4687a;
      transform: translateY(-2px);
    }

    /* ── Carousel navigation arrows ──────────────────────────────────── */
    .carousel-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(255,255,255,0.85);
      border: none;
      width: 44px; height: 44px;
      border-radius: 50%;
      font-size: 1.1em;
      cursor: pointer;
      z-index: 10;
      transition: background 0.2s, transform 0.2s;
      box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    }

    .carousel-btn:hover {
      background: #c4687a;
      color: white;
      transform: translateY(-50%) scale(1.05);
    }

    .carousel-btn-prev { left: 20px; }
    .carousel-btn-next { right: 20px; }

    /* ── Carousel dots ───────────────────────────────────────────────── */
    .carousel-dots {
      position: absolute;
      bottom: 18px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 8px;
      z-index: 10;
    }

    .dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: #ccc;
      cursor: pointer;
      transition: background 0.3s, transform 0.3s;
    }

    .dot.active {
      background: #c4687a;
      transform: scale(1.3);
    }

    /* ════════════════════════════════════════════════════════════════════
       TRUST BAR — Interactive
       - h3 text changes based on active badge
       - All 4 badges visible at bottom, inactive ones dimmed
       - Auto-advances every 3 seconds
    ════════════════════════════════════════════════════════════════════ */
    .trust-bar {
      background: #2d3236;
      padding: 50px 60px;
      text-align: center;
    }

    /* The changing text area — fixed height so layout doesn't jump */
    .trust-bar .trust-message {
      min-height: 80px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-bottom: 36px;
    }

    .trust-bar h3 {
      color: #e0d5c5;
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.6em;
      font-weight: 400;
      letter-spacing: 1px;
      margin-bottom: 8px;
      transition: opacity 0.4s ease;
    }

    .trust-bar .trust-sub {
      color: #888;
      font-size: 0.85em;
      letter-spacing: 1.5px;
      transition: opacity 0.4s ease;
    }

    /* Badge row — all 4 visible, inactive ones dimmed */
    .trust-badges {
      display: flex;
      justify-content: center;
      gap: 40px;
    }

    .trust-badge {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      opacity: 0.4;
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .trust-badge.active {
      opacity: 1;
      transform: scale(1.15);
    }

    .trust-badge .icon { font-size: 2em; }

    .trust-badge .badge-title {
      font-size: 0.75em;
      font-weight: 700;
      color: #c8c0b4;
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    .trust-badge.active .badge-title { color: #c4687a; }

    /* ════════════════════════════════════════════════════════════════════
       ABOUT US SECTION
       Two columns: text left, image with watermark right
    ════════════════════════════════════════════════════════════════════ */
    .about-section {
      display: grid;
      grid-template-columns: 1fr 1fr;
      min-height: 360px;     /* grows taller if content needs more space */
      background: #f9dde0;   /* soft pink — same feel as Juene */
    }

    /* Left — text content */
    .about-text {
      padding: 40px 70px 60px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .about-heading {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.3em;
      font-weight: 600;
      color: #2a1a1f;
      line-height: 1.4;
      margin-bottom: 24px;
    }

    .about-body {
      font-size: 0.88em;
      color: #5a3a40;
      line-height: 1.8;
      margin-bottom: 32px;
    }

    .btn-about {
      display: inline-block;
      background: none;
      color: #2a1a1f;
      padding: 0 0 4px 0;        /* only bottom padding, for the border gap */
      font-size: 0.85em;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      width: fit-content;
      border-bottom: 1px solid #2a1a1f;   /* just a clean underline */
      transition: opacity 0.2s, letter-spacing 0.2s;
    }

    .btn-about:hover {
      opacity: 0.6;
      letter-spacing: 2.5px;     /* subtle spread on hover */
    }

    /* Right — image with watermark text overlay */
    .about-image {
      position: relative;
      min-height: 360px;     /* ensures the image column has height even before JS loads */
      background: #f9dde0;   /* pink shows as the border gap */
      overflow: hidden;      /* clips image so it never escapes the box */
      display: flex;
      padding: 18px 0 18px 18px;
    }

    /* Real image injected by loadAbout() */
    .about-image > img {
      display: block;
      width: 100%;
      max-height: 360px;      /* ← add this line */
      object-fit: cover;
      box-shadow: 0 6px 28px rgba(0,0,0,0.22);
    }

   

    /* Placeholder — 18px gap on top, left, bottom. Flush to right edge. */
    .about-img-placeholder {
      position: absolute;
      top: 18px;
      bottom: 18px;
      left: 18px;
      right: 0;              /* no right border */
      background: linear-gradient(135deg, #888 0%, #555 50%, #333 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 8em;
      filter: grayscale(1);
      box-shadow: 0 6px 28px rgba(0,0,0,0.22);
    }

    /* Brand watermark text — large, overlaid on the image */
    .about-watermark {
      position: absolute;
      bottom: -10px;
      right: -20px;
      font-family: 'Cormorant Garamond', serif;
      font-size: 7em;
      font-weight: 600;
      color: rgba(255,255,255,0.18);   /* very transparent white */
      letter-spacing: 4px;
      line-height: 1;
      pointer-events: none;
      user-select: none;
      white-space: nowrap;
    }

    /* ════════════════════════════════════════════════════════════════════
       NEWEST ARTICLES
    ════════════════════════════════════════════════════════════════════ */
    .articles-section {
      padding: 70px 60px;
      background: #fff;
    }

    .articles-header {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 36px;
    }

    .articles-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: 2em;
      font-weight: 600;
      color: #2a1a1f;
    }

    .articles-view-all {
      font-size: 0.82em;
      color: #2a1a1f;
      letter-spacing: 1px;
      border-bottom: 1px solid #2a1a1f;
      padding-bottom: 2px;
      transition: opacity 0.2s;
    }

    .articles-view-all:hover { opacity: 0.5; }

    .articles-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 36px;
    }

    .article-card { cursor: pointer; }

    .article-img {
      width: 100%;
      height: 200px;
      background: linear-gradient(135deg, #ccc 0%, #999 50%, #777 100%);
      margin-bottom: 16px;
      overflow: hidden;
    }

    .article-img-placeholder {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 3.5em;
      filter: grayscale(0.4);
    }

    .article-tag {
      font-size: 0.75em;
      color: #999;
      letter-spacing: 1px;
      text-transform: lowercase;
      margin-bottom: 10px;
    }

    .article-heading {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.3em;
      font-weight: 600;
      color: #2a1a1f;
      line-height: 1.35;
      margin-bottom: 12px;
    }

    .article-body {
      font-size: 0.82em;
      color: #666;
      line-height: 1.75;
      margin-bottom: 16px;
      /* clamp to 3 lines */
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .article-read-more {
      font-size: 0.8em;
      color: #2a1a1f;
      letter-spacing: 1px;
      border-bottom: 1px solid #2a1a1f;
      padding-bottom: 2px;
      transition: opacity 0.2s;
    }

    .article-read-more:hover { opacity: 0.5; }

    /* ════════════════════════════════════════════════════════════════════
       CUSTOMER REVIEWS
    ════════════════════════════════════════════════════════════════════ */
    .reviews-section {
      padding: 70px 0 80px;
      background: #fff;
      text-align: center;
      overflow: hidden;
    }

    .reviews-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: 2em;
      font-weight: 600;
      color: #2a1a1f;
      margin-bottom: 8px;
    }

    .reviews-rating {
      font-size: 0.9em;
      color: #888;
      margin-bottom: 40px;
      letter-spacing: 0.5px;
    }

    .reviews-rating .stars { color: #c0392b; }

    /* Slider — same structure as Instagram */
    .reviews-slider {
      position: relative;
    }

    .reviews-track-wrap {
      overflow: hidden;
    }

    .reviews-track {
      display: flex;
      transition: transform 0.5s ease;
    }

    /* Each card — 1/3 width */
    .review-card {
      flex: 0 0 calc(100% / 3);
      box-sizing: border-box;
      padding: 0 8px;
    }

    .review-card-inner {
      background: #fdf5f5;
      border-radius: 8px;
      overflow: hidden;
      text-align: left;
    }

    .review-product-img {
      width: 100%;
      height: 180px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 4em;
      background: #f5eded;
    }

    .review-body {
      padding: 16px 18px 20px;
    }

    .review-product-name {
      font-size: 0.78em;
      color: #2a1a1f;
      font-weight: 600;
      margin-bottom: 8px;
      line-height: 1.4;
    }

    .review-text {
      font-size: 0.78em;
      color: #666;
      line-height: 1.65;
      margin-bottom: 12px;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .review-stars { color: #e8a020; font-size: 1em; letter-spacing: 1px; }


    /* ════════════════════════════════════════════════════════════════════
       INSTAGRAM UPDATE
    ════════════════════════════════════════════════════════════════════ */
    .instagram-section {
      padding: 60px 60px 70px;
      background: #fff;
      text-align: center;
    }

    .instagram-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: 2em;
      font-weight: 600;
      color: #2a1a1f;
      margin-bottom: 32px;
    }

    /* Slider wrapper — clips overflow so only 3 posts show at once */
    .instagram-slider {
      position: relative;
    }

    .instagram-track-wrap {
      overflow: hidden;
    }

    .instagram-track {
      display: flex;
      transition: transform 0.5s ease;
    }

    /* Each post — 1/2 of width, natural image ratio */
    .insta-post {
      flex: 0 0 calc(100% / 2);
      overflow: hidden;
      cursor: pointer;
      position: relative;
      box-sizing: border-box;
      padding: 0 4px;
    }

    .insta-post img {
      width: 100%;
      height: auto;
      display: block;
      transition: transform 0.35s ease;
    }

    .insta-post:hover img {
      transform: scale(1.07);
    }

    .insta-post-img {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 3em;
      transition: transform 0.35s ease;
    }

    .insta-post:hover .insta-post-img {
      transform: scale(1.07);
    }

    /* Hover overlay */
    .insta-post::after {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0);
      transition: background 0.3s;
    }
    .insta-post:hover::after {
      background: rgba(0,0,0,0.15);
    }

    /* Arrow buttons */
    .insta-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(255,255,255,0.85);
      border: none;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      font-size: 1.1em;
      cursor: pointer;
      z-index: 10;
      box-shadow: 0 2px 8px rgba(0,0,0,0.15);
      transition: background 0.2s, opacity 0.2s;
    }
    .insta-arrow:hover { background: #fff; }
    .insta-arrow.left  { left: 12px; }
    .insta-arrow.right { right: 12px; }

    /* ════════════════════════════════════════════════════════════════════
       FOOTER
    ════════════════════════════════════════════════════════════════════ */
    .site-footer {
      background: #fce8e8;
      padding: 60px 60px 0;
    }

    /* Top area: 3 columns */
    .footer-top {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr;
      gap: 40px;
      padding-bottom: 50px;
      border-bottom: 1px solid rgba(0,0,0,0.08);
    }

    /* ── Column 1: Logo + tagline + newsletter + social ── */
    .footer-brand {}

    .footer-logo {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.8em;
      font-weight: 700;
      color: #2a1a1f;
      letter-spacing: 2px;
      margin-bottom: 20px;
      display: block;
    }

    .footer-tagline {
      font-size: 0.82em;
      font-weight: 700;
      color: #2a1a1f;
      margin-bottom: 10px;
    }

    .footer-desc {
      font-size: 0.8em;
      color: #6a4a50;
      line-height: 1.7;
      margin-bottom: 24px;
    }

    .footer-subscribe {
      display: flex;
      margin-bottom: 32px;
    }

    .footer-subscribe input {
      flex: 1;
      padding: 10px 14px;
      border: 1px solid #ddc0c0;
      background: #fff;
      font-size: 0.8em;
      outline: none;
      color: #2a1a1f;
    }

    .footer-subscribe input::placeholder { color: #aaa; }

    .footer-subscribe button {
      padding: 10px 18px;
      background: #2a1a1f;
      color: #fff;
      border: none;
      font-size: 0.8em;
      letter-spacing: 0.5px;
      cursor: pointer;
      transition: background 0.2s;
    }

    .footer-subscribe button:hover { background: #4a2a30; }

    .footer-social {
      display: flex;
      gap: 12px;
    }

    .social-btn {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: 1px solid #c0a0a0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.85em;
      color: #2a1a1f;
      transition: background 0.2s, border-color 0.2s;
      cursor: pointer;
    }

    .social-btn:hover {
      background: #2a1a1f;
      color: #fff;
      border-color: #2a1a1f;
    }

    /* ── Columns 2 & 3: Links ── */
    .footer-links h4 {
      font-size: 0.85em;
      font-weight: 700;
      color: #2a1a1f;
      letter-spacing: 0.5px;
      margin-bottom: 20px;
    }

    .footer-links ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

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

    .footer-links a {
      font-size: 0.82em;
      color: #6a4a50;
      transition: color 0.2s;
    }

    .footer-links a:hover { color: #2a1a1f; }

    /* Bottom area: Address + Payment side by side */
    .footer-bottom {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
      padding: 40px 0 50px;
      margin-left: calc(1.4fr);   /* align under columns 2 & 3 */
    }

    /* Offset bottom to align under middle + right columns */
    .footer-bottom-wrap {
      display: grid;
      grid-template-columns: 1.4fr 2fr;
      gap: 40px;
      padding: 40px 0 50px;
    }

    .footer-bottom-left { /* empty spacer */ }

    .footer-bottom-right {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
    }

    .footer-address h4,
    .footer-payment h4 {
      font-size: 0.85em;
      font-weight: 700;
      color: #2a1a1f;
      margin-bottom: 16px;
    }

    .footer-address p {
      font-size: 0.8em;
      color: #6a4a50;
      line-height: 1.8;
      margin-bottom: 10px;
    }

    .footer-map-link {
      font-size: 0.8em;
      color: #2a1a1f;
      border-bottom: 1px solid #2a1a1f;
      padding-bottom: 2px;
      display: inline-block;
      margin-bottom: 12px;
      transition: opacity 0.2s;
    }

    .footer-map-link:hover { opacity: 0.6; }

    /* Payment method badges */
    .payment-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .pay-badge {
      background: #fff;
      border: 1px solid #ddc0c0;
      border-radius: 4px;
      padding: 4px 8px;
      font-size: 0.68em;
      color: #555;
      font-weight: 600;
      letter-spacing: 0.3px;
    }

    /* Copyright bar */
    .footer-copyright {
      background: #2a1a1f;
      text-align: center;
      padding: 16px 60px;
      font-size: 0.75em;
      color: rgba(255,255,255,0.6);
      letter-spacing: 0.5px;
      margin: 0 -60px;   /* stretch to full width, cancelling site-footer padding */
    }

    /* ════════════════════════════════════════════════════════════════════
       MARQUEE TICKER
       - A strip that scrolls continuously from right to left
       - Uses CSS @keyframes animation — no JavaScript needed
       - Content is duplicated so the loop is seamless
    ════════════════════════════════════════════════════════════════════ */
    .marquee-strip {
      background: #fdf0f0;
      border-top: 1px solid #f0dede;
      border-bottom: 1px solid #f0dede;
      padding: 28px 0;
      overflow: hidden;
      white-space: nowrap;
      margin-top: -30px;   /* move up */
    }

    /* The inner track — holds two copies of the content side by side */
    .marquee-track {
      display: inline-flex;     /* items sit side by side */
      align-items: center;
      gap: 0;

      /* The animation: slides from 0 to -50%
         Why -50%? Because we have 2 copies — moving by half = one full loop */
      animation: marquee-scroll 40s linear infinite;
    }

    /* Pause scrolling when user hovers over it */
    .marquee-strip:hover .marquee-track {
      animation-play-state: paused;
    }

    @keyframes marquee-scroll {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    /* Each item in the ticker */
    .marquee-item {
      display: inline-flex;
      align-items: center;
      gap: 16px;
      padding: 0 60px;
      font-size: 1.7em;
      color: #555;
      letter-spacing: 1px;
    }

    .marquee-item .m-icon { font-size: 1.4em; }

    .marquee-item .m-text {
      font-weight: 600;
      color: #333;
      letter-spacing: 1.5px;
      text-transform: uppercase;
    }

    .marquee-item .m-text.highlight { color: #c4687a; }

    /* Dot separator between items */
    .marquee-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: #c4687a;
      display: inline-block;
      margin: 0 10px;
      opacity: 0.5;
    }

    /* ════════════════════════════════════════════════════════════════════
       NEW ARRIVALS SECTION
       - Section header: "New Arrivals" label + collection name + "View all"
       - Slider: shows 4 cards at a time, slides to next 4
       - Each card: save badge, heart, image, category, name, price
    ════════════════════════════════════════════════════════════════════ */
    .new-arrivals {
      background: #fdf5f5;
      padding: 50px 60px;
    }

    /* Section header */
    .arrivals-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: 30px;
    }

    .arrivals-header-left .arrivals-label {
      font-size: 0.8em;
      letter-spacing: 2px;
      color: #999;
      text-transform: uppercase;
      margin-bottom: 4px;
    }

    .arrivals-header-left .arrivals-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: 2.2em;
      font-weight: 600;
      color: #1a1a1a;
    }

    .arrivals-view-all {
      font-size: 0.85em;
      color: #1a1a1a;
      letter-spacing: 1px;
      border-bottom: 1px solid #1a1a1a;
      padding-bottom: 2px;
      transition: color 0.2s;
    }

    .arrivals-view-all:hover { color: #c4687a; border-color: #c4687a; }

    /* Slider wrapper — clips overflow */
    .arrivals-slider-wrapper {
      position: relative;
      overflow: hidden;
    }

    /* Track — holds 2 pages of 4 cards side by side */
    .arrivals-track {
      display: flex;
      transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      will-change: transform;
    }

    /* Each page — 4 cards in a grid */
    .arrivals-page {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      flex: 0 0 100%;
      width: 100%;
    }

    /* ── Product Card ──────────────────────────────────────────────── */
    .product-card {
      background: white;
      cursor: pointer;
    }

    /* Image area */
    .product-img-wrap {
      position: relative;
      background: white;
      aspect-ratio: 1 / 1;   /* square image box */
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid transparent;         /* invisible border by default */
      transition: border-color 0.25s ease;   /* smooth border appearance */
    }

    /* Red border on image when hovering the card */
    .product-card:hover .product-img-wrap {
      border-color: #c0392b;
    }

    /* Placeholder image */
    .product-img-placeholder {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 5em;
      background: #faf5f0;
    }

    /* SAVE badge — top left */
    .save-badge {
      position: absolute;
      top: 12px; left: 12px;
      background: #7a1c2e;
      color: white;
      font-size: 0.7em;
      font-weight: 700;
      padding: 4px 8px;
      letter-spacing: 0.5px;
    }

    /* Heart icon — top right */
    .heart-btn {
      position: absolute;
      top: 10px; right: 12px;
      font-size: 1.1em;
      cursor: pointer;
      color: #ccc;
      transition: color 0.2s, transform 0.2s;
      background: none;
      border: none;
    }

    .heart-btn:hover  { color: #c4687a; transform: scale(1.2); }
    .heart-btn.liked  { color: #c4687a; }

    /* Add to cart button — appears on hover, bottom right of image */
    .card-add-cart {
      position: absolute;
      bottom: 14px; right: 14px;
      width: 36px; height: 36px;
      background: #1a1a1a;
      color: white;
      border-radius: 50%;
      display: none;
      align-items: center;
      justify-content: center;
      font-size: 1.3em;
      font-weight: 300;
      cursor: pointer;
      border: none;
      transition: background 0.2s, transform 0.2s;
    }

    .product-card:hover .card-add-cart { display: flex; }
    .card-add-cart:hover {
      background: #c4687a;
      transform: scale(1.1);
    }

    /* Product info below image */
    .product-info {
      padding: 12px 4px 16px;
    }

    .product-category {
      font-size: 0.75em;
      color: #999;
      margin-bottom: 4px;
      letter-spacing: 0.5px;
    }

    .product-name {
      font-size: 0.95em;
      font-weight: 700;
      color: #1a1a1a;
      margin-bottom: 3px;
    }

    .product-collection {
      font-size: 0.78em;
      color: #aaa;
      margin-bottom: 8px;
    }

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

    .price-original {
      font-size: 0.78em;
      color: #bbb;
      text-decoration: line-through;
    }

    .price-sale {
      font-size: 0.85em;
      font-weight: 700;
      color: #1a1a1a;
    }

    /* ── Slider navigation arrows — below the slider ──────────────── */
    .arrivals-nav {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      margin-top: 20px;
    }

    .arrivals-nav-btn {
      width: 42px; height: 42px;
      border-radius: 50%;
      border: 1px solid #ccc;
      background: white;
      color: #1a1a1a;
      cursor: pointer;
      font-size: 1em;
      display: flex; align-items: center; justify-content: center;
      transition: background 0.2s, color 0.2s, opacity 0.2s;
    }

    .arrivals-nav-btn:hover {
      background: #1a1a1a;
      color: white;
      border-color: #1a1a1a;
    }

    /* ── Hamburger button — hidden on desktop ─────────────────────────────────── */
    .hamburger {
      display: none;
      background: none;
      border: none;
      font-size: 1.4em;
      cursor: pointer;
      color: #2a1a1f;
      padding: 4px 8px;
    }

    /* ════════════════════════════════════════════════════════════════════
       MOBILE RESPONSIVE — 768px and below
    ════════════════════════════════════════════════════════════════════ */
    @media (max-width: 768px) {

      /* ── GLOBAL — prevent horizontal overflow on mobile ── */
      html, body {
        overflow-x: hidden;
        width: 100%;
      }

      /* ── NAVBAR ── */
      .hamburger { display: block; }

      .navbar { position: relative; }

      .navbar-top {
        padding: 14px 20px;
        justify-content: space-between;
      }

      /* Hide the spacer div that centres logo on desktop */
      .navbar-top > div:first-child { display: none; }

      .navbar-links {
        display: none;           /* hidden by default on mobile */
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        position: absolute;
        top: 100%;
        left: 0; right: 0;
        background: #fff;
        border-top: 1px solid #f0e0e0;
        border-bottom: 1px solid #f0e0e0;
        padding: 10px 0;
        z-index: 200;
        box-shadow: 0 6px 16px rgba(0,0,0,0.08);
      }

      .navbar-links.open { display: flex; }  /* shown when hamburger clicked */

      .navbar-links a {
        padding: 12px 24px;
        width: 100%;
        font-size: 0.9em;
        border-bottom: 1px solid #f5eaea;
      }

      .navbar-links-right {
        padding: 12px 24px;
        width: 100%;
      }

      /* ── HERO CAROUSEL ── */
      .hero-carousel,
      .carousel-track { height: 460px; }

      /* Stack image on top, text below on small screens */
      .carousel-slide {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
      }

      .hero-image-col {
        min-height: 220px;
        background-size: cover;   /* fill the mobile slot — no gaps */
      }

      .hero-content {
        padding: 24px 28px;
        text-align: center;
        align-items: center;
      }

      .hero-title { font-size: 1.8em; }
      .hero-tagline-script { font-size: 1.6em; }

      /* ── TRUST BAR ── */
      .trust-bar { padding: 24px 20px; }
      .trust-badges { gap: 12px; }
      .trust-badge { padding: 10px 14px; }
      .trust-badge .icon { font-size: 1.4em; }

      /* ── NEW ARRIVALS & BEST SELLING ── */
      .new-arrivals { padding: 36px 16px; }

      /* 2 cards per row instead of 4 */
      .arrivals-page {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
      }

      .arrivals-title { font-size: 1.6em; }

      /* ── MARQUEE ── */
      .marquee-item { font-size: 1.1em; padding: 0 30px; }

      /* ── ABOUT US ── */
      .about-section {
        grid-template-columns: 1fr;   /* stack text above image */
        height: auto;
      }

      .about-text { padding: 36px 24px; }

      .about-image {
        height: 240px;
        padding: 18px;
      }

      .about-img-placeholder {
        position: static;           /* remove absolute positioning */
        width: 100%;
        min-height: 200px;
      }

      /* ── NEWEST ARTICLES ── */
      .articles-section { padding: 50px 16px; }
      .articles-grid { grid-template-columns: 1fr; gap: 28px; }

      /* ── INSTAGRAM ── */
      .instagram-section { padding: 50px 16px 60px; }
      /* On mobile: stack posts vertically, hide arrows */
      .instagram-track { flex-wrap: wrap; transform: none !important; }
      .insta-post { flex: 0 0 100%; padding: 0 0 10px 0; }
      .insta-arrow { display: none; }

      /* ── CUSTOMER REVIEWS ── */
      .reviews-section { padding: 50px 16px 60px; }
      .reviews-track { flex-wrap: wrap; transform: none !important; }
      .review-card { flex: 0 0 100%; padding: 0 0 16px 0; }

      /* ── FOOTER ── */
      .site-footer { padding: 40px 16px 0; }

      .footer-top {
        grid-template-columns: 1fr;   /* stack all 3 columns */
        gap: 32px;
      }

      .footer-bottom-wrap {
        grid-template-columns: 1fr;
      }

      .footer-bottom-left { display: none; }  /* hide desktop spacer */

      .footer-bottom-right {
        grid-template-columns: 1fr;
        gap: 28px;
      }

      .footer-copyright { margin: 0 -24px; }

      /* ── REVIEW FORM ── */
      .review-form-row  { grid-template-columns: 1fr; }

    } /* end @media 768px */


    /* ════════════════════════════════════════════════════════════════════
       WRITE A REVIEW FORM SECTION
    ════════════════════════════════════════════════════════════════════ */
    .review-form-section {
      background: #faf5f0;
      padding: 70px 80px;
      text-align: center;
    }

    .review-form-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: 2em;
      font-weight: 600;
      color: #2a1a1f;
      margin-bottom: 8px;
    }

    .review-form-subtitle {
      font-size: 0.9em;
      color: #888;
      margin-bottom: 40px;
      letter-spacing: 0.5px;
    }

    .review-form {
      max-width: 680px;
      margin: 0 auto;
      text-align: left;
    }

    .review-form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }

    .review-form-group {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 22px;
    }

    .review-form-group label {
      font-size: 0.82em;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: #5a3a40;
      font-weight: 700;
    }

    .required { color: #c0392b; }

    .review-form-group input,
    .review-form-group textarea {
      border: 1px solid #ddd;
      border-radius: 3px;
      padding: 12px 14px;
      font-size: 0.9em;
      font-family: 'Lato', sans-serif;
      color: #1a1a1a;
      background: #fff;
      outline: none;
      transition: border-color 0.2s;
      resize: vertical;
    }

    .review-form-group input:focus,
    .review-form-group textarea:focus {
      border-color: #c4687a;
    }

    /* Star picker */
    .star-picker {
      display: flex;
      gap: 6px;
    }

    .star-pick {
      font-size: 2em;
      color: #ddd;
      cursor: pointer;
      transition: color 0.15s, transform 0.1s;
      user-select: none;
    }

    .star-pick.hovered,
    .star-pick.selected {
      color: #d4af37;
    }

    .star-pick:hover {
      transform: scale(1.15);
    }

    /* Submit button */
    .review-form-submit {
      display: flex;
      align-items: center;
      gap: 20px;
      flex-wrap: wrap;
    }

    .btn-upload-review {
      display: inline-block;
      padding: 8px 16px;
      background: #f5eded;
      border: 1px solid #ddd;
      border-radius: 6px;
      font-size: 0.85em;
      color: #555;
      transition: background 0.2s;
    }
    .btn-upload-review:hover { background: #eddede; }

    .btn-submit-review {
      background: #1a1a1a;
      color: #fff;
      border: none;
      padding: 14px 40px;
      font-size: 0.85em;
      letter-spacing: 2px;
      text-transform: uppercase;
      cursor: pointer;
      transition: background 0.2s;
    }

    .btn-submit-review:hover {
      background: #c4687a;
    }

    .review-form-msg {
      font-size: 0.9em;
      margin: 0;
    }