:root {
  --brand-purple: #301934;
  --text-dark: #2b2b2b;
  --border-light: #eaeaea;
}
@font-face {
  font-family: 'Tan Pearl';
  src: url('fonts/Tan-Pearl.otf') format('opentype');
}

@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-Regular.ttf') format('truetype');
}
/* GLOBAL RESET */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
}
html, body {
    background: #fff;
    color: var(--text-dark);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}
/* OFFSET: Pushes page content down so it isn't hidden by the fixed bars */
body {
    padding-top: 160px;
  margin: 0;/* Adjust this to match the total height of both bars */
}

/* 1. NAVIGATION BAR (Now at the very top) */
.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    background: #fff;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;       /* This prevents the bar from collapsing */
    z-index: 1001;
    border-bottom: none; 
}

/* Ensure the icons container is visible and spread out */
.icons {
    display: flex;
    align-items: center;
    gap: 18px;
   /* Pushes icons to the far right */
}

.icons .icon svg {
    width: 22px;
    height: 22px;
   
}

/* 2. ANNOUNCEMENT BAR (Directly beneath) */
.announcement-bar {
    color: var(--brand-purple);
    background-color: #ffffff;
    padding: 6px 0;
    text-align: center;
    width: 100%;
    position: fixed;
    top: 90px; /* Adjust this if your logo makes the nav taller */
    left: 0;
    z-index: 1000;

}
.announcement-bar p {
    margin: 0;
    font-size: 10px;    /* Slightly smaller font for a cleaner look */
    letter-spacing: 2px;
    font-weight: 600;
    text-transform: uppercase;
}
.nav-left {
  display: flex;
  align-items: center;
  gap: 30px;
}

.logo-img {
  height: 50px;
}
.nav-links {
  display: flex;       /* Tells the browser to treat links as a row */
  gap: 20px;           /* INCREASE THIS to spread Home, Products, etc. apart */
  align-items: center;
}
/* 1. Remove the underline from the New Arrivals link */

.nav-links a {
  text-decoration: none;
  color: var(--brand-purple);
  position: relative;
  font-family: 'Tan Pearl', serif !important;
}

/* Purple underline hover only */
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 2px;
  background: var(--brand-purple);
  transition: width 0.3s ease;
}

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

/* ICONS */

/* ================= HERO ================= */
.hero {
  height: 80vh;
  background:
    
    url("images/three-women-friends-going-out-600nw-2259803895.webp") center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero h1 {
  color: #fff;
  font-size: 48px;
}

/* ================= SECTIONS ================= */
section {
  padding: 70px 40px;
}

h2 {
  text-align: center;
  color: var(--brand-purple);
  margin-bottom: 40px;
  font-family: 'Tan Pearl', serif !important;
}

/* ================= PRODUCTS ================= */
.products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 40px;
}

.product-card {
  text-decoration: none;
  color: inherit;
  text-align: center;
}

.product-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* ================= PRODUCT PAGE ================= */
.product-page {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}

.gallery img {
  width: 100%;
}

.details button {
  background: var(--brand-purple);
  color: #fff;
  border: none;
  padding: 14px;
  margin: 10px 0;
  width: 100%;
  cursor: pointer;
}

/* SIZE TABLE */
table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid var(--brand-purple);
  padding: 10px;
  text-align: center;
}

/* ================= ACCOUNT ================= */
.account input {
  width: 100%;
  padding: 16px;
  margin-bottom: 15px;
  font-size: 16px;
  border: 1px solid var(--border-light);
}

.account button {
  background: var(--brand-purple);
  color: #fff;
  padding: 14px;
  width: 100%;
  border: none;
}

/* ================= FOOTER ================= */
footer {
  background: var(--brand-purple);
  color: #fff;
  text-align: center;
  padding: 40px;
}

footer a {
  color: #fff;
  text-decoration: none;
  margin: 0 10px;
}

/* ================= ANIMATION ================= */
.slide {
  opacity: 0;
  transform: translateY(40px);
  transition: 0.8s ease;
}

.slide.show {
  opacity: 1;
  transform: translateY(0);
}

/* ================= RESPONSIVE ================= */
@media (max-width: 768px) {
  .product-page {
    grid-template-columns: 1fr;
  }

  .hero h1 {
    font-size: 32px;
  }
}
/* ===== ADD: FIXED NAVBAR ===== */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

/* Offset page content so it doesn't hide under navbar */
body {
  padding-top: 100px;
}
/* ===== ADD: SEARCH OVERLAY ===== */
#search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(90, 31, 122, 0.95);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

#search-box {
  width: 80%;
  max-width: 500px;
  padding: 16px;
  font-size: 18px;
  border: none;
  outline: none;
}
/* ===== ADD: CONTACT ICON FIX ===== */
.contact-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 18px 0;
}

