/* Inter (Latin) and Hind Siliguri (Bangla) are loaded via a <link> tag in
   includes/header.php, not an @import here - @import blocks the
   browser from starting the font fetch until after it's fully
   downloaded and parsed this whole file first, which is slower and
   less reliable than loading it in parallel from the page's own head. */

:root {
  --primary: #0b2447;
  --primary-dark: #071a33;
  --accent: #cc4e0b;
  --bg: #f3f6fb;
  --bg-alt: #e6ecf5;
  --text: #16202e;
  --muted: #627086;
  --white: #ffffff;
  --border: #dbe3ef;
  --radius: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Inter', 'Hind Siliguri', 'Segoe UI', system-ui, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}

.container { max-width: 1150px; margin: 0 auto; padding: 0 20px; }

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Top bar */
.top-bar { background: var(--primary-dark); color: #cfe0ff; font-size: 0.82rem; padding: 6px 0; }
.top-bar-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px; }

/* Header */
.site-header { background: var(--primary); padding: 0px 0; }
.header-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.logo { color: var(--white) !important; font-size: 1.3rem; font-weight: 700; display: flex; flex-direction: column; }
.logo .tagline { font-size: 0.72rem; font-weight: 400; color: #cfe0ff; }
.logo-img { max-height: 46px; max-width: 220px; display: block; }

/* Header search */
.header-search {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,.12);
  border-radius: 20px;
  padding: 4px 4px 4px 14px;
  flex: 1;
  max-width: 320px;
  margin: 0 16px;
  position: relative;
}
.header-search input {
  background: none;
  border: none;
  color: var(--white);
  flex: 1;
  min-width: 0;
  padding: 5px 0;
  font-size: 0.9rem;
}
.header-search input::placeholder { color: #c5d3ea; }
.header-search input:focus { outline: none; }

/* Live search suggestion dropdown */
.search-suggest {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--white);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  max-height: 420px;
  overflow-y: auto;
  z-index: 1200;
  text-align: left;
}
.search-suggest.open { display: block; }
.search-suggest-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  color: var(--text) !important;
  border-bottom: 1px solid var(--border);
}
.search-suggest-item:last-child { border-bottom: none; }
.search-suggest-item:hover { background: var(--bg); text-decoration: none; }
.search-suggest-thumb {
  width: 46px; height: 46px; border-radius: 8px; background: var(--bg-alt);
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
  overflow: hidden; flex-shrink: 0;
}
.search-suggest-thumb img { width: 100%; height: 100%; object-fit: cover; }
.search-suggest-info { flex: 1; min-width: 0; }
.search-suggest-info .name { font-size: 0.9rem; font-weight: 500; display: block; line-height: 1.3; }
.search-suggest-info .price { color: var(--primary); font-weight: 700; font-size: 0.88rem; }
.search-suggest-info .category { color: var(--muted); font-size: 0.78rem; }
.search-suggest-info .out-of-stock { color: #a12727; font-size: 0.76rem; }
.search-suggest-empty, .search-suggest-loading {
  padding: 16px 14px; color: var(--muted); font-size: 0.88rem; text-align: center;
}
.search-suggest-seeall {
  display: block; text-align: center; padding: 10px; font-size: 0.86rem;
  font-weight: 600; color: var(--primary) !important; border-top: 1px solid var(--border);
  background: var(--bg);
}
.search-suggest-seeall:hover { background: var(--bg-alt); text-decoration: none; }
@media (max-width: 860px) {
  .search-suggest { max-height: 60vh; }
}

/* Searchable District/Thana dropdowns on checkout - reuses the same
   .search-suggest-item/-info/-empty look as the header search dropdown. */
.searchable-select-wrap { position: relative; }
.searchable-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 26px rgba(0,0,0,.15);
  max-height: 240px;
  overflow-y: auto;
  z-index: 50;
  text-align: left;
}
.searchable-dropdown.open { display: block; }
.searchable-dropdown .search-suggest-item { padding: 9px 12px; cursor: pointer; color: var(--text) !important; }
.searchable-dropdown .search-suggest-item .name { font-size: 0.88rem; font-weight: 500; }
.searchable-dropdown .search-suggest-item .category { font-size: 0.74rem; }

.header-search button {
  background: var(--accent);
  border: none;
  color: var(--white);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.9rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Mobile search toggle - hidden on desktop, where the form is always visible */
@media (max-width: 860px) {
  .header-search {
    order: 4;
    max-width: 100%;
    width: 100%;
    flex-basis: 100%;
    margin: 0;
    /* Collapsed by default; .open (toggled by the search icon) reveals it. */
    display: none;
  }
  .header-search.open { display: flex; margin-top: 10px; }
}

/* Unified header icon row: search (mobile), account (mobile), cart
   (always visible, with a count badge), menu (mobile). */
.header-icons { display: flex; align-items: center; gap: 6px; }
.header-icon-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  color: var(--white) !important;
  cursor: pointer;
  padding: 0;
}
.header-icon-btn svg { width: 22px; height: 22px; }
.header-icon-btn:hover { color: var(--accent) !important; text-decoration: none; }
.header-icon-badge {
  position: absolute;
  top: 2px; right: 2px;
  background: var(--accent);
  color: var(--white);
  font-size: 0.66rem;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
}
.mobile-only-icon { display: none; }
@media (max-width: 860px) {
  .mobile-only-icon { display: flex; }
  .header-icons { gap: 0; }
  .header-icon-btn { width: 34px; height: 34px; }
  .header-icon-btn svg { width: 20px; height: 20px; }
}

.main-nav a { color: var(--white) !important; margin-left: 16px; font-size: 0.92rem; }
.main-nav a:hover { text-decoration: none; color: var(--accent) !important; }

/* Menu dropdown (one level) - the wrap only appears around a top-level
   item that actually has children; a plain item with none stays exactly
   as it always was (a bare <a>, no wrapper). */
.nav-dropdown-wrap { position: relative; display: inline-flex; align-items: center; margin-left: 16px; }
.nav-dropdown-wrap a { margin-left: 0 !important; }
.nav-dropdown-toggle {
  background: none; border: none; color: var(--white); opacity: .8;
  font-size: 0.65rem; cursor: pointer; padding: 4px 2px 4px 4px; line-height: 1;
}
.nav-dropdown-menu {
  position: absolute; top: 100%; left: 0; margin-top: 4px;
  background: var(--primary); min-width: 190px;
  display: none; flex-direction: column;
  box-shadow: 0 8px 20px rgba(0,0,0,.22);
  border-radius: 8px; padding: 6px 0; z-index: 60;
}
.nav-dropdown-menu a {
  margin-left: 0 !important; padding: 9px 18px !important; width: 100%;
  border-bottom: none !important; white-space: nowrap;
}
.nav-dropdown-menu a:hover { background: rgba(255,255,255,.08); }
/* Hover reveals it on desktop; the .open class (toggled by JS) covers
   mobile taps and gives desktop a click-based fallback too. */
.nav-dropdown-wrap:hover .nav-dropdown-menu,
.nav-dropdown-wrap.open .nav-dropdown-menu { display: flex; }

/* Mobile nav drawer (hidden on desktop) */
.mobile-nav-close { display: none; }
.mobile-nav-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 1000;
}
.mobile-nav-overlay.open { opacity: 1; pointer-events: auto; }

