/* CODEX visual polish layer
   Purpose: late, visible layout corrections without editing Claude's in-flight CSS. */

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

html {
  overflow-x: clip;
}

body {
  overflow-x: clip;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

.container,
.section,
.section__head,
.card,
[class*="__card"],
[class*="-card"] {
  min-width: 0;
}

.section {
  scroll-margin-top: 96px;
}

.section__head {
  display: grid;
  gap: clamp(8px, 1.2vw, 14px);
  margin-bottom: clamp(28px, 4.2vw, 54px);
}

.section__eyebrow,
.eyebrow,
[class*="__eyebrow"] {
  line-height: 1.15;
  letter-spacing: .08em;
}

.section__title,
.hero__title,
h1,
h2,
h3 {
  text-wrap: balance;
}

.section__lead,
.hero__lead,
.card p,
[class*="__body"],
[class*="__lead"] {
  text-wrap: pretty;
}

.btn,
button,
[role="button"],
.badge,
[class*="badge"],
[class*="chip"],
[class*="pill"] {
  max-width: 100%;
}

.btn,
button,
[role="button"] {
  min-height: 44px;
}

.btn--sm,
.btn.btn--sm {
  min-height: 44px !important;
  block-size: auto !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.fp-carousel__dot,
.cat-quick-filter,
.shop-quick-filter,
.print-button {
  min-block-size: 44px !important;
}

.fp-carousel__dot {
  inline-size: 44px !important;
  min-inline-size: 44px !important;
}

.badge,
[class*="badge"],
[class*="chip"],
[class*="pill"] {
  line-height: 1.2;
  white-space: normal;
}

@media (max-width: 899px) {
  .container {
    width: min(100% - 32px, var(--container, 1180px));
  }

  .section {
    padding-block: clamp(44px, 12vw, 72px);
  }

  .section__head {
    margin-bottom: clamp(24px, 8vw, 36px);
  }

  .card,
  [class*="__card"],
  [class*="-card"] {
    border-radius: min(var(--radius-lg, 16px), 16px);
  }
}

/* Tablet/mobile controls: close/help buttons should never be 22-36px slivers. */
@media (max-width: 1024px) {
  button[aria-label="Close"],
  button[aria-label="Close drawer"],
  button[aria-label="Close help"],
  button[aria-label="Choose language"],
  .lang-banner__close,
  .announcement-bar__close,
  .admin-products-search-help,
  .admin-inv-picker__close,
  .admin-home2__pill-top,
  .glossary-locale__btn,
  .togo-help-btn,
  .togo-help-nudge__close,
  [data-togo-close],
  [data-close] {
    inline-size: 44px !important;
    min-inline-size: 44px !important;
    block-size: 44px !important;
    min-block-size: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    line-height: 1 !important;
  }
}

/* Site chrome controls: keep icon-only controls tappable and stop the top
   announcement strip from clipping text on desktop/tablet too. */
.announcement-bar {
  min-block-size: 44px;
  padding-block: 6px;
}

.announcement-bar__close,
.lang-banner__close,
button[aria-label="Choose language"],
#togo-lang-switcher-btn,
#togo-theme-toggle.togo-theme-toggle--header {
  min-inline-size: 44px !important;
  min-block-size: 44px !important;
}

.announcement-bar__close,
.lang-banner__close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

@media (max-width: 520px) {
  .tgp-superfooter__payments,
  .sg-nav__links {
    max-width: 100% !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .tgp-superfooter__payments::-webkit-scrollbar,
  .sg-nav__links::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 480px) {
  .notfound__search,
  form[role="search"] {
    flex-wrap: wrap !important;
  }

  .notfound__search input,
  form[role="search"] input[type="search"] {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }

  .notfound__search .btn,
  form[role="search"] .btn {
    width: 100% !important;
  }

  body[data-page="blog-article"] .article-byline,
  body[data-page="blog-article"] .article-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px 12px !important;
  }

  body[data-page="blog-article"] .article-byline__reading-time {
    width: auto !important;
    max-width: 100% !important;
    flex: 0 1 auto !important;
  }
}

/* Blog comparison tables: readable columns without pushing the page sideways. */
@media (max-width: 900px) {
  body[data-page="blog-article"] table,
  body[data-page="blog-article"] .article-compare {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }

  body[data-page="blog-article"] th,
  body[data-page="blog-article"] td {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
}

/* Account: stop sticky subnav and order toolbar competing for the same row. */
@media (max-width: 768px) {
  body[data-page="account-orders"] .aor-toolbar {
    position: static !important;
    top: auto !important;
    z-index: 18 !important;
  }

  body[data-page="account"] .togov2-stats {
    grid-template-columns: 1fr !important;
  }
}

@media (min-width: 421px) and (max-width: 720px) {
  body[data-page="account"] .togov2-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Commerce: light mode controls should be light, not dark surfaces pasted into a light page. */
html[data-theme="light"] body[data-page="shop"] .shop-sidebar,
html[data-theme="light"] body[data-page="shop"] .shop-drawer,
html[data-theme="light"] body[data-page="shop"] .shop-filter,
html[data-theme="light"] body[data-page="shop"] .shop-control,
html[data-theme="light"] body[data-page="shop"] .shop-toolbar,
html[data-theme="light"] body[data-page="shop"] .shop-quick-filter {
  background: #fff !important;
  color: #15151a !important;
  border-color: rgba(17, 24, 39, .12) !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .08);
}

html[data-theme="light"] body[data-page="shop"] .shop-sidebar *,
html[data-theme="light"] body[data-page="shop"] .shop-drawer * {
  color: inherit;
}

/* PDP sticky purchase bar sits above bottom nav instead of fighting it. */
@media (max-width: 767px) {
  body[data-page="compound"] .sticky-bar {
    bottom: calc(var(--tgp-mn-height, 64px) + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 80 !important;
  }

  body[data-page="compound"] .sticky-bar__inner {
    padding: 10px 14px;
  }
}

@media (max-width: 1100px) {
  body[data-page="compound"] .compound-hero,
  body[data-page="compound"] .compound-hero__media,
  body[data-page="compound"] .compound-hero__media picture,
  body[data-page="compound"] .compound-hero__media img {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body[data-page="compound"] .compound-hero__media {
    width: 100% !important;
    overflow: hidden !important;
  }

  body[data-page="compound"] .compound-hero__media img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
}

/* Compare tool: tablet gets two usable columns, not three cramped ones. */
@media (min-width: 768px) and (max-width: 1023px) {
  body[data-page="compound-compare"] .compare-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Stack builder: buttons wrap and +/- controls become real touch targets. */
body[data-page="stack-builder"] .stack-panel__actions {
  flex-wrap: wrap;
}

body[data-page="stack-builder"] .stack-panel__actions .btn {
  min-width: min(100%, 150px);
  white-space: normal;
}

body[data-page="stack-builder"] .sc-item__add {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  display: inline-grid !important;
  place-items: center !important;
}

@media (max-width: 520px) {
  body[data-page="stack-builder"] .sc-item {
    align-items: center;
    gap: 12px;
  }
}

/* Blog hub: use a real mobile grid, not a disguised carousel with cropped cards. */
@media (max-width: 767px) {
  body[data-page="blog-hub"] .blog-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    overflow: visible !important;
    padding-inline: 0 !important;
    margin-inline: 0 !important;
    gap: 16px !important;
  }

  body[data-page="blog-hub"] .blog-card {
    width: 100% !important;
    min-width: 0 !important;
    flex: initial !important;
  }
}

/* Article tables: preserve readable columns through internal scroll, not page squeeze. */
.article table,
.post-content table,
body[class*="blog"] table,
body[data-page^="blog"] table {
  width: max-content;
  min-width: 100%;
}

.article table,
.post-content table {
  display: table;
}

@media (max-width: 767px) {
  .article table,
  .post-content table,
  body[class*="blog"] table,
  body[data-page^="blog"] table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-radius: 14px;
    -webkit-overflow-scrolling: touch;
  }
}

/* Blog print CTA: same button weight as tools/compound pages. */
.print-button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-surface-raised, #171717) 92%, transparent);
  color: var(--color-text);
  font-weight: 700;
  text-decoration: none;
}

html[data-theme="light"] .print-button {
  background: #fff;
  color: #15151a;
  border-color: rgba(17, 24, 39, .14);
}

/* Admin: reduce topbar crowding and keep sticky table/list headers below it. */
@media (max-width: 880px) {
  body.has-admin-shell .admin-topbar {
    min-height: 64px;
    gap: 8px;
  }

  body.has-admin-shell .admin-topbar__breadcrumb {
    display: none !important;
  }

  body.has-admin-shell .admin-topbar__search {
    flex: 1 1 160px;
    min-width: 0;
  }

  body.has-admin-shell .admin-topbar__storefront {
    min-width: 44px;
    padding-inline: 10px;
  }
}

@media (max-width: 767px) {
  body.has-admin-shell .admin-products-list__head,
  body.has-admin-shell .admin-products-table thead,
  body.has-admin-shell [class*="products"] [class*="head"][style*="sticky"] {
    top: 64px !important;
    z-index: 15 !important;
  }
}

/* About timeline: visible rebuild so dates, dots and copy never crowd. */
body[data-page="about"] .timeline {
  --timeline-rail: 48px;
  --timeline-gap: clamp(18px, 3vw, 28px);
  position: relative;
  display: grid;
  gap: clamp(16px, 2.6vw, 24px);
  max-width: 760px;
  margin-inline: auto;
  padding: 0;
  list-style: none;
}

body[data-page="about"] .timeline::before {
  content: "";
  position: absolute;
  inset-block: 20px 20px;
  left: calc(var(--timeline-rail) / 2);
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-accent) 96%, transparent) 0%,
    color-mix(in srgb, var(--color-accent) 56%, transparent) 72%,
    color-mix(in srgb, var(--color-accent) 22%, transparent) 100%
  );
}

