/* ---------------------- */
/* WAVE SECTION           */
/* ---------------------- */
.wave-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  z-index: 1;
  margin-top: -30px;
}

.wave-container svg {
  display: block;
  width: 100%;
  height: 100px;
  transform: scaleX(1.05);
}

/* ---------------------- */
/* GENERAL TEXT STYLES    */
/* ---------------------- */
.logo span {
  font-family: 'Dancing Script', cursive;
  color: white;
  white-space: nowrap;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  line-height: 1;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: 'Shadows Into Light', cursive;
  font-size: 3rem;
  color: #e61e29;
}

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

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}


.admin-menu a {
    color: #4d0000 !important;
    font-weight: 600;
}

.admin-menu a:hover {
    color: #e61e29 !important;
}



/* ---------------------- */
/* NAVBAR                 */
/* ---------------------- */
.navbar {
  display: flex;
  justify-content: space-between; /* pushes left + right apart */
  align-items: center;
  background-color: #e61e29;
  padding: 0.1rem 1rem;
  position: relative;
  z-index: 2;
}

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

.logo span {
  font-family: 'Dancing Script', cursive;
  color: white;
  white-space: nowrap;
  font-size: clamp(2rem, 7vw, 3rem);
  line-height: 1.1;
}

.menu {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.menu a {
  position: relative;
  font-size: 1rem;
  color: white;
  font-weight: 300;
  transition: color 0.3s ease;
}

/* underline animation */
.menu a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background-color: #fff;
  transition: width 0.3s ease;
}

.menu a:hover {
  color: #ffb3b3;
  text-shadow: 0 0 6px rgba(230, 30, 41, 0.4);
}

.menu a:hover::after {
  width: 100%;
  background-color: #e61e29;
}

/* ---------------------- */
/* DROPDOWN MENU          */
/* ---------------------- */
.dropdown {
  position: relative;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 180px;
  background-color: white;
  border: 1px solid #ff4d4d;
  border-radius: 5px;
  overflow: hidden;
  z-index: 1000;
}

.dropdown-content a {
  display: block;
  padding: 0.5rem 1rem;
  color: #4d0000;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.dropdown-content a:hover {
  background-color: #e61e29;
  color: white;
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
}

.dropdown:hover .dropdown-content {
  display: block;
}

/* ---------------------- */
/* HERO SECTION           */
/* ---------------------- */
.hero {
  text-align: center;
  padding: 3.5rem 0 0.5rem; /* reduced lower pink area */
  background-color: #ffe6e6;
  border-bottom: 5px solid #e61e29;
  position: relative;
  z-index: -1;
  margin-top: -80px; /* adjust wave overlay */
}



.hero .heart {
  position: absolute;
  font-size: var(--size, 1.5rem);
  color: #f95e66;
  pointer-events: none;
  opacity: 0;
  animation: fallingHearts 8s linear infinite;
  animation-delay: var(--delay);
  left: calc(var(--random-x) * 100vw);
}

@keyframes fallingHearts {
  0% { top: -15%; transform: translateX(0px) rotate(0deg); opacity: 1; }
  15% { transform: translateX(-20px) rotate(-10deg); }
  30% { transform: translateX(35px) rotate(12deg); }
  45% { transform: translateX(15px) rotate(-6deg); }
  60% { transform: translateX(-40px) rotate(15deg); }
  75% { transform: translateX(-10px) rotate(-8deg); }
  100% { top: 110%; transform: translateX(25px) rotate(5deg); opacity: 0; }
}

.hero h1 {
  font-size: 3rem;
  color: #e61e29;
}

/*
.hero p {
  font-size: 1.2rem;
  margin-top: 1rem;
}
*/

/* Match hero title font on both pages */
.hero h1 {
    font-family: 'Shadows Into Light', cursive !important;
    font-size: 3rem !important;
    color: #e61e29 !important;
    text-align: center;
}


.hero button {
  margin-top: 1.5rem;
  padding: 0.8rem 2rem;
  font-size: 1.1rem;
  font-weight: bold;
  color: white;
  background-color: #e61e29;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.hero button:hover {
  background-color: #e60000;
}

/* ---------------------- */
/* FEATURED PRODUCTS      */
/* ---------------------- */
.featured {
  padding: 3rem 0;
  text-align: center;
}

.featured h2 {
  font-family: 'Dancing Script', cursive;
  font-size: 2.8rem;
  color: #e61e29;
  margin-bottom: 2rem;
  text-shadow:
    -2px -2px 0 #fff,
     2px -2px 0 #fff,
    -2px  2px 0 #fff,
     2px  2px 0 #fff,
     0 0 12px rgba(255,255,255,0.8),
     0 0 18px rgba(255,255,255,0.5);
}


.featured h2::after {
  content: "";
  display: block;
  width: 120px;
  height: 3px;
  background-color: #e61e29;
  margin: 0.5rem auto 0;
  border-radius: 2px;
}

.products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  justify-items: center;
  margin-top: 2rem;
}

.product-card {
  max-width: 300px;
  background-color: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: transform 0.3s;

  /* Add these lines */
  display: flex;
  flex-direction: column;
  height: 350px; /* uniform height */
  justify-content: space-between;
}

.product-card:hover {
  transform: translateY(-10px);
}

.product-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.product-card h3 {
  font-size: 1.5rem;
  color: #e61e29;
  margin: 1rem;
}

.product-card p {
  font-size: 0.9rem;
  margin: 0 1rem 1rem;
  color: #4d4d4d;

  flex-grow: 1; /* pushes button to bottom */
}


.product-card button {
  width: 100%;
  padding: 0.8rem 0;
  font-size: 1rem;
  font-weight: bold;
  color: white;
  background-color: #e61e29;
  border: none;
  border-radius: 0 0 10px 10px;
  cursor: pointer;
}

.product-card button:hover {
  background-color: #e60000;
}

/* ---------------------- */
/* FOOTER                 */
/* ---------------------- */
.footer {
  text-align: center;
  background-color: #e61e29;
  color: white;
  padding: 2rem 0;
  margin-top: 3rem;
}

.footer p {
  margin: 0.5rem 0;
}

.footer a {
  color: white;
  font-weight: bold;
}

/* ---------------------- */
/* MOBILE STYLES          */
/* ---------------------- */
@media (max-width: 768px) {

  .navbar {
    flex-direction: column;
    align-items: center;
    padding: 1rem;
  }

  .logo {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    margin: 0 auto;
  }

  .menu {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    text-align: center;
    width: 100%;
    margin: 0 auto;
    position: static;
  }

  .hero h1 {
    font-size: 2rem;
  }
  
  .product-card {
    height: auto !important;
  }

  .product-card img {
    height: 180px;
  }

  .product-card h3 {
    font-size: 1.2rem;
  }

  .product-card button {
    width: 100%;
  }

}

/* ---------------------- */
/* PAGE TITLE STYLES      */
/* ---------------------- */
.page-title-wrapper {
  text-align: center !important;
  width: 100%;
}