@media (max-width: 860px) {
  .main-nav {
    display: flex;
    position: fixed;
    top: 0; right: 0;
    height: 100%;
    width: 280px;
    max-width: 85vw;
    background: var(--primary);
    flex-direction: column;
    align-items: flex-start;
    padding: 60px 24px 24px;
    transform: translateX(100%);
    transition: transform .28s ease;
    z-index: 1001;
    overflow-y: auto;
    box-shadow: -6px 0 20px rgba(0,0,0,.2);
  }
  .main-nav.mobile-open { transform: translateX(0); }
  /* Every link stacks one-per-row in the drawer, not side by side. */
  .main-nav a { margin-left: 0; padding: 12px 0; width: 100%; border-bottom: 1px solid rgba(255,255,255,.12); }
  .mobile-nav-close {
    display: block;
    position: absolute;
    top: 16px; right: 18px;
    background: none; border: none;
    color: var(--white); font-size: 1.4rem;
    cursor: pointer; line-height: 1;
  }

  /* Dropdown becomes a tap-to-expand accordion in the drawer - hover
     doesn't exist on touch, so only the JS .open toggle matters here. */
  .nav-dropdown-wrap {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    width: 100%; margin-left: 0; border-bottom: 1px solid rgba(255,255,255,.12);
  }
  .nav-dropdown-wrap a { flex: 1; border-bottom: none !important; }
  .nav-dropdown-toggle { padding: 12px 6px; font-size: 0.9rem; }
  .nav-dropdown-menu {
    position: static; margin-top: 0; width: 100%; flex-basis: 100%;
    background: rgba(0,0,0,.15); box-shadow: none; border-radius: 6px; padding: 2px 0 6px;
  }
  .nav-dropdown-menu a { padding: 10px 12px 10px 22px !important; font-size: 0.88rem; }
}

.page-content { min-height: 60vh; padding-top: 30px; padding-bottom: 50px; }

/* Alerts */
.alert { padding: 12px 16px; border-radius: var(--radius); margin-bottom: 20px; font-size: 0.95rem; }
.alert-success { background: #e6f2df; color: #33591f; border: 1px solid #bcdba6; }
.alert-error { background: #fbe6e6; color: #a12727; border: 1px solid #f2b8b8; }

/* Hero */
.hero {
  background: linear-gradient(120deg, var(--bg-alt), #ecd9b0);
  border-radius: var(--radius);
  padding: 55px 40px;
  margin-bottom: 40px;
  text-align: center;
}
.hero h1 { font-size: 2.1rem; color: var(--primary); margin-bottom: 10px; }
.hero p { color: var(--muted); font-size: 1.1rem; margin-bottom: 25px; }

/* Homepage slider */
.hero-slider {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 40px;
  background: var(--bg-alt);
}
.hero-slider-track {
  display: flex;
  transition: transform .5s ease;
}
.hero-slide {
  min-width: 100%;
  position: relative;
  line-height: 0;
}
.hero-slide a { display: block; line-height: 0; }
.hero-slide img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  background: var(--bg);
  display: block;
}
.hero-slide-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 30px 40px;
  line-height: 1.4; /* restores normal spacing - the parent <a> sets line-height:0 */
  background: linear-gradient(to top, rgba(0,0,0,.55), transparent);
  color: var(--white);
  text-align: left;
}
.hero-slide-caption h2 { margin: 0 0 6px; font-size: 1.6rem; }
.hero-slide-caption p { margin: 0; font-size: 1rem; opacity: .95; }
.hero-slider-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,.4); color: var(--white); border: none;
  width: 40px; height: 40px; border-radius: 50%; font-size: 1.5rem;
  cursor: pointer; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.hero-slider-arrow:hover { background: rgba(0,0,0,.6); }
.hero-slider-prev { left: 16px; }
.hero-slider-next { right: 16px; }
.hero-slider-dots {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px;
}
.hero-slider-dot {
  width: 9px; height: 9px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.55); cursor: pointer; padding: 0;
}
.hero-slider-dot.active { background: var(--white); }
@media (max-width: 640px) {
  .hero-slide img { height: 220px; object-fit: contain; }
  .hero-slide-caption { padding: 16px 20px; }
  .hero-slide-caption h2 { font-size: 1.15rem; }
}

.btn {
  display: inline-block;
  padding: 10px 22px;
  background: var(--primary);
  color: var(--white) !important;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.95rem;
  text-decoration: none !important;
  font-family: inherit;
}
.btn:hover { background: var(--primary-dark); color: var(--white) !important; }
.btn-outline { background: transparent; color: var(--primary) !important; border: 1px solid var(--primary); }
.btn-danger { background: #c0392b; }
.btn-danger:hover { background: #96281c; }
.btn-small { padding: 6px 14px; font-size: 0.85rem; }

/* Buttons with an inline SVG icon (e.g. Add to Cart / Buy Now) */
.btn-icon { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn-icon svg { width: 18px; height: 18px; flex-shrink: 0; }

/* WhatsApp / Call ordering buttons */
.btn-whatsapp { background: #25d366; }
.btn-whatsapp:hover { background: #1da851; }
.btn-call { background: #1f3a93; }
.btn-call:hover { background: #16296b; }
.btn-accent { background: var(--accent); }
.btn-accent:hover { background: #a73f09; }

/* Product page action buttons (Add to Cart / Buy Now / WhatsApp / Call) -
   a 2-column grid so all four line up as a clean 2x2 block. */
.product-action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.product-action-grid .btn {
  border-radius: 14px;
  padding: 14px 12px;
  font-size: 0.98rem;
  font-weight: 600;
  width: 100%;
}
.product-action-grid .btn-outline { border-width: 2px; }
.product-action-grid .btn-icon svg { width: 20px; height: 20px; }
@media (max-width: 480px) {
  .product-action-grid .btn { padding: 12px 8px; font-size: 0.9rem; }
  .product-action-grid .btn-icon svg { width: 18px; height: 18px; }
}

.section-title {
  font-size: 1.4rem;
  color: var(--primary);
  margin: 30px 0 20px;
  border-bottom: 2px solid var(--bg-alt);
  padding-bottom: 8px;
}

/* Product grid */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 22px; }
@media (max-width: 640px) {
  /* auto-fill with a 220px minimum only fits 1 column on a phone -
     force exactly 2 so mobile always shows a grid, not a single stack. */
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .product-body { padding: 10px; }
  .product-body h3 { font-size: 0.95rem; margin-bottom: 4px; }
  .product-body .price { font-size: 1rem; }
  .product-body .muted { font-size: 0.78rem; }
  .product-body .btn-small { padding: 6px 8px; font-size: 0.78rem; }
}

/* Homepage promo banners */
.banner-row {
  display: flex;
  gap: 18px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.banner-item { flex: 1; min-width: 260px; border-radius: var(--radius); overflow: hidden; line-height: 0; }
.banner-item img { width: 100%; height: auto; display: block; }

/* Generic horizontal slider - shared by the category slider and the
   customer review slider on the homepage. Native scroll + snap, so it
   supports touch swipe automatically; the arrow buttons just scrollBy(). */
.h-slider-wrap { position: relative; margin-bottom: 40px; }
.h-slider {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
}
.h-slider::-webkit-scrollbar { height: 6px; }
.h-slider::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; }
.h-slider-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 5;
  background: var(--white); color: var(--primary);
  border: 1px solid var(--border);
  width: 38px; height: 38px; border-radius: 50%;
  font-size: 1.3rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.h-slider-arrow:hover { background: var(--bg-alt); }
.h-slider-prev { left: -14px; }
.h-slider-next { right: -14px; }
@media (max-width: 640px) {
  .h-slider-arrow { width: 32px; height: 32px; font-size: 1.1rem; }
  .h-slider-prev { left: -8px; }
  .h-slider-next { right: -8px; }
}

.category-slide-card {
  flex: 0 0 auto;
  width: 170px;
  scroll-snap-align: start;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--text) !important;
  display: flex;
  flex-direction: column;
}
.category-slide-card:hover { text-decoration: none; box-shadow: 0 8px 20px rgba(11,36,71,.12); }
.category-slide-card .product-body { padding: 12px; text-align: center; }
.category-slide-card h3 { margin: 0; font-size: 0.96rem; }
@media (max-width: 640px) {
  /* Percentage-based (not a fixed px) so exactly 3 cards fit the visible
     row on any phone width, not just one specific screen size. */
  .category-slider { gap: 10px; }
  .category-slide-card { width: calc((100% - 20px) / 3); }
  .category-slide-card .product-img { font-size: 1.5rem; }
  .category-slide-card .product-body { padding: 6px 4px; }
  .category-slide-card h3 { font-size: 0.72rem; line-height: 1.25; }
}

.review-slide-card { flex: 0 0 auto; width: 300px; scroll-snap-align: start; }

/* Customer reviews (homepage) */
.review-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.review-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
}
.review-comment { font-style: italic; margin: 10px 0; color: var(--text); font-size: 0.94rem; line-height: 1.5; }
.review-meta { font-size: 0.88rem; }
.product-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow .15s ease, transform .15s ease;
  display: flex;
  flex-direction: column;
  color: var(--text) !important;
}
.product-card:hover { box-shadow: 0 8px 20px rgba(11,36,71,.12); transform: translateY(-2px); }
.product-card-link { display: flex; flex-direction: column; flex-grow: 1; color: inherit; text-decoration: none; }
.product-card-link:hover { text-decoration: none; color: inherit; }
.product-card-actions { padding-top: 0; }
.product-img { aspect-ratio: 1 / 1; width: 100%; background: var(--bg-alt); display: flex; align-items: center; justify-content: center; font-size: 2.6rem; overflow: hidden; position: relative; }
.product-img img { width: 100%; height: 100%; object-fit: cover; }
.sale-badge {
  position: absolute;
  top: 8px; left: 8px;
  background: #c0392b;
  color: var(--white);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  z-index: 2;
  line-height: 1.4;
}

/* Product page: description / reviews tabs */
.product-tabs-nav {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--border);
  margin-bottom: 20px;
}
.product-tab-btn {
  background: none;
  border: none;
  padding: 10px 18px;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}
.product-tab-btn.active { color: var(--primary); border-bottom-color: var(--accent); }
.product-tab-btn:hover { color: var(--primary); }

/* Product detail page gallery: left thumbnail column + square slider */
.product-gallery { display: flex; gap: 12px; }
.gallery-thumbs-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 68px;
  flex-shrink: 0;
  max-height: 460px;
  overflow-y: auto;
}
.gallery-thumb-v {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  border: 2px solid transparent;
  background: var(--bg-alt);
  flex-shrink: 0;
}
.gallery-thumb-v.active { border-color: var(--primary); }
.gallery-slider-wrap {
  position: relative;
  flex: 1;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-alt);
  max-width: 460px;
}
.gallery-slider { display: flex; height: 100%; transition: transform .3s ease; }
.gallery-slide { min-width: 100%; height: 100%; }
.gallery-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-slide-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 5rem;
}
.gallery-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,.4); color: var(--white); border: none;
  width: 36px; height: 36px; border-radius: 50%; font-size: 1.4rem;
  cursor: pointer; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.gallery-arrow:hover { background: rgba(0,0,0,.6); }
