/* =========================================================
   Paygasus Shop Theme — Editorial Hardware Store
   Ported from the "Paygasus Hardware Store" design system.
   Tiempos serif + IBM Plex · warm off-white · hairline grids.
   ========================================================= */

/* ---------------------------------------------------------
   Fonts — Tiempos (trial) self-hosted. IBM Plex via CDN (head.tpl).
   --------------------------------------------------------- */
@font-face { font-family: "Tiempos Fine"; src: url("../fonts/tiempos-fine-light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Tiempos Fine"; src: url("../fonts/tiempos-fine-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Tiempos Fine"; src: url("../fonts/tiempos-fine-regular-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Tiempos Fine"; src: url("../fonts/tiempos-fine-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Tiempos Fine"; src: url("../fonts/tiempos-fine-semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

@font-face { font-family: "Tiempos Headline"; src: url("../fonts/tiempos-headline-light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Tiempos Headline"; src: url("../fonts/tiempos-headline-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Tiempos Headline"; src: url("../fonts/tiempos-headline-regular-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Tiempos Headline"; src: url("../fonts/tiempos-headline-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Tiempos Headline"; src: url("../fonts/tiempos-headline-semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

@font-face { font-family: "Tiempos Text"; src: url("../fonts/tiempos-text-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Tiempos Text"; src: url("../fonts/tiempos-text-regular-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Tiempos Text"; src: url("../fonts/tiempos-text-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Tiempos Text"; src: url("../fonts/tiempos-text-semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

/* ---------------------------------------------------------
   Design tokens
   --------------------------------------------------------- */
:root {
  /* Ink scale */
  --ink:    #111110;
  --body:   #2A2925;
  --muted:  #5A5852;
  --muted2: #8A8880;

  /* Surfaces */
  --bg:      #FAFAF7;
  --card:    #FFFFFF;
  --paper:   #F5F5F5;
  --inkblock:#14130F;

  /* Hairlines */
  --hair:  rgba(17,17,16,0.12);
  --hair2: rgba(17,17,16,0.06);

  /* Accents */
  --blue:     #0d6efd;
  --bluedeep: #0A4CB5;
  --ink-hover: #33312c; /* lifted-black button hover (buttons are black, was blue) */
  --green:    #1F7A4D;
  --gold:     #FFF4B8;

  /* Fonts */
  --font-fine:  "Tiempos Fine", "Tiempos Headline", Georgia, serif;
  --font-serif: "Tiempos Headline", "Tiempos Text", Georgia, serif;
  --font-text:  "Tiempos Text", Georgia, serif;
  --font-sans:  "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-mono:  "IBM Plex Mono", ui-monospace, monospace;

  /* Layout */
  --shell: 1240px;

  /* Legacy aliases — kept so older inline styles don't break hard */
  --accent-blue: #0d6efd;
  --accent-blue-hover: #0A4CB5;
  --accent-cyan: #0d6efd;
  --brand-navy-deep: #14130F;
  --brand-navy-mid: #111110;
  --brand-navy-dark: #111110;
  --surface-white: #FFFFFF;
  --surface-light-gray: #F5F5F5;
  --text-primary: #2A2925;
  --text-muted: #5A5852;

  --z-fixed: 100;
  --z-modal: 1000;
  --normal-font-size: 1rem;
}

/* ---------------------------------------------------------
   Reset & base
   --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--body);
  background-color: var(--bg);
  letter-spacing: 0;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--ink); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--blue); }

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

/* Exact paygasus.com navbar + footer use SF Pro Display (site.css). theme.css
   sets body to IBM Plex for the editorial content, so re-assert SF Pro on the
   site chrome only (it loads after site.css and would otherwise win). */
.navbar, .navbar .nav-link, .navbar .btn, .navbar .dropdown-item, .navbar .dropdown-header,
.bg-dark > footer, .bg-dark > footer h6, .bg-dark > footer p, .bg-dark > footer a {
  font-family: 'SF Pro Display', system-ui, -apple-system, sans-serif;
}

h1, h2, h3, h4 { font-family: var(--font-serif); color: var(--ink); font-weight: 500; letter-spacing: -0.01em; }

/* ---------------------------------------------------------
   Swiss / Gallery system — focus, motion, rhythm (a11y-first)
   --------------------------------------------------------- */
:root {
  --accent: #0d6efd;
  /* deliberate vertical rhythm */
  --sp-section: clamp(64px, 9vw, 132px);
  --sp-block: clamp(40px, 6vw, 72px);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Visible keyboard focus everywhere */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible, .pg-variant-btn:focus-visible, .pg-card-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 0;
}

/* Scroll-triggered staggered reveal — JS adds .is-in (IntersectionObserver) */
.pg-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); transition-delay: var(--d, 0s); will-change: opacity, transform; }
.pg-reveal.is-in { opacity: 1; transform: none; }
/* If JS is off, never hide content */
.no-js .pg-reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .pg-reveal { opacity: 1 !important; transform: none !important; }
}

/* Eyebrow label — the signature mono caption */
.eyebrow,
.pg-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
  font-weight: 400;
}

/* Diagonal-hatch placeholder fill (matches design "imgslot") */
.imgslot,
.pg-imgslot {
  background-color: var(--paper);
  background-image: repeating-linear-gradient(135deg, rgba(17,17,16,0.05) 0 1px, transparent 1px 11px);
}

/* ---------------------------------------------------------
   Buttons
   --------------------------------------------------------- */
.btn-pg-primary,
.btn-pg-secondary,
.btn-pg-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0;
  padding: 0.8rem 1.6rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  text-decoration: none;
}

.btn-pg-primary {
  background: var(--ink);
  color: #fff;
  border: 1px solid var(--ink);
}
.btn-pg-primary:hover { background: var(--ink-hover); border-color: var(--ink-hover); color: #fff; }

.btn-pg-secondary {
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink);
}
.btn-pg-secondary:hover { background: var(--ink); color: #fff; }

.btn-pg-ghost {
  background: transparent;
  border: 1px solid var(--hair);
  color: var(--ink);
}
.btn-pg-ghost:hover { border-color: var(--ink); }

/* Bootstrap primary buttons used by classic-fallback pages */
.btn-primary {
  --bs-btn-bg: var(--ink);
  --bs-btn-border-color: var(--ink);
  --bs-btn-hover-bg: var(--ink-hover);
  --bs-btn-hover-border-color: var(--ink-hover);
  --bs-btn-active-bg: var(--ink-hover);
  --bs-btn-active-border-color: var(--ink-hover);
  border-radius: 0;
}

.icon-link { display: inline-flex; align-items: center; gap: 4px; }
.icon-link .arrow { display: inline-block; font-size: 14px; transition: transform .2s ease; }
.icon-link:hover .arrow { transform: translateX(.25rem); }

/* ---------------------------------------------------------
   Page wrapper & columns
   --------------------------------------------------------- */
#wrapper {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 16px 24px;
}
@media (min-width: 700px)  { #wrapper { padding: 20px 28px; } }
@media (min-width: 1200px) { #wrapper { padding: 24px 32px; } }

.layout-columns { display: flex; gap: clamp(1.5rem, 3.5vw, 3rem); }
.layout-columns #left-column,
.layout-columns #right-column { flex: 0 0 230px; }
.layout-columns #content-wrapper { flex: 1; min-width: 0; }

/* ---------------------------------------------------------
   Section headings
   --------------------------------------------------------- */
.section-title {
  font-family: var(--font-fine);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 1.5rem;
}
.section-title::after { content: none; }

/* Hairline rule with a short blue tick — the design's section marker */
.pg-tick {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}
.pg-tick::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--blue);
}

/* ---------------------------------------------------------
   Homepage hero & featured
   --------------------------------------------------------- */
.pg-home-hero {
  padding: clamp(28px, 4vw, 52px) 0 clamp(28px, 4vw, 44px);
  border-bottom: 1px solid var(--hair);
}
.pg-home-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
  margin-bottom: 1.25rem;
}
.pg-home-hero h1 {
  max-width: 16ch;
  font-family: var(--font-fine);
  font-size: clamp(2.6rem, 6.5vw, 5rem);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0;
}
.pg-home-hero p {
  max-width: 58ch;
  margin: 1.25rem 0 2rem;
  font-family: var(--font-text);
  font-size: 1.16rem;
  line-height: 1.55;
  color: var(--muted);
}
.pg-home-featured { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.pg-home-featured__head { margin-bottom: 1.5rem; }
.pg-home-featured__head .eyebrow { display: inline-flex; margin-bottom: 0.75rem; }
.pg-home-featured__head .section-title { margin-bottom: 0; }

/* ---------------------------------------------------------
   Breadcrumb
   --------------------------------------------------------- */
.breadcrumb {
  background: none;
  padding: 0.5rem 0;
  margin-bottom: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb .separator { color: var(--muted2); }
.breadcrumb .current, .breadcrumb li:last-child { color: var(--ink); }

/* ---------------------------------------------------------
   Generic product grid (classic fallback markup)
   --------------------------------------------------------- */
.products {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  list-style: none;
  padding: 0;
  margin: 0;
  background: var(--hair2); border: 1px solid var(--hair2);
}
@media (min-width: 560px) { .products { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1240px) { .products { grid-template-columns: repeat(3, 1fr); } }
.products > li { display: flex; }

.product-miniature {
  background: var(--bg);
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  transition: background 0.2s;
  display: flex;
  flex-direction: column;
}
.product-miniature:hover { background: var(--card); transform: none; box-shadow: none; }

.product-thumbnail {
  position: relative;
  background: var(--paper);
  aspect-ratio: 4/3;
  overflow: hidden;
}
.product-thumbnail img { width: 100%; height: 100%; object-fit: contain; transition: none; }
.product-miniature:hover .product-thumbnail img { transform: none; }

.product-description { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; gap: 0.5rem; }
.product-title a { font-family: var(--font-serif); color: var(--ink); font-weight: 500; font-size: 1.2rem; }
.product-title a:hover { color: var(--blue); }
.product-price-and-shipping .price { font-family: var(--font-fine); color: var(--ink); font-weight: 400; font-size: 1.5rem; }
.product-price-and-shipping .regular-price { color: var(--muted2); text-decoration: line-through; font-size: 0.85rem; margin-left: 0.4rem; }

.discount-percentage,
.product-flag {
  display: inline-block;
  background: transparent;
  border: 1px solid var(--blue);
  color: var(--blue);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 0;
}
.product-flag.new { background: transparent; }
.product-flag.on-sale { border-color: var(--green); color: var(--green); }

.add-to-cart { margin-top: auto; padding-top: 0.75rem; }
.add-to-cart .btn-pg-primary { width: 100%; }

/* ---------------------------------------------------------
   Product page (basic hooks; full styles in product.tpl block)
   --------------------------------------------------------- */
.product-page-container {
  background: transparent;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
.product-images-modal .product-cover img,
.product-cover img { border-radius: 0; width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--paper); }

.product-name {
  font-family: var(--font-fine);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.product-price .current-price,
.product-price__current,
.current-price-value {
  font-family: var(--font-fine);
  font-size: 2rem;
  font-weight: 400;
  color: var(--ink);
}
.product-information .product-description { color: var(--body); font-family: var(--font-text); }

/* ---------------------------------------------------------
   Cart & checkout (shared hooks)
   --------------------------------------------------------- */
.cart-container,
.checkout-process {
  background: transparent;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.cart-item {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--hair);
}
.cart-item:last-child { border-bottom: none; }
.cart-item-image { width: 80px; height: 80px; border-radius: 0; object-fit: contain; background: var(--paper); }

.cart-summary {
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 0;
  padding: 1.75rem;
  color: var(--body);
}
.cart-summary .cart-total .value {
  font-family: var(--font-fine);
  font-size: 1.9rem;
  font-weight: 400;
  color: var(--ink);
}

.step-title { font-family: var(--font-serif); font-size: 1.15rem; font-weight: 500; color: var(--ink); display: flex; align-items: center; gap: 0.75rem; }
.step-number {
  background: var(--ink);
  color: #fff;
  width: 30px; height: 30px;
  border-radius: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-weight: 500; font-size: 0.85rem;
}

/* ---------------------------------------------------------
   Forms
   --------------------------------------------------------- */
.form-control, .form-select, input[type="text"], input[type="email"],
input[type="password"], input[type="tel"], input[type="number"], textarea, select {
  border: 1px solid var(--hair);
  border-radius: 0;
  padding: 0.7rem 0.9rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--ink);
  background: var(--card);
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
}
.form-control:focus, .form-select:focus, input:focus, textarea:focus, select:focus {
  border-color: var(--blue);
  outline: none;
  box-shadow: 0 0 0 1px var(--blue);
}
label, .form-label {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin-bottom: 0.4rem;
  display: block;
}

/* ---------------------------------------------------------
   Pagination
   --------------------------------------------------------- */
.pagination { display: flex; gap: 0.4rem; list-style: none; padding: 0; margin: 2rem 0; justify-content: center; }
.pagination .page-item .page-link,
.pg-pagination .pg-page-btn {
  border: 1px solid var(--hair);
  border-radius: 0;
  padding: 0.5rem 0.85rem;
  min-width: 38px;
  text-align: center;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 400;
  transition: all 0.2s;
}
.pagination .page-item.active .page-link,
.pagination .page-item .page-link:hover,
.pg-pagination .pg-page-btn:hover,
.pg-pagination .pg-page-btn.active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

/* ---------------------------------------------------------
   Notifications
   --------------------------------------------------------- */
.alert {
  border-radius: 0;
  padding: 0.9rem 1.25rem;
  font-size: 0.92rem;
  margin-bottom: 1rem;
  border: 1px solid var(--hair);
  border-left-width: 2px;
  font-family: var(--font-sans);
}
.alert-success { background: var(--card); color: var(--green); border-left-color: var(--green); }
.alert-danger  { background: var(--card); color: #b42318; border-left-color: #b42318; }
.alert-info    { background: var(--card); color: var(--bluedeep); border-left-color: var(--blue); }
.alert-warning { background: var(--card); color: #8a6d00; border-left-color: var(--gold); }

/* =========================================================
   Product Listing — Sidebar & Cards (editorial)
   ========================================================= */

/* ── Sidebar ── */
.pg-sidebar {
  padding: 0;
  position: sticky;
  top: 92px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--hair) transparent;
  align-self: flex-start;
}
.pg-sidebar::-webkit-scrollbar { width: 4px; }
.pg-sidebar::-webkit-scrollbar-thumb { background: var(--hair); border-radius: 0; }

.pg-sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 0;
  border-bottom: none;
}
.pg-sidebar__title {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
}
.pg-sidebar__reset {
  background: none;
  border: none;
  color: var(--blue);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0;
  cursor: pointer;
}
.pg-sidebar__reset:hover { text-decoration: underline; }

/* Filter group */
.pg-filter-group {
  border-top: 1px solid var(--hair);
  border-bottom: none;
  padding: 1rem 0 0.5rem;
  margin-bottom: 0;
}
.pg-filter-group__toggle {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 0 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink);
  text-align: left;
}
.pg-filter-group__icon { display: none; }
.pg-filter-group__chevron { margin-left: auto; flex-shrink: 0; transition: transform 0.25s; color: var(--muted2); }
.pg-filter-group__toggle[aria-expanded="false"] .pg-filter-group__chevron { transform: rotate(-90deg); }
.pg-filter-group__body { padding: 0.1rem 0 0.25rem; display: flex; flex-direction: column; gap: 0; }

/* Facet rows */
.pg-checkbox-label,
.facet-label {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.35rem 0;
  border-radius: 0;
  cursor: pointer;
  font-family: var(--font-text);
  font-size: 0.98rem;
  color: var(--body);
  transition: color 0.15s;
}
.pg-checkbox-label:hover,
.facet-label:hover { background: transparent; color: var(--ink); }

.pg-checkbox { position: absolute; opacity: 0; width: 0; height: 0; }
.pg-checkbox-box {
  width: 16px; height: 16px; flex-shrink: 0;
  border: 1px solid var(--muted2);
  border-radius: 0;
  background: var(--card);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.pg-checkbox:checked + .pg-checkbox-box { background: var(--blue); border-color: var(--blue); }
.pg-checkbox:checked + .pg-checkbox-box::after {
  content: ''; width: 9px; height: 5px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translateY(-1px); display: block;
}
.pg-checkbox:focus-visible + .pg-checkbox-box { outline: 2px solid var(--blue); outline-offset: 1px; }

.pg-checkbox-text { flex: 1; font-size: 0.98rem; color: inherit; line-height: 1.4; }
.pg-filter-count, .facet-count {
  font-family: var(--font-mono);
  color: var(--muted2);
  font-size: 0.66rem;
  margin-left: 0.25rem;
}

.facets-container .facet-title {
  font-family: var(--font-mono);
  font-weight: 400;
  color: var(--ink);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 0.75rem;
}

/* ── Listing header & toolbar ── */
.pg-listing-header { margin-bottom: 2rem; padding-bottom: clamp(32px, 5vw, 56px); border-bottom: 1px solid var(--hair); }
.pg-listing-header__title {
  font-family: var(--font-fine);
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--ink);
  padding-bottom: 0;
  margin-bottom: 0.75rem;
}
.pg-listing-header__title::after { content: none; }
.pg-listing-header__desc {
  color: var(--muted);
  font-family: var(--font-text);
  font-size: 1.16rem;
  line-height: 1.55;
  max-width: 58ch;
}

.pg-listing-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
  padding: 0 0 1rem;
  background: transparent;
  border-bottom: 1px solid var(--hair);
  border-radius: 0;
  box-shadow: none;
}
.pg-listing-toolbar__count {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  font-weight: 400;
}
.pg-listing-toolbar__right { display: flex; align-items: center; gap: 0.75rem; }

.pg-sort-form { display: flex; align-items: center; gap: 0.5rem; }
.pg-sort-form label { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; color: var(--muted); white-space: nowrap; margin: 0; }
.pg-sort-select {
  border: 1px solid var(--hair); border-radius: 0;
  padding: 0.4rem 0.75rem; font-family: var(--font-sans); font-size: 0.85rem;
  background: var(--card); cursor: pointer; transition: border-color 0.2s;
}
.pg-sort-select:focus { border-color: var(--blue); outline: none; }

.pg-view-toggle { display: flex; gap: 0.25rem; }
.pg-view-btn {
  background: none; border: 1px solid var(--hair); border-radius: 0;
  padding: 0.4rem; cursor: pointer; color: var(--muted);
  display: flex; align-items: center; transition: all 0.2s;
}
.pg-view-btn.active, .pg-view-btn:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

.pg-btn-filter-toggle {
  display: flex; align-items: center; gap: 0.4rem;
  background: none; border: 1px solid var(--ink);
  color: var(--ink); border-radius: 0;
  font-family: var(--font-sans); font-size: 0.85rem; font-weight: 600;
  padding: 0.45rem 0.95rem; cursor: pointer; transition: all 0.2s;
}
.pg-btn-filter-toggle:hover { background: var(--ink); color: #fff; }

/* Active filter pills */
.pg-active-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-bottom: 0.75rem; }
.pg-active-filters__label { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.pg-active-filter-tag {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: transparent; border: 1px solid var(--hair);
  color: var(--ink); font-family: var(--font-mono); font-size: 0.62rem;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 0.25rem 0.6rem; border-radius: 0; text-decoration: none; transition: all 0.2s;
}
.pg-active-filter-tag:hover { border-color: var(--blue); color: var(--blue); }

/* ── Product grid (hairline grid) ── */
/* ── Product grid — hairline-divided editorial cells (exact paygasus-payment-v02 design) ── */
.pg-products-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  list-style: none; padding: 0; margin: 0;
  background: var(--hair2); border: 1px solid var(--hair2);
}
@media (min-width: 560px) { .pg-products-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1240px) { .pg-products-grid { grid-template-columns: repeat(3, 1fr); } }
.pg-products-grid.list-view { grid-template-columns: 1fr; }
.pg-products-grid > li { display: flex; }

/* ── Product card cell ── */
.pg-product-card {
  position: relative; display: flex; flex-direction: column;
  height: 100%; width: 100%;
  background: #fff; padding: 1.5rem; border: 0;
  transition: box-shadow 0.3s var(--ease), z-index 0s;
}
.pg-product-card:hover { z-index: 1; box-shadow: 0 14px 34px -20px rgba(17, 17, 16, 0.22); }

.pg-card__media-link { display: block; }
.pg-card__media {
  position: relative; display: grid; place-items: center;
  aspect-ratio: 4 / 3; width: 100%;
  background: #FAFAFA; border: 1px solid var(--hair2); overflow: hidden;
}
.pg-card__media img { width: 100%; height: 100%; object-fit: contain; padding: 8%; mix-blend-mode: multiply; transition: transform 0.6s var(--ease); }
.pg-product-card:hover .pg-card__media img { transform: scale(1.04); }
.pg-card__slot { font-family: var(--font-mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted2); }

.pg-card__meta { margin-top: 1.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.pg-card__eyebrow { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--muted); }
.pg-card__chip { display: inline-block; padding: 0.12rem 0.5rem; font-family: var(--font-mono); font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.12em; }
.pg-card__chip--badge { border: 1px solid var(--blue); color: var(--blue); }
.pg-card__chip--member { border: 1px solid var(--muted2); color: var(--muted); }

.pg-card__name { margin: 0.5rem 0 0; font-family: var(--font-serif); font-size: 1.4rem; font-weight: 500; line-height: 1.1; letter-spacing: -0.01em; }
.pg-card__name a { color: var(--ink); text-decoration: none; transition: color 0.2s; }
.pg-card__name a:hover { color: var(--blue); }

.pg-card__desc { margin: 0.5rem 0 0; font-family: var(--font-text); font-size: 0.98rem; line-height: 1.5; color: var(--body); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.pg-card__foot { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--hair2); display: flex; align-items: flex-end; justify-content: space-between; gap: 0.75rem; }
.pg-card__priceblock { min-width: 0; }
.pg-card__price { font-family: var(--font-fine); font-size: 1.7rem; line-height: 1; color: var(--ink); }
.pg-card__price .pg-card__was { font-family: var(--font-text); font-size: 1rem; color: var(--muted2); text-decoration: line-through; margin-left: 0.4rem; }
.pg-card__price .pg-card__was--lead { margin-left: 0; margin-right: 0.45rem; }
.pg-card__gateprice { font-family: var(--font-serif); font-size: 1.05rem; font-weight: 500; line-height: 1.15; color: var(--ink); }
.pg-card__gatesub { margin-top: 0.25rem; font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--blue); }

.pg-card__actions { display: flex; gap: 0.5rem; flex-shrink: 0; }
.pg-card__details { display: inline-flex; align-items: center; border: 1px solid var(--hair); color: var(--ink); background: transparent; font-family: var(--font-sans); font-size: 0.875rem; font-weight: 500; text-decoration: none; padding: 0.5rem 0.75rem; transition: border-color 0.2s; white-space: nowrap; }
.pg-card__details:hover { border-color: var(--ink); }
.pg-card__add { display: inline-flex; align-items: center; border: 0; background: var(--ink); color: #fff; font-family: var(--font-sans); font-size: 0.875rem; font-weight: 500; padding: 0.5rem 0.85rem; cursor: pointer; transition: background-color 0.2s; white-space: nowrap; }
.pg-card__add:hover { background: var(--ink-hover); }
.pg-card__add.is-added { background: var(--green); }
.pg-card__add--unlock { background: var(--ink); text-decoration: none; }
.pg-card__add--unlock:hover { background: var(--ink-hover); }

.pg-product-card__img-wrap {
  position: relative;
  display: block;
  background-color: var(--paper);
  background-image: repeating-linear-gradient(135deg, rgba(17,17,16,0.05) 0 1px, transparent 1px 11px);
  aspect-ratio: 4/3;
  overflow: hidden;
  border: 1px solid var(--hair);
}
.pg-product-card__img-wrap img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.45s ease; mix-blend-mode: multiply; }
.pg-product-card:hover .pg-product-card__img-wrap img { transform: scale(1.05); }

.pg-product-card__flags {
  position: absolute; top: 0.65rem; left: 0.65rem;
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 0.3rem; z-index: 2;
}
.pg-product-card__flag {
  font-family: var(--font-mono);
  font-size: 0.58rem; font-weight: 400; text-transform: uppercase;
  letter-spacing: 0.12em; padding: 2px 8px; border-radius: 0;
  background: var(--card); border: 1px solid var(--blue); color: var(--blue);
}
.pg-flag--new { background: var(--card); border-color: var(--ink); color: var(--ink); }
.pg-flag--on-sale { border-color: var(--green); color: var(--green); }
.pg-flag--out-of-stock { border-color: var(--muted2); color: var(--muted2); }

.pg-product-card__body { padding: 1.25rem 0 0; flex: 1; display: flex; flex-direction: column; gap: 0; }

.pg-product-card__subtitle {
  order: -1;
  font-family: var(--font-mono);
  font-size: 0.7rem; font-weight: 400; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.18em; margin: 0 0 0.5rem;
}

.pg-product-card__title { margin: 0; }
.pg-product-card__title a {
  font-family: var(--font-serif);
  font-size: 1.4rem; font-weight: 500;
  color: var(--ink); text-decoration: none;
  line-height: 1.1;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pg-product-card__title a:hover { color: var(--blue); }

.pg-product-card__price {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem;
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--hair2);
  order: 5;
}
.pg-price--current { font-family: var(--font-fine); font-size: 1.7rem; font-weight: 400; line-height: 1; color: var(--ink); }
.pg-price--regular { font-family: var(--font-sans); font-size: 0.82rem; color: var(--muted2); text-decoration: line-through; }
.pg-price--badge {
  font-family: var(--font-mono); font-size: 0.6rem; font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.1em;
  background: transparent; border: 1px solid var(--green); color: var(--green);
  padding: 1px 6px; border-radius: 0;
}

/* Spec bullets */
.pg-product-card__specs { list-style: none; padding: 0; margin: 0.85rem 0 0; display: flex; flex-direction: column; gap: 0.3rem; }
.pg-product-card__spec { display: flex; align-items: flex-start; gap: 0.45rem; font-family: var(--font-text); font-size: 0.92rem; color: var(--body); line-height: 1.4; }
.pg-spec-icon {
  flex-shrink: 0; margin-top: 0.5em;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--blue);
  display: block;
}
.pg-spec-icon svg { display: none; }
.pg-spec-label { font-weight: 500; color: var(--ink); margin-right: 0.15rem; }
.pg-spec-value { color: var(--muted); }

/* CTA */
.pg-product-card__cta { margin-top: 1.25rem; padding-top: 0; display: flex; gap: 0.5rem; }
.pg-btn-view-details {
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: var(--ink); color: #fff;
  font-family: var(--font-sans); font-size: 0.85rem; font-weight: 600; letter-spacing: 0;
  padding: 0.6rem 1.25rem; border-radius: 0;
  text-decoration: none; transition: all 0.2s;
  flex: 1; justify-content: center;
}
.pg-btn-view-details:hover { background: var(--ink-hover); color: #fff; }
.pg-arrow { display: flex; align-items: center; transition: transform 0.2s; }
.pg-btn-view-details:hover .pg-arrow { transform: translateX(3px); }

/* Empty state */
.pg-empty-state {
  text-align: center; padding: 4rem 2rem;
  background: var(--bg); border: 1px solid var(--hair); border-radius: 0;
  color: var(--muted);
}
.pg-empty-state svg { margin-bottom: 1rem; color: var(--muted2); }
.pg-empty-state p { font-family: var(--font-text); font-size: 1.1rem; margin-bottom: 1.25rem; }

/* List view */
.pg-products-grid.list-view .pg-product-card { flex-direction: row; gap: 1.5rem; }
.pg-products-grid.list-view .pg-product-card__img-wrap { width: 240px; flex-shrink: 0; aspect-ratio: 4/3; }
.pg-products-grid.list-view .pg-product-card__body { padding: 0; }
.pg-products-grid.list-view .pg-btn-view-details { flex: none; }

/* =========================================================
   Phase 2 — Exact prototype catalog (hero, faceted sidebar, grid)
   ========================================================= */
.pg-shop { display: block; }

/* Hero header */
.pg-shop-hero { padding: clamp(40px,6vw,88px) 0 clamp(36px,5vw,60px); border-bottom: 1px solid var(--hair); }
.pg-shop-hero .eyebrow { display: inline-flex; margin-bottom: 1.5rem; }
.pg-shop-hero__title {
  max-width: 16ch;
  font-family: var(--font-fine);
  font-size: clamp(2.6rem, 6.5vw, 5rem);
  font-weight: 400; line-height: 1.0; letter-spacing: -0.025em; color: var(--ink); margin: 0;
}
.pg-shop-hero__lede {
  max-width: 50ch; margin: 1.5rem 0 0;
  font-family: var(--font-text); font-size: 1.15rem; line-height: 1.55; color: var(--muted);
}

/* 2-column */
.pg-shop-layout {
  display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem,3.5vw,3rem);
  padding-top: 1.5rem;
}
@media (min-width: 900px) { .pg-shop-layout { grid-template-columns: 230px 1fr; } }

/* Sidebar */
.pg-shop-side { align-self: start; }
@media (min-width: 900px) { .pg-shop-side { position: sticky; top: 92px; } }
.pg-shop-side__head { display: flex; align-items: center; justify-content: space-between; }
.pg-clear-all {
  background: none; border: none; cursor: pointer; padding: 0;
  font-family: var(--font-mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--blue);
}
.pg-clear-all:hover { text-decoration: underline; }

.pg-facet-group { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--hair); }
.pg-facet-group:first-of-type { margin-top: 1rem; }
.pg-facet-group__title { display: block; color: var(--ink) !important; margin-bottom: 0.65rem; }

.pg-cat-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.35rem 0; font-family: var(--font-text); font-size: 1.02rem; color: var(--muted);
}
.pg-cat-link:hover { color: var(--ink); }
.pg-cat-link.is-active { color: var(--ink); }
.pg-cat-link__tick { font-family: var(--font-mono); font-size: 0.62rem; color: var(--blue); }

.pg-facet-row {
  display: flex; align-items: center; gap: 0.65rem; padding: 0.3rem 0; cursor: pointer;
  font-family: var(--font-text); font-size: 0.98rem; color: var(--body);
  /* override the global `label` rule (form-field labels) — facet options use natural case */
  text-transform: none; letter-spacing: normal;
}
.pg-facet-row__label { text-transform: none; letter-spacing: normal; }
.pg-facet-row:hover { color: var(--ink); }
.pg-facet-cb { position: absolute; opacity: 0; width: 0; height: 0; }
.pg-facet-cb:checked + .pg-checkbox-box { background: var(--blue); border-color: var(--blue); }
.pg-facet-cb:checked + .pg-checkbox-box::after {
  content: ''; width: 9px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translateY(-1px); display: block;
}
.pg-facet-cb:focus-visible + .pg-checkbox-box { outline: 2px solid var(--blue); outline-offset: 1px; }
.pg-facet-row__label { flex: 1; }
.pg-facet-row__count { font-family: var(--font-mono); font-size: 0.66rem; color: var(--muted2); }

/* Result bar */
.pg-shop-resultbar {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap;
  margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--hair);
}
.pg-shop-resultbar__count { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.pg-shop-resultbar__pills { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.4rem; }
.pg-no-match { padding: 4rem 0; text-align: center; font-family: var(--font-text); font-size: 1.1rem; color: var(--muted); }

/* Image placeholder label (hatch slot) */
.pg-product-card__img-wrap { display: flex; align-items: center; justify-content: center; }
.pg-imgslot-label { font-family: var(--font-mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted2); }

/* Card body (new structure) */
.pg-product-card__meta { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.pg-product-card__meta .pg-product-card__subtitle { margin: 0; }
.pg-product-card__blurb {
  margin: 0.5rem 0 0; font-family: var(--font-text); font-size: 0.98rem; line-height: 1.5; color: var(--body);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.pg-product-card__foot {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 0.75rem;
  margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--hair2);
}
.pg-product-card__priceblock { display: flex; flex-direction: column; }
.pg-product-card__unit { font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted2); margin-top: 0.25rem; }
.pg-product-card__cta { display: flex; gap: 0.5rem; margin: 0; padding: 0; }
.pg-card-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-sans); font-size: 0.85rem; font-weight: 500; border-radius: 0; cursor: pointer;
  padding: 0.5rem 0.85rem; transition: all 0.2s; text-decoration: none;
}
.pg-card-btn--ghost { border: 1px solid var(--hair); color: var(--ink); background: transparent; }
.pg-card-btn--ghost:hover { border-color: var(--ink); }
.pg-card-btn--solid { border: 1px solid var(--ink); background: var(--ink); color: #fff; }
.pg-card-btn--solid:hover { background: var(--ink-hover); border-color: var(--ink-hover); }
.pg-card-btn.is-added { background: var(--green); border-color: var(--green); color: #fff; }

/* ---------------------------------------------------------
   Footer (editorial dark block)
   --------------------------------------------------------- */
#footer { background: var(--inkblock); color: rgba(255,255,255,0.7); margin-top: 6rem; padding: 3.5rem 1.5rem 2.5rem; }
.footer-inner { max-width: var(--shell); margin: 0 auto; display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 2.5rem; }
.footer-brand p { color: rgba(255,255,255,0.6); font-family: var(--font-text); font-size: 1.02rem; line-height: 1.6; margin-top: 0.75rem; max-width: 52ch; }
.footer-col-title { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.18em; color: rgba(255,255,255,0.4); margin-bottom: 1rem; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 0.5rem; }
.footer-links a { color: rgba(255,255,255,0.6); font-family: var(--font-sans); font-size: 0.9rem; }
.footer-links a:hover { color: #fff; }
.footer-divider { border: none; border-top: 1px solid rgba(255,255,255,0.12); max-width: var(--shell); margin: 2.5rem auto 1.5rem; }
.footer-bottom { max-width: var(--shell); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.4); }

/* =========================================================
   Phase 4 — Slide-in cart drawer
   ========================================================= */
.pg-drawer-overlay { position: fixed; inset: 0; z-index: 1090; background: rgba(17,17,16,0.4); }
.pg-drawer {
  position: fixed; right: 0; top: 0; z-index: 1100;
  display: flex; flex-direction: column;
  height: 100%; width: 100%; max-width: 440px;
  background: var(--bg); box-shadow: -8px 0 40px rgba(17,17,16,0.18);
  transform: translateX(100%); transition: transform 0.3s ease;
}
.pg-drawer.open { transform: translateX(0); }
.pg-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--hair); }
.pg-drawer__title { font-family: var(--font-fine); font-size: 1.5rem; color: var(--ink); }
.pg-drawer__close { display: grid; place-items: center; height: 36px; width: 36px; border: 1px solid var(--hair); background: transparent; color: var(--ink); cursor: pointer; transition: all 0.2s; }
.pg-drawer__close:hover { background: var(--ink); color: #fff; }
.pg-drawer__body { flex: 1; overflow-y: auto; padding: 0 1.5rem; }
.pg-drawer__foot { border-top: 1px solid var(--hair); padding: 1.25rem 1.5rem; }

/* drawer line */
.pg-dline { display: flex; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--hair); }
.pg-dline__thumb { width: 72px; height: 72px; flex-shrink: 0; border: 1px solid var(--hair);
  background-color: var(--paper);
  display: flex; align-items: center; justify-content: center; }
.pg-dline__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 6px; mix-blend-mode: multiply; }
.pg-dline__main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.pg-dline__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.pg-dline__name { font-family: var(--font-serif); font-size: 1.05rem; font-weight: 500; color: var(--ink); line-height: 1.2; text-decoration: none; }
.pg-dline__name:hover { color: var(--blue); }
.pg-dline__remove { background: none; border: none; cursor: pointer; padding: 0; font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.pg-dline__remove:hover { color: var(--blue); }
.pg-dline__row { margin-top: auto; padding-top: 0.75rem; display: flex; align-items: center; justify-content: space-between; }
.pg-dline__price { font-family: var(--font-fine); font-size: 1.2rem; color: var(--ink); }
.pg-dline .pg-qty { display: flex; align-items: center; }
.pg-dline .pg-qty__btn { display: grid; place-items: center; height: 32px; width: 32px; border: 1px solid var(--hair); background: #fff; color: var(--ink); cursor: pointer; transition: all 0.15s; }
.pg-dline .pg-qty__btn:hover { background: var(--ink); color: #fff; }
.pg-dline .pg-qty__val { display: grid; place-items: center; height: 32px; width: 40px; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); font-family: var(--font-mono); font-size: 0.85rem; color: var(--ink); }

/* drawer foot */
.pg-drawer__subtotal { display: flex; align-items: center; justify-content: space-between; }
.pg-drawer__subtotal .lbl { font-family: var(--font-text); font-size: 1rem; color: var(--body); }
.pg-drawer__subtotal .amt { font-family: var(--font-fine); font-size: 1.3rem; color: var(--ink); }
.pg-drawer__note { margin: 0.5rem 0 0; font-family: var(--font-text); font-size: 0.85rem; color: var(--muted); }
.pg-dline__price .pg-dline__was { font-family: var(--font-text); font-size: 0.82rem; color: var(--muted2); text-decoration: line-through; margin-right: 0.4rem; }
.pg-drawer__memberrow { display: flex; align-items: center; justify-content: space-between; margin-top: 0.4rem; font-family: var(--font-text); font-size: 0.92rem; color: var(--green); }
.pg-drawer__memberrow .amt { font-family: var(--font-text); }
.pg-drawer__subtotal--final { margin-top: 0.4rem; padding-top: 0.4rem; border-top: 1px solid var(--hair2); }
.pg-drawer__actions { margin-top: 1rem; display: grid; gap: 0.5rem; }
.pg-drawer__btn { display: block; text-align: center; padding: 0.85rem 1.25rem; font-family: var(--font-sans); font-size: 0.9rem; font-weight: 600; border-radius: 0; text-decoration: none; transition: all 0.2s; cursor: pointer; }
.pg-drawer__btn--solid { background: var(--ink); color: #fff; border: 1px solid var(--ink); }
.pg-drawer__btn--solid:hover { background: var(--ink-hover); border-color: var(--ink-hover); }
.pg-drawer__btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.pg-drawer__btn--ghost:hover { background: var(--ink); color: #fff; }

/* drawer empty */
.pg-drawer__empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4rem 1rem; text-align: center; }
.pg-drawer__empty-title { margin-top: 1rem; font-family: var(--font-fine); font-size: 1.4rem; color: var(--ink); }
.pg-drawer__empty-text { margin-top: 0.5rem; font-family: var(--font-text); font-size: 0.98rem; color: var(--muted); }
.pg-drawer__empty .pg-drawer__btn { margin-top: 1.5rem; }
.pg-drawer__loading { padding: 3rem 0; text-align: center; font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted2); }

/* ---------------------------------------------------------
   Back to top
   --------------------------------------------------------- */
#back-to-top, #backToTop {
  position: fixed; bottom: 1.5rem; right: 1.5rem;
  background: var(--ink); color: #fff; border: none; border-radius: 0;
  width: 44px; height: 44px; font-size: 1.2rem; cursor: pointer;
  display: none; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18); transition: background 0.2s, transform 0.2s;
  z-index: var(--z-modal);
}
#back-to-top:hover, #backToTop:hover { background: var(--blue); transform: translateY(-2px); }
#back-to-top.visible, #backToTop.visible { display: flex; }

/* ---------------------------------------------------------
   Mobile sidebar overlay
   --------------------------------------------------------- */
@media (max-width: 991px) {
  .layout-columns { flex-direction: column; }
  .pg-sidebar {
    position: fixed; top: 0; left: -100%; bottom: 0;
    width: min(320px, 88vw); z-index: 1050;
    background: var(--bg); border-radius: 0;
    box-shadow: 4px 0 24px rgba(0,0,0,.15);
    transition: left 0.3s ease; max-height: 100vh;
    padding: 1.5rem; overflow-y: auto;
  }
  .pg-sidebar.open { left: 0; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

@media (max-width: 640px) {
  .footer-inner { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 0.5rem; align-items: flex-start; }
}

/* ---------------------------------------------------------
   Home product sections — Popular / New / Best Sellers
   Unified editorial rhythm (ps_featuredproducts, ps_newproducts,
   ps_bestsellers theme overrides all use .pg-home-products).
   --------------------------------------------------------- */
.pg-home-products {
  padding-block: clamp(1.4rem, 2.6vw, 2.2rem);
  border-top: 1px solid var(--hair2);
}
.pg-home-products:first-of-type { border-top: 0; padding-top: clamp(0.5rem, 1.2vw, 1rem); }

.pg-home-products__head {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}
.pg-home-products__head .eyebrow { display: inline-flex; margin: 0; }

.pg-home-products .pg-section-title {
  margin: 0;
  font-family: "Tiempos Fine", "Tiempos Headline", Georgia, serif;
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  font-weight: 400;
  letter-spacing: -0.022em;
  line-height: 1.04;
  text-transform: none;
  color: var(--ink);
}

/* All-products / all-new / all-best link */
.pg-home-products .pg-all-products-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: clamp(1rem, 2vw, 1.4rem);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--blue);
  text-decoration: none;
  transition: gap 0.2s var(--ease), color 0.2s var(--ease);
}
.pg-home-products .pg-all-products-link:hover { color: var(--ink); gap: 0.85rem; }
.pg-home-products .pg-all-products-link span { transition: transform 0.2s var(--ease); }
.pg-home-products .pg-all-products-link:hover span { transform: translateX(2px); }

/* =========================================================
   MY ACCOUNT — editorial theme
   Landing (.pg-account*) + classic subpages (history,
   order-detail, addresses, identity, vouchers, slips,
   returns) scoped by page_name body id.
   ========================================================= */
:root { --acct-line: rgba(17,17,16,0.14); }

/* ---- Landing ---- */
.pg-account { padding-block: clamp(1rem, 2vw, 1.75rem) clamp(2.5rem, 5vw, 4rem); }
.pg-account__head { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.pg-account__head .eyebrow { display: inline-flex; margin: 0; }
.pg-account .pg-section-title {
  margin: 0; font-family: "Tiempos Fine","Tiempos Headline",Georgia,serif;
  font-size: clamp(1.9rem,3.6vw,2.7rem); font-weight: 400; letter-spacing: -0.022em;
  line-height: 1.04; color: var(--ink);
}
.pg-account-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1px; background: var(--acct-line); border: 1px solid var(--acct-line);
}
.pg-account-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem;
  background: #fff; padding: 1.6rem 1.5rem; min-height: 150px;
  text-decoration: none; color: var(--ink); transition: background 0.18s var(--ease);
}
.pg-account-card:hover { background: #FAFAF8; }
.pg-account-card svg { width: 26px; height: 26px; color: var(--ink); margin-bottom: 0.5rem; }
.pg-account-card__title { font-family: var(--font-serif); font-size: 1.18rem; font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; }
.pg-account-card:hover .pg-account-card__title { color: var(--blue); }
.pg-account-card__sub { font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }

/* ---- Shared subpage chrome (scoped to account pages) ---- */
#identity, #addresses, #address, #history, #order-detail,
#order-slip, #discount, #order-follow {
  --acct-line: rgba(17,17,16,0.14);
}
#identity .page-content, #addresses .page-content, #address .page-content,
#history .page-content, #order-detail .page-content, #order-slip .page-content,
#discount .page-content, #order-follow .page-content { padding-block: 0.5rem 1rem; }

/* page title + intro */
#identity h1, #addresses h1, #address h1, #history h1, #order-detail h1,
#order-slip h1, #discount h1, #order-follow h1 {
  font-family: "Tiempos Fine","Tiempos Headline",Georgia,serif;
  font-weight: 400; letter-spacing: -0.02em; font-size: clamp(1.7rem,3.2vw,2.4rem);
  color: var(--ink); margin: 0 0 1.25rem;
}
#history h6, #order-detail h6, #order-slip h6, #discount h6, #order-follow h6 {
  font-family: var(--font-text); font-size: 1rem; font-weight: 400; color: var(--muted);
  margin: 0 0 1.5rem; text-transform: none; letter-spacing: 0;
}

/* boxes → flat hairline cards */
#identity .box, #addresses .box, #address .box, #history .box, #order-detail .box,
#order-slip .box, #discount .box, #order-follow .box,
#order-detail #order-infos .box, #order-detail #order-history.box {
  background: #fff; border: 1px solid var(--acct-line); border-radius: 0;
  box-shadow: none; padding: 1.5rem; margin-bottom: 1.25rem;
}
#order-detail .box h3, #order-detail .box h4, #addresses .box h4 {
  font-family: var(--font-serif); font-weight: 500; letter-spacing: -0.01em;
  font-size: 1.15rem; margin: 0 0 0.75rem; color: var(--ink);
}
#order-detail address, #addresses address {
  font-family: var(--font-text); font-style: normal; color: var(--body, var(--muted));
  line-height: 1.6; font-size: 0.98rem;
}