.page-title {
  display: inline-block !important;
  font-family: 'Dancing Script', cursive !important;
  font-size: 2.8rem !important;
  color: #e61e29 !important;
  margin: 0.6rem auto 0.4rem !important;
  text-shadow:
    -1px -1px 0 #fff,
     1px -1px 0 #fff,
    -1px  1px 0 #fff,
     1px  1px 0 #fff,
     0 0 8px rgba(255,255,255,0.6) !important;
}

.page-title::after {
  content: "";
  display: block;
  width: 120px;
  height: 3px;
  background-color: #e61e29;
  margin: 0.5rem auto 0;
  border-radius: 2px;
}

h1.page-title, .page-title-wrapper h1.page-title {
  text-align: center !important;
  font-family: 'Dancing Script', cursive !important;
}

.hero-title-section {
  text-align: center;
  padding-top: 2rem;
  padding-bottom: 0.5rem;
}


/* ---------------------- */
/* SEARCH WRAPPER STYLES    */
/* ---------------------- */
/* Centers the entire block */
/* Main wrapper */
.search-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 40px;
    margin-bottom: 40px;
}

/* Clean relative box to hold icon + input */
.search-box {
    position: relative;
    width: 75%;
    max-width: 380px;
}

/* Main input */
.search-input {
    width: 100%;
    padding: 0.9rem 1rem;
    padding-left: 3.2rem;

    font-size: 1rem;
    border-radius: 50px;
    border: 2px solid rgba(230, 30, 41, 0);  /* invisible border */

    background: #ffffff;
    outline: none;

    /* smooth transitions */
    transition:
        border-color 0.35s ease,
        box-shadow 0.35s ease,
        transform 0.25s ease,
        background-color 0.3s ease;

    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* Focused input */
.search-box:focus-within .search-icon {
    transform: translateY(-50%) scale(1.12);
    background-color: #d40c1c;
}


/* Placeholder animation */
.search-input::placeholder {
    color: #999;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.search-input:focus::placeholder {
    transform: translateX(4px);
    opacity: 0.65;
}

/* Search icon (left side bubble) */
/* Icon normal state */
.search-icon {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    background: #e61e29;
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    transition: 
        transform 0.25s ease,
        background-color 0.3s ease;
}

/* Icon animation when typing */
.search-box:focus-within .search-icon {
    transform: translateY(-50%) scale(1.12);
    background-color: #d40c1c;
}


@keyframes iconPulse {
    0%   { transform: translateY(-50%) scale(1); }
    50%  { transform: translateY(-50%) scale(1.15); }
    100% { transform: translateY(-50%) scale(1); }
}

.search-icon.typing {
    animation: iconPulse 0.35s ease-out;
}

@keyframes iconPulseFancy {
    0% {
        transform: translateY(-50%) scale(1) rotate(0deg);
        box-shadow: 0 0 0 rgba(230, 30, 41, 0);
    }
    30% {
        transform: translateY(-50%) scale(1.18) rotate(-8deg);
        box-shadow: 0 0 8px rgba(230, 30, 41, 0.4);
    }
    60% {
        transform: translateY(-50%) scale(1.12) rotate(6deg);
        box-shadow: 0 0 5px rgba(230, 30, 41, 0.3);
    }
    100% {
        transform: translateY(-50%) scale(1) rotate(0deg);
        box-shadow: 0 0 0 rgba(230, 30, 41, 0);
    }
}

/* When typing */
.search-icon.typing {
    animation: iconPulseFancy 0.8s ease-out;
}




@media (min-width: 769px) {
    .menu {
        left: 7.2rem;
    }
}

@media (max-width: 768px) {
    .menu {
        left: 0 !important;
    }
    
}




html, body {
    overflow-x: hidden !important;
    width: 100% !important;
}

img, svg {
    max-width: 100%;
    height: auto;
    display: block;
}

.wave-container svg {
    width: 100% !important;
}





/* glen */

/* ---------------------- */
/* WIDE PRODUCT CARD (USED IN PRODUCT.PHP) */
/* ---------------------- */

.product-card-wide {
    max-width: 580px;
    width: 100%;
    padding: 20px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    margin-bottom: 30px;
}

.product-card-wide .big-image {
    width: 100%;
    height: 330px;
    object-fit: cover;
    border-radius: 12px;
}

/* Thumbnails (wide version) */
.thumb-row {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 15px;
}

.thumbnail {
    width: 70px;
    height: 70px;
    border-radius: 10px;
    object-fit: cover;
    cursor: pointer;
    border: 2px solid transparent;
    transition: 0.2s;
}

.thumbnail:hover {
    border-color: #e61e29;
}

/* Title + Code (wide product) */
.title-centered {
    text-align: center;
    font-size: 1.4rem;
    font-weight: 600;
    margin-top: 20px;
    margin-bottom: 5px;
    color: #e61e29;
}

.code-centered {
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 15px;
}

/* Long description for WIDE product */
.desc-left {
    text-align: left;
    font-size: 1rem;
    line-height: 1.5rem;
    color: #444;
}





/* ---------------------- */
/* SINGLE PRODUCT CARD PAGE */
/* ---------------------- */

.products-single {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 40px !important;
}

.product-card-single {
    width: 100%;
    max-width: 620px;
    background: #fff;
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.big-image-single {
    width: 100%;
    height: 350px;
    object-fit: contain;
    background: #fff;
    border-radius: 12px;
}

.thumb-row-single {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 15px;
}

.thumbnail-single {
    width: 75px;
    height: 75px;
    object-fit: cover;
    border-radius: 10px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: 0.2s ease;
}

.thumbnail-single:hover {
    border-color: #e61e29;
}

.title-centered-single {
    text-align: center;
    font-size: 1.4rem;
    font-weight: 600;
    margin-top: 20px;
    margin-bottom: 5px;
    color: #e61e29;
    font-family: 'Shadows Into Light', cursive;
}

.code-centered-single {
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 15px;
}

.desc-left-single {
    text-align: left;
    font-size: 1rem;
    line-height: 1.55rem;
    white-space: pre-line;
    color: #333;
}

/* Mobile adjustments */
@media (max-width: 600px) {
    .product-card-single {
        max-width: 95%;
        padding: 15px;
    }
    
    .big-image-single {
        height: 260px;
    }

    .thumbnail-single {
        width: 60px;
        height: 60px;
    }
}



/* ---------------------- */
/* VIEW_MORE.PHP — PRODUCT CARDS (THE 3-CARD GRID) */
/* ---------------------- */

.vm-products {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 40px !important;
}

/* VIEW_MORE card container */
.vm-card {
    width: 100%;
    max-width: 620px;
    background: #fff;
    border-radius: 14px;
    padding: 20px;
    padding-bottom: 0 !important;   /* important: allows red box to reach bottom */
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    position: relative;
    overflow: hidden;
}


/* Large image inside each VM card */
.vm-big-wrapper {
    width: 100%;
}

.vm-big {
    width: 100%;
    height: 350px;
    object-fit: contain;
    border-radius: 12px;
}

/* Thumbnails */
.vm-thumbs {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 15px;
}

.vm-thumb {
    width: 75px;
    height: 75px;
    object-fit: cover;
    border-radius: 10px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: 0.2s;
}

.vm-thumb:hover {
    border-color: #e61e29;
}

/* Text section */
/* Match product card titles with lovebites.php */
.vm-title {
    font-family: 'Shadows Into Light', cursive !important;
    font-size: 1.4rem !important;
    color: #e61e29 !important;
    text-align: center;
}


.vm-code {
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 15px;
}

/* Red long description box */
.vm-desc {
    background: #e61e29 !important;
    color: #fff !important;

    padding: 16px 18px !important;

    /* This makes it flush left, right, and bottom: */
    margin: 20px -20px -20px -20px !important;
    /*      top   right  bottom  left    */

    border-radius: 0 0 14px 14px !important;
    font-size: 0.9rem !important;
    line-height: 1.45rem !important;
    box-sizing: border-box;
}


/* ---------------------- */
/* Desktop — 3 cards per row */
/* ---------------------- */

@media (min-width: 1024px) {

    .vm-products {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px !important;
        justify-items: center !important;
        align-items: start !important;
    }

    .vm-card,
    .product-card-wide,
    .product-card-single {
        max-width: 300px !important;
        padding: 15px !important;
    }

    .vm-big,
    .big-image,
    .big-image-single {
        height: 180px !important;
        object-fit: contain !important;
    }

    .vm-thumb,
    .thumbnail,
    .thumbnail-single {
        width: 55px !important;
        height: 55px !important;
    }
}


.vm-desc {
    position: relative;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

/* Collapsed (one-line red box) */
.vm-desc-collapsed {
    max-height: 40px !important;
}

/* Expanded */
.vm-desc-expanded {
    max-height: 500px !important;
}

.vm-desc-full {
    display: none;
}

.vm-desc-toggle {
    cursor: pointer;
    font-weight: bold;
    text-decoration: underline;
}


/* Collapsible red box container */
/* Center content horizontally */
/* Center one-line collapsed bar */
/* Make the red bar span the full card width */
.vm-desc {
    margin-left: -20px !important;
    margin-right: -20px !important;

    width: calc(100% + 40px) !important; 
    border-radius: 0 0 14px 14px !important;

    justify-content: center;
    display: flex;
    gap: 10px;

    white-space: nowrap;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}

/* Collapsed height (one line) */
.vm-desc-collapsed {
    max-height: 62px !important;
}

/* Expanded state */
.vm-desc-expanded {
    max-height: 500px !important;
    white-space: normal;        /* <<< allow full text to wrap below */
    flex-wrap: wrap;            /* <<< full text drops to next row */
}

/* Full text hidden initially */
.vm-desc-full {
    display: none;
    width: 100%;
    margin-top: 10px;
}

/* Modern button */
.vm-desc-toggle {
    background: #ffffff;
    color: #e61e29;
    border: 1px solid #e61e29;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;

    transition: all 0.2s ease;
}

.vm-desc-toggle:hover {
    background: #ffe6e6;
}


.vm-desc-toggle:active {
    transform: scale(0.96);
}


.vm-desc {
    align-items: center;
    justify-content: center;   /* center horizontally */
    gap: 10px;                 /* spacing between button + short text */
    text-align: center;        /* ensure text centers inside */
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}


@media (max-width: 420px) {
  .vm-desc-short {
    font-size: 0.85rem; /* slightly smaller so it fits */
  }
  .vm-desc-toggle {
    padding: 3px 8px;   /* smaller button on tiny screens */
  }
}

/* Description box (collapsed by default) */
.vm-desc {
    background: #e61e29;
    color: #fff;
    padding: 20px;
    border-radius: 0 0 12px 12px;
    margin-top: 12px;

    max-height: 0;
    overflow: hidden;
    opacity: 0;

    transition: all 0.45s ease;
}

/* Expanded state */
.vm-desc.open {
    max-height: 800px; /* enough to display full text */
    opacity: 1;
}

/* Read Description button */
.vm-desc-toggle {
    display: block;
    margin: 0 auto;
    margin-top: 15px;
    padding: 8px 18px;

    background: #ffffff;
    color: #e61e29;
    border: 2px solid #e61e29;
    border-radius: 30px;

    font-size: 0.9rem;
    font-weight: 600;

    cursor: pointer;
    transition: 0.25s ease;
}

.vm-desc-toggle:hover {
    background: #e61e29;
    color: #ffffff;
}


/* Description box (hidden by default) */
.vm-desc {
    background: #e61e29;
    color: #fff;
    padding: 18px;
    border-radius: 0 0 12px 12px;
    margin-top: 15px;

    max-height: 0;
    overflow: hidden;
    transition: max-height 0.45s ease;
}

/* When open */
.vm-desc.open {
    max-height: 600px; /* enough for long text */
}

/* Read Description button */
.vm-desc-toggle {
    display: block;
    margin: 12px auto 0 auto;
    padding: 8px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    background: white;
    color: #e61e29;
    border: 2px solid #e61e29;
    border-radius: 25px;
    cursor: pointer;
    transition: 0.2s ease;
}

.vm-desc-toggle:hover {
    background: #e61e29;
    color: white;
}


/* Fix long description only showing 1 line */
.vm-desc {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    line-height: 1.45rem !important;
}


/* Make expanded description text left aligned */
.vm-desc {
    text-align: left !important;
}


/* Mobile fix — allow full expansion for long descriptions */
@media (max-width: 600px) {
    .vm-desc.open {
        max-height: 1200px !important; /* enough to show full text */
    }

    .vm-desc {
        padding: 20px !important;   /* more breathing room */
        line-height: 1.5rem !important;
    }
}

/* Extra space at bottom of the expanded description */
.vm-desc {
    padding-bottom: 12px !important; /* increased bottom padding */
}



@media (max-width: 600px) {
    .vm-desc {
        padding-bottom: 28px !important; /* slightly larger on mobile */
    }
}


/* Read Description button — red design */
.vm-desc-toggle {
    display: block;
    margin: 12px auto 0 auto;
    padding: 10px 22px;
    font-size: 0.9rem;
    font-weight: 600;

    background: #e61e29 !important;   /* Lovebites red */
    color: #fff !important;

    border: none !important;
    border-radius: 25px;
    cursor: pointer;

    transition: background 0.25s ease, transform 0.15s ease;
}

.vm-desc-toggle:hover {
    background: #c30f1e !important;  /* darker red */
    color: #fff !important;
    transform: translateY(-2px);
}

/* Remove underline from Read Description button */
.vm-desc-toggle {
    text-decoration: none !important;
}




/* Exploding hearts + sparkles */
.heart-pop {
    position: absolute;
    font-size: 1.3rem;
    color: #ff6b81;
    pointer-events: none;
    opacity: 0;
    filter: drop-shadow(0 0 4px rgba(255,100,120,0.8));
    animation: popHeart 1s ease-out forwards;
}

/* Floating hearts after pop */
.heart-float {
    position: absolute;
    font-size: 1.1rem;
    color: #ff7a93;
    pointer-events: none;
    opacity: 0.9;
    animation: floatHeart 2.5s ease-out forwards;
    filter: drop-shadow(0 0 6px rgba(255,150,170,0.8));
}

/* Sparkle particles */
.sparkle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 230, 230, 0.9);
    pointer-events: none;
    animation: sparkleFade 1.2s ease-out forwards;
    filter: blur(1px);
}

@keyframes popHeart {
    0% { transform: translate(0,0) scale(0.4); opacity: 1; }
    60% { opacity: 1; }
    100% { transform: translate(var(--x), var(--y)) scale(var(--scale)); opacity: 0; }
}

@keyframes floatHeart {
    0% { transform: translate(0,0) scale(0.8); opacity: 1; }
    100% { transform: translate(0, -60px) scale(1.3); opacity: 0; }
}

@keyframes sparkleFade {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.3); }
}


