/* =========================================================
   Seven Day Toys — "Kids & Colourful"
   Values taken verbatim from the reference design tokens:
   brand #ef3d76 · brand2 #5fb733 · ink #26202b · muted #7a6f80
   page #ffffff · soft #fff4f8 · line #f7dfe8 · radius 22px
   navBg #5fb733 · navFg #ffffff · navActive #ffe14d
   head 'Baloo 2' · body Poppins
   ========================================================= */

:root {
  --brand: #ef3d76;
  --brand2: #5fb733;
  --ink: #26202b;
  --muted: #7a6f80;
  --page: #ffffff;
  --soft: #fff4f8;
  --line: #f7dfe8;
  --radius: 22px;

  /* card art stripes: soft 0-22px, page 22-44px */
  --art-stripes: repeating-linear-gradient(135deg,
      var(--soft) 0px, var(--soft) 22px,
      var(--page) 22px, var(--page) 44px);
  /* hero panel stripes: page 0-11px, soft 11-22px */
  --hero-stripes: repeating-linear-gradient(135deg,
      var(--page) 0px, var(--page) 11px,
      var(--soft) 11px, var(--soft) 22px);

  /* Bootstrap overrides */
  --bs-primary: var(--brand);
  --bs-primary-rgb: 239, 61, 118;
  --bs-secondary: var(--brand2);
  --bs-secondary-rgb: 95, 183, 51;
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--page);
  --bs-border-radius: var(--radius);
  --bs-border-color: var(--line);
  --bs-link-color: var(--brand);
  --bs-link-hover-color: var(--brand);
  --bs-font-sans-serif: 'Poppins', sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  color: var(--ink);
  background: var(--page);
  font-size: 13.5px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Baloo 2', cursive;
  font-weight: 800;
  color: var(--ink);
  margin: 0;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--brand); }

.text-muted-sdt { color: var(--muted) !important; }
.bg-tint { background: var(--soft) !important; }

/* The design is a full-width canvas with 28px side padding */
.container, .container-fluid {
  width: 100%;
  max-width: 100%;
  padding-left: 28px;
  padding-right: 28px;
  margin: 0 auto;
}

