:root {
      /* Light Mode Colors */
      --gold: #D4AF37;
      --pink: #FF9F9F;
      --black: #1A1A1A;
      --bg-light: #FFF9F0;
      --card-light: #FFFFFF;
      --text-light: #333333;
      
      /* Dark Mode Colors */
      --bg-dark: #1A1A1A;
      --card-dark: #2D2D2D;
      --text-dark: #F0F0F0;
      
      --triangle-size: 15px;
      
      /* Pearl Variables */
      --pe-gold: #D4AF37;
      --pe-gold-dark: #c19a6b;
      --pe-green: #2e7d32;
      --pe-muted: #6b7280;
      --pe-bg-card: #fff;
      --pe-card-shadow: 0 10px 30px rgba(15,15,15,0.06);
    }
    
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      transition: background-color 0.5s ease, color 0.3s ease;
    }
    
    body {
      font-family: 'Montserrat', sans-serif;
      background-color: var(--bg-light);
      color: var(--text-light);
      overflow-x: hidden;
    }
    
    body.dark-mode {
      background-color: var(--bg-dark);
      color: var(--text-dark);
    }
    
    /* Navigation Bar */
    .nav-container {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding: 15px 0;
      background: rgba(255, 255, 255, 0.15);
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(12px);
      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
      border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    }
    
    .dark-mode .nav-container {
      background: rgba(26, 26, 26, 0.15);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .nav-logo {
      margin-left: 30px;
      margin-right: 20px;
      display: flex;
      align-items: center;
    }
    
    .nav-logo-img {
      height: 45px;
      width: 45px;
      border-radius: 50%;
      object-fit: cover;
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
      border: 2px solid var(--gold);
    }
    
    .nav-menu {
      display: flex;
      gap: 30px;
    }
    
    .nav-link {
      color: var(--text-light);
      text-decoration: none;
      font-weight: 500;
      font-size: 1rem;
      position: relative;
      padding: 5px 0;
      transition: color 0.3s ease;
    }
    
    .dark-mode .nav-link {
      color: var(--text-dark);
    }
    
    .nav-link::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 2px;
      background: var(--gold);
      transition: width 0.3s ease;
    }
    
    .nav-link:hover::after {
      width: 100%;
    }
    
    .nav-link:hover {
      color: var(--gold);
    }

    /* Image Carousel */
    .carousel-container {
      position: relative;
      width: 100%;
      margin-top: 70px; /* Space for fixed nav */
      overflow: hidden;
      height: 70vh;
      min-height: 500px;
      background: rgba(0,0,0,0.1);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
    }

    .carousel-track {
      display: flex;
      height: 100%;
      transition: transform 0.5s ease-in-out;
      will-change: transform;
    }

    .carousel-slide {
      min-width: 100%;
      height: 100%;
      position: relative;
    }

    .carousel-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: brightness(0.8);
      will-change: transform;
      backface-visibility: hidden;
    }

    .slide-content {
      position: absolute;
      bottom: 20%;
      left: 10%;
      max-width: 50%;
      color: white;
      text-shadow: 0 2px 4px rgba(0,0,0,0.5);
      z-index: 10;
      transition: opacity 0.3s ease;
    }

    .slide-title {
      font-family: 'Playfair Display', serif;
      font-size: 3rem;
      font-weight: 700;
      margin-bottom: 15px;
      color: var(--gold);
    }

    .slide-text {
      font-size: 1.2rem;
      line-height: 1.6;
      margin-bottom: 20px;
    }

    .slide-button {
      background-color: var(--gold);
      color: white;
      border: none;
      padding: 12px 30px;
      font-size: 1rem;
      border-radius: 30px;
      cursor: pointer;
      transition: all 0.3s ease;
      font-weight: 500;
      text-decoration: none;
      display: inline-block;
    }

    .slide-button:hover {
      background-color: #c19b2e;
      transform: translateY(-2px);
    }

    .carousel-nav {
      position: absolute;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 10px;
      z-index: 10;
    }

    .carousel-indicator {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: rgba(255,255,255,0.5);
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .carousel-indicator.active {
      background: var(--gold);
      transform: scale(1.2);
    }

    .owl-indicator {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 2rem;
      color: var(--gold);
      animation: pulse 2s infinite;
      cursor: pointer;
      z-index: 10;
    }

    @keyframes pulse {
      0% { transform: translateX(-50%) scale(1); }
      50% { transform: translateX(-50%) scale(1.2); }
      100% { transform: translateX(-50%) scale(1); }
    }

    /* Welcome Screen */
    .welcome-screen {
      min-height: 100vh;
      height: auto;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: stretch;
      text-align: center;
      padding: 80px 20px 20px;
      position: relative;
      overflow-y: auto;
      background: rgba(255,255,255,0.18);
      /* Glassy effect */
      -webkit-backdrop-filter: blur(24px) saturate(180%);
      backdrop-filter: blur(24px) saturate(180%);
      border-radius: 0 0 40px 40px;
      box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.18);
    }
    
    .dark-mode .welcome-screen {
      background: rgba(26,26,26,0.35);
      -webkit-backdrop-filter: blur(24px) saturate(180%);
      backdrop-filter: blur(24px) saturate(180%);
    }
    
    .welcome-bg-image {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: url('images/image A (6).jpg') center/cover no-repeat;
      opacity: 0.25;
      z-index: -1;
      filter: blur(24px) brightness(1.1);
    }
    
    .welcome-content {
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      animation: fadeIn 1s ease-out;
    }
    
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    .welcome-logo-text {
      font-family: 'Playfair Display', serif;
      font-size: 2.5rem;
      font-weight: 700;
      color: var(--gold);
      letter-spacing: 1px;
      margin-bottom: 30px;
      text-align: center;
    }
    
    .welcome-heading {
      font-family: 'Playfair Display', serif;
      font-size: 3.5rem;
      font-weight: 700;
      margin-bottom: 20px;
      color: var(--black);
    }
    
    .dark-mode .welcome-heading {
      color: var(--text-dark);
    }
    
    .welcome-subheading {
      font-size: 1.8rem;
      color: var(--gold);
      margin-bottom: 30px;
      font-weight: 500;
    }
    
    .welcome-message {
      max-width: 600px;
      margin: 0 auto 40px;
      line-height: 1.6;
      font-size: 1.1rem;
    }
    
    /* Liquid Glass Button Effect */
    .glass-btn {
      position: relative;
      overflow: hidden;
      z-index: 1;
    }
    
    .glass-btn::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: linear-gradient(
        to bottom right,
        rgba(255, 255, 255, 0.3),
        rgba(255, 255, 255, 0.1)
      );
      transform: rotate(30deg);
      z-index: -1;
      transition: all 0.5s ease;
    }
    
    .glass-btn:hover::before {
      transform: rotate(30deg) translate(20%, 20%);
    }
    
    .shop-now-btn {
      background-color: var(--gold);
      color: white;
      border: none;
      padding: 18px 45px;
      font-size: 1.2rem;
      border-radius: 30px;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
      font-weight: 500;
      letter-spacing: 1px;
      position: relative;
      overflow: hidden;
    }
    
    .shop-now-btn:hover {
      background-color: #c19b2e;
      transform: translateY(-3px);
      box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
    }
    
    /* Transition animation */
    .page-transition {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: var(--gold);
      z-index: 1000;
      transform: scaleY(0);
      transform-origin: bottom;
      pointer-events: none;
    }
    
    /* Footer */
    .welcome-footer {
      position: static;
      margin-top: 40px;
      text-align: center;
      padding: 20px;
      animation: fadeIn 1s ease-out 0.5s both;
    }
    
    .contact-info {
      margin-bottom: 15px;
      font-size: 1rem;
    }
    
    .phone-number {
      display: inline-block;
      margin: 0 10px;
      color: var(--gold);
      text-decoration: none;
      font-weight: 500;
    }
    
    .social-links {
      display: flex;
      justify-content: center;
      gap: 20px;
    }
    
    .social-link {
      color: var(--gold);
      font-size: 1.5rem;
      transition: transform 0.3s ease, color 0.3s ease;
    }
    
    .social-link:hover {
      transform: translateY(-3px);
      color: var(--pink);
    }
    
    /* Main Content (initially hidden) */
    .main-content {
      display: none;
      opacity: 0;
      transition: opacity 0.5s ease;
      padding-top: 70px; /* Space for fixed nav */
    }
    
    /* Header with Logo and Theme Toggle */
    header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30px 40px;
      position: relative;
      z-index: 100;
    }
    
    .logo-container {
      display: flex;
      align-items: center;
    }
    
    .logo-img {
      height: 50px;
      margin-right: 15px;
    }
    
    .logo-text {
      font-family: 'Playfair Display', serif;
      font-size: 1.8rem;
      font-weight: 700;
      color: var(--gold);
      letter-spacing: 1px;
    }
    
    .theme-toggle {
      background: transparent;
      border: none;
      cursor: pointer;
      font-size: 1.5rem;
      color: var(--gold);
    }
    
    /* Hero Section with Blurred Background Image */
    .hero-bg-blur {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -2;
      background: url('images/hero-blur.jpg') center/cover no-repeat;
      filter: blur(24px) brightness(1.1);
      opacity: 0.35;
      pointer-events: none;
    }
    
    .hero {
      position: relative;
      overflow: hidden;
      padding: 80px 40px;
      text-align: left;
      max-width: 1400px;
      margin: 0 auto;
    }
    
    .hero::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, rgba(212,175,55,0.1) 0%, rgba(255,255,255,0) 100%);
      z-index: -1;
      -webkit-backdrop-filter: blur(5px);
      backdrop-filter: blur(5px);
    }
    
    .dark-mode .hero::before {
      background: linear-gradient(90deg, rgba(212,175,55,0.1) 0%, rgba(26,26,26,0) 100%);
    }
    
    .hero h1 {
      font-family: 'Playfair Display', serif;
      color: var(--black);
      font-size: 5rem;
      font-weight: 900;
      margin-bottom: 20px;
      line-height: 1;
    }
    
    .dark-mode .hero h1 {
      color: var(--text-dark);
    }
    
    .hero .highlight {
      color: var(--gold);
      font-size: 5.5rem;
      display: block;
      margin-top: 10px;
    }
    
    .tagline {
      font-size: 1.3rem;
      max-width: 500px;
      margin: 0 0 40px;
      color: var(--text-light);
      font-weight: 300;
    }
    
    .dark-mode .tagline {
      color: var(--text-dark);
    }
    
    /* Horizontal Product Scroller */
    .product-scroller {
      width: 100vw;
      padding: 80px 0;
      position: relative;
      background-color: var(--card-light);
    }
    
    .dark-mode .product-scroller {
      background-color: var(--bg-dark);
    }
    
    .scroller-container {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      padding: 0 40px;
      gap: 30px;
    }
    
    .product-card {
      scroll-snap-align: start;
      flex: 0 0 320px;
      background: var(--card-light);
      border-radius: 15px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.08);
      overflow: hidden;
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
      position: relative;
    }
    
    .dark-mode .product-card {
      background: var(--card-dark);
      box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    }
    
    /* Triangle Animation Effect */
    .product-card::before {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      border-left: var(--triangle-size) solid transparent;
      border-right: var(--triangle-size) solid transparent;
      border-bottom: var(--triangle-size) solid var(--gold);
      top: -15px;
      left: 50%;
      transform: translateX(-50%);
      opacity: 0;
      transition: all 0.3s ease;
    }
    
    .product-card:hover {
      transform: translateY(-15px) scale(1.02);
      box-shadow: 0 15px 40px rgba(0,0,0,0.15);
    }
    
    .dark-mode .product-card:hover {
      box-shadow: 0 15px 40px rgba(0,0,0,0.5);
    }
    
    .product-card:hover::before {
      opacity: 1;
      top: -10px;
    }
    
    .product-image {
      height: 280px;
      overflow: hidden;
      position: relative;
    }
    
    .product-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
    }
    
    .product-card:hover .product-image img {
      transform: scale(1.1);
    }
    
    .product-info {
      padding: 25px;
      position: relative;
    }
    
    .product-category {
      color: var(--pink);
      font-weight: 500;
      font-size: 0.9rem;
      margin-bottom: 5px;
      letter-spacing: 1px;
    }
    
    .product-name {
      font-family: 'Playfair Display', serif;
      font-size: 1.6rem;
      margin-bottom: 15px;
      color: var(--text-light);
    }
    
    .dark-mode .product-name {
      color: var(--text-dark);
    }
    
    .product-features {
      list-style: none;
      margin: 20px 0;
    }
    
    .product-features li {
      padding: 8px 0;
      position: relative;
      padding-left: 25px;
      font-size: 0.95rem;
      color: var(--text-light);
    }
    
    .dark-mode .product-features li {
      color: var(--text-dark);
    }
    
    .product-features li:before {
      content: "❯";
      color: var(--gold);
      position: absolute;
      left: 0;
      font-size: 0.8rem;
    }
    
    .product-price {
      font-size: 1.5rem;
      color: var(--gold);
      font-weight: 700;
      margin: 25px 0 15px;
      font-family: 'Playfair Display', serif;
    }
    
    .add-to-cart {
      background: var(--gold);
      color: white;
      border: none;
      padding: 15px 30px;
      border-radius: 30px;
      font-weight: 500;
      cursor: pointer;
      width: 100%;
      transition: all 0.3s;
      font-size: 1rem;
      letter-spacing: 1px;
      position: relative;
      overflow: hidden;
    }
    
    .add-to-cart:hover {
      background: var(--pink);
      transform: translateY(-3px);
      box-shadow: 0 5px 15px rgba(255,159,159,0.3);
    }
    
    /* Scroll Arrows */
    .scroll-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 60px;
      height: 60px;
      background: var(--card-light);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 5px 25px rgba(0,0,0,0.15);
      cursor: pointer;
      z-index: 10;
      opacity: 0.9;
      transition: all 0.3s;
      color: var(--text-light);
    }
    
    .dark-mode .scroll-arrow {
      background: var(--card-dark);
      color: var(--text-dark);
      box-shadow: 0 5px 25px rgba(0,0,0,0.4);
    }
    
    .scroll-arrow:hover {
      opacity: 1;
      transform: translateY(-50%) scale(1.1);
      background: var(--gold);
      color: white;
    }
    
    .arrow-left {
      left: 20px;
    }
    
    .arrow-right {
      right: 20px;
    }
    
    /* Hide scrollbar */
    .scroller-container::-webkit-scrollbar {
      display: none;
    }
    
    /* Ripple Effect */
    .ripple {
      position: absolute;
      background: rgba(255,255,255,0.5);
      border-radius: 50%;
      transform: scale(0);
      animation: ripple 0.6s linear;
      pointer-events: none;
    }
    
    @keyframes ripple {
      to {
        transform: scale(4);
        opacity: 0;
      }
    }
    
    /* Back Button */
    .back-btn {
      display: none;
      position: fixed;
      top: 80px;
      left: 20px;
      background: var(--gold);
      color: white;
      border: none;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      font-size: 1.2rem;
      cursor: pointer;
      z-index: 100;
      box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    }
    
    /* Location Modal */
    .modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.7);
      z-index: 2000;
      justify-content: center;
      align-items: center;
    }
    
    .modal-content {
      background: var(--card-light);
      padding: 30px;
      border-radius: 15px;
      max-width: 600px;
      width: 90%;
      position: relative;
      box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    }
    
    .dark-mode .modal-content {
      background: var(--card-dark);
    }
    
    .close-modal {
      position: absolute;
      top: 15px;
      right: 15px;
      font-size: 1.5rem;
      cursor: pointer;
      color: var(--text-light);
    }
    
    .dark-mode .close-modal {
      color: var(--text-dark);
    }
    
    /* Product Showcase */
    .product-showcase {
      max-width: 1100px;
      margin: 60px auto 40px auto;
      padding: 0 20px;
      display: flex;
      flex-direction: column;
      gap: 40px;
    }
    .showcase-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #fff9f0;
      border-radius: 18px;
      box-shadow: 0 4px 24px rgba(212,175,55,0.07);
      overflow: hidden;
      transition: background 0.3s;
      position: relative;
    }
    .dark-mode .showcase-item {
      background: #23201a;
      box-shadow: 0 4px 24px rgba(0,0,0,0.18);
    }
    .showcase-item:nth-child(even) {
      flex-direction: row-reverse;
      background: #f7f3e8;
    }
    .dark-mode .showcase-item:nth-child(even) {
      background: #181613;
    }
    .showcase-image {
      flex: 1 1 320px;
      min-width: 220px;
      max-width: 340px;
      height: 260px;
      object-fit: cover;
      border-radius: 0 18px 18px 0;
      transition: transform 0.4s;
    }
    .showcase-item:nth-child(even) .showcase-image {
      border-radius: 18px 0 0 18px;
    }
    .showcase-details {
      flex: 2 1 400px;
      padding: 36px 32px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .showcase-title {
      font-family: 'Playfair Display', serif;
      font-size: 1.6rem;
      color: var(--gold);
      font-weight: 700;
      margin-bottom: 6px;
    }
    .showcase-desc {
      font-size: 1.08rem;
      color: var(--text-light);
      margin-bottom: 8px;
    }
    .dark-mode .showcase-desc {
      color: var(--text-dark);
    }
    .showcase-more {
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      transition: max-height 0.5s cubic-bezier(0.4,0,0.2,1), opacity 0.4s;
      font-size: 1rem;
      color: #6a5b2b;
      margin-bottom: 0;
    }
    .showcase-item.expanded .showcase-more {
      max-height: 300px;
      opacity: 1;
      margin-bottom: 10px;
    }
    .showcase-readmore {
      background: transparent;
      color: var(--gold);
      border: 1px solid rgba(212,175,55,0.3);
      border-radius: 20px;
      padding: 6px 16px;
      font-size: 0.9rem;
      font-weight: 500;
      cursor: pointer;
      margin-top: 6px;
      transition: all 0.3s;
      outline: none;
      align-self: flex-start;
    }
    .showcase-readmore:hover {
      background: rgba(212,175,55,0.1);
    }
    .showcase-item.expanded .showcase-readmore {
      background: rgba(212,175,55,0.05);
      border: 1px solid rgba(212,175,55,0.2);
    }
    
    /* Agent Process Section */
    .agent-process {
      max-width: 1100px;
      margin: 60px auto;
      padding: 0 20px;
    }
    .agent-process h2 {
      font-family: 'Playfair Display', serif;
      font-size: 2.5rem;
      color: var(--gold);
      text-align: center;
      margin-bottom: 40px;
    }
    .process-steps {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 30px;
    }
    .process-step {
      background: var(--card-light);
      border-radius: 15px;
      padding: 30px;
      box-shadow: 0 5px 20px rgba(0,0,0,0.05);
      transition: transform 0.3s;
      position: relative;
      overflow: hidden;
    }
    .dark-mode .process-step {
      background: var(--card-dark);
      box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    }
    .process-step:hover {
      transform: translateY(-5px);
    }
    .step-number {
      position: absolute;
      top: 15px;
      right: 15px;
      font-size: 1.5rem;
      color: rgba(212,175,55,0.2);
      font-weight: 700;
    }
    .step-icon {
      font-size: 2.5rem;
      color: var(--gold);
      margin-bottom: 20px;
    }
    .step-title {
      font-family: 'Playfair Display', serif;
      font-size: 1.5rem;
      color: var(--text-light);
      margin-bottom: 15px;
    }
    .dark-mode .step-title {
      color: var(--text-dark);
    }
    .step-desc {
      color: var(--text-light);
      line-height: 1.6;
    }
    .dark-mode .step-desc {
      color: var(--text-dark);
    }
    .agent-cta {
      text-align: center;
      margin-top: 50px;
    }
    .agent-cta button {
      background: var(--gold);
      color: white;
      border: none;
      padding: 15px 40px;
      font-size: 1.1rem;
      border-radius: 30px;
      cursor: pointer;
      transition: all 0.3s;
    }
    .agent-cta button:hover {
      background: #c19b2e;
      transform: translateY(-3px);
      box-shadow: 0 5px 15px rgba(212,175,55,0.3);
    }
    
    @media (max-width: 900px) {
      .product-showcase {
        max-width: 98vw;
      }
      .showcase-details {
        padding: 24px 14px;
      }
      .showcase-image {
        max-width: 200px;
        height: 160px;
      }
    }
    @media (max-width: 600px) {
      .showcase-item, .showcase-item:nth-child(even) {
        flex-direction: column !important;
        align-items: stretch;
      }
      .showcase-image {
        width: 100%;
        max-width: 100%;
        height: 180px;
        border-radius: 18px 18px 0 0 !important;
      }
      .showcase-details {
        padding: 18px 8px;
      }
      .process-steps {
        grid-template-columns: 1fr;
      }
      
      /* Delivery modal / agent card visuals (moved from inline) */
      #deliveryModal .agent-card{
        display:flex;align-items:center;gap:14px;padding:14px;border-radius:12px;margin-bottom:12px;
        background:linear-gradient(180deg,var(--pe-bg-card),#fbf8f3);box-shadow:var(--pe-card-shadow);
        border:1px solid rgba(0,0,0,0.04);transition:transform .18s ease,box-shadow .18s ease,opacity .18s ease;
        opacity:0; transform: translateY(8px);
      }
      #deliveryModal .agent-card.show{opacity:1;transform:none}
      #deliveryModal .agent-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(15,15,15,0.08)}
      #deliveryModal .agent-card.selected{border-color:var(--pe-gold);box-shadow:0 18px 40px rgba(212,175,55,0.12);outline:2px solid rgba(212,175,55,0.08)}
      #deliveryModal .agent-avatar{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--pe-gold),var(--pe-gold-dark));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;margin-right:12px;flex-shrink:0;font-size:18px;box-shadow:0 6px 18px rgba(0,0,0,0.08)}
      #deliveryModal .agent-row{display:flex;align-items:center;gap:12px;width:100%}
      #deliveryModal .agent-details{flex:1;min-width:0}
      #deliveryModal .agent-name{font-weight:700;color:#1f2937;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
      #deliveryModal .agent-area{font-size:13px;color:var(--pe-muted);margin-top:4px}
      #deliveryModal .agent-phones{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
      #deliveryModal .agent-phones a{display:inline-block;padding:10px 14px;border-radius:999px;background:#f1fdf3;color:var(--pe-green);font-weight:700;text-decoration:none;border:1px solid #dff3e4;transition:background-color .12s,color .12s;font-size:14px}
      #deliveryModal .agent-phones a:hover{background:var(--pe-green);color:#fff}
      #deliveryModal .agent-phones a .phone-ico{margin-right:6px}
      #deliveryModal .agent-area-badge{font-size:12px;color:#9ca3af}
      #deliveryModal .agent-availability{padding:6px 10px;border-radius:999px;font-weight:700;background:#eaf8ef;color:var(--pe-green)}
    }
    
    /* Fade/slide animation for cards */
    @keyframes cardIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
    #deliveryModal .agent-card.card-animate{animation:cardIn .28s ease both}
    
    /* Step 3 footer buttons */
    .modal-footer .btn-primary-action{background:var(--pe-gold);border:none;color:#fff;padding:10px 16px;border-radius:8px;font-weight:700}
    .modal-footer .btn-secondary-action{background:#fff;border:1px solid rgba(0,0,0,0.08);color:#111;padding:10px 16px;border-radius:8px;margin-right:8px}
    
    /* Order total display */
    #orderTotal{font-weight:700;color:var(--pe-green);margin-top:8px}
    
    /* small utility to ensure agent-list spacing */
    #agentList{display:flex;flex-direction:column;gap:10px}
    
    /* No JavaScript fallback */
    .no-js .carousel-container {
      height: auto;
    }
    .no-js .carousel-track {
      flex-wrap: wrap;
      transform: none !important;
    }
    .no-js .carousel-slide {
      min-width: 100%;
    }
/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
/* Base Styles */
.pearl-products {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
  font-family: 'Arial', sans-serif;
}

.product-row {
  display: flex;
  align-items: center;
  margin-bottom: 60px;
  gap: 40px;
}

.product-row.reverse {
  flex-direction: row-reverse;
}

.product-image {
  flex: 1;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-image:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.product-image img {
  width: 100%;
  height: auto;
  display: block;
}

.product-text {
  flex: 1;
  padding: 20px;
}

.product-title {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin-bottom: 15px;
}

.product-desc {
  font-size: 16px;
  line-height: 1.6;
  color: #666;
  margin-bottom: 25px;
}

.shop-btn {
  display: inline-block;
  padding: 12px 30px;
  background: #f5e6e0;
  color: #8c6a5d;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 500;
  transition: all 0.3s ease;
  border: 1px solid #e8d5cd;
}

.shop-btn:hover {
  background: #e8d5cd;
  color: #6a4f45;
}

/* Refined Shop With Us styles to match site look */
.shop-with-us{
  max-width:1200px;
  margin:28px auto;
  padding:22px 18px 28px;
  border-radius:14px;
  background: linear-gradient(180deg, rgba(245,240,236,0.6), rgba(255,255,255,0.5));
  box-shadow: 0 8px 30px rgba(31,38,135,0.04);
  border: 1px solid rgba(212,175,55,0.08);
}
.shop-with-us-heading{
  font-family: 'Playfair Display', serif;
  font-size:2.2rem;
  color:var(--gold);
  text-align:center;
  margin-bottom:6px;
  letter-spacing:0.6px;
}
.shop-subheading{
  font-family: 'Montserrat', sans-serif;
  font-size:1rem;
  color:var(--pe-muted);
  text-align:center;
  max-width:880px;
  margin:0 auto 14px;
}
.shop-cta{display:flex;justify-content:center;margin-bottom:16px}
.view-all-btn{
  background:transparent;
  border-radius:999px;
  padding:10px 18px;
  font-weight:700;
  color:var(--black);
  text-decoration:none;
  border:1px solid rgba(212,175,55,0.15);
  background:linear-gradient(90deg, rgba(212,175,55,0.06), rgba(255,255,255,0.02));
  box-shadow:0 6px 18px rgba(212,175,55,0.06);
}
.view-all-btn:hover{ transform:translateY(-3px); box-shadow:0 10px 28px rgba(212,175,55,0.09); }

/* Top scroller adjustments for visual harmony */
.shop-with-us .product-scroller{ padding:18px 0 6px; background:transparent }
.shop-with-us .scroller-container{ padding:8px 24px; gap:20px }
.shop-with-us .product-card{ flex:0 0 280px; max-width:280px; border-radius:14px; overflow:hidden; background:linear-gradient(180deg,#fff,#fffaf7); border:1px solid rgba(0,0,0,0.04); box-shadow:0 10px 30px rgba(15,15,15,0.05); transition:transform .22s ease, box-shadow .22s ease }
.shop-with-us .product-card:hover{ transform:translateY(-8px); box-shadow:0 22px 50px rgba(15,15,15,0.08) }
.shop-with-us .product-image{ height:180px }
.shop-with-us .product-image img{ height:100%; width:100%; object-fit:cover }
.shop-with-us .product-info{ padding:14px }
.shop-with-us .product-name{ font-size:1.05rem; font-weight:700; color:var(--black); margin:8px 0 }
.shop-with-us .product-category{ font-size:11px; color:var(--pe-muted); font-weight:700 }
.shop-with-us .product-price{ display:inline-block; padding:6px 12px; border-radius:999px; background:linear-gradient(90deg,#fff,#fff); border:1px solid rgba(0,0,0,0.04); color:var(--pe-green); font-weight:800 }
.shop-with-us .add-to-cart{ padding:10px 12px; border-radius:8px; font-size:0.95rem }

/* Mini products area under the scroller */
.more-products{ margin-top:18px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap }
.mini-product{ flex:0 0 320px; max-width:320px; border-radius:12px; overflow:hidden; background:linear-gradient(180deg,#fff,#fffaf7); border:1px solid rgba(0,0,0,0.04); box-shadow:0 8px 22px rgba(15,15,15,0.04); display:flex; flex-direction:column }
.mini-product .mini-image{ height:160px; overflow:hidden }
.mini-product .mini-image img{ width:100%; height:100%; object-fit:cover }
.mini-product .mini-info{ padding:12px 14px; display:flex; flex-direction:column; gap:8px }
.mini-product .mini-title{ font-family:'Playfair Display', serif; color:var(--gold); font-size:1.05rem; font-weight:700 }
.mini-product .mini-desc{ color:var(--text-light); font-size:0.95rem }
.mini-product .mini-price{ color:var(--pe-green); font-weight:800 }
.mini-product .mini-cta{ margin-top:8px; display:flex; gap:8px }
.mini-product .mini-cta .add-to-cart{ flex:1 }
.mini-product .mini-cta .shop-btn{ flex:1; background:transparent; border:1px solid rgba(0,0,0,0.06); color:var(--black); border-radius:8px }

/* Responsive tweaks */
@media (max-width:900px){
  .shop-with-us{ padding:16px }
  .shop-with-us .product-card{ flex:0 0 220px; max-width:220px }
  .mini-product{ flex:1 1 100%; max-width:520px }
  .shop-with-us .product-image{ height:140px }
}

@media (max-width:480px){
  .shop-with-us-heading{ font-size:1.4rem }
  .shop-subheading{ font-size:0.95rem }
  .shop-with-us .product-card{ flex:0 0 200px; max-width:200px }
  .shop-with-us .product-image{ height:120px }
}