/* FINAL CLEAN vm-big (desktop + animation combined) */
.vm-big {
    width: 100%;
    height: 230px;             /* keep image fully visible */
    object-fit: contain;
    background-color: #fff;

    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.vm-big.loaded {
    opacity: 1;
    transform: scale(1);
}



/* ===========================
   Force homepage typography match
   =========================== */

/* Make hero title identical to homepage */
.hero h1,
.page-title, 
.page-title-wrapper h1.page-title {
  font-family: 'Dancing Script', cursive !important;   /* match homepage script */
  font-size: clamp(2.4rem, 5vw, 3rem) !important;     /* responsive size like homepage */
  color: #e61e29 !important;
  line-height: 1 !important;
  text-align: center !important;
  margin: 0.6rem auto 0.4rem !important;
  text-shadow:
    -1px -1px 0 #fff,
     1px -1px 0 #fff,
    -1px  1px 0 #fff,
     1px  1px 0 #fff,
     0 0 8px rgba(255,255,255,0.6) !important;
}

/* Match product card title font used on homepage cards */
.vm-title,
.featured .products .product-card h3,
.product-card h3 {
  font-family: 'Shadows Into Light', cursive !important; /* card title script */
  font-size: 1.35rem !important;
  color: #e61e29 !important;
  text-align: center !important;
  margin-top: 12px !important;
}

/* Ensure short description text in cards uses the same humanist font/weight as homepage */
.vm-code,
.product-card .meta p:not(.vm-title),
.vm-desc-short,
.vm-desc-toggle {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 400 !important;
  color: #4d0000 !important;
}

/* Safety: prevent other rules from changing hero on view_more */
.view-more-hero-fix .hero h1 { /* optional helper class if needed */
  font-family: 'Dancing Script', cursive !important;
}

/* If you still see differences, try a hard refresh (Ctrl+F5) to clear cached CSS */



/* ===========================
   Match short description font with homepage cards
   =========================== */

/* Force product title in view_more.php to match homepage 
.vm-title {
    font-family: 'Shadows Into Light', cursive !important;
    font-size: 1.8rem !important;
    color: #e61e29 !important;
    font-weight: 400 !important;
    text-align: center !important;

    text-shadow:
      -1px -1px 0 #fff,
       1px -1px 0 #fff,
      -1px  1px 0 #fff,
       1px  1px 0 #fff,
       0 0 8px rgba(255,255,255,0.6) !important;
}

*/


/* FORCE vm-title to match lovebites.php card titles */
.vm-card .vm-title {
    font-family: 'Shadows Into Light', cursive !important;
    font-size: 1.4rem !important;
    font-weight: 600 !important;
    color: #e61e29 !important;
    text-align: center !important;
}




/* FINAL OVERRIDE — force card title match */
.vm-title {
    font-family: 'Shadows Into Light', cursive !important;
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    color: #e61e29 !important;
    letter-spacing: 0.5px !important;
    text-align: center !important;

    text-shadow:
        -1px -1px 0 #fff,
         1px -1px 0 #fff,
        -1px  1px 0 #fff,
         1px  1px 0 #fff,
         0 0 8px rgba(255,255,255,0.6) !important;
}



/* HARD FIX — prevent Poppins override */
.vm-text .vm-title,
.vm-card .vm-title,
.vm-title {
   font-family: 'Shadows Into Light', cursive !important;
   font-weight: 600 !important;
   font-size: 1.5rem !important;
   color: #e61e29 !important;
}



/* NEW isolated title styling for view_more.php */
.vm-title2 {
    font-family: 'Shadows Into Light', cursive !important;
    font-size: 1.45rem !important;
    color: #e61e29 !important;
    font-weight: 600 !important;
    text-align: center !important;

    text-shadow:
        -1px -1px 0 #fff,
         1px -1px 0 #fff,
        -1px  1px 0 #fff,
         1px  1px 0 #fff,
         0 0 6px rgba(255,255,255,0.6) !important;

    margin-top: 12px;
    margin-bottom: 6px;
}


/* FINAL FORCE — Use Brush Script MT for view_more.php titles */
.brush-title {
    font-family: "Brush Script MT", cursive !important;
    font-size: 1.8rem !important;
    font-weight: normal !important;
    color: #e61e29 !important;
    text-align: center !important;
    letter-spacing: 0.5px !important;

    text-shadow:
        -1px -1px 0 #fff,
         1px -1px 0 #fff,
        -1px  1px 0 #fff,
         1px  1px 0 #fff,
         0 0 8px rgba(255,255,255,0.6) !important;
}


/* FINAL FIX — ensure Read Description text is always white */
.vm-desc-toggle {
    color: #ffffff !important;
}

.vm-desc-toggle:hover {
    color: #ffffff !important;
}


/* NEW FORMAT FOR MOBILE SHORTER WIDTH - GLEN */

/* Mobile: card not full width */
@media (max-width: 600px) {
    .vm-card {
        width: 90% !important;
        max-width: 360px !important;
        margin: 0 auto 25px auto !important;
    }
}


/* NEW FORMAT FOR TABLET, TWO CARDS PER ROW - GLEN */
/* Tablet: 2 cards per row */
@media (min-width: 601px) and (max-width: 1023px) {
    .vm-products {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
        justify-items: center !important;
    }

    .vm-card {
        max-width: 420px !important;
    }
}



/* ==== MOBILE SMALLER CARD WIDTH (FINAL OVERRIDE) ==== */
@media (max-width: 600px) and (orientation: landscape) {
    .vm-card {
        width: 90% !important;        /* not full width */
        max-width: 360px !important;  /* prevent huge card */
        margin: 20px auto !important; /* center the card */
        border-radius: 20px !important;
    }
}



/* ==== TABLET GRID: 2 CARDS PER ROW ==== */
@media (min-width: 600px) and (max-width: 1023px) and (orientation: landscape) {
    .vm-products {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 25px !important;
    }

    .vm-card {
        max-width: 320px !important;
        margin: 0 auto !important;
    }
}



/* ===============================
   FINAL OVERRIDES FOR LAYOUT
   =============================== */

/* MOBILE: 1 centered card */
@media (max-width: 600px) {

    .vm-products {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .vm-card {
        width: auto !important;           /* cancel width:100% */
        max-width: 360px !important;      /* small card width */
        margin: 20px auto !important;     /* center the card */
        border-radius: 22px !important;
    }
}




/* ZOOM EFFECT ON BIG IMAGE */
.vm-big-wrapper {
    position: relative;
    overflow: hidden;
}

.vm-big {
    transition: transform 0.4s ease;
    cursor: zoom-in;
}


/*
.vm-big:hover {
    transform: scale(1.7);   /* zoom level */
}

*/

/* FOLLOW-MOUSE ZOOM */
.vm-big-wrapper {
    position: relative;
    overflow: hidden;
}

.vm-big {
    width: 100%;
    transition: transform 0.5s ease-out;
    transform-origin: center center;
    cursor: zoom-in;
}



/* Elegant separator line between title and code */
.vm-separator {
    border: 0;
    height: 1px;
    width: 80%;
    margin: 6px auto 10px auto;
    background: linear-gradient(to right, transparent, #e61e29, transparent);
}




/* Yellow bar for product code */
.ribbon {
    background: #ffeb3b;       /* bakery yellow */
    color: #4d0000;            /* Lovebites deep red text */
    padding: 6px 12px;
    margin: 10px 0;
    display: block;
    width: 100%;
    text-align: center;
    font-weight: 600;
    border-radius: 6px;

    /* subtle shadow */
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

/* Remove ribbon tails */
.ribbon::before,
.ribbon::after {
    display: none !important;
    content: none !important;
}


.vm-text .ribbon {
    margin-left: -12px;
    margin-right: -12px;
}



/* ADDITIONAL ANIMATION ON THE CARD ON VIEW_MORE.PHP BY GLEN */
/* Smooth corner animation */
.vm-card {
    border-radius: 10px;   /* normal radius */
    transition: border-radius 0.35s ease, transform 0.35s ease;
}

.vm-card:hover {
    border-radius: 35px;   /* corner becomes rounder */
    transform: translateY(-10px); /* optional lift effect */
}

.vm-card:hover {
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}

.vm-card:hover {
    border: 2px solid red;
}


/* Base card style */
.vm-card {
    border-radius: 10px;
    transition: 
        border-radius 0.55s ease,
        transform 0.85s ease,
        box-shadow 0.85s ease;
    box-shadow: 0 0 0 rgba(255,255,255,0); /* no glow by default */
}

/* Hover effect: soft large white glow */
.vm-card:hover {
    border-radius: 22px;
    transform: translateY(-10px);
    box-shadow: 
        0 0 35px rgba(255,255,255,0.65),
        0 0 70px rgba(255,255,255,0.35);
}




/* STYLING FOR SRP BY GLEN */
.vm-price {
    text-align: center;
    background: #fff4c2;             /* light bakery yellow */
    color: #4d0000;
    padding: 6px 12px;
    margin: 8px -12px 12px -12px;    /* align with yellow code bar */
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.95rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.10);
}


/* STYLING FOR THE USERNAME ON THE MENU BY GLEN */
.user-box {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #ffffff !important;
    font-weight: 600;
}

.user-icon {
    font-size: 1.2rem;
    color: #ffffff !important;
}

.logout-link {
    color: #ffeeba !important; /* light yellow */
    text-decoration: none;
    font-weight: 500;
}

.logout-link:hover {
    color: #fff3cd !important;
    text-decoration: underline;
}



/*ADDITIONAL CSS FOR THE ABOUT PAGE. BY GLEN */
/* === About Page Animations === */

/* Fade + slide up */
.fade-slide-up {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeSlideUp 1.1s ease-out forwards;
}

/* Soft glow for title */
.glow-title {
    opacity: 0;
    animation: glowIn 1.4s ease-out forwards;
}

@keyframes fadeSlideUp {
    0% { opacity: 0; transform: translateY(35px); }
    60% { opacity: 0.7; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes glowIn {
    0% { opacity: 0; text-shadow: 0 0 0px #fff; }
    70% { opacity: 1; text-shadow: 0 0 15px rgba(255,255,255,0.7); }
    100% { opacity: 1; text-shadow: none; }
}

/* Floating cute hearts */
.about-hearts {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
}

.about-heart {
    position: absolute;
    color: #e61e29;
    font-size: 1.1rem;
    opacity: 0;
    animation: floatHeart 5s ease-in infinite;
}

@keyframes floatHeart {
    0% { transform: translateY(0) scale(0.8); opacity: 0; }
    30% { opacity: 1; }
    100% { transform: translateY(-80px) scale(1.4); opacity: 0; }
}


.about-subtitle {
    font-size: 1.1rem;       /* smaller than main title */
    margin-bottom: 22px;
    color: #4d0000;
    font-weight: 500;
    letter-spacing: 0.3px;
    opacity: 0;
    transform: translateY(10px);
    animation: fadeUp 0.7s ease-out forwards 0.25s;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =============================== */
/* DESKTOP: 4 CARDS PER ROW       */
/* =============================== */
@media (min-width: 1280px) {

    .vm-products {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 30px !important;
        justify-items: center !important;
    }

    .vm-card {
        max-width: 280px !important;
    }
}

/* DESKTOP — add gaps between 4 cards */
@media (min-width: 1280px) {
    .vm-products {
        gap: 60px !important; /* spacing */
    }
}


/* DESKTOP — wider cards so big image becomes bigger */
@media (min-width: 1280px) {

    .vm-products {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 50px !important; /* adjust spacing */
        justify-items: center !important;
    }

    .vm-card {
        max-width: 340px !important; /* ← WIDER CARD */
    }

    .vm-big {
        height: 260px !important; /* ← BIGGER IMAGE */
        object-fit: contain !important;
    }
}



/* =======================================================
   DESKTOP ONLY — SIDE-BY-SIDE IMAGE + VERTICAL THUMBNAILS
   ======================================================= */
@media (min-width: 1280px) {

    /* Wider card */
    .vm-card {
        max-width: 820px !important;
        padding: 25px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* container for left-thumbs + big image side-by-side */
    .vm-image-row {
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: flex-start !important;
        gap: 35px !important;
    }

    /* LEFT SIDE — vertical thumbnails */
    .vm-thumbs {
        display: flex !important;
        flex-direction: column !important;  /* vertical */
        gap: 15px !important;
        width: auto !important;
        order: 1;
    }

    .vm-thumb {
        width: 95px !important;
        height: 95px !important;
        object-fit: cover !important;
        border-radius: 10px !important;
        cursor: pointer !important;
    }

    /* RIGHT SIDE — big main image */
    .vm-big-wrapper {
        width: 60% !important;
        display: flex !important;
        justify-content: center !important;
        order: 2;
    }

    .vm-big {
        width: 100% !important;
        height: 330px !important;
        object-fit: contain !important;
    }

    /* BELOW — centered title + code + button */
    .vm-title,
    .vm-code,
    .vm-price,
    .vm-desc-toggle {
        text-align: center !important;
        width: 100% !important;
    }

    /* description box stays full width */
    .vm-desc {
        width: 100% !important;
    }
}



/* =======================================================
   DESKTOP — WIDE CARD + REDUCED HEIGHT + IMAGE LEFT LAYOUT
   ======================================================= */
@media (min-width: 1280px) {

    /* Wider, shorter card */
    .vm-card {
        max-width: 980px !important;     /* wider card */
        padding: 20px 30px !important;
        border-radius: 18px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 15px !important;            /* less space */
    }

    /* Row for left thumbnails + big image */
    .vm-image-row {
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 40px !important;           /* spacing between thumbnails & big image */
        margin-bottom: 10px !important;
    }

    /* Left thumbnails – reduce size slightly */
    .vm-thumbs {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 110px !important;
    }

    .vm-thumb {
        width: 90px !important;
        height: 90px !important;
        border-radius: 10px !important;
    }

    /* Big image – increase width but reduce height so card becomes shorter */
    .vm-big-wrapper {
        width: 60% !important;
    }

    .vm-big {
        width: 100% !important;
        height: 260px !important;       /* LOWER height = shorter card */
        object-fit: contain !important;
    }

    /* Text section moves up and stays compact */
    .vm-text {
        width: 100% !important;
        margin-top: 0 !important;
    }

    .vm-title,
    .vm-code,
    .vm-price,
    .vm-desc-toggle {
        text-align: center !important;
        margin-top: 6px !important;
        margin-bottom: 6px !important;
    }

    /* Reduce space inside red description */
    .vm-desc {
        padding: 14px !important;
    }
}


/* =======================================================
   DESKTOP — 3 WIDE CARDS PER ROW + SHORTER HEIGHT
   ======================================================= */
@media (min-width: 1280px) {

    /* 3 cards per row instead of 4 */
    .vm-products {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 40px !important; /* spacing */
        justify-items: center !important;
    }

    /* Wider but shorter cards */
    .vm-card {
        max-width: 900px !important;     /* wider */
        padding: 20px 30px !important;
        border-radius: 22px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        min-height: 420px !important;    /* shorter card */
    }

    .vm-image-row {
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        gap: 45px !important;
        margin-bottom: 0 !important;
    }

    .vm-thumbs {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 110px !important;
    }

    .vm-thumb {
        width: 90px !important;
        height: 90px !important;
    }

    .vm-big-wrapper {
        width: 60% !important;
    }

    .vm-big {
        height: 240px !important; /* shorter height */
        object-fit: contain !important;
    }

    /* tighten spacing below */
    .vm-text {
        margin-top: 0 !important;
    }

    .vm-title,
    .vm-code,
    .vm-desc-toggle {
        margin-top: 6px !important;
        margin-bottom: 6px !important;
        text-align: center !important;
    }

    .vm-desc {
        margin-top: 10px !important;
        padding: 14px !important;
    }
}


@media (min-width: 1280px) {

    .vm-products {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 80px !important;   /* spacing between cards */
        justify-items: center !important;
    }

    .vm-big {
        height: 320px !important;   
        object-fit: contain !important;
    }

    .vm-big-wrapper {
        width: 85% !important;  
    }
}


@media (min-width: 1280px) {

    /* Make red description span the ENTIRE width of the card */
    .vm-desc {
        width: calc(100% + 60px) !important; /* expands to match card width */
        margin-left: -30px !important;
        margin-right: -30px !important;

        border-radius: 0 0 22px 22px !important; /* match card bottom curve */
        box-sizing: border-box !important;
        padding: 20px !important;

        text-align: left !important;
    }

    /* Keep the rest of VM text narrow and centered */
    .vm-text {
        width: 100% !important;
    }
}

/* DESKTOP: shorten Read Description button */
@media (min-width: 1280px) {
    .vm-desc-toggle {
        width: 60% !important;      /* adjust this value (50–70% looks good) */
        margin: 0 auto !important;  /* center the button */
        display: block !important;
    }
}

.cart-icon {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 15px;
    cursor: pointer;
    position: relative;
}

.cart-icon i {
    font-size: 1.6rem;
    color: #d0131f;
}

#cart-count {
    background: #d0131f;
    color: white;
    padding: 2px 7px;
    border-radius: 50%;
    font-size: 0.75rem;
    position: absolute;
    top: -6px;
    right: -10px;
}


/* BUY ROW WRAPPER */
.vm-buy-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff8d6;
    border-radius: 6px;
    padding: 10px 12px;
    margin: 10px 0;
    gap: 10px;
}

/* PRICE LEFT */
.vm-price-left {
    font-weight: 600;
    color: #4d0000;
    white-space: nowrap;
}

/* DIVIDER */
.vm-divider {
    width: 2px;
    height: 25px;
    background: #ccc;
}

/* QTY BLOCK */
.vm-qty-block {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

/* QTY INPUT */
.vm-qty-input {
    width: 50px;
    padding: 3px 5px;
    border: 1px solid #aaa;
    border-radius: 4px;
}

/* ADD BUTTON */
.vm-add-btn {
    background: #ffd833;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
}
.vm-add-btn:hover {
    background: #ffcc00;
}


/* CART BOX */
.cart-box {
    display: flex;
    align-items: center;
    margin-left: 12px;
    position: relative;
}

/* CART ICON */
.cart-icon {
    font-size: 26px;
    color: #e61e29;
    cursor: pointer;
}

/* CART COUNT BUBBLE */
.cart-count {
    background: #e61e29;
    color: white;
    font-size: 12px;
    font-weight: bold;
    border-radius: 50%;
    padding: 3px 7px;
    position: absolute;
    top: -8px;
    right: -12px;
}

/* BLUR PRICE WHEN LOGGED OUT */
.vm-blurred-price .vm-price-value {
    filter: blur(4px);
    color: transparent;
    text-shadow: 0 0 6px rgba(0,0,0,0.4);
    user-select: none;
    pointer-events: none;
}


.vm-buy-row {
    width: 100%;                        /* FULL width */
    background: #fff8d6;
    border-radius: 6px;
    padding: 10px 12px;
    margin: 10px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    box-sizing: border-box;             /* prevent overflow */
}



.search-box {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon {
    margin-right: 10px;
}

.cart-box {
    display: flex;
    align-items: center;
    margin-left: 10px;
}


.search-box {
    display: flex;
    align-items: center;
    background: white;
    border-radius: 30px;
    padding: 10px 18px;
    gap: 10px;     /* spacing between icons and input */
}

.search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 16px;
}

.search-icon {
    font-size: 18px;
    color: #ffffff;
    margin-left: 12px;  /* adjust here */
    margin-right: 10px; /* spacing between icon and text */
}

.cart-box {
    display: flex;
    align-items: center;
}

.cart-icon {
    font-size: 22px;
    color: #e61e29;
}

.cart-badge {
    margin-left: 6px;
    font-weight: bold;
    color: #e61e29;
}



/* ----------- MOBILE FIXES ----------- */
@media (max-width: 768px) {

    /* Stack columns */
    .cart-grid {
        grid-template-columns: 1fr !important;
        gap: 25px;
    }

    /* Move Customer Info below items */
    .cart-right {
        order: 2;
        width: 100%;
    }

    /* Make cart list full width */
    .cart-item {
        flex-direction: row;
        align-items: flex-start;
    }

    /* Image smaller on mobile */
    .cart-item img {
        width: 70px !important;
        height: 70px !important;
    }

    /* Product info */
    .info {
        font-size: 0.95rem;
    }

    /* Qty field */
    .cart-item input[type="number"] {
        width: 55px !important;
        padding: 5px !important;
    }

    /* Update button */
    .cart-item button {
        padding: 5px 10px !important;
        font-siz
}


/* ----------- ULTRA CLEAN MOBILE LAYOUT ----------- */
@media (max-width: 768px) {

    .cart-item {
        display: grid !important;
        grid-template-columns: 80px 1fr;
        padding: 12px;
        gap: 10px;
        align-items: start;
    }

    /* Image */
    .cart-item img {
        width: 75px !important;
        height: 75px !important;
        border-radius: 10px;
    }

    /* Product info on the right */
    .cart-item .info {
        font-size: 0.95rem;
        line-height: 1.3;
    }

    /* Right column disappears on mobile — replaced by stacked layout */
    .right-col {
        grid-column: 1 / span 2;   /* full width */
        text-align: left !important;
        margin-top: 8px;
    }

    /* Qty + Update button placed on the left */
    .right-col form {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 6px;
    }

    .right-col input[type="number"] {
        width: 55px !important;
        padding: 5px;
        font-size: 0.85rem;
    }

    .right-col button {
        padding: 5px 10px !important;
        font-size: 0.8rem !important;
        border-radius: 6px;
    }

    /* Remove link clean and small */
    .right-col form + form button {
        font-size: 0.85rem !important;
        margin-top: 3px;
        padding-left: 0;
    }

    /* Line total at bottom right */
    .right-col div {
        text-align: right !important;
        font-size: 1rem;
        margin-top: 4px;
        font-weight: bold;
    }
}


/* FIX SEARCH BAR CENTERING */
.search-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* FIX SEARCH BAR ALIGNMENT */
.search-wrapper .container {
    padding: 0 !important;
    margin: 0 auto !important;
    max-width: 650px !important;
    display: flex !important;
    justify-content: center !important;
}


.search-box {
    width: 100%;
    max-width: 550px;
    margin: 0 auto;
}


/* FINAL SEARCH BAR FIX */
.search-box {
    width: 100% !important;
    max-width: 550px !important;
    margin: 0 auto !important;
    justify-content: center !important;
}


/* Disable effect for Add button */
.add-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: scale(0.96);
    transition: opacity .2s ease, transform .2s ease;
}


.ws-badge {
    display: inline-block;
    background-color: #ff4d6d;
    color: white;
    font-weight: bold;
    font-size: 10px;
    padding: 4px 7px;
    border-radius: 50%;
    margin-right: 6px;
    border: 2px solid white;
    box-shadow: 0px 0px 4px rgba(0,0,0,0.3);
}


/* FIX: Prevent navbar cart-count style from affecting cart page */
.cart-left .cart-count {
    position: static !important;
    background: none !important;
    color: #4d0000 !important; /* normal text color */
    padding: 0 !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    border-radius: 0 !important;
}


/* IMAGE ZOOM VIEWER */
#imageViewerOverlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.9);
    justify-content: center;
    align-items: center;
    z-index: 9999; /* highest layer */
}

#imageViewerOverlay img {
    max-width: 95%;
    max-height: 95%;
    border-radius: 6px;
}

#closeViewer {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 32px;
    color: white;
    cursor: pointer;
    z-index: 10000;
}

.zoom-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    padding: 6px;
    border-radius: 50%;
    font-size: 14px;
    cursor: pointer;
    z-index: 5;
}


.vm-big-wrapper {
    overflow: visible !important;
    position: relative !important;
}


#imageViewerOverlay {
    position: fixed !important;
    display: none;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important;
}


@media (min-width: 1280px) {
    html, body {
        overflow: visible !important;
    }
    .vm-products,
    .featured,
    .container,
    .vm-card {
        overflow: visible !important;
    }
}




/* IMAGE ZOOM VIEWER */
#imageViewerOverlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.9);
    justify-content: center;
    align-items: center;
    z-index: 9999; /* high layer */
}

