/* ============================================================
   layout.css — page-level patterns for Logitech Pakistan mockups.
   Header, mega menu, footer, hero, feature tiles, category grid,
   product carousel, newsletter CTA. Uses tokens.css + components.css.
   ============================================================ */

/* === Announcement bar ============================================ */
.lpk-announcement {
  background: var(--color-bg-inverse);
  color: white;
  font-size: var(--fs-caption);
  text-align: center;
  padding: var(--space-2) var(--space-4);
  letter-spacing: 0.02em;
  height: var(--announcement-height);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lpk-announcement__inner {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lpk-announcement__sep {
  opacity: 0.4;
}

/* === Header ====================================================== */
.lpk-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--color-bg-page);
  border-bottom: 1px solid var(--color-border-subtle);
}

.lpk-header__main {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: var(--header-height-mobile);
  max-width: var(--container-default);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

@media (min-width: 1024px) {
  .lpk-header__main { height: var(--header-height-desktop); gap: var(--space-6); }
}

.lpk-header__burger {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  width: 44px;
  height: 44px;
  margin-left: -10px;
  color: var(--color-text-primary);
  flex-shrink: 0;
}

.lpk-header__burger svg {
  width: 26px;
  height: 26px;
}

@media (min-width: 1024px) {
  .lpk-header__burger { display: none; }
}

/* Hide wishlist icon on mobile — moved to drawer to free header space. */
.lpk-header__icon-btn--wishlist { display: none; }
@media (min-width: 1024px) {
  .lpk-header__icon-btn--wishlist { display: flex; }
}

.lpk-header__logo {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  flex-shrink: 0;
  text-decoration: none;
  color: var(--color-text-primary);
}

.lpk-header__logo img {
  height: 100%;
  width: auto;
  max-height: 32px;
}

/* "PAKISTAN" wordmark beside logo — tight composite mark. */
.lpk-header__country {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  line-height: 1;
  padding-left: 4px;
  border-left: 1.5px solid var(--color-border-default);
  color: var(--color-text-primary);
  white-space: nowrap;
}

@media (min-width: 1024px) {
  .lpk-header__logo { height: 32px; }
  .lpk-header__country { font-size: 13px; padding-left: 6px; }
}

.lpk-header__search {
  flex: 1;
  display: none;
  position: relative;
  /* No max-width — let the search fill all available space between logo and icons */
}

@media (min-width: 768px) {
  .lpk-header__search { display: block; }
}

.lpk-header__search input {
  width: 100%;
  padding: 10px 16px 10px 40px;
  font-size: var(--fs-body);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
  transition: background-color var(--motion-fast), border-color var(--motion-fast);
}

.lpk-header__search input:focus {
  background: white;
  border-color: var(--color-text-primary);
  outline: none;
}

.lpk-header__search-icon {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  color: var(--color-text-secondary);
  pointer-events: none;
}

/* === Mobile search row (visible only <768px) =====================
   Sits below the sticky header in normal flow. Scrolls away with the
   page; the header stays pinned. Restores when user scrolls back to top. */
.lpk-mobile-search {
  display: block;
  background: var(--color-bg-page);
  border-bottom: 1px solid var(--color-border-subtle);
  padding: 8px var(--gutter);
}

@media (min-width: 768px) {
  .lpk-mobile-search { display: none; }
}

.lpk-mobile-search__inner {
  position: relative;
}

.lpk-mobile-search__icon {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  color: var(--color-text-secondary);
  pointer-events: none;
  display: flex;
}

.lpk-mobile-search input {
  width: 100%;
  padding: 10px 16px 10px 40px;
  font-size: var(--fs-body);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
  transition: background-color var(--motion-fast), border-color var(--motion-fast);
}

.lpk-mobile-search input:focus {
  background: white;
  border-color: var(--color-text-primary);
  outline: none;
}

.lpk-header__icons {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

@media (min-width: 768px) {
  .lpk-header__icons { gap: var(--space-3); margin-left: 0; }
}

.lpk-header__icon-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-text-primary);
  position: relative;
  border-radius: var(--radius-md);
  transition: background-color var(--motion-fast);
}

.lpk-header__icon-btn:hover {
  background: var(--color-bg-surface);
}

.lpk-header__cart-count {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--color-text-primary);
  color: white;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: var(--fw-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* === Category nav (below header main row) ======================== */
.lpk-nav {
  display: none;
  position: relative;          /* anchor for absolutely-positioned mega menu (so it spans full viewport width) */
  border-top: 1px solid var(--color-border-subtle);
  background: var(--color-bg-page);
}

@media (min-width: 1024px) {
  .lpk-nav {
    display: block;
  }
}

.lpk-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  max-width: var(--container-default);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 48px;
  overflow-x: auto;
}

.lpk-nav__item {
  /* No position:relative — mega menu anchors to .lpk-nav so it spans full viewport */
}

.lpk-nav__link {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 var(--space-3);
  color: var(--color-text-primary);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  transition: color var(--motion-fast);
}

.lpk-nav__link:hover {
  color: var(--color-text-primary);
}

.lpk-nav__link::after {
  content: '';
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: 0;
  height: 2px;
  background: var(--color-text-primary);
  transform: scaleX(0);
  transition: transform var(--motion-fast);
  transform-origin: left;
}

.lpk-nav__link:hover::after,
.lpk-nav__item.is-open .lpk-nav__link::after,
.lpk-nav__link[aria-current="page"]::after {
  transform: scaleX(1);
}

.lpk-nav__link--accent { color: var(--color-error); font-weight: var(--fw-semibold); }

/* === Mega menu (dropdown panel) ================================== */
.lpk-mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-bg-page);
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
  box-shadow: var(--shadow-md);
  display: none;
  z-index: var(--z-dropdown);
}

.lpk-nav__item.is-open .lpk-mega { display: block; }

.lpk-mega__inner {
  max-width: var(--container-default);
  margin: 0 auto;
  padding: var(--space-8) var(--gutter);
  display: grid;
  grid-template-columns: 220px 1fr 320px;
  gap: var(--space-8);
}

.lpk-mega__col-title {
  font-size: var(--fs-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-3);
}

.lpk-mega__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.lpk-mega__list a {
  font-size: var(--fs-body);
  color: var(--color-text-primary);
  text-decoration: none;
  transition: color var(--motion-fast);
}

.lpk-mega__list a:hover { color: var(--color-accent-mint-dark); }

.lpk-mega__featured {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.lpk-mega__feature-card {
  text-decoration: none;
  color: inherit;
}

.lpk-mega__feature-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--color-bg-surface);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
}

.lpk-mega__feature-card-title {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  line-height: 1.3;
}

.lpk-mega__feature-card-price {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
  margin-top: 2px;
}

.lpk-mega__banner {
  background: var(--color-bg-inverse);
  color: white;
  padding: var(--space-6);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 200px;
  position: relative;
  overflow: hidden;
}

.lpk-mega__banner-eyebrow {
  font-size: var(--fs-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--color-accent-mint);
  margin-bottom: var(--space-2);
}

.lpk-mega__banner-title {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  margin-bottom: var(--space-3);
}

/* === Mobile drawer (off-canvas menu) ============================= */
.lpk-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(360px, 88vw);
  background: var(--color-bg-page);
  z-index: var(--z-modal);
  transform: translateX(-100%);
  transition: transform var(--motion-slower);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-xl);
  /* Prevent scroll chaining: rubber-banding in iOS / overscroll in Android
     stays inside the drawer instead of leaking to the page underneath. */
  overscroll-behavior: contain;
}

.lpk-drawer.is-open {
  transform: translateX(0);
}

/* === Drawer stacked-panel UX =====================================
   Root + one sub-panel per L1-with-children. Sub-panels slide in from the
   right when .lpk-drawer.is-sub-open + the target panel has .is-active.
   Matches mockups/mobile-menu-v3.html States 1 + 2 (approved 2026-05-11). */
.lpk-drawer__panels {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 0;
}

.lpk-drawer__panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-page);
  transition: transform var(--motion-slow);
}

.lpk-drawer__panel--root {
  transform: translateX(0);
  z-index: 1;
}
.lpk-drawer.is-sub-open .lpk-drawer__panel--root {
  transform: translateX(-100%);
}

.lpk-drawer__panel--sub {
  transform: translateX(100%);
  visibility: hidden;
  z-index: 2;
}
.lpk-drawer__panel--sub.is-active {
  transform: translateX(0);
  visibility: visible;
}

/* === Per-panel top bar (close / back + title) ====================== */
.lpk-drawer__top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  min-height: 60px;
  background: var(--color-bg-page);
  flex: 0 0 auto;
}
.lpk-drawer__close,
.lpk-drawer__back {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--color-text-primary);
  border-radius: var(--radius-md);
  flex-shrink: 0;
  padding: 0;
}
.lpk-drawer__close:hover,
.lpk-drawer__back:hover { background: var(--color-bg-surface); }

.lpk-drawer__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h5);
  font-weight: var(--fw-bold);
  margin: 0;
  flex: 1;
  text-align: center;
  padding-right: 40px;
}
.lpk-drawer__top--with-back .lpk-drawer__title {
  padding-right: 0;
  text-align: left;
}

/* Legacy alias — hide the old static drawer header if any old template still emits it */
.lpk-drawer__header { display: none; }

/* === Scrollable body within each panel ============================= */
.lpk-drawer__body {
  flex: 1;
  overflow-y: auto;
  background: var(--color-bg-page);
  -webkit-overflow-scrolling: touch;
}

.lpk-drawer__section-title {
  padding: var(--space-4) var(--space-4) var(--space-1);
  font-size: var(--fs-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin: 0;
}

/* === List rows ===================================================== */
.lpk-drawer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.lpk-drawer__item {
  border-bottom: 1px solid var(--color-border-subtle);
}
.lpk-drawer__item:last-child { border-bottom: none; }

.lpk-drawer__nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  min-height: 56px;
  color: var(--color-text-primary);
  text-decoration: none;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  transition: background var(--motion-fast);
}
.lpk-drawer__nav-link:active,
.lpk-drawer__nav-link:hover { background: var(--color-bg-surface); }
.lpk-drawer__nav-link-text { flex: 1; }
.lpk-drawer__nav-link-chev {
  color: var(--color-text-tertiary);
  flex-shrink: 0;
}
.lpk-drawer__nav-link--accent { color: var(--color-error); font-weight: var(--fw-semibold); }

/* View-all inline row at top of sub-panel (tinted background) */
.lpk-drawer__nav-link--view-all-top {
  background: var(--color-bg-surface);
  font-weight: var(--fw-semibold);
}
.lpk-drawer__nav-link--view-all-top:active,
.lpk-drawer__nav-link--view-all-top:hover { background: var(--color-bg-page); }
.lpk-drawer__nav-link--view-all-top .lpk-drawer__nav-link-icon {
  color: var(--color-accent-mint-dark);
  flex-shrink: 0;
}

