/* ==========================================================================
   পল্লী বাজার — design system
   Tokens, components and layout taken from the approved storefront design.
   Layered over Bootstrap: Bootstrap supplies the grid and a few behaviours,
   everything visual below is ours.
   ========================================================================== */

:root {
  /* Brand */
  --pb-green: #2F6B3B;
  --pb-green-dark: #224F2B;
  --pb-green-deep: #13261A;
  --pb-green-tint: #E6EFE3;
  --pb-green-tint-2: #EAF3EC;
  --pb-green-tint-3: #F1F6EF;
  --pb-gold: #C7861B;
  --pb-gold-dark: #A86F12;
  --pb-gold-light: #F2C877;
  --pb-gold-tint: #FBF1DC;
  --pb-plum: #A3305A;
  --pb-plum-dark: #86244A;
  --pb-plum-tint: #F3D9E1;
  --pb-plum-soft: #E9B8C9;
  --pb-plum-ink: #3A1A28;
  --pb-sky: #8FD6F6;
  --pb-sky-mid: #5FB8E8;
  --pb-sky-deep: #3B96CE;
  --pb-navy: #0B2A4A;

  /* Ink */
  --pb-ink: #1E2A20;
  --pb-ink-2: #2C3A2D;
  --pb-ink-3: #3A463B;
  --pb-ink-soft: #4C584D;
  --pb-muted: #5E6B5F;
  --pb-danger: #B4442E;
  --pb-danger-dark: #8A2E1C;

  /* Surfaces */
  --pb-bg: #F7F7F4;
  --pb-surface: #ffffff;
  --pb-line: #E2E2DA;
  --pb-line-soft: #ECECE6;
  --pb-line-softer: #F0F0EB;
  --pb-hover: #EEEEE8;

  /* Feedback — every notice, status and empty state reads from these,
     so no component hard-codes a state colour. */
  --pb-success: var(--pb-green);
  --pb-success-tint: var(--pb-green-tint-2);
  --pb-success-ink: var(--pb-green-dark);
  --pb-danger-tint: #FBECE8;
  --pb-danger-ink: #8A2E1C;
  /* "Heads up", not "something broke" — amber keeps advisory notices on
     brand instead of dropping a generic blue into a green/gold palette. */
  --pb-info: var(--pb-gold-dark);
  --pb-info-tint: #FBF1DF;
  --pb-info-ink: #7A4E08;

  /* Type */
  --pb-font-display: 'Anek Bangla', 'Hind Siliguri', system-ui, sans-serif;
  --pb-font-body: 'Hind Siliguri', system-ui, -apple-system, sans-serif;

  /* Shape */
  --pb-radius-sm: 10px;
  --pb-radius: 12px;
  --pb-radius-lg: 18px;
  --pb-radius-card: 22px;
  --pb-radius-panel: 28px;
  --pb-pill: 999px;
  --pb-circle: 50%;

  /* Neutral top-light sheen for tinted discs and swatches — not a brand
     colour, just the highlight that keeps a flat fill from looking printed. */
  --pb-sheen: linear-gradient(168deg, rgba(255, 255, 255, .40), rgba(255, 255, 255, 0) 58%);

  /* Elevation */
  --pb-shadow-card: 0 1px 2px rgba(20, 30, 22, .04), 0 6px 20px rgba(20, 30, 22, .04);
  --pb-shadow-hover: 0 20px 44px rgba(20, 30, 22, .12);
  --pb-shadow-hero: 0 20px 50px rgba(20, 30, 22, .08);
  --pb-shadow-float: 0 4px 14px rgba(0, 0, 0, .12);

  /* Rhythm */
  --pb-container: 1280px;
  --pb-gutter: 32px;

  --pb-ease: cubic-bezier(.4, 0, .2, 1);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--pb-bg);
  font-family: var(--pb-font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--pb-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

h1, h2, h3, h4, .pb-display {
  font-family: var(--pb-font-display);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.22;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(27px, 3.4vw, 38px); }
h2 { font-size: clamp(23px, 2.6vw, 34px); }
h3 { font-size: clamp(18px, 1.6vw, 21px); }

p { margin: 0; text-wrap: pretty; }

a { color: var(--pb-green); text-decoration: none; transition: color .18s var(--pb-ease); }
a:hover { color: var(--pb-green-dark); text-decoration: underline; }

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

input, select, button, textarea { font-family: inherit; font-size: inherit; }

/* Visible focus for keyboard users, invisible for mouse users. */
:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--pb-green) 55%, transparent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Brand-tinted selection instead of the browser's default blue. */
::selection { background: color-mix(in srgb, var(--pb-green) 22%, transparent); color: var(--pb-ink); }

::placeholder { color: var(--pb-muted); opacity: 1; }

/* The header is sticky, so anything linked to by #id must clear it. */
:target, [id] { scroll-margin-top: 96px; }

html { scroll-behavior: smooth; }

/* Screen-reader-only text. */
.pb-sr {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Skip link — first thing a keyboard or screen-reader user meets. */
.pb-skip {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--pb-green); color: #fff; padding: 10px 18px;
  border-radius: var(--pb-radius); font-weight: 600;
  transition: top .2s var(--pb-ease);
}
.pb-skip:focus { top: 16px; color: #fff; text-decoration: none; }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.pb-shell { min-height: 100vh; display: flex; flex-direction: column; }
.pb-main { flex: 1; }

.pb-container {
  max-width: var(--pb-container);
  margin-inline: auto;
  padding-inline: var(--pb-gutter);
}

/* Page intro: the heading-plus-standfirst block that opens a listing,
   the vendor index, the outlet map and the error pages. It was repeated
   as inline styles on each of those; it lives here now. */
.pb-lede { max-width: 68ch; margin-bottom: 24px; }
.pb-lede > p {
  margin-top: 8px; font-size: 16px; color: var(--pb-ink-3);
}
.pb-lede--center { margin-inline: auto; text-align: center; }

/* Vertical rhythm without a wrapper div per gap. */
.pb-stack { display: flex; flex-direction: column; gap: 20px; }
.pb-stack--sm { gap: 10px; }
.pb-stack--lg { gap: 28px; }

.pb-section { padding-block: 40px; }
.pb-section--tight { padding-block: 24px; }
.pb-section--flush-top { padding-top: 0; }

.pb-section-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.pb-section-head p { color: var(--pb-muted); font-size: 14.5px; margin-top: 2px; }

.pb-link-more { font-weight: 600; color: var(--pb-green); white-space: nowrap; }

.pb-page-actions { display: flex; justify-content: flex-end; margin-bottom: 16px; }

.pb-panel {
  background: var(--pb-surface);
  border: 1px solid rgba(20, 30, 22, .05);
  border-radius: var(--pb-radius-panel);
  box-shadow: var(--pb-shadow-card);
  padding: 28px;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.pb-btn {
  --pb-btn-bg: var(--pb-green);
  --pb-btn-fg: #fff;
  --pb-btn-bg-hover: var(--pb-green-dark);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px;
  border: 0; border-radius: var(--pb-radius);
  background: var(--pb-btn-bg); color: var(--pb-btn-fg);
  font-size: 15.5px; font-weight: 600; line-height: 1;
  cursor: pointer; text-align: center;
  transition: background-color .2s var(--pb-ease), transform .15s var(--pb-ease), box-shadow .2s var(--pb-ease);
}
.pb-btn:hover {
  background: var(--pb-btn-bg-hover); color: var(--pb-btn-fg); text-decoration: none;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--pb-btn-bg) 26%, transparent);
}
.pb-btn:active { transform: translateY(1px); box-shadow: none; }
.pb-btn[disabled], .pb-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

.pb-btn--pill { border-radius: var(--pb-pill); }
.pb-btn--sm { min-height: 38px; padding: 0 16px; font-size: 14px; }
.pb-btn--lg { min-height: 52px; padding: 0 28px; font-size: 16.5px; }
.pb-btn--block { width: 100%; }