#imageViewerOverlay img {
    max-width: 95%;
    max-height: 95%;
    border-radius: 6px;
}

#closeViewer {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 32px;
    color: white;
    cursor: pointer;
    z-index: 10000;
}

.zoom-icon {
    position: absolute;
    top: 16px;   /* moved a little lower to avoid being cut */
    right: 16px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    padding: 6px;
    border-radius: 50%;
    font-size: 14px;
    cursor: pointer;
    z-index: 5;
}


/* IMAGE ZOOM VIEWER */
#imageViewerOverlay {
    display: none;               /* JS will change this */
    /* other properties here are fine, but JS will overwrite most of them */
}

#imageViewerOverlay img {
    max-width: 95%;
    max-height: 95%;
    border-radius: 6px;
}

#closeViewer {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 32px;
    color: white;
    cursor: pointer;
    z-index: 10000;
}





/* FIX: Prevent magnifying icon from being clipped on desktop */
@media (min-width: 1024px) {
    .vm-big-wrapper {
        overflow: visible !important;
        position: relative !important;
    }
    
    .zoom-icon {
        position: absolute !important;
        top: 8px !important;
        right: 8px !important;
        z-index: 9999 !important;
        pointer-events: auto !important;
    }
}





/* Desktop: move to top right of the entire card */
@media (min-width: 1024px) {
    .vm-card {
        position: relative; /* this anchors the icon to the card */
    }
    .zoom-icon {
        top: 12px;
        right: 12px;
        font-size: 20px; /* bigger for desktop */
    }
}