.contact-icon {
  width: 20px;
  height: 20px;
  fill: #fff;
  flex-shrink: 0;
}
/* ===== ADD: PRODUCT IMAGE GRID ===== */
.product-image-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.product-image-grid img {
  width: 100%;
  object-fit: cover;
}
/* ===== ADD: PRODUCT HOVER ENLARGE ===== */
.product-card img {
  transition: transform 0.35s ease;
}
/* ===== ADD: PRODUCT GRID CONTROL ===== */
@media (min-width: 1024px) {
  .products {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 1024px) {
  .products {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 600px) {
  .products {
    grid-template-columns: repeat(2, 1fr);
  }
}

.product-card:hover img {
  transform: scale(1.08);
}
.product-image-grid {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.product-image-grid img {
  width: 150px;       /* consistent width */
  height: auto;       /* maintain aspect ratio */
  object-fit: cover;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.search-container {
  display: flex;
  align-items: center;
  position: relative;
}

/* Hidden by default */
#search-input {
  width: 0;
  padding: 5px 10px;
  margin-left: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  outline: none;
  transition: width 0.3s ease, opacity 0.3s ease;
  opacity: 0;
}

/* Active state */
#search-input.active {
  width: 200px; /* adjust width as needed */
  opacity: 1;
}
/* ================= CONTACT SECTION ================= */
.contact-section {
  max-width: 600px;
  margin: auto;
  padding: 60px 20px;
}

.contact-section h2 {
  text-align: center;
  color: var(--brand-purple);
  margin-bottom: 40px;
  font-size: 36px;
}

/* Contact items (phone, Instagram, email) */
.contact-item {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

/* SVG icons */
.contact-icon {
  width: 32px;                 /* icon size */
  height: 32px;                /* icon size */
  fill: var(--brand-purple);   /* purple color consistent with site */
  flex-shrink: 0;
}

/* Links in contact items */
.contact-item a {
  color: var(--text-dark);
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
}

.contact-item a:hover {
  text-decoration: underline;
}

/* Optional: icon hover effect */
.contact-icon:hover {
  transform: scale(1.1);
  transition: 0.3s ease;
}
/* ================= CONTACT SECTION ================= */
.contact-item {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.contact-icon {
  width: 32px;
  height: 32px;
  fill: none;                     /* removes solid fill */
  stroke: var(--brand-purple);    /* purple lines for your site theme */
  stroke-width: 2;                /* line thickness */
  flex-shrink: 0;
}
/* Make body a column flex container */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;  /* Ensure body takes full viewport height */
  padding-top: 100px; /* keep your fixed navbar offset */
}

/* Make main content grow to push footer down */
.contact-section,
section,
main {
  flex: 1;  /* This allows content to take remaining space */
}

/* Footer styling stays mostly the same */
footer {
  background: var(--brand-purple);
  color: #fff;
  text-align: center;
  padding: 40px;
  flex-shrink: 0;  /* Ensure footer does not shrink */
}
.product-card {
  overflow: hidden;
}

.product-card img {
  transition: transform 0.4s ease;
}

.product-card:hover img {
  transform: scale(1.15);
}
/* CLEAN CART TABLE (No vertical lines) */
/* --- UPDATED CART LAYOUT (Matching Reference) --- */
.cart-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

/* Header style from reference */
.cart-table th {
  text-align: left;
  font-size: 12px;
  letter-spacing: 1px;
  color: #888;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 10px;
}

.cart-item-row td {
  padding: 30px 0;
  border-bottom: 1px solid var(--border-light);
  vertical-align: top;
}

/* Image styling to match reference ratios */
.cart-img-frame img {
  width: 110px;
  height: 140px;
  object-fit: cover;
}

.cart-item-details {
  padding-left: 20px;
}

.cart-item-details h4 {
  margin-bottom: 5px;
  font-family: 'Playfair Display', serif;
  color: var(--text-dark);
}

/* --- QUANTITY SELECTOR (Exact Reference Style) --- */
.qty-box {
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  width: fit-content;
}

.qty-box button {
  background: none;
  border: none;
  padding: 8px 15px;
  cursor: pointer;
  font-size: 16px;
}

.qty-box span {
  padding: 0 10px;
  min-width: 30px;
  text-align: center;
}

.trash-btn {
  background: none;
  border: none;
  margin-left: 15px;
  cursor: pointer;
  color: #999;
  transition: color 0.3s;
}

.trash-btn:hover {
  color: var(--brand-purple);
}

/* --- CHECKOUT BUTTON (Purple Styling) --- */
.cart-footer-area {
  margin-top: 40px;
  text-align: right;
}

.cart-total-text {
  font-size: 22px;
  margin-bottom: 15px;
}

.btn-checkout-purple {
  background-color: var(--brand-purple);
  color: #fff;
  padding: 16px 60px;
  border: none;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
  width: 100%;
  max-width: 350px;
}

/* WISHLIST HORIZONTAL GRID */
.wishlist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 30px;
  margin-top: 20px;
}

.wishlist-card {
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 15px;
}

.wishlist-img {
  width: 100%;
  height: 350px; /* Consistent sizing */
  object-fit: cover;
  margin-bottom: 10px;
}

.wishlist-card h4 {
  color: var(--brand-purple);
  margin-bottom: 5px;
}

.wishlist-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.btn-add-cart {
  background: var(--brand-purple);
  color: white;
  border: none;
  padding: 8px;
  cursor: pointer;
}

.btn-remove-wish {
  background: none;
  border: 1px solid var(--border-light);
  color: #888;
  padding: 5px;
  cursor: pointer;
  font-size: 12px;
}
/* 1. Add borders to the Header Cells only */
.cart-table thead th {
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    border-left: 1px solid var(--border-light);
    padding: 15px;
    background-color: transparent; /* Or a very light tint if you prefer */
}

/* Close the box on the far right of the header */
.cart-table thead th:last-child {
    border-right: 1px solid var(--border-light);
}

/* 2. Remove ALL lines (vertical and horizontal) from the middle rows */
.cart-item-row td {
    border: none !important; 
    padding: 20px 15px;
}

/* 3. Add one single horizontal line at the very bottom of the last item */
#cart-display-body tr:last-child {
    border-bottom: 1px solid var(--border-light);
}
/* 1. Make the product price in the list purple */
.cart-item-details p:first-of-type {
    color: var(--brand-purple);
    font-weight: 600;
}

/* 2. Make the line total (right side) purple */
.cart-item-row td:last-child {
    color: var(--brand-purple);
    font-weight: 600;
}

/* 3. Make the Estimated Total text and amount purple */
.cart-total-text, 
#cart-grand-total {
    color: var(--brand-purple);
}