/* === Featured products carousel (sub-panel) ======================== */
.lpk-drawer__featured {
  padding: var(--space-3) var(--space-4) var(--space-4);
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.lpk-drawer__feature-card {
  flex: 0 0 120px;
  text-decoration: none;
  color: inherit;
}
.lpk-drawer__feature-card img {
  width: 120px;
  height: 120px;
  object-fit: contain;
  background: var(--color-bg-surface);
  border-radius: var(--radius-md);
}
.lpk-drawer__feature-card-title {
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  line-height: 1.3;
  margin-top: var(--space-1);
}
.lpk-drawer__feature-card-price {
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  margin-top: 2px;
}

/* === Bottom "View all X →" black CTA =============================== */
.lpk-drawer__view-all-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: var(--space-3) var(--space-4) var(--space-4);
  padding: var(--space-3);
  background: var(--color-text-primary);
  color: #fff;
  border-radius: var(--radius-md);
  text-decoration: none;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  min-height: 44px;
}
.lpk-drawer__view-all-btn:active { background: var(--color-cta-primary-bg-hover); }

/* Drawer quicklinks — compact 4-up icon row at the bottom of the drawer. */
.lpk-drawer__quicklinks {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--color-bg-surface);
  border-top: 1px solid var(--color-border-subtle);
}

.lpk-drawer__quicklinks a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 4px;
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: 11px;
  text-align: center;
  line-height: 1.2;
  font-weight: var(--fw-medium);
}

.lpk-drawer__quicklinks a:hover { color: var(--color-text-primary); }

.lpk-drawer__quicklinks svg {
  width: 22px;
  height: 22px;
  color: var(--color-text-primary);
}

.lpk-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: calc(var(--z-modal) - 1);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-base);
}

.lpk-drawer-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* === Hero slider ================================================= */
.lpk-hero {
  background: linear-gradient(135deg, #FFFFFF 0%, #E8FFF9 100%);
  overflow: hidden;
}

.lpk-hero__inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: var(--space-12) var(--gutter);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
  min-height: 480px;
}

@media (min-width: 1024px) {
  .lpk-hero__inner {
    grid-template-columns: 1fr 1fr;
    padding: var(--space-20) var(--gutter);
    min-height: 560px;
  }
}

.lpk-hero__copy { display: flex; flex-direction: column; gap: var(--space-4); }

.lpk-hero__eyebrow {
  font-size: var(--fs-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.lpk-hero__headline {
  font-family: var(--font-heading);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: 1.05;
  letter-spacing: var(--ls-h1);
  color: var(--color-text-primary);
  margin: 0;
}

@media (min-width: 1024px) {
  .lpk-hero__headline {
    font-size: var(--fs-display);
    letter-spacing: var(--ls-display);
  }
}

.lpk-hero__sub {
  font-size: var(--fs-body-lg);
  color: var(--color-text-secondary);
  line-height: 1.5;
  max-width: 480px;
}

.lpk-hero__cta-row {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-2);
}

.lpk-hero__visual {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 560px;
  margin: 0 auto;
  width: 100%;
}

.lpk-hero__visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.lpk-hero__placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #00ECC230 0%, #00ECC2 100%);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-primary);
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  text-align: center;
  padding: var(--space-8);
}

/* Hero slide variants — Play (dark for gaming) */
.lpk-hero--play { background: var(--color-bg-inverse); color: white; }
.lpk-hero--play .lpk-hero__headline { color: white; }
.lpk-hero--play .lpk-hero__sub { color: rgba(255,255,255,0.7); }
.lpk-hero--play .lpk-hero__placeholder {
  background: linear-gradient(135deg, #00B8FC30 0%, var(--color-accent-g-blue) 100%);
}

.lpk-hero--create {
  background: linear-gradient(135deg, var(--color-bg-inverse) 0%, #1A0033 100%);
  color: white;
}
.lpk-hero--create .lpk-hero__headline { color: white; }
.lpk-hero--create .lpk-hero__sub { color: rgba(255,255,255,0.7); }

/* Hero slider dots / nav */
.lpk-hero-nav {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) 0 var(--space-6);
  background: inherit;
}

.lpk-hero-nav__dot {
  width: 32px;
  height: 4px;
  background: var(--color-border-subtle);
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color var(--motion-fast);
}

.lpk-hero-nav__dot.is-active { background: var(--color-text-primary); }

/* === Section common ============================================== */
.lpk-section {
  padding: var(--space-12) 0;
}

@media (min-width: 1024px) {
  .lpk-section { padding: var(--space-20) 0; }
}

.lpk-section--surface { background: var(--color-bg-surface); }
.lpk-section--inverse { background: var(--color-bg-inverse); color: white; }

.lpk-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
  flex-wrap: wrap;
}

.lpk-section__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  margin: 0;
}

.lpk-section__sub {
  color: var(--color-text-secondary);
  margin: var(--space-2) 0 0;
  max-width: 60ch;
}

.lpk-section--inverse .lpk-section__sub { color: rgba(255,255,255,0.7); }

.lpk-section__link {
  color: var(--color-text-primary);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  text-decoration: underline;
  text-underline-offset: 4px;
  white-space: nowrap;
}

.lpk-section--inverse .lpk-section__link { color: white; }

/* === Feature tile row (homepage — Work / Play / Create 3-up) ====== */
.lpk-feature-tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .lpk-feature-tiles { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
}

.lpk-feature-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--color-bg-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 420px;
  padding: var(--space-8);
  text-decoration: none;
  color: inherit;
  transition: transform var(--motion-base), box-shadow var(--motion-base);
}

.lpk-feature-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.lpk-feature-tile--mx {
  background: linear-gradient(135deg, #FFFFFF 0%, #E8FFF9 100%);
}

.lpk-feature-tile--gaming {
  background: linear-gradient(135deg, #000000 0%, #1A1A1A 100%);
  color: white;
}

.lpk-feature-tile--create {
  background: linear-gradient(135deg, #4A148C 0%, #1A0033 100%);
  color: white;
}

.lpk-feature-tile__eyebrow {
  display: inline-block;
  font-size: var(--fs-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  background: var(--color-accent-mint);
  color: var(--color-text-primary);
  padding: 4px 12px;
  border-radius: 9999px;
  align-self: flex-start;
}

.lpk-feature-tile--gaming .lpk-feature-tile__eyebrow {
  background: var(--color-accent-g-blue);
  color: var(--color-text-primary);
}

.lpk-feature-tile--create .lpk-feature-tile__eyebrow {
  background: white;
  color: var(--color-text-primary);
}

.lpk-feature-tile__headline {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  margin: var(--space-4) 0 var(--space-3);
  max-width: 14ch;
  letter-spacing: var(--ls-h2);
}

.lpk-feature-tile__sub {
  font-size: var(--fs-body);
  line-height: 1.5;
  opacity: 0.85;
  max-width: 26ch;
  margin-bottom: var(--space-4);
}

.lpk-feature-tile--gaming .lpk-feature-tile__sub,
.lpk-feature-tile--create .lpk-feature-tile__sub { opacity: 0.7; }

.lpk-feature-tile__cta {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  text-decoration: underline;
  text-underline-offset: 4px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.lpk-feature-tile__visual {
  position: absolute;
  right: -30px;
  bottom: -30px;
  width: 240px;
  height: 240px;
  opacity: 0.95;
  pointer-events: none;
}

.lpk-feature-tile__visual img {
  width: 100%; height: 100%; object-fit: contain;
}

/* === Customer reviews section (NEW) ============================== */
.lpk-reviews__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  margin-bottom: var(--space-10);
}

.lpk-reviews__rating {
  font-size: 32px;
  letter-spacing: 4px;
  color: #F59E0B;
  line-height: 1;
}

.lpk-reviews__rating-num {
  font-family: var(--font-heading);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
}

.lpk-reviews__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  margin: 0;
}

.lpk-reviews__sub {
  color: var(--color-text-secondary);
  font-size: var(--fs-body-lg);
}

.lpk-reviews__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px)  { .lpk-reviews__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .lpk-reviews__grid { grid-template-columns: repeat(3, 1fr); } }

.testimonial-card {
  background: var(--color-bg-page);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.testimonial-card__stars {
  color: #F59E0B;
  letter-spacing: 2px;
  font-size: 16px;
}

.testimonial-card__body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--color-text-primary);
  flex: 1;
}

.testimonial-card__product {
  font-size: var(--fs-caption);
  color: var(--color-text-secondary);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
}

.testimonial-card__author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-subtle);
}

.testimonial-card__avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--color-bg-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  flex-shrink: 0;
}

.testimonial-card__name {
  display: flex;
  flex-direction: column;
  font-size: var(--fs-body-sm);
  line-height: 1.3;
}

.testimonial-card__name strong { color: var(--color-text-primary); }
.testimonial-card__name span { color: var(--color-text-secondary); font-size: var(--fs-caption); }

.lpk-reviews__verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(22, 163, 74, 0.1);
  color: var(--color-success);
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  margin-top: var(--space-2);
}

/* === Category grid (homepage 8-up) =============================== */
.lpk-category-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

@media (min-width: 768px) { .lpk-category-grid { grid-template-columns: repeat(4, 1fr); } }

.lpk-category-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-6) var(--space-3);
  background: var(--color-bg-page);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: transform var(--motion-base), box-shadow var(--motion-base), border-color var(--motion-base);
}

.lpk-category-card:hover {
  transform: translateY(-2px);
  border-color: transparent;
  box-shadow: var(--shadow-md);
}

.lpk-category-card__visual {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--color-bg-surface);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-3);
  overflow: hidden;
}

.lpk-category-card__visual img {
  width: 80%;
  height: 80%;
  object-fit: contain;
}

.lpk-category-card__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  margin: 0;
}

.lpk-category-card__count {
  font-size: var(--fs-caption);
  color: var(--color-text-secondary);
  margin-top: 2px;
}

/* === Product carousel (homepage 4-up scrollable) ================= */
/* === Product rail (true horizontal-scroll carousel) ==============
   Mobile  : ~1.4 cards visible (one full + 40% peek of next).
   Tablet  : ~2.4 cards visible.
   Desktop : 4 cards visible + small peek of 5th when rail has overflow.
   Touch   : native swipe + scroll-snap.
   Desktop : prev/next chevron buttons appear on hover (see .lpk-rail).
=================================================================== */
.lpk-rail {
  position: relative;
}

.lpk-carousel {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-padding-inline: var(--gutter);
  /* hide scrollbar but keep functional */
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* edge bleed so peek extends to viewport edge on small screens */
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  padding-block: var(--space-2);
}

.lpk-carousel::-webkit-scrollbar { display: none; }

.lpk-carousel > .product-card {
  /* mobile: 1.4 cards visible → card = (W - 1*gap) / 1.4 */
  flex: 0 0 calc((100% - var(--space-3)) / 1.4);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

@media (min-width: 640px) {
  /* 2.3 cards visible */
  .lpk-carousel > .product-card { flex: 0 0 calc((100% - var(--space-3) * 2) / 2.3); }
}

@media (min-width: 768px) {
  .lpk-carousel { gap: var(--space-4); }
  /* 3.3 cards visible */
  .lpk-carousel > .product-card { flex: 0 0 calc((100% - var(--space-4) * 3) / 3.3); }
}

@media (min-width: 1024px) {
  .lpk-carousel {
    /* on desktop the container has no edge-bleed; peek emerges if rail overflows */
    margin-inline: 0;
    padding-inline: 0;
  }
  /* 4.2 cards visible — when rail has 5+ products, 0.2 of 5th peeks */
  .lpk-carousel > .product-card { flex: 0 0 calc((100% - var(--space-4) * 4) / 4.2); }
}

/* Prev/Next nav buttons (desktop only — touch users swipe) */
.lpk-rail__nav {
  display: none;
  position: absolute;
  top: calc(50% - 28px);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-bg-page);
  border: 1px solid var(--color-border-subtle);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  z-index: 3;
  align-items: center;
  justify-content: center;
  color: var(--color-text-primary);
  transition: opacity 160ms ease, transform 160ms ease;
}