/* MOBILE ONLY — make zoom icon background red */
@media (max-width: 768px) {
    .zoom-icon {
        background: #e61e29 !important; /* Lovebites red */
        color: white !important;
    }
}


/* MOBILE ONLY — fix magnifying icon to be a perfect red circle */
@media (max-width: 768px) {
    .zoom-icon {
        width: 32px !important;
        height: 32px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        background: #e61e29 !important; /* Lovebites red */
        color: white !important;
        border-radius: 50% !important;   /* perfect circle */
        font-size: 16px !important;
    }
}



.account-menu {
    position: relative;
}

.account-link {
    cursor: pointer;
    padding: 8px 12px;
    display: inline-block;
}

.account-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
    padding: 6px 0;
    min-width: 180px;
    display: none;
    z-index: 999;
}

.account-dropdown li {
    list-style: none;
}

.account-dropdown li a {
    display: block;
    padding: 8px 14px;
    text-decoration: none;
    color: #4d0000;
    font-size: 0.95rem;
}

.account-dropdown li a:hover {
    background: #ffe6ec;
}

/* Hover show (desktop) */
@media (min-width: 769px) {
    .account-menu:hover .account-dropdown {
        display: block;
    }
}

/* For mobile menu systems, display it inline */
@media (max-width: 768px) {
    .account-dropdown {
        position: static;
        box-shadow: none;
        border-radius: 0;
    }
}