/* 4. Optional: If you want the 'Product', 'Quantity', 'Total' headers purple too */
.cart-table thead th {
    color: var(--brand-purple);
    border-color: var(--brand-purple); /* This also makes the 'box' lines purple */
}
/* --- CHECKOUT PAGE STYLING --- */

/* The main container for the two columns */
.checkout-layout {
    display: grid; 
    grid-template-columns: 1fr 400px; 
    gap: 40px; 
    align-items: start;
    margin-top: 30px;
}

/* Form Headings */
.checkout-section-title {
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 10px;
    margin-top: 30px;
    color: var(--text-dark);
}

/* Styling for Input Fields */
.checkout-input {
    width: 100%;
    padding: 12px;
    margin-top: 15px;
    margin-bottom: 5px;
    border: 1px solid var(--border-light);
    font-family: inherit;
    font-size: 14px;
}

/* Delivery Option Boxes (The Courier Guy, Pudo, Paxi) */
.delivery-option-card {
    display: block;
    padding: 15px;
    border: 1px solid var(--border-light);
    margin-top: 15px;
    cursor: pointer;
    transition: 0.3s;
}

.delivery-option-card:hover {
    border-color: var(--brand-purple);
}

.delivery-option-card input[type="radio"] {
    margin-right: 10px;
    accent-color: var(--brand-purple);
}

/* EFT Instruction Box */
.payment-info-box {
    margin-top: 15px;
    padding: 20px;
    background: #fcfcfc;
    border-left: 4px solid var(--brand-purple);
}

/* Order Summary Box (Right Column) */
.order-summary-aside {
    background: #fff;
    border: 1px solid var(--border-light);
    padding: 25px;
    position: sticky;
    top: 120px; /* Keeps it visible as you scroll */
}

.summary-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 14px;
}