/* tables → editorial hairline, tabular numerals */
#history .table, #order-detail .table, #order-slip .table, #discount .table {
  width: 100%; border-collapse: collapse; background: #fff;
  border: 1px solid var(--acct-line); margin: 0;
  font-variant-numeric: tabular-nums;
}
#history .table th, #order-detail .table th, #order-slip .table th, #discount .table th {
  background: #FAFAF8; border: 0; border-bottom: 1px solid var(--acct-line);
  padding: 0.85rem 1rem; text-align: left;
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); white-space: nowrap;
}
#history .table td, #order-detail .table td, #order-slip .table td, #discount .table td {
  border: 0; border-bottom: 1px solid var(--hair2);
  padding: 0.95rem 1rem; vertical-align: middle;
  font-family: var(--font-text); font-size: 0.96rem; color: var(--ink);
}
#history .table tbody tr:last-child td, #order-detail .table tbody tr:last-child td { border-bottom: 0; }
#history .table th[scope="row"] { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.04em; color: var(--ink); }
#history .table .text-xs-right, #order-detail .table .text-xs-right,
#history .table td.text-sm-center, #order-detail .table td.text-sm-center { text-align: right; }
/* kill bootstrap striping/bordering remnants */
#history .table-striped tbody tr:nth-of-type(odd),
#order-detail .table-striped tbody tr:nth-of-type(odd) { background: transparent; }
#history .table-bordered td, #history .table-bordered th,
#order-detail .table-bordered td, #order-detail .table-bordered th { border-left: 0; border-right: 0; }