@media (max-width: 768px) {

    .order-row {
        padding: 14px !important;
        border-radius: 12px;
    }

    .order-row:active {
        background: #ffe6ea !important;
        transform: scale(0.98);
    }

    .cart-items {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }

    #order-detail {
        margin-top: 15px;
    }

    #ajax-loader .loader-hearts {
        font-size: 2.4rem;
    }
}


.vm-desc {
    background: #e61e29;
    color: #fff;
    padding: 18px;
    border-radius: 0 0 12px 12px;
    margin-top: 15px;

    max-height: 0;
    overflow: hidden;
    transition: max-height 0.45s ease;
    white-space: normal;
}

.vm-desc.open {
    max-height: 600px;
}


/* SEARCH — NO RESULTS MESSAGE */
.no-results-box {
    text-align: center;
    background: #ffe6e6;
    padding: 30px;
    border-radius: 14px;
    width: 90%;
    max-width: 380px;
    margin: 20px auto;
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}

.no-results-icon i {
    font-size: 40px;
    color: #e61e29;
    margin-bottom: 12px;
}

.no-results-title {
    font-size: 1.4rem;
    font-weight: bold;
    color: #e61e29;
    margin-bottom: 8px;
    font-family: 'Shadows Into Light', cursive;
}

.no-results-text {
    font-size: 1rem;
    color: #4d0000;
}