.pb-btn--dark { --pb-btn-bg: var(--pb-ink); --pb-btn-bg-hover: #000; }
.pb-btn--gold { --pb-btn-bg: var(--pb-gold); --pb-btn-bg-hover: var(--pb-gold-dark); }
.pb-btn--plum { --pb-btn-bg: var(--pb-plum); --pb-btn-bg-hover: var(--pb-plum-dark); }
.pb-btn--whatsapp { --pb-btn-bg: #1FA855; --pb-btn-bg-hover: #178443; }
.pb-btn--danger { --pb-btn-bg: var(--pb-danger); --pb-btn-bg-hover: var(--pb-danger-ink); }
.pb-btn--ghost {
  --pb-btn-bg: transparent; --pb-btn-fg: var(--pb-ink); --pb-btn-bg-hover: var(--pb-hover);
  border: 1px solid var(--pb-line);
}
.pb-btn--tint { --pb-btn-bg: var(--pb-green-tint); --pb-btn-fg: var(--pb-green); --pb-btn-bg-hover: var(--pb-green-tint-2); }
/* The quiet variants stay flat — only a solid button earns the lift. */
.pb-btn--ghost:hover, .pb-btn--tint:hover { box-shadow: none; }

/* Icon-only square button, as in the header actions. */
.pb-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex-shrink: 0;
  border: 0; border-radius: var(--pb-radius);
  background: transparent; color: var(--pb-ink); cursor: pointer;
  transition: background-color .2s var(--pb-ease);
}
.pb-icon-btn:hover { background: var(--pb-hover); color: var(--pb-ink); }

/* Round “+” add-to-bag button on product cards. */
.pb-add {
  width: 38px; height: 38px; flex-shrink: 0;
  border: 0; border-radius: var(--pb-pill);
  background: var(--pb-green-tint-2); color: #1F6B3B;
  font-size: 22px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color .2s var(--pb-ease), color .2s var(--pb-ease), transform .15s var(--pb-ease);
}
.pb-add:hover { background: var(--pb-green); color: #fff; }
.pb-add:active { transform: scale(.92); }
.pb-add.is-added { background: var(--pb-green); color: #fff; }

/* --------------------------------------------------------------------------
   Pills, badges and chips
   -------------------------------------------------------------------------- */

.pb-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600;
  padding: 3px 10px; border-radius: var(--pb-pill);
  background: var(--pb-surface); color: var(--pb-green);
}
.pb-pill--verified { background: var(--pb-green-tint); color: var(--pb-green); }
.pb-pill--preorder { background: var(--pb-ink-2); color: var(--pb-gold-light); }
.pb-pill--organic { background: #fff; color: var(--pb-green); }
.pb-pill--plum { background: #fff; color: var(--pb-plum); font-weight: 700; font-size: 13px; padding: 4px 12px; }
.pb-pill--tint { background: #fff; color: var(--pb-green); font-weight: 700; font-size: 13px; padding: 4px 12px; }

.pb-chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 16px;
  border: 1px solid var(--pb-line); border-radius: var(--pb-pill);
  background: var(--pb-surface); color: var(--pb-ink);
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background-color .2s var(--pb-ease), border-color .2s var(--pb-ease), color .2s var(--pb-ease);
}
.pb-chip:hover { border-color: var(--pb-green); color: var(--pb-green); text-decoration: none; }
.pb-chip[aria-current="true"], .pb-chip.is-active {
  background: var(--pb-ink); border-color: var(--pb-ink); color: #fff;
}

.pb-chip-row--spaced { margin-bottom: 24px; }
.pb-chip-row { display: flex; gap: 10px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   Top strip, header and nav
   -------------------------------------------------------------------------- */

.pb-strip {
  background: var(--pb-green-deep); color: #C9D8C8;
  font-size: 12.5px; letter-spacing: .01em;
}
.pb-strip .pb-container {
  display: flex; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; padding-block: 7px;
}
.pb-strip a { color: inherit; }
.pb-strip a:hover { color: #fff; }
.pb-strip-links { display: flex; gap: 22px; flex-wrap: wrap; }
.pb-partner-menu { position: relative; }
.pb-partner-menu summary { cursor: pointer; list-style: none; white-space: nowrap; }
.pb-partner-menu summary::-webkit-details-marker { display: none; }
.pb-partner-menu summary::after { content: "⌄"; margin-left: 5px; font-size: 11px; }
.pb-strip .pb-partner-menu[open] summary { color: #fff; }
.pb-nav--partner { color: var(--pb-green-dark) !important; font-weight: 600; }
.pb-nav--partner-menu summary { padding: 10px 9px; font-size: 14px; color: var(--pb-green-dark); }
.pb-nav--partner-menu[open] summary { color: var(--pb-green); }
.pb-nav--partner-menu .pb-partner-menu__panel { top: calc(100% - 1px); right: auto; left: 0; }
.pb-partner-menu__panel {
  position: absolute; z-index: 20; top: calc(100% + 8px); right: 0; min-width: 220px;
  padding: 12px; background: #fff; color: var(--pb-ink); border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius-card); box-shadow: var(--pb-shadow-card);
}
.pb-partner-menu__group { display: grid; gap: 2px; padding: 5px 0; }
.pb-partner-menu__group + .pb-partner-menu__group { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--pb-border); }
.pb-partner-menu__group strong { padding: 4px 8px 6px; color: var(--pb-green-dark); font-size: 13px; }
.pb-partner-menu__group a { padding: 5px 8px; color: var(--pb-ink-2); }
.pb-partner-menu__group a:hover { color: var(--pb-green); background: var(--pb-green-tint-3); text-decoration: none; }

/* Language switcher — two short labels, so a segmented pill beats a <select>:
   one tap, no menu, and each language keeps its own readable URL. */
.pb-lang { display: flex; align-items: center; gap: 2px; }
.pb-lang__item {
  padding: 2px 8px; border-radius: 999px; line-height: 1.5;
  text-decoration: none; white-space: nowrap;
}
.pb-lang__item:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.pb-lang__item--on {
  background: rgba(255, 255, 255, .18); color: #fff; font-weight: 600;
}
.pb-lang__item:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

.pb-header {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255, 255, 255, .84);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgba(20, 30, 22, .06);
}
.pb-header__bar {
  display: flex; align-items: center; gap: 24px;
  padding-block: 14px;
}

.pb-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.pb-brand:hover { text-decoration: none; }
.pb-brand img {
  width: 46px; height: 46px; border-radius: var(--pb-radius);
  object-fit: cover; background: #fff; border: 1px solid var(--pb-line-soft);
}
.pb-brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.pb-brand__name {
  font-family: var(--pb-font-display); font-weight: 600;
  font-size: 25px; color: var(--pb-green-dark);
}
.pb-brand__tagline { font-size: 11.5px; color: var(--pb-muted); }

.pb-search {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  height: 48px; padding: 0 6px 0 18px;
  background: #fff; border: 1px solid var(--pb-line); border-radius: var(--pb-pill);
  transition: border-color .2s var(--pb-ease), box-shadow .2s var(--pb-ease);
}
.pb-search:focus-within {
  border-color: var(--pb-green);
  box-shadow: 0 0 0 3px var(--pb-green-tint);
}
.pb-search input {
  /* Stretch to the pill's full height so a tap anywhere in it focuses the field. */
  flex: 1; align-self: stretch; min-width: 0; border: 0; outline: 0;
  background: transparent; color: var(--pb-ink); font-size: 15px;
}
.pb-search button { height: 36px; min-height: 36px; padding: 0 18px; border-radius: var(--pb-pill); font-size: 14px; }

.pb-header__actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.pb-bag {
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 16px 0 12px;
  border: 0; border-radius: var(--pb-radius);
  background: var(--pb-ink); color: #fff;
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background-color .2s var(--pb-ease);
}
.pb-bag:hover { background: #000; color: #fff; text-decoration: none; }
.pb-bag__count {
  min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 11px; background: var(--pb-gold); color: #fff;
  font-size: 12.5px; display: inline-flex; align-items: center; justify-content: center;
}
.pb-bag__count.is-bumped { animation: pb-bump .35s var(--pb-ease); }

@keyframes pb-bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

.pb-nav {
  display: flex; flex-wrap: wrap; align-items: center;
  padding-inline: calc(var(--pb-gutter) - 10px);
}
.pb-nav a {
  padding: 10px 9px; font-size: 14px; color: var(--pb-ink-3); white-space: nowrap;
}
.pb-nav a:hover { color: var(--pb-green); text-decoration: none; }
.pb-nav a.pb-nav--strong { font-size: 14.5px; font-weight: 600; color: var(--pb-green-dark); padding-inline: 12px; }
.pb-nav a.pb-nav--accent { font-size: 14.5px; font-weight: 700; color: var(--pb-gold); padding-inline: 12px; }
.pb-nav a[aria-current="page"] { color: var(--pb-green); font-weight: 600; }

.pb-nav-toggle { display: none; }

/* --------------------------------------------------------------------------
   Hero carousel
   -------------------------------------------------------------------------- */

.pb-hero {
  position: relative; overflow: hidden;
  min-width: 0;
  border-radius: var(--pb-radius-panel);
  border: 1px solid rgba(20, 30, 22, .06);
  box-shadow: var(--pb-shadow-hero);
  isolation: isolate;
}
.pb-home-hero { padding-inline: 24px; }

/* The hero and the photo-card rail beside it. The rail is a fixed column so
   the hero keeps the whole of the remaining width on a wide screen, and the
   two rail decks split that height evenly between them. */
.pb-herorow {
  max-width: 1280px; margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1fr) 400px;
  align-items: stretch; gap: 16px;
}
/* The hero is stretched to the row by the grid, so its track has to be told
   to fill it — otherwise the slide stops at its own content height and the
   bottom of the panel is bare. */
.pb-herorow .pb-hero { display: grid; grid-template-rows: minmax(0, 1fr); }
.pb-herorow .pb-hero__track { height: 100%; }
.pb-herorow .pb-hero__slide { min-height: 340px; }
/* The rail takes a third of the width off the hero, so the headline is set a
   notch smaller here than it was across the full container. */
.pb-herorow .pb-hero__body { padding: 38px 42px 52px; }
.pb-herorow .pb-hero__body h2 { max-width: 15ch; font-size: clamp(26px, 2.5vw, 35px); }
/* Flex rather than two fixed grid rows: with the awareness deck empty the
   remaining card still takes the whole height instead of leaving a hole. */
.pb-rail { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pb-rail > * { flex: 1 1 0; min-height: 0; }
.pb-hero__track {
  display: flex;
  transition: transform .6s cubic-bezier(.6, 0, .2, 1);
}
.pb-hero__slide {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  min-height: 362px;
}
.pb-hero__body {
  padding: 42px 48px 56px;
  display: flex; flex-direction: column; justify-content: center; gap: 14px;
}
.pb-hero__body h2 { max-width: 13ch; font-size: clamp(28px, 3.2vw, 40px); }
.pb-hero__body p { font-size: 16.5px; max-width: 460px; }
.pb-hero__cta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.pb-hero__note { font-size: 14px; }

.pb-hero__media { padding: 6px 6px 6px 0; }
.pb-hero__media img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--pb-radius-lg); display: block; }
.pb-hero__mosaic {
  display: grid; gap: 6px; padding: 6px 6px 6px 0;
  grid-template-columns: 1.3fr 1fr; grid-template-rows: 1fr 1fr;
}
.pb-hero__mosaic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pb-hero__mosaic img:nth-child(1) { grid-row: 1 / span 2; border-radius: 18px 4px 4px 18px; }
.pb-hero__mosaic img:nth-child(2) { border-radius: 4px 18px 4px 4px; }
.pb-hero__mosaic img:nth-child(3) { border-radius: 4px 4px 18px 4px; }

/* Picture slides: the artwork is the whole slide, edge to edge, and the words
   are laid straight over it. A scrim of the slide's own deep colour fades in
   from the text side so white copy stays legible on any part of the picture;
   the gradients on the slide itself only show while the picture loads. */
.pb-hero__slide--art { position: relative; display: block; overflow: hidden; }
.pb-hero__slide--rose { --pb-scrim: var(--pb-plum-ink); background: linear-gradient(135deg, var(--pb-plum-tint) 0%, var(--pb-plum-soft) 100%); }
.pb-hero__slide--sky { --pb-scrim: var(--pb-navy); background: linear-gradient(180deg, var(--pb-sky) 0%, var(--pb-sky-deep) 100%); }
.pb-hero__art { position: absolute; inset: 0; z-index: 0; display: block; }
.pb-hero__art img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: right bottom;
  /* The products are enlarged so they run in under the copy rather than
     sitting in a separate panel beside it. */
  transform: scale(1.2); transform-origin: 78% 72%;
}
.pb-hero__slide--art::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--pb-scrim) 88%, transparent) 0%,
    color-mix(in srgb, var(--pb-scrim) 62%, transparent) 38%,
    transparent 72%);
}
.pb-hero__slide--art .pb-hero__body {
  position: relative; z-index: 2; height: 100%; max-width: 52%;
}
.pb-hero__slide--art .pb-hero__body h2 { max-width: 13ch; color: var(--pb-surface); line-height: 1.15; text-shadow: 0 2px 14px rgba(0, 0, 0, .35); }