body[data-page="about"] .timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: var(--timeline-rail) minmax(0, 1fr);
  column-gap: var(--timeline-gap);
  align-items: start;
  padding: clamp(18px, 3vw, 24px);
  padding-left: 0;
  min-height: 118px;
  border: 1px solid color-mix(in srgb, var(--color-border, currentColor) 78%, transparent);
  border-radius: 18px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 8%, transparent), transparent 42%),
    color-mix(in srgb, var(--color-surface-raised, #151515) 94%, transparent);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .12);
}

body[data-page="about"] .timeline__item > :not(.timeline__dot) {
  grid-column: 2;
}

body[data-page="about"] .timeline__dot {
  position: relative;
  grid-column: 1;
  grid-row: 1 / span 3;
  justify-self: center;
  top: 2px;
  left: auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border: 3px solid color-mix(in srgb, var(--color-surface-raised, #151515) 92%, white 8%);
  border-radius: 999px;
  background: var(--color-accent);
  box-shadow:
    0 0 0 6px color-mix(in srgb, var(--color-accent) 16%, transparent),
    0 0 0 12px color-mix(in srgb, var(--color-accent) 7%, transparent);
  z-index: 1;
}

body[data-page="about"] .timeline__item--future .timeline__dot {
  background: color-mix(in srgb, var(--color-surface-raised, #151515) 88%, white 12%);
  border-color: var(--color-accent);
}

body[data-page="about"] .timeline__year {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 30px;
  margin: 0 0 10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  color: var(--color-accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1;
}

body[data-page="about"] .timeline__title {
  margin: 0 0 8px;
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.2;
}

body[data-page="about"] .timeline__body {
  max-width: 62ch;
  margin: 0;
  font-size: clamp(14px, 1.8vw, 16px);
  line-height: 1.72;
}

html[data-theme="light"] body[data-page="about"] .timeline__item {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 7%, transparent), transparent 42%),
    #fff;
  box-shadow: 0 18px 38px rgba(15, 23, 42, .08);
}

html[data-theme="light"] body[data-page="about"] .timeline__dot {
  border-color: #fff;
}

@media (max-width: 520px) {
  body[data-page="about"] .timeline {
    --timeline-rail: 40px;
    gap: 14px;
  }

  body[data-page="about"] .timeline::before {
    left: calc(var(--timeline-rail) / 2);
    inset-block: 18px;
  }

  body[data-page="about"] .timeline__item {
    column-gap: 14px;
    min-height: 0;
    padding: 18px 16px 18px 0;
    border-radius: 16px;
  }

  body[data-page="about"] .timeline__dot {
    width: 16px;
    height: 16px;
    box-shadow:
      0 0 0 5px color-mix(in srgb, var(--color-accent) 16%, transparent),
      0 0 0 9px color-mix(in srgb, var(--color-accent) 6%, transparent);
  }

  body[data-page="about"] .timeline__year {
    margin-bottom: 9px;
    padding-inline: 9px;
  }
}

/* Stronger than Claude's unscoped .timeline !important rules. */
body[data-page="about"] .timeline {
  padding: 0 !important;
}

body[data-page="about"] .timeline::before {
  left: calc(var(--timeline-rail) / 2) !important;
}

body[data-page="about"] .timeline__item {
  padding: clamp(18px, 3vw, 24px) !important;
  padding-left: 0 !important;
  padding-bottom: clamp(18px, 3vw, 24px) !important;
}

body[data-page="about"] .timeline__dot {
  left: auto !important;
  top: 2px !important;
  width: 18px !important;
  height: 18px !important;
}

body[data-page="about"] .timeline__year {
  display: inline-flex !important;
  margin: 0 0 10px !important;
  letter-spacing: .08em !important;
}

body[data-page="about"] .timeline__title {
  margin: 0 0 8px !important;
}

body[data-page="about"] .timeline__body {
  margin: 0 !important;
}

@media (max-width: 520px) {
  body[data-page="about"] .timeline::before {
    left: calc(var(--timeline-rail) / 2) !important;
  }

  body[data-page="about"] .timeline__item {
    padding: 18px 16px 18px 0 !important;
  }

  body[data-page="about"] .timeline__dot {
    left: auto !important;
    width: 16px !important;
    height: 16px !important;
  }
}

/* Static pages: legal/contact/help cards and accordions share the same rhythm. */
html[data-theme="light"] body[data-page="legal"] .card.card--interactive {
  background: #fff !important;
  color: #15151a !important;
  border-color: rgba(17, 24, 39, .12) !important;
  box-shadow: 0 16px 34px rgba(15, 23, 42, .08);
}

body[data-page="legal"] .grid.grid-2 > .card:last-child:nth-child(odd),
body[data-page="contact"] .grid.grid-2 > .card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

body[data-page="contact"] .grid.grid-2 > .card {
  display: flex;
  flex-direction: column;
}

body[data-page="contact"] .grid.grid-2 > .card > p:last-child {
  margin-top: auto !important;
  padding-top: var(--space-4);
}

body[data-page="contact"] .btn {
  white-space: normal !important;
  min-width: 0;
}

body[data-page="help"] .faq-list {
  gap: 14px !important;
}

body[data-page="help"] .faq-item {
  padding: 0 !important;
  overflow: hidden;
  border-radius: 14px !important;
  background: var(--color-surface-raised, var(--color-surface)) !important;
}

body[data-page="help"] .faq-item > summary {
  min-height: 58px;
  padding: 16px 18px !important;
  gap: 16px !important;
}

body[data-page="help"] .faq-item > summary span[aria-hidden="true"] {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  color: var(--color-accent) !important;
  font-weight: 800;
}

body[data-page="help"] .faq-item[open] > summary {
  border-bottom: 1px solid var(--color-border);
}

body[data-page="help"] .faq-item > div {
  margin: 0 !important;
  padding: 16px 18px 18px !important;
}

body[data-page="help"] .section--surface .container > p[style*="margin-top"] {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

body[data-page="help"] .section--surface .container > p[style*="margin-top"] .btn {
  margin-left: 0 !important;
}

@media (max-width: 767px) {
  body[data-page="contact"] .grid.grid-2,
  body[data-page="legal"] .grid.grid-2 {
    grid-template-columns: 1fr !important;
  }

  body[data-page="contact"] .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Horizontal rails should feel intentional: clipped page, internal scroll. */
@media (max-width: 767px) {
  .shop-quick-filters,
  .cat-quick-filters,
  .account-subnav__scroll,
  .category-top-picks,
  .featured-products__track,
  .blog-grid,
  [class*="rail"],
  [class*="carousel"] {
    max-width: 100%;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .shop-quick-filters::-webkit-scrollbar,
  .cat-quick-filters::-webkit-scrollbar,
  .account-subnav__scroll::-webkit-scrollbar,
  .category-top-picks::-webkit-scrollbar,
  .featured-products__track::-webkit-scrollbar,
  .blog-grid::-webkit-scrollbar,
  [class*="rail"]::-webkit-scrollbar,
  [class*="carousel"]::-webkit-scrollbar {
    display: none;
  }
}

/* Footer: keep long legal/entity lines professional on narrow screens. */
.site-footer__entity,
.site-footer a,
.site-footer p {
  overflow-wrap: anywhere;
}

@media (max-width: 767px) {
  .site-footer {
    text-align: left;
  }

  .site-footer__grid {
    gap: 0;
  }

  .site-footer__bottom {
    gap: 8px;
  }
}

/* Codex sweep 10: remove remaining measured control clipping/rail ambiguity. */
.site-header__actions a[href="/pay.html"].btn,
.site-header__actions .btn--primary {
  min-block-size: 50px !important;
  block-size: 50px !important;
  line-height: 1 !important;
  padding-block: 0 !important;
  overflow: hidden !important;
}

@media (min-width: 600px) and (max-width: 899px) {
  .account-subnav {
    position: relative !important;
    top: auto !important;
    overflow: visible !important;
  }

  .account-subnav__inner {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    max-width: 100% !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
  }

  .account-subnav__tab {
    justify-content: center !important;
    flex: initial !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 10px 8px !important;
    border-radius: 10px !important;
    text-align: center !important;
    scroll-snap-align: none !important;
  }

  .account-subnav__label {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

@media (max-width: 420px) {
  .account-subnav__inner {
    padding-inline: 12px !important;
  }

  .account-subnav__tab {
    gap: 6px !important;
    padding-inline: 10px !important;
  }

  .account-subnav__icon {
    display: inline-flex !important;
  }
}

@media (max-width: 599px) {
  .account-subnav {
    overflow: hidden !important;
  }

  .account-subnav__inner {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    max-width: 100% !important;
    padding: 6px 12px 7px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x proximity !important;
  }

  .account-subnav__tab {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    min-height: 42px !important;
    justify-content: center !important;
    flex-direction: row !important;
    gap: 6px !important;
    padding: 8px 11px !important;
    border-radius: 999px !important;
    text-align: center !important;
    background: color-mix(in srgb, var(--color-surface) 42%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent) !important;
    scroll-snap-align: center !important;
  }

  .account-subnav__label {
    max-width: 100% !important;
    min-width: max-content !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
  }

  .account-subnav__label::after {
    content: none !important;
    display: none !important;
  }

  .account-subnav__icon {
    display: inline-flex !important;
    width: 15px !important;
    height: 15px !important;
    flex: 0 0 15px !important;
  }

  body[data-page="account-orders"] .aor-toolbar {
    position: static !important;
    top: auto !important;
  }
}

@media (max-width: 767px) {
  body[data-page="shop"] .shop-quick-filters,
  body[data-page="stack-builder"] .stack-catalog__filter {
    display: flex !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
    padding-bottom: 0 !important;
  }

  body[data-page="shop"] .shop-quick-filter,
  body[data-page="stack-builder"] .stack-catalog__filter button {
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 0 !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

body[data-page="stack-builder"] .sc-item__add {
  flex: 0 0 44px !important;
  line-height: 1 !important;
  overflow: hidden !important;
}

body[data-page="stack-builder"] .sc-item__add::before {
  display: none !important;
}

body[data-page^="admin"] .admin-inv-rowmenu-trigger,
body[data-page^="admin"] .tools-btn--sm,
body[data-page^="admin"] .tools-chip {
  min-inline-size: 44px !important;
  min-block-size: 44px !important;
}

body[data-page="shop"] .shop-search input,
body[data-page="shop"] .shop-sort,
body[data-page="shop"] .shop-mobile-filter-btn,
body[data-page="shop"] .shop-density {
  min-block-size: 44px !important;
  block-size: 44px !important;
}

body[data-page="shop"] .shop-toolbar__right {
  min-block-size: 44px !important;
  overflow: visible !important;
}

body[data-page="account"] .togov2-quick__strip {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  max-width: 100% !important;
  overflow: visible !important;
  scroll-snap-type: none !important;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
}

body[data-page="account"] .togov2-quick__chip {
  inline-size: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: initial !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  scroll-snap-align: none !important;
}

#togov2-bell,
.togo-help-btn {
  min-inline-size: 44px !important;
}

/* Codex sweep 11: remove the next measured commerce/account/admin clamps. */
body[data-page="shop"] .entry-grid .card,
body[data-page="shop"] .shop-grid .card {
  min-width: 0 !important;
}

body[data-page="shop"] .entry-grid .card__body-text,
body[data-page="shop"] .shop-grid .card__body-text {
  display: block !important;
  -webkit-line-clamp: initial !important;
  -webkit-box-orient: initial !important;
  overflow: visible !important;
  min-block-size: auto !important;
  max-block-size: none !important;
  line-height: 1.45 !important;
}

body[data-page="wishlist"] #wl-toolbar {
  align-items: stretch !important;
  gap: 10px !important;
  overflow: visible !important;
}

body[data-page="wishlist"] #wl-toolbar .btn {
  min-block-size: 56px !important;
  block-size: auto !important;
  line-height: 1.1 !important;
  overflow: visible !important;
  white-space: normal !important;
}

body[data-page$="-stack"] .hero__title {
  line-height: 1.08 !important;
  overflow: visible !important;
  padding-bottom: 0.06em !important;
}

@media (max-width: 767px) {
  body[data-page$="-stack"] main > .section .grid.grid-3 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    overflow: visible !important;
    max-width: 100% !important;
  }

  body[data-page$="-stack"] main > .section .grid.grid-3 > .card,
  body[data-page$="-stack"] main > .section .grid.grid-3 > a.card {
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
  }

  body[data-page$="-stack"] .card__title,
  body[data-page$="-stack"] .card__body-text {
    overflow-wrap: anywhere !important;
  }

  body[data-page$="-stack"] main > .section .grid.grid-3 .card__body-text {
    display: block !important;
    -webkit-line-clamp: initial !important;
    -webkit-box-orient: initial !important;
    overflow: visible !important;
    max-block-size: none !important;
  }
}

body[data-page$="-stack"] .consent-check input[type="checkbox"],
body[data-page="pay"] input[type="checkbox"] {
  inline-size: 40px !important;
  block-size: 40px !important;
  min-inline-size: 40px !important;
  min-block-size: 40px !important;
  accent-color: var(--color-accent, #e01b1b);
}

body[data-page="pay"] .pay-summary__consent input[type="checkbox"] {
  inline-size: 18px !important;
  block-size: 18px !important;
  min-inline-size: 18px !important;
  min-block-size: 18px !important;
  margin-block-start: 2px !important;
}

body[data-page^="admin"] input,
body[data-page^="admin"] select,
body[data-page^="admin"] .admin-sh-quickbar__btn,
body[data-page^="admin"] .admin-tax-quickbar__btn,
body[data-page^="admin"] .admin-pm-quickbar__btn,
body[data-page^="admin"] .admin-cust-quickbar__btn,
body[data-page^="admin"] .admin-ret-quickbar__btn,
body[data-page^="admin"] .admin-products-quickbar__btn {
  min-block-size: 44px !important;
}

body[data-page^="admin"] input[type="checkbox"] {
  inline-size: 40px !important;
  block-size: 40px !important;
  min-inline-size: 40px !important;
  min-block-size: 40px !important;
  accent-color: var(--color-accent, #e01b1b);
}

body[data-page^="admin"] button[aria-label*="close"],
body[data-page^="admin"] button[aria-label*="Close"],
body[data-page^="admin"] button[aria-label*="Sluit"],
body[data-page^="admin"] button[aria-label*="Sluiten"],
.modal__close,
.drawer__close {
  min-inline-size: 44px !important;
  min-block-size: 44px !important;
}

@media (max-width: 767px) {
  body[data-page="category"] .cat-quick-filters {
    display: flex !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
    max-width: 100% !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
  }

  body[data-page="category"] .cat-quick-filters__label {
    flex: 1 0 100% !important;
  }

  body[data-page="category"] .cat-quick-filter {
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 0 !important;
    justify-content: center !important;
    text-align: center !important;
  }

  body[data-page="category"] .tgp-trust-pills__pill {
    align-items: flex-start !important;
  }

  body[data-page="category"] .tgp-trust-pills__label {
    min-width: 0 !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
  }
}

body[data-page^="admin"] button,
body[data-page^="admin"] [role="button"],
body[data-page^="admin"] .admin-products-search-help {
  min-inline-size: 44px !important;
  min-block-size: 44px !important;
}

/* Codex sweep 12: next audit clusters after the broad v16 pass. */
body[data-page="shop"] .tgp-trust-pills__pill,
body[data-page="category"] .tgp-trust-pills__pill,
body[data-page="compound"] .tgp-trust-pills__pill,
body[data-page="pay"] .tgp-trust-pills__pill {
  align-items: flex-start !important;
}

body[data-page="shop"] .tgp-trust-pills__label,
body[data-page="category"] .tgp-trust-pills__label,
body[data-page="compound"] .tgp-trust-pills__label,
body[data-page="pay"] .tgp-trust-pills__label {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
  overflow-wrap: anywhere !important;
}

body[data-page="shop"] .shop-density button,
body[data-page="shop"] .shop-density [role="button"] {
  min-inline-size: 44px !important;
  min-block-size: 44px !important;
}

@media (max-width: 899px) {
  body[data-page="pay"] #pay-sticky-cta {
    bottom: env(safe-area-inset-bottom, 0px) !important;
    z-index: 70 !important;
  }

  body[data-page="pay"] {
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body[data-page="pay"] #pay-sticky-cta:not(.is-visible) {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body[data-page="pay"] .tgp-back-to-top {
    display: none !important;
  }

  body[data-page="account"] .acct-back-to-shop {
    bottom: calc(var(--tgp-bottom-nav-height, var(--tgp-mn-height, 64px)) + env(safe-area-inset-bottom, 0px) + 12px) !important;
    z-index: 70 !important;
  }
}

body[data-page="account"] #acct-bell,
body[data-page="account"] #acct-order-search,
body[data-page="account"] .acct-search__clear {
  min-inline-size: 44px !important;
  min-block-size: 44px !important;
}

body[data-page="account"] #acct-order-search {
  block-size: 44px !important;
}

body[data-page$="-stack"] .trust-tile__title {
  min-inline-size: 0 !important;
  overflow: visible !important;
  overflow-wrap: anywhere !important;
  line-height: 1.18 !important;
}

body[data-page$="-stack"] #fatloss-checkout-btn {
  min-block-size: 56px !important;
  line-height: 1.1 !important;
  overflow: visible !important;
  white-space: normal !important;
}

.togo-help-nudge__close,
#togo-reading-totop {
  min-inline-size: 44px !important;
  min-block-size: 44px !important;
}

/* Codex sweep 13: structural fixes for the remaining measured UI clusters. */
.site-header__actions a[href="/pay.html"].btn,
.site-header__actions .btn--primary {
  min-block-size: 50px !important;
  block-size: 50px !important;
  line-height: 1.1 !important;
  color: #fff !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

body[data-page="account"] .acct-back-to-shop {
  min-inline-size: 44px !important;
  min-block-size: 44px !important;
}

body[data-page="blog-article"] .article-body h2,
body[data-page="blog-article"] .article-body h3 {
  line-height: 1.22 !important;
  overflow: visible !important;
  padding-bottom: 0.12em !important;
}

@media (min-width: 901px) {
  body[data-page="blog-article"] .article-body h2 .h-anchor,
  body[data-page="blog-article"] .article-body h3 .h-anchor {
    top: 0.06em !important;
    transform: none !important;
    inline-size: 28px !important;
    min-inline-size: 28px !important;
    min-block-size: 28px !important;
    line-height: 1 !important;
  }
}

body[data-page="blog-article"] #togo-toc,
body:not([data-page]) #togo-toc,
body[data-page="loyalty"] #togo-toc,
body[data-page$="-stack"] #togo-toc {
  top: calc(var(--header-height, 64px) + 40px) !important;
  max-block-size: calc(100vh - var(--header-height, 64px) - 72px) !important;
}

@media screen and (max-width: 640px) {
  body[data-page="lab-notebook-templates"] .lab-sheet {
    width: 100%;
    max-width: calc(100vw - 24px);
    padding: 18px 12px 16px;
    overflow: hidden;
    box-sizing: border-box;
  }

  body[data-page="lab-notebook-templates"] .lab-sheet > div:first-child {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    align-items: start !important;
  }

  body[data-page="lab-notebook-templates"] .lab-sheet__field-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  body[data-page="lab-notebook-templates"] .lab-sheet__grid {
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
    font-size: 10px;
  }

  body[data-page="lab-notebook-templates"] .lab-sheet__grid th,
  body[data-page="lab-notebook-templates"] .lab-sheet__grid td {
    min-width: 0;
    height: 28px;
    padding: 4px 3px;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  body[data-page="lab-notebook-templates"] .lab-sheet__grid th {
    font-size: 8px;
    letter-spacing: 0.02em;
  }
}

@media screen and (max-width: 640px) {
  body[data-page="cookie-audit"] .stack-lg,
  body[data-page="cookie-audit"] .card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  body[data-page="cookie-audit"] .card {
    overflow: visible !important;
  }

  body[data-page="cookie-audit"] table,
  body[data-page="cookie-audit"] thead,
  body[data-page="cookie-audit"] tbody,
  body[data-page="cookie-audit"] tr,
  body[data-page="cookie-audit"] th,
  body[data-page="cookie-audit"] td {
    display: block;
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  body[data-page="cookie-audit"] table {
    font-size: 12px !important;
  }

  body[data-page="cookie-audit"] thead {
    display: none;
  }

  body[data-page="cookie-audit"] tr {
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border);
  }

  body[data-page="cookie-audit"] tr:last-child {
    border-bottom: 0;
  }

  body[data-page="cookie-audit"] td {
    padding: 5px 0 !important;
    overflow-wrap: anywhere;
  }
}

@media screen and (max-width: 640px) {
  body .sg-nav__inner,
  body .sg-nav__links,
  body .tgp-superfooter__bottom-inner,
  body .tgp-superfooter__payments {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  body .sg-nav__links {
    flex-wrap: wrap;
    gap: 8px 12px;
  }

  body .sg-nav__links li,
  body .sg-nav__links a {
    min-width: 0;
    max-width: 100%;
  }

  body .tgp-superfooter__bottom-inner {
    justify-content: flex-start;
  }

body .tgp-superfooter__payments {
    flex-wrap: wrap;
    overflow: visible !important;
    gap: 8px;
  }
}

@media (max-width: 767px) {
  body[data-page="home"] #togo-feedback-fab,
  body[data-page="home"] .tgp-back-to-top,
  body[data-page="shop"] #togo-feedback-fab,
  body[data-page="shop"] .tgp-back-to-top,
  body[data-page="category"] #togo-feedback-fab,
  body[data-page="category"] .tgp-back-to-top {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(8px) !important;
  }
}