.lpk-rail__nav:hover {
  background: var(--color-text-primary);
  color: white;
  transform: scale(1.05);
}

.lpk-rail__nav:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.lpk-rail__nav--prev { left: -22px; }
.lpk-rail__nav--next { right: -22px; }

@media (min-width: 1024px) {
  .lpk-rail__nav { display: flex; }
}

/* When rail content fits without overflow, hide nav buttons. */
.lpk-rail--no-overflow .lpk-rail__nav { display: none; }

/* === "From the blog" teaser (empty-state at launch) ============== */
.lpk-blog-teaser {
  text-align: center;
  padding: var(--space-12) var(--space-4);
  border: 1px dashed var(--color-border-subtle);
  border-radius: var(--radius-lg);
}

.lpk-blog-teaser__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  margin: 0 0 var(--space-2);
}

.lpk-blog-teaser__sub {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}

.lpk-blog-teaser__form {
  display: flex;
  gap: var(--space-2);
  max-width: 480px;
  margin: 0 auto;
}

.lpk-blog-teaser__form input {
  flex: 1;
}

/* === About excerpt =============================================== */
.lpk-about {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
}

@media (min-width: 1024px) {
  .lpk-about { grid-template-columns: 1fr 1fr; gap: var(--space-12); }
}

.lpk-about__visual {
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, #FFFFFF 0%, #E8FFF9 100%);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.lpk-about__visual img { width: 80%; height: 80%; object-fit: contain; }

.lpk-about__copy h2 {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-h2);
  margin: 0 0 var(--space-4);
}

.lpk-about__copy p { color: var(--color-text-secondary); line-height: 1.7; max-width: 56ch; }

/* === Newsletter banner (pre-footer) ============================== */
.lpk-newsletter {
  background: var(--color-bg-inverse);
  color: white;
  padding: var(--space-12) var(--space-4);
  text-align: center;
}

.lpk-newsletter__inner {
  max-width: 640px;
  margin: 0 auto;
}

.lpk-newsletter__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  margin: 0 0 var(--space-3);
}

.lpk-newsletter__sub {
  color: rgba(255,255,255,0.7);
  margin-bottom: var(--space-6);
}

.lpk-newsletter__form {
  display: flex;
  gap: var(--space-2);
  max-width: 480px;
  margin: 0 auto;
}

.lpk-newsletter__form input {
  flex: 1;
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.2);
  color: white;
}

.lpk-newsletter__form input::placeholder { color: rgba(255,255,255,0.5); }

/* === Footer ====================================================== */
.lpk-footer {
  background: var(--color-bg-inverse);
  color: white;
}

.lpk-footer__top {
  padding: var(--space-12) 0 var(--space-8);
}

.lpk-footer__cols {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-6);
  max-width: var(--container-default);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

@media (min-width: 768px) {
  .lpk-footer__cols { grid-template-columns: 2fr repeat(4, 1fr); gap: var(--space-8); }
}

.lpk-footer__brand-col {
  grid-column: 1 / -1;
  margin-bottom: var(--space-6);
}

@media (min-width: 768px) {
  .lpk-footer__brand-col { grid-column: 1; margin-bottom: 0; }
}

/* Footer brand mark — composite logo + Pakistan wordmark, matching header pattern. */
.lpk-footer__brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--space-4);
  text-decoration: none;
  color: white;
  height: 28px;
}
.lpk-footer__brand-mark .lpk-footer__logo {
  height: 100%;
  width: auto;
  margin-bottom: 0;
  filter: invert(1);
}
.lpk-footer__country {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  line-height: 1;
  padding-left: 8px;
  border-left: 1.5px solid rgba(255, 255, 255, 0.3);
  color: white;
  white-space: nowrap;
}
/* Legacy: standalone .lpk-footer__logo (without brand-mark wrapper) — keeps old styles working. */
.lpk-footer__logo {
  height: 28px;
  margin-bottom: var(--space-4);
  filter: invert(1);
}

.lpk-footer__about {
  color: rgba(255,255,255,0.7);
  font-size: var(--fs-body-sm);
  line-height: 1.6;
  max-width: 320px;
  margin-bottom: var(--space-4);
}

.lpk-footer__col-title {
  font-family: var(--font-heading);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  margin: 0 0 var(--space-3);
}

.lpk-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.lpk-footer__list a {
  color: rgba(255,255,255,0.7);
  font-size: var(--fs-body-sm);
  text-decoration: none;
  transition: color var(--motion-fast);
}

.lpk-footer__list a:hover { color: white; }

.lpk-footer__trust {
  background: var(--color-bg-inverse-soft);
  padding: var(--space-6) 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.lpk-footer__trust-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  max-width: var(--container-default);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

@media (min-width: 768px) {
  .lpk-footer__trust-row { grid-template-columns: repeat(4, 1fr); }
}

.lpk-footer__trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.lpk-footer__trust-icon {
  width: 32px; height: 32px;
  flex-shrink: 0;
  color: var(--color-accent-mint);
}

.lpk-footer__trust-text strong {
  display: block;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
}

.lpk-footer__trust-text span {
  display: block;
  font-size: var(--fs-caption);
  color: rgba(255,255,255,0.6);
}

.lpk-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  max-width: var(--container-default);
  margin: 0 auto;
  padding: var(--space-6) var(--gutter);
  font-size: var(--fs-caption);
  color: rgba(255,255,255,0.5);
}

.lpk-footer__legal-links {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.lpk-footer__legal-links a {
  color: rgba(255,255,255,0.5);
  text-decoration: none;
}

.lpk-footer__legal-links a:hover { color: white; }

.lpk-footer__payment-icons {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

.lpk-footer__payment-icons span {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.85);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
}

.lpk-footer__socials {
  display: flex;
  gap: var(--space-3);
}

.lpk-footer__socials a {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  transition: background-color var(--motion-fast);
}

.lpk-footer__socials a:hover { background: rgba(255,255,255,0.18); }

/* === Mockup banner placeholder (used where banners will go) ====== */
.lpk-banner-placeholder {
  background: repeating-linear-gradient(
    45deg,
    var(--color-bg-surface),
    var(--color-bg-surface) 12px,
    var(--color-bg-subtle) 12px,
    var(--color-bg-subtle) 24px
  );
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
  color: var(--color-text-secondary);
  padding: var(--space-8);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
}

/* ===================================================================
   COMMERCE PAGE PATTERNS — Batch 3.5-B (added 2026-05-05)
   Category, PDP, Cart, Checkout, My Account.
=================================================================== */

/* === Category page =============================================== */
.lpk-cat-hero { padding: var(--space-2) 0 var(--space-3); }
.lpk-cat-hero__title { font-family: var(--font-heading); font-size: var(--fs-h2); font-weight: var(--fw-bold); margin: 0; line-height: 1.1; }
.lpk-cat-hero__sub { color: var(--color-text-secondary); margin: var(--space-2) 0 0; font-size: var(--fs-body-sm); max-width: none; }

.lpk-cat-layout { display: block; padding: var(--space-3) 0 var(--space-12); }
@media (min-width: 1024px) {
  .lpk-cat-layout { display: grid; grid-template-columns: 260px 1fr; gap: var(--space-8); align-items: start; }
}

.lpk-filters { display: none; }
@media (min-width: 1024px) { .lpk-filters { display: block; position: sticky; top: 100px; } }

.lpk-filters__group { border-bottom: 1px solid var(--color-border-subtle); padding: var(--space-4) 0; }
.lpk-filters__group:first-child { padding-top: 0; }
.lpk-filters__group:last-child { border-bottom: 0; }
.lpk-filters__group-title { font-family: var(--font-heading); font-size: var(--fs-body); font-weight: var(--fw-semibold); margin: 0 0 var(--space-3); display: flex; justify-content: space-between; align-items: center; }
.lpk-filters__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.lpk-filters__list label { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-body-sm); cursor: pointer; line-height: 1.3; }
.lpk-filters__list input[type=checkbox], .lpk-filters__list input[type=radio] { accent-color: var(--color-text-primary); width: 16px; height: 16px; }
.lpk-filters__list .count { color: var(--color-text-tertiary); margin-left: auto; font-size: var(--fs-caption); }

.lpk-filters__price-row { display: flex; gap: var(--space-2); align-items: center; }
.lpk-filters__price-row input { width: 100%; padding: 6px 10px; font-size: var(--fs-body-sm); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm); }

.lpk-toolbar { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border-subtle); margin-bottom: var(--space-5); gap: var(--space-3); flex-wrap: wrap; }
.lpk-toolbar__count { color: var(--color-text-secondary); font-size: var(--fs-body-sm); }
.lpk-toolbar__right { display: flex; align-items: center; gap: var(--space-3); }
.lpk-toolbar__sort { display: flex; align-items: center; gap: var(--space-2); }
.lpk-toolbar__sort select { padding: 8px 32px 8px 12px; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm); background: var(--color-bg-page); font-size: var(--fs-body-sm); cursor: pointer; }

/* View toggle — desktop only (3-up vs 4-up) */
.lpk-toolbar__view {
  display: none;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  padding: 2px;
}
@media (min-width: 1024px) { .lpk-toolbar__view { display: inline-flex; } }
.lpk-toolbar__view button {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer;
  color: var(--color-text-secondary);
  border-radius: 4px;
  transition: background-color var(--motion-fast), color var(--motion-fast);
}
.lpk-toolbar__view button:hover { background: var(--color-bg-surface); }
.lpk-toolbar__view button.is-active { background: var(--color-text-primary); color: white; }

.lpk-mobile-filter-btn {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--color-text-primary); color: white; padding: 12px 22px; border-radius: var(--radius-pill);
  border: none; cursor: pointer; box-shadow: var(--shadow-lg); z-index: 90; font-weight: var(--fw-semibold); font-size: var(--fs-body-sm);
}
@media (min-width: 1024px) { .lpk-mobile-filter-btn { display: none; } }

.lpk-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.lpk-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-pill); font-size: var(--fs-caption); }
.lpk-chip__remove { background: none; border: none; padding: 0; cursor: pointer; color: var(--color-text-secondary); display: flex; }
.lpk-chip__remove:hover { color: var(--color-error); }
.lpk-chip--clear { background: transparent; border: 0; color: var(--color-text-secondary); text-decoration: underline; padding: 4px 0; cursor: pointer; font-size: var(--fs-caption); }

.lpk-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
@media (min-width: 640px) { .lpk-grid { gap: var(--space-3); } }
@media (min-width: 1024px) { .lpk-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-3); } }
/* Default: cap at 3-up. .lpk-grid--4 modifier opts into 4-up for cart upsell
   and account wishlist where compact display is desired. */