.gallery-arrow-prev { left: 12px; }
.gallery-arrow-next { right: 12px; }
@media (max-width: 640px) {
  .gallery-thumbs-col { width: 52px; }
}
.product-body { padding: 14px; display: flex; flex-direction: column; flex-grow: 1; }
.product-body h3 {
  margin: 0 0 6px; font-weight: 500; line-height: 1.3;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
@media (min-width: 641px) {
  .product-body h3 { font-size: 1.12rem; }
}
@media (min-width: 641px) {
  .product-body .price { font-size: 1.15rem; }
}
.price { color: var(--primary); font-weight: 700; white-space: nowrap; }
.price-row { margin: 4px 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.product-body .btn.mt-20 { margin-top: 8px; }
.product-title { font-size: 1.15rem; font-weight: 700; margin: 0 0 4px; line-height: 1.25; color: var(--text); }
.product-price-row { font-size: 1.75rem; }
@media (max-width: 640px) {
  .product-title { font-size: 1.15rem; }
  .product-price-row { font-size: 1.35rem; }
}
.old-price { color: var(--muted); text-decoration: line-through; font-size: 0.85rem; white-space: nowrap; }
.badge { display: inline-block; background: var(--accent); color: var(--white); font-size: 0.7rem; padding: 3px 9px; border-radius: 20px; margin-bottom: 6px; width: fit-content; }
.muted { color: var(--muted); font-size: 0.88rem; }

/* Forms */
.form-box { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 30px; max-width: 480px; margin: 0 auto; }

/* Order success ("Thank You") page */
.order-success-page { background: #fdf9e9; border-radius: 20px; padding: 30px 20px 50px; }
.order-success-card {
  background: var(--white);
  border-radius: 20px;
  padding: 36px 28px;
  max-width: 460px;
  margin: 0 auto;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,.05);
}
.order-success-check {
  width: 70px; height: 70px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: #22c55e;
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 10px rgba(34,197,94,.15);
}
.order-success-check svg { width: 34px; height: 34px; }
.order-success-thanks { color: #16a34a; font-weight: 700; margin: 0 0 8px; }
.order-success-title { font-size: 1.5rem; font-weight: 800; line-height: 1.35; margin: 0 0 14px; color: var(--text); }
.order-success-sub { color: var(--muted); font-size: 0.92rem; line-height: 1.6; margin: 0 0 22px; }
.order-success-order-no {
  display: inline-block; background: var(--bg); border: 1px solid var(--border);
  border-radius: 20px; padding: 5px 16px; font-size: 0.9rem; color: var(--text);
  margin: 0 0 14px;
}
.order-success-order-no strong { color: var(--primary); }
.order-success-track-link {
  display: block; text-align: center; margin-top: 12px;
  color: var(--primary); font-weight: 600; font-size: 0.92rem;
}
.order-success-track-link:hover { text-decoration: underline; }
.order-success-info-box {
  display: flex; align-items: center; gap: 14px; text-align: left;
  border: 1px solid; border-radius: 14px; padding: 14px 16px; margin-bottom: 14px;
}
.order-success-info-box strong { display: block; font-size: 0.95rem; margin-bottom: 2px; }
.order-success-info-text { display: block; font-size: 0.85rem; color: var(--muted); }
.order-success-info-icon {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.order-success-info-icon svg { width: 20px; height: 20px; }
.order-success-info-gold { background: #fef9e7; border-color: #f5e5a8; }
.order-success-info-gold .order-success-info-icon { background: #f5c542; color: var(--white); }
.order-success-info-blue { background: #eaf3fc; border-color: #bcdcf5; }
.order-success-info-blue .order-success-info-icon { background: #4a9fe0; color: var(--white); }
.order-success-cta {
  display: block; width: 100%; background: #22c55e !important; color: var(--white) !important;
  padding: 14px; border-radius: 12px; font-weight: 700; margin-top: 10px; border: none;
}
.order-success-cta:hover { background: #16a34a !important; text-decoration: none; }
.order-success-brand { margin: 22px 0 0; font-weight: 700; letter-spacing: 0.03em; color: var(--primary); }
.order-success-details { max-width: 460px; margin: 24px auto 0; text-align: center; }
.form-group { margin-bottom: 16px; }
label { display: block; margin-bottom: 5px; font-weight: 600; font-size: 0.9rem; }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=tel], input[type=search], select, textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.95rem;
  font-family: inherit;
}
textarea { resize: vertical; }

/* Rendered product description (from the admin WYSIWYG editor) */
.product-description-html, .page-content-html { font-size: 0.96rem; line-height: 1.7; color: var(--text); }
.product-description-html p, .page-content-html p { margin: 0 0 14px; }
.product-description-html h1, .product-description-html h2, .product-description-html h3,
.page-content-html h1, .page-content-html h2, .page-content-html h3 { color: var(--primary); margin: 20px 0 10px; }
.product-description-html ul, .product-description-html ol,
.page-content-html ul, .page-content-html ol { margin: 0 0 14px; padding-left: 22px; }
.product-description-html li, .page-content-html li { margin-bottom: 4px; }
.product-description-html img, .page-content-html img { max-width: 100%; height: auto; border-radius: 8px; margin: 10px 0; }
/* WordPress renders Unicode emoji (from content copied out of a
   WordPress editor, or from a WooCommerce import) as small <img
   class="emoji"> tags with no width/height of their own, so they
   inherit consistent cross-browser looks - this is WordPress's own
   long-standing convention, not something unique to this site. Without
   this override, the rule above (meant for real product photos) is the
   only sizing information the browser has for these, and an SVG with no
   intrinsic size then renders at the full container width instead of
   at a normal inline-text size. Sized here exactly the way WordPress's
   own default theme CSS already sizes them. */
.product-description-html img.emoji, .page-content-html img.emoji {
  max-width: none; width: 1em; height: 1em;
  border-radius: 0; margin: 0 .07em; vertical-align: -0.1em;
  display: inline;
}
.product-description-html blockquote, .page-content-html blockquote {
  border-left: 3px solid var(--accent); margin: 14px 0; padding: 6px 16px;
  color: var(--muted); font-style: italic;
}
.product-description-html a, .page-content-html a { color: var(--primary); text-decoration: underline; }
/* Pages support tables too (Privacy Policy / Terms often need them) - product descriptions don't currently offer the table button, so this only applies here in practice. */
.page-content-html table { width: 100%; border-collapse: collapse; margin: 0 0 14px; }
.page-content-html table td, .page-content-html table th { border: 1px solid var(--border); padding: 8px 10px; text-align: left; }
.page-content-html table th { background: var(--bg); }

.review-photo {
  display: block;
  width: 90px; height: 90px;
  object-fit: cover;
  border-radius: 8px;
  margin-top: 10px;
  border: 1px solid var(--border);
}

/* Buy together bundle */
.bundle-box {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
}
.bundle-item { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 220px; }
.bundle-item-img {
  width: 56px; height: 56px; border-radius: 8px; background: var(--bg-alt);
  display: flex; align-items: center; justify-content: center; font-size: 1.6rem;
  overflow: hidden; flex-shrink: 0;
}
.bundle-item-img img { width: 100%; height: 100%; object-fit: cover; }
.bundle-item-info {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; cursor: pointer;
  font-weight: 500; font-size: 0.92rem;
}
.bundle-item-info input { width: auto; }
.bundle-item-info .price { font-size: 0.88rem; }

/* Variant selector */
.variant-options { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0; }
.variant-options label {
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 7px 16px;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.9rem;
  margin: 0;
  background: var(--white);
}
.variant-options input { width: auto; display: none; }
.variant-options input:checked + span { color: var(--white); }
.variant-options label:has(input:checked) { background: var(--primary); border-color: var(--primary); color: var(--white); }

/* Tables */
table { width: 100%; border-collapse: collapse; background: var(--white); }
table th, table td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; font-size: 0.92rem; }
.menu-drag-handle { cursor: grab; color: var(--muted); text-align: center; font-size: 1.1rem; user-select: none; }
.menu-drag-handle:active { cursor: grabbing; }
.menu-drag-row-active { opacity: 0.4; background: var(--bg); }
table th { background: var(--bg-alt); color: var(--primary); }
.order-row-repeat-phone { background: #fdeaea; }
.order-row-repeat-phone:hover { background: #fbdcdc; }
.order-row-flagged { background: #fef6e0; }
.order-row-flagged:hover { background: #fdedc4; }

/* Admin list pagination (orders, products) */
.admin-pagination {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px 18px; margin: 14px 0; font-size: 0.9rem;
}
.admin-pagination .pg-info { color: var(--muted); }
.admin-pagination .pg-pages { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.admin-pagination .pg-pages a,
.admin-pagination .pg-pages .pg-current {
  min-width: 34px; padding: 6px 10px; text-align: center;
  border: 1px solid var(--border); border-radius: 6px; background: var(--white); color: var(--text);
}
.admin-pagination .pg-pages a:hover { background: var(--bg); text-decoration: none; }
.admin-pagination .pg-pages .pg-current { background: var(--primary); border-color: var(--primary); color: var(--white); font-weight: 600; }
.admin-pagination .pg-gap { padding: 0 4px; color: var(--muted); }
.admin-pagination .pg-size { display: flex; align-items: center; gap: 6px; }
.admin-pagination .pg-size a,
.admin-pagination .pg-size strong { padding: 4px 10px; border: 1px solid var(--border); border-radius: 6px; }
.admin-pagination .pg-size strong { background: var(--bg); }
.admin-pagination .pg-size a:hover { background: var(--bg); text-decoration: none; }

/* The product you just saved, when the list scrolls to its row */
tr:target { background: #fff6d6; }

/* Admin status messages float over the page (see assets/js/admin.js) so
   they're visible wherever you're scrolled to */
.admin-toast-stack {
  position: fixed; top: 16px; right: 16px; z-index: 3000;
  display: flex; flex-direction: column; gap: 8px;
  width: 420px; max-width: calc(100vw - 32px);
}
.admin-toast-stack .alert {
  position: relative; margin: 0; padding-right: 38px;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
  transition: opacity .4s ease, transform .4s ease;
}
.admin-toast-hide { opacity: 0; transform: translateY(-8px); }
.admin-toast-close {
  position: absolute; top: 8px; right: 10px;
  background: none; border: none; cursor: pointer;
  font-size: 1rem; line-height: 1; color: inherit; opacity: .65;
}
.admin-toast-close:hover { opacity: 1; }

.qty-form { display: flex; gap: 10px; align-items: center; }
.qty-stepper {
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--bg);
  overflow: hidden;
}
.qty-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  color: var(--primary);
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
}
.qty-btn:hover { background: var(--bg-alt); }
.qty-stepper input {
  width: 44px;
  border: none;
  background: none;
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  padding: 0;
  -moz-appearance: textfield;
}
.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-stepper-small { flex-shrink: 0; }
/* Cart page & checkout Order Review specifically (not the cart sidebar,
   whose flex parent has no definite width for a percentage to resolve
   against) - .order-review-info sits in a CSS grid cell with a real
   computed width, so a percentage here behaves predictably. */
.order-review-info .qty-stepper-small {
  width: 120px;
  justify-content: space-between;
}

/* ============ Checkout page ============ */
.checkout-page-title { font-size: 1.5rem; color: var(--primary); margin-bottom: 16px; }

.checkout-guest-note {
  background: #fdf1d6; color: #8a6416; border: 1px solid #f0dba0;
  border-radius: var(--radius); padding: 12px 16px; margin-bottom: 20px; font-size: 0.92rem;
}

/* Free shipping progress bar - shared by the cart sidebar, cart page,
   and checkout summary (rendered by render_free_shipping_bar()). */
.free-shipping-bar {
  background: #eaf1fd;
  border: 1px solid #c7dcf9;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
}
.free-shipping-bar p { margin: 0 0 8px; font-size: 0.86rem; color: #1f4e8f; }
.free-shipping-bar p strong { color: #1a3f73; }
.free-shipping-track { background: #c7dcf9; border-radius: 20px; height: 8px; overflow: hidden; }
.free-shipping-fill { background: #2f6fd6; height: 100%; border-radius: 20px; transition: width .3s ease; }

.fraud-ratio-row { display: flex; align-items: center; gap: 6px; font-size: 0.72rem; margin: 3px 0; }
.fraud-ratio-label { width: 14px; font-weight: bold; color: var(--muted); flex-shrink: 0; }
.fraud-ratio-track { flex: 1; background: #eee; border-radius: 10px; height: 6px; overflow: hidden; }
.fraud-ratio-fill { height: 100%; border-radius: 10px; }
.fraud-ratio-fill.delivery { background: #2e9e4f; }
.fraud-ratio-fill.cancel { background: #d6453d; }
.fraud-ratio-fill.return { background: #d6a53d; }
.fraud-ratio-pct { width: 32px; text-align: right; flex-shrink: 0; color: var(--muted); }
.free-shipping-bar.free-shipping-reached {
  background: #e6f2df; border-color: #bcdba6; color: #2e5c1a;
  font-size: 0.9rem; font-weight: 600; text-align: center; padding: 10px 14px;
}

/* First-visit website popup */
.site-popup-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center;
  z-index: 2000;
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
  padding: 20px;
}
.site-popup-overlay.open { opacity: 1; pointer-events: auto; }
.site-popup-box {
  position: relative;
  background: var(--white);
  border-radius: 12px;
  max-width: 420px;
  width: 100%;
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 50px rgba(0,0,0,.3);
  transform: scale(.96);
  transition: transform .25s ease;
}
.site-popup-overlay.open .site-popup-box { transform: scale(1); }
.site-popup-box img { width: 100%; height: auto; display: block; max-height: 70vh; object-fit: contain; background: var(--bg); }
.site-popup-close {
  position: absolute; top: 8px; right: 8px;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(0,0,0,.55); color: var(--white);
  border: none; font-size: 1.1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 1;
}
.site-popup-close:hover { background: rgba(0,0,0,.75); }
.site-popup-dontshow {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; font-size: 0.86rem; color: var(--muted);
  font-weight: normal; cursor: pointer;
}
.site-popup-dontshow input { width: auto; }

.checkout-layout { display: flex; gap: 26px; align-items: flex-start; }
.checkout-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.checkout-sidebar { width: 340px; flex-shrink: 0; }

/* Card with the orange/gold accent bar + bold title, matching the
   ghorerbazar.com reference layout: "| Section Title" */
.checkout-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.checkout-card-title {
  font-size: 1.05rem;
  color: var(--text);
  margin: 0 0 16px;
  padding-left: 12px;
  border-left: 4px solid var(--accent);
  line-height: 1.3;
}
.checkout-card .form-group:last-child { margin-bottom: 0; }

/* Order review: thumbnail + name/qty-stepper + price + delete.
   Grid (not flex) so the layout can cleanly reflow from one row on
   desktop to two rows on mobile via grid-template-areas, instead of
   cramming 4 elements into one shrinking flex row. */
.order-review-item {
  display: grid;
  grid-template-columns: 56px 1fr auto auto;
  grid-template-areas: "thumb info price remove";
  align-items: center;
  column-gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.order-review-item:last-child { border-bottom: none; padding-bottom: 0; }
.order-review-item:first-child { padding-top: 0; }
.order-review-thumb {
  grid-area: thumb;
  width: 56px; height: 56px; border-radius: 8px; background: var(--bg-alt);
  display: flex; align-items: center; justify-content: center; font-size: 1.6rem;
  overflow: hidden;
}
.order-review-thumb img { width: 100%; height: 100%; object-fit: cover; }
.order-review-info { grid-area: info; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.order-review-name {
  font-weight: 500; font-size: 0.94rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: block; max-width: 100%;
}
.order-review-price { grid-area: price; font-weight: 700; color: var(--primary); white-space: nowrap; }
.order-review-remove {
  grid-area: remove;
  background: #fbe6e6; color: #c0392b; border: none; border-radius: 8px;
  width: 34px; height: 34px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.order-review-remove:hover { background: #f5c6c6; }
.order-review-remove svg { width: 16px; height: 16px; }

@media (max-width: 560px) {
  /* Two rows: thumbnail spans both; name+remove share row 1, qty
     stepper (inside info) + price share row 2 - each row now has
     its own full width instead of splitting one row four ways. */
  .order-review-item {
    grid-template-columns: 52px 1fr auto;
    grid-template-areas:
      "thumb info   remove"
      "thumb info   price";
    row-gap: 6px;
  }
  .order-review-thumb { width: 52px; height: 52px; align-self: start; }
  .order-review-price { align-self: end; justify-self: end; font-size: 0.92rem; }
  .order-review-remove { align-self: start; }
  .order-review-name { font-size: 0.88rem; }
}

/* Payment method: card-grid selection, matching the reference's boxed options */
.payment-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.payment-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  font-size: 0.92rem;
}
.payment-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.payment-icon { font-size: 1.3rem; }
.payment-check {
  position: absolute; top: 8px; right: 8px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); color: var(--white);
  font-size: 0.68rem; display: none; align-items: center; justify-content: center;
}
.payment-option.selected { border-color: var(--accent); background: var(--bg); }
.payment-option.selected .payment-check { display: flex; }

.payment-instructions-box {
  margin-top: 12px;
  padding: 10px 14px;
  background: #eaf1fd;
  border: 1px solid #c7dcf9;
  border-radius: 8px;
  font-size: 0.86rem;
  color: #1f4e8f;
  white-space: pre-line;
}

/* Coupon (collapsible) */
.checkout-coupon-toggle {
  width: 100%; background: none; border: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0; font-size: 1.05rem; font-weight: 600; color: var(--text);
  padding-left: 12px; border-left: 4px solid var(--accent);
}
.checkout-coupon-chevron { transition: transform .2s ease; color: var(--muted); }
.checkout-coupon-toggle.open .checkout-coupon-chevron { transform: rotate(180deg); }
.checkout-coupon-body { display: none; margin-top: 16px; }
.checkout-coupon-body.open { display: block; }
.coupon-input-row { display: flex; gap: 10px; }
.coupon-input-row input { flex: 1; text-transform: uppercase; }
.coupon-applied-chip {
  display: flex; justify-content: space-between; align-items: center;
  background: #e6f2df; border: 1px solid #bcdba6; color: #33591f;
  border-radius: 8px; padding: 10px 14px; font-size: 0.9rem;
}
.coupon-applied-chip button { background: none; border: none; color: #33591f; cursor: pointer; font-size: 1rem; }
.coupon-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.coupon-chip {
  background: var(--bg);
  border: 1px dashed var(--accent);
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.coupon-chip:hover { background: var(--bg-alt); }
.coupon-chip strong { font-size: 0.9rem; color: var(--primary); }
.coupon-chip span { font-size: 0.76rem; color: var(--muted); }

.checkout-trust-badges {
  display: flex; flex-wrap: wrap; gap: 18px; justify-content: center;
  padding: 14px; font-size: 0.86rem; color: var(--muted);
}

/* Sidebar summary */
.checkout-summary-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  position: sticky;
  top: 20px;
}
.checkout-summary-card h3 { margin: 0 0 14px; font-size: 1.05rem; }
.checkout-summary-totals > div { padding: 7px 0; font-size: 0.92rem; }
.checkout-summary-totals .total-row {
  display: flex; justify-content: space-between;
  font-weight: 700; font-size: 1.15rem; color: var(--primary);
  border-top: 1px solid var(--border); margin-top: 8px; padding-top: 12px;
}
.place-order-btn { width: 100%; margin-top: 16px; font-size: 1.15rem; font-weight: 700; padding: 17px; }
.checkout-back-link { display: block; text-align: center; margin-top: 12px; font-size: 0.88rem; color: var(--muted); }

/* Sticky bottom bar (mobile only) - one big Place Order button with the
   live total baked into its own text, always visible without scrolling.
   The sidebar's own button is hidden on mobile since this replaces it
   there; desktop keeps the in-card button instead, since the sticky
   sidebar already stays on-screen there. */
.checkout-sticky-bar { display: none; }
@media (max-width: 900px) {
  .desktop-place-order-btn { display: none; }
  .checkout-sticky-bar {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: var(--white);
    padding: 10px 16px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -4px 16px rgba(0,0,0,.12);
    z-index: 900;
  }
  .place-order-btn-sticky {
    width: 100%;
    font-size: 1.1rem;
    font-weight: 700;
    padding: 15px;
  }
  /* Room at the bottom so the fixed bar never covers the last bit of
     content (trust badges, back-to-cart link, etc.). */
  .checkout-layout { margin-bottom: 76px; }
}

@media (max-width: 900px) {
  .checkout-layout { flex-direction: column; }
  .checkout-sidebar { width: 100%; }
  .checkout-summary-card { position: static; }
  .payment-options { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  /* District/Thana is an inline 2-column grid in checkout.php - stack it
     on narrow phones for more breathing room per field. */
  .checkout-card [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .checkout-card { padding: 16px; }
}

.cart-summary { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; max-width: 360px; margin-left: auto; margin-top: 20px; }
.cart-summary .total-row { display: flex; justify-content: space-between; font-weight: 700; font-size: 1.1rem; margin: 14px 0; }

.status { padding: 3px 10px; border-radius: 20px; font-size: 0.78rem; font-weight: 600; }
.status-pending { background: #fdf1d6; color: #8a6416; }
.status-processing { background: #dcebfb; color: #21578f; }
.status-shipped { background: #e2ddf7; color: #4b3596; }
.status-delivered { background: #e3f6e5; color: #1f6b2a; }
.status-cancelled { background: #fbe6e6; color: #a12727; }

/* TinyMCE toolbar icon-sizing safety net (Admin -> Products description
   editor). TinyMCE normally sizes its own toolbar icons via CSS it loads
   dynamically from wherever its script was fetched from - this can fail
   silently on some CDN setups, leaving icons at their raw, oversized
   default instead of the normal compact toolbar look. These rules pin
   a sane size directly, regardless of whether that dynamic CSS loaded. */
.tox .tox-tbtn { width: 34px; height: 34px; }
.tox .tox-tbtn svg { width: 18px !important; height: 18px !important; }
.tox .tox-tbtn__icon-wrap svg { width: 18px !important; height: 18px !important; }

/* Order tracking progress stepper (track_order.php) */
.order-progress-stepper { display: flex; margin: 18px 0 10px; }
.order-progress-step { flex: 1; position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; }
.order-progress-line {
  position: absolute; top: 22px; right: 50%; width: 100%; height: 3px;
  background: var(--border); z-index: 1;
}
.order-progress-line-done { background: #3b82f6; }
.order-progress-icon {
  position: relative; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--white); border: 2px solid var(--border);
  color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 8px;
}
.order-progress-icon svg { width: 20px; height: 20px; }
.order-progress-step-done .order-progress-icon { background: #3b82f6; border-color: #3b82f6; color: var(--white); }
.order-progress-label { font-size: 0.8rem; color: var(--muted); line-height: 1.3; }
.order-progress-step-done .order-progress-label { color: var(--text); font-weight: 600; }
.order-progress-cancelled {
  margin: 16px 0; padding: 14px; background: #fbe6e6; color: #a12727;
  border-radius: 8px; text-align: center; font-weight: 600;
}
@media (max-width: 480px) {
  .order-progress-icon { width: 36px; height: 36px; }
  .order-progress-icon svg { width: 16px; height: 16px; }
  .order-progress-line { top: 18px; }
  .order-progress-label { font-size: 0.7rem; }
}

/* Admin */
/* Admin pages use the full browser width instead of the storefront's
   1150px reading-width cap - tables (Orders, Products) get real room
   to breathe instead of being squeezed into a column meant for
   product listings and article text. */
.admin-page-content { max-width: none; padding-left: 24px; padding-right: 24px; }
@media (max-width: 860px) {
  .admin-page-content { padding-left: 14px; padding-right: 14px; }
}

.admin-layout { display: flex; gap: 25px; align-items: flex-start; }
.admin-sidebar { width: 200px; background: var(--primary-dark); border-radius: var(--radius); padding: 18px 0; flex-shrink: 0; }
.admin-sidebar > a { display: block; color: var(--white) !important; padding: 10px 20px; font-size: 0.92rem; }
.admin-sidebar > a:hover { background: rgba(255,255,255,.1); text-decoration: none; }
.admin-sidebar > a.active { background: rgba(255,255,255,.16); font-weight: 600; border-left: 3px solid var(--accent); padding-left: 17px; }

/* Collapsible menu groups (E-commerce, Content & Design, Marketing, Settings) */
.admin-menu-group { border-top: 1px solid rgba(255,255,255,.08); }
.admin-menu-group summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  color: var(--white);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.admin-menu-group summary::-webkit-details-marker { display: none; }
.admin-menu-group summary::after { content: '▾'; font-size: 0.75rem; opacity: .7; transition: transform .15s ease; }
.admin-menu-group[open] summary::after { transform: rotate(180deg); }
.admin-menu-group summary:hover { background: rgba(255,255,255,.08); }
.admin-menu-group a {
  display: block;
  color: rgba(255,255,255,.85) !important;
  padding: 9px 20px 9px 36px;
  font-size: 0.86rem;
}
.admin-menu-group a:hover { background: rgba(255,255,255,.1); text-decoration: none; color: var(--white) !important; }
.admin-menu-group a.active { background: rgba(255,255,255,.16); font-weight: 600; color: var(--white) !important; border-left: 3px solid var(--accent); padding-left: 33px; }
.admin-content { flex-grow: 1; min-width: 0; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 16px; margin-bottom: 30px; }
.stat-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
.stat-card .num { font-size: 1.7rem; font-weight: 700; color: var(--primary); }
.stat-card .label { color: var(--muted); font-size: 0.85rem; }

@media (max-width: 860px) {
  /* Sidebar moves above the content. With grouped/collapsible menus now
     in play, a horizontal pill-scroll row no longer fits well - it's a
     compact vertical accordion instead, same as desktop but full width. */
  .admin-layout { flex-direction: column; gap: 14px; }
  /* Phones: the menu is a drawer that slides in from the LEFT when the Menu button is tapped. */
  .admin-mobile-bar { display: flex; align-items: center; position: sticky; top: 0; z-index: 800;
    background: var(--white); padding: 8px 0; border-bottom: 1px solid var(--border); }
  .admin-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 2500;
    width: min(82vw, 300px); max-height: none; overflow-y: auto; border-radius: 0;
    padding-top: 56px; transform: translateX(-102%); transition: transform .25s ease;
    box-shadow: 4px 0 24px rgba(0,0,0,.3); -webkit-overflow-scrolling: touch;
  }
  body.admin-menu-open .admin-sidebar { transform: translateX(0); }
  body.admin-menu-open { overflow: hidden; }
  .admin-sidebar-overlay { display: block; position: fixed; inset: 0; z-index: 2400; background: rgba(0,0,0,.5);
    opacity: 0; pointer-events: none; transition: opacity .25s ease; }
  body.admin-menu-open .admin-sidebar-overlay { opacity: 1; pointer-events: auto; }
  .admin-sidebar-close { display: flex; align-items: center; justify-content: center; position: absolute; top: 8px; right: 10px;
    width: 40px; height: 40px; border: none; border-radius: 50%; background: rgba(255,255,255,.15); color: #fff; font-size: 1.8rem; line-height: 1; cursor: pointer; }
  .admin-content { width: 100%; overflow-x: auto; }
  /* Wide tables scroll within the content column instead of forcing the
     whole page wider than the screen. */
  .admin-content table { min-width: 560px; }
  /* Two-column admin form layouts (products, slider, menu) stack to one
     column - targets the inline grid styles used across those pages. */
  .admin-content [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .variant-row-fields { grid-template-columns: 1fr !important; }
  .variant-row-fields button { justify-self: start; }
  .variant-row-image { flex-wrap: wrap; }
  .variant-row-image input[type=file] { min-width: 0; flex-basis: 100%; }
}

/* Sales report bar chart */
.sales-chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 160px;
  padding-top: 10px;
}
.sales-chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.sales-chart-bar-wrap { flex: 1; display: flex; align-items: flex-end; width: 100%; }
.sales-chart-bar {
  width: 100%;
  background: var(--accent);
  border-radius: 4px 4px 0 0;
  min-height: 2px;
  transition: height .25s ease;
}
.sales-chart-label { font-size: 0.7rem; color: var(--muted); margin-top: 6px; white-space: nowrap; }
@media (max-width: 640px) {
  .sales-chart { height: 120px; }
  .sales-chart-label { font-size: 0.62rem; }
}

.variant-row {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 10px;
  background: var(--white);
}
.variant-row-fields { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr auto; gap: 10px; align-items: center; }
.stock-status-choice, .variant-stock-status-choice {
  display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px;
  font-size: 0.85rem; color: var(--muted);
}
.variant-stock-status-choice { margin: 6px 0 10px; font-size: 0.8rem; }
.stock-status-choice label, .variant-stock-status-choice label {
  display: flex; align-items: center; gap: 5px; font-weight: normal; white-space: nowrap;
}
.stock-status-choice input[type="radio"], .variant-stock-status-choice input[type="radio"] { width: auto; }
.variant-row-image { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }
.variant-row-image img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); flex-shrink: 0; }
.variant-row-image input[type=file] { flex: 1; min-width: 160px; }
.variant-row-image label { display: flex; align-items: center; gap: 5px; font-weight: normal; font-size: 0.82rem; white-space: nowrap; margin: 0; }
.variant-row-image label input { width: auto; }

/* Footer */
/* "Stay Connected" social links section, above the footer */
.social-connect {
  position: relative;
  background: var(--accent);
  padding: 40px 0 55px;
  text-align: center;
  overflow: hidden;
  margin-top: 40px;
}
.social-connect h2 { color: var(--white); font-size: 1.5rem; margin: 0 0 20px; }
.social-connect-icons { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.social-icon {
  width: 46px; height: 46px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--white) !important;
  transition: transform .15s ease;
}
.social-icon svg { width: 24px; height: 24px; }
.social-icon:hover { transform: translateY(-3px); text-decoration: none; }
.social-icon-facebook { background: #1877f2; }
.social-icon-youtube { background: #ff0000; }
.social-icon-instagram { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.social-icon-tiktok { background: #000000; }
.social-icon-whatsapp { background: #25d366; }
.social-icon-twitter { background: #000000; }
.social-connect-wave {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 40px; line-height: 0;
}
.social-connect-wave svg { width: 100%; height: 100%; display: block; }
.site-footer { background: var(--primary-dark); color: #cfe0ff; padding: 35px 0 15px; font-size: 0.9rem; margin-top: 40px; }
/* When the social-connect section IS shown, it already sits right above
   the footer with its wave flowing directly into it - the footer's own
   top margin would otherwise reopen a gap between them and break that
   seamless look. Only applies when social-connect is actually present;
   the footer keeps its normal spacing on pages without it. */
.social-connect + .site-footer { margin-top: 0; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 20px; margin-bottom: 20px; }
.site-footer h3, .site-footer h4 { color: var(--white); margin: 0 0 10px; }
.footer-logo-img { max-height: 42px; max-width: 200px; display: block; margin-bottom: 10px; }
.site-footer a { color: #cfe0ff !important; }
.copyright { text-align: center; border-top: 1px solid rgba(255,255,255,.15); padding-top: 14px; font-size: 0.82rem; }

.flex-between { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.text-right { text-align: right; }
.mt-20 { margin-top: 20px; }

/* Floating cart widget - fixed to the right edge on every page */
.floating-cart-btn {
  position: fixed;
  top: 62%;
  right: 0;
  transform: translateY(-50%);
  z-index: 850;
  background: var(--accent);
  color: var(--white);
  border: none;
  border-radius: 12px 0 0 12px;
  box-shadow: -3px 3px 14px rgba(0,0,0,.22);
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  text-align: center;
  line-height: 1.2;
}
.floating-cart-btn:hover { background: #a73f09; }
.floating-cart-btn svg { width: 22px; height: 22px; }
.floating-cart-btn span { font-size: 0.72rem; white-space: nowrap; }
.floating-cart-btn strong { font-size: 0.82rem; white-space: nowrap; }
@media (max-width: 640px) {
  .floating-cart-btn { top: auto; bottom: 90px; transform: none; padding: 9px 8px; }
  .floating-cart-btn svg { width: 18px; height: 18px; }
}

/* Cart sidebar */
.cart-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 998;
}
.cart-overlay.open { opacity: 1; pointer-events: auto; }
.cart-sidebar {
  position: fixed; top: 0; right: 0; height: 100%; width: 400px; max-width: 92vw;
  background: var(--white); box-shadow: -6px 0 20px rgba(0,0,0,.18);
  transform: translateX(100%); transition: transform .28s ease;
  z-index: 999; display: flex; flex-direction: column;
}
.cart-sidebar.open { transform: translateX(0); }
.cart-sidebar-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px; background: var(--primary); color: var(--white); flex-shrink: 0;
}
.cart-sidebar-header h3 { margin: 0; font-size: 1.05rem; }
.cart-sidebar-close { background: none; border: none; color: var(--white); font-size: 1.3rem; cursor: pointer; line-height: 1; }
.cart-sidebar-body { flex: 1; overflow-y: auto; padding: 6px 20px; }
.cart-sidebar-footer { padding: 16px 20px; border-top: 1px solid var(--border); background: var(--bg); flex-shrink: 0; }
.cart-sidebar-item {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 14px 0; border-bottom: 1px solid var(--border);
}
.csi-info { display: flex; flex-direction: column; gap: 4px; font-size: 0.9rem; flex: 1; }
.csi-thumb { width: 48px; height: 48px; border-radius: 6px; background: var(--bg-alt); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; overflow: hidden; flex-shrink: 0; }
.csi-thumb img { width: 100%; height: 100%; object-fit: cover; }
.csi-controls { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.csi-qty { width: 58px; padding: 6px; text-align: center; }
.csi-remove { background: none; border: none; color: #c0392b; font-size: 1.1rem; cursor: pointer; padding: 4px; }
.csi-remove:hover { color: #96281c; }

@media (max-width: 480px) {
  .cart-sidebar { width: 100%; max-width: 100%; }
}

/* Language switcher (header top bar, admin sidebar) */
.lang-switch { display: inline-flex; gap: 4px; align-items: center; }
.lang-switch a {
  color: var(--bg); border: 1px solid rgba(255,255,255,.35); padding: 1px 11px;
  border-radius: 999px; font-size: 0.8rem; line-height: 1.6; text-decoration: none;
}
.lang-switch a:hover { background: rgba(255,255,255,.14); text-decoration: none; }
.lang-switch a.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.admin-lang-switch { margin: 0 0 10px; }
.admin-lang-switch a { color: var(--primary); border-color: var(--border); background: #fff; }
.admin-lang-switch a:hover { background: var(--bg-alt); }
.admin-lang-switch a.active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* Bangla twin fields in the admin forms */
.lang-bn-field { border-left: 3px solid var(--accent); padding-left: 10px; }
.variant-row-bn-name { margin-top: 8px; border-left: 3px solid var(--accent); padding-left: 10px; }
.variant-row-bn-name input { width: 100%; }

/* Desktop header: logo, a wide search bar and the cart button in the middle row,
   the menu on its own full-width row underneath. (Mobile keeps its slide-out menu.) */
@media (min-width: 861px) {
  .site-header { padding: 0px 0; }
  .header-inner { row-gap: 0; }
  .header-search { max-width: 560px; margin: 0 28px; }
  .main-nav {
    order: 3; flex: 0 0 100%;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    margin-top: 14px; padding: 4px 0; gap: 0;
    border-top: 1px solid rgba(255,255,255,.16);
  }
  .main-nav > a, .main-nav .nav-dropdown-wrap { margin: 0 14px; padding: 9px 0; }
  .main-nav .nav-dropdown-wrap a { padding: 0; }
  .main-nav .nav-dropdown-menu { top: calc(100% - 4px); }
}

/* Product page: delivery info line under the price */
.delivery-info { margin: 16px 0 6px; padding: 9px 12px; background: #f1f8f2; border: 1px solid #cfe6d3; border-radius: 8px; font-size: 0.9rem; line-height: 1.6; color: #1f5130; }
.delivery-info .di-cod { font-weight: 700; }
.delivery-info .di-sep { opacity: .45; margin: 0 2px; }

/* Product page: Buy-now bar pinned to the bottom on phones/tablets (the checkout page does the same) */
.product-sticky-bar { display: none; }
@media (max-width: 900px) {
  .product-sticky-bar {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    background: var(--white); padding: 10px 16px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -4px 16px rgba(0,0,0,.12);
  }
  .product-sticky-btn { width: 100%; font-size: 1.1rem; font-weight: 700; padding: 15px; }
  body.has-product-sticky { padding-bottom: 76px; }
}

/* Product gallery: swipe, auto-slide, zoom (no arrow buttons) */
.gallery-slider-wrap { touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: zoom-in; }
.gallery-slider.dragging { transition: none; }
.gallery-slide img { -webkit-user-drag: none; pointer-events: none; }
.gallery-zoom-btn {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.92); color: #222; box-shadow: 0 1px 6px rgba(0,0,0,.25);
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.gallery-zoom-btn svg { width: 20px; height: 20px; }
.gallery-dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 6px; z-index: 2; pointer-events: none; }
.gallery-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.65); box-shadow: 0 0 2px rgba(0,0,0,.45); transition: all .2s; }
.gallery-dot.active { background: #fff; width: 18px; border-radius: 4px; }
.gallery-lightbox { display: none; position: fixed; inset: 0; z-index: 5000; background: rgba(0,0,0,.94); flex-direction: column; }
.gallery-lightbox.open { display: flex; }
body.gallery-lb-open { overflow: hidden; }
.glb-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: none; }
.glb-img { max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; will-change: transform; }
.glb-close { position: absolute; top: 10px; right: 12px; z-index: 2; width: 44px; height: 44px; border: none; border-radius: 50%; background: rgba(255,255,255,.18); color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; }
.glb-count { position: absolute; top: 18px; left: 16px; z-index: 2; color: #fff; font-size: .95rem; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.glb-tools { position: absolute; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); left: 0; right: 0; display: flex; justify-content: center; gap: 14px; z-index: 2; }
.glb-tools button { width: 48px; height: 48px; border: none; border-radius: 50%; background: rgba(255,255,255,.2); color: #fff; font-size: 1.7rem; line-height: 1; cursor: pointer; }

/* Admin menu button + drawer helpers (hidden on desktop, where the sidebar stays beside the content) */
@media (min-width: 861px) { .admin-mobile-bar, .admin-sidebar-overlay, .admin-sidebar-close { display: none; } }
.admin-menu-toggle { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--border); background: var(--white);
  border-radius: 8px; padding: 9px 14px; font-size: 1rem; font-weight: 600; cursor: pointer; color: var(--text, #222); }
.admin-menu-icon, .admin-menu-icon::before, .admin-menu-icon::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; }
.admin-menu-icon { position: relative; }
.admin-menu-icon::before, .admin-menu-icon::after { content: ''; position: absolute; left: 0; }
.admin-menu-icon::before { top: -6px; }
.admin-menu-icon::after { top: 6px; }

/* Offer countdown beside the price (small, wraps under the price on narrow phones) */
.pcd { display: inline-flex; align-items: center; gap: 3px; font-size: 1rem; line-height: 1; margin-left: 6px; vertical-align: middle; }
.pcd-ico { font-size: .85rem; margin-right: 1px; }
.pcd-u { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 34px; padding: 4px 3px 3px; background: #fff1f0; border: 1px solid #f5c2bf; border-radius: 6px; color: #b42318; }
.pcd-u b { font-size: .95rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.pcd-u i { font-style: normal; font-size: .5rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; margin-top: 2px; opacity: .85; }
@media (max-width: 400px) {
  .pcd { margin-left: 0; gap: 2px; }
  .pcd-u { min-width: 30px; padding: 3px 2px 2px; }
  .pcd-u b { font-size: .85rem; }
}

/* Offer-notification request bar */
.push-bar { position: fixed; left: 12px; right: 12px; bottom: 14px; max-width: 420px; margin: 0 auto; z-index: 950; background: #fff; color: #222; border: 1px solid #e3e3e3; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.18); padding: 12px 14px; font-size: .9rem; line-height: 1.45; transform: translateY(30px); opacity: 0; transition: transform .25s ease, opacity .25s ease; }
.push-bar-show { transform: none; opacity: 1; }
.push-bar-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.push-bar-no, .push-bar-yes { font: inherit; font-size: .85rem; font-weight: 600; padding: 7px 16px; border-radius: 8px; cursor: pointer; border: 1px solid transparent; }
.push-bar-no { background: transparent; color: #666; border-color: #ddd; }
.push-bar-yes { background: var(--accent); color: #fff; }
body.has-product-sticky .push-bar { bottom: 88px; }

/* SMS setup: one tab per order status */
.sms-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; border-bottom: 1px solid #e3e3e3; padding-bottom: 8px; }
.sms-tab { font: inherit; font-size: .85rem; padding: 7px 12px; border: 1px solid #ddd; background: #fff; border-radius: 8px; cursor: pointer; color: #444; display: inline-flex; align-items: center; gap: 6px; }
.sms-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.sms-dot { width: 8px; height: 8px; border-radius: 50%; background: #c9c9c9; display: inline-block; }
.sms-dot.on { background: #22a559; box-shadow: 0 0 0 2px rgba(34,165,89,.25); }
.sms-tabs-ready .sms-panel { display: none; }
.sms-tabs-ready .sms-panel.active { display: block; }
/* Orders list: "5 min ago" / date, click for the exact time */
.otime { cursor: pointer; border-bottom: 1px dotted #999; white-space: nowrap; }