.summary-item span:last-child {
    color: var(--brand-purple);
    font-weight: 600;
}
.btn-checkout-purple {
    background-color: var(--brand-purple);
    color: #fff;
    padding: 16px;
    border: none;
    width: 100%;
    max-width: 350px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    
    /* ADD THESE TO ENSURE IT LOOKS LIKE A BUTTON */
    display: inline-block; 
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.checkout-layout { display: grid; grid-template-columns: 1fr 450px; gap: 20px; padding: 20px; }
.checkout-card { margin-bottom: 30px; }
.bank-details { background: #f8f8f8; padding: 20px; border-left: 5px solid var(--brand-purple); }
.bank-info p { margin: 5px 0; font-size: 14px; }

/* Product Summary Images with Qty Badges */
.img-badge-container { position: relative; width: 64px; height: 64px; }
.summary-img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; border: 1px solid #ddd; }
.qty-badge {
    position: absolute; top: -10px; right: -10px;
    background: #666; color: white; width: 20px; height: 20px;
    border-radius: 50%; font-size: 12px; display: flex; align-items: center; justify-content: center;
}

.summary-product-row { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; }
.summary-info { flex: 1; }
.summary-name { font-weight: 500; font-size: 14px; margin: 0; }
.summary-size { font-size: 12px; color: #777; margin: 0; }
.summary-price { font-weight: 500; font-size: 14px; }

.final-total { border-top: 1px solid #ddd; padding-top: 20px; font-size: 20px; }
.total-right small { font-size: 12px; color: #777; margin-right: 5px; }
/* ================= MOBILE RESPONSIVENESS ================= */

/* For tablets and smaller (under 1024px) */
@media (max-width: 1024px) {
    .checkout-layout {
        grid-template-columns: 1fr; /* Stacks form and summary vertically */
        gap: 30px;
    }
    
    .order-summary-aside {
        position: static !important; /* Removes sticky behavior on mobile */
        width: 100%;
    }
}

/* For phones (under 768px) */
@media (max-width: 768px) {
    /* NAVIGATION MOBILE TWEAKS */
    .nav {
        flex-direction: column; /* Stacks logo and links */
        padding: 15px;
        height: auto;
    }
    
    .nav-left {
        flex-direction: column;
        gap: 10px;
    }

    body {
        padding-top: 160px; /* Adjust offset for stacked mobile header */
    }

    /* HERO SECTION */
    .hero h1 {
        font-size: 28px;
        text-align: center;
        padding: 0 20px;
    }

    /* CART TABLE MOBILE FIX */
    .cart-table thead {
        display: none; /* Hide headers for a cleaner mobile card view */
    }

    .cart-item-row {
        display: flex;
        flex-direction: column;
        padding: 20px 0;
        border-bottom: 1px solid var(--border-light);
    }

    .cart-item-row td {
        display: block;
        width: 100%;
        text-align: left !important;
        padding: 5px 0;
    }

    .cart-img-frame img {
        width: 100%; /* Full width image for mobile cart */
        height: auto;
    }

    /* FORM INPUTS */
    .checkout-input, .btn-checkout-purple, .account button {
        font-size: 16px; /* Prevents auto-zoom on iPhones */
        padding: 14px;
    }
    
    /* STACK NAME FIELDS */
    .address-grid div {
        flex-direction: column;
        gap: 0 !important;
    }
}
/* Hide burger on desktop */
.menu-toggle { display: none; cursor: pointer; }

/* ================= MOBILE RESPONSIVENESS ================= */

@media (max-width: 768px) {
    /* STACK THE NAVBAR VERTICALLY */
    .nav {
       display: flex;
        justify-content: space-between; /* Keeps icons right and burger/logo left/center */
        align-items: center;
        padding: 10px 20px; 
    }

    /* THE SLIDE-IN MENU (LEFT SIDE, 75% WIDTH) */
    .nav-links {
        position: fixed;
        left: -100%; /* Start hidden off-screen to the left */
        top: 0;
        width: 75%; /* Do not cover the whole screen */
        height: 100vh;
        background: white;
        display: flex;
        flex-direction: column;
        
        /* INCREASED SPACING BETWEEN LINKS */
        gap: 40px; 
        padding: 100px 40px; 
        
        transition: 0.4s ease-in-out;
        z-index: 1001;
        box-shadow: 5px 0 15px rgba(0,0,0,0.1);
    }

    /* Triggered by JavaScript */
    .nav-links.active {
        left: 0;
    }

    /* MENU LINKS STYLING */
    .nav-links a {
        font-size: 22px;
        font-weight: 500;
        color: var(--brand-purple);
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    /* ALIGN HAMBURGER TO THE LEFT */
    .nav-left {
        display: flex;
        align-items: center;
        flex: 1;
    }

    .menu-toggle {
        display: block;
        position: absolute; /* Takes burger out of the layout flow */
        left: 20px;         /* Pins it to the far left */
        z-index: 1002;
    }

    /* Fix logo size for mobile */
    .logo-img {
        height: 40px;
        margin: 0 auto;    /* This pushes the logo to the center of the available space */
        display: block
    }

    /* Adjust page offset */
    body {
        padding-top: 80px;
    }

    /* PRODUCT GRID FIX FOR MOBILE */
    .products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px;
    }
}
/* Horizontal Size Pills */
.size-pills {
    display: flex;
    gap: 10px;
    margin: 15px 0;
}

.size-pill {
    padding: 8px 20px;
    border: 1px solid #000;
    border-radius: 25px;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    transition: 0.3s;
}

.size-pill.selected {
    background-color: #000;
    color: #fff;
}

/* Collapsible Size Chart Styling */
.size-chart-dropdown {
    margin-top: 20px;
    border-top: 1px solid #eee;
    padding-top: 10px;
}

.size-chart-dropdown summary {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: bold;
    padding: 10px 0;
}

.summary-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dropdown-content {
    padding: 15px 0;
}

/* Share Button Style (Text link look) */
.share-link-style {
    background: none;
    border: none;
    text-decoration: underline;
    cursor: pointer;
    padding: 10px 0;
    font-family: 'Montserrat', sans-serif;
    display: block;
    margin-top: 20px;
}
/* Gallery Layout */
.product-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  padding: 20px;
}

.product-gallery {
  display: flex; /* Makes thumbnails and main image sit side-by-side */
  gap: 15px;
}

.thumbnails {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 80px; /* Small width for the side list */
}

.thumbnails img {
  width: 100%;
  cursor: pointer;
  border: 1px solid transparent;
  transition: 0.3s;
}

.thumbnails img:hover { border-color: #000; }

.main-image img {
  width: 100%;
  object-fit: cover;
  max-width: 400px;
  max-height: 400px;
  
}

/* Share Button Link Style */
.share-btn-link {
  display: block;
  background: none;
  border: none;
  text-decoration: underline;
  cursor: pointer;
  margin: 15px 0;
  font-family: 'Montserrat', sans-serif;
  text-align: left;
}

/* Related Products Grid */
.related-products {
  margin-top: 60px;
  border-top: 1px solid #eee;
  padding-top: 40px;
  text-align: center;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 20px;
}
/* 1. REMOVE UNDERLINES FROM RECOMMENDATIONS */
.recommendations a {
    text-decoration: none; /* Removes the underline */
    color: inherit;        /* Uses the website's text color */
}

.recommendations .tan-pearl {
    font-family: 'Tan Pearl', serif;
    margin-bottom: 20px;
}

/* 2. LAYOUT: Recommendations underneath everything */
.product-page {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.product-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Images left, details right */
    gap: 40px;
}

/* 3. SMALL ROUNDED PILLS */
.pill-container {
    display: flex;
    gap: 10px;
    margin: 15px 0;
}

.size-pill {
    width: 40px;         /* Smaller size */
    height: 40px;
    border-radius: 50%;  /* Fully rounded */
    border: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    transition: all 0.3s ease;
    background: #fff;
}

/* 4. HIGHLIGHTED STATE (When selected) */
.size-pill.active {
    background-color: #000; /* Black background when selected */
    color: #fff;            /* White text when selected */
    border-color: #000;
}

/* 5. SHARE BUTTON UNDER DROPDOWN */
.share-text-link {
    display: block;
    margin-top: 20px;
    background: none;
    border: none;
    text-decoration: underline;
    font-family: 'Montserrat', sans-serif;
    cursor: pointer;
    padding: 0;
}
/* --- SIZE PILLS (Small & Rounded) --- */
.pill-container {
    display: flex;
    gap: 10px;
    margin: 15px 0;
}

.size-pill {
    width: 35px;         /* Smaller size */
    height: 35px;
    border-radius: 50%;  /* Perfectly round */
    border: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 11px;
    font-family: 'Montserrat', sans-serif;
    transition: 0.2s ease-in-out;
    background: #fff;
}

/* Highlighted state when clicked */
.size-pill.active {
    background-color: #000;
    color: #fff;
    border-color: #000;
    font-weight: bold;
}

/* --- RECOMMENDATIONS (Clean Styling) --- */
.recommendations {
    width: 100%;
    padding: 40px 20px;
    border-top: 1px solid #eee;
    margin-top: 50px;
}

.recommendations a {
    text-decoration: none; /* Removes link underline */
    color: inherit;        /* Keeps your site font color */
}

/* --- SHARE BUTTON --- */
.share-text-link {
    display: block;
    margin-top: 25px;
    background: none;
    border: none;
    text-decoration: underline;
    font-size: 14px;
    cursor: pointer;
    padding: 0;
    color: #555;
}

/* Ensure the layout stacks correctly */
.product-page {
    display: flex;
    flex-direction: column;
}
/* 1. IMAGE GRID: 1 Top, 2 Bottom */
.product-gallery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.product-gallery-grid img:first-child {
    grid-column: span 2; /* First image takes full width */
    width: 100%;
}
.product-gallery-grid img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* 2. PURPLE HIGHLIGHT FOR SIZE PILLS */
.size-pill.active {
    background-color: #301934 !important; /* Your brand purple */
    color: #fff !important;
    border-color: #301934 !important;
}

/* 3. SMALLER RECOMMENDATIONS */
.product-grid-small {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* Force smaller cards */
    gap: 20px;
}
.product-grid-small img {
    height: 200px; /* Reduced height for smaller look */
    object-fit: cover;
}

/* 4. CLEAN SHARE BUTTON (No underline) */
.share-btn-new {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    font-family: 'Montserrat', sans-serif;
    color: #301934; /* Purple text */
    cursor: pointer;
    text-decoration: none !important;
    margin-top: 20px;
    padding: 0;
}

/* 5. RECOMMENDATION TEXT STYLE */
.recommendations a {
    text-decoration: none !important;
    color: #301934 !important; /* Matching brand purple */
}
/* --- ICON STYLING --- */
.purple-icon {
    color: #301934; /* Brand Purple */
    stroke: #301934;
}

.care-section {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.care-icons {
    display: flex;
    gap: 5px;
}

/* --- MAIN IMAGE SIZE (Change here) --- */
.product-gallery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%/* CHANGE THIS to make the whole gallery smaller */
}

.product-gallery-grid img:first-child {
    grid-column: span 2;
    height: 400px; /* Adjust height of the top image */
    object-fit: cover;
}

/* --- CENTERED SHARE BUTTON --- */
.share-container {
    display: flex;
    justify-content: center;
    padding: 40px 0;
    width: 100%;
}

.share-btn-new {
    display: flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: none;
    color: #301934;
    font-family: 'Montserrat', sans-serif;
    cursor: pointer;
    text-decoration: none; /* Removed underline */
}

/* --- RECOMMENDATIONS (4 IMAGES) --- */
.product-grid-medium {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 Columns */
    gap: 15px;
}

.product-grid-medium img {
    width: 100%;
    height: 250px; /* Adjust height of small images */
    object-fit: cover;
}
/* --- 1. PURPLE HIGHLIGHT & PILLS --- */
.size-pill {
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1px solid #ccc;
    display: flex;
    align-items: center; justify-content: center;
    cursor: pointer; font-size: 12px;
    transition: 0.3s; background: #fff;
}

.size-pill.active {
    background-color: var(--brand-purple) !important;
    color: #fff !important;
    border-color: var(--brand-purple) !important;
}

/* --- 2. MAIN IMAGE GRID (1 Large, 2 Small) --- */
.product-gallery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
     /* Adjust this to make main images smaller */
}

.product-gallery-grid img:first-child {
    grid-column: span 2;
    height: auto;
}

/* --- 3. SIZE CHART & SHARE (Based on Screenshot) --- */
.collapsible-border-top {
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    margin-top: 20px;
}

.size-dropdown summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    cursor: pointer;
    list-style: none;
}

.summary-left {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
}

.share-container-center {
    display: flex;
    justify-content: center;
    margin: 50px 0;
}

.share-btn-minimal {
    display: flex;
    align-items: center;
    gap: 10px;
    background: none; border: none;
    color: var(--brand-purple);
    font-family: 'Montserrat', sans-serif;
    cursor: pointer;
    font-size: 15px;
}

/* --- 4. RECOMMENDATIONS (4 columns) --- */
.product-grid-four {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Force 4 images */
    gap: 20px;
}

.product-grid-four img {
    width: 100%; height: 280px;
    object-fit: cover;
}

.purple-icon {
    color: var(--brand-purple);
}
/* --- SIZE CHART WRAPPER --- */
.collapsible-wrapper {
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    margin-top: 25px;
}

.size-dropdown summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    cursor: pointer;
    list-style: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.summary-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* --- SIZE HELP TEXT --- */
.size-help-text {
    font-size: 12px;
    color: #666;
    margin-top: 15px;
    font-style: italic;
    line-height: 1.4;
}

.size-help-text a {
    color: var(--brand-purple);
    text-decoration: underline;
}

/* --- SHARE BUTTON (Immediately Underneath) --- */
.share-inline-container {
    padding: 15px 0;
    display: flex;
    justify-content: flex-start; /* Keeps it left-aligned under the chart */
}

.share-btn-minimal {
    display: flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: none;
    color: var(--brand-purple);
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    cursor: pointer;
    padding: 0;
}

/* --- PURPLE ICONS --- */
.purple-icon {
    stroke: var(--brand-purple);
}
/* --- 1. THE IMAGE GRID --- */
.product-gallery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.product-gallery-grid img:first-child {
    grid-column: span 2;
    width: 100%;
}
.product-gallery-grid img {
    width: 100%; height: auto; object-fit: cover;
}

/* --- 2. PURPLE PILLS --- */
.size-pill.active {
    background-color: var(--brand-purple) !important;
    color: white !important;
    border-color: var(--brand-purple) !important;
}

/* --- 3. CLEAN RECOMMENDATIONS --- */
.product-grid-four {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.product-grid-four a { text-decoration: none; color: inherit; }

/* --- 4. PURPLE ICONS --- */
.purple-icon { stroke: var(--brand-purple); }
/* --- CENTERED SHARE BUTTON --- */
.share-container-centered {
    display: flex;
    justify-content: center; /* Centers the button horizontally */
    width: 100%;
    padding: 30px 0;
    margin-top: 20px;
}

.share-btn-minimal {
    display: flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: none;
    color: var(--brand-purple); /* Uses your brand purple */
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
}

/* --- DROPDOWN ARROW ANIMATION --- */
.dropdown-arrow {
    transition: transform 0.3s ease;
    color: #666;
}

/* This rotates the arrow when the size chart is open */
details[open] .dropdown-arrow {
    transform: rotate(180deg);
}

/* --- PURPLE ICONS --- */
.purple-icon {
    stroke: var(--brand-purple); /* Ensures icons match your website theme */
}

.summary-content {
    display: flex;
    align-items: center;
    gap: 12px;
}
/* --- 1. THE CONTAINER --- */
.product-container {
  display: grid;
  grid-template-columns: 8fr 6fr; /* image side bigger, text closer */
  gap: 20px;                      /* smaller gap */
  padding: 0 40px;
  align-items: start;
}

/* --- 2. THE IMAGE GRID --- */
.product-gallery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two columns for bottom images */
    gap: 10px;
    width: 100%;
}

/* Forces the first image wrapper to be the big one */
.product-gallery-grid .img-zoom-wrapper:first-child {
    grid-column: span 2;
    width: 75%;          /* Matches your original 75% width */
    justify-self: center; /* Centers the big image */
}

.img-zoom-wrapper {
    position: relative; /* REQUIRED: Pins the heart to the image */
    width: 100%;
}

.img-zoom-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- 2. THE HEART ICON (Visibility Fix) --- */
.wishlist-heart {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20; /* Ensures it sits on top of the image */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.wishlist-heart svg {
    width: 22px;
    height: 22px;
    stroke: var(--brand-purple); /* Hollow state */
    transition: 0.3s ease;
}

/* Highlight state when clicked */
.wishlist-heart.active svg {
    fill: var(--brand-purple);
}
/* --- TOAST NOTIFICATION --- */
.toast-message {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(100px); /* Start off-screen */
    background: var(--brand-purple); /* Uses your brand purple */
    color: white;
    padding: 12px 24px;
    border-radius: 30px;
    font-size: 14px;
    z-index: 9999;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s;
    opacity: 0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.toast-message.show {
    transform: translateX(-50%) translateY(0); /* Slide up */
    opacity: 1;
}
/* Force the entire cart page to use Montserrat */
.cart-table, 
.cart-table th, 
.cart-table td, 
.cart-footer-area, 
.cart-item-details h4,
.cart-total-text {
    font-family: 'Montserrat', sans-serif !important;
}

/* Specifically apply Tan Pearl to the "Your cart" heading and item names */
.cart-header h1, 
.cart-item-details h4, 
#cart-grand-total {
    font-family: 'Tan Pearl', serif !important;
    font-weight: 400;
  color: var(--brand-purple);
  /* Tan Pearl usually looks best at 400 */
}

/* Ensure table headers aren't using the default browser serif font */
.cart-table thead th {
    font-family: 'Montserrat', sans-serif !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 12px;
}
/* --- CART & CHECKOUT FONT OVERRIDE --- */

/* 1. Forces the Grand Total "R 0 ZAR" to use Montserrat */
#cart-grand-total, 
.cart-total-text,
#summary-total,
#summary-subtotal,
#summary-shipping {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600; /* Makes the numbers slightly bold and 'straight' */
    letter-spacing: 0.5px;
}

/* 2. Forces the Checkout buttons to be Montserrat */
.btn-checkout, 
#checkout-btn, 
button[onclick="placeOrder()"] {
    font-family: 'Montserrat', sans-serif !important;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 1.5px;
}

/* 3. Ensures the Checkout page labels and form fields match */
.order-summary-aside p,
.summary-price,
.shipping-option label,
.form-group label,
input, 
select {
    font-family: 'Montserrat', sans-serif !important;
}
/* Specifically target the Cart Page Title */
.cart-table-container h1, 
h1.tan-pearl,
.cart-header h1 {
    font-family: 'Tan Pearl', serif !important;
    text-transform: none; /* Keeps it elegant */
    color: var(--brand-purple);
}
/* Collapsible Styles */
.collapsible-wrapper {
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 10px;
}

.collapsible-btn {
    width: 100%;
    background: none;
    border: none;
    padding: 15px 0;
    text-align: left;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    color: var(--text-dark);
}

.collapsible-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.collapsible-content.active {
    max-height: 500px; /* Adjust as needed */
}

/* Care Section Specifics */
.care-info-box {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 0;
}

.washing-machine-icon {
    width: 30px;
    height: 30px;
    stroke: var(--brand-purple);
}

#care-info-text {
    font-size: 14px;
    color: #666;
}
/* --- MY STORY PAGE STYLES --- */

/* Makes the banner stretch across the screen nicely */
.story-banner {
    width: 100%;
    text-align: center; /* Centers inline elements */
    padding: 20px 0;    /* Adds space above and below the banner */
}

/* --- UPDATED MY STORY STYLES --- */

.banner-img {
    width: 60%;
    /* Remove max-height to prevent stretching */
    height: auto; 
    display: block;
    margin: 0 auto;
    /* This ensures the image stays crisp */
    image-rendering: -webkit-optimize-contrast; 
}

.container-narrow {
    max-width: 700px;
    margin: 0 auto;
    padding: 40px 20px 80px 20px;
    text-align: center;
}

/* Make all text in the story section purple */
.container-narrow h1, 
.container-narrow p {
    color: var(--brand-purple) !important;
}

.container-narrow p {
    margin-bottom: 25px;
    font-size: 18px; /* Slightly larger for better elegance */
    line-height: 1.8;
    font-weight: 400;
}
/* FIXED ANNOUNCEMENT BAR */
/* ================= COMPLETE MOBILE OPTIMIZATION ================= */

@media (max-width: 768px) {
    /* 1. Fix Header Height for Mobile */
    body {
        padding-top: 130px; /* Reduced offset for smaller mobile bars */
    }

    .nav {
        padding: 10px 20px;
        height: 70px;
    }

    .announcement-bar {
        top: 70px; /* Keeps it flush with shorter mobile nav */
        padding: 8px 5px;
    }

    /* 2. Fix Skinny Images & Product Alignment */
    .product-container {
        grid-template-columns: 1fr; /* Stack images and details */
        gap: 20px;
        padding: 15px;
    }

    .product-gallery-grid {
        display: flex;
        flex-direction: column; /* Stack gallery images vertically */
        width: 100%;
    }

    .product-gallery-grid img {
        width: 100% !important;
        height: auto !important; /* Prevents "skinny" or stretched look */
        object-fit: cover;
    }

    /* 3. Product Details Alignment */
    .details {
        text-align: left;
    }

    .pill-container {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    /* 4. Action Buttons (Cart/Wishlist) */
    .details button {
        width: 100%; /* Full width buttons are easier to tap on mobile */
        margin: 10px 0;
    }

    /* 5. Navigation Links Slide-in */
    .nav-links {
        position: fixed;
        left: -100%;
        top: 0;
        width: 80%;
        height: 100vh;
        background: white;
        flex-direction: column;
        padding: 100px 30px;
        transition: 0.4s ease-in-out;
        z-index: 2001;
        box-shadow: 10px 0 20px rgba(0,0,0,0.1);
    }

    .nav-links.active {
        left: 0;
    }

    /* 6. Logo & Icons resizing */
    .logo-img {
        height: 35px;
    }

    .icons {
        gap: 12px;
    }

    .icon svg {
        width: 20px;
        height: 20px;
    }
}
/* Specific Optimization for Recommendation Sections */
@media (max-width: 768px) {
    /* Targets the container for 'You May Also Like' or 'New Arrivals' */
    .products {
        display: flex !important;
        flex-direction: column !important; /* Stacks products vertically */
        align-items: center !important;
        gap: 30px !important; /* Space between products */
        padding: 20px !important;
    }

    .product-card {
        width: 90% !important; /* Makes the card almost full width */
        max-width: 400px !important;
        text-align: center !important;
    }

    .product-card img {
        width: 100% !important;
        height: auto !important; /* Lets the image show its full shape */
        aspect-ratio: 3 / 4;    /* Keeps a professional portrait shape */
        object-fit: cover !important;
        border-radius: 8px;
    }
}
/* ================= UPDATED CHECKOUT MOBILE OPTIMIZATION ================= */

@media (max-width: 768px) {
    /* Center the main container and remove side-by-side behavior */
    .checkout-layout {
        display: flex;
        flex-direction: column; /* This puts Contact/Address first */
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        padding: 10px;
    }

    /* Force the main form section to be centered and full width */
    .checkout-layout > section {
        width: 100%;
        margin: 0 auto;
        padding: 0 5px;
    }

    /* Move Order Summary to the very bottom */
    .order-summary-aside {
        order: 2; /* Moves this section after the form */
        width: 100%;
        position: static;
        margin-top: 40px; /* Adds space after the payment details */
        background: #fdfdfd;
        padding: 20px;
        border: 1px solid var(--border-light);
    }

    /* Ensure form inputs are centered and full width */
    .checkout-input, 
    .address-grid input,
    .address-grid select {
        width: 100% !important;
        margin-left: 0;
        margin-right: 0;
        display: block;
    }

    /* Fix the First/Last name side-by-side issue on small screens */
    .address-grid div {
        flex-direction: column;
        gap: 0;
    }
}
/* Update Navigation Icons to Brand Purple */
.icons .icon svg {
    fill: var(--brand-purple);   /* Fills the heart, cart, and account head */
    stroke: var(--brand-purple); /* Sets the outline for the search and account body */
    stroke-width: 1px;           /* Optional: Adjusts the thickness of the outlines */
    transition: color 0.3s ease; /* Smooth transition if you add hover effects */
}

/* Optional: Change color when hovering over the icon */
.icons .icon:hover svg {
    fill: var(--text-dark); 
    stroke: var(--text-dark);
}
/* Target headings and links specifically on the Account/Create Account pages */
.account-container h2, 
.account-container h1,
.account-form label,
.account-links a {
    color: var(--brand-purple) !important;
}

/* If the "Create Account" text is a specific button or link */
.create-account-btn, 
.toggle-account-form {
    color: var(--brand-purple) !important;
}
/* Toast Notification Style */
.toast-notification {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #301934; /* Your Brand Purple */
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    z-index: 10000;
    font-size: 14px;
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from { bottom: -50px; opacity: 0; }
    to { bottom: 20px; opacity: 1; }
}
/* This tells the browser to respect the spaces and line breaks from your JS */
/* This makes the browser show the line breaks you typed in your JS */
.product-description, 
#product-description {
    white-space: pre-line;
    margin-bottom: 20px;
    display: block;
}
/* Fix for the Hero to touch the top and cover full width */

/* Remove underline from the link text */
/* TRIPLE HERO - Full screen width and starts below nav */
.hero-triple {
    display: flex;
    width: 100vw;           /* Full browser width */
    height: 85vh;          /* Height of the hero section */
    margin-left: calc(50% - 50vw); /* Centers it perfectly if there is container padding */
    margin-top: 0;          /* Removes the "pushed up" gap */
    overflow: hidden;
    padding: 0 !important;  /* Force remove any section padding */
}

.hero-column {
    flex: 1;
    height: 100%;
}

.hero-column img {
    width: 100%;
    height: 100%;
    object-fit: cover;     /* Ensures images fill their slice without stretching */
    display: block;
}

/* Ensure the main container doesn't restrict the hero width */
main {
    overflow-x: hidden;
}
/* --- 1. REMOVE UNDERLINE & FIX LINK --- */
.gateway-link {
    text-decoration: none !important; /* Forces the underline to vanish */
    border: none !important;
    outline: none !important;
    display: block;
    text-align: center;
}

.gateway-text {
    margin-top: 20px;
    color: #301934;
    font-family: 'Tan Pearl', serif; /* Keeps your branding */
    text-decoration: none !important; /* Double-check no underline on text */
    letter-spacing: 2px;
}

/* --- 2. MAKE GATEWAY IMAGE SMALLER --- */
.gateway-image {
    width: 60%;        /* Changed from 90% to 60% to make it smaller as requested */
    max-width: 800px;
    border-radius: 4px;
    display: block;
    margin: 0 auto;
    transition: transform 0.3s ease;
}

.gateway-link:hover .gateway-image {
    transform: scale(1.02); /* Slight zoom on hover */
}

/* --- 3. FIX HERO SECTION (Full Width & Touching Top) --- */
.hero-triple {
    display: flex;
    width: 100vw;           /* Viewport Width - covers entire screen edge to edge */
    height: 80vh;           /* Adjust height as needed */
    margin-left: calc(50% - 50vw); /* Centers it and ignores parent padding */
    margin-top: -30px;      /* Pulls it up to meet the nav/announcement bar */
    padding: 0 !important;
}

.hero-column {
    flex: 1;
    height: 100%;
}

.hero-column img {
    width: 100%;
    height: 100%;
    object-fit: cover;      /* Prevents stretching */
}

/* --- 4. FLIPPED ANNOUNCEMENT BAR (White bg, Purple text) --- */
.announcement-bar {
    background-color: #ffffff !important;
    color: #301934 !important;
    border-bottom: 1px solid #301934;
    padding: 10px 0;
}
/* Force all header icons and their paths to be Brand Purple */
/* FORCE SEARCH ICON TO BE PURPLE */
.icons .icon svg, 
.icons .icon svg path, 
.icons .icon svg circle, 
.icons .icon svg line {
    stroke: var(--brand-purple) !important;
    fill: none !important; /* Ensures it stays an outline icon */
}

/* Specifically for the handle/line of the search icon */
.icons .icon svg line {
    stroke: var(--brand-purple) !important;
}

/* Hover effect to make it feel interactive */
.icons .icon:hover svg {
    opacity: 0.7;
    transform: scale(1.1);
    transition: 0.3s ease;
}
@media (max-width: 768px) {
    /* Stack hero images vertically on mobile */
    .hero-triple {
        flex-direction: column;
        height: auto; /* Allow height to grow with stacked images */
        margin-top: 0;
    }

    .hero-triple div {
        width: 100%;
        height: 40vh; /* Each image takes up 40% of the screen height */
    }

    .hero-triple img {
        height: 100%;
        object-fit: cover;
    }
}

@media (max-width: 768px) {
    body {
        padding-top: 140px; /* Adjust this based on your header height */
    }
}
/* Ensure all headings use Brand Purple */
h1, h2, h3, h4, .tan-pearl {
    color: var(--brand-purple) !important;
}

/* Ensure price text and totals use Brand Purple */
.summary-price, 
#summary-total, 
#cart-grand-total,
.cart-total-text strong {
    color: var(--brand-purple) !important;
}

/* Ensure navigation links use Brand Purple */
.nav-links a {
    color: var(--brand-purple);
    text-decoration: none;
}

/* Specific fix for the 'Continue shopping' link if it looks black */
a[href="products.html"] {
    color: var(--brand-purple) !important;
}