@media (min-width: 1024px) {
  .lpk-grid--4 { grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
  .lpk-grid--4 .product-card__tagline { display: none; }
  .lpk-grid--4 .product-card__content { padding: var(--space-2) var(--space-3); gap: 4px; }
  .lpk-grid--4 .product-card__image-wrap { padding: var(--space-2); }
  .lpk-grid--4 .product-card__title { font-size: 14px; line-height: 1.3; }
  .lpk-grid--4 .product-card__eyebrow { font-size: 10px; }
  .lpk-grid--4 .product-card__price { font-size: 15px; }
}

/* .lpk-grid--wide-4 — 4-up at desktop with FULL canonical product-card markup
   (preserves tagline, default padding, default font sizes). Used for "Most-bought"
   on 404 and "Quick picks" on buying guide where the tagline matters. */
@media (min-width: 1024px) {
  .lpk-grid--wide-4 { grid-template-columns: repeat(4, 1fr); }
}

.lpk-loadmore { text-align: center; margin: var(--space-8) 0 var(--space-4); }

/* === PDP (product detail) ======================================== */
.lpk-pdp { padding: var(--space-4) 0 var(--space-12); }
.lpk-pdp__layout { display: grid; gap: var(--space-6); }
@media (min-width: 1024px) {
  .lpk-pdp__layout {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--space-10);
    align-items: start; /* prevent grid items from stretching to row height */
  }
  /* Gallery sticks while user reads info / scrolls; releases naturally
     when the layout container ends (at the tabs section). */
  .lpk-pdp__gallery {
    position: sticky;
    top: calc(var(--header-height-desktop, 80px) + var(--space-4));
    align-self: start;
  }
}

.lpk-pdp__gallery { display: grid; gap: var(--space-3); }
@media (min-width: 768px) { .lpk-pdp__gallery { grid-template-columns: 80px 1fr; } }
/* PDP main image: fixed-height container so the image never overflows
   regardless of viewport. No aspect-ratio dependency — image fits inside
   via object-fit: contain. (2026-05-06 second pass — the aspect-ratio
   approach was overflowing on certain layouts.) */
.lpk-pdp__main-image {
  background: var(--color-bg-surface);
  border-radius: var(--radius-md);
  order: 0;
  width: 100%;
  height: 340px;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}
@media (min-width: 768px) {
  .lpk-pdp__main-image { height: 460px; }
}
@media (min-width: 1024px) {
  .lpk-pdp__main-image { height: 520px; }
}

/* ===== Slider: scroll-snap horizontal strip on mobile, single-active on desktop.
   All gallery images live in the DOM up front so swipe navigates natively
   without rebuilding markup or fetching on each step. Active slide is the
   one currently snapped into view (mobile) or the one with .is-active set
   by thumb click / swatch change (desktop). */
.lpk-pdp__slider {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.lpk-pdp__slider::-webkit-scrollbar { display: none; }
.lpk-pdp__slider:focus-visible {
  outline: 2px solid var(--color-accent-mint);
  outline-offset: -4px;
}

.lpk-pdp__slide {
  flex: 0 0 100%;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: var(--color-bg-surface);
  box-sizing: border-box;
  border: 0;
  cursor: zoom-in;
  /* Hint to the browser this layer composites — keeps slide swap silky on low-end Android */
  will-change: transform;
}
.lpk-pdp__slide[hidden] { display: none; }
.lpk-pdp__slide img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  pointer-events: none; /* tap goes to the <button> for the zoom open */
}

@media (min-width: 768px) {
  .lpk-pdp__slide { padding: var(--space-6); }
}

/* Desktop: no horizontal scroll, no scroll-snap. Only the .is-active slide is
   visible — preserves the previous thumb-click swap UX. Mobile (<1024px) keeps
   all slides visible in the scroll strip so users can swipe through them. */
@media (min-width: 1024px) {
  .lpk-pdp__slider {
    display: block;
    overflow: hidden;
    scroll-snap-type: none;
  }
  .lpk-pdp__slide { display: none; padding: 0; height: 100%; }
  .lpk-pdp__slide.is-active { display: flex; padding: var(--space-6); }
}
/* Mobile: horizontal scroll strip (4–5 thumbs visible at a time, smooth swipe).
   The previous `flex-wrap: wrap` filled a multi-row grid below the main image,
   which felt heavy on small screens. */
.lpk-pdp__thumbs {
  display: flex;
  gap: var(--space-2);
  flex-wrap: nowrap;
  order: 1;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 2px; /* room for active border + tap feedback */
}
.lpk-pdp__thumbs::-webkit-scrollbar { display: none; }
@media (min-width: 768px) {
  .lpk-pdp__thumbs {
    flex-direction: column;
    order: -1;
    overflow: visible;
    scroll-snap-type: none;
  }
}
.lpk-pdp__thumb { width: 64px; height: 64px; flex-shrink: 0; scroll-snap-align: start; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm); padding: 4px; cursor: pointer; background: white; display: block; }
.lpk-pdp__thumb.is-active { border-color: var(--color-text-primary); border-width: 1.5px; padding: 3.5px; }
.lpk-pdp__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* The HTML5 `hidden` attribute MUST win over the .lpk-pdp__thumb display:block rule above.
   Without these explicit selectors, non-active-variant thumbs leak into the strip and become
   clickable — breaking variant filtering AND the zoom (lightbox bails on hidden slides). */
.lpk-pdp__thumb[hidden] { display: none !important; }
.lpk-pdp__slide[hidden] { display: none !important; }

.lpk-pdp__info > * + * { margin-top: var(--space-3); }
.lpk-pdp__brand { font-size: var(--fs-overline); text-transform: uppercase; letter-spacing: var(--ls-overline); color: var(--color-text-secondary); margin: 0; font-weight: var(--fw-semibold); }
.lpk-pdp__title { font-family: var(--font-heading); font-size: 1.625rem; font-weight: var(--fw-bold); margin: 0; line-height: 1.2; }
@media (min-width: 768px) { .lpk-pdp__title { font-size: 1.875rem; } }
.lpk-pdp__rating { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-body-sm); color: var(--color-text-secondary); }
.lpk-pdp__rating-stars { color: #F59E0B; font-size: 16px; letter-spacing: 1px; }
.lpk-pdp__price-row { display: flex; align-items: baseline; gap: var(--space-3); margin-top: var(--space-4); flex-wrap: wrap; }
.lpk-pdp__price { font-family: var(--font-heading); font-size: var(--fs-h2); font-weight: var(--fw-bold); color: var(--color-text-primary); }
.lpk-pdp__price--sale { color: var(--color-error); }
.lpk-pdp__price-strike { color: var(--color-text-tertiary); text-decoration: line-through; font-size: var(--fs-body); }
.lpk-pdp__sku { color: var(--color-text-tertiary); font-size: var(--fs-caption); display: block; margin-top: 4px; font-family: var(--font-mono); }

.lpk-pdp__variants { padding: var(--space-4) 0; border-top: 1px solid var(--color-border-subtle); border-bottom: 1px solid var(--color-border-subtle); }
.lpk-pdp__variants-label { font-size: var(--fs-body-sm); margin-bottom: var(--space-2); color: var(--color-text-secondary); }
.lpk-pdp__variants-label strong { color: var(--color-text-primary); font-weight: var(--fw-semibold); }
.lpk-pdp__swatches { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.lpk-pdp__swatches .swatch { width: 56px; height: 56px; }

.lpk-pdp__cta-row { display: flex; gap: var(--space-3); align-items: stretch; margin-top: var(--space-4); }
.lpk-pdp__cta-row .btn { flex: 1; }
/* Mobile restack: qty + wishlist on row 1, full-width Add to cart on row 2.
   Buy Now is rendered outside this row already, so it naturally falls below.
   The qty stepper expands to fill the spare space between itself and the
   wishlist heart — its internal input flexes so the visual gap between
   −/+ buttons reads as "this stepper owns the row." */
@media (max-width: 767px) {
  .lpk-pdp__cta-row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "qty   wish"
      "add   add";
    gap: var(--space-3);
    align-items: stretch;
  }
  .lpk-pdp__cta-row .qty-stepper           { grid-area: qty;  width: 100%; }
  .lpk-pdp__cta-row .qty-stepper input     { flex: 1; width: auto; min-width: 0; }
  .lpk-pdp__cta-row #pdpAddToCart          { grid-area: add;  width: 100%; }
  .lpk-pdp__cta-row .lpk-pdp__wishlist-btn { grid-area: wish; }
}

.qty-stepper { display: flex; align-items: center; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); overflow: hidden; height: 48px; flex-shrink: 0; background: white; }
.qty-stepper button { width: 40px; height: 100%; background: transparent; border: 0; cursor: pointer; font-size: 18px; color: var(--color-text-primary); display: flex; align-items: center; justify-content: center; padding: 0; }
.qty-stepper button:hover { background: var(--color-bg-surface); }
.qty-stepper input { width: 50px; height: 100%; border: 0; text-align: center; font-size: var(--fs-body); -moz-appearance: textfield; background: transparent; font-family: inherit; }
.qty-stepper input::-webkit-outer-spin-button, .qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* PDP lead paragraph (sourced from WC short_description — same field that
   feeds the product-card tagline). Restored to --fs-body-lg for proper
   prominence as the elevator-pitch above the price. */
.lpk-pdp__lead {
  font-size: var(--fs-body-lg);
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: var(--space-3) 0 0;
}

/* PDP info blocks — full-width stacked cards (Logitech.com pattern). */
.lpk-pdp__info-blocks {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.lpk-pdp__info-block {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-page);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.lpk-pdp__info-block:hover {
  border-color: var(--color-border-strong);
}

.lpk-pdp__info-block__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-primary);
}

.lpk-pdp__info-block__copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lpk-pdp__info-block__copy strong {
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  font-size: var(--fs-body-sm);
  line-height: 1.3;
}
.lpk-pdp__info-block__copy span {
  color: var(--color-text-secondary);
  font-size: var(--fs-caption);
  line-height: 1.4;
}

.lpk-pdp__info-block__link {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: background-color var(--motion-fast), color var(--motion-fast);
}
.lpk-pdp__info-block__link:hover {
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
}