.no-results-box h2 {
    font-family: 'Poppins', sans-serif !important;
    font-size: 1.6rem !important;
    color: #b30000 !important;
    font-weight: 700 !important;
}


.product-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 35px rgba(0,0,0,0.2);
}



.messenger-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  background: #0084ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(0,0,0,0.3);
  z-index: 999999;
  text-decoration: none;

  /* Animation */
  animation: messenger-dance 6s infinite;
}

/* Subtle attention animation */
@keyframes messenger-dance {
  0%   { transform: scale(1) rotate(0deg); }
  3%   { transform: scale(1.1) rotate(-8deg); }
  6%   { transform: scale(1.1) rotate(8deg); }
  9%   { transform: scale(1.1) rotate(-6deg); }
  12%  { transform: scale(1.05) rotate(0deg); }
  15%  { transform: scale(1); }
  100% { transform: scale(1); }
}

/* Optional hover enhancement */
.messenger-float:hover {
  transform: scale(1.15);
}



/* Messenger Floating Button – Isolated & Safe */
.messenger-float {
  all: unset; /* reset inherited styles */
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;

  width: 60px !important;
  height: 60px !important;
  background: #0084ff !important;
  border-radius: 50% !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  cursor: pointer;
  z-index: 2147483647 !important;

  box-shadow: 0 6px 16px rgba(0,0,0,0.35) !important;

  visibility: visible !important;
  opacity: 1 !important;

  animation: messenger-dance 6s infinite;
}