/* ---------- Buttons ---------- */
.btn {
  border-radius: 999px;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 13.5px;
  padding: 13px 26px;
  border: none;
  cursor: pointer;
  line-height: 1.2;
}
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background: #db2f66; color: #fff;
}
.btn-ghost {
  padding: 13px 24px;
  border: 2px solid var(--ink);
  background: transparent;
  color: var(--ink);
}
.btn-ghost:hover { background: var(--ink); color: #fff; }
.btn-outline-primary { color: var(--brand); border: 2px solid var(--brand); background: transparent; }
.btn-outline-primary:hover { background: var(--brand); color: #fff; }
.btn-success, .btn-in-cart { background: var(--brand2); color: var(--ink); }
.btn-success:hover, .btn-in-cart:hover { background: #53a12c; color: var(--ink); }
.btn-sm-pill { padding: 7px 13px; font-size: 12.5px; font-weight: 600; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header { z-index: 1030; }

.top-bar {
  background: #fff;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.top-bar-inner {
  display: grid;
  grid-template-columns: 210px 1fr auto auto;
  align-items: center;
  gap: 28px;
  padding: 16px 28px;
}
/* Logo + "Toys & Games" stack, centred on every screen size. */
.brand-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
  text-decoration: none;
  color: inherit;
}
.brand-logo { width: 168px; height: auto; display: block; max-width: 100%; }
.brand-name { display: block; font-size: 17px; font-weight: 600; line-height: 1.2; }

/* search: pill with a 2px brand border, button flush inside */
.search-form {
  display: flex;
  align-items: center;
  gap: 0;
  border: 2px solid var(--brand);
  border-radius: 999px;
  overflow: hidden;
  background: var(--page);
}
.search-form input {
  flex: 1 1 0;
  min-width: 0;
  padding: 11px 18px;
  border: none;
  outline: none;
  font-size: 13.5px;
  font-family: inherit;
  color: var(--ink);
  background: transparent;
}
.search-form input::placeholder { color: var(--muted); }
.search-form button {
  flex: none;
  white-space: nowrap;
  padding: 11px 22px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .04em;
  background: var(--brand);
  color: #fff;
}

.wa-block { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.wa-icon {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: #25D366;
  display: grid; place-items: center;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  flex: none;
}
.wa-text { line-height: 1.25; }
.wa-label { font-size: 10.5px; color: var(--muted); letter-spacing: .04em; }
.wa-number { font-size: 13.5px; font-weight: 800; color: var(--ink); }

.enquiry-cart-btn {
  flex: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  background: var(--brand);
  color: #fff;
}
.enquiry-cart-btn:hover { color: #fff; background: #db2f66; }
.cart-badge {
  min-width: 22px; height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  display: grid; place-items: center;
  font-size: 11.5px;
  font-weight: 800;
  background: var(--brand2);
  color: var(--ink);
}

/* ---------- Green nav ---------- */
.main-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 28px;
  background: var(--brand2);
  color: #fff;
  border-top: 1px solid var(--line);
}
/* Desktop layout for the link row. This lives here rather than as
   Bootstrap's .d-flex utility class, because that utility is
   "display:flex !important" and would win against the mobile
   "display:none" below — keeping the menu open and making the
   hamburger appear dead. */
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}
.main-nav a {
  white-space: nowrap;
  flex: none;
  padding: 13px 16px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
  border-bottom: 3px solid transparent;
}
.main-nav a:hover { color: #fff; opacity: .88; }
.main-nav a.active { border-bottom-color: #ffe14d; }
.nav-tagline {
  margin-left: auto;
  font-size: 12px;
  letter-spacing: .04em;
  opacity: .85;
}
.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 8px;
  color: #fff;
  padding: 6px 10px;
  margin: 7px 0;
  cursor: pointer;
  font-size: 15px;
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: center;
  padding: 46px 28px;
  background: linear-gradient(180deg, #fff4f8 0%, #eefbe6 100%);
}
.hero-copy { max-width: 520px; }
.hero-kicker {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 12px;
}
.hero h1 {
  font-family: 'Baloo 2', cursive;
  font-size: 46px;
  line-height: 1.05;
  margin: 0 0 16px;
  font-weight: 800;
  color: var(--ink);
}
.hero h1 .accent { color: var(--brand); }
.hero-sub {
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 24px;
  max-width: 460px;
}
.hero-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

.hero-art {
  height: 300px;
  overflow: hidden;
  padding: 14px;
  position: relative;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  background: var(--hero-stripes);
  border: 1px solid var(--line);
}
.hero-art img {
  position: absolute;
  inset: 14px;
  width: calc(100% - 28px);
  height: calc(100% - 28px);
  object-fit: contain;
  display: block;
}

/* ---------- Trust strip ---------- */
.trust-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 20px 28px;
  background: var(--soft);
  border-bottom: 1px solid var(--line);
}
.trust-item { display: flex; gap: 12px; align-items: center; }
.trust-icon {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: rgba(239, 61, 118, .12);   /* var(--brand) at 12% */
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.trust-icon svg { width: 19px; height: 19px; display: block; }

.trust-title { font-size: 13px; font-weight: 800; color: var(--ink); }
.trust-sub { font-size: 11.5px; color: var(--muted); }

/* =========================================================
   SECTION HEADS
   ========================================================= */
.section-head {
  padding: 34px 28px 8px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.section-head h1, .section-head h2 {
  font-family: 'Baloo 2', cursive;
  font-size: 24px;
  font-weight: 800;
  margin: 0;
  color: var(--ink);
}
.link-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--brand);
  white-space: nowrap;
}
.page-title {
  font-family: 'Baloo 2', cursive;
  font-size: 30px;
  font-weight: 800;
  margin: 6px 0 0;
  color: var(--ink);
}

/* =========================================================
   CATEGORY TILES
   ========================================================= */
.cat-grid {
  padding: 0 28px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.category-card {
  padding: 0 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--page);
  cursor: pointer;
  text-align: center;
  overflow: hidden;
  display: block;
  color: var(--ink);
}
.category-card:hover { color: var(--ink); }
.category-card .cat-art {
  height: 118px;
  background-color: var(--soft);
  background-position: center;
  background-size: 72% auto;
  background-repeat: no-repeat;
}
.category-card .cat-name {
  font-family: 'Baloo 2', cursive;
  font-size: 13.5px;
  font-weight: 700;
  margin-top: 10px;
  color: var(--ink);
}
.category-card .cat-count { font-size: 11px; color: var(--muted); }

/* =========================================================
   PRODUCT CARDS
   ========================================================= */
.product-grid {
  padding: 0 28px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
/* Listing page: the grid sits inside a 9-column layout, so it starts at 3
   across and steps down with the media queries below. Keep this as a class —
   an inline style would beat every @media rule. */
.listing-grid {
  padding: 0;
  grid-template-columns: repeat(3, 1fr);
}
.product-card {
  background: var(--page);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.product-card .art {
  position: relative;
  cursor: pointer;
  height: 168px;
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background-image: var(--art-stripes);
  background-position: center;
  background-repeat: no-repeat;
}
.product-card .art.has-img {
  background-size: 78% auto, auto;
  background-position: center center, 0 0;
  background-repeat: no-repeat, repeat;
}
.badge-tag {
  position: absolute;
  top: 10px; left: 10px;
  white-space: nowrap;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--brand);
  color: #fff;
}
.badge-tag.badge-new { background: var(--brand2); color: var(--ink); }

.product-card .body {
  padding: 14px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-grow: 1;
}
.product-card .sku {
  font-family: Menlo, Consolas, monospace;
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: .04em;
}
.product-card .title {
  font-family: 'Baloo 2', cursive;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
  margin: 0;
}
.price-row { display: flex; align-items: baseline; gap: 8px; }
.price {
  font-family: 'Baloo 2', cursive;
  font-size: 19px;
  font-weight: 800;
  color: var(--ink);
}
.mrp { font-size: 12.5px; color: var(--muted); text-decoration: line-through; }
.moq { font-size: 11.5px; color: var(--muted); }

.cta-row { display: flex; gap: 8px; align-items: center; margin-top: 2px; }
.qty-select {
  flex: none;
  height: 30px;
  padding: 0 26px 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background-color: var(--soft);
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 9px 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.qty-select:focus { outline: none; border-color: var(--ink); }

.add-btn {
  flex: 1;
  /* Without this, "white-space: nowrap" below sets a min-content floor that
     flex refuses to shrink past, and the button overflows a narrow card. */
  min-width: 0;
  padding: 9px 10px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  background: var(--brand);
  color: #fff;
  white-space: nowrap;
}
.add-btn.in-cart { background: var(--brand2); color: var(--ink); }
.add-btn:disabled { background: var(--line); color: var(--muted); cursor: default; }

/* =========================================================
   LISTING PAGE
   ========================================================= */
.filters-panel {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--page);
  align-self: start;
}
.filter-head {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 18px 0 10px;
}
.filter-head:first-child { margin-top: 0; }
.filters-panel .form-check-label { font-size: 12.5px; color: var(--muted); }
.age-chip {
  display: inline-block;
  padding: 7px 13px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  margin: 0 4px 6px 0;
}
.age-chip.active, .age-chip:hover { border-color: var(--brand); background: var(--brand); color: #fff; }
.sort-select {
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12.5px;
  font-family: inherit;
  color: var(--ink);
  background: var(--page);
}
.crumb { font-size: 11.5px; color: var(--muted); }
.crumb-active { font-size: 11.5px; font-weight: 700; color: var(--brand); }
.result-count { font-size: 12.5px; color: var(--muted); margin-top: 6px; }

/* =========================================================
   BULK CTA BANNER
   ========================================================= */
.bulk-wrap { padding: 36px 28px 0; }
.bulk-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 28px 30px;
  border-radius: var(--radius);
  background: var(--soft);
  border: 1px dashed var(--brand);
}
.bulk-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand);
}
.bulk-title {
  font-family: 'Baloo 2', cursive;
  font-size: 24px;
  font-weight: 800;
  margin: 6px 0;
  color: var(--ink);
}
.bulk-sub { font-size: 13.5px; color: var(--muted); max-width: 620px; }

/* =========================================================
   PRODUCT DETAIL
   ========================================================= */
.detail-img-main {
  height: 380px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background-image: var(--art-stripes);
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}
.detail-img-main.has-img {
  background-size: 78% auto, auto;
  background-position: center center, 0 0;
  background-repeat: no-repeat, repeat;
}
.thumb-strip img {
  width: 64px; height: 64px; object-fit: contain;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 6px;
}
.spec-table th { color: var(--muted); font-weight: 500; width: 40%; font-size: 12.5px; }
.spec-table td { font-size: 12.5px; }
.spec-table td, .spec-table th { padding: 8px 0; border-bottom: 1px solid var(--line); }

/* =========================================================
   CART / FORMS
   ========================================================= */
.cart-line-item img {
  width: 68px; height: 68px; object-fit: contain;
  background: var(--soft); border-radius: 14px; padding: 6px;
}
.summary-panel {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
}
.step-indicator { display: flex; gap: 8px; margin-bottom: 24px; }
.step-indicator .step {
  flex: 1;
  text-align: center;
  padding: 9px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--muted);
  font-weight: 700;
  font-size: 12.5px;
  border: 1px solid var(--line);
}
.step-indicator .step.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.form-label { font-size: 12px; font-weight: 600; color: var(--muted); }
.form-control, .form-select, textarea {
  font-size: 13px;
  font-family: inherit;
  border-color: var(--line);
  border-radius: 12px;
}
.form-control:focus, .form-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 .2rem rgba(239, 61, 118, .12);
}
.purpose-chip input { display: none; }
.purpose-chip label {
  display: inline-block;
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  margin: 0 4px 6px 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}
.purpose-chip input:checked + label { background: var(--brand); border-color: var(--brand); color: #fff; }

.success-icon {
  width: 78px; height: 78px;
  border-radius: 50%;
  background: var(--brand2);
  color: #fff;
  display: grid; place-items: center;
  font-size: 34px;
  margin: 0 auto 14px;
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  margin-top: 40px;
  padding: 36px 28px 18px;
  background: var(--ink);
  color: #fff;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
}
/* Footer brand: same logo + name stack as the header. */
.footer-brand {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
  margin-bottom: 14px;
  text-decoration: none;
  color: #fff;
}
.footer-logo { width: 140px; height: auto; display: block; max-width: 100%; }
.footer-brand .brand-name { font-size: 15px; color: #fff; }
.footer-heading {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 12px;
  color: var(--brand2);
}
.footer-text, .footer-links a {
  font-size: 12.5px;
  line-height: 1.9;
  color: rgba(255, 255, 255, .66);
  display: block;
}
.footer-links a:hover { color: #fff; }
.footer-bar {
  margin-top: 26px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: 11.5px;
  color: rgba(255, 255, 255, .45);
}

/* =========================================================
   ADMIN
   ========================================================= */
.admin-table th { font-family: 'Baloo 2', cursive; font-size: 13px; }
.admin-table td { font-size: 12.5px; }

/* Private back-office: deliberately separate from the colourful storefront. */
.admin-body { background:#f5f7fb; color:#1d2939; }.admin-shell{min-height:100vh;display:grid;grid-template-columns:248px minmax(0,1fr)}.admin-sidebar{background:#182230;color:#c9d2df;padding:26px 16px;display:flex;flex-direction:column;gap:8px}.admin-brand{display:flex;align-items:center;gap:10px;color:#fff;font-size:20px;margin:0 8px}.admin-brand span{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:#ef3d76;font-size:12px;font-family:Poppins,sans-serif}.admin-site-name{margin:18px 8px 10px;color:#8d9bad;font-size:11px;text-transform:uppercase;letter-spacing:.12em}.admin-nav{display:grid;gap:4px}.admin-nav a,.admin-visit{padding:11px 12px;border-radius:9px;color:#c9d2df;font-size:13px;font-weight:600}.admin-nav a:hover,.admin-nav a.active{color:#fff;background:#344054}.admin-visit{margin:auto 0 0;border:1px solid #475467;color:#fff;text-align:center}.admin-main{min-width:0;padding:28px 34px 50px}.admin-topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:26px;border-bottom:1px solid #e4e7ec}.admin-topbar h1{font-family:Poppins,sans-serif;font-size:25px;font-weight:700;color:#101828}.admin-eyebrow{color:#667085;font-size:11px;text-transform:uppercase;font-weight:700;letter-spacing:.1em;margin-bottom:4px}.admin-logout{color:#b42318;font-weight:700;font-size:13px}.admin-content{max-width:1250px;margin:28px auto 0}.admin-alert{max-width:1250px;margin:20px auto 0}.admin-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.admin-stat,.admin-card{background:#fff;border:1px solid #e4e7ec;border-radius:12px;box-shadow:0 1px 2px rgba(16,24,40,.04)}.admin-stat{padding:20px;display:grid;gap:8px}.admin-stat span,.admin-stat small,.admin-toolbar p,.admin-form p{color:#667085;font-size:12px;margin:0}.admin-stat strong{font-size:25px;color:#101828}.admin-stat a,.admin-link{color:#b42362;font-weight:700;font-size:12px}.admin-actions{margin-top:18px;padding:24px}.admin-actions h2,.admin-form h2{font-family:Poppins,sans-serif;font-size:17px}.admin-actions p{color:#667085;margin:7px 0 18px}.admin-button{display:inline-block;background:#b42362;color:#fff;border:1px solid #b42362;border-radius:8px;padding:9px 14px;font:700 12px Poppins,sans-serif;cursor:pointer}.admin-button:hover{color:#fff;background:#8f1b4e}.admin-button.secondary{color:#344054;background:#fff;border-color:#d0d5dd;margin-left:8px}.admin-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px}.admin-card{padding:0 20px}.admin-form{padding:24px}.admin-form .admin-toolbar{margin-bottom:22px}.admin-data-table{margin:0}.admin-data-table th{color:#475467;font-size:11px;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}.admin-data-table td{color:#344054;font-size:12.5px}.admin-link{background:none;border:none;padding:3px}.admin-link.danger{color:#b42318;margin-left:7px}.admin-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.admin-form-grid label,.admin-status-form label{display:grid;gap:6px;color:#344054;font-size:12px;font-weight:700}.admin-form-grid input,.admin-form-grid select,.admin-form-grid textarea,.admin-status-form select{width:100%;padding:9px 10px;border:1px solid #d0d5dd;border-radius:7px;font:13px Poppins,sans-serif;color:#101828;background:#fff}.admin-form-grid textarea{resize:vertical}.admin-full{grid-column:1/-1}.admin-checks{display:flex;gap:22px;margin:20px 0;font-size:13px}.admin-status-form{display:flex;align-items:end;gap:10px;margin:16px 0}.admin-status-form select{min-width:150px}.admin-status{text-transform:capitalize;padding:4px 8px;border-radius:999px;font-size:11px;font-weight:700;background:#f2f4f7}.admin-status.new{color:#b54708;background:#fffaeb}.admin-status.contacted{color:#175cd3;background:#eff8ff}.admin-status.quoted{color:#7a5af8;background:#f4f3ff}.admin-status.closed{color:#027a48;background:#ecfdf3}

/* =========================================================
   RESPONSIVE
   ========================================================= */
.admin-page-intro{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:21px}.admin-page-intro h2{margin:4px 0;color:#182230;font:800 25px 'Plus Jakarta Sans',Poppins,sans-serif;letter-spacing:-.05em}.admin-page-intro p:not(.admin-section-label){margin:0;color:#667085;font-size:13px}.admin-list-card{padding:4px 20px}.admin-data-table tbody tr{transition:background .2s}.admin-data-table tbody tr:hover{background:#fff8fb}.admin-product-cell{display:flex;align-items:center;gap:10px;min-width:175px}.admin-product-avatar{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#ffe3ed,#f5d6ff);color:#b42362}.admin-code{font:600 10px Menlo,Consolas,monospace;color:#667085}.admin-soft-tag,.admin-stock,.admin-mini-badge{display:inline-block;padding:4px 8px;border-radius:999px;font-size:10px;font-weight:700}.admin-soft-tag{color:#475467;background:#f2f4f7}.admin-stock.in_stock{color:#027a48;background:#ecfdf3}.admin-stock.limited{color:#b54708;background:#fffaeb}.admin-stock.out_of_stock{color:#b42318;background:#fef3f2}.admin-mini-badge.pink{color:#b42362;background:#fff0f5}.admin-mini-badge.gold{color:#a15c00;background:#fff1d7}.admin-category-card{display:flex;flex-direction:column;gap:15px;padding:22px;border-radius:15px;border:1px solid #e4e7ec;background:#fff;box-shadow:0 8px 20px rgba(30,41,59,.05);transition:transform .2s,box-shadow .2s}.admin-category-card:hover{transform:translateY(-4px);box-shadow:0 15px 28px rgba(30,41,59,.1)}.admin-category-art{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,#fff0f5,#f5e9ff);color:#b42362;font-size:29px}.admin-category-card h3{margin:4px 0;color:#182230;font:800 18px 'Plus Jakarta Sans',Poppins,sans-serif;letter-spacing:-.03em}.admin-category-card p:not(.admin-section-label){margin:0;color:#667085;font-size:12px}.admin-category-card p span{color:#087e6b;font-weight:800}.admin-form{border-top:4px solid #d93478;box-shadow:0 12px 28px rgba(30,41,59,.07)}.admin-form-grid label{padding:11px;border:1px solid #eef0f4;border-radius:10px;background:#fbfcfe}.admin-form-grid input,.admin-form-grid select,.admin-form-grid textarea{border-color:#e1e6ed;background:#fff}.admin-form .admin-toolbar{padding-bottom:17px;border-bottom:1px solid #eef0f4}.admin-form .admin-toolbar h2{font:800 21px 'Plus Jakarta Sans',Poppins,sans-serif}.admin-status-form{padding:14px;border-radius:10px;background:#f8fafc}.admin-status-form .admin-button{height:38px}.admin-card.table-responsive{box-shadow:0 12px 28px rgba(30,41,59,.06)}
.dt-container{padding:18px 0 5px}.dt-search input,.dt-length select{border:1px solid #d0d5dd!important;border-radius:8px!important;padding:7px 10px!important;background:#fff!important;font:12px Poppins,sans-serif!important}.dt-search label,.dt-length label,.dt-info{color:#667085!important;font:12px Poppins,sans-serif!important}.dt-paging .dt-paging-button{border-radius:7px!important;border:0!important;font:600 12px Poppins,sans-serif!important}.dt-paging .dt-paging-button.current{background:#b42362!important;color:#fff!important}.dt-paging .dt-paging-button:hover{background:#fff0f5!important;color:#b42362!important}
.admin-login-body{margin:0;background:#f8fafc;font-family:'DM Sans',sans-serif;color:#162230}.admin-login-page{min-height:100vh;display:grid;grid-template-columns:minmax(380px,1.1fr) minmax(440px,.9fr)}.admin-login-intro{position:relative;overflow:hidden;display:flex;flex-direction:column;padding:48px clamp(38px,7vw,110px);color:#f8fafc;background:linear-gradient(145deg,#182230 0%,#223f52 52%,#126a64 135%)}.admin-login-intro:after,.admin-login-intro:before{content:'';position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.11);pointer-events:none}.admin-login-intro:before{width:520px;height:520px;right:-220px;bottom:-205px}.admin-login-intro:after{width:300px;height:300px;right:55px;bottom:-180px}.admin-login-logo{position:relative;z-index:1;display:flex;align-items:center;gap:11px;color:#fff;font:700 16px 'Plus Jakarta Sans',sans-serif}.admin-login-logo-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;color:#182230;background:#f6c453;font:800 12px 'Plus Jakarta Sans',sans-serif}.admin-login-copy{position:relative;z-index:1;max-width:550px;margin:auto 0}.admin-login-kicker{margin:0 0 17px;color:#8ce1cc;text-transform:uppercase;font-size:11px;letter-spacing:.16em;font-weight:700}.admin-login-copy h1{margin:0;font:800 clamp(33px,4vw,58px)/1.13 'Plus Jakarta Sans',sans-serif;color:#fff;letter-spacing:-.045em}.admin-login-copy p:last-child{max-width:470px;margin:22px 0 0;color:#b8d3d5;font-size:16px;line-height:1.7}.admin-login-points{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:13px 24px;color:#d1e5e3;font-size:13px;font-weight:600}.admin-login-panel{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:35px;background:#f8fafc}.admin-login-card{width:min(100%,410px);padding:38px;border:1px solid #e4e7ec;border-radius:18px;background:#fff;box-shadow:0 24px 60px rgba(16,24,40,.12)}.admin-login-card-head{display:flex;align-items:center;gap:13px;margin-bottom:29px}.admin-lock-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:11px;background:#e8f6f2;color:#087e6b;font:bold 25px Georgia,serif}.admin-login-card-head p{margin:0 0 3px;color:#667085;font-size:12px}.admin-login-card-head h2{margin:0;color:#101828;font:700 20px 'Plus Jakarta Sans',sans-serif;letter-spacing:-.03em}.admin-login-error{padding:10px 12px;margin:-10px 0 17px;border-radius:8px;color:#b42318;background:#fef3f2;font-size:12px}.admin-login-form{display:grid;gap:18px}.admin-login-form label{display:grid;gap:7px;color:#344054;font-size:12px;font-weight:700}.admin-login-form input{height:46px;padding:0 13px;border:1px solid #d0d5dd;border-radius:8px;color:#101828;font:13px 'DM Sans',sans-serif;outline:none}.admin-login-form input:focus{border-color:#0b8b77;box-shadow:0 0 0 3px rgba(11,139,119,.12)}.admin-login-form button{display:flex;justify-content:space-between;align-items:center;margin-top:5px;padding:13px 15px;border:0;border-radius:8px;color:#fff;background:#087e6b;font:700 13px 'DM Sans',sans-serif;cursor:pointer}.admin-login-form button:hover{background:#066b5b}.admin-login-form button span{font-size:17px}.admin-login-help{margin:24px 0 0;text-align:center;color:#98a2b3;font-size:11px}.admin-login-back{margin-top:26px;color:#667085;font-size:12px;font-weight:600}.admin-login-back:hover{color:#087e6b}
.admin-bs-primary{--bs-btn-bg:#b42362;--bs-btn-border-color:#b42362;--bs-btn-hover-bg:#8f1b4e;--bs-btn-hover-border-color:#8f1b4e;--bs-btn-active-bg:#8f1b4e;--bs-btn-active-border-color:#8f1b4e}

/* Dashboard visual system */
.admin-body{background:linear-gradient(135deg,#f6f8fc 0%,#edf2f8 100%)}.admin-sidebar{background:linear-gradient(180deg,#101b2a 0%,#192a3d 100%);box-shadow:8px 0 30px rgba(15,23,42,.07)}.admin-brand span{background:linear-gradient(135deg,#ff4d8b,#b42362);box-shadow:0 7px 16px rgba(239,61,118,.3)}.admin-nav a{transition:background .2s,color .2s,transform .2s}.admin-nav a:hover{transform:translateX(3px)}.admin-nav a.active{background:linear-gradient(90deg,#b42362,#d93478);box-shadow:0 7px 16px rgba(180,35,98,.24)}.admin-main{padding-top:24px}.admin-topbar{border:0;padding-bottom:20px}.admin-topbar h1{font:800 27px 'Plus Jakarta Sans',Poppins,sans-serif;letter-spacing:-.045em}.admin-eyebrow{color:#b42362}.admin-welcome{padding:31px 34px;border-radius:18px;background:linear-gradient(115deg,#b42362 0%,#e53b79 48%,#ff8760 115%);color:#fff;box-shadow:0 18px 35px rgba(180,35,98,.22)}.admin-welcome h2{color:#fff;font:800 clamp(22px,3vw,32px) 'Plus Jakarta Sans',Poppins,sans-serif;letter-spacing:-.05em}.admin-welcome p:not(.admin-welcome-kicker){max-width:600px;margin:9px 0 0;color:rgba(255,255,255,.85);font-size:13px}.admin-welcome-kicker{margin:0 0 9px;color:#ffe1ac!important;text-transform:uppercase;font-size:10px!important;letter-spacing:.14em;font-weight:800}.admin-hero-button{background:#fff;color:#a51d57;font-weight:800;border-radius:9px;padding:10px 15px}.admin-hero-button:hover{background:#fff0c8;color:#8c164a}.admin-hero-outline{border:1px solid rgba(255,255,255,.52);color:#fff;font-weight:700;border-radius:9px;padding:10px 15px}.admin-hero-outline:hover{color:#fff;background:rgba(255,255,255,.13)}.admin-welcome-orbit{position:absolute;border:1px solid rgba(255,255,255,.22);border-radius:50%}.orbit-one{width:340px;height:340px;right:-80px;top:-140px}.orbit-two{width:230px;height:230px;right:65px;bottom:-154px}.admin-welcome-toy{position:absolute;right:76px;top:46px;color:#ffe07b;font-size:70px;transform:rotate(15deg);text-shadow:0 10px 15px rgba(0,0,0,.12)}.admin-metric{position:relative;overflow:hidden;display:flex;gap:14px;align-items:flex-start;padding:19px;border-radius:15px;background:#fff;border:1px solid rgba(226,232,240,.9);box-shadow:0 8px 20px rgba(30,41,59,.06);transition:transform .2s,box-shadow .2s;color:#182230}.admin-metric:hover{transform:translateY(-4px);box-shadow:0 15px 27px rgba(30,41,59,.12);color:#182230}.admin-metric-icon{display:grid;place-items:center;flex:0 0 43px;width:43px;height:43px;border-radius:12px;font-size:23px;font-weight:800}.metric-products .admin-metric-icon{color:#b42362;background:#ffe7f0}.metric-categories .admin-metric-icon{color:#7757c9;background:#eee9ff}.metric-enquiries .admin-metric-icon{color:#c96900;background:#fff1d7}.metric-value .admin-metric-icon{color:#087e6b;background:#dcf7ee}.admin-metric-label{display:block;color:#667085;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em}.admin-metric strong{display:block;margin:3px 0 4px;font:800 28px 'Plus Jakarta Sans',Poppins,sans-serif;letter-spacing:-.05em}.admin-metric small{color:#667085;font-size:11px}.admin-metric small b{color:#b42362;font-size:15px}.admin-next-card,.admin-help-card{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:25px 27px;border-radius:15px;background:#fff;border:1px solid #e4e7ec;box-shadow:0 8px 20px rgba(30,41,59,.05)}.admin-next-card h3,.admin-help-card h3{margin:3px 0 5px;color:#182230;font:800 17px 'Plus Jakarta Sans',Poppins,sans-serif;letter-spacing:-.035em}.admin-next-card p:not(.admin-section-label),.admin-help-card p:not(.admin-section-label){margin:0;color:#667085;font-size:12px}.admin-section-label{margin:0;color:#b42362!important;font-size:10px!important;font-weight:800;text-transform:uppercase;letter-spacing:.12em}.admin-help-card{position:relative;display:block;color:#182230;background:linear-gradient(135deg,#e8f8f5,#f5fffd);transition:transform .2s}.admin-help-card:hover{transform:translateY(-3px);color:#182230}.admin-help-card span{position:absolute;right:23px;top:19px;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#087e6b;color:#fff;font-weight:800}.admin-help-card h3{margin-top:7px}
@media (max-width: 1199.98px) {
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .listing-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 991.98px) {
  .top-bar-inner { grid-template-columns: auto 1fr auto; gap: 16px; padding: 12px 20px; }
  .wa-block { display: none; }
  .hero { grid-template-columns: 1fr; padding: 32px 20px; }
  .hero h1 { font-size: 34px; }
  .hero-art { height: 240px; }
  .trust-row { grid-template-columns: repeat(2, 1fr); padding: 18px 20px; }
  .product-grid { grid-template-columns: repeat(2, 1fr); padding: 0 20px; }
  .listing-grid { grid-template-columns: repeat(2, 1fr); padding: 0; }
  .cat-grid { grid-template-columns: repeat(3, 1fr); padding: 0 20px; }
  .section-head, .bulk-wrap { padding-left: 20px; padding-right: 20px; }
  .container, .container-fluid { padding-left: 20px; padding-right: 20px; }
  .bulk-banner { flex-direction: column; align-items: flex-start; }

  .nav-toggle { display: block; }
  .main-nav { flex-wrap: wrap; padding: 0 20px; }
  .main-nav .nav-links {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
  }
  .main-nav .nav-links.open { display: flex; }
  .main-nav .nav-links a { width: 100%; }
  .main-nav a { border-bottom: none; padding: 10px 0; }
  .main-nav a.active { color: #ffe14d; }
  .nav-tagline { display: none; }
  .admin-shell{grid-template-columns:1fr}.admin-sidebar{padding:14px;flex-direction:row;flex-wrap:wrap;align-items:center}.admin-site-name,.admin-visit{display:none}.admin-nav{display:flex;gap:4px}.admin-main{padding:20px}.admin-stats{grid-template-columns:repeat(2,1fr)}
  .admin-login-page{grid-template-columns:1fr}.admin-login-intro{min-height:360px;padding:35px}.admin-login-copy{margin:58px 0}.admin-login-panel{padding:42px 25px}
  .admin-welcome{padding:26px}.admin-welcome-toy{right:34px;top:34px;font-size:52px}.admin-next-card{align-items:flex-start;flex-direction:column}
}
@media (max-width: 575.98px) {
  .brand-logo { width: 120px; }
  .brand-name { font-size: 14px; }
  .top-bar-inner { grid-template-columns: auto auto; row-gap: 12px; }
  .search-form { grid-column: 1 / -1; order: 3; }
  .cat-grid, .product-grid { grid-template-columns: repeat(2, 1fr); }
  .listing-grid { grid-template-columns: repeat(2, 1fr); padding: 0; }

  /* Two cards per row leaves ~190px of width — not enough for the stepper
     and the button side by side, so stack them and let each go full width. */
  .cta-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .qty-select { align-self: stretch; }
  .add-btn { width: 100%; padding: 10px 8px; font-size: 12px; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 28px; }
  .admin-stats,.admin-form-grid{grid-template-columns:1fr}.admin-topbar{align-items:flex-start}.admin-status-form,.admin-toolbar{align-items:flex-start;flex-direction:column}.admin-button.secondary{margin-left:0}
  .admin-login-intro{min-height:330px;padding:28px}.admin-login-copy h1{font-size:31px}.admin-login-copy p:last-child{font-size:14px}.admin-login-points{font-size:11px}.admin-login-card{padding:27px 23px}
  .admin-welcome{padding:23px 20px}.admin-welcome h2{max-width:260px}.admin-welcome p:not(.admin-welcome-kicker){max-width:270px}.admin-welcome-toy{right:18px;top:27px;font-size:38px}.orbit-one{right:-150px}.admin-next-card,.admin-help-card{padding:22px}
}


/* =========================================================
   RICH TEXT (About page copy written in the admin editor)
   ========================================================= */
.rich-text {
  /* The editor can store very long unbroken runs (a pasted URL, or words glued
     together by non-breaking spaces). Without this the paragraph refuses to
     wrap and pushes the whole page sideways. */
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.rich-text > * { max-width: 100%; }
.rich-text > *:first-child { margin-top: 0; }
.rich-text > *:last-child { margin-bottom: 0; }
.rich-text p { margin-bottom: 14px; }
.rich-text h2 { font-size: 22px; margin: 26px 0 10px; }
.rich-text h3 { font-size: 18px; margin: 22px 0 8px; }
.rich-text h4 { font-size: 16px; margin: 20px 0 8px; }
.rich-text ul, .rich-text ol { margin: 0 0 14px; padding-left: 22px; }
.rich-text li { margin-bottom: 6px; }
.rich-text a { color: var(--brand); }
.rich-text blockquote {
  margin: 0 0 14px;
  padding: 10px 16px;
  border-left: 3px solid var(--brand);
  background: var(--soft);
  border-radius: 0 10px 10px 0;
}