/* Mint variant — used for the flagship trust signal (free shipping). */
.lpk-pdp__info-block--mint {
  background: rgba(0, 236, 194, 0.08);
  border-color: rgba(0, 236, 194, 0.45);
}
.lpk-pdp__info-block--mint .lpk-pdp__info-block__icon { color: #00B89E; }

/* Lime variant — RESERVED for COD-related blocks (per design system §2). */
.lpk-pdp__info-block--lime {
  background: rgba(213, 242, 63, 0.22);
  border-color: rgba(213, 242, 63, 0.7);
}

/* PDP CTAs — buy now (secondary outlined) and wishlist (square) share the
   same 2px border weight for visual consistency in the action row. */
.lpk-pdp__buy-now {
  width: 100%;
  margin-top: var(--space-2);
  border: 2px solid var(--color-text-primary);
  background: white;
  transition: background-color var(--motion-fast), color var(--motion-fast);
}
.lpk-pdp__buy-now:hover {
  background: var(--color-text-primary);
  color: white;
}

/* Wishlist button — narrow square overrides .btn / .btn--ghost defaults.
   Must beat both the .btn--lg min-height/min-width and the
   `.lpk-pdp__cta-row .btn { flex: 1 }` rule above. */
.lpk-pdp__cta-row .lpk-pdp__wishlist-btn,
.lpk-pdp__wishlist-btn {
  flex: 0 0 56px;
  width: 56px;
  min-width: 56px;
  max-width: 56px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  border: 2px solid var(--color-border-subtle);
  background: white;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  transition: border-color var(--motion-fast), color var(--motion-fast), background-color var(--motion-fast);
}
.lpk-pdp__wishlist-btn svg { width: 22px; height: 22px; }
.lpk-pdp__wishlist-btn:hover {
  border-color: var(--color-text-primary);
  color: var(--color-text-primary);
  background: var(--color-bg-surface);
}
.lpk-pdp__wishlist-btn.is-active {
  border-color: var(--color-error);
  color: var(--color-error);
}

.lpk-pdp__details { padding: var(--space-8) 0; border-top: 1px solid var(--color-border-subtle); margin-top: var(--space-8); }

.lpk-pdp__sticky-cart { display: none; }
@media (max-width: 767px) {
  .lpk-pdp__sticky-cart {
    display: flex; gap: var(--space-2); align-items: center;
    position: fixed; bottom: 0; left: 0; right: 0; padding: var(--space-3);
    background: var(--color-bg-page); border-top: 1px solid var(--color-border-subtle);
    z-index: 90; box-shadow: 0 -4px 16px rgba(0,0,0,0.05);
    box-sizing: border-box; max-width: 100vw;
    /* Slide-down hide state — toggled by JS when the main in-flow CTA is in
       view. transform-only animation is GPU-accelerated and doesn't reflow. */
    transform: translateY(0);
    transition: transform 200ms ease-out;
  }
  .lpk-pdp__sticky-cart.is-hidden { transform: translateY(100%); }
  .lpk-pdp__sticky-cart .btn {
    flex: 1; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .lpk-pdp__sticky-cart .qty-stepper { flex-shrink: 0; }
}

/* === Cart ======================================================== */
.lpk-cart { padding: var(--space-6) 0 var(--space-12); }
.lpk-cart__layout { display: grid; gap: var(--space-6); }
@media (min-width: 1024px) { .lpk-cart__layout { grid-template-columns: 1fr 380px; gap: var(--space-8); align-items: start; } }

.lpk-cart__title { font-family: var(--font-heading); font-size: var(--fs-h2); font-weight: var(--fw-bold); margin: 0 0 var(--space-6); line-height: 1.1; }

.lpk-cart__items { display: flex; flex-direction: column; gap: var(--space-3); }

.lpk-cart__item { display: grid; grid-template-columns: 80px 1fr; gap: var(--space-3); padding: var(--space-4); background: var(--color-bg-page); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); }
@media (min-width: 768px) { .lpk-cart__item { grid-template-columns: 100px 1fr auto; gap: var(--space-4); align-items: center; } }
.lpk-cart__item-img { width: 100%; aspect-ratio: 1/1; background: var(--color-bg-surface); border-radius: var(--radius-sm); padding: var(--space-2); }
.lpk-cart__item-img img { width: 100%; height: 100%; object-fit: contain; }
.lpk-cart__item-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lpk-cart__item-title { font-weight: var(--fw-semibold); font-size: var(--fs-body); margin: 0; line-height: 1.3; }
.lpk-cart__item-meta { color: var(--color-text-secondary); font-size: var(--fs-body-sm); }
.lpk-cart__item-price { font-weight: var(--fw-bold); font-size: var(--fs-body); margin-top: 6px; }
.lpk-cart__item-actions { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-2); flex-wrap: wrap; }
.lpk-cart__item-actions .qty-stepper { width: 110px; height: 40px; }
.lpk-cart__item-actions .qty-stepper button { width: 34px; }
.lpk-cart__item-actions .qty-stepper input { width: 42px; }
.lpk-cart__item-remove { background: none; border: 0; color: var(--color-text-secondary); cursor: pointer; font-size: var(--fs-body-sm); padding: 0; text-decoration: underline; }
.lpk-cart__item-remove:hover { color: var(--color-error); }

.lpk-cart__empty { text-align: center; padding: var(--space-12) var(--space-4); }

.lpk-summary { background: var(--color-bg-surface); padding: var(--space-5); border-radius: var(--radius-md); align-self: start; border: 1px solid var(--color-border-subtle); }
@media (min-width: 1024px) { .lpk-summary { position: sticky; top: 100px; } }
.lpk-summary__title { font-family: var(--font-heading); font-size: var(--fs-h3); font-weight: var(--fw-bold); margin: 0; }

/* Summary header — title + Edit cart link */
.lpk-summary__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
}
.lpk-summary__edit {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-primary);
  text-decoration: underline;
}
.lpk-summary__edit:hover { text-decoration: none; }
.lpk-summary__row { display: flex; justify-content: space-between; padding: var(--space-2) 0; font-size: var(--fs-body); gap: var(--space-3); }
.lpk-summary__row span:last-child { font-weight: var(--fw-semibold); }
.lpk-summary__row--total {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  border-top: 1px solid var(--color-border-default);
  padding-top: var(--space-4);
  margin-top: var(--space-3);
  letter-spacing: -0.01em;
}

/* Free pill — Logi mint brand color (--color-accent-mint), black text.
   Replaces the harsh green text of the old .lpk-summary__row--free
   treatment (2026-05-06). Aligned with design system §2.1 mint accent. */
.lpk-summary__free-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  background: var(--color-accent-mint);
  color: var(--color-text-primary);
  border-radius: var(--radius-pill);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* COD T&C row — subtle lime tint with full-width treatment. */
.lpk-summary__row--cod-fee {
  background: rgba(213, 242, 63, 0.22);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  margin: var(--space-2) calc(var(--space-3) * -1);
  font-size: var(--fs-body-sm);
}
.lpk-summary__row--cod-fee[hidden] { display: none; }
.lpk-summary__row--cod { background: var(--color-accent-lime); padding: var(--space-3); border-radius: var(--radius-sm); margin: var(--space-3) 0; font-size: var(--fs-body-sm); display: block; }
.lpk-summary__row--cod strong { display: block; margin-bottom: 4px; }
.lpk-summary__cta { width: 100%; margin-top: var(--space-4); }
.lpk-summary__note { color: var(--color-text-secondary); font-size: var(--fs-caption); margin-top: var(--space-3); text-align: center; }

.lpk-coupon { display: flex; gap: var(--space-2); margin: var(--space-4) 0; }
.lpk-coupon input { flex: 1; padding: 10px 12px; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm); font-size: var(--fs-body-sm); background: white; }

/* === Checkout ==================================================== */
.lpk-checkout { padding: var(--space-3) 0 var(--space-12); }
.lpk-checkout__layout { display: grid; gap: var(--space-6); }
@media (min-width: 1024px) { .lpk-checkout__layout { grid-template-columns: 1fr 380px; gap: var(--space-8); align-items: start; } }

.lpk-checkout__title { font-family: var(--font-heading); font-size: var(--fs-h2); font-weight: var(--fw-bold); margin: 0 0 var(--space-2); line-height: 1.1; }
.lpk-checkout__head { margin-bottom: var(--space-5); }
.lpk-checkout__signin { font-size: var(--fs-body-sm); color: var(--color-text-secondary); margin: 0; }
.lpk-checkout__signin a { color: var(--color-text-primary); text-decoration: underline; font-weight: var(--fw-medium); }
.lpk-checkout__signin a:hover { text-decoration: none; }

/* Compact variant for checkout-page tiles (both shipping and payment).
   The locked spec in components.css §6.9 sizes title at --fs-h5 / desc at
   --fs-body-sm, which reads heavy stacked at checkout. Inside .lpk-checkout
   we tighten to --fs-body-sm / --fs-caption — fast to scan, list-like.
   Style guide demo at /mockups/style-guide.html still shows the original
   spec for reference. (2026-05-06) */
.lpk-checkout .payment-method {
  padding: var(--space-3) var(--space-4);
  gap: var(--space-3);
}
.lpk-checkout .payment-method__icon { width: 32px; height: 32px; }
.lpk-checkout .payment-method__icon svg { width: 22px; height: 22px; }
.lpk-checkout .payment-method__title {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
}
.lpk-checkout .payment-method__desc {
  font-size: var(--fs-caption);
  line-height: 1.4;
}
.lpk-checkout .payment-method__fee {
  font-size: 10px;
  padding: 2px 6px;
}
.lpk-checkout__step { padding: var(--space-5) 0; border-top: 1px solid var(--color-border-subtle); }
.lpk-checkout__step:first-child { border-top: 0; padding-top: var(--space-3); }
.lpk-checkout__step-title {
  font-family: var(--font-heading);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-bold);
  margin: 0 0 var(--space-3);
  letter-spacing: -0.01em;
}

.lpk-checkout__form-row { display: grid; gap: var(--space-3); }
@media (min-width: 768px) { .lpk-checkout__form-row { grid-template-columns: 1fr 1fr; } }
.lpk-checkout__form-row + .lpk-checkout__form-row { margin-top: var(--space-3); }

.lpk-checkout__cod-info { display: flex; gap: var(--space-2); padding: var(--space-3); background: var(--color-accent-lime); border-radius: var(--radius-sm); margin-top: var(--space-3); font-size: var(--fs-body-sm); align-items: flex-start; }
.lpk-checkout__cod-info[hidden] { display: none; }
.lpk-checkout__cod-info svg { flex-shrink: 0; }

.lpk-checkout__order-mini { display: flex; flex-direction: column; gap: var(--space-3); padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border-subtle); margin-bottom: var(--space-4); }
.lpk-checkout__order-mini-item { display: grid; grid-template-columns: 56px 1fr auto; gap: var(--space-2); align-items: center; }
.lpk-checkout__order-mini-img { width: 56px; height: 56px; background: white; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm); padding: 4px; position: relative; }
.lpk-checkout__order-mini-img img { width: 100%; height: 100%; object-fit: contain; }
.lpk-checkout__order-mini-qty { position: absolute; top: -8px; right: -8px; background: var(--color-text-secondary); color: white; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; }
.lpk-checkout__order-mini-info { font-size: var(--fs-body-sm); line-height: 1.3; min-width: 0; }
.lpk-checkout__order-mini-name {
  font-weight: var(--fw-medium);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
  font-size: var(--fs-body-sm);
  color: var(--color-text-primary);
}
.lpk-checkout__order-mini-meta { color: var(--color-text-secondary); font-size: var(--fs-caption); margin-top: 2px; }
.lpk-checkout__order-mini-price { font-weight: var(--fw-bold); font-size: var(--fs-body-sm); white-space: nowrap; color: var(--color-text-primary); }

/* === My Account ================================================== */
.lpk-account { padding: var(--space-6) 0 var(--space-12); }
.lpk-account__layout { display: grid; gap: var(--space-6); }
@media (min-width: 1024px) { .lpk-account__layout { grid-template-columns: 240px 1fr; gap: var(--space-8); align-items: start; } }

