/* ==========================================================================
   Pakkathu Kadai — shared theme & common styles
   Single source of truth, symlinked into every app's public/css/.
   Layered on top of Bootstrap 5. Poppins, rounded cards, colorful, animated.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

:root {
  /* Brand palette */
  --pk-primary: #F97316;        /* orange 500  */
  --pk-primary-dark: #EA580C;   /* orange 600  */
  --pk-primary-soft: #FFEDD5;   /* orange 100  */
  --pk-accent: #FACC15;         /* yellow 400  */
  --pk-bg: #F5F6FB;             /* soft neutral dashboard bg */
  --pk-bg-warm: #FFFBEB;        /* amber tint (storefront)   */
  --pk-surface: #FFFFFF;
  --pk-ink: #1F2937;            /* slate 800   */
  --pk-muted: #6B7280;          /* gray 500    */
  --pk-success: #16A34A;
  --pk-danger: #DC2626;

  /* Accent palette for colorful tiles */
  --c-green: #16A34A;  --c-green-bg: #DCFCE7;
  --c-blue: #2563EB;   --c-blue-bg: #DBEAFE;
  --c-purple: #7C3AED; --c-purple-bg: #EDE9FE;
  --c-orange: #EA580C; --c-orange-bg: #FFEDD5;
  --c-pink: #DB2777;   --c-pink-bg: #FCE7F3;
  --c-teal: #0D9488;   --c-teal-bg: #CCFBF1;

  /* Shape & depth */
  --pk-radius: 18px;
  --pk-radius-sm: 12px;
  --pk-shadow: 0 12px 34px rgba(31, 41, 55, 0.10);
  --pk-shadow-sm: 0 4px 16px rgba(31, 41, 55, 0.05);

  --bs-primary: var(--pk-primary);
  --bs-primary-rgb: 249, 115, 22;
  --bs-body-color: var(--pk-ink);
  --bs-body-bg: var(--pk-bg);
  --bs-border-radius: var(--pk-radius);
}

