:root { --primary: #0d6efd; --muted: #6c757d; --card-radius: 18px; }

body {
    background-color: #f4f6f9;
    font-family: 'Segoe UI', Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

/* Force all product names to equal height */
.product-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;      /* show max 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 40px;           /* ensures equal height across cards */
    line-height: 20px;
}

/* Make stars & reviews fit perfectly */
.stars-row {
    min-height: 22px;
}

/* Consistent spacing for price block */
.product-card .card-body p.price,
.product-card .card-body p.mb-1 {
    min-height: 24px;
}

/* Uniform layout for all cards */
.product-card {
    display: flex;
    flex-direction: column;
}

.product-card .card-body {
    flex-grow: 1;
}

.top-announcement {
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    width: 100%;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 600;
}

/* Announcement items position */
.announcement-item {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    opacity: 0;
    transition: opacity .6s ease-in-out;
    padding: 6px 0;
}

/* Visible item */
.announcement-item.active {
    opacity: 1;
}

/* ✅ Full-width background themes */
.announcement-item.color-1 { background: #9B59B6; color: #fff; } /* Light purple */
.announcement-item.color-2 { background: #007B99; color: #fff; } /* Teal */
.announcement-item.color-3 { background: #5D6DFF; color: #fff; } /* Indigo */



.navbar { box-shadow:0 4px 12px rgba(0,0,0,0.04); background:#fff; position:relative; z-index:2; }
.nav-inner { position:relative; display:flex; align-items:center; gap:12px; }

.navbar-left, .navbar-right { display:flex; align-items:center; gap:0.6rem; flex:1 1 0; min-width:0; }

.navbar-center { position:absolute; left:50%; transform:translateX(-50%); display:flex; align-items:center; pointer-events:auto; z-index:3; background:transparent; }

.logo-wrapper { display:flex; align-items:center; text-decoration:none; }
.logo-wrapper img, .logo-wrapper svg { max-height:48px; display:block; }

.store-name-title { font-weight:700; font-size:1.05rem; color:#111; }
.store-name-subtitle { font-size:0.8rem; color:var(--muted); }

.nav-icon-links a { width:36px; height:36px; border-radius:8px; border:1px solid #e9ecef; display:inline-flex; align-items:center; justify-content:center; background:#fff; text-decoration:none; color:#495057; transition:all .18s ease; font-size:0.95rem; }
.nav-icon-links a:hover { background:#f8f9fa; color:var(--primary); border-color:var(--primary); transform:translateY(-2px); }

.search-wrapper { align-items:center; gap:0.5rem; }
.search-input input { padding-left:12px; }
.search-input { min-width:280px; max-width:350px; width:100%; }
@media (max-width: 991px) { .search-input { min-width:220px; max-width:320px; } }
@media (max-width: 767.98px) { .search-input { max-width:100%; min-width:0; } }

.animated-placeholder { position:absolute; top:50%; left:12px; transform:translateY(-50%); color:var(--muted); font-size:0.875rem; pointer-events:none; white-space:nowrap; z-index:1; overflow:hidden; display:inline-flex; align-items:center; gap:6px; opacity:1; transition:opacity .18s ease; }

.typing-cursor { display:inline-block; width:2px; height:1em; background:var(--muted); margin-left:2px; vertical-align:middle; opacity:0; }
.blink { animation: blink 1s steps(2, start) infinite; }
@keyframes blink { 0%,49%{opacity:1}50%,100%{opacity:0} }

.typing-text { white-space:nowrap; display:inline-block; transform-origin:left center; }

.search-input input:focus ~ .animated-placeholder, .search-input input:not(:placeholder-shown) ~ .animated-placeholder { opacity:0; }
/* Ensure all body content is centered and stars look correct */
.product-card .card-body { text-align: center; }
.product-title { font-weight: 600; margin-bottom: 0.25rem; }
.stars-row .stars i { color: #ffc107; margin-right: 2px; }
.review-text { font-size: .85rem; margin-left: .4rem; color: #6c757d; }

/* low stock indicator spacing */
.stock-indicator { font-size: .8rem; }

/* small responsive tweak so footer buttons wrap nicely */
.card-footer .d-flex { flex-wrap: wrap; gap: .4rem; }

/*.stars-row .stars { display: inline-flex; gap: 0.12rem; color: #ffc107; }
.stars-row .review-count { min-width: 3.2rem; text-align: right; }*/
.product-title .stock-indicator { margin-left: .5rem; font-size: .75rem; }

.product-card { border:1px solid #e9ecef; border-radius:var(--card-radius); overflow:hidden; background:#fff; box-shadow:0 6px 18px rgba(0,0,0,0.03); transition:transform .22s ease, box-shadow .22s ease; display:flex; flex-direction:column; height:100%; }
.product-card:hover { transform:translateY(-6px); box-shadow:0 14px 30px rgba(0,0,0,0.06); }
.card-img-wrap { width:100%; aspect-ratio:4/3; overflow:hidden; background:linear-gradient(180deg,#f8f9fa,#fff); }
.card-img-wrap img { width:100%; height:100%; object-fit:cover; display:block; }

.product-title { font-size:1rem; font-weight:600; margin-bottom:.25rem; color:#111; }
.card-footer-buttons { display:flex; gap:10px; justify-content:space-between; }
.card-footer-buttons button { flex:1; }

.card-footer-buttons .add-btn.d-none { display: none !important; }

.card-footer-buttons .qty-controls { display:inline-flex; align-items:center; gap:8px; }
.card-footer-buttons .qty-controls.d-none { display:none !important; }
.card-footer-buttons .add-btn.d-none { display:none !important; }
.qty-value { min-width:18px; display:inline-block; text-align:center; }
.stock-indicator { margin-left:0; }

/* Cart popup small adjustments */
#cartPopup .cart-item { border-bottom:1px solid #f1f1f1; padding:8px 0; }
#cartPopup .cart-item:last-child { border-bottom: none; }
#cartPopup .cart-item img { width:48px; height:48px; object-fit:cover; border-radius:6px; }
#cartPopup .cart-empty { padding:24px 12px; }


.footer { background:#fff; border-top:1px solid #dee2e6; }

.badge-sm { font-size:0.65rem; padding:.25rem .4rem; }

.auth-btn-login { border:1px solid rgba(13,110,253,0.12); color:var(--primary); background:transparent; padding:.375rem .6rem; border-radius:6px; text-decoration:none; }
.auth-btn-register { padding:.375rem .6rem; border-radius:6px; color:#fff; background:var(--primary); border:none; text-decoration:none; }

.nav-user { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:8px; }

@media (max-width:575.98px) { .store-name { display:none; } }
.navbar-center { position:absolute; left:50%; transform:translateX(-50%); z-index:3; pointer-events:auto; display:flex; align-items:center; }
#siteLogo { max-height:48px; width:auto; display:inline-block; }
@media (max-width:576px) { #siteLogo { max-height:36px; } .store-name { display:none; } }
#logoFallback { max-height:48px; width:auto; }
@media (max-width:576px) { #logoFallback { max-height:36px; } }

/* HERO: fixed desktop height 750px + smooth crossfade */
.hero-slideshow {
  overflow: hidden;
  position: relative;
  min-height: 350px;            /* reserve full banner height while images load */
  line-height: 0;
  background: #f5f6f8;
}

/* allow inner to size by content but keep layout stable */
.hero-slideshow .carousel,
.hero-slideshow .carousel-inner {
  height: auto;
}

/* smooth fade for Bootstrap's carousel-fade */
.carousel-fade .carousel-item {
  opacity: 0;
  transform: scale(1);
  transition: opacity .65s ease-in-out, transform .65s ease-in-out;
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.carousel-fade .carousel-item.active {
  opacity: 1;
  transform: scale(1.01);
  position: relative;
  pointer-events: auto;
}
.carousel-fade .carousel-item img { display:block; width:100%; object-fit:cover; }

/* HERO IMAGE: explicit desktop height 750px, mobile smaller */
.hero-img {
  width: 100%;
  height: 100%;                /* desktop hero height you requested */
  max-height: 85vh;            /* prevents overflow on small viewports */
  object-fit: cover;
  display: block;
  transform: translateZ(0);
  backface-visibility: hidden;
  transition: opacity .65s ease-in-out, transform .65s ease-in-out;
  will-change: opacity, transform;
}
@media (max-width: 991.98px) {
  .hero-img { height: 520px; } /* tablet */
}
@media (max-width: 767.98px) {
  .hero-img { height: 320px; } /* mobile */
}


.page-down {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 20px;
    z-index: 40;
    font-size: 36px;
    color: #fff;
    cursor: pointer;
    animation: pageDownBounce 1.6s infinite;
    text-shadow: 0 2px 8px rgba(0,0,0,0.45);
}
@keyframes pageDownBounce {
    0%,100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(8px); }
}

.hero-overlay {
    position:absolute;
    inset:0;
    background: linear-gradient(180deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.05) 60%, rgba(0,0,0,0.08) 100%);
    pointer-events:none;
    z-index: 1;
}

/* Ensure scrollToTop button is positioned, hidden by opacity, and on top of overlays */
#scrollTopBtn {
  display: flex !important;          /* keep layout controlled by JS (we toggle visibility) */
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, transform .18s ease;
  transform: translateY(8px);        /* slight down offset when hidden */
  z-index: 99999 !important;         /* put above overlays */
  pointer-events: auto;              /* clickable when visible */
}

/* Visible state */
#scrollTopBtn.show {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

/* Keep hover style */
#scrollTopBtn:hover { transform: translateY(-2px); }


.drawer-overlay {
    position:fixed; inset:0;
    background:rgba(0,0,0,0.18);
    z-index:1031;
    display:none;
}
.category-drawer {
    position:fixed; top:0; left:0;
    height:100vh; width:330px; max-width:96vw;
    background:#fff;
    box-shadow:4px 0 32px rgba(0,0,0,0.18);
    z-index:1032;
    display:none;
    flex-direction:column;
    animation: slideDrawerLeft .3s cubic-bezier(.5,1.3,.55,1) both;
}
@keyframes slideDrawerLeft { from { transform:translateX(-100%);} to { transform:translateX(0);} }
.category-drawer.open { display:flex; }
.drawer-header {
    display:flex; align-items:center; justify-content:space-between;
    min-height:54px; padding:0 12px 0 14px; border-bottom:1px solid #eee;
    background:#f9f9f9;
}
.drawer-title {
    font-weight: 600; font-size: 1.05rem;
}
.drawer-close {
    background: transparent; border: none; font-size:1.4rem; cursor:pointer; color: #444;
    padding:8px; margin-right:-8px;
}
.drawer-list {
    flex:1 1 auto; overflow-y:auto; padding:0.5rem 0;
}

/* Category rows for accordion */
.cat-row {
    display:flex; align-items:center; width:100%;
    padding: 10px 14px; cursor:pointer;
    background: #fff; border-bottom:1px solid #f4f4f4;
    transition: background .12s;
    user-select:none;
}
.cat-row:hover, .cat-row.expanded { background:#f4f6fb; }
.cat-icon {
    width:38px; height:38px; border-radius:6px; object-fit:cover;
    background:#f4f6f8; margin-right:12px;
}
.cat-label {
    flex:1 1 auto; min-width:0; font-weight: 500; font-size: 1rem; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;
}
.cat-arrow {
    color: #666; margin-left:8px;
    font-size:1.25rem; transition: transform .2s;
}
.cat-arrow.expanded { transform: rotate(90deg);}
.child-cats { margin-left:24px; border-left:2px solid #f2f2f2;}

/* Make the floating categories popup occupy full viewport height */
.full-height-popup {
  position: fixed !important;   /* fix it to viewport */
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 100vh !important;
  max-height: 100vh !important;
  width: 360px;                /* width of the panel; change as needed */
  max-width: 96vw;
  overflow-y: auto !important;
  border-radius: 0 12px 12px 0; /* subtle rounded right edge; change if you want */
  box-shadow: 4px 0 32px rgba(0,0,0,0.12);
  z-index: 3000 !important;
  background: #fff !important;
  padding: 8px !important;
}

/* When the popup is full-height, align it to the left by default.
   If you want it anchored to the button horizontally, remove/adjust left/right rules. */
@media (min-width: 992px) {
  .full-height-popup { left: 12px; } /* keep it near left edge on large screens */
}