.lpk-account__nav { display: flex; flex-direction: column; gap: 2px; }
@media (min-width: 1024px) { .lpk-account__nav { position: sticky; top: 100px; } }
.lpk-account__nav a { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-sm); color: var(--color-text-primary); text-decoration: none; font-size: var(--fs-body); transition: background-color var(--motion-fast); }
.lpk-account__nav a:hover { background: var(--color-bg-surface); }
.lpk-account__nav a.is-active { background: var(--color-text-primary); color: white; font-weight: var(--fw-semibold); }
.lpk-account__nav a.is-active svg { color: white; }
.lpk-account__nav a svg { color: var(--color-text-secondary); flex-shrink: 0; }
.lpk-account__nav-divider { height: 1px; background: var(--color-border-subtle); margin: var(--space-2) 0; }

.lpk-account__greeting { font-family: var(--font-heading); font-size: var(--fs-h2); font-weight: var(--fw-bold); margin: 0 0 var(--space-2); line-height: 1.2; }
.lpk-account__sub { color: var(--color-text-secondary); margin: 0 0 var(--space-6); }

.lpk-account__cards { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: var(--space-8); }
.lpk-account__card { padding: var(--space-4); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: 4px; }
.lpk-account__card-num { font-family: var(--font-heading); font-size: var(--fs-h2); font-weight: var(--fw-bold); }
.lpk-account__card-label { color: var(--color-text-secondary); font-size: var(--fs-body-sm); }

.lpk-account__section { margin-bottom: var(--space-8); }
.lpk-account__section-h { font-family: var(--font-heading); font-size: var(--fs-h3); font-weight: var(--fw-bold); margin: 0 0 var(--space-4); display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

.lpk-orders { display: flex; flex-direction: column; gap: var(--space-3); }
.lpk-order-row { padding: var(--space-4); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); display: grid; gap: var(--space-3); }
@media (min-width: 768px) { .lpk-order-row { grid-template-columns: auto auto 1fr auto auto; align-items: center; } }
.lpk-order-row__num { font-weight: var(--fw-semibold); font-family: var(--font-mono); font-size: var(--fs-body-sm); }
.lpk-order-row__date { color: var(--color-text-secondary); font-size: var(--fs-body-sm); }
.lpk-order-row__items { color: var(--color-text-secondary); font-size: var(--fs-body-sm); }
.lpk-order-row__total { font-weight: var(--fw-bold); }

.lpk-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-pill); font-size: var(--fs-caption); font-weight: var(--fw-semibold); white-space: nowrap; }
.lpk-status--processing { background: #FEF3C7; color: #92400E; }
.lpk-status--shipped { background: #DBEAFE; color: #1E3A8A; }
.lpk-status--delivered { background: #D1FAE5; color: #065F46; }
.lpk-status--cancelled { background: #FEE2E2; color: #991B1B; }
.lpk-status--pending { background: var(--color-bg-surface); color: var(--color-text-secondary); }

.lpk-address-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.lpk-address-card { padding: var(--space-4); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: var(--space-2); }
.lpk-address-card.is-default { border-color: var(--color-text-primary); }
.lpk-address-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); }
.lpk-address-card__label { font-weight: var(--fw-semibold); }
.lpk-address-card__default { background: var(--color-text-primary); color: white; padding: 2px 8px; border-radius: var(--radius-pill); font-size: 10px; font-weight: var(--fw-semibold); letter-spacing: 0.04em; }
.lpk-address-card__body { color: var(--color-text-secondary); font-size: var(--fs-body-sm); line-height: 1.5; flex: 1; }
.lpk-address-card__actions { display: flex; gap: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--color-border-subtle); margin-top: var(--space-2); }
.lpk-address-card__actions a { color: var(--color-text-primary); font-size: var(--fs-body-sm); }

.pdp-tabs__panel { padding-top: var(--space-5); }
.pdp-tabs__panel[hidden] { display: none; }

/* ===================================================================
   CONTENT & UTILITY PAGE PATTERNS — Batch 3.5-C / 3.5-D (added 2026-05-06)
   Long-form article body, TOC, callouts, compare table, page heros,
   contact form layout, 404, search results.
=================================================================== */

/* === Generic page hero (about, contact, policy, blog index) ====== */
.lpk-page-hero { padding: var(--space-8) 0 var(--space-6); }
.lpk-page-hero__eyebrow { font-size: var(--fs-overline); text-transform: uppercase; letter-spacing: var(--ls-overline); color: var(--color-text-secondary); font-weight: var(--fw-semibold); margin: 0 0 var(--space-2); }
.lpk-page-hero__title { font-family: var(--font-heading); font-size: var(--fs-h1); font-weight: var(--fw-bold); line-height: 1.1; margin: 0; }
.lpk-page-hero__sub { font-size: var(--fs-body-lg); color: var(--color-text-secondary); max-width: 60ch; margin: var(--space-3) 0 0; }

/* === Article layout (buying guide, help, blog, policy) =========== */
.lpk-article-layout {
  display: block;
  padding: var(--space-4) 0 var(--space-12);
}
@media (min-width: 1024px) {
  .lpk-article-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr) 240px;
    gap: var(--space-8);
    align-items: start;
  }
  .lpk-article-layout--no-right { grid-template-columns: 240px minmax(0, 1fr); }
  .lpk-article-layout--no-left { grid-template-columns: minmax(0, 1fr) 240px; }
  .lpk-article-layout--narrow { grid-template-columns: 240px minmax(0, 1fr); max-width: 1100px; margin: 0 auto; }
}

/* Article body — locked typography for long-form content */
.lpk-article {
  max-width: 72ch;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--color-text-primary);
}
.lpk-article > * + * { margin-top: var(--space-4); }
.lpk-article h2 {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  margin-top: var(--space-8);
  letter-spacing: -0.01em;
  scroll-margin-top: 100px;
}
.lpk-article h3 {
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  margin-top: var(--space-6);
  scroll-margin-top: 100px;
}
.lpk-article h4 {
  font-family: var(--font-heading);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-semibold);
  margin-top: var(--space-5);
}
.lpk-article p { margin: 0; }
.lpk-article ul,
.lpk-article ol { padding-left: 1.4em; }
.lpk-article ul li,
.lpk-article ol li { margin-top: var(--space-2); }
.lpk-article ul li:first-child,
.lpk-article ol li:first-child { margin-top: 0; }
.lpk-article a { color: var(--color-text-primary); text-decoration: underline; }
.lpk-article a:hover { text-decoration: none; }
.lpk-article strong { font-weight: var(--fw-semibold); }
.lpk-article img { max-width: 100%; height: auto; border-radius: var(--radius-md); }
.lpk-article figure { margin: var(--space-6) 0; }
.lpk-article figure figcaption { font-size: var(--fs-body-sm); color: var(--color-text-secondary); margin-top: var(--space-2); text-align: center; }
.lpk-article blockquote {
  margin: var(--space-6) 0;
  padding-left: var(--space-5);
  border-left: 3px solid var(--color-text-primary);
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  color: var(--color-text-primary);
}
.lpk-article hr { border: 0; border-top: 1px solid var(--color-border-subtle); margin: var(--space-8) 0; }
.lpk-article code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-bg-surface);
  padding: 2px 6px;
  border-radius: 4px;
}

/* === Sticky table of contents ==================================== */
.lpk-toc {
  display: none;
}
@media (min-width: 1024px) {
  .lpk-toc {
    display: block;
    position: sticky;
    top: 100px;
    align-self: start;
  }
}
.lpk-toc__title {
  font-family: var(--font-heading);
  font-size: var(--fs-overline);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-overline);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-3);
}
.lpk-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 2px solid var(--color-border-subtle);
}
.lpk-toc__list li a {
  display: block;
  padding: 6px var(--space-3);
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: var(--fs-body-sm);
  line-height: 1.4;
  border-left: 2px solid transparent;
  margin-left: -2px;
  transition: color var(--motion-fast), border-color var(--motion-fast);
}
.lpk-toc__list li a:hover { color: var(--color-text-primary); }
.lpk-toc__list li a.is-active {
  color: var(--color-text-primary);
  font-weight: var(--fw-semibold);
  border-left-color: var(--color-text-primary);
}
.lpk-toc__list .lpk-toc__sub a { padding-left: var(--space-5); font-size: var(--fs-caption); }

/* === Callout / tip boxes inside articles ========================= */
.lpk-callout {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--color-text-primary);
  background: var(--color-bg-surface);
  margin: var(--space-6) 0;
  font-size: var(--fs-body-sm);
  line-height: 1.6;
}
.lpk-callout strong { display: block; margin-bottom: var(--space-1); color: var(--color-text-primary); font-weight: var(--fw-bold); }
.lpk-callout p { margin: 0; }
.lpk-callout--mint { border-left-color: var(--color-accent-mint); background: rgba(0, 236, 194, 0.08); }
.lpk-callout--lime { border-left-color: #B7CC1F; background: rgba(213, 242, 63, 0.18); }
.lpk-callout--warn { border-left-color: var(--color-warning); background: rgba(217, 119, 6, 0.08); }

/* === Author byline =============================================== */
.lpk-author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
}
.lpk-author__avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-bg-inverse);
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  flex-shrink: 0;
}
.lpk-author__meta { font-size: var(--fs-body-sm); line-height: 1.3; }
.lpk-author__name { font-weight: var(--fw-semibold); color: var(--color-text-primary); }
.lpk-author__date { color: var(--color-text-secondary); }

/* === Tag chips =================================================== */
.lpk-tag-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.lpk-tag-list a {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-pill);
  font-size: var(--fs-caption);
  color: var(--color-text-primary);
  text-decoration: none;
  transition: background-color var(--motion-fast);
}
.lpk-tag-list a:hover { background: var(--color-bg-inverse); color: white; border-color: var(--color-bg-inverse); }

/* === "Still need help?" sidebar =================================== */
.lpk-help-sidebar {
  background: var(--color-bg-surface);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  border: 1px solid var(--color-border-subtle);
}
.lpk-help-sidebar__title {
  font-family: var(--font-heading);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-bold);
  margin: 0 0 var(--space-3);
}
.lpk-help-sidebar__channels { display: flex; flex-direction: column; gap: var(--space-2); margin: 0 0 var(--space-4); }
.lpk-help-sidebar__channel {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-page);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--color-text-primary);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  transition: border-color var(--motion-fast);
}
.lpk-help-sidebar__channel:hover { border-color: var(--color-text-primary); }
.lpk-help-sidebar__channel svg { flex-shrink: 0; }
.lpk-help-sidebar__related { font-size: var(--fs-body-sm); }
.lpk-help-sidebar__related-h { font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: var(--ls-overline); color: var(--color-text-secondary); font-weight: var(--fw-bold); margin: 0 0 var(--space-2); }
.lpk-help-sidebar__related ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.lpk-help-sidebar__related a { color: var(--color-text-primary); text-decoration: none; }
.lpk-help-sidebar__related a:hover { text-decoration: underline; }