/* status pill → squared editorial chip (keep status color via inline bg) */
#history .label-pill, #order-detail .label-pill {
  display: inline-block; border-radius: 999px; padding: 0.2rem 0.7rem;
  font-family: var(--font-mono); font-size: 0.6rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em; line-height: 1.4;
}

/* invoice / details / reorder links + material icons in table */
#history .order-actions a, #order-detail .order-actions a {
  display: inline-block; margin-right: 0.75rem;
  font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--blue); text-decoration: none;
}
#history .order-actions a:hover { color: var(--ink); }
#history .table .material-icons, #order-detail .material-icons { font-size: 20px; vertical-align: middle; color: var(--ink); }

/* buttons */
#identity .btn-primary, #addresses .btn-primary, #address .btn-primary,
#order-detail .button-primary, #order-detail .btn-primary, #order-follow .btn-primary,
#discount .btn-primary {
  background: var(--ink); border: 1px solid var(--ink); color: #fff; border-radius: 0;
  font-family: var(--font-sans, "IBM Plex Sans", system-ui, sans-serif);
  font-weight: 600; padding: 0.7rem 1.4rem; transition: background 0.2s var(--ease);
  text-decoration: none; display: inline-block;
}
#identity .btn-primary:hover, #addresses .btn-primary:hover, #address .btn-primary:hover,
#order-detail .button-primary:hover, #order-detail .btn-primary:hover { background: #33312c; border-color: #33312c; color: #fff; }

/* empty-state alert → editorial note */
#history .alert-info, #order-slip .alert-info, #discount .alert-info, #order-follow .alert-info,
#addresses .alert-info {
  background: #FAFAF8; border: 1px solid var(--acct-line); border-radius: 0;
  color: var(--muted); font-family: var(--font-text); font-size: 1rem;
  padding: 1.5rem; text-align: left;
}

/* footer "Back to your account" / "Home" links */
.account-link {
  display: inline-flex; align-items: center; gap: 0.4rem; margin-right: 1.5rem;
  font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--muted); text-decoration: none;
}
.account-link:hover { color: var(--ink); }
.account-link .material-icons { font-size: 18px; }