/* SVG safety */
.messenger-float svg {
  display: block !important;
  width: 30px !important;
  height: 30px !important;
  pointer-events: none;
}

/* Hover effect */
.messenger-float:hover {
  transform: scale(1.15) !important;
}

/* Dance animation */

@keyframes messenger-pulse {
  0%   { transform: scale(1); }
  5%   { transform: scale(1.18); }
  10%  { transform: scale(1); }
  100% { transform: scale(1); }
}




.vm-card {
    position: relative;
    overflow: hidden;   /* ← THIS IS THE MISSING PIECE */
}


.vm-social-float {
    position: absolute;
    top: 44px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 10px;
    background: #fff8d6;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 600;
    z-index: 6;
    margin: 0;
    pointer-events: auto;
}

.vm-social-float a {
    color: #4267B2;
    text-decoration: none;
    white-space: nowrap;
}


.vm-card {
    position: relative;
}

/* zero-height overlay layer */
.vm-overlay-layer {
    position: absolute;
    top: 0;
    left: 0;
    height: 0;        /* 🔑 THIS is the magic */
    width: 100%;
    pointer-events: none;
}

/* actual floating FB link */
.vm-social-float {
    position: absolute;
    top: 44px;        /* below magnifying glass */
    left: 50%;
    transform: translateX(-50%);
    background: #fff8d6;
    padding: 4px 10px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 600;
    z-index: 10;
    white-space: nowrap;
    pointer-events: auto;
}

.vm-social-float a {
    color: #4267B2;
    text-decoration: none;
}



/* ===== FINAL ACTION ROW FIX (GRID-BASED) ===== */

.vm-action-row {
    display: grid;
    grid-template-columns: max-content max-content; /* 🔑 KEY */
    justify-content: space-between;
    align-items: center;
    column-gap: 12px;
    margin-top: 10px;
}

/* Force button to size to content, no matter what */
.vm-action-row .vm-desc-toggle {
    width: max-content !important;
    max-width: 100%;
    white-space: nowrap;
}

/* Facebook link */
.vm-action-row .vm-fb-link {
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    color: #4267B2;
    text-decoration: none;
}



.vm-action-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
}

.vm-fb-link {
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    color: #4267B2;
    text-decoration: none;
}




.vm-card {
    position: relative;
}

.vm-fb-overlay {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 28px;
    height: 28px;
    background: #4267B2;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    z-index: 10;
    text-decoration: none;
}

.vm-fb-overlay:hover {
    background: #365899;
}



/* Hide zoom icon on desktop only */
@media (min-width: 1024px) {
    .vm-card .zoom-icon {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}



@media (min-width: 1024px) {
    .desktop-hide {
        display: none !important;
    }
}


.vm-fb-overlay {
    position: absolute;
    top: 14px;
    right: 14px;
    background: #4267B2;
    color: #fff;
    border-radius: 18px;
    padding: 6px 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    z-index: 10;
    white-space: nowrap;
}

.vm-fb-overlay i {
    font-size: 14px;
}

.vm-fb-overlay:hover {
    background: #365899;
}

/* Optional: hide text on very small screens */
@media (max-width: 360px) {
    .vm-fb-text {
        display: none;
    }
}


/* Facebook overlay icon color */
.vm-fb-overlay i {
    color: #1877F2;   /* Official Facebook blue */
    font-size: 14px;
}

.vm-fb-overlay {
    background: #4267B2;   /* FB blue background */
    color: #fff;
}

.vm-fb-overlay i {
    color: #fff;          /* white F on blue pill */
}


/* Facebook SVG icon */
/* Facebook SVG icon – match text size exactly */
.vm-fb-svg {
    width: 0.9em;          /* slightly smaller than text */
    height: 0.9em;
    fill: #1877F2;         /* Facebook blue */
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}



.vm-fb-overlay {
    background: #ffffff;
    border: 1px solid #e4e6eb;
}

.vm-fb-text {
    color: #1877F2;
}


.vm-fb-overlay {
    position: absolute;
    top: 14px;
    right: 14px;
    background: #ffffff;
    border: 1px solid #e4e6eb;
    border-radius: 16px;
    padding: 6px 10px;
    font-size: 13px;       /* 🔑 prevents giant icon */
    font-weight: 600;
    color: #1877F2;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    z-index: 10;
    white-space: nowrap;
}

.vm-fb-overlay i {
    color: #1877F2;
    font-size: 13px;       /* 🔑 force icon size */
}