/* === Compare table =============================================== */
.lpk-compare { overflow-x: auto; margin: var(--space-6) 0; }
.lpk-compare__table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: var(--fs-body-sm);
}
.lpk-compare__table th,
.lpk-compare__table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  vertical-align: top;
  text-align: left;
}
.lpk-compare__table thead th { background: var(--color-bg-surface); position: sticky; top: 0; z-index: 1; }
.lpk-compare__product-head { padding: var(--space-4); text-align: center; }
.lpk-compare__product-img { width: 100%; max-width: 180px; margin: 0 auto var(--space-3); aspect-ratio: 1/1; background: var(--color-bg-page); border-radius: var(--radius-sm); padding: var(--space-3); display: flex; align-items: center; justify-content: center; }
.lpk-compare__product-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lpk-compare__product-title { font-family: var(--font-heading); font-size: var(--fs-body); font-weight: var(--fw-bold); line-height: 1.3; margin: 0 0 var(--space-2); }
.lpk-compare__product-price { font-weight: var(--fw-bold); font-size: var(--fs-body); margin-bottom: var(--space-3); }
.lpk-compare__group-row td { background: var(--color-bg-surface); font-family: var(--font-heading); font-size: var(--fs-overline); text-transform: uppercase; letter-spacing: var(--ls-overline); color: var(--color-text-secondary); font-weight: var(--fw-bold); padding: var(--space-3) var(--space-4); }
.lpk-compare__row-label { font-weight: var(--fw-semibold); width: 25%; color: var(--color-text-secondary); }
.lpk-compare__winner { background: rgba(0, 236, 194, 0.12); position: relative; }
.lpk-compare__winner::before { content: '★'; color: #00B89E; font-weight: bold; margin-right: 6px; }

/* === Pros / cons two-column ====================================== */
.lpk-pros-cons {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-6) 0;
}
@media (min-width: 768px) { .lpk-pros-cons { grid-template-columns: 1fr 1fr; } }
.lpk-pros-cons__col {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-subtle);
}
.lpk-pros-cons__col h4 { font-family: var(--font-heading); font-size: var(--fs-body); font-weight: var(--fw-bold); margin: 0 0 var(--space-3); display: flex; align-items: center; gap: var(--space-2); }
.lpk-pros-cons__col ul { list-style: none; margin: 0; padding: 0; font-size: var(--fs-body-sm); line-height: 1.6; }
.lpk-pros-cons__col li { padding-left: 24px; position: relative; margin-top: var(--space-2); }
.lpk-pros-cons__col li:first-child { margin-top: 0; }
.lpk-pros-cons__col--pros li::before { content: '+'; position: absolute; left: 0; top: 0; width: 18px; height: 18px; background: var(--color-accent-mint); color: var(--color-text-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 12px; }
.lpk-pros-cons__col--cons li::before { content: '\2212'; position: absolute; left: 0; top: 0; width: 18px; height: 18px; background: var(--color-bg-surface); color: var(--color-text-secondary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 12px; }

/* === Verdict box ================================================= */
.lpk-verdict {
  padding: var(--space-5);
  background: var(--color-bg-inverse);
  color: white;
  border-radius: var(--radius-md);
  margin: var(--space-6) 0;
}
.lpk-verdict__eyebrow { font-size: var(--fs-overline); text-transform: uppercase; letter-spacing: var(--ls-overline); color: var(--color-accent-mint); font-weight: var(--fw-bold); margin: 0 0 var(--space-2); }
.lpk-verdict h3 { font-family: var(--font-heading); font-size: var(--fs-h4); font-weight: var(--fw-bold); margin: 0 0 var(--space-2); color: white; }
.lpk-verdict p { margin: 0 0 var(--space-3); color: rgba(255,255,255,0.8); line-height: 1.5; }

/* === Quick picks (3-up product cards inside articles) ============ */
.lpk-quick-picks { display: grid; gap: var(--space-3); margin: var(--space-6) 0; grid-template-columns: 1fr; }
@media (min-width: 768px) { .lpk-quick-picks { grid-template-columns: repeat(3, 1fr); } }
.lpk-quick-pick {
  padding: var(--space-4);
  background: var(--color-bg-page);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-decoration: none;
  color: inherit;
  transition: transform var(--motion-base), box-shadow var(--motion-base);
}
.lpk-quick-pick:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.lpk-quick-pick__badge {
  display: inline-block;
  align-self: flex-start;
  background: var(--color-accent-mint);
  color: var(--color-text-primary);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.lpk-quick-pick__img { aspect-ratio: 1/1; background: var(--color-bg-surface); border-radius: var(--radius-sm); padding: var(--space-3); display: flex; align-items: center; justify-content: center; }
.lpk-quick-pick__img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lpk-quick-pick__title { font-family: var(--font-heading); font-size: var(--fs-body); font-weight: var(--fw-semibold); margin: 0; line-height: 1.3; }
.lpk-quick-pick__price { font-weight: var(--fw-bold); }

/* === Contact channel cards ======================================= */
.lpk-contact-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  margin: var(--space-6) 0;
}
@media (min-width: 640px) { .lpk-contact-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .lpk-contact-grid { grid-template-columns: repeat(4, 1fr); } }
.lpk-contact-card {
  padding: var(--space-5);
  background: var(--color-bg-page);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: transform var(--motion-base), border-color var(--motion-base);
}
.lpk-contact-card:hover { transform: translateY(-2px); border-color: var(--color-text-primary); }
.lpk-contact-card__icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-surface);
  display: flex; align-items: center; justify-content: center;
}
.lpk-contact-card--whatsapp .lpk-contact-card__icon { background: var(--color-whatsapp); color: white; }
.lpk-contact-card__title { font-family: var(--font-heading); font-size: var(--fs-body); font-weight: var(--fw-bold); margin: 0; }
.lpk-contact-card__sub { font-size: var(--fs-body-sm); color: var(--color-text-secondary); }
.lpk-contact-card__detail { font-weight: var(--fw-semibold); margin-top: auto; padding-top: var(--space-2); }

/* === Hours table ================================================== */
.lpk-hours {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body-sm);
  margin: var(--space-4) 0;
}
.lpk-hours th,
.lpk-hours td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border-subtle); text-align: left; }
.lpk-hours th { color: var(--color-text-secondary); font-weight: var(--fw-medium); }
.lpk-hours tr.is-today { background: rgba(0, 236, 194, 0.08); }
.lpk-hours tr.is-today td { font-weight: var(--fw-semibold); }
.lpk-hours__closed { color: var(--color-error); }

/* === Team grid (about page editorial team) ====================== */
.lpk-team-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
  max-width: 1100px;
  margin: 0 auto;
}
@media (min-width: 640px) { .lpk-team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .lpk-team-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } }
@media (min-width: 1280px) { .lpk-team-grid { grid-template-columns: repeat(5, 1fr); } }
.lpk-team-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--color-bg-page);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: transform var(--motion-base), border-color var(--motion-base);
}
.lpk-team-card:hover { transform: translateY(-2px); border-color: var(--color-text-primary); }
.lpk-team-card__avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--color-bg-inverse);
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: 14px;
  letter-spacing: 0.05em;
}
.lpk-team-card__name { font-family: var(--font-heading); font-size: var(--fs-body); font-weight: var(--fw-bold); margin: 0; }
.lpk-team-card__role { font-size: var(--fs-caption); color: var(--color-accent-mint-dark, #00B89E); font-weight: var(--fw-semibold); margin: 0; }
.lpk-team-card__bio { font-size: var(--fs-body-sm); color: var(--color-text-secondary); line-height: 1.5; margin: 0; }

/* === USP grid (about page) ====================================== */
.lpk-usps {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  margin: var(--space-8) 0;
}
@media (min-width: 768px) { .lpk-usps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .lpk-usps { grid-template-columns: repeat(4, 1fr); } }
.lpk-usp { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); }
.lpk-usp__icon { width: 48px; height: 48px; background: var(--color-accent-mint); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.lpk-usp__title { font-family: var(--font-heading); font-size: var(--fs-body-lg); font-weight: var(--fw-bold); margin: 0; }
.lpk-usp__body { font-size: var(--fs-body-sm); color: var(--color-text-secondary); line-height: 1.5; margin: 0; }

/* === 404 page ==================================================== */
.lpk-404 {
  text-align: center;
  padding: var(--space-12) var(--gutter);
}
.lpk-404__code {
  font-family: var(--font-heading);
  font-size: 120px;
  font-weight: var(--fw-bold);
  line-height: 1;
  margin: 0 0 var(--space-3);
  color: var(--color-text-primary);
}
@media (min-width: 768px) { .lpk-404__code { font-size: 180px; } }
.lpk-404__title { font-family: var(--font-heading); font-size: var(--fs-h2); font-weight: var(--fw-bold); margin: 0 0 var(--space-3); }
.lpk-404__sub { color: var(--color-text-secondary); max-width: 50ch; margin: 0 auto var(--space-6); font-size: var(--fs-body-lg); }
.lpk-404__search {
  max-width: 480px;
  margin: 0 auto var(--space-8);
  position: relative;
}
.lpk-404__search input {
  width: 100%;
  padding: 14px 18px 14px 48px;
  border: 2px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  font-size: var(--fs-body);
  background: var(--color-bg-page);
}
.lpk-404__search input:focus { outline: none; border-color: var(--color-text-primary); }
.lpk-404__search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--color-text-secondary); }

.lpk-404__cats { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; max-width: 720px; margin: 0 auto; }
.lpk-404__cats a {
  padding: 8px 16px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-pill);
  text-decoration: none;
  color: var(--color-text-primary);
  font-size: var(--fs-body-sm);
  transition: background-color var(--motion-fast);
}
.lpk-404__cats a:hover { background: var(--color-bg-inverse); color: white; border-color: var(--color-bg-inverse); }

/* === Search results header ====================================== */
.lpk-search-head { padding: var(--space-6) 0 var(--space-4); }
.lpk-search-head__query {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  margin: 0;
}
.lpk-search-head__query em { font-style: normal; color: var(--color-text-secondary); }
.lpk-search-head__count { color: var(--color-text-secondary); margin: var(--space-2) 0 0; font-size: var(--fs-body-sm); }
.lpk-search-empty { text-align: center; padding: var(--space-12) var(--space-4); }
.lpk-search-empty h3 { font-family: var(--font-heading); font-size: var(--fs-h3); font-weight: var(--fw-bold); margin: 0 0 var(--space-3); }
.lpk-search-empty p { color: var(--color-text-secondary); max-width: 50ch; margin: 0 auto var(--space-4); }
.lpk-search-empty__suggestion { display: inline-flex; gap: 6px; align-items: baseline; padding: var(--space-3) var(--space-4); background: var(--color-bg-surface); border-radius: var(--radius-md); margin-bottom: var(--space-6); }