body {
  background: var(--pk-bg);
  color: var(--pk-ink);
  font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---- Buttons -------------------------------------------------------------- */
.btn-pk {
  background: var(--pk-primary);
  border: 1px solid var(--pk-primary);
  color: #fff;
  border-radius: var(--pk-radius-sm);
  padding: .55rem 1.1rem;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(249, 115, 22, .28);
  transition: transform .12s ease, box-shadow .12s ease, background .15s ease;
}
.btn-pk:hover { background: var(--pk-primary-dark); border-color: var(--pk-primary-dark); color: #fff; transform: translateY(-1px); box-shadow: 0 10px 22px rgba(249, 115, 22, .34); }
.btn-pk:active { transform: translateY(0); }

.btn-pk-outline {
  background: transparent;
  border: 1px solid var(--pk-primary);
  color: var(--pk-primary-dark);
  border-radius: var(--pk-radius-sm);
  padding: .55rem 1.1rem;
  font-weight: 600;
  transition: background .15s ease;
}
.btn-pk-outline:hover { background: var(--pk-primary-soft); }

/* ---- Surfaces ------------------------------------------------------------- */
.pk-card {
  background: var(--pk-surface);
  border: 1px solid rgba(31, 41, 55, .05);
  border-radius: var(--pk-radius);
  box-shadow: var(--pk-shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease;
}

.pk-hero {
  background: linear-gradient(135deg, var(--pk-primary) 0%, var(--pk-accent) 100%);
  color: #fff;
  border-radius: var(--pk-radius);
  box-shadow: var(--pk-shadow);
}

/* ---- Bits ----------------------------------------------------------------- */
.pk-badge {
  display: inline-block;
  background: var(--pk-primary-soft);
  color: var(--pk-primary-dark);
  border-radius: 999px;
  padding: .25rem .7rem;
  font-size: .8rem;
  font-weight: 600;
}
.pk-brand { color: var(--pk-primary-dark); font-weight: 800; letter-spacing: -.02em; }
.text-pk-muted { color: var(--pk-muted); }
a { color: var(--pk-primary-dark); }
a:hover { color: var(--pk-primary); }

/* ==========================================================================
   Admin chrome (sidebar + topbar) — shared by all admin apps
   ========================================================================== */
.pk-sidebar {
  width: 256px; height: 100vh; position: fixed; top: 0; left: 0; overflow-y: auto; overflow-x: hidden;
  background: #fff; border-right: 1px solid rgba(31, 41, 55, .06); z-index: 30;
  transition: width .2s ease, transform .25s ease;
}
.pk-sidebar .brand { padding: 1.15rem 1.4rem; font-weight: 800; color: var(--pk-primary-dark); font-size: 1.15rem; letter-spacing: -.02em; display:flex; align-items:center; gap:.55rem; }
.pk-sidebar .brand-logo { border-radius: 8px; object-fit: contain; flex: 0 0 auto; }
.pk-sidebar.collapsed .brand-logo { width: 30px; height: 30px; }
.pk-sidebar .nav-section { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: #9CA3AF; padding: 1rem 1.5rem .3rem; font-weight: 600; }
.pk-sidebar .nav-link {
  color: #4B5563; border-radius: 12px; margin: 3px 12px; padding: .6rem .85rem; font-weight: 500; font-size: .92rem;
  display: flex; align-items: center; transition: background .15s ease, color .15s ease, transform .12s ease;
}
.pk-sidebar .nav-link .bi { margin-right: .6rem; font-size: 1.05rem; }
.pk-sidebar .nav-link:hover { background: #F3F4F6; transform: translateX(2px); }
.pk-sidebar .nav-link.active { background: linear-gradient(135deg, var(--pk-primary), var(--pk-primary-dark)); color: #fff; box-shadow: 0 8px 18px rgba(249, 115, 22, .32); }

.pk-main { margin-left: 256px; min-height: 100vh; background: var(--pk-bg); }
.pk-topbar { background: #fff; border-bottom: 1px solid rgba(31, 41, 55, .06); padding: .8rem 1.6rem; position: sticky; top: 0; z-index: 20; }
.pk-content { padding: 1.6rem; }

/* Mobile: sidebar is an off-canvas drawer toggled via .pk-sidebar.open */
@media (max-width: 900px) {
  .pk-sidebar { transform: translateX(-100%); z-index: 50; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
  .pk-sidebar.open { transform: translateX(0); }
  .pk-main { margin-left: 0; }
  .pk-drawer-open::after {
    content: ''; position: fixed; inset: 0; background: rgba(17,24,39,.45); z-index: 40;
  }
}

/* ==========================================================================
   Colorful stat tiles (dashboard KPI cards)
   ========================================================================== */
.stat-tile {
  background: #fff; border: 1px solid rgba(31, 41, 55, .05); border-radius: var(--pk-radius);
  box-shadow: var(--pk-shadow-sm); padding: 1.15rem 1.25rem;
  display: flex; align-items: center; gap: 1rem;
  transition: transform .18s ease, box-shadow .18s ease;
  animation: pkFadeUp .5s both;
}
.stat-tile:hover { transform: translateY(-5px); box-shadow: var(--pk-shadow); }
.stat-tile .tile-icon {
  width: 54px; height: 54px; border-radius: 16px; flex: none;
  display: grid; place-items: center; font-size: 1.5rem;
  background: var(--tile-bg, var(--c-orange-bg)); color: var(--tile, var(--c-orange));
}
.stat-tile .tile-value { font-size: 1.7rem; font-weight: 800; line-height: 1.05; color: var(--pk-ink); }
.stat-tile .tile-label { color: var(--pk-muted); font-size: .85rem; font-weight: 500; }
.tile-trend { font-size: .72rem; font-weight: 700; padding: .12rem .5rem; border-radius: 999px; display: inline-block; margin-top: .25rem; }
.tile-trend.up { background: var(--c-green-bg); color: var(--c-green); }
.tile-trend.down { background: #FEE2E2; color: var(--pk-danger); }

.tile-green  { --tile: var(--c-green);  --tile-bg: var(--c-green-bg); }
.tile-blue   { --tile: var(--c-blue);   --tile-bg: var(--c-blue-bg); }
.tile-purple { --tile: var(--c-purple); --tile-bg: var(--c-purple-bg); }
.tile-orange { --tile: var(--c-orange); --tile-bg: var(--c-orange-bg); }
.tile-pink   { --tile: var(--c-pink);   --tile-bg: var(--c-pink-bg); }
.tile-teal   { --tile: var(--c-teal);   --tile-bg: var(--c-teal-bg); }

/* Legacy .stat-card kept working, restyled to match */
.stat-card { border-radius: var(--pk-radius); border: 1px solid rgba(31,41,55,.05); background: #fff; padding: 1.15rem 1.25rem; box-shadow: var(--pk-shadow-sm); transition: transform .18s ease, box-shadow .18s ease; }
.stat-card:hover { transform: translateY(-4px); box-shadow: var(--pk-shadow); }
.stat-card .v { font-size: 1.6rem; font-weight: 800; }

/* ---- Animations ----------------------------------------------------------- */
@keyframes pkFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.pk-animate { animation: pkFadeUp .5s both; }
.pk-card:hover { transform: translateY(-3px); box-shadow: var(--pk-shadow); }
.prod-card { transition: transform .15s ease, box-shadow .15s ease; }
.prod-card:hover { transform: translateY(-4px); box-shadow: var(--pk-shadow); }

@media (prefers-reduced-motion: reduce) {
  .stat-tile, .pk-animate { animation: none; }
  .stat-tile:hover, .pk-card:hover, .stat-card:hover, .prod-card:hover, .btn-pk:hover { transform: none; }
}

/* ==========================================================================
   Rich form controls
   ========================================================================== */
.form-label { font-weight: 600; font-size: .85rem; color: #374151; margin-bottom: .35rem; }
.form-control, .form-select {
  border-radius: 12px; border: 1.5px solid #E5E7EB; padding: .6rem .85rem;
  font-size: .92rem; background: #fff; transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus, .form-select:focus {
  border-color: var(--pk-primary);
  box-shadow: 0 0 0 4px rgba(249, 115, 22, .15);
}
.form-control-lg { border-radius: 14px; padding: .8rem 1rem; }
.form-control::placeholder { color: #9CA3AF; }
.form-check-input:checked { background-color: var(--pk-primary); border-color: var(--pk-primary); }
.form-check-input:focus { box-shadow: 0 0 0 4px rgba(249, 115, 22, .15); border-color: var(--pk-primary); }
.input-group-text { border-radius: 12px; border: 1.5px solid #E5E7EB; background: #F9FAFB; }

/* ==========================================================================
   Modern tables
   ========================================================================== */
.table { --bs-table-bg: transparent; margin-bottom: 0; }
.table > thead th {
  text-transform: uppercase; letter-spacing: .04em; font-size: .72rem; font-weight: 700;
  color: #9CA3AF; border-bottom: 1px solid #EEF0F4; padding: .65rem .75rem; background: transparent;
}
.table > tbody td { border-bottom: 1px solid #F3F4F6; padding: .8rem .75rem; vertical-align: middle; }
.table > tbody tr { transition: background .12s ease; }
.table > tbody tr:hover { background: #FAFAFB; }
.table > tbody tr:last-child td { border-bottom: 0; }

/* Soft pill badges */
.badge { font-weight: 600; border-radius: 999px; padding: .35em .7em; }
.text-bg-success { background: var(--c-green-bg) !important; color: var(--c-green) !important; }
.text-bg-secondary { background: #EEF0F4 !important; color: #6B7280 !important; }
.text-bg-warning { background: #FEF3C7 !important; color: #B45309 !important; }
.text-bg-danger { background: #FEE2E2 !important; color: var(--pk-danger) !important; }
.text-bg-primary { background: var(--c-blue-bg) !important; color: var(--c-blue) !important; }
.text-bg-info { background: var(--c-teal-bg) !important; color: var(--c-teal) !important; }
.text-bg-light { background: #F3F4F6 !important; color: #6B7280 !important; }

.btn-light { background: #F3F4F6; border-color: #F3F4F6; border-radius: 10px; }
.btn-light:hover { background: #E5E7EB; border-color: #E5E7EB; }

/* ==========================================================================
   Rich components: gradient feature card, progress donut, avatars
   ========================================================================== */
.pk-feature {
  border-radius: var(--pk-radius); color: #fff; padding: 1.5rem 1.6rem; position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--pk-primary) 0%, var(--pk-primary-dark) 60%, #C2410C 100%);
  box-shadow: 0 16px 36px rgba(249, 115, 22, .35);
}
.pk-feature::after {
  content: ''; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px;
  background: rgba(255, 255, 255, .12); border-radius: 50%;
}
.pk-feature::before {
  content: ''; position: absolute; right: 40px; bottom: -60px; width: 120px; height: 120px;
  background: rgba(255, 255, 255, .08); border-radius: 50%;
}
.pk-feature .label { opacity: .9; font-weight: 500; font-size: .9rem; }
.pk-feature .value { font-size: 2.2rem; font-weight: 800; line-height: 1.1; }

.pk-feature-dark {
  background: linear-gradient(135deg, #1F2937 0%, #111827 100%);
  box-shadow: 0 16px 36px rgba(17, 24, 39, .3);
}

/* Conic progress donut */
.pk-donut {
  --val: 0; --size: 130px; --thick: 16px;
  width: var(--size); height: var(--size); border-radius: 50%;
  background: conic-gradient(var(--pk-primary) calc(var(--val) * 1%), #EEF0F4 0);
  display: grid; place-items: center; margin: 0 auto;
}
.pk-donut::before {
  content: ''; position: absolute; width: calc(var(--size) - var(--thick) * 2); height: calc(var(--size) - var(--thick) * 2);
  background: #fff; border-radius: 50%;
}
.pk-donut .pk-donut-label { position: relative; font-weight: 800; font-size: 1.5rem; color: var(--pk-ink); }

/* Avatars */
.pk-avatar {
  width: 36px; height: 36px; border-radius: 50%; display: inline-grid; place-items: center;
  font-weight: 700; font-size: .8rem; color: #fff; flex: none;
  background: linear-gradient(135deg, var(--pk-primary), var(--pk-primary-dark));
}
.pk-avatar.a1 { background: linear-gradient(135deg, #2563EB, #1D4ED8); }
.pk-avatar.a2 { background: linear-gradient(135deg, #7C3AED, #6D28D9); }
.pk-avatar.a3 { background: linear-gradient(135deg, #0D9488, #0F766E); }
.pk-avatar.a4 { background: linear-gradient(135deg, #DB2777, #BE185D); }

/* Subtle scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #9CA3AF; background-clip: content-box; }
.pk-sidebar::-webkit-scrollbar { width: 6px; }
.pk-sidebar::-webkit-scrollbar-thumb { background: #E5E7EB; border: 0; }

/* ==========================================================================
   Sidebar — toggle button + collapsed (icon-rail) state
   ========================================================================== */
.pk-sidebar-toggle {
  background: #F3F4F6; border: 0; width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center; font-size: 1.15rem; color: #4B5563; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.pk-sidebar-toggle:hover { background: #E5E7EB; color: var(--pk-primary-dark); }
.pk-sidebar .brand { white-space: nowrap; overflow: hidden; }
.pk-sidebar .brand-text { display: inline-block; margin-left: .25rem; transition: opacity .15s ease; }
.pk-sidebar .nav-link { white-space: nowrap; overflow: hidden; }

/* Desktop collapsed rail */
@media (min-width: 901px) {
  .pk-sidebar.collapsed { width: 76px; }
  .pk-sidebar.collapsed ~ .pk-main { margin-left: 76px; }
  .pk-sidebar.collapsed .brand { text-align: center; padding: 1.15rem .5rem; font-size: 1.5rem; }
  .pk-sidebar.collapsed .brand-text { opacity: 0; width: 0; margin: 0; }
  .pk-sidebar.collapsed .nav-section { font-size: 0; padding: .9rem 0 .25rem; }
  .pk-sidebar.collapsed .nav-section::before { content: '·'; display: block; text-align: center; color: #D1D5DB; font-size: 1rem; }
  .pk-sidebar.collapsed .nav-link { font-size: 0; justify-content: center; padding: .65rem; margin: 3px 10px; }
  .pk-sidebar.collapsed .nav-link .bi { font-size: 1.3rem; margin-right: 0; }
}

/* ==========================================================================
   Storefront — Blinkit-style components
   ========================================================================== */
.delivery-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: #111827; color: #fff; border-radius: 999px;
  padding: .35rem .75rem; font-size: .78rem; font-weight: 700;
}
.delivery-pill .dot {
  width: 8px; height: 8px; border-radius: 50%; background: #10B981;
  box-shadow: 0 0 0 0 rgba(16,185,129,.6);
  animation: pkPulse 1.4s ease-out infinite;
}
@keyframes pkPulse {
  0% { box-shadow: 0 0 0 0 rgba(16,185,129,.55); }
  70% { box-shadow: 0 0 0 8px rgba(16,185,129,0); }
  100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}

/* Hero banners */
.pk-banner {
  border-radius: 16px; padding: 1.3rem 1.4rem; color: #fff;
  position: relative; overflow: hidden; min-height: 130px;
  display: flex; flex-direction: column; justify-content: center;
  transition: transform .15s ease, box-shadow .15s ease;
}
.pk-banner:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.15); }
.pk-banner::after {
  content: ''; position: absolute; right: -30px; top: -30px;
  width: 140px; height: 140px; background: rgba(255,255,255,.15); border-radius: 50%;
}
.pk-banner .badge-tag {
  background: rgba(255,255,255,.85); color: #111827; border-radius: 999px;
  padding: .15rem .55rem; font-size: .68rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em; align-self: flex-start;
  margin-bottom: .5rem;
}
.pk-banner h3 { font-weight: 800; margin-bottom: .15rem; position: relative; z-index: 2; }
.pk-banner p { margin-bottom: 0; opacity: .95; font-size: .85rem; position: relative; z-index: 2; }

/* Banners with a hero image — Blinkit-style: text on the left, product
   art bleeding off the right edge. The art layer is absolutely
   positioned and pointer-events:none so it never steals taps from the
   text content / promo-code button beneath it. */
.pk-banner.has-image { padding-right: 44%; }
.pk-banner.has-image::after { display: none; }
.pk-banner-art {
  position: absolute;
  right: 0; bottom: 0;
  height: 100%;
  width: 44%;
  object-fit: contain;
  object-position: bottom right;
  pointer-events: none;
  z-index: 1;
}
@media (max-width: 575.98px) {
  .pk-banner.has-image { padding-right: 40%; }
  .pk-banner-art { width: 40%; }
}

/* ─── Banner row — horizontal scroll-snap carousel ──────────────────
   Two ways the carousel kicks in:
     1. Mobile (< md): ANY count, so a single-banner row stays usable
     2. `.is-carousel` modifier: applied by blade when count >= 4 so the
        desktop view collapses to a swipable strip too — keeps 3 fully
        visible with the 4th peeking on the right.
   Hidden scrollbar so it reads as a clean carousel, not a scrolled grid. */
.pk-banners-row.is-carousel {
  flex-wrap: nowrap !important;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 12px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin-bottom: 6px;
}
.pk-banners-row.is-carousel::-webkit-scrollbar { display: none; }
.pk-banners-row.is-carousel > [class*='col-'] {
  flex: 0 0 31% !important;
  max-width: 31% !important;
  scroll-snap-align: start;
}

@media (max-width: 767.98px) {
  .pk-banners-row {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 12px;
    -ms-overflow-style: none;
    scrollbar-width: none;
    margin-bottom: 6px;
  }
  .pk-banners-row::-webkit-scrollbar { display: none; }
  /* Mobile: one tile at a time with a peek of the next — overrides the
     desktop carousel width whether `.is-carousel` is on or off. */
  .pk-banners-row > [class*='col-'],
  .pk-banners-row.is-carousel > [class*='col-'] {
    flex: 0 0 88% !important;
    max-width: 88% !important;
    scroll-snap-align: center;
  }
}

/* Prev / next arrow buttons — overlay the row's left and right edges
   when in desktop carousel mode. Hidden on mobile (touch-swipe is the
   natural affordance there) and when count <= 3 (no scroll needed). */
.pk-banners-arrow { display: none; }
.pk-banners-wrap.is-carousel .pk-banners-arrow {
  display: grid; place-items: center;
  position: absolute;
  top: calc(50% - 8px);          /* offset for the dots/margin below */
  transform: translateY(-50%);
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #E5E7EB;
  color: #1F2937;
  cursor: pointer;
  font-size: 1.05rem;
  box-shadow: 0 6px 18px rgba(15,23,42,.18);
  transition: transform .15s ease, background .15s ease, opacity .2s ease;
  z-index: 5;
}
.pk-banners-wrap.is-carousel .pk-banners-arrow:hover {
  background: var(--pk-primary); color: #fff; border-color: transparent;
  transform: translateY(-50%) scale(1.06);
}
.pk-banners-wrap.is-carousel .pk-banners-arrow.is-prev { left: -10px; }
.pk-banners-wrap.is-carousel .pk-banners-arrow.is-next { right: -10px; }
.pk-banners-wrap.is-carousel .pk-banners-arrow:disabled {
  opacity: 0; pointer-events: none;
}
@media (max-width: 767.98px) {
  .pk-banners-wrap.is-carousel .pk-banners-arrow { display: none; }
}

/* Dot indicator — pill grows on the active dot for unmistakable
   "you are here" feedback. Visible whenever the row is a carousel:
     - mobile (<md): media query
     - desktop with .is-carousel: explicit class
   Otherwise hidden so a clean 3-tile grid stays uncluttered. */
.pk-banners-dots { display: none; }
.pk-banners-dots.is-carousel { display: flex; }
@media (max-width: 767.98px) {
  .pk-banners-dots { display: flex; }
}
.pk-banners-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #D1D5DB;
  transition: background .2s ease, width .2s ease;
}
.pk-banners-dot.is-active {
  background: var(--pk-primary);
  width: 20px; border-radius: 999px;
}
.b-orange { background: linear-gradient(135deg, #F97316 0%, #EA580C 100%); }
.b-green  { background: linear-gradient(135deg, #10B981 0%, #059669 100%); }
.b-purple { background: linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%); }
.b-pink   { background: linear-gradient(135deg, #EC4899 0%, #BE185D 100%); }
.b-blue   { background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%); }
.b-yellow { background: linear-gradient(135deg, #FACC15 0%, #CA8A04 100%); color: #1F2937; }
.b-yellow .badge-tag { background: rgba(31,41,55,.85); color: #fff; }
.b-red    { background: linear-gradient(135deg, #EF4444 0%, #B91C1C 100%); }

/* Promo-code chip inside a banner — click-to-copy. The clipboard icon
   swaps to a green check via JS when the copy succeeds. */
.pk-banner-code {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 10px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(255,255,255,.96); color: #C2410C;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 800; font-size: .82rem; letter-spacing: .5px;
  position: relative; z-index: 1; align-self: flex-start;
  box-shadow: 0 4px 10px rgba(0,0,0,.12);
  transition: background .15s ease, transform .12s ease;
}
.pk-banner-code-icon { transition: transform .15s ease, color .15s ease; }

/* ─── Pulsing sidebar badge — attention-grabbing nav indicator ──────
   Used on sidebar nav items to flag work that needs the admin's
   attention (new orders, open issues, unread messages). Anchored
   to the right edge of the nav item via `ms-auto` in the markup.
   Green is intentional — reads as "you have things to do" rather
   than "alarm fire" red. */
@keyframes pkBadgePulse {
  0%, 100% { box-shadow: 0 0 0 0   rgba(34,197,94, .55); }
  50%      { box-shadow: 0 0 0 6px rgba(34,197,94, 0); }
}
.pk-badge-pulse {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px; padding: 0 8px;
  background: linear-gradient(135deg, #22C55E, #15803D);
  color: #fff; font-size: .66rem; font-weight: 900;
  border-radius: 999px; letter-spacing: .2px;
  margin-left: auto;
  box-shadow: 0 2px 6px rgba(21,128,61,.32);
  animation: pkBadgePulse 1.8s ease-in-out infinite;
}
/* Amber variant — kept for "in-progress / waiting" states like Order
   Issues where the count isn't a fresh "new" but unfinished work. */
.pk-badge-pulse.is-amber {
  background: linear-gradient(135deg, #F59E0B, #D97706);
  box-shadow: 0 2px 6px rgba(217,119,6,.32);
  animation-name: pkBadgePulseAmber;
}
@keyframes pkBadgePulseAmber {
  0%, 100% { box-shadow: 0 0 0 0   rgba(217,119,6, .55); }
  50%      { box-shadow: 0 0 0 6px rgba(217,119,6, 0); }
}
/* Promocode banners are rendered as <button> so the whole tile is the
   click target. Reset the default button chrome so it matches the link
   variant pixel-for-pixel. */
button.pk-banner {
  text-align: left; appearance: none; border: 0;
}
button.pk-banner.is-copied .pk-banner-code {
  background: #DCFCE7; color: #166534;
}
button.pk-banner.is-copied .pk-banner-code-icon { transform: scale(1.15); color: #16A34A; }

/* ─── Blog cards — shared by /blog index, related-posts strip on
   /blog/{slug}, and any future "from the blog" hooks. Kept here in
   the shared sheet so views don't have to re-declare them. */
.pk-blog-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 540px) {
  .pk-blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
  .pk-blog-grid { grid-template-columns: repeat(3, 1fr); }
}

.pk-blog-card {
  display: block; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid #F3F4F6;
  border-radius: 16px; overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pk-blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(15,23,42,.10);
  border-color: #FED7AA; color: inherit;
}
.pk-blog-card-art {
  aspect-ratio: 16 / 9; overflow: hidden;
  background: linear-gradient(135deg, #FFF7ED, #FFEDD5);
  display: grid; place-items: center;
}
.pk-blog-card-art img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .4s ease;
}
.pk-blog-card:hover .pk-blog-card-art img { transform: scale(1.04); }
.pk-blog-card-art-fallback {
  color: var(--pk-primary); font-size: 2.4rem; opacity: .55;
}
.pk-blog-card-body { padding: 16px 18px 18px; }
.pk-blog-card-meta {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  font-size: .72rem; font-weight: 700; color: #9CA3AF;
  letter-spacing: .3px; text-transform: uppercase;
  margin-bottom: 8px;
}
.pk-blog-card-meta .cat {
  background: #FFF7ED; color: var(--pk-primary-dark);
  padding: 3px 9px; border-radius: 999px;
}
.pk-blog-card-meta .featured {
  background: #FEF3C7; color: #92400E;
  padding: 3px 9px; border-radius: 999px;
}
.pk-blog-card h3 {
  font-weight: 900; font-size: 1.05rem; margin: 0 0 6px;
  line-height: 1.25; color: #1F2937; letter-spacing: -.01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.pk-blog-card p {
  font-size: .84rem; color: #6B7280; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Featured strip on /blog — wider cards above the main grid. */
.pk-blog-featured {
  display: grid; gap: 14px; margin-bottom: 26px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .pk-blog-featured { grid-template-columns: repeat(3, 1fr); }
}
.pk-blog-featured .pk-blog-card-art { aspect-ratio: 4 / 3; }

/* ─── Storefront footer — multi-column Blinkit-style ─────────────────
   Soft warm-grey canvas with a thin top border, brand block on the
   left, link columns next to it, social + copyright in a thinner
   strip at the bottom. */
.pk-footer {
  background: #F9FAFB;
  border-top: 1px solid #E5E7EB;
}
.pk-footer-brand {
  font-weight: 900; font-size: 1.05rem;
  color: var(--pk-primary-dark);
  letter-spacing: -.015em;
}
.pk-footer-tag {
  font-size: .82rem; color: #6B7280; line-height: 1.55;
  max-width: 340px;
}
.pk-footer-heading {
  font-size: .82rem; font-weight: 800; letter-spacing: .4px;
  color: #1F2937; text-transform: uppercase;
  margin: 0 0 12px;
}
.pk-footer-links { list-style: none; padding: 0; margin: 0; }
.pk-footer-links li { margin-bottom: 8px; }
.pk-footer-links a {
  font-size: .85rem; color: #4B5563; text-decoration: none;
  transition: color .15s ease;
}
.pk-footer-links a:hover { color: var(--pk-primary-dark); }

/* Support channels (email + phone) — admin-managed via Settings.
   Only render when the admin has set at least one. */
.pk-footer-support { display: flex; flex-direction: column; gap: 6px; }
.pk-footer-support-row {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .84rem; font-weight: 700;
  color: #4B5563; text-decoration: none;
  transition: color .15s ease;
}
.pk-footer-support-row:hover { color: var(--pk-primary-dark); }
.pk-footer-support-row i { color: var(--pk-primary); font-size: .9rem; }

/* App store badges */
.pk-footer-apps { display: flex; gap: 8px; flex-wrap: wrap; }
.pk-footer-app-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  background: #1F2937; color: #fff; border-radius: 10px;
  text-decoration: none;
  transition: background .15s ease, transform .12s ease;
}
.pk-footer-app-btn:hover {
  background: #111827; color: #fff;
  transform: translateY(-2px);
}
.pk-footer-app-btn i { font-size: 1.4rem; line-height: 1; }
.pk-footer-app-btn span { display: flex; flex-direction: column; line-height: 1.1; }
.pk-footer-app-btn small { font-size: .55rem; opacity: .8; letter-spacing: .3px; text-transform: uppercase; }
.pk-footer-app-btn strong { font-size: .9rem; font-weight: 800; letter-spacing: -.01em; }

/* Thin bottom strip — copyright row + social icons */
.pk-footer-bottom {
  background: #fff;
  border-top: 1px solid #E5E7EB;
}
.pk-footer-copy { color: #6B7280; }
.pk-footer-social { display: flex; gap: 8px; }
.pk-footer-social a {
  width: 32px; height: 32px; border-radius: 50%;
  background: #1F2937; color: #fff;
  display: grid; place-items: center;
  text-decoration: none; font-size: .9rem;
  transition: background .15s ease, transform .12s ease;
}
.pk-footer-social a:hover {
  background: var(--pk-primary); color: #fff;
  transform: translateY(-2px);
}

/* Section header (Top picks, Fresh picks) */
.section-h {
  display: flex; justify-content: space-between; align-items: end;
  margin: 1.6rem 0 .9rem;
}
.section-h h2 { font-weight: 800; font-size: 1.2rem; margin: 0; color: var(--pk-ink); }
.section-h .see-all { font-size: .85rem; font-weight: 600; color: var(--pk-primary-dark); text-decoration: none; }

/* Category tiles */
.cat-tile {
  display: block; text-decoration: none; color: var(--pk-ink);
  background: #F3F4F6; border-radius: 16px; padding: 1rem .6rem;
  text-align: center; min-height: 140px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.cat-tile:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0,0,0,.08); color: var(--pk-ink); }
.cat-tile img { width: 70px; height: 70px; object-fit: contain; display: block; margin: 0 auto; }
.cat-tile .lbl { margin-top: .6rem; font-weight: 600; font-size: .82rem; line-height: 1.2; }

/* Product card v2 (Blinkit-style) */
.prod-card-v2 {
  background: #fff; border: 1px solid #F3F4F6; border-radius: 14px;
  padding: .75rem; position: relative; height: 100%;
  display: flex; flex-direction: column;
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.prod-card-v2:hover { box-shadow: 0 10px 24px rgba(31,41,55,.08); transform: translateY(-3px); border-color: #E5E7EB; }
.prod-card-v2 .img-wrap {
  background: #F9FAFB; border-radius: 12px; padding: .4rem; aspect-ratio: 1;
  display: grid; place-items: center; margin-bottom: .6rem;
  /* overflow: hidden + min-* resets are the bit that stops a tall image
     from breaking the card height. Without these, an image with a large
     intrinsic height pushes past aspect-ratio:1 because grid children
     have min-height: auto by default. */
  width: 100%; overflow: hidden; min-width: 0;
}
.prod-card-v2 .img-wrap > * { min-width: 0; min-height: 0; }
.prod-card-v2 .img-wrap img {
  width: 100%; height: 100%; object-fit: contain;
  max-width: 100%; max-height: 100%;
}
.prod-card-v2 .name {
  font-weight: 600; font-size: .82rem; line-height: 1.25;
  color: var(--pk-ink); text-decoration: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.4em;
}
.prod-card-v2 .unit { font-size: .72rem; color: var(--pk-muted); margin-top: 2px; }
.prod-card-v2 .price-row {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: auto; padding-top: .55rem;
}
.prod-card-v2 .price { font-weight: 800; font-size: .92rem; color: var(--pk-ink); }
.prod-card-v2 .mrp { text-decoration: line-through; color: var(--pk-muted); font-size: .72rem; margin-left: 4px; }
.prod-card-v2 .add-btn {
  background: #FFF7ED; border: 1.5px solid var(--pk-primary); color: var(--pk-primary-dark);
  border-radius: 10px; padding: .35rem .9rem; font-weight: 800; font-size: .78rem;
  cursor: pointer; transition: background .15s ease, color .15s ease;
}
.prod-card-v2 .add-btn:hover { background: var(--pk-primary); color: #fff; }
.prod-card-v2 .add-btn:disabled { background: #F3F4F6; border-color: #E5E7EB; color: #9CA3AF; cursor: not-allowed; }
/* "Not in your area" state — applied on wishlist cards whose vendor is
   outside the current session zone. Image is desaturated, text muted,
   PDP link suppressed by the partial (renders a plain <div>). */
.prod-card-v2.is-unavailable { opacity: .78; }
.prod-card-v2.is-unavailable .img-wrap img { filter: grayscale(.85); }
.prod-card-v2.is-unavailable .name,
.prod-card-v2.is-unavailable .price,
.prod-card-v2.is-unavailable .unit { color: #9CA3AF; }
.prod-card-v2.is-unavailable .mrp { display: none; }
.prod-card-v2 .oo-zone-ribbon {
  position: absolute; top: 6px; left: 6px; z-index: 2;
  background: #B45309; color: #fff;
  font-size: .65rem; font-weight: 800; letter-spacing: .3px;
  padding: 3px 8px; border-radius: 6px;
  box-shadow: 0 4px 10px rgba(180,83,9,.25);
}
/* Blinkit-style dark navy discount badge with a soft tail/fold underneath. */
.disc-badge {
  position: absolute; top: 6px; left: 6px; z-index: 2;
  background: #1F1F47; color: #fff; border-radius: 8px 8px 8px 0;
  padding: 3px 7px 4px; font-size: .68rem; font-weight: 800; line-height: 1.1;
  letter-spacing: .2px;
  box-shadow: 0 4px 8px rgba(31,31,71,.18);
}
.disc-badge::after {
  content: ""; position: absolute; left: 0; bottom: -5px;
  border-top: 5px solid #14143A;
  border-left: 6px solid transparent;
}

/* ==========================================================================
   Listing page · Blinkit "Vegetables & Fruits" layout
   Left rail of sub-categories + right product grid.
   ========================================================================== */
.pk-listing { display: grid; grid-template-columns: 110px 1fr; gap: 18px; align-items: start; }
@media (max-width: 767.98px) {
  .pk-listing { grid-template-columns: 1fr; gap: 12px; }
}

.pk-subnav {
  background: #F9FAFB; border: 1px solid #F3F4F6; border-radius: 14px;
  padding: 6px; position: sticky; top: 80px;
  max-height: calc(100vh - 100px); overflow-y: auto;
  scrollbar-width: thin;
}
.pk-subnav::-webkit-scrollbar { width: 4px; }
.pk-subnav::-webkit-scrollbar-thumb { background: #E5E7EB; border-radius: 4px; }

.pk-subnav .sub-tile {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 4px; border-radius: 10px; text-decoration: none;
  color: var(--pk-muted); font-size: .68rem; font-weight: 600; line-height: 1.15;
  text-align: center; border-left: 3px solid transparent; margin-bottom: 2px;
  transition: background .15s ease, color .15s ease;
}
.pk-subnav .sub-tile:hover { background: #fff; color: var(--pk-ink); }
.pk-subnav .sub-tile img { width: 42px; height: 42px; object-fit: contain; }
.pk-subnav .sub-tile .emoji { font-size: 1.6rem; line-height: 1; }
.pk-subnav .sub-tile.active {
  background: #fff; color: var(--pk-primary-dark); border-left-color: var(--pk-primary);
  box-shadow: 0 2px 6px rgba(31,41,55,.05);
}

/* Mobile horizontal sub-category strip */
@media (max-width: 767.98px) {
  .pk-subnav {
    position: static; max-height: none; display: flex; gap: 8px;
    overflow-x: auto; padding: 8px; scroll-snap-type: x mandatory;
  }
  .pk-subnav .sub-tile { flex: 0 0 88px; scroll-snap-align: start; border-left: 0; border-bottom: 3px solid transparent; }
  .pk-subnav .sub-tile.active { border-left: 0; border-bottom-color: var(--pk-primary); }
}

.pk-listing-title { font-weight: 800; font-size: 1.2rem; margin: 0 0 .25rem; color: var(--pk-ink); }
.pk-listing-meta { color: var(--pk-muted); font-size: .82rem; margin-bottom: .6rem; }

/* Dietary filter pills on the listing page */
.pk-diet-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.pk-diet-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 1.5px solid #E5E7EB; color: var(--pk-ink);
  border-radius: 999px; padding: 6px 12px;
  font-size: .82rem; font-weight: 600; text-decoration: none;
  transition: border-color .15s, background .15s, transform .12s;
}
.pk-diet-pill:hover { border-color: var(--pk-primary); color: var(--pk-primary-dark); transform: translateY(-1px); }
.pk-diet-pill.active {
  background: var(--pk-primary); color: #fff !important; border-color: var(--pk-primary);
  box-shadow: 0 4px 10px rgba(249,115,22,.25);
}
.pk-diet-pill.active i { color: #fff !important; }

/* ==========================================================================
   Home · Zepto-style horizontal category strip
   ========================================================================== */
.pk-cat-strip {
  display: flex; gap: 12px; overflow-x: auto;
  padding: 4px 2px 12px; scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.pk-cat-strip::-webkit-scrollbar { display: none; }
.pk-cat-strip .strip-tile {
  flex: 0 0 96px; scroll-snap-align: start; text-decoration: none;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--pk-ink); font-weight: 600; font-size: .72rem; text-align: center;
  line-height: 1.15;
}
.pk-cat-strip .strip-tile .bubble {
  width: 88px; height: 88px; border-radius: 16px;
  display: grid; place-items: center; transition: transform .15s ease;
}
.pk-cat-strip .strip-tile:hover .bubble { transform: translateY(-3px); }
.pk-cat-strip .strip-tile img { width: 60px; height: 60px; object-fit: contain; }

/* ==========================================================================
   Cart drawer · Blinkit "My Cart" sidebar
   ========================================================================== */
.pk-drawer-backdrop {
  position: fixed; inset: 0; background: rgba(15,23,42,.45);
  opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease;
  z-index: 1040;
}
.pk-drawer-backdrop.show { opacity: 1; visibility: visible; }

.pk-cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 100vw;
  background: #F9FAFB; box-shadow: -12px 0 32px rgba(15,23,42,.18);
  transform: translateX(100%); transition: transform .25s ease;
  z-index: 1050; display: flex; flex-direction: column;
}
.pk-cart-drawer.show { transform: translateX(0); }
.pk-cart-drawer .drawer-head {
  background: #fff; padding: 14px 18px; display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid #F1F5F9;
}
.pk-cart-drawer .drawer-head h5 { margin: 0; font-weight: 800; font-size: 1.05rem; }
.pk-cart-drawer .drawer-body { flex: 1; overflow-y: auto; padding: 14px; }
.pk-cart-drawer .drawer-foot {
  background: #fff; padding: 14px 18px; border-top: 1px solid #F1F5F9;
}

.pk-cart-row {
  background: #fff; border-radius: 12px; padding: 10px;
  display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center;
  margin-bottom: 8px; border: 1px solid #F3F4F6;
}
.pk-cart-row .img-wrap {
  background: #F9FAFB; border-radius: 10px; padding: 4px;
  aspect-ratio: 1; display: grid; place-items: center;
  overflow: hidden; min-width: 0;
}
.pk-cart-row .img-wrap > * { min-width: 0; min-height: 0; }
.pk-cart-row .img-wrap img {
  width: 100%; height: 100%; object-fit: contain;
  max-width: 100%; max-height: 100%;
}
.pk-cart-row .name { font-weight: 600; font-size: .82rem; color: var(--pk-ink); line-height: 1.2; }
.pk-cart-row .unit { font-size: .7rem; color: var(--pk-muted); }
.pk-cart-row .line-total { font-weight: 800; font-size: .85rem; }

/* Stepper used in cart drawer + listing card */
.pk-stepper {
  display: inline-flex; align-items: center; background: var(--pk-primary);
  border-radius: 10px; overflow: hidden; box-shadow: 0 3px 8px rgba(249,115,22,.25);
}
.pk-stepper button {
  background: transparent; border: 0; color: #fff; font-weight: 800;
  width: 28px; height: 30px; font-size: 1rem; line-height: 1; cursor: pointer;
}
.pk-stepper button:hover { background: var(--pk-primary-dark); }
.pk-stepper .qty { color: #fff; font-weight: 800; min-width: 22px; text-align: center; font-size: .85rem; }

/* Empty cart state */
.pk-cart-empty { text-align: center; padding: 40px 20px; color: var(--pk-muted); }
.pk-cart-empty .icon { font-size: 3rem; opacity: .35; }

/* Bill summary card inside drawer */
.pk-bill {
  background: #fff; border-radius: 12px; padding: 12px 14px; margin-top: 8px;
}
.pk-bill .row-line { display: flex; justify-content: space-between; font-size: .82rem; padding: 2px 0; color: var(--pk-muted); }
.pk-bill .row-line.total { color: var(--pk-ink); font-weight: 800; border-top: 1px dashed #E5E7EB; margin-top: 6px; padding-top: 8px; font-size: .95rem; }

/* ==========================================================================
   Landing · Swiggy-style map location picker
   Map fills the viewport, a fixed pin sits in the centre, a bottom sheet
   shows the resolved address + serviceability and the confirm CTA.
   ========================================================================== */
.pk-locate-wrap {
  position: relative; height: calc(100vh - 64px); min-height: 560px;
  border-radius: 18px; overflow: hidden;
  border: 1px solid #E5E7EB; box-shadow: var(--pk-shadow-sm);
}
.pk-locate-map { position: absolute; inset: 0; z-index: 1; }
.pk-locate-pin {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -100%); z-index: 5; pointer-events: none;
  text-align: center;
}
.pk-locate-pin .pin {
  font-size: 2.4rem; color: var(--pk-primary); filter: drop-shadow(0 4px 8px rgba(249,115,22,.4));
  animation: pkPinBounce .6s ease infinite alternate;
}
.pk-locate-pin .shadow-dot {
  width: 14px; height: 4px; background: rgba(31,41,55,.35); border-radius: 50%;
  margin: -2px auto 0; filter: blur(1.5px);
}
@keyframes pkPinBounce {
  from { transform: translateY(0); }
  to   { transform: translateY(-6px); }
}
.pk-locate-hint {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 5;
  background: #1F1F47; color: #fff; border-radius: 999px; padding: 6px 14px;
  font-size: .78rem; font-weight: 600; box-shadow: 0 6px 18px rgba(15,23,42,.25);
}
.pk-locate-search {
  position: absolute; top: 60px; left: 14px; right: 14px; z-index: 5;
  background: #fff; border-radius: 14px; padding: 8px 12px;
  display: flex; align-items: center; gap: 10px; box-shadow: 0 8px 24px rgba(15,23,42,.12);
}
.pk-locate-search input {
  border: 0; outline: 0; flex: 1; font-size: .92rem; color: var(--pk-ink); background: transparent;
}
.pk-locate-search button.gps {
  background: var(--pk-primary-soft); color: var(--pk-primary-dark);
  border: 0; border-radius: 10px; padding: 6px 10px; font-weight: 700; font-size: .78rem;
  display: inline-flex; align-items: center; gap: 4px;
}
.pk-locate-sheet {
  position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 5;
  background: #fff; border-radius: 18px; padding: 14px 16px;
  box-shadow: 0 14px 40px rgba(15,23,42,.18);
}
.pk-locate-sheet .row-head { display: flex; align-items: flex-start; gap: 10px; }
.pk-locate-sheet .pinicon {
  width: 36px; height: 36px; background: var(--pk-primary-soft); color: var(--pk-primary-dark);
  border-radius: 10px; display: grid; place-items: center; font-size: 1.1rem; flex: 0 0 36px;
}
.pk-locate-sheet h6 { margin: 0; font-weight: 800; }
.pk-locate-sheet .addr { font-size: .82rem; color: var(--pk-muted); margin-top: 2px; line-height: 1.35; }
.pk-locate-sheet .pin-label { font-weight: 700; font-size: .82rem; color: var(--pk-ink); margin-top: 6px; }
.pk-locate-sheet .status {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  font-size: .72rem; font-weight: 700; margin-top: 8px;
}
.pk-locate-sheet .status.ok { background: #DCFCE7; color: #166534; }
.pk-locate-sheet .status.no { background: #FEE2E2; color: #991B1B; }
.pk-locate-sheet .status.loading { background: #FEF3C7; color: #92400E; }

/* ==========================================================================
   Product detail page (Zepto-style layout)
   Vertical thumbnail rail on desktop, horizontal strip on mobile, fixed
   hero square, hover-zoom, and the right-side info column components.
   ========================================================================== */

/* Desktop two-column gallery: hero on the LEFT, vertical thumb rail on the
   RIGHT. Markup order is hero then rail; flex-direction: row + the rail's
   fixed 76px width pins it to the right edge of the column. On mobile the
   gallery stacks (hero on top, horizontal rail below) — handled by the
   media-query override further down. */
.pk-pdp-gallery {
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: flex-start;
}

.pk-pdp-rail {
  display: flex; flex-direction: column; gap: 10px;
  width: 76px; flex: 0 0 76px;
  /* Matches the hero height so the thumb strip's bottom lines up with the
     hero's bottom — no hanging white space. */
  max-height: 500px;
  overflow-y: auto; overflow-x: hidden;
  padding: 2px 4px 2px 0;
  scrollbar-width: thin;
}
.pk-pdp-rail::-webkit-scrollbar { width: 4px; }
.pk-pdp-rail::-webkit-scrollbar-thumb { background: #E5E7EB; border-radius: 4px; }
.pk-pdp-thumb {
  flex: 0 0 68px; width: 68px; height: 68px;
  background: #fff; border: 2px solid #F3F4F6; border-radius: 10px;
  padding: 4px; cursor: pointer; display: grid; place-items: center;
  transition: border-color .15s, transform .12s, box-shadow .15s;
  overflow: hidden;
  box-sizing: border-box;
}
.pk-pdp-thumb:hover { transform: translateX(-2px); box-shadow: 0 4px 10px rgba(15,23,42,.08); }
.pk-pdp-thumb.active { border-color: var(--pk-primary); box-shadow: 0 4px 10px rgba(249,115,22,.2); }
.pk-pdp-thumb > * { min-width: 0; min-height: 0; }
.pk-pdp-thumb img {
  width: 100%; height: 100%; object-fit: contain;
  max-width: 100%; max-height: 100%;
}

.pk-pdp-hero {
  flex: 1; min-width: 0;
  border-radius: 14px;
  /* FIXED height — identical across every product, never adapts to the
     image. Triple-locked (height + min + max + !important) because flex
     contexts upstream were letting the box stretch on some viewports.
     With the thumb rail now beside the hero (not below), the buy panel
     uses less vertical space, so we can grow the hero to 500 px. */
  height: 500px !important;
  min-height: 500px !important;
  max-height: 500px !important;
  overflow: hidden; background: #fff;
  border: 1px solid #F3F4F6;
  cursor: zoom-in;
  padding: 20px;
  display: flex; align-items: center; justify-content: center;
  box-sizing: border-box;
}
.pk-pdp-hero > * { min-width: 0; min-height: 0; max-width: 100%; max-height: 100%; }

/* Floating share button — top-right of the hero card */
.pk-pdp-share {
  position: absolute; top: 12px; right: 12px;
  width: 36px; height: 36px; border-radius: 50%;
  background: #fff; color: var(--pk-muted); border: 1px solid #E5E7EB;
  display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 4px 10px rgba(15,23,42,.06);
  transition: color .15s, transform .12s, background .15s; z-index: 2;
}
.pk-pdp-share:hover { color: var(--pk-primary); border-color: var(--pk-primary); transform: translateY(-1px); background: var(--pk-primary-soft); }

/* Mobile + tablet: hero switches to aspect-ratio sizing so the box stays
   SQUARE on tablets and PORTRAIT on phones — never landscape regardless
   of column width. Combined with object-fit:contain, every product still
   shows in an identically-shaped box. The horizontal thumb rail below
   the hero works the same at every breakpoint. */
/* Mobile/tablet: stack the gallery vertically (hero on top, horizontal
   thumb rail below). A 76 px side rail would steal too much width from
   the image on small screens. */
@media (max-width: 991.98px) {
  .pk-pdp-gallery { flex-direction: column; }
  .pk-pdp-rail {
    flex-direction: row;
    width: 100%; flex: 0 0 auto;
    max-height: none;
    overflow-x: auto; overflow-y: hidden;
    padding: 4px 2px;
  }
  .pk-pdp-rail::-webkit-scrollbar { width: auto; height: 4px; }
  .pk-pdp-thumb { flex: 0 0 64px; width: 64px; height: 64px; }
  .pk-pdp-thumb:hover { transform: translateY(-2px); }
  .pk-pdp-hero {
    height: 380px !important;
    min-height: 380px !important;
    max-height: 380px !important;
    aspect-ratio: auto;
    padding: 18px;
  }
}
@media (max-width: 575.98px) {
  .pk-pdp-hero {
    height: 340px !important;
    min-height: 340px !important;
    max-height: 340px !important;
    padding: 14px;
  }
}

/* Legacy class name kept for the storefront category strip thumbnails. */
.pk-gallery-main {
  border-radius: 18px;
  height: 420px;
  overflow: hidden;
  background: #fff;
  cursor: zoom-in;
  padding: 18px;
  display: flex; align-items: center; justify-content: center;
}
@media (max-width: 767.98px) {
  .pk-gallery-main { height: 320px; padding: 12px; }
}

/* Zoom layer — used by both the new pk-pdp-hero and legacy pk-gallery-main.
   Flex (not grid) so the image's max-width/max-height constraints resolve
   against the parent's pixel size instead of the image's intrinsic size,
   which is what was letting tall portrait images bleed past the box. */
.pk-gallery-zoom {
  width: 100%; height: 100%;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.pk-gallery-main img,
.pk-pdp-hero img {
  /* max-* rather than fixed width/height so a small image stays small and
     a tall image is scaled down to fit. object-fit: contain still preserves
     the aspect ratio. !important guards against any cascade override. */
  width: auto !important; height: auto !important;
  max-width: 100% !important; max-height: 100% !important;
  object-fit: contain !important;
  display: block;
  transition: transform .18s ease;
  will-change: transform;
  user-select: none; -webkit-user-drag: none;
}
.pk-gallery-zoom.is-zooming img {
  transform: scale(2);
  transition: transform 0s; /* follow mouse without easing while held */
}

/* ==========================================================================
   PDP right column — price card, coupons, trust badges, spec tables
   ========================================================================== */
.pk-price-card {
  background: linear-gradient(135deg, #DCFCE7 0%, #FFFFFF 70%);
  border: 1px solid #BBF7D0;
  border-radius: 14px;
  padding: 12px 14px;
}
.pk-price-now { font-size: 1.8rem; font-weight: 800; color: #14532D; }

/* Tilted dark-navy + gold "X% OFF" badge — pinned to the right of the
   price card on the PDP. Same design language as the Blinkit-style
   discount stickers on the product cards. Hover lifts it slightly so
   the tilt animates instead of staying static. */
.pk-disc-badge {
  background: linear-gradient(135deg, #1F1F47, #0F1230);
  color: #FACC15;
  border-radius: 10px;
  padding: 8px 12px;
  display: inline-flex; flex-direction: column; align-items: center;
  line-height: 1; font-weight: 900;
  box-shadow: 0 8px 18px rgba(15,18,48,.28);
  transform: rotate(4deg);
  flex-shrink: 0;
  transition: transform .25s ease, box-shadow .25s ease;
}
.pk-disc-badge:hover {
  transform: rotate(0deg) scale(1.05);
  box-shadow: 0 12px 24px rgba(15,18,48,.35);
}
.pk-disc-badge .pct { font-size: 1.1rem; }
.pk-disc-badge .lbl {
  font-size: .58rem; letter-spacing: 1px; opacity: .9;
  margin-top: 2px; color: #fff;
}

/* ==========================================================================
   Coupons & Offers — premium ticket-strip treatment. Each row looks like
   a paper voucher with perforated edges (CSS ::before/::after circles
   matching the parent card bg punch into the row's left + right edges),
   a dashed vertical divider between the code and the discount body, and
   a labelled Copy pill at the far right. The first row in a list of 2+
   gets a tiny "🔥 Best" flag to bias toward the biggest discount.
   ========================================================================== */
.pk-coupons-card {
  background: #fff;
  border: 1px solid #F3F4F6;
  border-radius: 16px;
  padding: 14px 14px 12px;
  box-shadow: 0 1px 2px rgba(15,23,42,.03);
}
.pk-coupons-card .head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 12px;
}
.pk-coupons-card .head-left {
  display: flex; align-items: center; gap: 10px; min-width: 0;
}
.pk-coupons-card .head-ico {
  width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(135deg, #FB923C, #F97316);
  color: #fff; display: grid; place-items: center;
  font-size: 1rem;
  box-shadow: 0 6px 14px rgba(249,115,22,.25);
  flex-shrink: 0;
}
.pk-coupons-card .head-title {
  font-weight: 800; font-size: .95rem; color: #1F2937;
  line-height: 1.1;
}
.pk-coupons-card .head-sub {
  font-size: .72rem; color: var(--pk-muted);
  margin-top: 2px;
}
.pk-coupons-card .head-count {
  background: #FFF7ED; color: var(--pk-primary-dark);
  border: 1px solid #FED7AA; border-radius: 999px;
  padding: 3px 10px; font-size: .68rem; font-weight: 800;
  letter-spacing: .3px; text-transform: uppercase;
  white-space: nowrap; flex-shrink: 0;
}

.pk-coupons-card .row-coupon {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; margin-bottom: 10px;
  background: linear-gradient(135deg, #FFF7ED 0%, #FFFBEB 100%);
  border: 1px dashed #FB923C;
  border-radius: 12px;
  font-size: .85rem;
  transition: transform .15s ease, box-shadow .2s ease, border-color .15s ease;
}
.pk-coupons-card .row-coupon:last-of-type { margin-bottom: 0; }
.pk-coupons-card .row-coupon:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(249,115,22,.16);
  border-color: #F97316;
}

/* Perforated edges — two small circles matching the parent card bg
   that "punch" into the row's left and right edges. Classic ticket look. */
.pk-coupons-card .row-coupon::before,
.pk-coupons-card .row-coupon::after {
  content: ''; position: absolute; top: 50%;
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff;                /* matches .pk-coupons-card bg */
  border: 1px dashed #FB923C;
  transform: translateY(-50%);
  z-index: 1;
}
.pk-coupons-card .row-coupon::before { left: -8px; }
.pk-coupons-card .row-coupon::after  { right: -8px; }

/* "Best" ribbon — only on the first coupon when 2+ exist. */
.pk-coupons-card .row-coupon .best-flag {
  position: absolute; top: -10px; right: 14px;
  background: linear-gradient(135deg, #DC2626, #EA580C);
  color: #fff; font-size: .6rem; font-weight: 900;
  letter-spacing: .6px; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  box-shadow: 0 4px 10px rgba(220,38,38,.32);
  display: inline-flex; align-items: center; gap: 4px;
  z-index: 2;
}
.pk-coupons-card .row-coupon .best-flag .bi { font-size: .65rem; }

/* Code chip — stacked label + monospace code, dashed orange border. */
.pk-coupons-card .row-coupon .code-chip {
  display: inline-flex; flex-direction: column; align-items: center;
  background: #fff; color: var(--pk-primary-dark);
  border: 1.5px dashed #FB923C; border-radius: 10px;
  padding: 6px 12px; min-width: 96px;
  font-family: inherit; cursor: pointer;
  transition: transform .12s ease, background .15s ease, color .15s ease, border-color .15s ease;
  flex-shrink: 0;
  position: relative;
}
.pk-coupons-card .row-coupon .code-chip .cc-label {
  font-size: .55rem; font-weight: 800; letter-spacing: 1px;
  color: #9A3412; text-transform: uppercase;
  opacity: .7;
}
.pk-coupons-card .row-coupon .code-chip .cc-value {
  font-family: 'SF Mono', 'Menlo', monospace;
  font-weight: 900; font-size: .92rem; letter-spacing: .5px;
  color: var(--pk-primary-dark);
  margin-top: 1px;
}
.pk-coupons-card .row-coupon .code-chip:hover {
  background: #FFEDD5; transform: translateY(-1px);
  border-color: #EA580C;
}
.pk-coupons-card .row-coupon .code-chip.is-copied {
  background: #16A34A; border-color: #15803D;
}
.pk-coupons-card .row-coupon .code-chip.is-copied .cc-label,
.pk-coupons-card .row-coupon .code-chip.is-copied .cc-value {
  color: #fff;
}
.pk-coupons-card .row-coupon .code-chip.is-copied::after {
  content: '✓'; position: absolute; top: -6px; right: -6px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #16A34A; color: #fff; border: 2px solid #fff;
  font-size: .65rem; font-weight: 900;
  display: grid; place-items: center;
  box-shadow: 0 2px 6px rgba(22,163,74,.4);
  animation: ccPop .35s cubic-bezier(.22,1,.36,1);
}
@keyframes ccPop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* Vertical dashed divider between code and discount body. */
.pk-coupons-card .row-coupon .coupon-body {
  flex: 1; min-width: 0;
  border-left: 1.5px dashed #FDBA74;
  padding-left: 14px;
}
.pk-coupons-card .row-coupon .coupon-body .discount {
  font-weight: 900; font-size: 1rem; line-height: 1.1;
  color: #7C2D12; letter-spacing: -.01em;
}
.pk-coupons-card .row-coupon .coupon-body .discount .dis-suffix {
  background: linear-gradient(135deg, #DC2626, #EA580C);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 900;
}
.pk-coupons-card .row-coupon .coupon-body .meta {
  margin-top: 3px;
  font-size: .72rem; color: #92400E; font-weight: 600;
}

/* Copy pill on the far right — icon + label. Mirrors the code-chip's
   tap-to-copy so customers don't have to discover the chip is tappable. */
.pk-coupons-card .row-coupon .pk-copy-btn {
  background: #fff; border: 1px solid #FED7AA;
  padding: 6px 12px; border-radius: 999px;
  color: var(--pk-primary-dark); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 800; font-size: .72rem; letter-spacing: .3px;
  text-transform: uppercase;
  transition: background .15s ease, color .15s ease, transform .12s ease, box-shadow .15s ease;
  flex-shrink: 0;
}
.pk-coupons-card .row-coupon .pk-copy-btn .bi { font-size: .82rem; }
.pk-coupons-card .row-coupon .pk-copy-btn:hover {
  background: var(--pk-primary); color: #fff; border-color: var(--pk-primary);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(249,115,22,.28);
}
.pk-coupons-card .row-coupon .pk-copy-btn.is-copied {
  background: #16A34A; color: #fff; border-color: #15803D;
}

/* "See all coupons" footer link. */
.pk-coupons-card .coupon-more {
  text-align: center; margin-top: 8px;
  padding-top: 10px;
  border-top: 1px dashed #F3F4F6;
}
.pk-coupons-card .coupon-more .bi { transition: transform .15s ease; }
.pk-coupons-card .coupon-more:hover .bi { transform: translateX(3px); }

/* Tiny-width fallback — sub-360 phones drop the Copy pill's label so
   the discount row still fits without wrap. */
@media (max-width: 359.98px) {
  .pk-coupons-card .row-coupon .pk-copy-btn .cp-label { display: none; }
  .pk-coupons-card .row-coupon .pk-copy-btn { padding: 6px 9px; }
  .pk-coupons-card .row-coupon .code-chip { min-width: 0; padding: 6px 10px; }
}

/* ==========================================================================
   Click-to-call pill — green tappable phone link used by both admin order
   pages and the customer's own order page. Scoped to the .dp-call class so
   it's opt-in and doesn't restyle every <a> on the page.
   ========================================================================== */
.dp-call {
  color: #16A34A; font-weight: 700; text-decoration: none;
  background: #DCFCE7; border-radius: 8px; padding: 1px 8px;
  border: 1px solid #BBF7D0;
  transition: background .15s, color .15s, transform .12s;
  display: inline-flex; align-items: center; gap: 4px;
}
.dp-call:hover,
.dp-call:focus { background: #16A34A; color: #fff; transform: translateY(-1px); }
.dp-call::after { content: " \2197"; font-size: .7rem; opacity: .7; }

/* Radio pill (used by checkout's OTP-yes/no choice). Same look as filter pills
   but always shows as either "selected" (orange) or "unselected" (grey). */
.pk-radio-pill {
  display:inline-flex; align-items:center; gap:6px;
  background:#fff; border:1.5px solid #E5E7EB; color:var(--pk-ink);
  border-radius:999px; padding:8px 14px; font-size:.88rem; font-weight:600;
  cursor:pointer; transition:border-color .15s, background .15s, transform .12s;
}
.pk-radio-pill:hover { border-color:var(--pk-primary); }
.pk-radio-pill.active {
  background:var(--pk-primary); color:#fff; border-color:var(--pk-primary);
  box-shadow:0 4px 10px rgba(249,115,22,.25);
}
.pk-radio-pill input { display:none; }

/* Large delivery-code display on the customer order page. */
.pk-delivery-code {
  font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 2.6rem; font-weight: 800; letter-spacing: 12px;
  color: var(--pk-primary-dark); text-align: center;
  padding: 8px 0; line-height: 1;
}

/* Do/don't advisory printed beneath the OTP. Tight green/red icon column. */
.pk-otp-advice { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; border-top: 1px dashed #FBBF24; }
.pk-otp-advice .line { display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: start; font-size: .82rem; line-height: 1.35; }
.pk-otp-advice .line i { font-size: 1rem; margin-top: 1px; }
.pk-otp-advice .line.ok i { color: #16A34A; }
.pk-otp-advice .line.no i { color: #DC2626; }
.pk-otp-advice .line strong { color: var(--pk-ink); }

/* Hint chip (delivery instructions suggestions). Tap to append. */
.pk-hint-chip {
  background:#F9FAFB; border:1px dashed #D1D5DB; color:var(--pk-muted);
  border-radius:999px; padding:4px 10px; font-size:.78rem; font-weight:500;
  cursor:pointer; transition:border-color .12s, color .12s, background .12s;
}
.pk-hint-chip:hover { border-color:var(--pk-primary); color:var(--pk-primary-dark); background:var(--pk-primary-soft); }
.pk-hint-chip.used { opacity:.5; }

/* Universal toast (used by coupon copy + future tiny confirmations). */
.pk-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 20px);
  background: #1F1F47; color: #fff;
  padding: 10px 18px; border-radius: 999px;
  font-size: .88rem; font-weight: 600;
  box-shadow: 0 12px 28px rgba(15,23,42,.25);
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .25s ease;
  z-index: 1100;
}
.pk-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ═══════════════════════════════════════════════════════════════════════
   Share modal — TranzNova-style branded share sheet.
   Opened by .pk-pdp-share on the storefront PDP. Each target is a circular
   chip with the platform's brand color, arranged in a 4-col grid (3 on
   narrow phones). Hidden by default; .show makes it visible.
   ═══════════════════════════════════════════════════════════════════════ */
.pk-share-modal {
  position: fixed; inset: 0; z-index: 1080;
  background: rgba(15,23,42,.55); backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: none; align-items: center; justify-content: center;
  padding: 16px;
}
.pk-share-modal.show { display: flex; animation: pkShareIn .2s ease; }
@keyframes pkShareIn { from { opacity: 0; } to { opacity: 1; } }
.pk-share-modal-card {
  position: relative;
  background: #fff; border-radius: 24px;
  width: 100%; max-width: 460px;
  box-shadow: 0 30px 70px rgba(15,23,42,.36), 0 0 0 1px rgba(255,255,255,.04);
  overflow: hidden;
  animation: pkShareCardIn .32s cubic-bezier(.34,1.56,.64,1);
}
@keyframes pkShareCardIn {
  from { transform: translateY(24px) scale(.94); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}

/* Decorative top ribbon — orange band with a soft emoji centered above
   the header. Turns the modal from a flat card into a "ribbon-topped"
   sheet that signals a celebratory share action. */
.pk-share-modal-card .ribbon {
  height: 56px; position: relative;
  background:
    radial-gradient(circle at 70% 30%, rgba(255,255,255,.32), transparent 55%),
    linear-gradient(135deg, #FB923C 0%, #F97316 50%, #EA580C 100%);
}
.pk-share-modal-card .ribbon::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 18px;
  background:
    radial-gradient(circle at 50% 100%, #fff 8px, transparent 9px) 0 100% / 24px 18px repeat-x;
}
.pk-share-modal-card .ribbon-emoji {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -55%);
  width: 44px; height: 44px; border-radius: 50%;
  background: #fff;
  display: grid; place-items: center;
  font-size: 1.3rem;
  box-shadow: 0 6px 14px rgba(234,88,12,.32);
  animation: ribbonBob 2.6s ease-in-out infinite;
}
@keyframes ribbonBob {
  0%, 100% { transform: translate(-50%, -55%) rotate(0deg); }
  50%      { transform: translate(-50%, -62%) rotate(8deg); }
}

.pk-share-modal-card .head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px 4px;
}
.pk-share-modal-card .head h3 {
  margin: 0; font-size: 1.1rem; font-weight: 800; color: var(--pk-ink);
  letter-spacing: -.01em;
}
.pk-share-modal-card .close-btn {
  background: #F3F4F6; border: 0; border-radius: 50%;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  color: var(--pk-ink); cursor: pointer;
  transition: background .15s, transform .2s, color .15s;
}
.pk-share-modal-card .close-btn:hover {
  background: #FEE2E2; color: #DC2626;
  transform: rotate(90deg);
}

.pk-share-modal-card .product-preview {
  display: flex; align-items: center; gap: 12px;
  margin: 12px 20px 0;
  padding: 12px 14px;
  background: linear-gradient(135deg, #FFF7ED 0%, #FFFBEB 100%);
  border: 1px solid #FED7AA;
  border-radius: 14px;
}
.pk-share-modal-card .product-preview .thumb {
  width: 52px; height: 52px; border-radius: 12px;
  background: #fff; border: 1px solid #FED7AA;
  padding: 6px; flex-shrink: 0; overflow: hidden;
  display: grid; place-items: center;
  box-shadow: 0 4px 10px rgba(249,115,22,.14);
}
.pk-share-modal-card .product-preview .thumb img {
  width: 100%; height: 100%; object-fit: contain;
}
.pk-share-modal-card .product-preview .meta { min-width: 0; flex: 1; }
.pk-share-modal-card .product-preview .meta strong {
  display: block; font-size: .94rem; color: var(--pk-ink); font-weight: 800;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pk-share-modal-card .product-preview .meta small {
  color: #9A3412; font-size: .72rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: block; opacity: .85;
}
/* Tiny quick-copy icon-button on the right of the preview row. Same
   behavior as the larger "Copy link" tile below — just a one-tap path
   for users who don't need the platform picker. */
.pk-share-modal-card .product-preview .quick-copy {
  width: 34px; height: 34px; border-radius: 10px;
  background: #fff; border: 1px solid #FED7AA;
  color: var(--pk-primary-dark); cursor: pointer;
  display: grid; place-items: center;
  flex-shrink: 0; transition: background .15s, color .15s, transform .12s;
}
.pk-share-modal-card .product-preview .quick-copy:hover {
  background: var(--pk-primary); color: #fff; transform: translateY(-1px);
}
.pk-share-modal-card .product-preview .quick-copy.is-copied {
  background: #16A34A; color: #fff; border-color: #15803D;
}

.pk-share-modal-card .targets-section { padding: 14px 20px 22px; }
.pk-share-modal-card .targets-label {
  font-size: .65rem; font-weight: 800; letter-spacing: 1.2px;
  color: #9CA3AF; text-transform: uppercase;
  margin-bottom: 10px;
}
.pk-share-modal-card .targets {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
}
.pk-share-modal-card .targets > * {
  background: none; border: 0; padding: 10px 4px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-decoration: none; color: var(--pk-ink); cursor: pointer;
  font-size: .72rem; font-weight: 700; text-align: center;
  border-radius: 14px;
  transition: transform .15s ease, background .15s ease;
}
.pk-share-modal-card .targets > *:hover {
  transform: translateY(-3px);
  background: #FAFAFB;
}
.pk-share-modal-card .targets .ico {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; font-size: 1.4rem;
  transition: transform .15s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease;
  position: relative;
}
.pk-share-modal-card .targets > *:hover .ico { transform: scale(1.08); }

/* Per-platform brand colour + matching coloured shadow for a "glow" feel. */
.pk-share-modal-card .targets .bg-wa   { background: #25D366; box-shadow: 0 8px 16px rgba(37,211,102,.32); }
.pk-share-modal-card .targets .bg-tg   { background: #229ED9; box-shadow: 0 8px 16px rgba(34,158,217,.32); }
.pk-share-modal-card .targets .bg-sms  { background: #10B981; box-shadow: 0 8px 16px rgba(16,185,129,.32); }
.pk-share-modal-card .targets .bg-em   { background: linear-gradient(135deg,#F97316,#EA580C); box-shadow: 0 8px 16px rgba(249,115,22,.32); }
.pk-share-modal-card .targets .bg-x    { background: #000; box-shadow: 0 8px 16px rgba(0,0,0,.32); }
.pk-share-modal-card .targets .bg-fb   { background: #1877F2; box-shadow: 0 8px 16px rgba(24,119,242,.32); }
.pk-share-modal-card .targets .bg-cp   { background: linear-gradient(135deg,#6366F1,#4F46E5); box-shadow: 0 8px 16px rgba(99,102,241,.32); }
.pk-share-modal-card .targets .bg-more { background: linear-gradient(135deg,#6B7280,#374151); box-shadow: 0 8px 16px rgba(55,65,81,.28); }

/* Copy tile success state — green ✓ overlay. */
.pk-share-modal-card .targets [data-pk-share-target="copy"].is-copied .ico {
  background: #16A34A !important; box-shadow: 0 8px 16px rgba(22,163,74,.36);
}
.pk-share-modal-card .targets [data-pk-share-target="copy"].is-copied .ico::after {
  content: '✓'; position: absolute; inset: 0;
  display: grid; place-items: center; font-weight: 900;
}

@media (max-width: 480px) {
  .pk-share-modal-card .targets { grid-template-columns: repeat(4, 1fr); }
  .pk-share-modal-card .targets > * { padding: 8px 2px; font-size: .68rem; }
  .pk-share-modal-card .targets .ico { width: 46px; height: 46px; font-size: 1.2rem; }
}
@media (max-width: 380px) {
  .pk-share-modal-card .targets { grid-template-columns: repeat(3, 1fr); }
}

/* Phone: slide up from the bottom like a native bottom sheet. */
@media (max-width: 575.98px) {
  .pk-share-modal { align-items: flex-end; padding: 0; }
  .pk-share-modal-card {
    max-width: 100%;
    border-radius: 24px 24px 0 0;
    animation: pkShareSheetIn .3s cubic-bezier(.22,1,.36,1);
  }
  @keyframes pkShareSheetIn {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
}

.pk-link-orange { color: var(--pk-primary-dark); cursor: pointer; }
.pk-link-orange:hover { color: var(--pk-primary); text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════════════
   Pagination — overrides Bootstrap 5 defaults to the brand orange.
   Used by every paginated list (storefront /orders, admin lists, etc.)
   since the Bootstrap pagination is wired in via paginator->links() and
   useBootstrapFive() in AppServiceProvider. Pill-shaped, soft shadow,
   brand-orange active state.
   ═══════════════════════════════════════════════════════════════════════ */
.pagination {
  display: inline-flex; gap: 4px;
  background: #fff; padding: 4px; border-radius: 999px;
  border: 1px solid #F3F4F6;
  box-shadow: 0 2px 8px rgba(15,23,42,.04);
  margin: 0;
}
.pagination .page-item .page-link {
  border: 0; background: transparent;
  min-width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--pk-ink);
  font-weight: 700; font-size: .85rem;
  padding: 0 10px;
  transition: background .15s ease, color .15s ease, transform .12s ease;
  margin: 0;
}
.pagination .page-item .page-link:hover {
  background: var(--pk-primary-soft);
  color: var(--pk-primary-dark);
  transform: translateY(-1px);
}
.pagination .page-item.active .page-link {
  background: linear-gradient(135deg, var(--pk-primary), var(--pk-primary-dark));
  color: #fff;
  box-shadow: 0 6px 14px rgba(249,115,22,.32);
  transform: none;
}
.pagination .page-item.disabled .page-link {
  color: #CBD5E1; background: transparent;
  cursor: not-allowed; pointer-events: none;
  opacity: .6;
}
/* Bootstrap renders the "..." gap as its own page-item — drop the hover. */
.pagination .page-item.disabled .page-link:hover {
  background: transparent; transform: none;
}
/* Focus-visible ring uses brand orange, not the Bootstrap default blue. */
.pagination .page-link:focus,
.pagination .page-link:focus-visible {
  box-shadow: 0 0 0 3px rgba(249,115,22,.25);
  outline: 0;
}

/* Compact mobile pagination — shrink dots so 5+ pages still fit on phones. */
@media (max-width: 480px) {
  .pagination .page-item .page-link {
    min-width: 32px; height: 32px; font-size: .8rem; padding: 0 8px;
  }
}
.text-pk-primary { color: var(--pk-primary); }

.pk-trust {
  display: flex; align-items: center; gap: 8px;
  background: #F9FAFB; border: 1px solid #F3F4F6;
  border-radius: 10px; padding: 8px 12px;
  flex: 1; min-width: 0;
}
.pk-trust .ico {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--pk-primary-soft); color: var(--pk-primary-dark);
  display: grid; place-items: center; font-size: 1rem; flex: 0 0 32px;
}

.pk-info-card {
  background: #fff; border: 1px solid #F3F4F6;
  border-radius: 14px; padding: 16px 18px;
}
.pk-info-card > .head {
  font-size: 1rem; font-weight: 700; margin: 0 0 10px;
  padding-bottom: 8px; border-bottom: 1px solid #F3F4F6;
}
.pk-spec-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.pk-spec-table th {
  text-align: left; vertical-align: top;
  width: 38%; padding: 10px 0;
  font-weight: 500; color: var(--pk-muted);
  border-bottom: 1px solid #F3F4F6;
}
.pk-spec-table td {
  padding: 10px 0; vertical-align: top; color: var(--pk-ink);
  border-bottom: 1px solid #F3F4F6;
}
.pk-spec-table tr:last-child th,
.pk-spec-table tr:last-child td { border-bottom: 0; }

/* ==========================================================================
   PDP sticky column + big stepper + sticky top bar (Zepto pattern)
   The left gallery column stays in view while the right info column scrolls.
   The original "Add to Cart" transforms into a big −/+ stepper once the item
   is in the cart, mirroring the basket state in real time. Once the hero
   scrolls past the viewport top, a slim sticky bar pops down with the same
   controls so the customer can always reach the add/qty action.
   ========================================================================== */
@media (min-width: 992px) {
  .pk-pdp-sticky-col {
    position: sticky;
    top: 80px;             /* tuck under the storefront nav */
    align-self: flex-start;
  }
}

/* Large stepper rendered inside any [data-cta-size="lg"] wrapper. */
[data-cta-size="lg"] .pk-stepper {
  width: 100%;
  height: 48px;
  border-radius: 12px;
  padding: 0 12px;
  justify-content: space-between;
}
[data-cta-size="lg"] .pk-stepper button {
  width: 48px; height: 48px;
  font-size: 1.3rem;
}
[data-cta-size="lg"] .pk-stepper .qty {
  font-size: 1.05rem; min-width: 32px;
}

/* The slim sticky bar that surfaces once the main hero has scrolled out.
   - Desktop (≥768): bar drops in from the TOP, tucked under the nav.
   - Mobile (<768):  bar rises from the BOTTOM — thumb-reachable. */
.pk-pdp-sticky-bar {
  position: fixed; left: 0; right: 0;
  background: #fff; z-index: 25;
  box-shadow: 0 4px 18px rgba(15,23,42,.10);
  /* Hide initially with opacity (not just transform) — the translateY(-110%)
     in the desktop media query only shifts by 110% of the bar's own height,
     which on a fresh PDP load is enough to *land it on top of the nav*
     instead of pushing it off-screen. opacity + pointer-events guarantee the
     bar is gone until JS toggles .show, regardless of transform math. */
  opacity: 0;
  pointer-events: none;
  transition: transform .25s ease, opacity .2s ease;
}
.pk-pdp-sticky-bar.show {
  opacity: 1;
  pointer-events: auto;
}
.pk-pdp-sticky-bar .container { padding: 10px 16px; }
.pk-pdp-sticky-bar .thumb {
  width: 44px; height: 44px; border-radius: 8px; padding: 4px;
  background: #F9FAFB; border: 1px solid #F3F4F6; object-fit: contain;
}
.pk-pdp-sticky-bar .name { font-weight: 700; font-size: .92rem; line-height: 1.2; }
.pk-pdp-sticky-bar .price { font-weight: 800; color: #14532D; font-size: .85rem; }
.pk-pdp-sticky-bar .cta-wrap { min-width: 200px; max-width: 220px; }

/* Desktop: drops from top, sitting flush under the store-nav. The nav
   height varies (the "Delivery in 10 minutes" pill stacks under the
   pincode link on >=md), so we read it from --pk-nav-h which is set
   by the layout's inline JS at boot + on resize. Fallback 64px keeps
   the bar usable if the JS doesn't run. */
@media (min-width: 768px) {
  .pk-pdp-sticky-bar {
    top: calc(var(--pk-nav-h, 64px) + 4px);
    border-bottom: 1px solid #E5E7EB;
    transform: translateY(-110%);
  }
  .pk-pdp-sticky-bar.show { transform: translateY(0); }
}

/* Mobile: rises from bottom (Zepto thumb-zone pattern) */
@media (max-width: 767.98px) {
  .pk-pdp-sticky-bar {
    bottom: 0;
    border-top: 1px solid #E5E7EB;
    box-shadow: 0 -6px 18px rgba(15,23,42,.10);
    transform: translateY(110%);
    /* Respect iOS home-bar inset so the CTA isn't clipped */
    padding-bottom: env(safe-area-inset-bottom);
  }
  .pk-pdp-sticky-bar.show { transform: translateY(0); }
  .pk-pdp-sticky-bar .cta-wrap { min-width: 130px; max-width: 160px; }
  .pk-pdp-sticky-bar .name { font-size: .82rem; }
}

/* --- (2) Qty-bump pulse: scale the .qty number when it changes ---------- */
@keyframes pkQtyBump {
  0%   { transform: scale(1);   color: #fff; }
  50%  { transform: scale(1.4); color: var(--pk-accent); }
  100% { transform: scale(1);   color: #fff; }
}
.pk-stepper .qty.is-bumping { animation: pkQtyBump .35s cubic-bezier(.34,1.56,.64,1); display: inline-block; }

/* --- (3) Going-fast urgency chip (PDP) ---------------------------------- */
.pk-urgency-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(135deg, #FEE2E2, #FFFBEB);
  border: 1px solid #FCA5A5; color: #B91C1C;
  border-radius: 999px; padding: 4px 12px;
  font-size: .78rem; font-weight: 700; letter-spacing: .2px;
  margin-top: 4px;
}
.pk-urgency-chip .pulse {
  width: 8px; height: 8px; border-radius: 50%; background: #DC2626;
  box-shadow: 0 0 0 0 rgba(220,38,38,.55);
  animation: pkPulse 1.6s infinite;
}
@keyframes pkPulse {
  0%   { box-shadow: 0 0 0 0 rgba(220,38,38,.55); }
  70%  { box-shadow: 0 0 0 8px rgba(220,38,38,0); }
  100% { box-shadow: 0 0 0 0 rgba(220,38,38,0); }
}

/* Thumbnail strip — fixed height too, lines up with the hero's lower edge. */
.pk-gallery-strip {
  display: flex; gap: 8px; overflow-x: auto;
  padding: 4px 2px 6px; scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  height: 86px;
}
.pk-gallery-strip::-webkit-scrollbar { height: 4px; }
.pk-gallery-strip::-webkit-scrollbar-thumb { background: #E5E7EB; border-radius: 4px; }
.pk-gallery-thumb {
  flex: 0 0 72px; width: 72px; height: 72px; background: #fff;
  border: 2px solid #F3F4F6; border-radius: 10px; padding: 4px;
  cursor: pointer; scroll-snap-align: start;
  transition: border-color .15s, transform .12s;
  display: grid; place-items: center;
  overflow: hidden; box-sizing: border-box;
}
.pk-gallery-thumb:hover { transform: translateY(-1px); }
.pk-gallery-thumb.active { border-color: var(--pk-primary); box-shadow: 0 4px 10px rgba(249,115,22,.18); }
.pk-gallery-thumb > * { min-width: 0; min-height: 0; }
.pk-gallery-thumb img {
  width: 100%; height: 100%; object-fit: contain;
  max-width: 100%; max-height: 100%;
}

/* ─── pk-confirm — shared rich confirmation modal ──────────────────────
   Driven by /js/pakkathu-confirm.js. Add data-pk-confirm to any form /
   button / link to trigger it; pick a preset with data-pk-confirm-preset.
   ─────────────────────────────────────────────────────────────────── */
.pk-confirm-overlay {
  position: fixed; inset: 0; z-index: 2080;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(6px) saturate(140%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  display: none; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; transition: opacity .18s ease;
}
.pk-confirm-overlay.is-visible { display: flex; }
.pk-confirm-overlay.is-open    { opacity: 1; }
.pk-confirm-card {
  width: 100%; max-width: 440px;
  background: #fff; border-radius: 22px;
  padding: 28px 26px 22px;
  box-shadow: 0 22px 60px rgba(15, 23, 42, .22),
              0 4px 14px rgba(15, 23, 42, .08);
  text-align: center;
  font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  transform: scale(.96) translateY(8px);
  transition: transform .22s cubic-bezier(.16, 1, .3, 1);
  outline: none;
}
.pk-confirm-overlay.is-open .pk-confirm-card { transform: scale(1) translateY(0); }

.pk-confirm-emoji {
  font-size: 44px; line-height: 1; margin-bottom: 14px;
  filter: drop-shadow(0 4px 12px rgba(15, 23, 42, .12));
  animation: pkConfirmPop .42s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes pkConfirmPop {
  0%   { transform: scale(.5) rotate(-6deg); opacity: 0; }
  60%  { transform: scale(1.12) rotate(2deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}

.pk-confirm-title {
  font-size: 18px; font-weight: 800; line-height: 1.3;
  color: #111827; margin: 0 0 8px;
}
.pk-confirm-message {
  font-size: 13.5px; line-height: 1.5;
  color: #4B5563; margin: 0 0 22px;
}
.pk-confirm-actions {
  display: flex; gap: 10px; justify-content: stretch;
}
.pk-confirm-actions button {
  flex: 1; min-width: 0;
  font-family: inherit; font-weight: 700; font-size: 14px;
  border: 0; border-radius: 12px; padding: 11px 16px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.pk-confirm-actions button:active { transform: scale(.97); }
.pk-confirm-cancel {
  background: #F1F5F9; color: #334155;
}
.pk-confirm-cancel:hover { background: #E2E8F0; }

/* Tone-specific styling for the primary confirm button. */
.pk-confirm-confirm { color: #fff; }
.pk-confirm-card[data-tone="primary"] .pk-confirm-confirm {
  background: linear-gradient(180deg, #F97316 0%, #EA580C 100%);
  box-shadow: 0 6px 16px rgba(249, 115, 22, .35);
}
.pk-confirm-card[data-tone="primary"]  .pk-confirm-emoji { filter: drop-shadow(0 4px 12px rgba(249,115,22,.30)); }
.pk-confirm-card[data-tone="success"] .pk-confirm-confirm {
  background: linear-gradient(180deg, #22C55E 0%, #16A34A 100%);
  box-shadow: 0 6px 16px rgba(22, 163, 74, .35);
}
.pk-confirm-card[data-tone="success"]  .pk-confirm-emoji { filter: drop-shadow(0 4px 12px rgba(22,163,74,.30)); }
.pk-confirm-card[data-tone="warning"] .pk-confirm-confirm {
  background: linear-gradient(180deg, #F59E0B 0%, #D97706 100%);
  box-shadow: 0 6px 16px rgba(217, 119, 6, .35);
  color: #422006;
}
.pk-confirm-card[data-tone="warning"]  .pk-confirm-emoji { filter: drop-shadow(0 4px 12px rgba(217,119,6,.30)); }
.pk-confirm-card[data-tone="danger"]  .pk-confirm-confirm {
  background: linear-gradient(180deg, #EF4444 0%, #DC2626 100%);
  box-shadow: 0 6px 16px rgba(220, 38, 38, .35);
}
.pk-confirm-card[data-tone="danger"]   .pk-confirm-emoji { filter: drop-shadow(0 4px 12px rgba(220,38,38,.30)); }

.pk-confirm-actions button:focus-visible {
  outline: 3px solid rgba(249, 115, 22, .35);
  outline-offset: 2px;
}

/* Tighter on small screens */
@media (max-width: 480px) {
  .pk-confirm-card { padding: 22px 18px 18px; }
  .pk-confirm-emoji { font-size: 38px; }
  .pk-confirm-title { font-size: 17px; }
}

/* ============================================================================
   Listing page chrome — premium hero with KPI tiles, pill-search toolbar,
   refined data table. Used across the admin apps for every listing screen
   (zones, shops, products, orders, customers, etc.) so the dashboards feel
   uniform end-to-end.

   Hero is one consistent brand-orange tone across EVERY listing screen.
   The [data-tone] attribute on .pk-list-hero is now ignored — kept on the
   markup as harmless metadata so we don't have to touch 30+ blade files.
   ============================================================================ */
.pk-list-hero {
  position: relative; overflow: hidden;
  border-radius: 20px;
  border: 0;
  padding: 22px;
  margin-bottom: 18px;
  color: #fff;
  box-shadow: 0 14px 32px rgba(234,88,12,.32),
              inset 0 1px 0 rgba(255,255,255,.16);
  background:
    radial-gradient(circle at 80% 18%, rgba(255,255,255,.30), transparent 50%),
    radial-gradient(circle at 14% 88%, rgba(255,255,255,.12), transparent 55%),
    linear-gradient(135deg, #F59E0B 0%, #F97316 55%, #EA580C 100%);
}
.pk-list-hero::before {
  content: ''; position: absolute; top: -60px; right: -60px;
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.30), transparent 65%);
  pointer-events: none;
}

.pk-list-hero-row {
  display: flex; align-items: center; gap: 18px;
  position: relative;
}
.pk-list-hero-icon {
  width: 72px; height: 72px; border-radius: 22px;
  background: #fff;
  color: var(--pk-primary, #F97316);
  box-shadow: 0 10px 24px rgba(15,23,42,.18),
              inset 0 0 0 1px rgba(255,255,255,.6);
  display: grid; place-items: center;
  font-size: 2rem; flex-shrink: 0;
}
.pk-list-hero-title {
  font-weight: 800; font-size: 1.5rem; margin: 0;
  color: #fff; letter-spacing: -.01em; line-height: 1.15;
  text-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.pk-list-hero-sub {
  margin-top: 4px;
  font-size: .85rem; color: rgba(255,255,255,.92); font-weight: 600;
}

/* Stats row INSIDE the hero — glass tiles over the dark orange gradient.
   Auto-sizes from 2 to 6 columns depending on count via grid-auto-flow. */
.pk-list-hero-stats {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px dashed rgba(255,255,255,.36);
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.pk-list-stat {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 14px; padding: 10px 12px;
  display: flex; align-items: center; gap: 10px;
  transition: transform .15s ease, background .15s ease, box-shadow .2s ease;
}
.pk-list-stat:hover {
  transform: translateY(-2px);
  background: #fff;
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}
.pk-list-stat .stat-ico {
  width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  color: #fff; font-size: .95rem; flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(15,23,42,.12);
}
.pk-list-stat.tone-orange .stat-ico { background: linear-gradient(135deg, #F97316, #EA580C); }
.pk-list-stat.tone-green  .stat-ico { background: linear-gradient(135deg, #22C55E, #15803D); }
.pk-list-stat.tone-blue   .stat-ico { background: linear-gradient(135deg, #3B82F6, #1D4ED8); }
.pk-list-stat.tone-purple .stat-ico { background: linear-gradient(135deg, #8B5CF6, #6D28D9); }
.pk-list-stat.tone-pink   .stat-ico { background: linear-gradient(135deg, #EC4899, #DB2777); }
.pk-list-stat.tone-amber  .stat-ico { background: linear-gradient(135deg, #FACC15, #CA8A04); }
.pk-list-stat.tone-red    .stat-ico { background: linear-gradient(135deg, #EF4444, #B91C1C); }
.pk-list-stat.tone-grey   .stat-ico { background: linear-gradient(135deg, #9CA3AF, #4B5563); }
.pk-list-stat .stat-label {
  font-size: .6rem; font-weight: 800; letter-spacing: .5px;
  color: #4B5563; text-transform: uppercase;
}
.pk-list-stat .stat-value {
  font-weight: 800; font-size: 1.05rem; color: #1F2937; line-height: 1.15;
}
.pk-list-stat .stat-value .sub {
  font-size: .7rem; color: #6B7280; font-weight: 600; margin-left: 2px;
}

/* Toolbar — pill search box + gradient "Add" button. */
.pk-list-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px; flex-wrap: wrap;
}
.pk-list-toolbar > .left {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1;
}
.pk-list-search {
  position: relative; min-width: 240px; max-width: 380px; flex: 1;
}
.pk-list-search .search-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: #9CA3AF; pointer-events: none; transition: color .15s ease;
}
.pk-list-search input,
.pk-list-search select {
  width: 100%;
  background: #fff;
  border: 1.5px solid #E5E7EB;
  border-radius: 12px;
  /* Right padding reserves room for the absolutely-positioned Search
     button so the placeholder + typed text never sit under it. */
  padding: 10px 96px 10px 40px;
  font-size: .88rem; color: #1F2937; font-weight: 500;
  transition: border-color .15s, box-shadow .15s;
}
/* The submit button has no <input>/<select> sibling next to it on
   forms that don't have an explicit search input — reset its absolute
   offsets in that case isn't needed; this rule just ensures the input
   text-overflow ellipsis doesn't show through. */
.pk-list-search input { text-overflow: ellipsis; }
.pk-list-search input::placeholder { color: #9CA3AF; font-weight: 500; }
.pk-list-search input:focus,
.pk-list-search select:focus {
  outline: none;
  border-color: var(--pk-primary);
  box-shadow: 0 0 0 3px rgba(249,115,22,.12);
}
.pk-list-search input:focus ~ .search-icon { color: var(--pk-primary); }
.pk-list-search button[type="submit"] {
  position: absolute; right: 4px; top: 4px; bottom: 4px;
  background: linear-gradient(135deg, #F97316, #EA580C);
  color: #fff; border: 0; border-radius: 9px;
  padding: 0 14px;
  font-size: .78rem; font-weight: 800; letter-spacing: .3px;
  cursor: pointer;
  transition: transform .12s, box-shadow .2s;
}
.pk-list-search button[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(249,115,22,.32);
}

/* Filter dropdown (no embedded button) */
.pk-list-filter {
  position: relative;
}
.pk-list-filter select {
  background: #fff;
  border: 1.5px solid #E5E7EB;
  border-radius: 12px;
  padding: 10px 38px 10px 14px;
  font-size: .85rem; color: #1F2937; font-weight: 600;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='%231F2937' d='M3.2 5.6 8 10.4l4.8-4.8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.pk-list-filter select:hover { border-color: var(--pk-primary); }
.pk-list-filter select:focus {
  outline: none; border-color: var(--pk-primary);
  box-shadow: 0 0 0 3px rgba(249,115,22,.12);
}

.pk-list-add-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(135deg, #F97316, #EA580C);
  color: #fff; border: 0;
  border-radius: 12px;
  padding: 10px 16px;
  font-size: .88rem; font-weight: 800;
  text-decoration: none;
  box-shadow: 0 6px 14px rgba(249,115,22,.32);
  transition: transform .15s ease, box-shadow .2s ease;
}
.pk-list-add-btn:hover {
  transform: translateY(-2px); color: #fff;
  box-shadow: 0 10px 22px rgba(249,115,22,.45);
}
.pk-list-add-btn i { font-size: 1rem; }

/* Table card */
.pk-list-table-card {
  background: #fff;
  border: 1px solid #F3F4F6;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(15,23,42,.04);
}
.pk-list-table-card .table-responsive { overflow-x: auto; }
.pk-list-table { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; }
.pk-list-table thead th {
  font-size: .68rem; font-weight: 800; letter-spacing: .8px;
  text-transform: uppercase; color: #6B7280;
  background: #FAFAFA;
  padding: 14px 16px;
  border-bottom: 1px solid #F3F4F6;
  text-align: left;
  white-space: nowrap;
}
.pk-list-table thead th.text-end { text-align: right; }
.pk-list-table thead th.text-center { text-align: center; }
.pk-list-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid #F3F4F6;
  vertical-align: middle;
  font-size: .88rem;
}
.pk-list-table tbody tr {
  transition: background .15s ease;
}
.pk-list-table tbody tr:hover { background: #FFF7ED; }
.pk-list-table tbody tr:last-child td { border-bottom: 0; }

/* Cell helpers */
.pk-list-table .lt-name {
  display: flex; align-items: center; gap: 12px;
}
.pk-list-table .lt-avatar {
  width: 40px; height: 40px; border-radius: 11px;
  background: linear-gradient(135deg, #FFF7ED, #FFEDD5);
  border: 1px solid #FED7AA;
  padding: 4px; overflow: hidden;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.pk-list-table .lt-avatar img { width: 100%; height: 100%; object-fit: contain; }
.pk-list-table .lt-avatar.is-initials {
  background: linear-gradient(135deg, #F97316, #EA580C);
  color: #fff; font-weight: 900; font-size: 1rem;
  border-color: transparent;
  padding: 0;
  box-shadow: 0 4px 10px rgba(234,88,12,.32);
}
.pk-list-table .lt-avatar.tone-blue   { background: linear-gradient(135deg, #3B82F6, #1D4ED8); box-shadow: 0 4px 10px rgba(29,78,216,.32); }
.pk-list-table .lt-avatar.tone-green  { background: linear-gradient(135deg, #22C55E, #15803D); box-shadow: 0 4px 10px rgba(21,128,61,.32); }
.pk-list-table .lt-avatar.tone-purple { background: linear-gradient(135deg, #8B5CF6, #6D28D9); box-shadow: 0 4px 10px rgba(109,40,217,.32); }
.pk-list-table .lt-avatar.tone-pink   { background: linear-gradient(135deg, #EC4899, #DB2777); box-shadow: 0 4px 10px rgba(219,39,119,.32); }
.pk-list-table .lt-avatar .placeholder { color: var(--pk-primary); font-size: 1.1rem; }
.pk-list-table .lt-title {
  font-weight: 800; color: #1F2937; line-height: 1.15;
}
.pk-list-table .lt-sub {
  font-size: .7rem; color: #9CA3AF; margin-top: 1px; font-weight: 500;
}

.pk-list-table .lt-code {
  display: inline-block;
  background: #FFF7ED;
  color: var(--pk-primary-dark);
  border: 1px solid #FED7AA;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: .68rem; font-weight: 800; letter-spacing: .5px;
  font-family: 'SF Mono', 'Menlo', monospace;
  white-space: nowrap;
}

.pk-list-table .lt-num {
  font-weight: 700; color: #1F2937; font-variant-numeric: tabular-nums;
}
.pk-list-table .lt-num.is-zero { color: #9CA3AF; font-weight: 500; }

.pk-list-table .lt-money {
  font-weight: 800; color: #15803D; font-variant-numeric: tabular-nums;
}
.pk-list-table .lt-money.is-empty { color: #9CA3AF; font-weight: 500; }
.pk-list-table .lt-money.is-red { color: #DC2626; }

.pk-list-table .lt-muted { color: #9CA3AF; font-size: .8rem; font-style: italic; }

.pk-list-table .lt-chip {
  display: inline-block;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: .72rem; font-weight: 800; letter-spacing: .2px;
}
.pk-list-table .lt-chip.tone-blue   { background: #DBEAFE; color: #1E40AF; }
.pk-list-table .lt-chip.tone-green  { background: #DCFCE7; color: #15803D; }
.pk-list-table .lt-chip.tone-orange { background: #FFEDD5; color: #9A3412; }
.pk-list-table .lt-chip.tone-purple { background: #EDE9FE; color: #6D28D9; }
.pk-list-table .lt-chip.tone-pink   { background: #FCE7F3; color: #BE185D; }
.pk-list-table .lt-chip.tone-amber  { background: #FEF3C7; color: #92400E; }
.pk-list-table .lt-chip.tone-red    { background: #FEE2E2; color: #B91C1C; }
.pk-list-table .lt-chip.tone-grey   { background: #F3F4F6; color: #4B5563; }

.pk-list-table .lt-status {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 999px;
  font-size: .7rem; font-weight: 800; letter-spacing: .3px;
}
.pk-list-table .lt-status.is-on {
  background: #DCFCE7; color: #15803D; border: 1px solid #BBF7D0;
}
.pk-list-table .lt-status.is-on::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: #22C55E; box-shadow: 0 0 0 2px rgba(34,197,94,.32);
  display: inline-block;
}
.pk-list-table .lt-status.is-off {
  background: #F3F4F6; color: #6B7280; border: 1px solid #E5E7EB;
}
.pk-list-table .lt-status.is-pending {
  background: #FEF3C7; color: #92400E; border: 1px solid #FCD34D;
}
.pk-list-table .lt-status.is-warn {
  background: #FFEDD5; color: #9A3412; border: 1px solid #FED7AA;
}
.pk-list-table .lt-status.is-bad {
  background: #FEE2E2; color: #B91C1C; border: 1px solid #FECACA;
}

/* Action buttons */
.pk-list-table .lt-actions {
  display: inline-flex; gap: 6px; align-items: center; justify-content: flex-end;
}
.pk-list-table .lt-act {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px;
  border-radius: 10px;
  font-size: .76rem; font-weight: 700; letter-spacing: .3px;
  text-decoration: none; border: 1.5px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s, transform .12s, box-shadow .15s, border-color .15s;
}
.pk-list-table .lt-act.is-primary {
  background: #FFF7ED; color: var(--pk-primary-dark); border-color: #FED7AA;
}
.pk-list-table .lt-act.is-primary:hover {
  background: linear-gradient(135deg, #F97316, #EA580C);
  color: #fff; border-color: transparent;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(249,115,22,.32);
}
.pk-list-table .lt-act.is-edit {
  background: #fff; color: #4B5563; border-color: #E5E7EB;
  width: 32px; padding: 6px; justify-content: center;
}
.pk-list-table .lt-act.is-edit:hover {
  background: #DBEAFE; color: #1D4ED8; border-color: #BFDBFE;
  transform: translateY(-1px);
}
.pk-list-table .lt-act.is-view {
  background: #fff; color: #4B5563; border-color: #E5E7EB;
}
.pk-list-table .lt-act.is-view:hover {
  background: #EDE9FE; color: #6D28D9; border-color: #DDD6FE;
  transform: translateY(-1px);
}
.pk-list-table .lt-act.is-delete {
  background: #fff; color: #DC2626; border-color: #FECACA;
  width: 32px; padding: 6px; justify-content: center;
}
.pk-list-table .lt-act.is-delete:hover {
  background: #DC2626; color: #fff; border-color: transparent;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(220,38,38,.32);
}
.pk-list-table .lt-act.is-approve {
  background: #DCFCE7; color: #15803D; border-color: #BBF7D0;
}
.pk-list-table .lt-act.is-approve:hover {
  background: linear-gradient(135deg, #22C55E, #15803D);
  color: #fff; border-color: transparent;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(34,197,94,.32);
}
.pk-list-table .lt-act.is-reject {
  background: #FEE2E2; color: #B91C1C; border-color: #FECACA;
}
.pk-list-table .lt-act.is-reject:hover {
  background: #DC2626; color: #fff; border-color: transparent;
}

/* Empty state */
.pk-list-empty {
  padding: 60px 24px; text-align: center;
}
.pk-list-empty .empty-ico {
  width: 80px; height: 80px; border-radius: 50%;
  background: linear-gradient(135deg, #FFF7ED, #FFEDD5);
  color: var(--pk-primary);
  display: inline-grid; place-items: center;
  font-size: 2rem; margin-bottom: 16px;
  box-shadow: 0 8px 18px rgba(249,115,22,.18);
}
.pk-list-empty h3 {
  font-weight: 800; font-size: 1.1rem; color: #1F2937; margin: 0 0 4px;
}
.pk-list-empty p { color: #6B7280; font-size: .88rem; margin: 0 0 16px; }

/* Pagination wrapper */
.pk-list-table-card .pk-list-pagination {
  padding: 14px 16px;
  border-top: 1px solid #F3F4F6;
}

/* Responsive tightening */
@media (max-width: 767.98px) {
  .pk-list-hero { padding: 16px; border-radius: 16px; }
  .pk-list-hero-row { gap: 12px; }
  .pk-list-hero-icon { width: 56px; height: 56px; border-radius: 16px; font-size: 1.5rem; }
  .pk-list-hero-title { font-size: 1.2rem; }
  .pk-list-stat { padding: 8px 10px; }
  .pk-list-stat .stat-ico { width: 30px; height: 30px; font-size: .88rem; }
  .pk-list-stat .stat-value { font-size: .95rem; }
  .pk-list-toolbar { gap: 8px; }
  .pk-list-search { min-width: 100%; max-width: 100%; }
  .pk-list-table .lt-act.is-primary .lbl { display: none; }
  .pk-list-table .lt-act.is-primary { padding: 6px 10px; }
}

/* ─── Contact strips (partials/_contacts.blade.php) ─────────────────
   Used on zone-detail + per-shop tile across the super-admin dashboard.
   Tone follows the owner: orange for zones, blue for shops. Phone cells
   are tel: links so click-to-dial works in the desktop browser too. */
.pk-contacts {
  background: #fff; border: 1px solid #F3F4F6;
  border-radius: 16px; padding: 14px 16px;
  margin-bottom: 18px;
}
.pk-contacts.is-zone { background: linear-gradient(135deg, #FFF7ED, #FFFFFF); border-color: #FED7AA; }
.pk-contacts.is-shop { background: linear-gradient(135deg, #EFF6FF, #FFFFFF); border-color: #BFDBFE; }
.pk-contacts-head {
  display: flex; align-items: center; gap: 8px;
  font-size: .72rem; font-weight: 900; color: #6B7280;
  letter-spacing: .5px; text-transform: uppercase;
  margin-bottom: 10px;
}
.pk-contacts.is-zone .pk-contacts-head i { color: #EA580C; }
.pk-contacts.is-shop .pk-contacts-head i { color: #1D4ED8; }
.pk-contacts-grid {
  display: grid; gap: 10px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .pk-contacts-grid { grid-template-columns: 1fr 1fr; } }

.pk-c-card {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: inherit;
  background: #fff; border: 1px solid #F3F4F6;
  border-radius: 12px; padding: 11px 14px;
  transition: transform .12s ease, box-shadow .15s, border-color .15s;
}
.pk-c-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(15,23,42,.08);
  color: inherit;
}
.pk-c-card .ic {
  width: 40px; height: 40px; border-radius: 12px;
  background: linear-gradient(135deg, #F97316, #EA580C); color: #fff;
  display: grid; place-items: center; flex-shrink: 0;
  font-size: 1.05rem;
  box-shadow: 0 6px 14px rgba(249,115,22,.30);
}
.pk-c-card.is-support .ic {
  background: linear-gradient(135deg, #3B82F6, #1D4ED8);
  box-shadow: 0 6px 14px rgba(29,78,216,.30);
}
.pk-contacts.is-shop .pk-c-card .ic {
  background: linear-gradient(135deg, #3B82F6, #1D4ED8);
  box-shadow: 0 6px 14px rgba(29,78,216,.30);
}
.pk-contacts.is-shop .pk-c-card.is-support .ic {
  background: linear-gradient(135deg, #8B5CF6, #6D28D9);
  box-shadow: 0 6px 14px rgba(109,40,217,.30);
}
.pk-c-card .role {
  font-size: .62rem; font-weight: 900; letter-spacing: .5px;
  text-transform: uppercase; color: #9CA3AF;
}
.pk-c-card .name { font-weight: 800; color: #1F2937; font-size: .92rem; }
.pk-c-card .phone {
  font-size: .78rem; color: #4B5563; font-weight: 700;
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 2px;
}
.pk-c-card .phone i { color: #15803D; font-size: .7rem; }
.pk-c-card .call {
  width: 32px; height: 32px; border-radius: 50%;
  background: #DCFCE7; color: #15803D;
  display: grid; place-items: center; flex-shrink: 0;
  transition: background .15s, color .15s, transform .12s;
}
.pk-c-card:hover .call {
  background: linear-gradient(135deg, #22C55E, #15803D);
  color: #fff; transform: scale(1.08);
}

/* Compact pill variant — sits inside a shop tile or list row. */
.pk-contacts-compact {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
}
.pk-c-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: #FFF7ED; border: 1px solid #FED7AA;
  color: #7C2D12; text-decoration: none;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: .7rem; font-weight: 700;
  transition: background .15s, border-color .15s, transform .12s;
}
.pk-c-pill.is-support { background: #EFF6FF; border-color: #BFDBFE; color: #1E3A8A; }
.pk-c-pill:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, #F97316, #EA580C); color: #fff; border-color: transparent;
}
.pk-c-pill.is-support:hover {
  background: linear-gradient(135deg, #3B82F6, #1D4ED8);
}
.pk-c-pill .t { font-weight: 800; }
.pk-c-pill .ph {
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  font-size: .68rem; opacity: .85;
}

/* ─── Copy-to-clipboard button (pakkathu-copy.js) ──────────────────
   Sits inline next to phones, emails, codes — anywhere an admin
   might want to grab the value into their clipboard with one click.
   On copy success the inner <i> swaps to bi-check2 for ~1.2s and the
   button glows green. */
.pk-copy-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px;
  background: transparent; border: 1px solid transparent; color: #9CA3AF;
  cursor: pointer; padding: 0;
  vertical-align: middle; margin-left: 6px;
  transition: background .12s, color .12s, border-color .12s, transform .1s;
}
.pk-copy-btn:hover {
  background: #F3F4F6; border-color: #E5E7EB; color: #1F2937;
  transform: translateY(-1px);
}
.pk-copy-btn.is-copied {
  background: #DCFCE7; border-color: #BBF7D0; color: #15803D;
}
.pk-copy-btn i { font-size: .82rem; }

/* Logo thumbnail used in KV grids (zones/show, shops/show) — replaces
   the raw filename path with a small clickable preview. */
.pk-thumb {
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid #E5E7EB;
  border-radius: 10px; padding: 6px 10px 6px 6px;
  text-decoration: none; color: inherit;
  transition: border-color .15s, box-shadow .15s, transform .12s;
}
.pk-thumb:hover {
  border-color: var(--pk-primary);
  box-shadow: 0 4px 10px rgba(249,115,22,.15);
  transform: translateY(-1px); color: inherit;
}
.pk-thumb .img {
  width: 36px; height: 36px; border-radius: 8px;
  background: #F9FAFB; overflow: hidden;
  display: grid; place-items: center; flex-shrink: 0;
  border: 1px solid #F3F4F6;
}
.pk-thumb .img img { width: 100%; height: 100%; object-fit: contain; padding: 2px; }
.pk-thumb .fn {
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  font-size: .72rem; color: #6B7280; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis;
  max-width: 240px; white-space: nowrap;
}