.pb-hero__arrow {
  position: absolute; bottom: 16px;
  width: 44px; height: 44px; border: 0; border-radius: 22px;
  background: rgba(255, 255, 255, .92); box-shadow: var(--pb-shadow-float);
  color: var(--pb-ink); font-size: 20px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.pb-hero__arrow:hover { background: #fff; }
.pb-hero__arrow--prev { right: 68px; }
.pb-hero__arrow--next { right: 16px; }

.pb-hero__dots { position: absolute; left: 48px; bottom: 24px; display: flex; gap: 8px; }
.pb-hero__dot {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 4px;
  background: rgba(255, 255, 255, .5); cursor: pointer;
  transition: width .3s var(--pb-ease), background-color .3s var(--pb-ease);
}
.pb-hero__dot[aria-selected="true"] { width: 28px; background: var(--pb-surface); }

/* --------------------------------------------------------------------------
   The hero-side card decks
   One card at a time, rotated by the shared carousel: the awareness corner
   and the entrepreneurs. Both are reading surfaces — the message and the
   entrepreneur's few lines carry the card, and the only picture is the small
   round portrait beside the latter.
   -------------------------------------------------------------------------- */

.pb-rail__card {
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  padding: 14px 18px 14px;
  background: var(--pb-surface);
  border: 1px solid var(--pb-line);
  border-radius: var(--pb-radius-card);
  box-shadow: var(--pb-shadow-card);
}
.pb-rail__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pb-rail__chip { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.pb-rail__icon {
  flex: 0 0 auto;
  display: grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; color: #fff; font-size: 11px; line-height: 1;
}
.pb-rail__icon--green { background: var(--pb-green); }
.pb-rail__icon--gold { background: var(--pb-gold); }
.pb-rail__title {
  margin: 0; font-size: 14px; font-weight: 700; color: var(--pb-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pb-rail__nav { flex: 0 0 auto; display: inline-flex; gap: 6px; }
.pb-rail__arrow {
  width: 26px; height: 26px; border: 1px solid var(--pb-line); border-radius: 50%;
  background: var(--pb-surface); color: var(--pb-ink); font-size: 17px; line-height: 1;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.pb-rail__arrow:hover { background: var(--pb-hover); }

/* The card itself fills what is left between the label and the dots. */
.pb-rail__viewport { flex: 1 1 auto; min-height: 0; display: flex; overflow: hidden; padding-block: 12px; }
.pb-rail__track { display: flex; width: 100%; min-width: 0; transition: transform .6s cubic-bezier(.6, 0, .2, 1); }
.pb-rail__slide { flex: 0 0 100%; min-width: 0; display: flex; align-items: center; }

.pb-rail__dots { display: flex; align-items: center; gap: 5px; }
.pb-rail__dot {
  width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%;
  background: var(--pb-ink-3); opacity: .3; cursor: pointer;
  transition: width .3s var(--pb-ease), opacity .3s var(--pb-ease), background-color .3s var(--pb-ease);
}
.pb-rail__dot[aria-selected="true"] { width: 20px; border-radius: 4px; opacity: 1; background: var(--pb-green); }

/* An awareness message, with nothing behind it to read through. */
.pb-awarecard {
  margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--pb-ink-2);
  /* A long message shows its opening rather than growing the card. */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden;
}

/* The two hero-side decks are the cards that must be noticed: a green frame, a
   red banner for the header (bled to the card's edges) and larger copy. */
.pb-rail__card--framed { padding: 0 18px 14px; border: 2px solid var(--pb-green); }
.pb-rail__card--framed .pb-rail__head {
  margin-inline: -18px; padding: 10px 18px;
  background: linear-gradient(135deg, var(--pb-danger) 0%, var(--pb-danger-dark) 100%);
  box-shadow: 0 3px 10px rgba(138, 46, 28, .28);
}
.pb-rail__card--framed .pb-rail__title { color: #fff; font-size: 15px; line-height: 1.25; letter-spacing: .1px; white-space: normal; }
.pb-rail__card--framed .pb-rail__icon { background: #fff; color: var(--pb-danger); width: 26px; height: 26px; font-size: 14px; }
.pb-rail__card--framed .pb-rail__arrow {
  background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .55); color: #fff;
}
.pb-rail__card--framed .pb-rail__arrow:hover { background: rgba(255, 255, 255, .3); }
.pb-rail__card--framed .pb-rail__viewport { padding-block: 10px; }
.pb-rail__card--framed .pb-awarecard {
  font-size: 19px; line-height: 1.5; font-weight: 600; color: var(--pb-ink);
  -webkit-line-clamp: 4;
}
/* Each deck gets its own wash so the pair reads as two distinct cards: mint for
   the health messages, warm cream for the entrepreneurs. A pale disc in the
   corner keeps the flat colour from looking empty. */
.pb-rail__card--framed { position: relative; isolation: isolate; box-shadow: 0 8px 22px rgba(47, 107, 59, .14); }
.pb-rail__card--framed::after {
  content: ""; position: absolute; z-index: -1; right: -46px; bottom: -58px;
  width: 170px; height: 170px; border-radius: var(--pb-circle); pointer-events: none;
}
.pb-rail__card--aware { background: linear-gradient(160deg, #fff 0%, var(--pb-green-tint-2) 100%); }
.pb-rail__card--aware::after { background: rgba(47, 107, 59, .08); }
.pb-rail__card--dream { background: linear-gradient(160deg, #fff 0%, var(--pb-gold-tint) 100%); }
.pb-rail__card--dream::after { background: rgba(199, 134, 27, .1); }
.pb-rail__card--dream .pb-rail__dot[aria-selected="true"] { background: var(--pb-gold); }
.pb-rail__card--dream .pb-facecard__photo { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--pb-gold-light), 0 8px 18px rgba(20, 30, 22, .14); }
.pb-rail__card--framed .pb-facecard__name { font-size: 20px; }
.pb-rail__card--framed .pb-facecard__line { font-size: 14.5px; }

/* An entrepreneur: a small round portrait, and the rest of the room is text.
   Small and circular because these are passport-sized uploads — stretched
   across a card they look exactly as poor as they are. */
.pb-facecard { display: flex; align-items: center; gap: 15px; width: 100%; min-width: 0; }
.pb-facecard__photo {
  flex: 0 0 auto; width: 88px; height: 88px;
  border-radius: 50%; overflow: hidden; background: var(--pb-green-tint);
  box-shadow: 0 0 0 1px var(--pb-line-soft), 0 6px 16px rgba(20, 30, 22, .1);
}
.pb-facecard__photo img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: 50% 22%;
}
.pb-facecard__text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pb-facecard__name {
  font-family: var(--pb-font-display);
  font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--pb-ink);
}
.pb-facecard__line { font-size: 13px; line-height: 1.45; color: var(--pb-muted); }
.pb-facecard__line--biz { color: var(--pb-green); font-weight: 600; }
a.pb-facecard:hover { text-decoration: none; }
a.pb-facecard:hover .pb-facecard__name { color: var(--pb-green-dark); text-decoration: underline; text-underline-offset: 3px; }


/* Two big shortcut buttons under the hero. */
.pb-shortcuts { max-width: 1120px; margin-inline: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pb-shortcut {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 92px; padding: 0 30px;
  border: 0; border-radius: 24px; color: #fff; cursor: pointer;
  transition: background-color .2s var(--pb-ease), transform .2s var(--pb-ease), box-shadow .2s var(--pb-ease);
}
.pb-shortcut:hover { color: #fff; text-decoration: none; transform: translateY(-3px); box-shadow: var(--pb-shadow-hover); }
.pb-shortcut__text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.3; }
.pb-shortcut__title { font-size: 20px; font-weight: 700; }
.pb-shortcut__sub { font-size: 13.5px; opacity: .88; }
.pb-shortcut__arrow { font-size: 26px; }
.pb-shortcut--green { background: var(--pb-green); box-shadow: 0 8px 22px rgba(47, 107, 59, .25); }
.pb-shortcut--green:hover { background: var(--pb-green-dark); }
.pb-shortcut--gold { background: var(--pb-gold); box-shadow: 0 8px 22px rgba(199, 134, 27, .28); }
.pb-shortcut--gold:hover { background: var(--pb-gold-dark); }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.pb-card {
  position: relative;
  background: var(--pb-surface);
  border: 1px solid rgba(20, 30, 22, .08);
  border-radius: var(--pb-radius-card);
  box-shadow: 0 5px 18px rgba(20, 30, 22, .06);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow .25s var(--pb-ease), transform .25s var(--pb-ease);
}
.pb-card:hover {
  border-color: rgba(47, 107, 59, .18);
  box-shadow: 0 14px 32px rgba(20, 30, 22, .12);
  transform: translateY(-5px);
}

/* The whole card is clickable, but only the title is a real link. */
.pb-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.pb-card__link:hover { text-decoration: none; }
.pb-card :where(button, a:not(.pb-card__link)) { position: relative; z-index: 2; }

.pb-grid { display: grid; gap: 20px; }
.pb-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pb-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pb-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Product card */
.pb-product__media {
  position: relative; aspect-ratio: 1 / 1.06; overflow: hidden;
  background: linear-gradient(145deg, color-mix(in srgb, var(--pb-green-tint) 45%, #fff), #fff);
}
.pb-product__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s var(--pb-ease);
}
.pb-card:hover .pb-product__media img { transform: scale(1.04); }
.pb-product__flags { position: absolute; top: 12px; left: 12px; display: flex; gap: 6px; z-index: 2; }

.pb-product__body {
  padding: 17px 18px 18px;
  display: flex; flex-direction: column; gap: 7px; flex: 1;
}
.pb-product__name {
  font-family: var(--pb-font-display); font-weight: 600;
  font-size: 20px; line-height: 1.3; color: var(--pb-ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pb-product__name:hover { color: var(--pb-green-dark); text-decoration: none; }
.pb-product__meta { font-size: 13px; color: var(--pb-muted); }
.pb-product__stock { font-size: 13px; font-weight: 650; }
.pb-product__stock--in { color: var(--pb-green); }
.pb-product__stock--pre { color: #8A6A2A; }
.pb-product__stock--out { color: #6E6650; }
.pb-product__foot {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  margin-top: auto; padding-top: 13px;
  border-top: 1px solid var(--pb-line-softer);
}
.pb-product__price { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.pb-product__price b { font-size: 22px; font-weight: 750; color: var(--pb-green-dark); }
.pb-product__unit {
  font-size: 12.5px; color: var(--pb-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pb-product__was { font-size: 13px; color: var(--pb-muted); text-decoration: line-through; }

/* Give the add action a clear visual home instead of leaving it floating. */
.pb-product__foot .pb-add {
  width: 44px; height: 44px; font-size: 25px;
  box-shadow: 0 5px 12px rgba(47, 107, 59, .14);
}

/* Vendor card */
.pb-vendor__cover { height: 130px; overflow: hidden; background: #D9C9A3; }
.pb-vendor__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pb-vendor__body { padding: 0 18px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.pb-vendor__top {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-top: -36px; position: relative; z-index: 2;
}
.pb-vendor__avatar {
  width: 76px; height: 76px; border-radius: 38px;
  object-fit: cover; border: 4px solid #fff; background: var(--pb-green-tint);
}
.pb-vendor__id { display: flex; flex-direction: column; line-height: 1.35; }
.pb-vendor__name { font-size: 18px; font-weight: 700; color: var(--pb-ink); }
.pb-vendor__name:hover { color: var(--pb-green-dark); text-decoration: none; }
.pb-vendor__biz { font-size: 14px; color: var(--pb-green); font-weight: 600; }
.pb-vendor__where { font-size: 13px; color: var(--pb-muted); }
.pb-vendor__quote {
  font-family: var(--pb-font-display); font-weight: 600;
  font-size: 17px; line-height: 1.5; color: var(--pb-ink-2);
}
.pb-vendor__foot {
  display: flex; justify-content: space-between; gap: 8px;
  margin-top: auto; padding-top: 12px;
  border-top: 1px solid var(--pb-line-softer);
  font-size: 13px; color: var(--pb-muted);
}

/* Category coin — the circular browse entry point on the home page.
   Each tile is a full circle filled with the category's own tone, so the
   row reads as a set of swatches rather than a second grid of cards. */
.pb-cat-grid {
  /* One row always: columns share the width on desktop, and below ~90px each
     the row scrolls sideways instead of wrapping. The block padding leaves
     room for the hover lift and ring, which overflow-x would otherwise clip. */
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(84px, 1fr); gap: 16px;
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
  padding-block: 8px 4px;
}
.pb-cat-grid::-webkit-scrollbar { display: none; }
.pb-cat {
  display: flex; flex-direction: column; align-items: center; gap: 10px; scroll-snap-align: start;
  text-align: center; color: var(--pb-ink);
}
.pb-cat:hover { color: var(--pb-green); text-decoration: none; }
.pb-cat:focus-visible { border-radius: var(--pb-radius-card); }
.pb-cat__media {
  position: relative;
  width: 100%; max-width: 88px; aspect-ratio: 1 / 1; margin-inline: auto;
  border-radius: var(--pb-circle);
  overflow: hidden;
  display: grid; place-items: center;
  /* Hairline ring so a pale tone still has an edge against the page. */
  box-shadow: var(--pb-shadow-card), 0 0 0 1px var(--pb-line-soft);
  transition: transform .3s var(--pb-ease), box-shadow .3s var(--pb-ease);
}
/* Top-light sheen: a flat disc of colour looks printed on, this lifts it. */
.pb-cat__media::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: var(--pb-sheen); pointer-events: none;
}
.pb-cat:hover .pb-cat__media {
  transform: translateY(-5px);
  box-shadow: var(--pb-shadow-hover), 0 0 0 2px var(--pb-green);
}
.pb-cat__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .4s var(--pb-ease);
}
.pb-cat:hover .pb-cat__media img { transform: scale(1.07); }
.pb-cat__name { font-size: 13px; font-weight: 600; line-height: 1.3; max-width: 14ch; }

/* Outlet promo strip on the home page */
.pb-outlet-promo {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 32px; align-items: center;
}
.pb-outlet-mini-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pb-outlet-mini {
  display: flex; align-items: center; gap: 12px;
  background: var(--pb-bg); border-radius: var(--pb-radius-lg); padding: 10px;
  color: var(--pb-ink);
}
.pb-outlet-mini:hover { background: var(--pb-green-tint-3); text-decoration: none; }
.pb-outlet-mini img {
  width: 56px; height: 56px; border-radius: var(--pb-radius); object-fit: cover; flex-shrink: 0;
}
.pb-outlet-mini__text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.pb-outlet-mini__city { font-size: 12.5px; color: var(--pb-muted); }
.pb-outlet-mini__name { font-size: 15px; font-weight: 600; }

/* --------------------------------------------------------------------------
   Breadcrumbs
   -------------------------------------------------------------------------- */

.pb-crumbs { font-size: 13px; color: var(--pb-muted); margin-bottom: 8px; }
.pb-crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.pb-crumbs li:not(:last-child)::after { content: "/"; margin-left: 6px; color: var(--pb-line); }
.pb-crumbs a { color: var(--pb-muted); }
.pb-crumbs a:hover { color: var(--pb-green); }
.pb-crumbs [aria-current="page"] { color: var(--pb-ink-3); }

/* --------------------------------------------------------------------------
   Listing: sidebar filters + results
   -------------------------------------------------------------------------- */

.pb-listing { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 32px; align-items: start; }

/* The sidebar column. Its collapse toggle only appears on small screens. */
.pb-filters-col { display: contents; }
.pb-filters-summary { display: none; }

.pb-filters {
  position: sticky; top: 148px;
  background: var(--pb-surface); border: 1px solid rgba(20, 30, 22, .05);
  border-radius: var(--pb-radius-card); box-shadow: var(--pb-shadow-card);
  padding: 20px; display: flex; flex-direction: column; gap: 18px;
}
.pb-filters__head {
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 700; font-size: 16px;
}
.pb-filters__clear { font-size: 13px; font-weight: 600; color: var(--pb-green); }
.pb-filter-group { display: flex; flex-direction: column; gap: 8px; }
.pb-filter-group > legend,
.pb-filter-group__title {
  font-size: 13px; font-weight: 700; text-transform: none;
  color: var(--pb-ink-soft); letter-spacing: .02em; padding: 0; float: none; width: auto;
}
.pb-check {
  display: flex; align-items: center; gap: 9px;
  font-size: 14px; color: var(--pb-ink-3); cursor: pointer;
  padding: 2px 0;
}
.pb-check:hover { color: var(--pb-green); }
.pb-check input { accent-color: var(--pb-green); width: 16px; height: 16px; flex-shrink: 0; cursor: pointer; }

.pb-results__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.pb-results__count { font-size: 14px; color: var(--pb-muted); }
.pb-results__tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.pb-select {
  height: 42px; padding: 0 36px 0 14px;
  border: 1px solid var(--pb-line); border-radius: var(--pb-radius);
  background: #fff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235E6B5F' stroke-width='1.8' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E")
    no-repeat right 14px center;
  color: var(--pb-ink); font-size: 14px; appearance: none; cursor: pointer;
}

.pb-empty {
  background: var(--pb-surface); border: 1px dashed var(--pb-line);
  border-radius: var(--pb-radius-card); padding: 52px 28px;
  text-align: center; color: var(--pb-muted);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
/* Quiet tinted disc — present enough to anchor the block, never loud
   enough to compete with the action below it. */
.pb-empty__icon {
  width: 60px; height: 60px; border-radius: 50%; margin-bottom: 4px;
  background: var(--pb-green-tint-3); color: var(--pb-green);
  display: inline-flex; align-items: center; justify-content: center;
}
.pb-empty__icon svg { width: 27px; height: 27px; display: block; }
.pb-empty__title {
  font-family: var(--pb-font-display); font-weight: 600;
  font-size: 19px; line-height: 1.3; color: var(--pb-ink);
}
.pb-empty__text { max-width: 44ch; font-size: 14.5px; }
.pb-empty__actions {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center; margin-top: 10px;
}

/* --------------------------------------------------------------------------
   Error pages — 404 / 500 share one centred layout
   -------------------------------------------------------------------------- */

.pb-error { text-align: center; padding-block: 72px; }
/* The status number sits behind the heading as a watermark: it labels the
   page for anyone scanning, without shouting over the actual message. */
.pb-error__code {
  font-family: var(--pb-font-display); font-weight: 700;
  font-size: clamp(64px, 11vw, 104px); line-height: .9;
  color: var(--pb-green-tint); letter-spacing: -.03em;
  margin-bottom: 4px;
}
.pb-error__text {
  margin-top: 10px; margin-inline: auto;
  max-width: 46ch; color: var(--pb-muted); font-size: 15.5px;
}
.pb-error__actions {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center; margin-top: 26px;
}

/* Pagination */
.pb-pager { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 32px; }
.pb-pager a, .pb-pager span {
  min-width: 42px; height: 42px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--pb-line); border-radius: var(--pb-radius);
  background: #fff; color: var(--pb-ink); font-size: 14px; font-weight: 600;
}
.pb-pager a:hover { border-color: var(--pb-green); color: var(--pb-green); text-decoration: none; }
.pb-pager [aria-current="page"] { background: var(--pb-ink); border-color: var(--pb-ink); color: #fff; }
.pb-pager .is-disabled { opacity: .4; }

/* --------------------------------------------------------------------------
   Product detail
   -------------------------------------------------------------------------- */

.pb-pdp { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: start; }

.pb-gallery { display: flex; flex-direction: column; gap: 12px; }
.pb-gallery__main {
  aspect-ratio: 1 / 1; border-radius: var(--pb-radius-panel); overflow: hidden;
  box-shadow: 0 18px 45px rgba(31, 55, 35, .12); background: var(--pb-line-soft);
  display: grid; place-items: center;
}
.pb-gallery__main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pb-gallery__thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pb-gallery__thumb {
  aspect-ratio: 1 / 1; border-radius: var(--pb-radius); overflow: hidden;
  border: 2px solid transparent; padding: 0; background: none; cursor: pointer;
  display: grid; place-items: center;
  transition: border-color .2s var(--pb-ease);
}
.pb-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pb-gallery__thumb[aria-selected="true"] { border-color: var(--pb-green); }

.pb-pdp__buybox {
  display: flex; flex-direction: column; gap: 20px; padding: 30px;
  background: var(--pb-surface); border: 1px solid rgba(20, 30, 22, .06);
  border-radius: var(--pb-radius-panel); box-shadow: var(--pb-shadow-card);
}
.pb-pdp__intro { display: flex; flex-direction: column; gap: 9px; }
.pb-pdp__category {
  align-self: flex-start; padding: 5px 10px; border-radius: var(--pb-pill);
  background: var(--pb-green-tint); color: var(--pb-green); font-size: 12px; font-weight: 700;
}
.pb-pdp__category:hover { color: var(--pb-green-dark); text-decoration: none; }
.pb-pdp__intro h1 { font-size: clamp(28px, 3.3vw, 42px); line-height: 1.15; margin: 3px 0 0; }
.pb-pdp__intro p { color: var(--pb-ink-3); font-size: 15px; line-height: 1.65; }
.pb-pdp__pricebox {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 18px; border-radius: var(--pb-radius-lg); background: var(--pb-green-tint-3);
}
.pb-pdp__price b { color: var(--pb-green-dark); }
.pb-pdp__availability { color: var(--pb-green); font-size: 13px; font-weight: 700; white-space: nowrap; }
.pb-pdp__availability--pre { color: #8A6A2A; }
.pb-pdp__availability--soft { color: var(--pb-muted); }
.pb-pdp__cart-form { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.pb-pdp__cart-button { flex: 1; min-width: 190px; }
.pb-pdp__whatsapp { min-height: 50px; }
.pb-pdp__trust {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  padding-top: 2px; color: var(--pb-muted); font-size: 11.5px; text-align: center;
}
.pb-pdp__trust span { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.pb-pdp__trust b { color: var(--pb-green); font-size: 17px; line-height: 1; }

.pb-pdp__vendor {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--pb-ink); font-size: 14px;
}
.pb-pdp__vendor:hover { text-decoration: none; }
.pb-pdp__vendor img { width: 36px; height: 36px; border-radius: 18px; object-fit: cover; }
.pb-pdp__vendor b { color: var(--pb-green); }

.pb-pdp__price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pb-pdp__price b { font-size: 34px; font-weight: 700; font-family: var(--pb-font-display); }
.pb-pdp__price span { color: var(--pb-muted); font-size: 15px; }

.pb-qty { display: inline-flex; align-items: center; border: 1px solid var(--pb-line); border-radius: var(--pb-radius); overflow: hidden; }
.pb-qty button {
  width: 44px; height: 48px; border: 0; background: #fff;
  font-size: 19px; color: var(--pb-ink); cursor: pointer;
  transition: background-color .2s var(--pb-ease);
}
.pb-qty button:hover { background: var(--pb-hover); }
.pb-qty output, .pb-qty input {
  width: 52px; height: 48px; border: 0; text-align: center;
  font-size: 16px; font-weight: 600; background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Fulfilment radio list */
.pb-ful { border: 1px solid var(--pb-line); border-radius: var(--pb-radius-lg); overflow: hidden; background: #fff; }
.pb-ful__head { padding: 14px 16px; background: var(--pb-green-tint-3); border-bottom: 1px solid var(--pb-line-softer); }
.pb-ful__head b { display: block; font-size: 14px; }
.pb-ful__head span { font-size: 13px; color: var(--pb-muted); }
.pb-option {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; border-bottom: 1px solid var(--pb-line-softer);
  cursor: pointer; transition: background-color .18s var(--pb-ease);
}
.pb-option:last-child { border-bottom: 0; }
.pb-option:hover { background: var(--pb-green-tint-3); }
.pb-option input { accent-color: var(--pb-green); width: 18px; height: 18px; flex-shrink: 0; }
.pb-option__text { display: flex; flex-direction: column; line-height: 1.35; flex: 1; min-width: 0; }
.pb-option__text b { font-size: 14.5px; font-weight: 600; }
.pb-option__text span { font-size: 12.5px; color: var(--pb-muted); }
.pb-option__aside { font-size: 13px; font-weight: 600; white-space: nowrap; }
.pb-option:has(input:checked) { background: var(--pb-green-tint); }
.pb-option:has(input:disabled) { opacity: .55; cursor: not-allowed; }

/* Vendor strip on the product page */
.pb-maker {
  display: grid; grid-template-columns: 104px minmax(0, 1fr) auto;
  gap: 20px; align-items: center;
}
.pb-maker img { width: 104px; height: 104px; border-radius: var(--pb-radius-card); object-fit: cover; }
.pb-maker__label { font-size: 12.5px; font-weight: 700; color: var(--pb-gold); letter-spacing: .04em; }
.pb-maker__name { font-family: var(--pb-font-display); font-weight: 600; font-size: 22px; }
.pb-maker__where { font-size: 13px; color: var(--pb-muted); }
.pb-maker__aside { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; text-align: right; }

/* Provenance */
.pb-pdp__sections { display: flex; flex-direction: column; gap: 28px; }

/* Facts beside the symbolic map. Two columns only while both still have
   room to say something — a 120px map is a smudge, not a map. */
.pb-provenance {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
  gap: 24px; align-items: start;
}
.pb-provenance--facts-only { grid-template-columns: minmax(0, 1fr); }

.pb-facts { display: flex; flex-direction: column; }
.pb-fact {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 10px 0; border-bottom: 1px solid var(--pb-line-softer); font-size: 14px;
}
.pb-fact:last-child { border-bottom: 0; }
.pb-fact dt { color: var(--pb-muted); margin: 0; }
.pb-fact dd { margin: 0; font-weight: 600; text-align: right; }

.pb-map {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--pb-radius-lg);
  background: linear-gradient(160deg, #E4EBDF, #D6DFD0);
  overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.pb-map__note { position: absolute; bottom: 10px; right: 12px; font-size: 11.5px; color: var(--pb-ink-soft); }
.pb-map__pin {
  position: absolute; transform: translate(-50%, -100%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--pb-ink);
}
.pb-map__pin::before {
  content: ""; width: 13px; height: 13px; border-radius: 50%;
  background: var(--pb-green); border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}
.pb-map__pin[aria-current="true"]::before { background: var(--pb-gold); transform: scale(1.2); }
.pb-map__pin span {
  font-size: 11.5px; font-weight: 600; background: rgba(255, 255, 255, .9);
  padding: 1px 6px; border-radius: 6px; white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Vendor story page
   -------------------------------------------------------------------------- */

.pb-story__cover { height: clamp(180px, 26vw, 300px); overflow: hidden; border-radius: 0 0 var(--pb-radius-panel) var(--pb-radius-panel); }
.pb-story__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pb-story { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: start; }
.pb-story__head { display: flex; gap: 20px; align-items: flex-end; flex-wrap: wrap; margin-top: -60px; }
.pb-story__avatar {
  width: 128px; height: 128px; border-radius: 64px;
  border: 5px solid #fff; object-fit: cover; background: var(--pb-green-tint);
  box-shadow: var(--pb-shadow-card);
}
.pb-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pb-stat {
  background: var(--pb-surface); border: 1px solid rgba(20, 30, 22, .05);
  border-radius: var(--pb-radius-lg); padding: 14px 16px; text-align: center;
}
.pb-stat b { display: block; font-family: var(--pb-font-display); font-size: 24px; font-weight: 700; }
.pb-stat span { font-size: 12.5px; color: var(--pb-muted); }

.pb-quote {
  margin: 0; padding: 20px 24px;
  background: var(--pb-green-tint); border-radius: var(--pb-radius-lg);
  border-inline-start: 4px solid var(--pb-green);
  font-family: var(--pb-font-display); font-weight: 600; font-size: 20px;
  line-height: 1.5; color: var(--pb-green-dark);
}

.pb-video { position: relative; border-radius: var(--pb-radius-card); overflow: hidden; }
.pb-video img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; display: block; }
.pb-video__play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(19, 38, 26, .25); border: 0; cursor: pointer; color: #fff;
  transition: background-color .25s var(--pb-ease);
}
.pb-video__play:hover { background: rgba(19, 38, 26, .4); }
.pb-video__caption {
  position: absolute; left: 16px; bottom: 14px; color: #fff;
  font-size: 13.5px; font-weight: 600; text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}

.pb-gallery-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pb-gallery-strip img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--pb-radius); }

/* --------------------------------------------------------------------------
   Entrepreneur profile — editorial story layout
   -------------------------------------------------------------------------- */

.pb-profile-cover {
  position: relative; height: clamp(220px, 30vw, 360px); overflow: hidden;
  border-radius: 0 0 var(--pb-radius-panel) var(--pb-radius-panel);
}
.pb-profile-cover > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pb-profile-cover__shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(18, 42, 25, .02) 20%, rgba(18, 42, 25, .2));
  pointer-events: none;
}
.pb-profile-page { position: relative; }
.pb-profile-hero {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px;
  margin-top: 20px; padding: 24px 28px; position: relative; z-index: 1;
  background: var(--pb-surface); border: 1px solid rgba(20, 30, 22, .06);
  border-radius: var(--pb-radius-panel); box-shadow: var(--pb-shadow-card);
}
.pb-profile-hero__identity { display: flex; align-items: flex-end; gap: 20px; min-width: 0; }
.pb-profile-hero__avatar {
  width: 144px; height: 144px; flex: 0 0 auto; object-fit: cover; border-radius: 50%;
  border: 6px solid #fff; background: var(--pb-green-tint); box-shadow: 0 12px 30px rgba(24, 50, 29, .18);
}
.pb-profile-hero__copy { padding-bottom: 8px; min-width: 0; }
.pb-profile-eyebrow, .pb-profile-section-label {
  display: block; color: var(--pb-green); font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.pb-profile-hero h1 { margin: 5px 0 4px; font-size: clamp(30px, 4vw, 48px); line-height: 1.05; }
.pb-profile-hero__business { color: var(--pb-ink-soft); font-size: 16px; margin: 0; }
.pb-profile-hero__location { display: flex; align-items: center; gap: 5px; color: var(--pb-muted); font-size: 14px; margin-top: 7px; }
.pb-profile-hero__location svg { width: 17px; height: 17px; fill: none; stroke: var(--pb-green); stroke-width: 1.8; }
.pb-profile-hero__actions { display: flex; gap: 10px; padding-bottom: 8px; flex-wrap: wrap; }
.pb-profile-hero__actions .pb-btn--ghost { background: rgba(255, 255, 255, .82); border: 1px solid var(--pb-line); color: var(--pb-ink); }
.pb-profile-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 28px 0 36px;
}
.pb-profile-stat {
  display: flex; align-items: center; gap: 13px; padding: 16px 18px; min-height: 78px;
  background: var(--pb-surface); border: 1px solid rgba(20, 30, 22, .06);
  border-radius: var(--pb-radius-lg); box-shadow: var(--pb-shadow-card);
}
.pb-profile-stat__icon {
  width: 39px; height: 39px; display: grid; place-items: center; border-radius: 50%;
  font-size: 21px; font-weight: 700; flex: 0 0 auto;
}
.pb-profile-stat__icon--green { color: var(--pb-green); background: var(--pb-green-tint); }
.pb-profile-stat__icon--gold { color: var(--pb-gold-dark); background: #FBF1D3; }
.pb-profile-stat__icon--plum { color: var(--pb-plum); background: #F2E8F0; }
.pb-profile-stat b { display: block; font-family: var(--pb-font-display); font-size: 22px; line-height: 1.1; }
.pb-profile-stat small { display: block; color: var(--pb-muted); font-size: 12.5px; margin-top: 4px; }
.pb-profile-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; }
.pb-profile-main { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.pb-profile-quote {
  display: flex; gap: 10px; margin: 0; padding: 22px 26px; color: var(--pb-green-dark);
  background: linear-gradient(135deg, var(--pb-green-tint), #F4F5DF); border-radius: var(--pb-radius-lg);
  border-inline-start: 4px solid var(--pb-green); font-family: var(--pb-font-display); font-size: 21px; font-weight: 600; line-height: 1.5;
}
.pb-profile-quote p { margin: 0; }
.pb-profile-quote cite { display: inline-block; margin-top: 8px; color: var(--pb-ink-3); font-size: 15px; font-style: normal; font-weight: 500; }
.pb-profile-quote__mark { display: inline-block; font-size: 42px; line-height: .8; color: var(--pb-gold-dark); vertical-align: -.16em; }
.pb-profile-story { padding: 28px 30px; }
.pb-profile-story h2, .pb-profile-facts h2 { margin: 5px 0 12px; font-size: 24px; }
.pb-profile-story p { color: var(--pb-ink-3); font-size: 16px; line-height: 1.85; }
.pb-profile-highlights { gap: 14px; }
.pb-profile-highlight { display: flex; gap: 14px; padding: 20px; border-radius: var(--pb-radius-lg); }
.pb-profile-highlight--green { background: #EDF5EC; }
.pb-profile-highlight--gold { background: #FBF3DD; }
.pb-profile-highlight__icon { font-size: 25px; line-height: 1; }
.pb-profile-highlight--green .pb-profile-highlight__icon { color: var(--pb-green); }
.pb-profile-highlight--gold .pb-profile-highlight__icon { color: var(--pb-gold-dark); }
.pb-profile-highlight h3 { font-size: 17px; margin-bottom: 5px; }
.pb-profile-highlight p { color: var(--pb-ink-3); font-size: 14px; line-height: 1.6; }
.pb-profile-products { scroll-margin-top: 20px; }
.pb-profile-products .pb-section-head { align-items: flex-end; }
.pb-profile-products h2 { margin-top: 5px; font-size: 27px; }
.pb-profile-product-count { color: var(--pb-muted); font-size: 14px; white-space: nowrap; }
.pb-profile-sidebar { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 16px; }
.pb-profile-facts { padding: 23px; }
.pb-profile-facts .pb-facts { margin-top: 18px; }
.pb-profile-side-note { display: flex; gap: 12px; padding: 18px; border-radius: var(--pb-radius-lg); background: var(--pb-ink); color: #fff; }
.pb-profile-side-note > span { color: #F4C96A; font-size: 23px; line-height: 1; }
.pb-profile-side-note p { font-size: 13.5px; line-height: 1.6; }

/* --------------------------------------------------------------------------
   Outlets page
   -------------------------------------------------------------------------- */

.pb-outlets { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: start; }
.pb-outlet-list { display: flex; flex-direction: column; gap: 10px; }
.pb-outlet-item {
  display: flex; gap: 12px; align-items: center; text-align: start;
  padding: 10px; border: 1px solid rgba(20, 30, 22, .05); border-radius: var(--pb-radius-lg);
  background: var(--pb-surface); cursor: pointer; color: var(--pb-ink); width: 100%;
  transition: border-color .2s var(--pb-ease), box-shadow .2s var(--pb-ease);
}
.pb-outlet-item:hover { border-color: var(--pb-green); text-decoration: none; }
.pb-outlet-item[aria-current="true"] { border-color: var(--pb-green); box-shadow: 0 0 0 2px var(--pb-green-tint); }
.pb-outlet-item img { width: 60px; height: 60px; border-radius: var(--pb-radius); object-fit: cover; flex-shrink: 0; }
.pb-outlet-item__text { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }

.pb-outlet-detail { display: grid; gap: 20px; }
.pb-outlet-detail__media { border-radius: var(--pb-radius-card); overflow: hidden; }
.pb-outlet-detail__media img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; display: block; }

/* --------------------------------------------------------------------------
   Cart, checkout, tracking
   -------------------------------------------------------------------------- */

.pb-cart { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }

.pb-line {
  display: grid; grid-template-columns: 92px minmax(0, 1fr) auto auto auto;
  gap: 16px; align-items: center;
  padding: 16px 0; border-bottom: 1px solid var(--pb-line-softer);
}
.pb-line:last-of-type { border-bottom: 0; }
.pb-line__media {
  width: 92px; height: 92px; border-radius: var(--pb-radius); overflow: hidden;
  display: grid; place-items: center;
}
.pb-line__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pb-line__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pb-line__vendor { font-size: 12.5px; color: var(--pb-muted); }
.pb-line__name { font-weight: 600; font-size: 16px; color: var(--pb-ink); }
.pb-line__name:hover { color: var(--pb-green-dark); text-decoration: none; }
.pb-line__total { font-weight: 700; font-size: 17px; white-space: nowrap; }
.pb-line__remove {
  width: 36px; height: 36px; border: 0; border-radius: var(--pb-radius-sm);
  background: transparent; color: var(--pb-muted); font-size: 20px; cursor: pointer;
}
.pb-line__remove:hover { background: #FBECE8; color: var(--pb-danger); }

.pb-summary {
  position: sticky; top: 148px;
  background: var(--pb-surface); border: 1px solid rgba(20, 30, 22, .05);
  border-radius: var(--pb-radius-card); box-shadow: var(--pb-shadow-card);
  padding: 22px; display: flex; flex-direction: column; gap: 14px;
}
.pb-summary__title { font-weight: 700; font-size: 17px; }
.pb-summary__rows { display: flex; flex-direction: column; gap: 9px; font-size: 14.5px; }
.pb-summary__row { display: flex; justify-content: space-between; gap: 12px; }
.pb-summary__row span:last-child { font-weight: 600; }
.pb-summary__row--discount span:last-child { color: var(--pb-green); }
.pb-summary__total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding-top: 14px; border-top: 1px solid var(--pb-line-softer);
}
.pb-summary__total b:first-child { font-size: 15px; }
.pb-summary__total b:last-child { font-family: var(--pb-font-display); font-size: 26px; }
.pb-summary__note { font-size: 12.5px; color: var(--pb-muted); text-align: center; }

.pb-coupon { display: flex; gap: 8px; }
.pb-coupon input {
  flex: 1; min-width: 0; height: 44px; padding: 0 14px;
  border: 1px solid var(--pb-line); border-radius: var(--pb-radius);
  font-size: 14px; background: #fff;
}
.pb-coupon input:focus { outline: 0; border-color: var(--pb-green); box-shadow: 0 0 0 3px var(--pb-green-tint); }

.pb-checkout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; align-items: start; }

.pb-step { background: var(--pb-surface); border: 1px solid rgba(20, 30, 22, .05);
  border-radius: var(--pb-radius-card); box-shadow: var(--pb-shadow-card);
  padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.pb-step__title { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16.5px; }
.pb-step__num {
  width: 28px; height: 28px; border-radius: 14px; flex-shrink: 0;
  background: var(--pb-green-tint); color: var(--pb-green);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
}

.pb-field { display: flex; flex-direction: column; gap: 6px; }
.pb-field > label { font-size: 13.5px; font-weight: 600; color: var(--pb-ink-soft); }
.pb-field :where(input[type="text"], input[type="tel"], input[type="email"], input[type="number"],
                  input[type="file"], select, textarea) {
  height: 48px; padding: 0 14px;
  border: 1px solid var(--pb-line); border-radius: var(--pb-radius);
  background: #fff; font-size: 15px; color: var(--pb-ink); width: 100%;
  transition: border-color .2s var(--pb-ease), box-shadow .2s var(--pb-ease);
}
.pb-field textarea { height: auto; min-height: 96px; padding: 12px 14px; }
.pb-field select { appearance: none; padding-inline-end: 38px; cursor: pointer; }
.pb-field select[multiple] {
  appearance: auto;
  min-height: 360px;
  height: 360px;
  padding: 8px 12px;
  overflow-y: auto;
  background-image: none;
}
.pb-field select[multiple] option { padding: 5px 4px; }
/* Chevron drawn as a background so the control keeps the same frame as an input. */
.pb-field select {
  background-image: linear-gradient(45deg, transparent 48%, var(--pb-ink-soft) 50%, transparent 52%),
                    linear-gradient(-45deg, transparent 48%, var(--pb-ink-soft) 50%, transparent 52%);
  background-size: 10px 10px, 10px 10px;
  background-position: right 20px center, right 14px center;
  background-repeat: no-repeat;
}
.pb-field input[type="file"] { padding: 9px 12px; line-height: 28px; cursor: pointer; }
.pb-field input[type="file"]::file-selector-button {
  margin-inline-end: 12px; padding: 0 14px; height: 28px;
  border: 1px solid var(--pb-line); border-radius: 8px;
  background: var(--pb-green-tint); color: var(--pb-green);
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.pb-field :where(input, select, textarea):focus {
  outline: 0; border-color: var(--pb-green); box-shadow: 0 0 0 3px var(--pb-green-tint);
}
.pb-field--error :where(input, select, textarea) { border-color: var(--pb-danger); }
.pb-field__error { font-size: 12.5px; color: var(--pb-danger); font-weight: 600; }
.pb-field__hint { font-size: 12.5px; color: var(--pb-muted); }
.pb-field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

/* Big choice tiles — delivery method, payment method */
.pb-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pb-choice {
  position: relative;
  display: flex; flex-direction: column; gap: 3px;
  padding: 14px 16px; cursor: pointer;
  border: 1.5px solid var(--pb-line); border-radius: var(--pb-radius-lg);
  background: #fff; transition: border-color .2s var(--pb-ease), background-color .2s var(--pb-ease);
}
.pb-choice:hover { border-color: var(--pb-green); }
.pb-choice b { font-size: 15px; font-weight: 600; }
.pb-choice span { font-size: 12.5px; color: var(--pb-muted); }
.pb-choice input { position: absolute; opacity: 0; pointer-events: none; }
.pb-choice:has(input:checked) { border-color: var(--pb-green); background: var(--pb-green-tint); }
.pb-choice:has(input:disabled) { opacity: .5; cursor: not-allowed; }

.pb-pay { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pb-pay__mark {
  width: 36px; height: 36px; border-radius: var(--pb-radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 15px; margin-bottom: 4px;
}

.pb-mini-line { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.pb-mini-line img { width: 52px; height: 52px; border-radius: var(--pb-radius-sm); object-fit: cover; }
.pb-mini-line__text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.pb-mini-line__text b { font-size: 14px; font-weight: 600; }
.pb-mini-line__text span { font-size: 12.5px; color: var(--pb-muted); }

/* Order tracking timeline */
.pb-tracked { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 24px; align-items: start; }
.pb-timeline { display: flex; flex-direction: column; }
.pb-tl-step { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; }
.pb-tl-step__rail { display: flex; flex-direction: column; align-items: center; }
.pb-tl-step__dot {
  width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
  border: 3px solid var(--pb-line); background: #fff; margin-top: 4px;
}
.pb-tl-step__line { flex: 1; width: 2px; background: var(--pb-line); min-height: 26px; }
.pb-tl-step:last-child .pb-tl-step__line { display: none; }
.pb-tl-step__body { padding-bottom: 18px; display: flex; flex-direction: column; line-height: 1.4; }
.pb-tl-step__body b { font-size: 15px; font-weight: 600; }
.pb-tl-step__body span { font-size: 12.5px; color: var(--pb-muted); }
.pb-tl-step.is-done .pb-tl-step__dot { border-color: var(--pb-green); background: var(--pb-green); }
.pb-tl-step.is-done .pb-tl-step__line { background: var(--pb-green); }
.pb-tl-step.is-current .pb-tl-step__dot {
  border-color: var(--pb-green); background: #fff;
  box-shadow: 0 0 0 4px var(--pb-green-tint);
}
.pb-tl-step:not(.is-done) .pb-tl-step__body b { color: var(--pb-muted); font-weight: 500; }

.pb-notice {
  --pb-notice-accent: var(--pb-success);
  --pb-notice-tint: var(--pb-success-tint);
  --pb-notice-ink: var(--pb-success-ink);
  display: flex; align-items: center; gap: 14px;
  padding: 15px 20px; border-radius: var(--pb-radius-lg);
  background: var(--pb-notice-tint); color: var(--pb-notice-ink);
  /* A hairline in the accent keeps the tint from floating on the warm
     page background without adding a second filled block. */
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pb-notice-accent) 18%, transparent);
  font-size: 15px;
}
.pb-notice__icon {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: var(--pb-notice-accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.pb-notice__icon svg { width: 18px; height: 18px; display: block; }

.pb-notice--error {
  --pb-notice-accent: var(--pb-danger);
  --pb-notice-tint: var(--pb-danger-tint);
  --pb-notice-ink: var(--pb-danger-ink);
}
.pb-notice--info {
  --pb-notice-accent: var(--pb-info);
  --pb-notice-tint: var(--pb-info-tint);
  --pb-notice-ink: var(--pb-info-ink);
}

/* --------------------------------------------------------------------------
   FAQ (AEO) — plain disclosure list, readable without JavaScript
   -------------------------------------------------------------------------- */

.pb-faq { display: flex; flex-direction: column; gap: 10px; }
.pb-faq details {
  background: var(--pb-surface); border: 1px solid rgba(20, 30, 22, .05);
  border-radius: var(--pb-radius-lg); padding: 16px 20px;
}
.pb-faq summary {
  font-family: var(--pb-font-display); font-weight: 600; font-size: 17.5px;
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 12px;
}
.pb-faq summary::-webkit-details-marker { display: none; }
.pb-faq summary::after { content: "+"; color: var(--pb-green); font-size: 22px; line-height: 1; }
.pb-faq details[open] summary::after { content: "−"; }
.pb-faq p { margin-top: 10px; color: var(--pb-ink-3); font-size: 14.5px; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.pb-footer { background: var(--pb-green-deep); color: #C9D3C6; margin-top: 56px; }
.pb-footer__grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 32px; padding-block: 48px 32px;
}
.pb-footer h2, .pb-footer__title {
  font-size: 15px; font-weight: 700; color: #fff;
  letter-spacing: .04em; margin-bottom: 12px; font-family: var(--pb-font-body);
}
.pb-footer a { color: #C9D3C6; display: block; padding: 5px 0; font-size: 15.5px; }
.pb-footer a:hover { color: #fff; }
.pb-footer__brand { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.pb-footer__brand img { width: 40px; height: 40px; border-radius: 10px; }
.pb-footer__brand span { font-family: var(--pb-font-display); font-weight: 600; font-size: 23px; color: #fff; }
.pb-footer__about { font-size: 15.5px; line-height: 1.7; max-width: 36ch; }
.pb-footer__pay { display: flex; flex-wrap: wrap; gap: 8px; }
.pb-footer__pay span {
  font-size: 14px; padding: 6px 12px; border-radius: var(--pb-pill);
  background: rgba(255, 255, 255, .08); color: #DCE5DA;
}
.pb-footer__legal {
  padding-block: 16px; border-top: 1px solid rgba(255, 255, 255, .09);
  font-size: 14px; text-align: center; color: #9CAE9A;
}

/* --------------------------------------------------------------------------
   Toast — add-to-bag feedback
   -------------------------------------------------------------------------- */

.pb-toast {
  position: fixed; inset-inline: 16px; bottom: 20px; z-index: 60;
  margin-inline: auto; max-width: 420px;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-radius: var(--pb-radius-lg);
  background: var(--pb-ink); color: #fff; font-size: 14.5px; font-weight: 600;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .25);
  transform: translateY(140%); opacity: 0;
  transition: transform .35s var(--pb-ease), opacity .35s var(--pb-ease);
}
.pb-toast.is-visible { transform: translateY(0); opacity: 1; }
.pb-toast a { color: var(--pb-gold-light); margin-inline-start: auto; white-space: nowrap; }

/* --------------------------------------------------------------------------
   Touch targets

   A finger is not a cursor. On a touch screen every control below grows to
   at least 24px of hittable area; where that would change the visual design
   (the hero dots, the thin top strip) the growth is invisible padding or a
   pseudo-element overlay, so nothing moves.
   -------------------------------------------------------------------------- */

@media (pointer: coarse) {
  .pb-strip a, .pb-lang__item { display: inline-block; padding-block: 6px; }
  /* The links now carry that height themselves, so the bar gives its own
     padding back and the strip stays the thin rail it was drawn as. */
  .pb-strip .pb-container { padding-block: 1px; }
  /* Negative margins cancel the padding, so a short crumb such as "হোম"
     becomes tappable without the trail re-spacing itself. */
  .pb-crumbs a, .pb-crumbs [aria-current="page"] {
    display: inline-block; padding: 5px 4px; margin: -5px -4px;
  }
  .pb-link-more { display: inline-block; padding-block: 6px; }
  /* Phone numbers and the like sitting inside a definition row. */
  .pb-fact a { display: inline-block; padding-block: 4px; margin-block: -4px; }
  .pb-footer a { padding-block: 7px; }
  .pb-lang__item { padding-block: 8px; }
  .pb-line__remove { width: 44px; height: 44px; }
  .pb-qty--sm button { height: 44px; }
  .pb-qty--sm input { height: 44px; }

  /* The dots stay 7–8px; only their reach grows. The rail's dots sit 5px
     apart, so they widen sideways by 2px at most and never overlap. */
  .pb-hero__dot, .pb-rail__dot, .pb-rail__arrow { position: relative; }
  .pb-hero__dot::before { content: ""; position: absolute; inset: -9px -8px; }
  .pb-rail__dot::before { content: ""; position: absolute; inset: -12px -2px; }
  .pb-rail__arrow::before { content: ""; position: absolute; inset: -9px; }
}

/* --------------------------------------------------------------------------
   Responsive — mobile-first refinements at each breakpoint down
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
  .pb-herorow { grid-template-columns: minmax(0, 1fr) 340px; }
  .pb-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pb-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .pb-footer__pay-col { grid-column: 1 / -1; }
}

@media (max-width: 992px) {
  :root { --pb-gutter: 20px; }

  .pb-home-hero { padding-inline: var(--pb-gutter); }

  /* The rail drops below the hero and lies down as a pair of cards. It no
     longer borrows the hero's height, so the cards state their own. */
  .pb-herorow { grid-template-columns: minmax(0, 1fr); }
  .pb-rail { flex-direction: row; }
  .pb-rail__card { min-height: 176px; }

  /* Unpinned here: the brand row, search row and nav row held together took
     about a quarter of a phone screen on every scroll. The backdrop blur goes
     with it — it would also make the header the containing block for the
     fixed-position partner menu below. */
  .pb-header {
    position: static; background: var(--pb-surface);
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  :target, [id] { scroll-margin-top: 16px; }

  .pb-header__bar { flex-wrap: wrap; gap: 10px 12px; padding-block: 10px; }
  .pb-search { order: 3; flex-basis: 100%; }
  .pb-header__actions { margin-inline-start: auto; }

  /* Horizontally scrollable category nav instead of wrapping. */
  .pb-nav {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
  }
  .pb-nav::-webkit-scrollbar { display: none; }
  .pb-nav a { scroll-snap-align: start; }
  .pb-nav a, .pb-nav--partner-menu summary { padding-block: 12px; }

  /* The menu panel is absolutely positioned, and the nav above now scrolls,
     so the panel would be clipped to the nav's own box and never show.
     Fixed positioning escapes that clip; with `top` left auto it stays just
     under its summary, and the sides are set from the viewport. */
  .pb-nav--partner-menu .pb-partner-menu__panel {
    position: fixed; top: auto; right: var(--pb-gutter); left: var(--pb-gutter); min-width: 0;
  }

  .pb-listing, .pb-cart, .pb-checkout, .pb-story, .pb-outlets, .pb-tracked,
  .pb-pdp, .pb-outlet-promo { grid-template-columns: minmax(0, 1fr); }
  .pb-filters, .pb-summary { position: static; }

  /* Collapse the filters behind a toggle so results are the first thing seen. */
  .pb-filters-col { display: block; }
  .pb-filters-summary {
    display: flex; align-items: center; gap: 9px;
    width: 100%; min-height: 48px; padding: 0 18px;
    border: 1px solid var(--pb-line); border-radius: var(--pb-radius);
    background: var(--pb-surface); color: var(--pb-ink);
    font-size: 15px; font-weight: 600; cursor: pointer;
  }
  .pb-filters-summary__dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--pb-gold); margin-inline-start: auto;
  }
  .pb-filters-toggle:focus-visible + .pb-filters-summary {
    outline: 3px solid color-mix(in srgb, var(--pb-green) 55%, transparent);
    outline-offset: 2px;
  }
  .pb-filters { display: none; margin-top: 12px; }
  .pb-filters-toggle:checked ~ .pb-filters { display: flex; }

  .pb-hero__slide { grid-template-columns: minmax(0, 1fr); }
  .pb-hero__body { padding: 28px 24px 32px; }
  .pb-hero__media, .pb-hero__mosaic { padding: 0 6px 6px; }
  .pb-hero__media img { border-radius: var(--pb-radius); }
  .pb-hero__mosaic img:nth-child(1) { border-radius: var(--pb-radius) var(--pb-radius) 4px 4px; }
  .pb-hero__mosaic img:nth-child(2) { border-radius: 4px; }
  .pb-hero__mosaic img:nth-child(3) { border-radius: 4px; }
  .pb-hero__dots { left: 24px; bottom: 16px; }
  .pb-hero__arrow { display: none; }

  .pb-maker { grid-template-columns: 76px minmax(0, 1fr); }
  .pb-maker img { width: 76px; height: 76px; }
  .pb-maker__aside { grid-column: 1 / -1; align-items: flex-start; text-align: start; }

  .pb-story__head { margin-top: -40px; }
  .pb-story__avatar { width: 96px; height: 96px; border-radius: 48px; }

  .pb-profile-layout { grid-template-columns: minmax(0, 1fr); }
  .pb-profile-sidebar { position: static; display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, .65fr); align-items: start; }
  .pb-profile-hero__avatar { width: 116px; height: 116px; }
  .pb-profile-hero { margin-top: 16px; }
}

@media (max-width: 768px) {
  body { font-size: 14.5px; }

  .pb-strip .pb-container { padding-block: 6px; font-size: 12px; }
  .pb-strip-links { gap: 14px; }
  .pb-strip-links .pb-strip__hide-sm { display: none; }

  .pb-brand__tagline { display: none; }
  .pb-brand img { width: 40px; height: 40px; }
  .pb-brand__name { font-size: 21px; }
  .pb-bag span:not(.pb-bag__count) { display: none; }
  .pb-bag { padding-inline: 12px; }

  /* iOS Safari zooms the page when a focused control's text is under 16px,
     and never zooms back out. Every field is lifted to 16px here rather than
     one by one, so a field added later is covered too — hence !important,
     which has to beat the per-component sizes above. */
  input, select, textarea { font-size: 16px !important; }

  .pb-section { padding-block: 28px; }
  .pb-home-hero { padding-block: 16px; }

  /* The hero stacks text over a photo here. Left to its natural size it ran
     to a full screen, so the first view was all banner and no products. */
  .pb-herorow .pb-hero__slide, .pb-hero__slide { min-height: 0; }
  .pb-herorow .pb-hero__body, .pb-hero__body { padding: 22px 20px 28px; gap: 10px; }
  .pb-hero__body h2, .pb-herorow .pb-hero__body h2 { max-width: none; font-size: clamp(24px, 7vw, 30px); }
  .pb-hero__body p { font-size: 15px; }
  .pb-hero__media, .pb-hero__mosaic { aspect-ratio: 16 / 10; min-height: 0; }
  /* Picture slides: still one full-bleed picture, now a tall scene whose open
     sky sits at the top for the words and whose products fill the lower half. */
  /* min-height in container units, not aspect-ratio: the flex track stretches its slides, and a stretched
     height would turn into a doubled width. */
  .pb-hero { container-type: inline-size; }
  .pb-hero__slide--art, .pb-herorow .pb-hero__slide--art { min-height: 74cqw; }
  /* The copy is pinned to the bottom of the picture over a scrim that rises
     from the bottom-left corner, so the products keep the right side and the
     slide stays short. */
  .pb-hero__slide--art::before {
    background: linear-gradient(50deg,
      color-mix(in srgb, var(--pb-scrim) 94%, transparent) 0%,
      color-mix(in srgb, var(--pb-scrim) 76%, transparent) 30%,
      transparent 58%);
  }
  .pb-hero__art img { transform: none; object-position: 70% 0; }
  .pb-hero__slide--art .pb-hero__body, .pb-herorow .pb-hero__slide--art .pb-hero__body {
    position: absolute; inset: auto 0 0 0; height: auto; max-width: none;
    justify-content: flex-end; gap: 10px; padding: 0 18px 38px;
  }
  .pb-hero__slide--art .pb-hero__body h2, .pb-herorow .pb-hero__slide--art .pb-hero__body h2 { max-width: 18ch; font-size: 22px; }
  .pb-hero__media img { height: 100%; }
  /* `1fr` rows have an automatic minimum, so the photos' own heights would
     push the mosaic past the box set above. */
  .pb-hero__mosaic { grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .pb-hero__mosaic img { min-height: 0; }
  .pb-grid { gap: 14px; }
  .pb-grid--4, .pb-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pb-provenance { grid-template-columns: minmax(0, 1fr); }
  .pb-shortcuts { grid-template-columns: minmax(0, 1fr); }
  .pb-rail { flex-direction: column; gap: 14px; }
  .pb-rail__card { min-height: 164px; }
  .pb-rail__card--framed { min-height: 196px; }
  .pb-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pb-pay { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pb-field-row, .pb-choices { grid-template-columns: minmax(0, 1fr); }
  .pb-outlet-mini-grid { grid-template-columns: minmax(0, 1fr); }
  .pb-prodform__image { flex-direction: column; }
  .pb-panel { padding: 20px; border-radius: var(--pb-radius-card); }

  .pb-profile-cover { height: 230px; }
  .pb-profile-hero { display: block; margin-top: 14px; padding: 18px; }
  .pb-profile-hero__identity { align-items: center; gap: 14px; }
  .pb-profile-hero__avatar { width: 92px; height: 92px; border-width: 4px; }
  .pb-profile-hero__copy { padding-bottom: 0; }
  .pb-profile-hero h1 { font-size: 30px; }
  .pb-profile-hero__business { font-size: 14px; }
  .pb-profile-hero__actions { padding: 16px 0 0; }
  .pb-profile-hero__actions .pb-btn { flex: 1; }
  .pb-profile-stats { margin: 22px 0 28px; gap: 8px; }
  .pb-profile-stat { padding: 12px; gap: 8px; min-height: 68px; }
  .pb-profile-stat__icon { width: 32px; height: 32px; font-size: 17px; }
  .pb-profile-stat b { font-size: 18px; }
  .pb-profile-stat small { font-size: 11px; }
  .pb-profile-stat--wide { grid-column: 1 / -1; }
  .pb-profile-sidebar { display: flex; }
  .pb-profile-story { padding: 20px; }
  .pb-profile-quote { padding: 18px; font-size: 18px; }
  .pb-profile-products h2 { font-size: 23px; }

  .pb-pdp__buybox { padding: 22px 20px; gap: 16px; }
  .pb-pdp__intro h1 { font-size: 30px; }
  .pb-pdp__pricebox { align-items: flex-start; flex-direction: column; gap: 6px; }
  .pb-pdp__price b { font-size: 30px; }
  .pb-pdp__availability { white-space: normal; }
  .pb-pdp__cart-button { min-width: 0; }

  .pb-product__body { padding: 12px 13px 14px; gap: 4px; }
  .pb-product__name { font-size: 16px; }
  .pb-product__price b { font-size: 17px; }

  /* Cart lines reflow to two rows on phones: the thumbnail spans both. */
  .pb-line { grid-template-columns: 72px minmax(0, 1fr) auto; gap: 10px 12px; }
  .pb-line__media { width: 72px; height: 72px; grid-column: 1; grid-row: 1 / span 2; }
  .pb-line__text { grid-column: 2; grid-row: 1; }
  .pb-line__remove-form { grid-column: 3; grid-row: 1; justify-self: end; }
  .pb-line__qty { grid-column: 2; grid-row: 2; }
  .pb-line__total { grid-column: 3; grid-row: 2; align-self: center; }

  .pb-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding-block: 32px 24px; }
  .pb-footer__about-col { grid-column: 1 / -1; }
}

@media (max-width: 576px) {
  /* The pickup/delivery line wrapped to two rows above the links. The links
     are what a phone user needs from this bar; the line is repeated on the
     product and outlet pages. */
  .pb-strip__msg { display: none; }
  .pb-strip-links { width: 100%; gap: 16px; }
  .pb-lang { margin-inline-start: auto; }
}

@media (max-width: 480px) {
  /* The single row scrolls sideways here; a slightly smaller coin shows the next one peeking in. */
  .pb-cat-grid { grid-auto-columns: 76px; gap: 12px; }
  .pb-cat__media { max-width: 72px; }
  .pb-cat__name { font-size: 12px; }
  .pb-gallery__thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .pb-pdp__price b { font-size: 28px; }
  .pb-footer__grid { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Motion and print
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .pb-card:hover, .pb-shortcut:hover { transform: none; }
  .pb-cat:hover .pb-cat__media, .pb-cat:hover .pb-cat__media img { transform: none; }
}

@media print {
  .pb-strip, .pb-header, .pb-footer, .pb-toast, .pb-add, .pb-btn { display: none !important; }
  body { background: #fff; }
}

/* ==========================================================================
   Back office — admin panel and vendor portal.
   Darker, denser chrome than the storefront; same tokens throughout.
   ========================================================================== */

.pb-admin {
  --pb-admin-bg: #F4F5F1;
  --pb-admin-side: #1C231D;
  --pb-admin-side-ink: #C6D0C4;
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr);
  min-height: 100vh;
  background: var(--pb-admin-bg);
}

/* -- Sidebar -------------------------------------------------------------- */

.pb-side {
  background: var(--pb-admin-side); color: var(--pb-admin-side-ink);
  display: flex; flex-direction: column; gap: 18px;
  padding: 18px 14px; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.pb-side__brand { display: flex; align-items: center; gap: 10px; padding-inline: 6px; }
.pb-side__brand img { width: 38px; height: 38px; border-radius: 10px; }
.pb-side__brand b { font-family: var(--pb-font-display); font-size: 19px; color: #fff; display: block; line-height: 1.2; }
.pb-side__brand span { font-size: 11.5px; opacity: .72; }

.pb-side__nav { display: flex; flex-direction: column; gap: 2px; }
/* Section heading: the panel grew past the point where one flat list of
   twenty links could be scanned. */
.pb-side__group {
  padding: 14px 12px 5px; font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; opacity: .55;
}
.pb-side__link {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: var(--pb-radius);
  color: var(--pb-admin-side-ink); font-size: 14.5px; font-weight: 500;
  transition: background-color .18s var(--pb-ease), color .18s var(--pb-ease);
}
.pb-side__link:hover { background: rgba(255, 255, 255, .07); color: #fff; text-decoration: none; }
.pb-side__link[aria-current="page"] { background: var(--pb-green); color: #fff; font-weight: 600; }
.pb-side__link svg { flex-shrink: 0; }
.pb-side__badge {
  margin-inline-start: auto; min-width: 22px; height: 20px; padding: 0 6px;
  border-radius: 10px; background: var(--pb-gold); color: #fff;
  font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}

.pb-side__user {
  margin-top: auto; display: flex; align-items: center; gap: 10px;
  padding: 10px; border-radius: var(--pb-radius); background: rgba(255, 255, 255, .06);
}
.pb-side__user img { width: 36px; height: 36px; border-radius: 18px; object-fit: cover; }
.pb-side__user b { display: block; font-size: 13.5px; color: #fff; line-height: 1.3; }
.pb-side__user span { font-size: 11.5px; opacity: .75; }

/* -- Topbar and body ------------------------------------------------------ */

.pb-admin__body { display: flex; flex-direction: column; min-width: 0; }

.pb-topbar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 16px 28px; background: #fff; border-bottom: 1px solid #E3E6DF;
  position: sticky; top: 0; z-index: 10;
}
.pb-topbar__title { display: flex; flex-direction: column; line-height: 1.3; margin-inline-end: auto; }
.pb-topbar__title b { font-family: var(--pb-font-display); font-size: 21px; font-weight: 600; }
.pb-topbar__title span { font-size: 13px; color: var(--pb-muted); }
.pb-topbar__search {
  display: flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 6px 0 14px; min-width: 240px;
  border: 1px solid var(--pb-line); border-radius: var(--pb-radius); background: #fff;
}
.pb-topbar__search input { border: 0; outline: 0; flex: 1; min-width: 0; font-size: 14px; background: transparent; }

.pb-admin__main { padding: 24px 28px 48px; display: flex; flex-direction: column; gap: 20px; }

/* -- Cards and KPIs ------------------------------------------------------- */

.pb-adm-card {
  background: #fff; border: 1px solid #E3E6DF; border-radius: var(--pb-radius-lg);
  padding: 18px 20px; display: flex; flex-direction: column; gap: 14px;
}
.pb-adm-card__head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
}
.pb-adm-card__head b { font-size: 15.5px; font-weight: 700; }
.pb-adm-card__head a { font-size: 13px; font-weight: 600; }

.pb-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pb-kpi {
  background: #fff; border: 1px solid #E3E6DF; border-radius: var(--pb-radius-lg);
  padding: 16px 18px; display: flex; flex-direction: column; gap: 2px; color: var(--pb-ink);
  transition: border-color .2s var(--pb-ease), box-shadow .2s var(--pb-ease);
}
.pb-kpi:hover { border-color: var(--pb-green); box-shadow: var(--pb-shadow-card); text-decoration: none; }
.pb-kpi__label { font-size: 12.5px; color: var(--pb-muted); }
.pb-kpi__value {
  font-family: var(--pb-font-display); font-weight: 700; line-height: 1.15;
  font-size: clamp(22px, 2.2vw, 29px); white-space: nowrap;
}
.pb-kpi__note { font-size: 12.5px; color: var(--pb-green); font-weight: 600; }

.pb-adm-grid { display: grid; gap: 20px; }
.pb-adm-grid--2 { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.pb-adm-grid--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* -- Bar chart (pure CSS, no chart library) ------------------------------- */

.pb-chart { display: flex; align-items: flex-end; gap: 6px; height: 190px; }
.pb-chart__col {
  flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; height: 100%;
}
.pb-chart__bar { border-radius: 4px 4px 0 0; min-height: 2px; transition: height .4s var(--pb-ease); }
.pb-chart__bar--online { background: var(--pb-green); }
.pb-chart__bar--pos { background: var(--pb-gold); border-radius: 0 0 4px 4px; }
.pb-chart__axis { display: flex; gap: 6px; margin-top: 8px; }
.pb-chart__axis span { flex: 1; text-align: center; font-size: 10.5px; color: var(--pb-muted); }
.pb-legend { display: flex; gap: 16px; font-size: 12.5px; color: var(--pb-muted); }
.pb-legend span { display: inline-flex; align-items: center; gap: 6px; }
.pb-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* Horizontal meter used for outlet performance and report breakdowns. */
.pb-meter { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--pb-line-softer); }
.pb-meter i { display: block; height: 100%; }
.pb-meter__row { display: flex; flex-direction: column; gap: 6px; }
.pb-meter__label { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.pb-meter__label b { font-weight: 600; }

/* -- Tables --------------------------------------------------------------- */

.pb-table-wrap { overflow-x: auto; border: 1px solid #E3E6DF; border-radius: var(--pb-radius-lg); background: #fff; }
.pb-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 760px; }
.pb-table th {
  text-align: start; font-size: 12px; font-weight: 700; color: var(--pb-muted);
  letter-spacing: .02em; padding: 12px 14px; border-bottom: 1px solid #E3E6DF; white-space: nowrap;
}
.pb-table td { padding: 13px 14px; border-bottom: 1px solid var(--pb-line-softer); vertical-align: middle; }
.pb-table tr:last-child td { border-bottom: 0; }
.pb-table tbody tr:hover { background: var(--pb-green-tint-3); }
.pb-table b { font-weight: 600; }
.pb-table small { display: block; font-size: 12px; color: var(--pb-muted); }
.pb-table__num { text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pb-table__actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

.pb-status {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: var(--pb-pill);
  background: var(--pb-line-softer); color: var(--pb-ink-soft); white-space: nowrap;
}
.pb-status--new { background: #FDF0DA; color: #8A6A2A; }
.pb-status--processing { background: #E4EEF8; color: #27557F; }
.pb-status--packed { background: #EDE7F8; color: #4C3B7A; }
.pb-status--shipped { background: #E0F0E6; color: #1F6B3B; }
.pb-status--ready { background: var(--pb-green-tint); color: var(--pb-green-dark); }
.pb-status--delivered { background: var(--pb-green); color: #fff; }
.pb-status--cancelled { background: #FBECE8; color: #8A2E1C; }
.pb-status--low { background: #FDF0DA; color: #8A6A2A; }
.pb-status--out { background: #FBECE8; color: #8A2E1C; }

.pb-thumb { width: 40px; height: 40px; border-radius: 9px; object-fit: cover; flex-shrink: 0; }
.pb-thumb--lg { width: 120px; height: 120px; border-radius: var(--pb-radius); }
.pb-cellflex { display: flex; align-items: center; gap: 10px; min-width: 0; }

/* -- Vendor product form -------------------------------------------------- */

.pb-prodform { display: flex; flex-direction: column; gap: 18px; max-width: 760px; }
.pb-prodform__image { display: flex; align-items: flex-start; gap: 18px; }
.pb-prodform__image .pb-field { flex: 1; min-width: 0; }
.pb-prodform__preview { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.pb-prodform__preview small { font-size: 12.5px; color: var(--pb-muted); }
.pb-prodform__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pb-prodform__view { font-size: 13.5px; font-weight: 600; }
.pb-prodform__more { gap: 0; }
.pb-prodform__more[open] { gap: 14px; }
.pb-prodform__more > summary {
  font-size: 15.5px; font-weight: 700; cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 8px;
}
.pb-prodform__more > summary::-webkit-details-marker { display: none; }
.pb-prodform__more > summary::before {
  content: "+"; color: var(--pb-green); font-size: 17px; line-height: 1;
}
.pb-prodform__more[open] > summary::before { content: "\2013"; }

/* -- Admin filter tabs ---------------------------------------------------- */

.pb-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.pb-tab {
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 14px;
  border: 1px solid #E3E6DF; border-radius: var(--pb-radius);
  background: #fff; color: var(--pb-ink); font-size: 13.5px; font-weight: 600;
}
.pb-tab:hover { border-color: var(--pb-ink); text-decoration: none; }
.pb-tab[aria-current="page"] { background: var(--pb-ink); border-color: var(--pb-ink); color: #fff; }
.pb-tab__count {
  min-width: 20px; height: 19px; padding: 0 5px; border-radius: 10px;
  background: var(--pb-line-softer); color: var(--pb-ink-soft);
  font-size: 11.5px; display: inline-flex; align-items: center; justify-content: center;
}
.pb-tab[aria-current="page"] .pb-tab__count { background: rgba(255, 255, 255, .22); color: #fff; }

/* -- Login ---------------------------------------------------------------- */

.pb-login {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background: linear-gradient(160deg, #13261A, #2F6B3B);
}
.pb-login__card {
  width: min(100%, 420px); background: #fff;
  border-radius: var(--pb-radius-panel); padding: 32px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .25);
  display: flex; flex-direction: column; gap: 16px;
}
.pb-login__brand { display: flex; align-items: center; gap: 10px; }
.pb-login__brand img { width: 48px; height: 48px; border-radius: 12px; }
.pb-login__hint {
  font-size: 12.5px; color: var(--pb-muted); background: var(--pb-bg);
  border-radius: var(--pb-radius); padding: 12px 14px; line-height: 1.7;
}

@media (max-width: 992px) {
  .pb-admin { grid-template-columns: minmax(0, 1fr); }

  /* The rail becomes a bar across the top. Brand and account sit on one
     row and the menu scrolls on its own beneath them: squeezing all three
     into a single row shrank the brand to a sliver and wrapped the account
     name down the page, costing a third of a phone screen before any
     content appeared. Both ends are held at their natural width so the
     menu, not the chrome, absorbs the scrolling. */
  .pb-side {
    position: static; height: auto; overflow: visible;
    flex-direction: row; flex-wrap: wrap; align-items: center;
    gap: 10px 12px; padding: 10px 16px;
  }
  .pb-side__brand { flex: 0 0 auto; }
  .pb-side__user {
    order: 2; flex: 0 0 auto;
    margin: 0; margin-inline-start: auto; padding: 6px 8px;
  }
  .pb-side__user b, .pb-side__user > span > span { white-space: nowrap; }
  .pb-side__nav {
    order: 3; flex-basis: 100%; flex-direction: row; gap: 6px;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .pb-side__nav::-webkit-scrollbar { display: none; }
  .pb-side__link { white-space: nowrap; flex-shrink: 0; }

  /* Unpinned on small screens: a wrapped topbar can run to three rows, and
     holding that much chrome on screen leaves almost nothing to read. */
  .pb-topbar { position: static; padding-block: 12px; }

  .pb-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pb-adm-grid--2, .pb-adm-grid--even { grid-template-columns: minmax(0, 1fr); }
  .pb-admin__main, .pb-topbar { padding-inline: 16px; }
}

@media (max-width: 576px) {
  .pb-kpis { grid-template-columns: minmax(0, 1fr); }
  .pb-topbar__search { min-width: 0; width: 100%; order: 3; }
  .pb-topbar { gap: 10px; }
  /* Keep the avatar and the logout control; the name is the first thing
     that can go when the row runs out of room. */
  .pb-side__user > span { display: none; }
  .pb-side__brand span span { display: none; }
}

/* --------------------------------------------------------------------------
   Back office — generic CRUD sections, order detail and pagination
   -------------------------------------------------------------------------- */

/* Previous/next pager under a paginated list. The middle column carries the
   count, so the two buttons stay put as the page number changes. */
.pb-pager {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
}
.pb-pager > :last-child { justify-self: end; }
.pb-pager__count { font-size: 13px; color: var(--pb-muted); text-align: center; }

/* The generated add/edit form: two columns, with long text and image inputs
   taking the full width so a description is not typed through a slot. */
.pb-crudform { display: flex; flex-direction: column; gap: 18px; max-width: 920px; }
.pb-crudform__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.pb-crudform__wide { grid-column: 1 / -1; }

/* A short form laid out along the bottom of a card — status and note, then
   the button that applies them. */
.pb-inlineform { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.pb-inlineform .pb-field { flex: 1 1 200px; min-width: 0; }

/* One child row inside a parent's form — a gallery image, a provenance fact.
   The row reads left to right and wraps whole, so a narrow screen stacks the
   rows rather than interleaving their fields. */
.pb-inline-row {
  display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap;
  padding: 12px 0; border-top: 1px solid var(--pb-line-softer);
}
.pb-inline-row:first-of-type { border-top: 0; padding-top: 0; }
.pb-inline-row .pb-field { flex: 1 1 180px; min-width: 0; }
.pb-inline-row__del { flex: 0 0 auto; padding-bottom: 12px; }

.pb-confirm { max-width: 560px; }
.pb-confirm__text { font-size: 15.5px; margin: 0; }

.pb-adm-stack { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

/* Label/value pairs — the customer block on an order. */
.pb-deflist { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.pb-deflist > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; }
.pb-deflist dt { font-size: 13px; color: var(--pb-muted); }
.pb-deflist dd { margin: 0; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }

/* Money summary under the order lines. */
.pb-sums { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.pb-sums > div { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; }
.pb-sums dt { color: var(--pb-muted); }
.pb-sums dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.pb-sums__total { padding-top: 8px; border-top: 1px solid var(--pb-line-soft); font-size: 15.5px; }
.pb-sums__total dt { color: var(--pb-ink); font-weight: 600; }

/* Fulfilment steps and the event trail beneath them. */
.pb-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.pb-steps__item {
  position: relative; padding: 0 0 14px 26px;
  border-inline-start: 2px solid var(--pb-line-soft); margin-inline-start: 6px;
}
.pb-steps__item:last-child { border-inline-start-color: transparent; padding-bottom: 0; }
.pb-steps__item::before {
  content: ""; position: absolute; inset-inline-start: -7px; top: 3px;
  width: 12px; height: 12px; border-radius: 6px;
  background: var(--pb-surface); box-shadow: inset 0 0 0 2px var(--pb-line);
}
.pb-steps__item.is-done { border-inline-start-color: var(--pb-green-tint); }
.pb-steps__item.is-done::before { background: var(--pb-green); box-shadow: none; }
.pb-steps__item.is-current::before { box-shadow: 0 0 0 4px var(--pb-green-tint); }
.pb-steps__item b { font-size: 14px; font-weight: 600; display: block; }
.pb-steps__item small { display: block; font-size: 12.5px; color: var(--pb-muted); }

.pb-events { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pb-events li { font-size: 13.5px; }
.pb-events b { font-weight: 600; }
.pb-events small { display: block; font-size: 12.5px; color: var(--pb-muted); }

@media (max-width: 900px) {
  .pb-crudform__grid { grid-template-columns: minmax(0, 1fr); }
  .pb-deflist > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* --------------------------------------------------------------------------
   Back office — manual order entry
   --------------------------------------------------------------------------
   A till rather than a form: a product picker over a list of chosen lines on
   the left, the running total pinned on the right. The full catalog table is
   the control that always works, so it keeps the panel's ordinary table look
   and only folds away behind its disclosure.
   -------------------------------------------------------------------------- */

.pb-mop { display: flex; flex-direction: column; gap: 20px; }
/* `align-self` matters as much as `position` here: a stretched grid item is
   as tall as the catalog beside it, and a sticky box with no slack never
   moves. `top` clears the sticky topbar. */
.pb-mop__side { position: sticky; top: 84px; align-self: start; }

/* The empty state sits between the picker and the catalog, so it stays quiet —
   a line of guidance, not a panel competing with either. */
.pb-mop__blank {
  margin: 0; padding: 18px 16px; text-align: center;
  border: 1px dashed var(--pb-line); border-radius: var(--pb-radius);
  font-size: 13.5px; color: var(--pb-muted);
}

.pb-mop__all > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 600; color: var(--pb-green);
}
.pb-mop__all > summary::-webkit-details-marker { display: none; }
.pb-mop__all > summary::before {
  content: "+"; width: 20px; height: 20px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--pb-circle); background: var(--pb-green-tint);
  font-size: 14px; line-height: 1;
}
.pb-mop__all[open] > summary::before { content: "\2013"; }
.pb-mop__all[open] > summary { margin-bottom: 14px; }

/* The catalog sits in the narrower of the two columns, so it drops the wide
   table's minimum and lets the product cell carry the long strings. */
.pb-mop__all .pb-table { min-width: 560px; }
.pb-mop__all .pb-table td { padding: 10px 12px; }

.pb-mop__qty { max-width: 88px; margin-inline-start: auto; }
.pb-mop__qty:disabled { background: var(--pb-line-softer); cursor: not-allowed; }

.pb-mop__drop {
  width: 32px; height: 32px; border: 1px solid var(--pb-line);
  border-radius: var(--pb-radius-sm); background: #fff;
  color: var(--pb-muted); font-size: 17px; line-height: 1; cursor: pointer;
  transition: border-color .2s var(--pb-ease), color .2s var(--pb-ease), background-color .2s var(--pb-ease);
}
.pb-mop__drop:hover {
  border-color: var(--pb-danger); color: var(--pb-danger); background: var(--pb-danger-tint);
}

/* -- Product picker ------------------------------------------------------- */

.pb-combo { position: relative; }
.pb-combo__field {
  display: flex; align-items: center; gap: 10px;
  padding: 0 12px 0 14px; height: 52px;
  border: 1px solid var(--pb-line); border-radius: var(--pb-radius);
  background: #fff; color: var(--pb-muted);
  transition: border-color .2s var(--pb-ease), box-shadow .2s var(--pb-ease);
}
.pb-combo__field:focus-within { border-color: var(--pb-green); box-shadow: 0 0 0 3px var(--pb-green-tint); }
.pb-combo__field input {
  flex: 1; min-width: 0; height: 100%;
  border: 0; outline: 0; background: transparent;
  font-size: 15px; color: var(--pb-ink);
}
.pb-combo__clear {
  width: 28px; height: 28px; flex-shrink: 0;
  border: 0; border-radius: var(--pb-circle); background: var(--pb-line-softer);
  color: var(--pb-ink-soft); font-size: 17px; line-height: 1; cursor: pointer;
}
.pb-combo__clear:hover { background: var(--pb-hover); }

/* Floated over the lines below rather than pushing them down, so the list a
   staff member is reading does not jump every time the panel opens. */
.pb-combo__panel {
  position: absolute; z-index: 20; inset-inline: 0; top: calc(100% + 6px);
  background: #fff; border: 1px solid var(--pb-line);
  border-radius: var(--pb-radius); box-shadow: var(--pb-shadow-hover);
  overflow: hidden;
}
.pb-combo__list { list-style: none; margin: 0; padding: 6px; max-height: 340px; overflow-y: auto; }
.pb-combo__opt {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto;
  align-items: center; gap: 12px;
  padding: 9px 10px; border-radius: var(--pb-radius-sm); cursor: pointer;
}
.pb-combo__thumb { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; }
.pb-combo__opt.is-active { background: var(--pb-green-tint); }
.pb-combo__opt[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.pb-combo__text { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.pb-combo__text b { font-size: 14.5px; font-weight: 600; }
.pb-combo__text small { font-size: 12px; color: var(--pb-muted); }
.pb-combo__price { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pb-combo__note {
  margin: 0; padding: 10px 14px; font-size: 12.5px; color: var(--pb-muted);
  border-top: 1px solid var(--pb-line-softer); background: var(--pb-bg);
}

/* -- Shared tweaks the till needs ----------------------------------------- */

/* The chosen lines are read at a glance beside a form, not scanned as a
   report, so they drop the catalog table's minimum width and tighten up. */
.pb-table--snug { min-width: 0; }
.pb-table--snug td { padding: 10px 12px; }

.pb-qty--sm button { width: 32px; height: 36px; font-size: 16px; }
.pb-qty--sm input { width: 46px; height: 36px; font-size: 14.5px; }
/* The stepper owns the arrows, so the browser's own spinners are noise. */
.pb-qty--sm input { appearance: textfield; -moz-appearance: textfield; }
.pb-qty--sm input::-webkit-outer-spin-button,
.pb-qty--sm input::-webkit-inner-spin-button { appearance: none; margin: 0; }

.pb-choices--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 992px) {
  .pb-mop__side { position: static; }
  .pb-choices--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Below this the chosen lines stop being a table and become one card per
   line. Six columns in a phone-width card means the stepper — the control
   the desk reaches for most — ends up off the right edge behind a scrollbar,
   so the row is re-laid as a two-column grid instead: what the product is on
   the left, what it costs and how many on the right. */
@media (max-width: 760px) {
  .pb-mop__lines thead { display: none; }
  .pb-mop__lines, .pb-mop__lines tbody, .pb-mop__lines tr, .pb-mop__lines td { display: block; }
  .pb-mop__lines tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 14px; padding: 12px 14px;
    border-bottom: 1px solid var(--pb-line-softer);
  }
  .pb-mop__lines tr:last-child { border-bottom: 0; }
  .pb-mop__lines td { padding: 0; border: 0; text-align: start; }
  .pb-mop__lines td:nth-child(1) { grid-area: 1 / 1; }
  .pb-mop__lines td:nth-child(2) { grid-area: 2 / 1; font-size: 13px; color: var(--pb-muted); }
  .pb-mop__lines td:nth-child(3) { grid-area: 2 / 2; justify-self: end; }
  .pb-mop__lines td:nth-child(4) { grid-area: 3 / 2; text-align: end; }
  .pb-mop__lines td:nth-child(5) { grid-area: 1 / 2; justify-self: end; }
}

@media (max-width: 576px) {
  .pb-choices, .pb-choices--four { grid-template-columns: minmax(0, 1fr); }
  .pb-combo__opt { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .pb-combo__opt .pb-status { grid-column: 2 / -1; }
}

/* ---------------------------------------------------------------------------
   Product image slots
   --------------------------------------------------------------------------
   Uploaded product photos can be small source files. Keep those files at
   their natural dimensions so the browser does not blur them by enlarging
   them beyond their available detail.
   ------------------------------------------------------------------------ */

.pb-product__media img.pb-img--sm,
.pb-gallery__main img.pb-img--sm,
.pb-gallery__thumb img.pb-img--sm,
.pb-cat__media img.pb-img--sm,
.pb-line__media img.pb-img--sm {
  width: auto; height: auto;
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  margin: auto;
}

.pb-cat__media img.pb-img--sm { max-width: 70%; max-height: 70%; }

/* Do not enlarge low-resolution uploads on hover. */
.pb-card:hover .pb-product__media img.pb-img--sm { transform: none; }