/* === Blog index =================================================== */
.lpk-blog-index { padding: var(--space-6) 0 var(--space-12); }
.lpk-blog-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; margin-bottom: var(--space-8); }
@media (min-width: 768px) { .lpk-blog-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); } }
@media (min-width: 1024px) { .lpk-blog-grid { grid-template-columns: repeat(3, 1fr); } }
.lpk-blog-card {
  background: var(--color-bg-page);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: transform var(--motion-base), box-shadow var(--motion-base);
}
.lpk-blog-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.lpk-blog-card__img { aspect-ratio: 16 / 10; background: var(--color-bg-surface); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.lpk-blog-card__img img { width: 100%; height: 100%; object-fit: cover; }
.lpk-blog-card__img--placeholder { background: repeating-linear-gradient(45deg, var(--color-bg-surface), var(--color-bg-surface) 12px, var(--color-bg-subtle) 12px, var(--color-bg-subtle) 24px); }
.lpk-blog-card__body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.lpk-blog-card__cat { font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--color-text-secondary); font-weight: var(--fw-semibold); }
.lpk-blog-card__title { font-family: var(--font-heading); font-size: var(--fs-body-lg); font-weight: var(--fw-bold); line-height: 1.3; margin: 0; }
.lpk-blog-card__excerpt { font-size: var(--fs-body-sm); color: var(--color-text-secondary); line-height: 1.5; margin: 0; }
.lpk-blog-card__meta { font-size: var(--fs-caption); color: var(--color-text-tertiary); margin-top: auto; padding-top: var(--space-2); }

/* Blog post hero (separate from generic page hero) */
.lpk-blog-post__hero { aspect-ratio: 21 / 9; background: var(--color-bg-surface); border-radius: var(--radius-md); margin: 0 0 var(--space-6); overflow: hidden; }
.lpk-blog-post__hero img { width: 100%; height: 100%; object-fit: cover; }
.lpk-blog-post__hero--placeholder { background: repeating-linear-gradient(45deg, var(--color-bg-surface), var(--color-bg-surface) 14px, var(--color-bg-subtle) 14px, var(--color-bg-subtle) 28px); display: flex; align-items: center; justify-content: center; color: var(--color-text-secondary); font-family: var(--font-mono); font-size: var(--fs-body-sm); }

/* Inline product reference inside articles */
.lpk-article-product {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  margin: var(--space-5) 0;
  background: var(--color-bg-page);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--motion-fast);
}
.lpk-article-product:hover { border-color: var(--color-text-primary); }
.lpk-article-product__img { width: 80px; height: 80px; background: var(--color-bg-surface); border-radius: var(--radius-sm); padding: 6px; }
.lpk-article-product__img img { width: 100%; height: 100%; object-fit: contain; }
.lpk-article-product__title { font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--fs-body-sm); margin: 0 0 4px; line-height: 1.3; }
.lpk-article-product__meta { font-size: var(--fs-caption); color: var(--color-text-secondary); }
.lpk-article-product__price { font-weight: var(--fw-bold); white-space: nowrap; font-size: var(--fs-body); }

/* Share row (blog post) */
.lpk-share { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) 0; border-top: 1px solid var(--color-border-subtle); border-bottom: 1px solid var(--color-border-subtle); margin: var(--space-6) 0; }
.lpk-share__label { font-size: var(--fs-body-sm); color: var(--color-text-secondary); font-weight: var(--fw-medium); }
.lpk-share__btns { display: flex; gap: var(--space-2); margin-left: auto; }
.lpk-share__btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--color-border-subtle); background: white; display: flex; align-items: center; justify-content: center; color: var(--color-text-primary); transition: background-color var(--motion-fast); }
.lpk-share__btn:hover { background: var(--color-bg-surface); }
.pdp-tabs__panel--full { max-width: none; }

/* === Overview tab — full-width editorial layout (banners, bands, stats) ==== */
.lpk-overview__hero {
  display: grid;
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-6) 0;
}
@media (min-width: 1024px) {
  .lpk-overview__hero { grid-template-columns: 1fr 1fr; gap: var(--space-10); padding: var(--space-8) 0; }
}
.lpk-overview__h {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  margin: 0 0 var(--space-3);
}
.lpk-overview__lead {
  font-size: var(--fs-body-lg);
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0;
  max-width: 60ch;
}
.lpk-overview__hero-image {
  background: var(--color-bg-surface);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3;
}
.lpk-overview__hero-image img { max-width: 100%; max-height: 100%; object-fit: contain; }

.lpk-overview__band {
  display: grid;
  gap: var(--space-6);
  align-items: center;
  margin: var(--space-8) calc(var(--gutter) * -1);
  padding: var(--space-8) var(--gutter);
  background: var(--color-bg-surface);
  border-radius: 0;
}
@media (min-width: 1024px) {
  .lpk-overview__band {
    grid-template-columns: 1.1fr 1fr;
    gap: var(--space-10);
    padding: var(--space-10) var(--gutter);
  }
  .lpk-overview__band--reverse .lpk-overview__band-image { order: 2; }
}
.lpk-overview__band-copy h3 {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  margin: 0 0 var(--space-3);
  line-height: 1.2;
}
.lpk-overview__band-copy p {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0;
  max-width: 56ch;
}
.lpk-overview__band-image {
  background: var(--color-bg-page);
  border-radius: var(--radius-md);
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.lpk-overview__band-image--placeholder {
  display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(45deg, var(--color-bg-page), var(--color-bg-page) 12px, var(--color-bg-subtle) 12px, var(--color-bg-subtle) 24px);
  border: 1px dashed var(--color-border-strong);
}
.lpk-overview__band-image--placeholder span {
  font-family: var(--font-mono); font-size: var(--fs-body-sm); color: var(--color-text-secondary);
}

.lpk-overview__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  padding: var(--space-6) 0;
  text-align: center;
}
@media (min-width: 768px) {
  .lpk-overview__stats { grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
}
.lpk-overview__stat strong {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: 1;
  margin-bottom: 4px;
}
.lpk-overview__stat span { color: var(--color-text-secondary); font-size: var(--fs-body-sm); }

/* Native <details>/<summary> accordion — used in Q&A on PDP.
   Mirrors the .accordion__header/__body pattern from components.css. */
details.accordion__item { padding: 0; }
details.accordion__item > summary.accordion__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-4) 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--color-text-primary);
}
details.accordion__item > summary.accordion__summary::-webkit-details-marker { display: none; }
details.accordion__item > summary.accordion__summary::after {
  content: '';
  width: 16px; height: 16px; flex-shrink: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat center / contain;
  transition: transform var(--motion-base);
}
details.accordion__item[open] > summary.accordion__summary::after { transform: rotate(180deg); }
details.accordion__item > summary.accordion__summary:hover { color: var(--color-text-primary); }
details.accordion__item > .accordion__body {
  padding: 0 0 var(--space-4);
  color: var(--color-text-secondary);
  line-height: var(--lh-body);
}
details.accordion__item > .accordion__body p { margin: 0 0 var(--space-2); }
details.accordion__item > .accordion__body p:last-child { margin-bottom: 0; }

/* Q&A: search bar + ask-a-question CTA */
.lpk-qa__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.lpk-qa__head h3 {
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  margin: 0;
}

/* Specs tab — grouped by section, alternating rows for readability */
.lpk-specs { max-width: 760px; }
.lpk-specs__group { margin-bottom: var(--space-6); }
.lpk-specs__group:last-child { margin-bottom: 0; }
.lpk-specs__group-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--fs-overline);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-overline);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-subtle);
}
.lpk-specs__group-title::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-accent-mint);
}
.lpk-specs__list {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 0;
}
@media (max-width: 640px) {
  .lpk-specs__list { grid-template-columns: 1fr; }
}
.lpk-specs__list dt,
.lpk-specs__list dd {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-subtle);
  margin: 0;
}
.lpk-specs__list dt {
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
  font-size: var(--fs-body-sm);
}
.lpk-specs__list dd {
  color: var(--color-text-primary);
  font-size: var(--fs-body-sm);
}
@media (max-width: 640px) {
  .lpk-specs__list dt { padding-bottom: 0; border-bottom: 0; }
}

/* === Aliases for commerce mockups (added 2026-05-06) ============
   These map the markup used in Batch 3.5-B to the existing CSS in
   components.css. They support the .breadcrumb / .form-field naming
   used in the commerce HTML files without rewriting every page. */

/* Breadcrumb (singular) — auto-generates › separators between items. */
.breadcrumb { padding: var(--space-4) 0; font-size: var(--fs-body-sm); color: var(--color-text-secondary); }
.breadcrumb__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.breadcrumb__list li { display: inline-flex; align-items: center; gap: var(--space-2); }
.breadcrumb__list li:not(:last-child)::after { content: '\203A'; color: var(--color-text-tertiary); user-select: none; }
.breadcrumb__list a { color: var(--color-text-secondary); text-decoration: none; }
.breadcrumb__list a:hover { color: var(--color-text-primary); text-decoration: underline; }
.breadcrumb__list [aria-current="page"] { color: var(--color-text-primary); font-weight: var(--fw-medium); }
/* Mobile: keep breadcrumb on a single line and let it scroll horizontally
   when paths are long (e.g. Home > Keyboards > Wireless > Ergonomic > Wave Keys).
   Stacking onto multiple lines wastes vertical space above the gallery. */
@media (max-width: 767px) {
  .breadcrumb {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .breadcrumb::-webkit-scrollbar { display: none; }
  .breadcrumb__list { flex-wrap: nowrap; white-space: nowrap; }
  .breadcrumb__list li { flex-shrink: 0; }
}

/* Form-field aliases — map .form-field / .form-field__input to design tokens. */
.form-field { display: flex; flex-direction: column; gap: var(--space-2); }
.form-field__label { font-size: var(--fs-body-sm); font-weight: var(--fw-medium); color: var(--color-text-primary); }
.form-field__input,
select.form-field__input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  min-height: 44px;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  transition: border-color var(--motion-fast);
}
.form-field__input:hover { border-color: var(--color-border-strong); }
.form-field__input:focus {
  outline: none;
  border: 2px solid var(--color-accent-mint);
  padding: calc(var(--space-3) - 1px) calc(var(--space-4) - 1px);
}
.form-field__input:read-only,
.form-field__input[readonly] { background: var(--color-bg-surface); color: var(--color-text-secondary); }
select.form-field__input {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: var(--space-10);
}
.form-field__hint { font-size: var(--fs-caption); color: var(--color-text-secondary); }

/* Pagination — support raw <nav class="pagination"> with direct <a> children. */
.pagination__item {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 var(--space-3);
  font-size: var(--fs-body-sm); font-weight: var(--fw-medium);
  color: var(--color-text-primary); background: var(--color-bg-page);
  border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md);
  text-decoration: none; transition: background-color var(--motion-fast);
}
.pagination__item:hover { background: var(--color-bg-surface); }
.pagination__item--current,
.pagination__item[aria-current="page"] {
  background: var(--color-bg-inverse); color: white; border-color: var(--color-bg-inverse);
}
.pagination__item[aria-disabled="true"] { color: var(--color-text-tertiary); pointer-events: none; }

/* In narrow grids (sidebar layout, account wishlist, cart upsell rail),
   show the tagline in a slightly smaller font so it stays balanced with
   the 15px title. Badges keep their default 12px size. (2026-05-06 v3) */
@media (min-width: 1024px) {
  .lpk-cat-layout .lpk-grid .product-card__tagline,
  .lpk-account__layout .lpk-grid .product-card__tagline,
  .lpk-cart .lpk-rail .product-card__tagline {
    font-size: 12px;
    line-height: 1.3;
  }
}