/** Shopify CDN: Minification failed

Line 11246:26 Unexpected "/"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:ab-404 (INDEX:0) */
.ab-404__cap { max-width: 1440px; margin-inline: auto; }
  .ab-404__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
  }

  .ab-404__eyebrow {
    margin: 0 0 14px;
    font-family: var(--font-body--family);
    font-size: 11px;
    letter-spacing: 2.5px;
    color: var(--ab-404-eyebrow-c, var(--color-primary));
    font-weight: 700;
    text-transform: uppercase;
  }
  .ab-404__number {
    margin: 0 0 8px;
    font-family: var(--font-body--family);
    font-size: var(--ab-404-num-size, 220px);
    font-weight: 800;
    color: var(--ab-404-num-c, var(--color-primary));
    letter-spacing: -12px;
    line-height: 0.85;
  }
  .ab-404__headline {
    margin: 0 0 16px;
    font-family: var(--font-body--family);
    font-weight: 800;
    font-size: var(--ab-404-headline-size, 48px);
    letter-spacing: -1.4px;
    line-height: 1;
    color: var(--ab-404-headline-c, var(--color-foreground));
  }
  .ab-404__headline-accent {
    font-style: italic;
    color: var(--ab-404-headline-accent-c, var(--color-primary));
  }
  .ab-404__body {
    margin: 0 0 28px;
    font-family: var(--font-body--family);
    font-size: 16px;
    line-height: 1.6;
    color: var(--ab-404-body-c, var(--color-foreground-muted));
    max-width: 460px;
  }
  .ab-404__ctas { display: flex; gap: 10px; flex-wrap: wrap; }
  .ab-404__cta {
    padding: 16px 28px;
    font-family: var(--font-body--family);
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
  }
  .ab-404__cta--primary {
    background: var(--ab-404-cta-bg, var(--color-primary));
    color: var(--ab-404-cta-c, var(--color-background));
    border: 0;
  }
  .ab-404__cta--outline {
    background: transparent;
    color: var(--ab-404-outline-c, var(--color-foreground));
    border: 2px solid var(--ab-404-outline-c, var(--color-foreground));
    padding: 14px 26px;
  }

  .ab-404__media {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }
  .ab-404__img,
  .ab-404__img-placeholder { width: 100%; height: 100%; object-fit: cover; }
  .ab-404__sticker {
    position: absolute;
    top: 20px; right: 20px;
    background: var(--ab-404-sticker-bg, #67E8F9);
    color: var(--ab-404-sticker-c, #0B1220);
    padding: 10px 16px;
    font-family: var(--font-body--family);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
  }

  @media screen and (max-width: 989px) {
    .ab-404__row { grid-template-columns: 1fr; gap: 32px; }
    .ab-404__number { font-size: 140px; letter-spacing: -8px; }
    .ab-404__headline { font-size: 32px; }
  }
/* END_SECTION:ab-404 */

/* START_SECTION:ab-about-origin (INDEX:1) */
.ab-or { background: var(--color-background); font-family: var(--font-body--family); }
  .ab-or__cap {
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: var(--ab-or-pad-inline, 48px);
  }
  .ab-or__grid {
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    gap: var(--ab-or-gap, 72px);
    align-items: start;
  }
  .ab-or__media { position: sticky; top: var(--ab-or-sticky-top, 96px); }
  .ab-or__ph {
    position: relative;
    overflow: hidden;
    background: var(--ab-or-ph-bg, #f1f5f9);
    border: 1px solid var(--ab-or-ph-border-c, #e2e8f0);
    aspect-ratio: 3 / 4;
  }
  .ab-or__img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .ab-or__tag {
    position: absolute; left: 14px; bottom: 14px;
    display: inline-flex; align-items: center;
    background: var(--ab-or-tag-bg, rgba(255,255,255,0.92));
    color: var(--ab-or-tag-c, #334155);
    font-size: 11px; font-weight: 600; letter-spacing: 0.4px;
    padding: 6px 10px; border-radius: 4px;
  }
  .ab-or__cap-line {
    display: flex; align-items: center; gap: 10px;
    font-size: 12px; color: var(--ab-or-cap-c, #64748b);
    margin-top: 14px; letter-spacing: 0.3px;
  }
  .ab-or__cap-line .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--ab-or-dot-c, #0891b2);
    flex: none;
  }
  .ab-or__eyebrow {
    font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase;
    color: var(--ab-or-eyebrow-c, #0891b2);
    font-weight: 700; margin: 0 0 14px;
  }
  .ab-or__headline {
    font-size: 46px; font-weight: 800; letter-spacing: -1.4px;
    line-height: 1.02; margin: 0;
    color: var(--ab-or-headline-c, #0b1220);
    font-family: var(--font-body--family);
  }
  .ab-or__lede {
    font-size: 23px; font-weight: 500;
    color: var(--ab-or-lede-c, #0b1220);
    line-height: 1.45; margin: 22px 0 26px;
    letter-spacing: -0.3px; text-wrap: pretty;
  }
  .ab-or__body {
    font-size: 16px;
    color: var(--ab-or-body-c, #334155);
    line-height: 1.72;
  }
  .ab-or__body p { margin: 0 0 18px; }
  .ab-or__body p:last-child { margin-bottom: 0; }
  .ab-or__body strong { color: var(--ab-or-headline-c, #0b1220); }
  .ab-or__pullquote {
    border-left: 3px solid var(--ab-or-rule-c, #0891b2);
    padding: 4px 0 4px 24px;
    margin: 30px 0;
    font-size: 21px; font-weight: 600; font-style: italic;
    color: var(--ab-or-quote-c, #0b1220);
    line-height: 1.4; letter-spacing: -0.3px;
  }

  @media screen and (max-width: 920px) {
    .ab-or__cap { padding-inline: var(--ab-or-pad-inline-m, 24px); }
    .ab-or__grid { grid-template-columns: 1fr; gap: 40px; }
    .ab-or__media { position: static; }
  }
  @media screen and (max-width: 560px) {
    .ab-or__headline { font-size: 32px; letter-spacing: -0.8px; }
    .ab-or__lede { font-size: 19px; }
  }
/* END_SECTION:ab-about-origin */

/* START_SECTION:ab-about-values (INDEX:2) */
.ab-vl {
    background: var(--color-background);
    font-family: var(--font-body--family);
    padding-block: var(--ab-vl-pad-top, 88px) var(--ab-vl-pad-bottom, 88px);
  }
  .ab-vl__cap {
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: var(--ab-vl-pad-inline, 48px);
  }
  .ab-vl__grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: var(--ab-vl-gap, 72px);
    align-items: start;
  }

  .ab-vl__media { display: block; }
  .ab-vl__ph {
    position: relative;
    overflow: hidden;
    background: var(--ab-vl-ph-bg, #f1f5f9);
    border: 1px solid var(--ab-vl-ph-border-c, #e2e8f0);
    aspect-ratio: 3 / 4;
  }
  .ab-vl__img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .ab-vl__tag {
    position: absolute; left: 14px; bottom: 14px;
    display: inline-flex; align-items: center;
    background: var(--ab-vl-tag-bg, rgba(255,255,255,0.92));
    color: var(--ab-vl-tag-c, #334155);
    font-size: 11px; font-weight: 600; letter-spacing: 0.4px;
    padding: 6px 10px; border-radius: 4px;
  }

  .ab-vl__eyebrow {
    font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase;
    color: var(--ab-vl-eyebrow-c, #0891b2);
    font-weight: 700; margin: 0 0 14px;
  }
  .ab-vl__headline {
    font-size: 46px; font-weight: 800; letter-spacing: -1.4px;
    line-height: 1.02; margin: 0 0 8px;
    color: var(--ab-vl-headline-c, #0b1220);
    font-family: var(--font-body--family);
  }
  .ab-vl__intro {
    font-size: 16px;
    color: var(--ab-vl-intro-c, #334155);
    line-height: 1.65;
    margin: 18px 0 0;
    max-width: 460px;
  }
  .ab-vl__list { display: grid; gap: 0; margin-top: 32px; }
  .ab-vl__row {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 22px;
    padding: 26px 0;
    border-bottom: 1px solid var(--ab-vl-rule-c, #e2e8f0);
  }
  .ab-vl__row:first-child { padding-top: 0; }
  .ab-vl__row:last-child  { border-bottom: none; }
  .ab-vl__n {
    font-size: 18px; font-weight: 800; letter-spacing: 1px;
    padding-top: 3px;
    color: var(--ab-vl-num-c, #0891b2);
  }
  .ab-vl__t {
    font-size: 21px; font-weight: 800; letter-spacing: -0.4px;
    margin: 0 0 6px;
    color: var(--ab-vl-title-c, #0b1220);
    font-family: var(--font-body--family);
  }
  .ab-vl__s {
    font-size: 15px; line-height: 1.6;
    color: var(--ab-vl-sub-c, #334155);
    margin: 0;
  }

  @media screen and (max-width: 920px) {
    .ab-vl { padding-block: var(--ab-vl-pad-top-m, 64px) var(--ab-vl-pad-bottom-m, 64px); }
    .ab-vl__cap { padding-inline: var(--ab-vl-pad-inline-m, 24px); }
    .ab-vl__grid { grid-template-columns: 1fr; gap: 40px; }
  }
  @media screen and (max-width: 560px) {
    .ab-vl__headline { font-size: 32px; letter-spacing: -0.8px; }
    .ab-vl__row { grid-template-columns: 40px 1fr; gap: 16px; }
  }
/* END_SECTION:ab-about-values */

/* START_SECTION:ab-about-why (INDEX:3) */
.ab-wy {
    background: var(--ab-wy-bg, #f1f5f9);
    border-block-start: 1px solid var(--ab-wy-border-c, #e2e8f0);
    border-block-end: 1px solid var(--ab-wy-border-c, #e2e8f0);
    font-family: var(--font-body--family);
  }
  .ab-wy__cap {
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: var(--ab-wy-pad-inline, 48px);
  }
  .ab-wy__grid {
    display: grid;
    grid-template-columns: 1.06fr 0.94fr;
    gap: var(--ab-wy-gap, 72px);
    align-items: center;
  }
  .ab-wy__eyebrow {
    font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase;
    color: var(--ab-wy-eyebrow-c, #0891b2);
    font-weight: 700; margin: 0 0 14px;
  }
  .ab-wy__headline {
    font-size: 46px; font-weight: 800; letter-spacing: -1.4px;
    line-height: 1.02; margin: 0;
    color: var(--ab-wy-headline-c, #0b1220);
    font-family: var(--font-body--family);
  }
  .ab-wy__lede {
    font-size: 18px;
    color: var(--ab-wy-lede-c, #334155);
    line-height: 1.65;
    margin: 18px 0 30px;
    max-width: 520px;
  }
  .ab-wy__listhead {
    font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase;
    color: var(--ab-wy-listhead-c, #0b1220);
    font-weight: 700; margin: 0 0 18px;
  }
  .ab-wy__reasons {
    list-style: none; padding: 0; margin: 0;
    display: grid; gap: 0;
  }
  .ab-wy__reasons li {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--ab-wy-rule-c, #e2e8f0);
    font-size: 15px; line-height: 1.45;
    color: var(--ab-wy-reason-c, #0f172a);
  }
  .ab-wy__reasons li:first-child { border-top: 1px solid var(--ab-wy-rule-c, #e2e8f0); }
  .ab-wy__tick {
    flex: none; width: 22px; height: 22px; border-radius: 50%;
    background: var(--ab-wy-tick-bg, #0891b2);
    color: var(--ab-wy-tick-c, #ffffff);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; margin-top: 1px;
  }
  .ab-wy__closer {
    font-size: 15px; line-height: 1.6;
    color: var(--ab-wy-closer-c, #334155);
    margin: 24px 0 0;
  }
  .ab-wy__closer strong { color: var(--ab-wy-headline-c, #0b1220); }

  .ab-wy__media { display: block; }
  .ab-wy__ph {
    position: relative;
    overflow: hidden;
    background: var(--ab-wy-ph-bg, #ffffff);
    border: 1px solid var(--ab-wy-ph-border-c, #e2e8f0);
    aspect-ratio: 4 / 5;
  }
  .ab-wy__img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .ab-wy__tag {
    position: absolute; left: 14px; bottom: 14px;
    display: inline-flex; align-items: center;
    background: var(--ab-wy-tag-bg, rgba(255,255,255,0.92));
    color: var(--ab-wy-tag-c, #334155);
    font-size: 11px; font-weight: 600; letter-spacing: 0.4px;
    padding: 6px 10px; border-radius: 4px;
  }

  @media screen and (max-width: 920px) {
    .ab-wy__cap { padding-inline: var(--ab-wy-pad-inline-m, 24px); }
    .ab-wy__grid { grid-template-columns: 1fr; gap: 40px; }
    .ab-wy__media { order: -1; }
  }
  @media screen and (max-width: 560px) {
    .ab-wy__headline { font-size: 32px; letter-spacing: -0.8px; }
  }
/* END_SECTION:ab-about-why */

/* START_SECTION:ab-article-footer (INDEX:4) */
.ab-af__cap { max-width: 820px; margin-inline: auto; }

  .ab-af__row {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding-block-end: 28px;
    border-block-end: 1px solid var(--color-border);
  }
  .ab-af__label {
    font-family: var(--font-body--family);
    font-size: 11px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--ab-af-label-c, var(--color-foreground-muted));
    font-weight: 700;
  }
  .ab-af__chip {
    display: inline-flex; align-items: center;
    border: 1px solid var(--ab-af-chip-border-c, var(--color-border));
    padding: 8px 14px;
    font-family: var(--font-body--family);
    font-size: 13px;
    font-weight: 600;
    color: var(--ab-af-chip-c, var(--color-foreground));
    background: var(--ab-af-chip-bg, transparent);
    text-decoration: none;
    transition: border-color 150ms ease, color 150ms ease;
  }
  .ab-af__chip:hover {
    border-color: var(--ab-af-chip-hover-c, var(--color-primary));
    color: var(--ab-af-chip-hover-c, var(--color-primary));
  }
  .ab-af__share {
    display: flex; align-items: center; gap: 16px;
    margin-inline-start: auto;
  }
  .ab-af__share-link {
    color: var(--ab-af-share-c, var(--color-foreground-muted));
    display: inline-flex;
    transition: color 150ms ease;
  }
  .ab-af__share-link:hover { color: var(--color-primary); }

  .ab-af__pager {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-block-start: 32px;
  }
  .ab-af__pager-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 24px;
    border: 1px solid var(--ab-af-pager-border-c, var(--color-border));
    max-width: 46%;
    text-decoration: none;
    transition: border-color 150ms ease;
  }
  .ab-af__pager-item:hover { border-color: var(--color-foreground); }
  .ab-af__pager-item--next { text-align: end; align-items: flex-end; margin-inline-start: auto; }
  .ab-af__pager-dir {
    font-family: var(--font-body--family);
    font-size: 10px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--ab-af-pager-dir-c, var(--color-foreground-muted));
    font-weight: 700;
  }
  .ab-af__pager-title {
    font-family: var(--font-body--family);
    font-size: 14px;
    font-weight: 700;
    color: var(--ab-af-pager-title-c, var(--color-foreground));
  }

  @media screen and (max-width: 749px) {
    .ab-af__share { margin-inline-start: 0; }
    .ab-af__pager-item { max-width: 100%; }
  }
/* END_SECTION:ab-article-footer */

/* START_SECTION:ab-article-main (INDEX:5) */
.ab-am__head-cap,
  .ab-am__hero-cap,
  .ab-am__body-cap { max-width: 1440px; margin-inline: auto; }
  .ab-am__head-cap, .ab-am__body-cap { max-width: 820px; }

  .ab-am__crumbs {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    margin: 0 0 28px;
    font-family: var(--font-body--family);
    font-size: 12px;
    letter-spacing: 0.4px;
    color: var(--ab-am-crumbs-c, var(--color-foreground-muted));
  }
  .ab-am__crumbs a { color: inherit; text-decoration: none; }
  .ab-am__crumbs a:hover { color: var(--color-primary); }
  .ab-am__crumbs-sep { opacity: 0.5; }
  .ab-am__crumbs-here {
    color: var(--ab-am-crumbs-active-c, var(--color-foreground));
    font-weight: 600;
  }

  .ab-am__eyebrow {
    margin: 0 0 18px;
    font-family: var(--font-body--family);
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--ab-am-eyebrow-c, var(--color-primary));
    font-weight: 700;
    text-transform: uppercase;
  }
  .ab-am__title {
    margin: 0 0 24px;
    font-family: var(--font-body--family);
    font-weight: 800;
    font-size: var(--ab-am-title-size, 64px);
    letter-spacing: -2px;
    line-height: 1;
    color: var(--ab-am-title-c, var(--color-foreground));
  }
  .ab-am__author-row {
    display: flex; align-items: center; gap: 14px;
    font-family: var(--font-body--family);
    font-size: 13px;
    color: var(--ab-am-author-c, var(--color-foreground-muted));
  }
  .ab-am__author-avatar {
    width: 42px; height: 42px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--color-primary), #0B1220);
    color: #fff;
    font-family: var(--font-body--family);
    font-weight: 700;
    font-size: 15px;
    flex: none;
  }
  .ab-am__author-text strong { color: var(--color-foreground); }
  .ab-am__author-date { color: var(--ab-am-author-c, var(--color-foreground-muted)); }

  .ab-am__hero {
    margin-block-end: 40px;
  }
  .ab-am__hero-cap {
    aspect-ratio: 16 / 8;
    overflow: hidden;
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }
  .ab-am__hero-img { width: 100%; height: 100%; object-fit: cover; }

  .ab-am__body {
    padding-block-end: 60px;
  }
  .ab-am__body-cap {
    font-family: var(--font-body--family);
    font-size: var(--ab-am-body-size, 17px);
    line-height: 1.75;
    color: var(--ab-am-body-c, var(--color-foreground-muted));
  }
  .ab-am__body-cap > :first-child { margin-block-start: 0; }
  .ab-am__body-cap p { margin: 0 0 22px; }
  .ab-am__body-cap p:first-of-type {
    font-size: 22px; font-weight: 500;
    color: var(--color-foreground);
    line-height: 1.4;
    margin-block-end: 32px;
  }
  .ab-am__body-cap h2 {
    font-family: var(--font-body--family);
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.6px;
    color: var(--color-foreground);
    margin: 48px 0 18px;
    line-height: 1.2;
  }
  .ab-am__body-cap h3 {
    font-family: var(--font-body--family);
    font-size: 22px;
    font-weight: 700;
    color: var(--color-foreground);
    margin: 36px 0 14px;
    line-height: 1.3;
  }
  .ab-am__body-cap blockquote {
    margin: 40px 0;
    padding-inline-start: 24px;
    border-inline-start: 3px solid var(--ab-am-quote-border-c, var(--color-primary));
    font-size: 24px;
    font-weight: 500;
    color: var(--ab-am-quote-c, var(--color-foreground));
    font-style: italic;
    line-height: 1.4;
  }
  .ab-am__body-cap a { color: var(--color-primary); text-decoration: underline; }
  .ab-am__body-cap img { width: 100%; height: auto; margin: 32px 0; }
  .ab-am__body-cap ul, .ab-am__body-cap ol { padding-inline-start: 24px; margin: 0 0 22px; }
  .ab-am__body-cap li { margin-block-end: 8px; }

  @media screen and (max-width: 749px) {
    .ab-am__title { font-size: 36px; letter-spacing: -1px; }
    .ab-am__body-cap p:first-of-type { font-size: 17px; }
  }
/* END_SECTION:ab-article-main */

/* START_SECTION:ab-article-related (INDEX:6) */
.ab-ar__cap { max-width: 1440px; margin-inline: auto; }
  .ab-ar__eyebrow {
    margin: 0 0 24px;
    font-family: var(--font-body--family);
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--ab-ar-eyebrow-c, var(--color-primary));
    font-weight: 700;
    text-transform: uppercase;
  }
  .ab-ar__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }
  .ab-ar__post { text-decoration: none; color: inherit; display: block; min-width: 0; cursor: pointer; }
  .ab-ar__post-img-wrap {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }
  .ab-ar__post-img,
  .ab-ar__post-img-placeholder {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 300ms ease;
  }
  .ab-ar__post:hover .ab-ar__post-img { transform: scale(1.04); }
  .ab-ar__post-title {
    margin: 14px 0 0;
    font-family: var(--font-body--family);
    font-size: 17px;
    font-weight: 800;
    color: var(--ab-ar-title-c, var(--color-foreground));
    letter-spacing: -0.3px;
    line-height: 1.3;
    transition: color 150ms ease;
  }
  .ab-ar__post:hover .ab-ar__post-title {
    color: var(--ab-ar-title-hover-c, var(--color-primary));
  }
  .ab-ar__post-meta {
    margin: 6px 0 0;
    font-family: var(--font-body--family);
    font-size: 12px;
    color: var(--ab-ar-meta-c, var(--color-foreground-muted));
  }

  @media screen and (max-width: 989px) {
    .ab-ar__grid { grid-template-columns: 1fr; }
  }
/* END_SECTION:ab-article-related */

/* START_SECTION:ab-bestsellers (INDEX:7) */
.ab-best {
    margin-top:    var(--ab-best-margin-top, 40px);
    margin-bottom: var(--ab-best-margin-bottom, 40px);
    margin-left:   var(--ab-best-margin-left, 0px);
    margin-right:  var(--ab-best-margin-right, 0px);
    padding-top:    var(--ab-best-pad-top, 40px);
    padding-bottom: var(--ab-best-pad-bottom, 40px);
  }

  .ab-best__cap {
    max-width: 1440px;
    margin-inline: auto;
    padding-left:  calc(var(--ab-best-pad-left, 48px) * var(--ab-best-scale, 1));
    padding-right: calc(var(--ab-best-pad-right, 48px) * var(--ab-best-scale, 1));
  }

  .ab-best__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-block-end: 40px;
  }

  .ab-best__eyebrow {
    margin: 0 0 10px;
    font-family: var(--font-body--family);
    font-weight: 700;
    font-size: var(--ab-best-eyebrow-size, 11px);
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--ab-best-eyebrow-c, var(--color-primary));
  }

  .ab-best__headline {
    margin: 0;
    font-family: var(--font-body--family);
    font-weight: 800;
    font-size: calc(var(--ab-best-headline-size, 64px) * var(--ab-best-scale, 1));
    letter-spacing: -2px;
    line-height: 0.95;
    color: var(--ab-best-headline-c, var(--color-foreground));
  }

  .ab-best__headline-accent {
    color: var(--ab-best-headline-accent-c, var(--color-primary));
  }

  .ab-best__body {
    margin: 0;
    font-family: var(--font-body--family);
    font-weight: 400;
    font-size: var(--ab-best-body-size, 15px);
    line-height: 1.55;
    color: var(--ab-best-body-c, var(--color-foreground-muted));
    max-width: 360px;
  }

  /* Viewport wraps the grid + holds absolute-positioned arrows */
  .ab-best__viewport { position: relative; }

  /* Arrows — mirror ab-rv__arrow — hidden by default, JS un-hides them
     only when the grid actually overflows in carousel mode. */
  .ab-best__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid var(--ab-best-card-border-c, #E2E8F0);
    background: #FFFFFF;
    color: var(--ab-best-headline-c, #0B1220);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(11, 18, 32, 0.08);
    transition: opacity 150ms ease, background-color 150ms ease, color 150ms ease, transform 150ms ease;
    padding: 0;
  }
  .ab-best__arrow:hover {
    background: var(--ab-best-price-c, #0891B2);
    color: #FFFFFF;
    border-color: transparent;
  }
  .ab-best__arrow[hidden] { display: none; }
  .ab-best__arrow[disabled] {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
  }
  .ab-best__arrow--prev { left: -22px; }
  .ab-best__arrow--next { right: -22px; }

  /* Default: CSS grid (N columns, wraps to rows when items exceed cols) */
  .ab-best__grid {
    display: grid;
    grid-template-columns: repeat(var(--ab-best-cols, 4), minmax(0, 1fr));
    gap: var(--ab-best-grid-gap, 16px);
  }

  /* Carousel mode: flex + horizontal scroll-snap. Same N cards visible
     at once as the column setting; overflow becomes a swipe / drag /
     scroll-snap carousel. No JS dependency. */
  .ab-best__grid--carousel {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: var(--ab-best-grid-gap, 16px);
    padding-bottom: 14px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgb(11 18 32 / 0.15) transparent;
  }
  .ab-best__grid--carousel::-webkit-scrollbar { height: 6px; }
  .ab-best__grid--carousel::-webkit-scrollbar-track { background: transparent; }
  .ab-best__grid--carousel::-webkit-scrollbar-thumb {
    background: rgb(11 18 32 / 0.15);
    border-radius: 999px;
  }
  .ab-best__grid--carousel::-webkit-scrollbar-thumb:hover {
    background: var(--ab-best-price-c, #0891B2);
  }

  /* Each card in carousel: 1/N of row minus gap allocation, snap to start */
  .ab-best__grid--carousel > * {
    flex: 0 0 calc((100% - (var(--ab-best-cols, 4) - 1) * var(--ab-best-grid-gap, 16px)) / var(--ab-best-cols, 4));
    min-width: 0;
    scroll-snap-align: start;
  }

  @media screen and (max-width: 989px) {
    .ab-best__head {
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;
    }
    .ab-best__headline {
      font-size: 44px;
      letter-spacing: -1.4px;
    }
    /* Grid mode mobile: 2 cols, wraps to rows for N>2 products */
    .ab-best__grid:not(.ab-best__grid--carousel) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    /* Carousel mode mobile: 2 cards visible per swipe */
    .ab-best__grid--carousel { --ab-best-cols: 2; }
  }

  @media screen and (max-width: 480px) {
    /* Carousel mode small mobile: 1.4 cards (peek next) */
    .ab-best__grid--carousel { --ab-best-cols: 1.4; }
    /* Grid mode small mobile: stays 2 cols (user requested 2 side-by-side)  */
  }

  /* Mobile spacing overrides (configurable from editor) */
  @media screen and (max-width: 749px) {
    .ab-best {
      margin-top:     var(--ab-best-mob-margin-top, 0px) !important;
      margin-bottom:  var(--ab-best-mob-margin-bottom, 0px) !important;
      margin-left:    var(--ab-best-mob-margin-left, 0px) !important;
      margin-right:   var(--ab-best-mob-margin-right, 0px) !important;
      padding-top:    var(--ab-best-mob-pad-top, 20px) !important;
      padding-bottom: var(--ab-best-mob-pad-bottom, 20px) !important;
    }
    .ab-best__cap {
      padding-left:  var(--ab-best-mob-pad-left, 24px) !important;
      padding-right: var(--ab-best-mob-pad-right, 24px) !important;
    }
  }
/* END_SECTION:ab-bestsellers */

/* START_SECTION:ab-blog-categories (INDEX:8) */
.ab-bc__cap {
    max-width: 1440px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 32px;
    align-items: center;
  }

  .ab-bc__eyebrow {
    margin: 0 0 12px;
    font-family: var(--font-body--family);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ab-bc-eyebrow-c, var(--color-primary));
    font-weight: 700;
  }
  .ab-bc__headline {
    margin: 0 0 12px;
    font-family: var(--font-body--family);
    font-weight: 800;
    font-size: var(--ab-bc-headline-size, 32px);
    letter-spacing: -0.6px;
    line-height: 1.1;
    color: var(--ab-bc-headline-c, var(--color-foreground));
  }
  .ab-bc__body {
    margin: 0 0 18px;
    font-family: var(--font-body--family);
    font-size: 15px;
    color: var(--ab-bc-body-c, var(--color-foreground-muted));
    line-height: 1.6;
    max-width: 640px;
  }

  .ab-bc__links {
    display: flex; flex-wrap: wrap; gap: 8px 24px;
  }
  .ab-bc__link {
    font-family: var(--font-body--family);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--ab-bc-link-c, var(--color-foreground));
    text-decoration: none;
    border-block-end: 1px solid transparent;
    padding-block-end: 2px;
    transition: color 150ms ease, border-color 150ms ease;
  }
  .ab-bc__link:hover {
    color: var(--ab-bc-link-hover-c, var(--color-primary));
    border-block-end-color: currentColor;
  }

  .ab-bc__ctas { display: flex; gap: 12px; flex-wrap: wrap; }
  .ab-bc__cta {
    display: inline-flex; align-items: center; gap: 9px;
    background: var(--ab-bc-cta-bg, var(--color-primary));
    color: var(--ab-bc-cta-c, var(--color-background));
    padding: 16px 26px;
    font-family: var(--font-body--family);
    font-size: 11px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    font-weight: 700;
    text-decoration: none;
    transition: filter 150ms ease;
  }
  .ab-bc__cta:hover { filter: brightness(1.08); }

  @media screen and (max-width: 989px) {
    .ab-bc__cap { grid-template-columns: 1fr; gap: 24px; }
    .ab-bc__headline { font-size: 28px; }
  }
/* END_SECTION:ab-blog-categories */

/* START_SECTION:ab-blog-featured (INDEX:9) */
.ab-bf__cap {
    max-width: 1440px;
    margin-inline: auto;
    padding-inline: var(--ab-bf-pad-inline, 48px);
    box-sizing: border-box;
  }
  .ab-bf__card {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 32px;
    background: var(--ab-bf-bg, var(--color-background));
    border: 1px solid var(--ab-bf-border-c, var(--color-border));
    overflow: hidden;
  }
  .ab-bf__media {
    position: relative;
    overflow: hidden;
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    min-height: 440px;
    min-width: 0;
    max-width: 100%;
  }
  .ab-bf__img,
  .ab-bf__img-placeholder {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    max-width: 100%;
    object-fit: cover;
    display: block;
  }
  .ab-bf__text {
    padding: 48px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    max-width: 100%;
  }
  .ab-bf__eyebrow {
    margin: 0 0 12px;
    font-family: var(--font-body--family);
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--ab-bf-eyebrow-c, var(--color-primary));
    font-weight: 700;
    text-transform: uppercase;
  }
  .ab-bf__headline {
    margin: 0 0 18px;
    font-family: var(--font-body--family);
    font-weight: 800;
    font-size: var(--ab-bf-headline-size, 44px);
    letter-spacing: -1.2px;
    line-height: 1.05;
    color: var(--ab-bf-headline-c, var(--color-foreground));
  }
  .ab-bf__body {
    margin: 0 0 24px;
    font-family: var(--font-body--family);
    font-size: 15px;
    line-height: 1.65;
    color: var(--ab-bf-body-c, var(--color-foreground-muted));
  }
  .ab-bf__cta {
    align-self: flex-start;
    font-family: var(--font-body--family);
    font-size: 12px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--ab-bf-cta-c, var(--color-primary));
    font-weight: 700;
    border-block-end: 2px solid currentColor;
    padding-block-end: 3px;
    text-decoration: none;
  }

  @media screen and (max-width: 989px) {
    .ab-bf__cap { padding-inline: var(--ab-bf-pad-inline-m, 24px); }
    .ab-bf__card { grid-template-columns: 1fr; }
    .ab-bf__media { min-height: 0; aspect-ratio: 16 / 10; }
    .ab-bf__text { padding: 28px 22px; }
    .ab-bf__headline { font-size: 28px; }
  }
/* END_SECTION:ab-blog-featured */

/* START_SECTION:ab-blog-grid (INDEX:10) */
.ab-bg__cap { max-width: 1440px; margin-inline: auto; }

  .ab-bg__filters {
    display: flex;
    gap: 8px;
    margin-block-end: 28px;
    flex-wrap: wrap;
  }
  .ab-bg__chip {
    background: var(--ab-bg-chip-bg, var(--color-background));
    color: var(--ab-bg-chip-c, var(--color-foreground));
    border: 1px solid var(--ab-bg-chip-border-c, var(--color-border));
    padding: 8px 16px;
    font-family: var(--font-body--family);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 150ms ease;
  }
  .ab-bg__chip.is-on {
    background: var(--ab-bg-chip-on-bg, var(--color-foreground));
    color: var(--ab-bg-chip-on-c, var(--color-background));
    border-color: var(--ab-bg-chip-on-bg, var(--color-foreground));
  }

  .ab-bg__grid {
    display: grid;
    grid-template-columns: repeat(var(--ab-bg-cols, 3), minmax(0, 1fr));
    column-gap: var(--ab-bg-col-gap, 24px);
    row-gap: var(--ab-bg-row-gap, 48px);
  }

  .ab-bg__post {
    text-decoration: none;
    color: inherit;
    display: block;
    min-width: 0;
  }
  .ab-bg__post.is-hidden { display: none; }

  .ab-bg__post-img-wrap {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }
  .ab-bg__post-img,
  .ab-bg__post-img-placeholder {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    transition: transform 300ms ease;
  }
  .ab-bg__post:hover .ab-bg__post-img { transform: scale(1.04); }

  .ab-bg__post-tag {
    position: absolute;
    top: 12px; left: 12px;
    background: var(--ab-bg-tag-bg, var(--color-background));
    color: var(--ab-bg-tag-c, var(--color-foreground));
    padding: 4px 10px;
    font-family: var(--font-body--family);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
  }

  .ab-bg__post-body { margin-block-start: 16px; }
  .ab-bg__post-title {
    margin: 0;
    font-family: var(--font-body--family);
    font-size: 18px;
    font-weight: 700;
    color: var(--ab-bg-title-c, var(--color-foreground));
    letter-spacing: -0.3px;
    line-height: 1.3;
  }
  .ab-bg__post-meta {
    margin: 6px 0 0;
    font-family: var(--font-body--family);
    font-size: 12px;
    color: var(--ab-bg-meta-c, var(--color-foreground-muted));
    letter-spacing: 0.5px;
  }

  @media screen and (max-width: 989px) {
    .ab-bg__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media screen and (max-width: 480px) {
    .ab-bg__grid { grid-template-columns: 1fr; }
  }
/* END_SECTION:ab-blog-grid */

/* START_SECTION:ab-brand-story (INDEX:11) */
.ab-bstory {
    position: relative;
    overflow: hidden;
  }

  .ab-bstory__pattern {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M0 40 L40 0 L80 40 L40 80 Z' fill='none' stroke='%2367e8f9' stroke-width='1.2' opacity='0.3'/%3E%3Cpath d='M20 40 L40 20 L60 40 L40 60 Z' fill='none' stroke='%23ffffff' stroke-width='1' opacity='0.2'/%3E%3Ccircle cx='40' cy='40' r='2' fill='%2367e8f9' opacity='0.5'/%3E%3C/svg%3E");
    background-size: 80px 80px;
  }

  .ab-bstory {
    margin-top:    var(--ab-bs-margin-top, 40px);
    margin-bottom: var(--ab-bs-margin-bottom, 40px);
    margin-left:   var(--ab-bs-margin-left, 0px);
    margin-right:  var(--ab-bs-margin-right, 0px);
    padding-top:    var(--ab-bs-pad-top, 40px);
    padding-bottom: var(--ab-bs-pad-bottom, 40px);
  }

  .ab-bstory__cap {
    position: relative;
    max-width: 1440px;
    margin-inline: auto;
    padding-left:  var(--ab-bs-pad-left, 48px);
    padding-right: var(--ab-bs-pad-right, 48px);
  }

  .ab-bstory__inner {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: center;
  }

  .ab-bstory__inner--text-right {
    direction: rtl;
  }
  .ab-bstory__inner--text-right > * {
    direction: ltr;
  }

  .ab-bstory__eyebrow {
    margin: 0 0 20px;
    font-family: var(--font-body--family);
    font-weight: 700;
    font-size: var(--ab-bs-eyebrow-size, 11px);
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--ab-bs-eyebrow-c, #67E8F9);
  }

  .ab-bstory__headline {
    margin: 0 0 24px;
    font-family: var(--font-body--family);
    font-weight: 800;
    font-size: var(--ab-bs-headline-size, 72px);
    line-height: 0.92;
    letter-spacing: -2.5px;
    color: var(--ab-bs-headline-c, #FFFFFF);
    display: flex;
    flex-direction: column;
    gap: var(--ab-bs-headline-line-gap, 0px);
    text-transform: var(--ab-bs-headline-transform, none);
  }

  .ab-bstory__h-line {
    display: block;
  }

  .ab-bstory__headline-accent {
    color: var(--ab-bs-headline-accent-c, #06B6D4);
  }

  .ab-bstory__body {
    margin: 0;
    font-family: var(--font-body--family);
    font-size: var(--ab-bs-body-size, 17px);
    line-height: 1.65;
    color: var(--ab-bs-body-c, #cbd5e1);
    max-width: 480px;
    padding-block: var(--ab-bs-body-pad-top, 0px) var(--ab-bs-body-pad-bottom, 32px);
  }

  .ab-bstory__body--2 {
    font-size: var(--ab-bs-body2-size, 15px);
    color: var(--ab-bs-body2-c, #94a3b8);
    padding-block: var(--ab-bs-body2-pad-top, 0px) var(--ab-bs-body2-pad-bottom, 32px);
  }

  .ab-bstory__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--ab-bs-cta-bg, #0891B2);
    color: var(--ab-bs-cta-c, #FFFFFF);
    border: none;
    padding: 16px 30px;
    font-family: var(--font-body--family);
    font-size: 13px;
    letter-spacing: 2px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 150ms ease;
  }

  .ab-bstory__cta:hover {
    opacity: 0.9;
  }

  /* ----- Trust row (under CTA) ----- */
  .ab-bstory__trust-row {
    list-style: none;
    margin: 0;
    padding-block-start: var(--ab-bs-trust-pad-top, 32px);
    padding-inline: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
  }

  .ab-bstory__trust-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-inline: 24px;
    border-inline-start: 1px solid var(--ab-bs-trust-divider-c, rgb(255 255 255 / 0.18));
  }

  .ab-bstory__trust-item:first-child {
    padding-inline-start: 0;
    border-inline-start: 0;
  }

  .ab-bstory__trust-icon {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--ab-bs-trust-icon-c, #67E8F9);
  }

  .ab-bstory__trust-icon svg {
    width: 28px;
    height: 28px;
  }

  .ab-bstory__trust-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.2;
    color: var(--ab-bs-trust-c, #FFFFFF);
  }

  .ab-bstory__trust-title {
    font-family: var(--font-body--family);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
  }

  .ab-bstory__trust-sub {
    font-family: var(--font-body--family);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    opacity: 0.7;
  }

  /* Badge anchors here (NOT in __media-frame) so it can extend past the frame's overflow:hidden clip */
  .ab-bstory__media {
    position: relative;
  }

  .ab-bstory__media-frame {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: rgb(0 0 0 / 0.2);
  }

  /* ----- Slideshow ----- */
  .ab-bstory__slide {
    position: absolute;
    inset: 0;
    display: block;
    opacity: 0;
    pointer-events: none;
    transition: opacity 600ms ease;
    text-decoration: none;
  }

  .ab-bstory__slide.is-active {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
  }

  .ab-bstory__slide-img,
  .ab-bstory__slide-placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ab-bstory__slide-placeholder {
    background: rgb(255 255 255 / 0.05);
  }

  /* ----- Badge ----- */
  .ab-bstory__badge {
    position: absolute;
    top: var(--ab-bs-badge-top, -18px);
    right: var(--ab-bs-badge-right, -18px);
    z-index: 3;
    background: var(--ab-bs-badge-bg, #0891B2);
    color: var(--ab-bs-badge-c, #FFFFFF);
    padding: var(--ab-bs-badge-padding, 16px) calc(var(--ab-bs-badge-padding, 16px) + 6px);
    font-family: var(--font-body--family);
    font-size: var(--ab-bs-badge-size, 11px);
    letter-spacing: 2px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.25;
    white-space: pre-line;
    pointer-events: none;
  }

  /* ----- Dots ----- */
  .ab-bstory__dots {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 2;
  }

  .ab-bstory__dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    border: none;
    padding: 0;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background 200ms ease, transform 200ms ease;
  }

  .ab-bstory__dot.is-active {
    background: #ffffff;
    transform: scale(1.15);
  }

  .ab-bstory__dot:hover {
    background: rgba(255, 255, 255, 0.8);
  }

  /* ----- Caption (optional store-name caption below slide) ----- */
  .ab-bstory__location-caption {
    margin: 14px 0 0;
    font-family: var(--font-body--family);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--ab-bs-headline-c, #FFFFFF);
    opacity: 0.85;
    text-align: center;
  }

  @media screen and (max-width: 989px) {
    .ab-bstory__inner {
      grid-template-columns: 1fr;
      gap: 40px;
    }
    .ab-bstory__inner--text-right {
      direction: ltr;
    }
    .ab-bstory__headline {
      font-size: 44px;
      letter-spacing: -1.4px;
    }
    .ab-bstory__trust-row {
      gap: 12px 0;
    }
    .ab-bstory__trust-item {
      flex: 1 1 calc(50% - 12px);
      padding-inline: 16px;
    }
    .ab-bstory__trust-item:nth-child(odd) {
      padding-inline-start: 0;
      border-inline-start: 0;
    }
  }

  /* Mobile spacing overrides (configurable from editor) */
  @media screen and (max-width: 749px) {
    .ab-bstory {
      margin-top:     var(--ab-bs-mob-margin-top, 0px) !important;
      margin-bottom:  var(--ab-bs-mob-margin-bottom, 0px) !important;
      margin-left:    var(--ab-bs-mob-margin-left, 0px) !important;
      margin-right:   var(--ab-bs-mob-margin-right, 0px) !important;
      padding-top:    var(--ab-bs-mob-pad-top, 20px) !important;
      padding-bottom: var(--ab-bs-mob-pad-bottom, 20px) !important;
    }
    .ab-bstory__cap {
      padding-left:  var(--ab-bs-mob-pad-left, 24px) !important;
      padding-right: var(--ab-bs-mob-pad-right, 24px) !important;
    }
  }
/* END_SECTION:ab-brand-story */

/* START_SECTION:ab-cart-drawer (INDEX:12) */
.ab-cd {
    position: fixed;
    inset: 0;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background: transparent !important;
    overflow: hidden;
    transition: opacity 220ms ease, visibility 0s linear 220ms;
  }
  .ab-cd.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 220ms ease, visibility 0s;
  }
  .ab-cd__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(11, 18, 32, var(--ab-cd-backdrop-opacity, 0));
    border: 0;
    cursor: pointer;
    padding: 0;
    pointer-events: none;
    display: none;
  }
  .ab-cd--has-backdrop .ab-cd__backdrop {
    display: block;
    pointer-events: auto;
  }
  .ab-cd__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--ab-cd-width, 440px);
    max-width: 100vw;
    background: var(--ab-cd-bg, #FFFFFF);
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 280ms cubic-bezier(0.4, 0.1, 0.2, 1);
    font-family: var(--font-body--family);
    color: var(--ab-cd-ink, #0F172A);
    pointer-events: auto;
  }
  .ab-cd.is-open .ab-cd__panel { transform: translateX(0); }

  .ab-cd__head {
    padding: 18px 22px;
    border-block-end: 1px solid var(--ab-cd-line, #E2E8F0);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
  }
  .ab-cd__eyebrow {
    font-size: 9px;
    letter-spacing: 2px;
    color: var(--ab-cd-accent, #0891B2);
    font-weight: 800;
    text-transform: uppercase;
  }
  .ab-cd__title {
    font-size: 22px;
    font-weight: 800;
    color: var(--ab-cd-deep, #0B1220);
    letter-spacing: -0.6px;
    margin: 2px 0 0;
  }
  .ab-cd__close {
    width: 34px;
    height: 34px;
    border: 0;
    background: var(--ab-cd-surf, #F1F5F9);
    cursor: pointer;
    font-size: 20px;
    color: var(--ab-cd-deep, #0B1220);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
  }

  .ab-cd__progress {
    padding: 14px 22px;
    background: var(--ab-cd-soft-bg, #F0F9FF);
    border-block-end: 1px solid var(--ab-cd-soft-line, #E0F2FE);
    flex-shrink: 0;
  }
  .ab-cd__progress-row {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 700;
    color: var(--ab-cd-soft-ink, #0C4A6E);
    margin-block-end: 7px;
  }
  .ab-cd__progress-bar {
    background: var(--ab-cd-bg, #FFFFFF);
    height: 6px;
    overflow: hidden;
  }
  .ab-cd__progress-fill {
    height: 100%;
    background: var(--ab-cd-accent, #0891B2);
    transition: width 240ms ease;
  }

  .ab-cd__items {
    flex: 1;
    overflow-y: auto;
    padding: 4px 22px;
  }
  .ab-cd__item {
    display: flex;
    gap: 14px;
    padding: 16px 0;
    border-block-end: 1px solid var(--ab-cd-line, #E2E8F0);
  }
  .ab-cd__item-media {
    flex: 0 0 80px;
    height: 80px;
    background: rgb(var(--color-foreground-rgb) / 0.06);
    overflow: hidden;
  }
  .ab-cd__item-img { width: 100%; height: 100%; object-fit: cover; }
  .ab-cd__item-body { flex: 1; min-width: 0; }
  .ab-cd__item-row1 {
    display: flex;
    justify-content: space-between;
    gap: 8px;
  }
  .ab-cd__item-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--ab-cd-deep, #0B1220);
    letter-spacing: -0.2px;
    text-decoration: none;
  }
  .ab-cd__item-remove {
    border: 0;
    background: transparent;
    color: var(--ab-cd-ink2, #64748B);
    font-size: 12px;
    cursor: pointer;
    flex-shrink: 0;
    font-family: inherit;
  }
  .ab-cd__item-variant {
    font-size: 11px;
    color: var(--ab-cd-ink2, #64748B);
    margin-block-start: 3px;
  }
  .ab-cd__item-row2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-block-start: 10px;
  }
  .ab-cd__qty {
    display: flex;
    border: 1px solid var(--ab-cd-line2, #CBD5E1);
  }
  .ab-cd__qty-btn {
    width: 28px;
    height: 28px;
    background: var(--ab-cd-bg, #FFFFFF);
    border: 0;
    cursor: pointer;
    color: var(--ab-cd-deep, #0B1220);
    font-size: 14px;
    font-family: inherit;
  }
  .ab-cd__qty-val {
    width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--ab-cd-deep, #0B1220);
    border-inline: 1px solid var(--ab-cd-line2, #CBD5E1);
  }
  .ab-cd__item-price {
    font-size: 15px;
    font-weight: 800;
    color: var(--ab-cd-accent, #0891B2);
    letter-spacing: -0.3px;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
  }
  .ab-cd__item-price-was {
    font-size: 12px;
    font-weight: 600;
    color: var(--ab-cd-ink2, #64748B);
    text-decoration: line-through;
    letter-spacing: 0;
  }
  .ab-cd__item-price-now { /* inherits parent styling */ }

  .ab-cd__empty {
    padding: 40px 0;
    text-align: center;
  }
  .ab-cd__empty-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--ab-cd-deep, #0B1220);
  }
  .ab-cd__empty-msg {
    color: var(--ab-cd-ink2, #64748B);
    margin: 8px 0 16px;
  }
  .ab-cd__empty-cta {
    display: inline-block;
    background: var(--ab-cd-accent, #0891B2);
    color: var(--ab-cd-bg, #FFFFFF);
    padding: 12px 24px;
    font-size: 11px;
    letter-spacing: 1.6px;
    font-weight: 800;
    text-transform: uppercase;
    text-decoration: none;
  }

  .ab-cd__upsell {
    margin: 18px 0 8px;
  }
  .ab-cd__upsell-head {
    font-size: 9px;
    letter-spacing: 2px;
    color: var(--ab-cd-accent, #0891B2);
    font-weight: 800;
    text-transform: uppercase;
    margin-block-end: 10px;
  }
  .ab-cd__upsell-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .ab-cd__upsell-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--ab-cd-surf, #F1F5F9);
    align-items: center;
  }
  .ab-cd__upsell-media { flex: 0 0 56px; height: 56px; overflow: hidden; }
  .ab-cd__upsell-img { width: 100%; height: 100%; object-fit: cover; }
  .ab-cd__upsell-body { flex: 1; min-width: 0; }
  .ab-cd__upsell-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--ab-cd-deep, #0B1220);
    letter-spacing: -0.1px;
    line-height: 1.25;
  }
  .ab-cd__upsell-variant {
    font-size: 10px;
    color: var(--ab-cd-ink2, #64748B);
    margin-block-start: 2px;
  }
  .ab-cd__upsell-price {
    font-size: 12px;
    color: var(--ab-cd-accent, #0891B2);
    font-weight: 800;
    margin-block-start: 4px;
    letter-spacing: -0.2px;
  }
  .ab-cd__upsell-add {
    border: 1.5px solid var(--ab-cd-deep, #0B1220);
    background: var(--ab-cd-bg, #FFFFFF);
    color: var(--ab-cd-deep, #0B1220);
    padding: 8px 12px;
    font-size: 10px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    font-weight: 800;
    cursor: pointer;
    flex-shrink: 0;
    font-family: inherit;
    transition: border-color 180ms ease, color 180ms ease, background 180ms ease;
  }
  .ab-cd__upsell-add-success { display: none; }
  .ab-cd__upsell-add.is-added {
    border-color: var(--ab-cd-mint, #10B981);
    color: var(--ab-cd-mint, #10B981);
    background: rgba(16, 185, 129, 0.08);
    cursor: default;
  }
  .ab-cd__upsell-add.is-added .ab-cd__upsell-add-default { display: none; }
  .ab-cd__upsell-add.is-added .ab-cd__upsell-add-success { display: inline; }

  .ab-cd__foot {
    padding: 18px 22px 22px;
    border-block-start: 1px solid var(--ab-cd-line, #E2E8F0);
    flex-shrink: 0;
    background: var(--ab-cd-bg, #FFFFFF);
  }
  .ab-cd__totals-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--ab-cd-ink2, #64748B);
    margin-block-end: 6px;
  }
  .ab-cd__totals-val {
    color: var(--ab-cd-deep, #0B1220);
    font-weight: 700;
  }
  .ab-cd__totals-val--neg {
    color: var(--ab-cd-mint, #10B981);
  }
  /* Label cell on Sale + Discount rows inherits the .ab-cd__totals-row
     muted color and regular weight so it visually matches Subtotal /
     Shipping. The chip keeps its own dark, bold styling. */
  .ab-cd__discount-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .ab-cd__discount-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 5px 3px 8px;
    border-radius: 999px;
    background: #EBE9E4;
    color: #1F1F1F !important;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.2px;
  }
  .ab-cd__discount-chip-icon {
    width: 10px;
    height: 10px;
    color: #6A6A6A;
    flex-shrink: 0;
  }
  .ab-cd__discount-chip-remove {
    background: transparent;
    border: 0;
    color: #6A6A6A;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
    margin-inline-start: 1px;
    transition: color 150ms ease;
  }
  .ab-cd__discount-chip-remove:hover { color: #1F1F1F; }
  .ab-cd__savings {
    margin-block-start: 4px;
    margin-block-end: 8px;
    padding: 8px 12px;
    border-radius: 9px;
    background: rgb(16 185 129 / 0.10);
    color: #047857;
    font-family: var(--font-body--family);
    font-size: 12.5px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .ab-cd__savings strong { font-weight: 800; color: #065F46; }
  .ab-cd__savings-spark { color: var(--ab-cd-mint, #10B981); }
  .ab-cd__shipping-val.ab-cd__shipping-val {
    color: var(--ab-cd-deep, #0B1220);
    font-weight: 700;
  }
  .ab-cd__shipping-val--free.ab-cd__shipping-val--free {
    color: var(--ab-cd-mint, #10B981);
    text-transform: uppercase;
    letter-spacing: 1.2px;
  }
  .ab-cd__totals-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-block-start: 12px;
    border-block-start: 1px solid var(--ab-cd-line, #E2E8F0);
    margin: 6px 0 12px;
  }
  .ab-cd__totals-total > :first-child {
    font-size: 14px;
    font-weight: 800;
    color: var(--ab-cd-deep, #0B1220);
    letter-spacing: -0.2px;
  }
  .ab-cd__totals-total-val {
    font-size: 24px;
    font-weight: 800;
    color: var(--ab-cd-accent, #0891B2);
    letter-spacing: -0.6px;
  }
  .ab-cd__checkout {
    display: block;
    text-align: center;
    background: var(--ab-cd-accent, #0891B2);
    color: var(--ab-cd-bg, #FFFFFF);
    padding: 15px;
    font-size: 12px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    font-weight: 800;
    text-decoration: none;
  }
  .ab-cd__afterpay {
    font-size: 10px;
    color: var(--ab-cd-ink2, #64748B);
    margin-block-start: 10px;
    text-align: center;
    letter-spacing: 0.4px;
  }
/* END_SECTION:ab-cart-drawer */

/* START_SECTION:ab-cart (INDEX:13) */
.ab-cart { position: relative; }

  .ab-cart__head { padding: 24px 18px; }
  .ab-cart__head-cap, .ab-cart__body-cap, .ab-cart__empty-cap { max-width: 1440px; margin-inline: auto; }

  .ab-cart__eyebrow {
    margin: 0 0 10px;
    font-family: var(--font-body--family);
    font-size: 11px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--ab-cart-eyebrow-c, var(--color-primary));
    font-weight: 700;
  }
  .ab-cart__headline {
    margin: 0;
    font-family: var(--font-body--family);
    font-weight: 800;
    font-size: var(--ab-cart-headline-size, 56px);
    letter-spacing: -1.6px;
    line-height: 1;
    color: var(--ab-cart-headline-c, var(--color-foreground));
  }
  .ab-cart__headline-accent { color: var(--ab-cart-headline-accent-c, var(--color-primary)); }

  .ab-cart__body { padding: 0; }
  .ab-cart__body-cap {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 40px;
    align-items: start;
  }
  .ab-cart__main { min-width: 0; }

  /* Free-shipping progress — matches the cart drawer's progress block
     (soft sky bg, compact uppercase row, 6px white track + accent fill). */
  .ab-cart__progress {
    padding: 14px 22px;
    background: var(--ab-cart-progress-bg, #F0F9FF);
    border-block-end: 1px solid var(--ab-cart-line-c, var(--color-border));
    margin-block-end: 24px;
  }
  .ab-cart__progress-row {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-body--family);
    font-size: 11px;
    font-weight: 700;
    color: var(--ab-cart-progress-c, #0C4A6E);
    margin-block-end: 7px;
  }
  .ab-cart__progress-track {
    background: var(--ab-cart-progress-bar-bg, #FFFFFF);
    height: 6px;
    overflow: hidden;
  }
  .ab-cart__progress-fill {
    height: 100%;
    background: var(--ab-cart-progress-fill, var(--color-primary));
    transition: width 240ms ease;
  }

  /* Item card — mirrors the cart-drawer item shape (flex media + body,
     row1 title/remove, variant, row2 qty/price). Border between items
     only, no outer box. */
  .ab-cart__items { border: 1px solid var(--ab-cart-line-c, var(--color-border)); }
  .ab-cart__item {
    display: flex;
    gap: 14px;
    padding: 16px;
    border-block-end: 1px solid var(--ab-cart-line-c, var(--color-border));
  }
  .ab-cart__item:last-child { border-block-end: 0; }
  .ab-cart__item-media {
    display: block;
    flex: 0 0 100px;
    height: 100px;
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    overflow: hidden;
  }
  .ab-cart__item-img { width: 100%; height: 100%; object-fit: cover; }
  .ab-cart__item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }
  .ab-cart__item-row1 {
    display: flex;
    justify-content: space-between;
    gap: 8px;
  }
  .ab-cart__item-title {
    font-family: var(--font-body--family);
    font-size: 14px;
    font-weight: 700;
    color: var(--color-foreground);
    letter-spacing: -0.2px;
    line-height: 1.25;
    text-decoration: none;
  }
  .ab-cart__item-remove {
    font-family: var(--font-body--family);
    font-size: 12px;
    color: var(--color-foreground-muted, #64748B);
    text-decoration: underline;
    text-underline-offset: 2px;
    flex-shrink: 0;
    transition: color 150ms ease;
  }
  .ab-cart__item-remove:hover { color: var(--color-foreground, #0B1220); }
  .ab-cart__item-variant {
    margin: 3px 0 0;
    font-family: var(--font-body--family);
    font-size: 11px;
    color: var(--color-foreground-muted);
  }
  .ab-cart__item-row2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-block-start: 10px;
  }
  .ab-cart__qty {
    display: flex;
    border: 1px solid var(--ab-cart-line-c, var(--color-border));
  }
  .ab-cart__qty-btn {
    width: 28px;
    height: 28px;
    background: var(--color-background);
    border: 0;
    cursor: pointer;
    color: var(--color-foreground);
    font-size: 14px;
    font-family: inherit;
  }
  .ab-cart__qty-input {
    width: 32px;
    border: 0;
    border-inline: 1px solid var(--ab-cart-line-c, var(--color-border));
    background: var(--color-background);
    text-align: center;
    font-family: var(--font-body--family);
    font-size: 13px;
    font-weight: 700;
    color: var(--color-foreground);
    -moz-appearance: textfield;
  }
  .ab-cart__qty-input::-webkit-outer-spin-button,
  .ab-cart__qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .ab-cart__item-price {
    font-family: var(--font-body--family);
    font-size: 15px;
    font-weight: 800;
    color: var(--ab-cart-price-c, var(--color-primary));
    letter-spacing: -0.3px;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
  }
  .ab-cart__item-price-was {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-foreground-muted, #64748B);
    text-decoration: line-through;
  }
  .ab-cart__item-price-now { /* inherits parent styling */ }

  .ab-cart__upsell { margin-block-start: 32px; }
  .ab-cart__upsell-head { margin-block-end: 16px; }
  .ab-cart__upsell-eyebrow {
    margin: 0 0 6px;
    font-family: var(--font-body--family);
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--color-primary);
    font-weight: 700;
    text-transform: uppercase;
  }
  .ab-cart__upsell-headline {
    margin: 0;
    font-family: var(--font-body--family);
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.6px;
    color: var(--color-foreground);
  }
  .ab-cart__upsell-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .ab-cart__upsell-item {
    display: flex;
    gap: 12px;
    align-items: center;
    border: 1px solid var(--ab-cart-line-c, var(--color-border));
    padding: 12px;
  }
  .ab-cart__upsell-img {
    display: block;
    width: 70px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    flex-shrink: 0;
  }
  .ab-cart__upsell-img-real { width: 100%; height: 100%; object-fit: cover; }
  .ab-cart__upsell-body { flex: 1; min-width: 0; }
  .ab-cart__upsell-title {
    display: block;
    font-family: var(--font-body--family);
    font-size: 13px;
    font-weight: 700;
    color: var(--color-foreground);
    text-decoration: none;
    line-height: 1.2;
  }
  .ab-cart__upsell-price-row {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    margin-block-start: 2px;
  }
  .ab-cart__upsell-was {
    font-family: var(--font-body--family);
    font-size: 11px;
    font-weight: 600;
    color: var(--color-foreground-muted, #64748B);
    text-decoration: line-through;
  }
  .ab-cart__upsell-price {
    display: block;
    font-family: var(--font-body--family);
    font-size: 13px;
    font-weight: 700;
    color: var(--ab-cart-price-c, var(--color-primary));
  }
  .ab-cart__upsell-add {
    background: var(--color-foreground);
    color: var(--color-background);
    border: 0;
    padding: 8px 10px;
    font-family: var(--font-body--family);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    cursor: pointer;
  }

  .ab-cart__summary { min-width: 0; }
  .ab-cart__summary-sticky {
    position: sticky;
    top: 90px;
    background: var(--ab-cart-summary-bg, #F8FAFC);
    border: 1px solid var(--ab-cart-line-c, var(--color-border));
    padding: 24px;
  }
  .ab-cart__summary-title {
    margin: 0 0 20px;
    font-family: var(--font-body--family);
    font-size: 11px;
    letter-spacing: 2px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-foreground);
  }
  .ab-cart__summary-rows { display: flex; flex-direction: column; gap: 10px; }
  .ab-cart__summary-row {
    display: flex; justify-content: space-between;
    font-family: var(--font-body--family);
    font-size: 14px;
    color: var(--color-foreground-muted);
  }
  .ab-cart__summary-row span:last-child { color: var(--color-foreground); font-weight: 600; }
  /* Label cell on Sale + Discount rows inherits the muted color and
     regular weight from .ab-cart__summary-row so it visually matches
     Subtotal / Shipping / Tax. The chip inside the Discount cell keeps
     its own (darker, bold) styling via the chip rules below. */
  .ab-cart__discount-val { color: #10B981 !important; }
  .ab-cart__discount-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .ab-cart__discount-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 6px 4px 9px;
    border-radius: 999px;
    background: #EBE9E4;
    color: #1F1F1F !important;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.2px;
  }
  .ab-cart__discount-chip-icon {
    width: 10px;
    height: 10px;
    color: #6A6A6A;
    flex-shrink: 0;
  }
  .ab-cart__discount-chip-remove {
    background: transparent;
    border: 0;
    color: #6A6A6A;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
    margin-inline-start: 1px;
    transition: color 150ms ease;
  }
  .ab-cart__discount-chip-remove:hover { color: #1F1F1F; }
  .ab-cart__shipping-val {
    color: var(--color-foreground) !important;
    font-weight: 700 !important;
  }
  .ab-cart__shipping-val--free {
    color: #10B981 !important;
    text-transform: uppercase;
    letter-spacing: 1.2px;
  }

  .ab-cart__promo {
    display: flex; gap: 6px;
    margin-block-end: 16px;
    padding-block-end: 16px;
    border-block-end: 1px solid var(--ab-cart-line-c, var(--color-border));
  }
  .ab-cart__promo + .ab-cart__promo-msg + .ab-cart__summary-title,
  .ab-cart__promo + .ab-cart__summary-title { margin-block-start: 0; }
  .ab-cart__promo-msg:not([hidden]) {
    margin: -8px 0 16px;
  }
  .ab-cart__promo-input {
    flex: 1;
    border: 1px solid var(--ab-cart-line-c, var(--color-border));
    background: var(--color-background);
    padding: 12px 14px;
    font-family: var(--font-body--family);
    font-size: 13px;
    outline: none;
    color: var(--color-foreground);
  }
  .ab-cart__promo-apply {
    position: relative;
    background: var(--color-background);
    border: 1px solid var(--ab-cart-line-c, var(--color-border));
    padding: 0 18px;
    font-family: var(--font-body--family);
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--color-foreground);
    cursor: pointer;
    min-width: 78px;
  }
  .ab-cart__promo-apply[disabled] {
    opacity: 0.6;
    cursor: progress;
  }
  .ab-cart__promo-spinner {
    display: none;
    width: 14px; height: 14px;
    border-radius: 999px;
    border: 2px solid var(--color-foreground);
    border-top-color: transparent;
    animation: ab-cart-spin 0.7s linear infinite;
  }
  .ab-cart__promo-apply.is-loading .ab-cart__promo-spinner { display: inline-block; }
  .ab-cart__promo-apply.is-loading .ab-cart__promo-default { display: none; }
  @keyframes ab-cart-spin { to { transform: rotate(360deg); } }

  .ab-cart__promo-msg {
    margin: 8px 0 0;
    font-family: var(--font-body--family);
    font-size: 12px;
    line-height: 1.4;
  }
  .ab-cart__promo-msg.is-error { color: #DC2626; }
  .ab-cart__promo-msg.is-success { color: #10B981; }

  .ab-cart__savings {
    margin-block-start: 16px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgb(16 185 129 / 0.10);
    color: #047857;
    font-family: var(--font-body--family);
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .ab-cart__savings strong {
    font-weight: 800;
    color: #065F46;
  }
  .ab-cart__savings-spark { font-size: 14px; color: #10B981; }

  .ab-cart__total-row {
    border-block-start: 1px solid var(--ab-cart-line-c, var(--color-border));
    margin-block-start: 20px;
    padding-block-start: 20px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
  }
  .ab-cart__total-label {
    font-family: var(--font-body--family);
    font-size: 16px; font-weight: 700;
    color: var(--color-foreground);
  }
  .ab-cart__total-value {
    font-family: var(--font-body--family);
    font-size: 28px; font-weight: 800;
    color: var(--ab-cart-price-c, var(--color-primary));
    letter-spacing: -0.6px;
  }

  .ab-cart__checkout {
    width: 100%;
    background: var(--ab-cart-cta-bg, var(--color-primary));
    color: var(--ab-cart-cta-c, #FFFFFF);
    border: 0;
    padding: 18px;
    font-family: var(--font-body--family);
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 800;
    cursor: pointer;
    margin-block-start: 20px;
  }
  /* Wrapper for content_for_additional_checkout_buttons — Shopify's
     official Shop Pay / Apple Pay / Google Pay / PayPal / Amazon Pay
     buttons. Shopify renders them with their own brand styling, so we
     only handle layout + spacing here. */
  .ab-cart__alt-buttons {
    margin-block-start: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .ab-cart__alt-buttons > * { width: 100%; }
  .ab-cart__alt-buttons .additional-checkout-buttons,
  .ab-cart__alt-buttons .additional-checkout-button {
    width: 100%;
    margin: 0;
  }
  .ab-cart__payment-options {
    margin: 20px 0 0;
    text-align: center;
    font-family: var(--font-body--family);
    font-size: 10px;
    color: var(--color-foreground-muted);
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 600;
  }
  .ab-cart__secure {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-block-start: 18px;
    padding-block-start: 12px;
    border-block-start: 1px solid var(--ab-cart-line-c, var(--color-border));
    font-family: var(--font-body--family);
    font-size: 11px;
    color: var(--color-foreground-muted);
  }
  .ab-cart__secure svg { color: var(--color-primary); flex-shrink: 0; }

  .ab-cart__empty { padding-block: 80px; text-align: center; }
  .ab-cart__empty-title {
    margin: 0 0 12px;
    font-family: var(--font-body--family);
    font-size: 28px;
    font-weight: 800;
    color: var(--color-foreground);
    letter-spacing: -0.6px;
  }
  .ab-cart__empty-body {
    margin: 0 0 28px;
    font-family: var(--font-body--family);
    font-size: 16px;
    color: var(--color-foreground-muted);
  }
  .ab-cart__empty-cta {
    display: inline-block;
    background: var(--color-primary);
    color: var(--color-background);
    padding: 16px 28px;
    font-family: var(--font-body--family);
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 800;
    text-decoration: none;
  }

  @media screen and (max-width: 989px) {
    .ab-cart__body-cap { grid-template-columns: 1fr; }
    .ab-cart__headline { font-size: 36px; }
    .ab-cart__item { padding: 14px; gap: 12px; }
    .ab-cart__item-media { flex-basis: 80px; height: 80px; }
    .ab-cart__upsell-grid { grid-template-columns: 1fr; }
    .ab-cart__summary-sticky { position: static; }
  }
  @media screen and (max-width: 520px) {
    .ab-cart__progress-row {
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
    }
    .ab-cart__progress { padding: 12px 14px; }
  }
/* END_SECTION:ab-cart */

/* START_SECTION:ab-collection-grid-8 (INDEX:14) */
.ab-cg8 {
    /* vw scaling: 1 at 1440px+, floors at 0.7 (~1008px). Text + card
       padding shrink proportionally between 1440 and mobile breakpoint. */
    --ab-cg8-scale: clamp(0.7, 100vw / 1440px, 1);
    margin-top:    var(--ab-cg8-margin-top, 40px);
    margin-bottom: var(--ab-cg8-margin-bottom, 40px);
    margin-left:   var(--ab-cg8-margin-left, 0px);
    margin-right:  var(--ab-cg8-margin-right, 0px);
    padding-top:    var(--ab-cg8-pad-top, 40px);
    padding-bottom: var(--ab-cg8-pad-bottom, 40px);
  }

  .ab-cg8__cap {
    max-width: 1440px;
    margin-inline: auto;
    padding-left:  var(--ab-cg8-pad-left, 60px);
    padding-right: var(--ab-cg8-pad-right, 60px);
  }

  .ab-cg8__eyebrow {
    margin: 0 0 calc(12px * var(--ab-cg8-scale));
    font-family: var(--font-body--family);
    font-weight: 700;
    font-size: calc(var(--ab-cg8-eyebrow-size, 13px) * var(--ab-cg8-scale));
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--ab-cg8-eyebrow-c, #0891B2);
  }

  .ab-cg8__headline {
    margin: 0 0 calc(34px * var(--ab-cg8-scale));
    font-family: var(--font-body--family);
    font-size: calc(var(--ab-cg8-headline-size, 64px) * var(--ab-cg8-scale));
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: -2px;
    text-transform: uppercase;
    color: var(--ab-cg8-headline-c, #0b1220);
  }

  .ab-cg8__headline-accent {
    color: var(--ab-cg8-headline-accent-c, #0e9cc4);
  }

  /* Grid: 1.2fr hero | 1fr | 1fr, 2 rows for hero + smalls, row 3 for widerow.
     Small tile pictures are 1:1 squares → row heights follow small tile size,
     everything scales proportionally with viewport (no fixed pixel heights). */
  .ab-cg8__grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: var(--ab-cg8-grid-gap, 24px);
  }

  /* Widerow: full-width row 3, 3 equal columns nested inside main grid. */
  .ab-cg8__widerow {
    grid-column: 1 / -1;
    grid-row: 3;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ab-cg8-grid-gap, 24px);
  }

  /* Card base */
  .ab-cg8__card {
    display: flex;
    flex-direction: column;
    background: var(--ab-cg8-card-bg, #ffffff);
    border: 1px solid var(--ab-cg8-card-border-c, #e2e8f0);
    border-radius: var(--ab-cg8-card-radius, 12px);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 180ms ease, transform 180ms ease;
  }
  .ab-cg8__card:hover {
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.12);
    transform: translateY(-2px);
  }

  /* Photo container. Small tiles are 1:1 squares (image + text below).
     Hero picture flex-fills the double-row span for a tall portrait feel. */
  .ab-cg8__ph {
    position: relative;
    background: #f1f5f9;
    overflow: hidden;
  }
  .ab-cg8__ph > picture,
  .ab-cg8__ph > picture > img,
  .ab-cg8__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
  }

  /* Small tile: 1:1 square image */
  .ab-cg8__card--sm .ab-cg8__ph {
    aspect-ratio: 1 / 1;
  }

  /* Hero: spans left column, rows 1-2. Picture flex-fills the tile. */
  .ab-cg8__card--hero {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
  .ab-cg8__card--hero .ab-cg8__ph {
    flex: 1;
    min-height: var(--ab-cg8-hero-min-h, 480px);
  }

  /* Card body — padding shrinks with viewport (vw scale) */
  .ab-cg8__body {
    padding: calc(18px * var(--ab-cg8-scale)) calc(20px * var(--ab-cg8-scale)) calc(16px * var(--ab-cg8-scale));
    display: flex;
    flex-direction: column;
    gap: calc(12px * var(--ab-cg8-scale));
    flex: 0 0 auto;
  }
  .ab-cg8__card-title {
    margin: 0;
    font-family: var(--font-body--family);
    font-size: calc(var(--ab-cg8-card-title-size, 20px) * var(--ab-cg8-scale));
    font-weight: 700;
    letter-spacing: -0.3px;
    line-height: 1.15;
    color: var(--ab-cg8-card-title-c, #0b1220);
  }
  .ab-cg8__card--hero .ab-cg8__body {
    padding: calc(24px * var(--ab-cg8-scale)) calc(26px * var(--ab-cg8-scale)) calc(22px * var(--ab-cg8-scale));
    gap: calc(16px * var(--ab-cg8-scale));
  }
  .ab-cg8__card--hero .ab-cg8__card-title {
    font-size: calc(var(--ab-cg8-card-title-size-hero, 30px) * var(--ab-cg8-scale));
    font-weight: 800;
    letter-spacing: -1px;
    text-transform: uppercase;
  }

  .ab-cg8__meta {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--ab-cg8-card-border-c, #e2e8f0);
    padding-top: calc(12px * var(--ab-cg8-scale));
    gap: 8px;
  }
  .ab-cg8__count {
    font-family: var(--font-body--family);
    font-size: calc(var(--ab-cg8-card-count-size, 14px) * var(--ab-cg8-scale));
    color: var(--ab-cg8-card-count-c, #64748b);
    font-weight: 500;
  }
  .ab-cg8__shop {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body--family);
    font-size: calc(14px * var(--ab-cg8-scale));
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--ab-cg8-card-shop-c, #0e9cc4);
    white-space: nowrap;
  }
  .ab-cg8__shop svg {
    width: calc(14px * var(--ab-cg8-scale));
    height: calc(14px * var(--ab-cg8-scale));
  }
  .ab-cg8__card:hover .ab-cg8__shop {
    color: var(--ab-cg8-card-shop-hover-c, #0b7fa0);
  }

  /* Mobile: uniform 2-col, hero becomes a normal square card. */
  @media (max-width: 980px) {
    .ab-cg8 {
      margin-top:     var(--ab-cg8-mob-margin-top, 0px) !important;
      margin-bottom:  var(--ab-cg8-mob-margin-bottom, 0px) !important;
      margin-left:    var(--ab-cg8-mob-margin-left, 0px) !important;
      margin-right:   var(--ab-cg8-mob-margin-right, 0px) !important;
      padding-top:    var(--ab-cg8-mob-pad-top, 48px) !important;
      padding-bottom: var(--ab-cg8-mob-pad-bottom, 48px) !important;
    }
    .ab-cg8__cap {
      padding-left:  var(--ab-cg8-mob-pad-left, 24px) !important;
      padding-right: var(--ab-cg8-mob-pad-right, 24px) !important;
    }
    /* Mobile: reset vw scale + uniform 2-col grid = 4 rows of 2.
       Hero becomes a normal square card; widerow flattens into main grid
       via display: contents so all 8 cards flow left-to-right, top-to-bottom. */
    .ab-cg8 {
      --ab-cg8-scale: 1;
    }
    .ab-cg8__headline {
      font-size: var(--ab-cg8-mob-headline-size, 40px);
      letter-spacing: -1.2px;
      margin-bottom: 24px;
    }
    .ab-cg8__grid {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto;
      gap: var(--ab-cg8-mob-grid-gap, 12px);
    }
    .ab-cg8__widerow {
      display: contents;
    }
    .ab-cg8__card--hero {
      grid-column: auto;
      grid-row: auto;
    }
    .ab-cg8__card--hero .ab-cg8__ph {
      flex: none;
      min-height: 0;
      aspect-ratio: 1 / 1;
    }
    /* Card body — mirrors the mobile navbar dropdown card
       (.ab-mm__col-card / .ab-mm__col-body) — same padding + typography */
    .ab-cg8__card--hero .ab-cg8__body,
    .ab-cg8__body {
      padding: 8px 10px 10px;
      gap: 4px;
      flex: 1;
    }
    .ab-cg8__card--hero .ab-cg8__card-title,
    .ab-cg8__card-title {
      font-size: var(--ab-cg8-mob-card-title-size, 11.5px);
      font-weight: 700;
      letter-spacing: 0;
      text-transform: none;
      line-height: 1.2;
    }
    /* Meta row: no border-top (matches dropdown), tight 6px gap,
       count text nowrap so "42 · from $5" stays on one line. */
    .ab-cg8__meta {
      border-top: none;
      padding-top: 0;
      gap: 6px;
    }
    .ab-cg8__count {
      font-size: var(--ab-cg8-mob-card-count-size, 9.5px);
      font-weight: 600;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      min-width: 0;
    }
    .ab-cg8__shop {
      font-size: var(--ab-cg8-mob-card-shop-size, 9px);
      font-weight: 800;
      letter-spacing: 1px;
    }
    .ab-cg8__shop svg {
      width: 10px;
      height: 10px;
    }
    /* Card image rounded top corners match dropdown (12px) */
    .ab-cg8__card > .ab-cg8__ph {
      border-top-left-radius: 12px;
      border-top-right-radius: 12px;
    }
  }

  @media (max-width: 560px) {
    .ab-cg8__cap {
      padding-left: 18px;
      padding-right: 18px;
    }
    .ab-cg8__headline {
      font-size: 30px;
    }
    .ab-cg8__grid {
      gap: var(--ab-cg8-sm-mob-grid-gap, 6px);
    }
    /* Card body — same 8/10/10 as ≤980 mobile menu dropdown */
    .ab-cg8__body {
      padding: 8px 10px 10px;
    }
    .ab-cg8__card-title,
    .ab-cg8__card--hero .ab-cg8__card-title {
      font-size: var(--ab-cg8-sm-mob-card-title-size, 11.5px);
    }
    .ab-cg8__count {
      font-size: var(--ab-cg8-sm-mob-card-count-size, 9.5px);
    }
    .ab-cg8__shop {
      font-size: var(--ab-cg8-sm-mob-card-shop-size, 9.5px);
    }
  }
/* END_SECTION:ab-collection-grid-8 */

/* START_SECTION:ab-collection-grid (INDEX:15) */
.ab-collgrid {
    /* vw scaling for tile text sizes: 1 at 1440px+, floors at 0.7 */
    --ab-cg-scale: clamp(0.7, 100vw / 1440px, 1);
    margin-top:    var(--ab-cg-margin-top, 40px);
    margin-bottom: var(--ab-cg-margin-bottom, 40px);
    margin-left:   var(--ab-cg-margin-left, 0px);
    margin-right:  var(--ab-cg-margin-right, 0px);
    padding-top:    var(--ab-cg-pad-top, 40px);
    padding-bottom: var(--ab-cg-pad-bottom, 40px);
  }

  .ab-collgrid__cap {
    max-width: 1440px;
    margin-inline: auto;
    padding-left:  var(--ab-cg-pad-left, 48px);
    padding-right: var(--ab-cg-pad-right, 48px);
  }

  .ab-collgrid__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    margin-block-end: 32px;
  }

  .ab-collgrid__eyebrow {
    margin: 0 0 10px;
    font-family: var(--font-body--family);
    font-weight: 700;
    font-size: var(--ab-cg-eyebrow-size, 11px);
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--ab-cg-eyebrow-c, var(--color-primary));
  }

  .ab-collgrid__headline {
    margin: 0;
    font-family: var(--font-body--family);
    font-weight: 800;
    font-size: var(--ab-cg-headline-size, 64px);
    letter-spacing: -2px;
    line-height: 0.95;
    color: var(--ab-cg-headline-c, var(--color-foreground));
  }

  .ab-collgrid__headline-accent {
    color: var(--ab-cg-headline-accent-c, var(--color-primary));
  }

  .ab-collgrid__link {
    flex-shrink: 0;
    font-family: var(--font-body--family);
    font-weight: 700;
    font-size: var(--ab-cg-link-size, 12px);
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--ab-cg-link-c, var(--color-primary));
    border-block-end: 2px solid currentColor;
    padding-block-end: 3px;
    text-decoration: none;
  }

  .ab-collgrid__grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: var(--ab-cg-grid-gap, 12px);
    /* Grid height was designed for overlay text (0 extra space); with the
       new card layout each row also carries a text block below the image,
       so we extend the total height to preserve original image heights. */
    height: calc(var(--ab-cg-grid-h, 680px) + var(--ab-cg-text-height, 140px));
  }

  /* Tile card: image on top, text stacked below (unified desktop + mobile).
     Matches the header/mobile-menu dropdown collection card design. */
  .ab-collgrid__tile {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    background: #FFFFFF;
    border: 1px solid var(--ab-cg-tile-border-c, #E2E8F0);
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    overflow: hidden;
  }

  .ab-collgrid__tile--lg {
    grid-row: span 2;
  }

  .ab-collgrid__tile > picture {
    display: block;
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
  }

  .ab-collgrid__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms ease;
  }

  .ab-collgrid__tile:hover .ab-collgrid__img {
    transform: scale(1.04);
  }

  /* Dim overlay hidden — text no longer sits over the image */
  .ab-collgrid__dim {
    display: none;
  }

  /* Card body (below image) */
  .ab-collgrid__tile-text {
    flex-shrink: 0;
    padding: 12px 14px 14px;
    color: inherit;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  /* Eyebrow hidden globally in card mode (count + price merged into subline).
     Editor eyebrow field still writable — user can enable via customizer text. */
  .ab-collgrid__tile-eyebrow {
    display: none;
  }

  .ab-collgrid__tile-title {
    margin: 0;
    font-family: var(--font-body--family);
    font-weight: 700;
    font-size: calc(var(--ab-cg-tile-title-size, 20px) * var(--ab-cg-scale));
    line-height: 1.2;
    letter-spacing: -0.2px;
    color: var(--ab-cg-tile-title-color, #0B1220);
  }

  .ab-collgrid__tile--lg .ab-collgrid__tile-title {
    font-size: calc(var(--ab-cg-tile-title-size-lg, 28px) * var(--ab-cg-scale));
    line-height: 1.15;
  }

  /* Meta row: subline text on the left, SHOP → CTA on the right */
  .ab-collgrid__tile-sub {
    margin: 0;
    font-family: var(--font-body--family);
    font-weight: 600;
    font-size: calc(var(--ab-cg-tile-sub-size, 12px) * var(--ab-cg-scale));
    color: var(--ab-cg-tile-sub-color, #64748B);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
  }

  .ab-collgrid__tile-sub::after {
    content: "SHOP →";
    color: #0891B2;
    font-weight: 800;
    font-size: calc(11px * var(--ab-cg-scale));
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
  }

  /* If subline is missing but tile still renders, add SHOP → at bottom-right */
  .ab-collgrid__tile-text:not(:has(.ab-collgrid__tile-sub))::after {
    content: "SHOP →";
    color: #0891B2;
    font-weight: 800;
    font-size: calc(11px * var(--ab-cg-scale));
    letter-spacing: 1px;
    text-transform: uppercase;
    align-self: flex-end;
  }

  @media screen and (max-width: 989px) {
    .ab-collgrid {
      --ab-cg-scale: 1;
    }
    .ab-collgrid__head {
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;
    }
    .ab-collgrid__headline {
      font-size: 44px;
      letter-spacing: -1.4px;
    }
    .ab-collgrid__grid {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto;
      height: auto;
    }

    /* Mobile grid layout: 2-col with lg tile spanning both cols.
       Card style + border-radius inherited from base rules. */
    .ab-collgrid__tile--lg {
      grid-row: span 1;
      grid-column: span 2;
    }
    /* Tighter padding + smaller SHOP text on narrow mobile cards */
    .ab-collgrid__tile-text {
      padding: 8px 10px 10px;
      gap: 4px;
    }
    /* Mobile-specific sizes override desktop values */
    .ab-collgrid__tile-title {
      font-size: var(--ab-cg-tile-title-size-mob, 11.5px);
      line-height: 1.2;
      letter-spacing: 0;
      color: var(--ab-cg-tile-title-color-mob, #0B1220);
    }
    .ab-collgrid__tile--lg .ab-collgrid__tile-title {
      font-size: var(--ab-cg-tile-title-size-lg-mob, 18px);
    }
    .ab-collgrid__tile-sub {
      font-size: var(--ab-cg-tile-sub-size-mob, 9.5px);
      color: var(--ab-cg-tile-sub-color-mob, #64748B);
      gap: 6px;
    }
    .ab-collgrid__tile-sub::after {
      font-size: 9px;
    }
    .ab-collgrid__tile-text:not(:has(.ab-collgrid__tile-sub))::after {
      font-size: 9px;
    }
    /* On narrow mobile viewports the fixed 680px grid height crowds the
       small tiles; let grid rows size to content instead. */
    .ab-collgrid__grid {
      grid-template-rows: auto;
      height: auto;
    }
    /* Constrain image aspect ratios on mobile so tiles read like product
       cards (not squished landscape). */
    .ab-collgrid__tile > picture {
      aspect-ratio: 1 / 1;
    }
    .ab-collgrid__tile--lg > picture {
      aspect-ratio: 16 / 9;
    }
  }

  @media screen and (max-width: 480px) {
    /* 2-col layout on small phones so tiles read like collection page product
       cards (less scroll). First (large) tile spans both columns and stays
       portrait so the lifestyle image still leads the section. */
    .ab-collgrid__grid {
      grid-template-columns: 1fr 1fr;
    }
    .ab-collgrid__tile--lg {
      grid-column: span 2;
    }
    .ab-collgrid__tile--lg > picture {
      aspect-ratio: 3 / 4;
    }
    /* Tighter padding for narrow 2-col cards */
    .ab-collgrid__tile-text {
      padding: 10px 12px 12px;
    }
  }

  /* Mobile spacing overrides (configurable from editor) */
  @media screen and (max-width: 749px) {
    .ab-collgrid {
      margin-top:     var(--ab-cg-mob-margin-top, 0px) !important;
      margin-bottom:  var(--ab-cg-mob-margin-bottom, 0px) !important;
      margin-left:    var(--ab-cg-mob-margin-left, 0px) !important;
      margin-right:   var(--ab-cg-mob-margin-right, 0px) !important;
      padding-top:    var(--ab-cg-mob-pad-top, 20px) !important;
      padding-bottom: var(--ab-cg-mob-pad-bottom, 20px) !important;
    }
    .ab-collgrid__cap {
      padding-left:  var(--ab-cg-mob-pad-left, 24px) !important;
      padding-right: var(--ab-cg-mob-pad-right, 24px) !important;
    }
  }
/* END_SECTION:ab-collection-grid */

/* START_SECTION:ab-collection (INDEX:16) */
.ab-coll {
    position: relative;
    /* Prevents any internal element from triggering horizontal scroll on the
       whole page. `clip` is preferred over `hidden` because it doesn't break
       position: sticky on descendants. */
    overflow-x: clip;
  }

  /* All immediate children that wrap full-width content shouldn't bleed past
     the section either. */
  .ab-coll__main,
  .ab-coll__toolbar,
  .ab-coll__hero {
    max-width: 100%;
  }

  /* ---------- Hero ---------- */
  .ab-coll__hero {
    position: relative;
    overflow: hidden;
    background: var(--color-background);
  }

  .ab-coll__hero-pattern {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M0 40 L40 0 L80 40 L40 80 Z' fill='none' stroke='%2367e8f9' stroke-width='1.2' opacity='0.4'/%3E%3Cpath d='M20 40 L40 20 L60 40 L40 60 Z' fill='none' stroke='%23ffffff' stroke-width='1' opacity='0.25'/%3E%3Ccircle cx='40' cy='40' r='2' fill='%2367e8f9' opacity='0.5'/%3E%3C/svg%3E");
    background-size: 80px 80px;
  }

  .ab-coll__hero-cap {
    position: relative;
    max-width: 1440px;
    margin-inline: auto;
  }

  .ab-coll__hero-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
  }

  .ab-coll__hero-eyebrow {
    margin: 0 0 10px;
    font-family: var(--font-body--family);
    font-weight: 700;
    font-size: var(--ab-coll-hero-eyebrow-size, 11px);
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--ab-coll-hero-eyebrow-c, #67E8F9);
  }

  .ab-coll__hero-headline {
    margin: 0;
    font-family: var(--font-body--family);
    font-weight: 800;
    font-size: var(--ab-coll-hero-headline-size, 80px);
    letter-spacing: -0.5px;
    line-height: 0.95;
    text-transform: uppercase;
    color: var(--ab-coll-hero-headline-c, #FFFFFF);
  }

  .ab-coll__hero-headline-accent {
    color: var(--ab-coll-hero-headline-accent-c, #06B6D4);
  }

  .ab-coll__hero-desc {
    margin: 0;
    padding-block-end: 14px;
    font-family: var(--font-body--family);
    font-size: var(--ab-coll-hero-desc-size, 15px);
    line-height: 1.65;
    color: var(--ab-coll-hero-desc-c, #cbd5e1);
    max-width: 380px;
  }

  /* ---------- Toolbar ---------- */
  .ab-coll__toolbar {
    background: var(--ab-coll-toolbar-bg, var(--color-background));
    border-block-end: 1px solid var(--ab-coll-toolbar-border-c, var(--color-border));
    z-index: 40;
  }

  /* Sticky toolbar only on mobile: desktop has a sticky sidebar that
     keeps filters/sort/view accessible, so pinning the toolbar at the
     top of the viewport is redundant and steals vertical space. Mobile
     has no sidebar, so the toolbar is the only persistent control surface. */
  /* Toolbar is always in normal flow — no sticky/fixed behaviour. The IO
     below still toggles body.ab-toolbar-pinned because the header (in
     ab-header-v2) reads it to decide when to pin itself. */

  @media (max-width: 989px) {
    /* Reset fluid scale below 989px — drawer/mobile is its own design zone,
       readable base sizes beat shrunken-desktop scale. */
    .ab-coll { --ab-coll-scale: 1; }
  }

  .ab-coll__toolbar-cap {
    max-width: 1440px;
    margin-inline: auto;
    padding-block: calc(16px * var(--ab-coll-scale, 1));
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: calc(24px * var(--ab-coll-scale, 1));
    color: var(--ab-coll-toolbar-text-c, var(--color-foreground));
  }

  .ab-coll__toolbar-info {
    display: flex;
    align-items: center;
    gap: calc(14px * var(--ab-coll-scale, 1));
    font-family: var(--font-body--family);
    font-size: 12px;
    /* Fixed-width slot for the "Showing X of Y" copy. Floor at 100px so
       the label always fits on one line at the narrowest desktop width;
       clamp climbs to 110px around 1467px viewport (110 / 7.5 * 100). */
    width: clamp(100px, 7.5vw, 110px);
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .ab-coll__count {
    font-weight: 600;
    opacity: 0.7;
  }

  /* Sort dropdown: <details> defaults to display:block. Force inline +
     pin to the right edge of the toolbar via margin-inline-start: auto
     (so toolbar-cap can use justify-content: flex-start for the rest of
     the row but sort stays in the right corner). Capped at 220px so the
     "Sort · Featured products" summary doesn't sprawl. */
  .ab-coll__sort {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    max-width: 220px;
    margin-inline-start: auto;
  }
  .ab-coll__sort-btn {
    max-width: 100%;
  }
  .ab-coll__sort-btn > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  /* "View as" column-count toggle — sits next to info, not pushed right. */
  .ab-coll__view-as {
    display: inline-flex;
    align-items: center;
    gap: calc(12px * var(--ab-coll-scale, 1));
    flex: 0 0 auto;
  }
  .ab-coll__view-as-label {
    font-family: var(--font-body--family);
    font-size: 11px;
    letter-spacing: 1.5px;
    font-weight: 700;
    text-transform: uppercase;
    opacity: 0.7;
  }
  .ab-coll__view-as-btns { display: inline-flex; gap: calc(6px * var(--ab-coll-scale, 1)); }
  .ab-coll__view-as-btn {
    width: calc(32px * var(--ab-coll-scale, 1));
    height: calc(32px * var(--ab-coll-scale, 1));
    padding: 0;
    border: 1.5px solid var(--ab-coll-toolbar-border-c, var(--color-border));
    background: var(--ab-coll-toolbar-bg, var(--color-background));
    color: var(--ab-coll-toolbar-text-c, var(--color-foreground));
    opacity: 0.45;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity 150ms ease, border-color 150ms ease;
  }
  .ab-coll__view-as-btn:hover { opacity: 0.8; }
  .ab-coll__view-as-btn[aria-pressed="true"] {
    opacity: 1;
    border-color: currentColor;
    border-width: 2px;
  }

  /* Hide view-as below 1000px — at that width the grid auto-shrinks via
     the responsive @media rules anyway (3 cols → 2 cols at 989px,
     1 col at 480px), so the manual density toggle isn't useful. */
  @media screen and (max-width: 999px) {
    .ab-coll__view-as { display: none; }
  }

  /* "Select filters" toolbar button — mobile only, opens the sidebar as a
     drawer. Hidden on desktop where the sidebar is always inline. */
  .ab-coll__select-filters-btn {
    display: none;
    align-items: center;
    gap: calc(8px * var(--ab-coll-scale, 1));
    padding: calc(9px * var(--ab-coll-scale, 1)) calc(14px * var(--ab-coll-scale, 1));
    background: var(--ab-coll-toolbar-bg, var(--color-background));
    border: 1px solid var(--ab-coll-toolbar-border-c, var(--color-border));
    color: inherit;
    font-family: var(--font-body--family);
    font-size: 11px;
    letter-spacing: 1.5px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    flex: 0 0 auto;
  }
  .ab-coll__select-filters-btn svg { flex-shrink: 0; }
  .ab-coll__select-filters-btn:hover {
    border-color: var(--ab-coll-toolbar-text-c, var(--color-foreground));
  }

  /* Close X inside drawer head — mobile only */
  .ab-coll-sb__close {
    display: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--ab-cb-deep);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
  }
  .ab-coll-sb__close:hover { background: rgb(8 145 178 / 0.08); }
  .ab-coll-sb__head-right {
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }

  /* Backdrop (mobile only, shown when drawer is open) */
  .ab-coll__sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgb(11 18 32 / 0.5);
    border: 0;
    padding: 0;
    cursor: pointer;
    z-index: 199;
  }
  .ab-coll__sidebar-backdrop.is-open { display: block; }

  /* ----- Drawer mode (≤989px) -----
     Specificity chained on .ab-coll root to defeat the un-scoped sticky
     rule later in this stylesheet. Mirrors cart-drawer / mobile-menu
     pattern (visibility + pointer-events off while closed). */
  @media screen and (max-width: 989px) {
    .ab-coll .ab-coll__select-filters-btn { display: inline-flex; }

    .ab-coll .ab-coll__sidebar,
    .ab-coll .ab-coll__sidebar.is-sticky {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      height: 100vh;
      width: min(360px, 92vw);
      z-index: 300;
      transform: translateX(-100%);
      transition: transform 280ms cubic-bezier(0.4, 0.1, 0.2, 1);
      overflow-y: auto;
      background: var(--color-background);
      padding: 16px;
      margin: 0;
      visibility: hidden;
      pointer-events: none;
    }
    .ab-coll .ab-coll__sidebar.is-open,
    .ab-coll .ab-coll__sidebar.is-sticky.is-open {
      transform: translateX(0);
      visibility: visible;
      pointer-events: auto;
    }

    .ab-coll .ab-coll-sb__close { display: inline-flex; }

    /* Backdrop full-viewport so the drawer fully covers the header */
    .ab-coll__sidebar-backdrop {
      top: 0;
      z-index: 299;
    }

    /* Toolbar: tighter padding + 2-row grid layout.
       Row 1: just info (right-aligned). Row 2: filters + sort side-by-side. */
    .ab-coll__toolbar {
      padding-inline: 12px !important;
    }
    .ab-coll__toolbar-cap {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-areas:
        ".       info"
        "filters sort";
      column-gap: 10px;
      row-gap: 10px;
      flex-direction: row;
      align-items: stretch;
    }
    .ab-coll__toolbar-info {
      grid-area: info;
      justify-self: end;
      width: auto;
      flex: none;
    }
    .ab-coll__select-filters-btn {
      grid-area: filters;
      width: auto;
      max-width: 100%;
      justify-content: space-between;
      min-height: 44px;
    }
    .ab-coll__sort {
      grid-area: sort;
      width: auto;
      max-width: 100%;
      margin-inline-start: 0;
    }
    .ab-coll__sort-btn {
      width: 100%;
      max-width: 100%;
      min-height: 44px;
      justify-content: space-between;
    }

    /* When toolbar is sticky AND has reached the top (pinned), collapse
       the info row to shrink toolbar height. .is-stuck is added by JS
       via IntersectionObserver on the sentinel element above. */
    .ab-coll__toolbar.is-sticky.is-stuck .ab-coll__toolbar-info {
      display: none;
    }
    .ab-coll__toolbar.is-sticky.is-stuck .ab-coll__toolbar-cap {
      grid-template-areas: "filters sort";
      grid-template-rows: auto;
      row-gap: 0;
    }
  }

  /* When the collection drawer is open, push the site header below the
     drawer overlay. Some Ella header sections use higher stacking
     contexts than our drawer's z-index — this override neutralizes that
     for the duration of the open state. */
  body.ab-coll-drawer-open #header-group {
    z-index: 1 !important;
  }

  .ab-coll__sort-btn {
    list-style: none;
    cursor: pointer;
    border: 1px solid var(--ab-coll-toolbar-border-c, var(--color-border));
    background: var(--ab-coll-toolbar-bg, var(--color-background));
    color: inherit;
    padding: calc(9px * var(--ab-coll-scale, 1)) calc(14px * var(--ab-coll-scale, 1));
    font-family: var(--font-body--family);
    font-size: 11px;
    letter-spacing: 1.5px;
    font-weight: 700;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: calc(8px * var(--ab-coll-scale, 1));
  }
  .ab-coll__sort-btn::-webkit-details-marker { display: none; }

  .ab-coll__sort[open] .ab-coll__sort-chev {
    transform: rotate(180deg);
  }

  .ab-coll__sort-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 220px;
    background: var(--ab-coll-toolbar-bg, var(--color-background));
    border: 1px solid var(--ab-coll-toolbar-border-c, var(--color-border));
    list-style: none;
    margin: 0;
    padding: 6px 0;
    z-index: 50;
  }

  .ab-coll__sort-option {
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: calc(8px * var(--ab-coll-scale, 1)) calc(14px * var(--ab-coll-scale, 1));
    font-family: var(--font-body--family);
    font-size: 12px;
    color: inherit;
    cursor: pointer;
  }
  .ab-coll__sort-option:hover {
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }
  .ab-coll__sort-option.is-active {
    font-weight: 700;
    color: var(--color-primary);
  }

  /* ===========================================================
     SIDEBAR — soft-surface cards redesign
     (matches _project-docs/html-files/new-pages/Authentic Bazaar
     - Filter Sidebar.html). Replaces the older flat filter list.
     =========================================================== */

  /* Outer container — white panel (no border per user request). Border &
     radius left as var hooks so a future customizer setting can re-enable. */
  .ab-coll-sb {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--ab-coll-sb-bg, #0891B214);
    border: var(--ab-coll-sb-border, none);
    border-radius: var(--ab-coll-sb-radius, 0);
    padding: var(--ab-coll-sb-pad, 12px);
    --ab-cb-surf:   #F6F5F1;
    --ab-cb-line:   #E7E4DC;
    --ab-cb-line2:  #CDC8BD;
    --ab-cb-deep:   #0B1220;
    --ab-cb-ink:    #0F172A;
    --ab-cb-ink2:   #334155;
    --ab-cb-ink3:   #64748B;
    --ab-cb-accent: var(--ab-coll-accent, #0891B2);
  }

  /* Inner cards — white bg, slight right-side padding shave so chevron
     sits closer to the edge. */
  .ab-coll-card {
    background: var(--ab-coll-card-bg, #FFFFFF);
    border-radius: var(--ab-coll-card-radius, 14px);
    padding: var(--ab-coll-card-pad, 12px 8px 12px 16px);
  }
  .ab-coll-card--head { padding: var(--ab-coll-card-pad, 12px 8px 12px 16px); }

  /* Head — title + count pill + active chips */
  .ab-coll-sb__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .ab-coll-sb__title {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--ab-cb-deep);
  }
  .ab-coll-sb__pill {
    font-size: 11px;
    font-weight: 700;
    color: var(--ab-cb-accent);
    background: rgb(8 145 178 / 0.1);
    padding: calc(3px * var(--ab-coll-scale, 1)) calc(10px * var(--ab-coll-scale, 1));
    border-radius: 999px;
    white-space: nowrap;
  }
  .ab-coll-sb__active {
    display: flex;
    flex-wrap: wrap;
    gap: calc(6px * var(--ab-coll-scale, 1));
    margin-top: calc(11px * var(--ab-coll-scale, 1));
  }
  .ab-coll-achip {
    display: inline-flex;
    align-items: center;
    gap: calc(7px * var(--ab-coll-scale, 1));
    background: var(--ab-cb-deep);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2px;
    padding: calc(5px * var(--ab-coll-scale, 1)) calc(8px * var(--ab-coll-scale, 1)) calc(5px * var(--ab-coll-scale, 1)) calc(11px * var(--ab-coll-scale, 1));
    border-radius: 999px;
    white-space: nowrap;
    text-decoration: none;
    transition: opacity 150ms ease;
  }
  .ab-coll-achip__sw {
    width: calc(10px * var(--ab-coll-scale, 1));
    height: calc(10px * var(--ab-coll-scale, 1));
    border-radius: 50%;
    border: 1px solid rgb(255 255 255 / 0.25);
    margin-left: -2px;
  }
  .ab-coll-achip__x {
    opacity: 0.55;
    font-size: 14px;
    line-height: 1;
    padding: 0 1px;
  }
  .ab-coll-sb__clear {
    background: none;
    border: none;
    color: var(--ab-cb-ink3);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    padding: calc(5px * var(--ab-coll-scale, 1)) calc(4px * var(--ab-coll-scale, 1));
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
  }
  .ab-coll-sb__clear:hover { color: var(--ab-cb-accent); }

  /* Accordion (replaces old .ab-coll-filter rules — uses native <details>) */
  .ab-coll-acc { display: block; }
  .ab-coll-acc[open] .ab-coll-acc__chev { transform: rotate(0); }
  .ab-coll-acc:not([open]) .ab-coll-acc__chev { transform: rotate(-90deg); }
  .ab-coll-acc__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--ab-cb-deep);
    user-select: none;
    cursor: pointer;
    list-style: none;
    padding: calc(2px * var(--ab-coll-scale, 1)) 0;
  }
  .ab-coll-acc__head::-webkit-details-marker { display: none; }
  .ab-coll-acc__lbl {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.2px;
  }
  .ab-coll-acc__n {
    color: var(--ab-cb-ink3);
    font-weight: 500;
    margin-left: calc(6px * var(--ab-coll-scale, 1));
  }
  .ab-coll-acc__chev {
    width: calc(11px * var(--ab-coll-scale, 1));
    height: calc(11px * var(--ab-coll-scale, 1));
    flex-shrink: 0;
    transition: transform 250ms ease;
  }
  .ab-coll-acc__body { padding-top: calc(12px * var(--ab-coll-scale, 1)); }

  /* Option rows (list filters) */
  .ab-coll-opts { list-style: none; margin: 0; padding: 0; }
  .ab-coll-opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(5px * var(--ab-coll-scale, 1)) 0;
    font-size: 13px;
    color: var(--ab-cb-ink2);
    cursor: pointer;
  }
  .ab-coll-opt input { display: none; }
  .ab-coll-opt__nm {
    display: flex;
    align-items: center;
    gap: calc(10px * var(--ab-coll-scale, 1));
    white-space: nowrap;
    min-width: 0;
  }
  .ab-coll-opt__box {
    width: calc(18px * var(--ab-coll-scale, 1));
    height: calc(18px * var(--ab-coll-scale, 1));
    border-radius: 6px;
    background: #FFFFFF;
    border: 1.5px solid var(--ab-cb-line2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 150ms ease, border-color 150ms ease;
    flex: 0 0 auto;
  }
  .ab-coll-opt__box svg { opacity: 0; }
  .ab-coll-opt.is-on .ab-coll-opt__box {
    background: var(--ab-cb-accent);
    border-color: var(--ab-cb-accent);
  }
  .ab-coll-opt.is-on .ab-coll-opt__box svg { opacity: 1; }
  .ab-coll-opt.is-on { color: var(--ab-cb-deep); font-weight: 600; }
  .ab-coll-opt__cnt {
    font-size: 11.5px;
    color: var(--ab-cb-ink3);
    font-variant-numeric: tabular-nums;
  }
  .ab-coll-opt.is-disabled { opacity: 0.35; cursor: not-allowed; }

  /* Color dots */
  .ab-coll-dots {
    display: flex;
    flex-wrap: wrap;
    gap: calc(9px * var(--ab-coll-scale, 1));
    padding-top: 2px;
  }
  .ab-coll-dot {
    width: calc(27px * var(--ab-coll-scale, 1));
    height: calc(27px * var(--ab-coll-scale, 1));
    border-radius: 999px;
    border: 1px solid var(--ab-cb-line2);
    position: relative;
    padding: 0;
    cursor: pointer;
    background-clip: padding-box;
  }
  .ab-coll-dot input { display: none; }
  .ab-coll-dot.is-on {
    box-shadow: 0 0 0 2px var(--ab-cb-surf),
                0 0 0 3.5px var(--ab-cb-accent);
  }
  .ab-coll-dot__ck {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
  }
  .ab-coll-dot.is-on .ab-coll-dot__ck { opacity: 1; }
  .ab-coll-dot.is-disabled { opacity: 0.35; cursor: not-allowed; }

  /* Price — dual range slider + From/To fields */
  .ab-coll-pr {
    position: relative;
    height: 22px;
    margin: 4px 0 14px;
  }
  .ab-coll-pr__track {
    position: absolute;
    left: 0;
    right: 0;
    top: 9px;
    height: 3px;
    border-radius: 2px;
    background: var(--ab-cb-line2);
  }
  .ab-coll-pr__fill {
    position: absolute;
    top: 9px;
    height: 3px;
    border-radius: 2px;
    background: var(--ab-cb-accent);
  }
  .ab-coll-pr input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 22px;
    margin: 0;
    background: transparent;
    pointer-events: none;
  }
  .ab-coll-pr input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #FFFFFF;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 1px 4px rgb(0 0 0 / 0.25);
    border: 1px solid var(--ab-cb-line);
  }
  .ab-coll-pr input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: 1px solid var(--ab-cb-line);
    border-radius: 50%;
    background: #FFFFFF;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 1px 4px rgb(0 0 0 / 0.25);
  }
  .ab-coll-prf {
    display: flex;
    align-items: flex-end;
    gap: calc(10px * var(--ab-coll-scale, 1));
  }
  .ab-coll-prf__col { flex: 1; }
  .ab-coll-prf__lbl {
    display: block;
    font-size: 9.5px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--ab-cb-ink3);
    font-weight: 700;
    margin-bottom: calc(5px * var(--ab-coll-scale, 1));
  }
  .ab-coll-prf__inwrap {
    display: flex;
    align-items: center;
    gap: calc(5px * var(--ab-coll-scale, 1));
    background: #FFFFFF;
    border: 1.5px solid var(--ab-cb-line);
    border-radius: 10px;
    padding: calc(9px * var(--ab-coll-scale, 1)) calc(11px * var(--ab-coll-scale, 1));
    transition: border-color 150ms ease;
  }
  .ab-coll-prf__inwrap:focus-within { border-color: var(--ab-cb-accent); }
  .ab-coll-prf__cur {
    font-size: 13px;
    color: var(--ab-cb-ink3);
    font-weight: 500;
  }
  .ab-coll-prf__col input {
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    font-size: 14px;
    font-weight: 600;
    color: var(--ab-cb-deep);
    padding: 0;
    font-variant-numeric: tabular-nums;
    appearance: textfield;
  }
  .ab-coll-prf__col input::-webkit-outer-spin-button,
  .ab-coll-prf__col input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .ab-coll-prf__dash {
    padding-bottom: calc(11px * var(--ab-coll-scale, 1));
    color: var(--ab-cb-ink3);
    font-size: 13px;
    flex: 0 0 auto;
  }

  /* Sticky CTA */
  .ab-coll-sb__cta {
    position: sticky;
    bottom: 18px;
    margin-top: 4px;
    width: 100%;
    background: var(--ab-cb-deep);
    color: #FFFFFF;
    border: none;
    padding: calc(16px * var(--ab-coll-scale, 1));
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: 12px;
    box-shadow: 0 10px 24px rgb(11 18 32 / 0.20);
    transition: background-color 150ms ease;
    cursor: pointer;
    font-family: inherit;
  }
  .ab-coll-sb__cta:hover { background: #17223A; }

  /* ---------- Layout ---------- */
  .ab-coll__main {
    padding: 12px;
  }

  .ab-coll__main-cap {
    max-width: 1440px;
    margin-inline: auto;
  }

  .ab-coll__layout {
    display: grid;
    grid-template-columns: var(--ab-coll-sidebar-w, 280px) minmax(0, 1fr);
    gap: var(--ab-coll-layout-gap, 32px);
    align-items: start;
  }

  .ab-coll__layout--no-sidebar {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Grid items must be allowed to shrink below their content width — otherwise
     a wide product card / image / title pushes the products column past 1fr
     and the whole page gets horizontal scroll. */
  .ab-coll__sidebar,
  .ab-coll__products {
    min-width: 0;
  }

  /* Removed defensive `img { height: auto }` reset — it was overriding
     the card snippet's intended `.ab-card__img { height: 100%; object-fit:
     cover }` which fills the 5/4 media slot. Cards now render at full
     intended height. Sidebar swatch images already control their own
     dimensions, so no global img rule is needed here. */

  /* ---------- Sidebar wrapper ----------
     bg/border/padding removed — those now live on the inner .ab-coll-sb
     (white panel). Radius hook kept for customizer override.

     Sticky mode (desktop): top offset clears the sticky toolbar above.
     align-self:start keeps the sidebar from stretching to fill the grid
     row (which would defeat sticky pinning). We deliberately DO NOT set
     height/max-height here — the sidebar takes its natural content height
     so the browser can pin the top edge cleanly until the parent grid
     (which ends with the last product) scrolls past it. */
  .ab-coll__sidebar {
    border-radius: var(--ab-coll-sidebar-radius, 0);
  }

  .ab-coll__sidebar.is-sticky {
    position: sticky;
    top: var(--ab-coll-sticky-top, 0px);
    align-self: start;
    /* When all accordions open and the sidebar overflows the viewport,
       allow internal scrolling so the user can reach the bottom (CTA
       button, last filter) without losing the sticky pin. max-height
       leaves 16px of breathing room at the bottom. */
    max-height: calc(100vh - var(--ab-coll-sticky-top, 0px) - 16px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* Subtle scrollbar so the overflow doesn't look broken. */
  .ab-coll__sidebar.is-sticky::-webkit-scrollbar { width: 6px; }
  .ab-coll__sidebar.is-sticky::-webkit-scrollbar-track { background: transparent; }
  .ab-coll__sidebar.is-sticky::-webkit-scrollbar-thumb {
    background: rgb(11 18 32 / 0.15);
    border-radius: 999px;
  }
  .ab-coll__sidebar.is-sticky::-webkit-scrollbar-thumb:hover {
    background: rgb(11 18 32 / 0.3);
  }

  .ab-coll__sidebar-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    border-block-end: 2px solid var(--color-foreground);
    padding-block-end: 12px;
    margin-block-end: 4px;
  }

  .ab-coll__sidebar-title {
    font-family: var(--font-body--family);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--color-foreground);
  }

  .ab-coll__clear {
    font-family: var(--font-body--family);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--ab-coll-clear-c, var(--color-primary));
    text-decoration: none;
  }
  .ab-coll__clear:hover { text-decoration: underline; }

  .ab-coll__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-block: 14px 18px;
    border-block-end: 1px solid var(--ab-coll-divider-c, var(--color-border));
  }

  .ab-coll__chip {
    background: var(--ab-coll-chip-bg, #67E8F9);
    color: var(--ab-coll-chip-c, #0B1220);
    padding: 4px 8px;
    font-family: var(--font-body--family);
    font-size: 10px;
    letter-spacing: 0.8px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .ab-coll__chip:hover { opacity: 0.85; }

  .ab-coll__sidebar-actions {
    margin-block-start: 16px;
  }

  .ab-coll__apply {
    width: 100%;
    background: var(--color-foreground);
    color: var(--color-background);
    border: 0;
    padding: 14px 0;
    font-family: var(--font-body--family);
    font-size: 11px;
    letter-spacing: 1.6px;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
  }
  .ab-coll__apply:hover { opacity: 0.92; }

  .ab-coll__empty-filters {
    margin: 14px 0;
    font-family: var(--font-body--family);
    font-size: 12px;
    line-height: 1.5;
    color: var(--color-foreground-muted);
  }

  /* ---------- Filter group (rendered by ab-collection-filter snippet) ---------- */
  .ab-coll-filter {
    border-block-end: 1px solid var(--ab-coll-divider-c, var(--color-border));
    padding-block: 14px;
  }

  .ab-coll-filter[open] .ab-coll-filter__chev {
    transform: rotate(180deg);
  }

  .ab-coll-filter__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    list-style: none;
  }
  .ab-coll-filter__head::-webkit-details-marker { display: none; }

  .ab-coll-filter__label {
    font-family: var(--font-body--family);
    font-size: var(--ab-coll-filter-label-size, 12px);
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--ab-coll-filter-label-c, var(--color-foreground));
  }

  .ab-coll-filter__count {
    color: var(--color-foreground-muted);
    font-weight: 600;
    margin-inline-start: 4px;
  }

  .ab-coll-filter__chev {
    font-size: 16px;
    color: var(--ab-coll-filter-label-c, var(--color-foreground));
    font-weight: 600;
    transition: transform 200ms ease;
  }

  .ab-coll-filter__body {
    padding-block-start: 12px;
  }

  /* List checkboxes */
  .ab-coll-filter__list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .ab-coll-filter__check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-block: 6px;
    cursor: pointer;
    font-family: var(--font-body--family);
    font-size: 13px;
  }

  .ab-coll-filter__check input { display: none; }

  .ab-coll-filter__check-box {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--color-border);
    background: var(--color-background);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-background);
    font-size: 11px;
    font-weight: 800;
    transition: all 150ms ease;
  }

  .ab-coll-filter__check-box::before { content: ""; }

  .ab-coll-filter__check.is-active .ab-coll-filter__check-box {
    background: var(--ab-coll-checkbox-c, var(--color-foreground));
    border-color: var(--ab-coll-checkbox-c, var(--color-foreground));
  }

  .ab-coll-filter__check.is-active .ab-coll-filter__check-box::before {
    content: "✓";
  }

  .ab-coll-filter__check-label {
    flex: 1;
    color: var(--color-foreground-muted);
  }

  .ab-coll-filter__check.is-active .ab-coll-filter__check-label {
    color: var(--color-foreground);
    font-weight: 600;
  }

  .ab-coll-filter__check-count {
    font-size: 11px;
    color: var(--color-foreground-muted);
    font-weight: 600;
  }

  .ab-coll-filter__check.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  /* Swatches */
  /* Flex-wrap (not grid) so swatches pack tight to their dot+label width
     instead of stretching across 1fr tracks. */
  .ab-coll-filter__swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    padding-block: 4px 6px;
  }

  .ab-coll-filter__swatch {
    cursor: pointer;
    text-align: center;
    width: var(--ab-coll-swatch-size, 40px);
    flex: 0 0 auto;
  }

  /* Color dot — fixed circle, fluid vw-scaling between breakpoints.
     Floor 28px (small mobile), fluid 3vw, cap 40px (≥1333px viewport).
     Sits inside the wider grid track (--ab-coll-swatch-size) with the
     label below; centered horizontally. */
  .ab-coll-filter__swatch-color {
    display: block;
    width: clamp(28px, 3vw, 40px);
    height: clamp(28px, 3vw, 40px);
    border-radius: 50px;
    border: 1px solid var(--color-border);
    margin: 0 auto 4px;
    transition: border 150ms ease;
  }

  .ab-coll-filter__swatch.is-active .ab-coll-filter__swatch-color {
    border: 2px solid var(--color-foreground);
  }

  .ab-coll-filter__swatch-label {
    font-family: var(--font-body--family);
    font-size: 9px;
    font-weight: 600;
    color: var(--color-foreground-muted);
    letter-spacing: 0.6px;
    text-transform: uppercase;
  }

  .ab-coll-filter__swatch.is-disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }

  /* Toggle */
  .ab-coll-filter__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: 8px;
    cursor: pointer;
    font-family: var(--font-body--family);
    font-size: 13px;
  }

  .ab-coll-filter__toggle-label {
    color: var(--color-foreground-muted);
  }

  .ab-coll-filter__toggle.is-on .ab-coll-filter__toggle-label {
    color: var(--color-foreground);
    font-weight: 600;
  }

  .ab-coll-filter__toggle-switch {
    width: 36px;
    height: 20px;
    border-radius: 999px;
    background: var(--color-border);
    position: relative;
    transition: background 200ms ease;
  }

  .ab-coll-filter__toggle.is-on .ab-coll-filter__toggle-switch {
    background: var(--ab-coll-toggle-on-c, var(--color-primary));
  }

  .ab-coll-filter__toggle-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: var(--color-background);
    border-radius: 50%;
    transition: left 200ms ease;
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.2);
  }

  .ab-coll-filter__toggle.is-on .ab-coll-filter__toggle-knob {
    left: 18px;
  }

  /* Price */
  .ab-coll-filter__price {
    padding-block: 6px 12px;
  }

  .ab-coll-filter__price-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .ab-coll-filter__price-input {
    position: relative;
    display: block;
    border: 1px solid var(--color-border);
    padding: 8px 10px;
  }

  .ab-coll-filter__price-label {
    display: block;
    font-family: var(--font-body--family);
    font-size: 9px;
    color: var(--color-foreground-muted);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-block-end: 2px;
  }

  .ab-coll-filter__price-prefix {
    font-family: var(--font-body--family);
    font-size: 13px;
    color: var(--color-foreground-muted);
    margin-inline-end: 2px;
  }

  .ab-coll-filter__price-input input {
    border: 0;
    padding: 0;
    font-family: var(--font-body--family);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-foreground);
    background: transparent;
    width: 70%;
    outline: none;
  }

  .ab-coll-filter__price-meta {
    display: flex;
    justify-content: space-between;
    margin-block-start: 8px;
    font-family: var(--font-body--family);
    font-size: 9px;
    color: var(--color-foreground-muted);
    letter-spacing: 0.5px;
  }

  /* ---------- Products grid ---------- */
  .ab-coll__grid {
    display: grid;
    grid-template-columns: repeat(var(--ab-coll-grid-cols, 3), minmax(0, 1fr));
    column-gap: 12px;
    row-gap: 12px;
    min-width: 0;
  }

  .ab-coll__grid > * {
    min-width: 0;
  }

  /* ---------- Pagination ---------- */
  .ab-coll__pagination {
    display: flex;
    justify-content: center;
    gap: calc(8px * var(--ab-coll-scale, 1));
    margin-block-start: calc(56px * var(--ab-coll-scale, 1));
  }

  .ab-coll__pag-link {
    min-width: calc(40px * var(--ab-coll-scale, 1));
    height: calc(40px * var(--ab-coll-scale, 1));
    padding-inline: calc(12px * var(--ab-coll-scale, 1));
    border: 1px solid var(--ab-coll-pag-border-c, var(--color-border));
    background: var(--color-background);
    color: var(--color-foreground);
    font-family: var(--font-body--family);
    font-size: calc(13px * var(--ab-coll-scale, 1));
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .ab-coll__pag-link:hover {
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .ab-coll__pag-link.is-active {
    background: var(--ab-coll-pag-active-bg, var(--color-foreground));
    color: var(--ab-coll-pag-active-c, var(--color-background));
    border-color: var(--ab-coll-pag-active-bg, var(--color-foreground));
  }

  .ab-coll__pag-link.is-gap {
    border: 0;
    cursor: default;
    color: var(--color-foreground-muted);
  }

  .ab-coll__pag-link--next {
    font-size: calc(11px * var(--ab-coll-scale, 1));
    letter-spacing: 1.5px;
    text-transform: uppercase;
  }

  /* ---------- Empty state ---------- */
  .ab-coll__empty {
    text-align: center;
    padding: 60px 24px;
  }

  .ab-coll__empty-title {
    margin: 0 0 8px;
    font-family: var(--font-body--family);
    font-size: 22px;
    font-weight: 800;
    color: var(--color-foreground);
  }

  .ab-coll__empty-body {
    margin: 0 0 22px;
    font-family: var(--font-body--family);
    font-size: 14px;
    color: var(--color-foreground-muted);
  }

  .ab-coll__empty-cta {
    display: inline-block;
    background: var(--color-foreground);
    color: var(--color-background);
    padding: 12px 22px;
    font-family: var(--font-body--family);
    font-size: 12px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    font-weight: 700;
    text-decoration: none;
  }

  /* ---------- Responsive ---------- */
  @media screen and (max-width: 989px) {
    .ab-coll__hero-row {
      flex-direction: column;
      align-items: flex-start;
      gap: 20px;
    }
    .ab-coll__hero-headline {
      font-size: 34px;
      letter-spacing: 0;
    }
    .ab-coll__layout {
      grid-template-columns: 1fr;
    }
    .ab-coll__sidebar.is-sticky {
      position: static;
    }
  }

  /* Card grid breakpoints — match the card's own internal responsive
     thresholds in snippets/ab-bestseller-card.liquid (tablet at 880px,
     phone compact at 620px). 2 columns hold at every size below 880px;
     the card itself goes compact at 620px. */
  @media screen and (max-width: 880px) {
    .ab-coll__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
/* END_SECTION:ab-collection */

/* START_SECTION:ab-confirmation (INDEX:17) */
.ab-cf__cap { max-width: 1440px; margin-inline: auto; }
  .ab-cf__row {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 48px;
    align-items: start;
  }
  .ab-cf__main { min-width: 0; }
  .ab-cf__aside { min-width: 0; display: flex; flex-direction: column; gap: 20px; }

  .ab-cf__eyebrow {
    margin: 0 0 14px;
    font-family: var(--font-body--family);
    font-size: 11px;
    letter-spacing: 2.5px;
    color: var(--ab-cf-eyebrow-c, var(--color-primary));
    font-weight: 700;
    text-transform: uppercase;
  }
  .ab-cf__headline {
    margin: 0 0 18px;
    font-family: var(--font-body--family);
    font-weight: 800;
    font-size: var(--ab-cf-headline-size, 72px);
    letter-spacing: -2.2px;
    line-height: 0.95;
    color: var(--ab-cf-headline-c, var(--color-foreground));
  }
  .ab-cf__headline-accent { color: var(--ab-cf-headline-accent-c, var(--color-primary)); }
  .ab-cf__body {
    margin: 0 0 32px;
    font-family: var(--font-body--family);
    font-size: 17px;
    color: var(--ab-cf-body-c, var(--color-foreground-muted));
    max-width: 520px;
    line-height: 1.6;
  }

  .ab-cf__timeline {
    border: 1px solid var(--ab-cf-line-c, var(--color-border));
    padding: 28px;
    margin-block-end: 28px;
  }
  .ab-cf__timeline-label {
    margin: 0 0 20px;
    font-family: var(--font-body--family);
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--color-foreground);
    text-transform: uppercase;
    font-weight: 700;
  }
  .ab-cf__steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    position: relative;
  }
  .ab-cf__step { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; position: relative; }
  .ab-cf__step-dot {
    width: 22px; height: 22px;
    border-radius: 999px;
    background: var(--ab-cf-step-pending-c, #CBD5E1);
    z-index: 2;
  }
  .ab-cf__step--done .ab-cf__step-dot,
  .ab-cf__step--active .ab-cf__step-dot { background: var(--ab-cf-step-active-c, var(--color-primary)); }
  .ab-cf__step--active .ab-cf__step-dot {
    box-shadow: 0 0 0 4px rgb(var(--color-primary-rgb) / 0.35);
  }
  .ab-cf__step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 10px; left: 22px; right: 0;
    height: 2px;
    background: var(--ab-cf-step-pending-c, #CBD5E1);
  }
  .ab-cf__step--done:not(:last-child)::after { background: var(--ab-cf-step-active-c, var(--color-primary)); }
  .ab-cf__step-title {
    margin: 0;
    font-family: var(--font-body--family);
    font-size: 13px; font-weight: 700;
    color: var(--color-foreground);
  }
  .ab-cf__step-date {
    margin: 0;
    font-family: var(--font-body--family);
    font-size: 11px;
    color: var(--color-foreground-muted);
    letter-spacing: 0.5px;
  }

  .ab-cf__items { border: 1px solid var(--ab-cf-line-c, var(--color-border)); }
  .ab-cf__item {
    display: grid;
    grid-template-columns: 90px 1fr auto;
    gap: 18px;
    padding: 18px;
    align-items: center;
    border-block-end: 1px solid var(--ab-cf-line-c, var(--color-border));
  }
  .ab-cf__item:last-child { border-block-end: 0; }
  .ab-cf__item-img { aspect-ratio: 1 / 1; overflow: hidden; background: rgb(var(--color-foreground-rgb) / var(--opacity-5)); }
  .ab-cf__item-img-real { width: 100%; height: 100%; object-fit: cover; }
  .ab-cf__item-title { margin: 0; font-family: var(--font-body--family); font-size: 14px; font-weight: 700; color: var(--color-foreground); }
  .ab-cf__item-meta { margin: 3px 0 0; font-family: var(--font-body--family); font-size: 12px; color: var(--color-foreground-muted); }
  .ab-cf__item-price { margin: 0; font-family: var(--font-body--family); font-size: 16px; font-weight: 800; color: var(--ab-cf-price-c, var(--color-primary)); }

  .ab-cf__ctas { display: flex; gap: 10px; margin-block-start: 28px; flex-wrap: wrap; }
  .ab-cf__cta {
    padding: 14px 24px;
    font-family: var(--font-body--family);
    font-size: 12px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
  }
  .ab-cf__cta--primary {
    background: var(--ab-cf-cta-bg, var(--color-foreground));
    color: var(--ab-cf-cta-c, var(--color-background));
    border: 0;
  }
  .ab-cf__cta--outline {
    background: transparent;
    color: var(--color-foreground);
    border: 1px solid var(--color-border);
  }

  .ab-cf__aside-card {
    background: var(--ab-cf-aside-bg, var(--color-background));
    border: 1px solid var(--ab-cf-aside-border-c, var(--color-border));
    padding: 24px;
  }
  .ab-cf__aside-card--referral { background: rgb(var(--color-primary-rgb) / 0.05); border-color: rgb(var(--color-primary-rgb) / 0.15); }
  .ab-cf__aside-eyebrow {
    margin: 0 0 10px;
    font-family: var(--font-body--family);
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--color-primary);
    font-weight: 700;
    text-transform: uppercase;
  }
  .ab-cf__aside-title {
    margin: 0 0 10px;
    font-family: var(--font-body--family);
    font-size: 24px;
    font-weight: 700;
    color: var(--color-foreground);
    letter-spacing: -0.4px;
  }
  .ab-cf__aside-title-sm {
    margin: 0 0 16px;
    font-family: var(--font-body--family);
    font-size: 20px;
    font-weight: 700;
    color: var(--color-foreground);
  }
  .ab-cf__aside-body {
    margin: 0 0 16px;
    font-family: var(--font-body--family);
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-foreground-muted);
  }

  .ab-cf__referral-row {
    display: flex;
    background: var(--color-background);
    border: 1px solid rgb(var(--color-primary-rgb) / 0.2);
    padding: 3px;
  }
  .ab-cf__referral-input {
    flex: 1;
    border: 0;
    padding: 10px 12px;
    font-family: var(--font-body--family);
    font-size: 12px;
    background: transparent;
    color: var(--color-foreground-muted);
    outline: none;
    min-width: 0;
  }
  .ab-cf__referral-copy {
    background: var(--color-primary);
    color: var(--color-background);
    border: 0;
    padding: 0 16px;
    font-family: var(--font-body--family);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    cursor: pointer;
  }

  .ab-cf__suggest {
    display: flex;
    gap: 12px;
    align-items: center;
    padding-block-end: 12px;
    margin-block-end: 12px;
    border-block-end: 1px solid var(--ab-cf-line-c, var(--color-border));
  }
  .ab-cf__suggest:last-child { border-block-end: 0; margin-block-end: 0; padding-block-end: 0; }
  .ab-cf__suggest-img {
    width: 64px; aspect-ratio: 1 / 1;
    overflow: hidden;
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    flex-shrink: 0;
  }
  .ab-cf__suggest-img-real { width: 100%; height: 100%; object-fit: cover; }
  .ab-cf__suggest-body { flex: 1; min-width: 0; }
  .ab-cf__suggest-title { display: block; font-family: var(--font-body--family); font-size: 13px; font-weight: 700; color: var(--color-foreground); text-decoration: none; }
  .ab-cf__suggest-price { margin: 3px 0 0; font-family: var(--font-body--family); font-size: 13px; font-weight: 700; color: var(--ab-cf-price-c, var(--color-primary)); }
  .ab-cf__suggest-add {
    background: var(--color-foreground);
    color: var(--color-background);
    border: 0;
    padding: 0 10px;
    font-family: var(--font-body--family);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-decoration: none;
    align-self: stretch;
    display: flex;
    align-items: center;
  }

  @media screen and (max-width: 989px) {
    .ab-cf__row { grid-template-columns: 1fr; }
    .ab-cf__headline { font-size: 44px; letter-spacing: -1.4px; }
    .ab-cf__steps { grid-template-columns: 1fr 1fr; row-gap: 14px; }
    .ab-cf__step:not(:last-child)::after { display: none; }
  }
/* END_SECTION:ab-confirmation */

/* START_SECTION:ab-contact (INDEX:18) */
.ab-ct { font-family: var(--font-body--family); background: var(--color-background); }

  .ab-ct__cap {
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: var(--ab-ct-pad-inline, 48px);
  }

  /* ---------- Shared eyebrow / button / field ---------- */
  .ab-ct__eyebrow {
    font-size: var(--ab-ct-eyebrow-size, 11px);
    letter-spacing: 2.5px;
    color: var(--ab-ct-eyebrow-c);
    font-weight: 700;
    text-transform: uppercase;
    margin: 0;
  }

  .ab-ct__label {
    display: block;
    font-size: 10.5px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ab-ct-ink-muted);
    margin-bottom: 8px;
  }

  .ab-ct__field {
    width: 100%;
    border: 1.5px solid var(--ab-ct-line);
    background: var(--ab-ct-field-bg);
    color: var(--ab-ct-ink);
    padding: 15px 16px;
    font-size: 15px;
    font-family: inherit;
    outline: none;
    transition: border-color 150ms ease, box-shadow 150ms ease;
  }
  .ab-ct__field::placeholder { color: #94a3b8; }
  .ab-ct__field:focus {
    border-color: var(--ab-ct-accent);
    box-shadow: 0 0 0 3px var(--ab-ct-soft-line);
  }
  .ab-ct__field--ta { resize: vertical; min-height: 140px; line-height: 1.5; }

  .ab-ct__btn {
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 13px;
    color: var(--ab-ct-btn-text);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
  }
  .ab-ct__btn--deep { background: var(--ab-ct-btn-bg); padding: 17px 36px; }
  .ab-ct__btn--accent { background: var(--ab-ct-store-btn-bg); color: var(--ab-ct-store-btn-text); padding: 16px 30px; }
  .ab-ct__btn:hover { filter: brightness(1.08); }

  /* ---------- Intro ---------- */
  .ab-ct__intro { max-width: 680px; margin-bottom: 48px; }
  .ab-ct__headline {
    font-size: var(--ab-ct-headline-size, 64px);
    font-weight: 800;
    letter-spacing: -2.4px;
    line-height: 0.92;
    margin: 14px 0 16px;
    color: var(--ab-ct-headline-c);
  }
  .ab-ct__headline em { font-style: italic; color: var(--ab-ct-headline-italic-c); font-weight: 800; }
  .ab-ct__intro-lead {
    font-size: var(--ab-ct-lead-size, 17px);
    color: var(--ab-ct-lead-c);
    line-height: 1.6;
    margin: 0;
  }

  /* ---------- Two-column grid ---------- */
  .ab-ct__grid {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 56px;
    align-items: start;
  }

  /* Notices */
  .ab-ct__notice { padding: 14px 18px; font-size: 14px; margin-block-end: 18px; border: 1px solid; }
  .ab-ct__notice--ok { background: var(--ab-ct-soft-bg); border-color: var(--ab-ct-soft-line); color: var(--ab-ct-soft-ink); }
  .ab-ct__notice--err { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
  .ab-ct__notice ul { margin: 8px 0 0; padding-left: 18px; }

  /* Form */
  .ab-ct__form-side .ab-ct__form-title { font-size: 34px; font-weight: 800; letter-spacing: -1px; line-height: 1; margin: 0 0 8px; color: var(--ab-ct-headline-c); }
  .ab-ct__form-side .ab-ct__form-sub { font-size: 15px; color: var(--ab-ct-lead-c); margin: 0 0 28px; }
  .ab-ct__form { display: flex; flex-direction: column; gap: 18px; }
  .ab-ct__row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

  /* Details panel */
  .ab-ct__panel {
    background: var(--ab-ct-soft-bg);
    border: 1px solid var(--ab-ct-soft-line);
    padding: 40px 40px 36px;
    position: relative;
    overflow: hidden;
  }
  .ab-ct__panel-kilim {
    position: absolute;
    top: -50px; right: -50px;
    width: 220px; height: 220px;
    opacity: 0.45;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M0 40 L40 0 L80 40 L40 80 Z' fill='none' stroke='%2367e8f9' stroke-width='1.2' opacity='0.14'/%3E%3Cpath d='M20 40 L40 20 L60 40 L40 60 Z' fill='none' stroke='%230891b2' stroke-width='1' opacity='0.12'/%3E%3Ccircle cx='40' cy='40' r='2' fill='%2367e8f9' opacity='0.28'/%3E%3C/svg%3E");
  }
  .ab-ct__panel-inner { position: relative; }
  .ab-ct__panel-title { font-size: 26px; font-weight: 800; letter-spacing: -0.6px; line-height: 1.05; margin: 12px 0 10px; color: var(--ab-ct-soft-ink); }
  .ab-ct__panel-lead { font-size: 14.5px; color: var(--ab-ct-lead-c); line-height: 1.6; margin: 0 0 22px; max-width: 440px; }

  .ab-ct__details { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
  .ab-ct__detail { display: flex; gap: 14px; align-items: flex-start; }
  .ab-ct__detail-icon {
    width: 38px; height: 38px;
    flex-shrink: 0;
    border: 1px solid var(--ab-ct-soft-line);
    background: var(--ab-ct-field-bg);
    color: var(--ab-ct-accent);
    display: flex; align-items: center; justify-content: center;
  }
  .ab-ct__detail-label { font-size: 10.5px; letter-spacing: 1.8px; text-transform: uppercase; font-weight: 700; color: var(--ab-ct-ink-muted); margin-bottom: 4px; }
  .ab-ct__detail-value { font-size: 15px; color: var(--ab-ct-soft-ink); font-weight: 600; line-height: 1.5; }
  .ab-ct__detail-value a { color: var(--ab-ct-accent); text-decoration: none; }
  .ab-ct__detail-subtext { color: var(--ab-ct-ink-muted); font-weight: 600; }

  /* Find a store band */
  .ab-ct__store {
    margin-top: 72px;
    background: var(--ab-ct-store-bg);
    color: #fff;
    padding: 56px 56px;
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 48px;
    align-items: center;
  }
  .ab-ct__store-kilim {
    position: absolute; inset: 0;
    opacity: 0.3;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M0 40 L40 0 L80 40 L40 80 Z' fill='none' stroke='%2367e8f9' stroke-width='1.2' opacity='0.14'/%3E%3Cpath d='M20 40 L40 20 L60 40 L40 60 Z' fill='none' stroke='%23ffffff' stroke-width='1' opacity='0.08'/%3E%3Ccircle cx='40' cy='40' r='2' fill='%2367e8f9' opacity='0.28'/%3E%3C/svg%3E");
  }
  .ab-ct__store-inner { position: relative; }
  .ab-ct__eyebrow--store { color: var(--ab-ct-store-headline-italic-c); }
  .ab-ct__store-headline { font-size: 44px; font-weight: 800; letter-spacing: -1.4px; line-height: 0.95; margin: 14px 0 16px; color: var(--ab-ct-store-headline-c); }
  .ab-ct__store-headline em { font-style: italic; color: var(--ab-ct-store-headline-italic-c); font-weight: 800; }
  .ab-ct__store-lead { font-size: 16px; color: var(--ab-ct-store-lead-c); line-height: 1.6; margin: 0; max-width: 460px; }
  .ab-ct__store-side { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
  .ab-ct__store-stat { font-size: 72px; font-weight: 800; letter-spacing: -2px; line-height: 1; color: var(--ab-ct-store-stat-c); }
  .ab-ct__store-stat-label { display: block; font-size: 13px; letter-spacing: 0.5px; color: var(--ab-ct-store-lead-c); font-weight: 600; margin-top: 6px; text-transform: none; }

  @media screen and (max-width: 900px) {
    .ab-ct__cap { padding-inline: 24px; }
    .ab-ct__headline { font-size: 46px; }
    .ab-ct__grid { grid-template-columns: 1fr; gap: 40px; }
    .ab-ct__store { grid-template-columns: 1fr; gap: 28px; padding: 40px 28px; }
    .ab-ct__store-headline { font-size: 36px; }
  }
/* END_SECTION:ab-contact */

/* START_SECTION:ab-customer-account (INDEX:19) */
.ab-cact { font-family: var(--font-body--family); background: var(--color-background); }
  .ab-cact__cap { max-width: 1280px; margin-inline: auto; padding-inline: var(--ab-cact-pad-inline, 48px); }

  /* Top */
  .ab-cact__eyebrow { font-size: 11px; letter-spacing: 2.5px; color: var(--ab-cact-eyebrow-c); font-weight: 700; text-transform: uppercase; margin: 0; }
  .ab-cact__headline {
    font-size: var(--ab-cact-headline-size, 60px);
    font-weight: 800;
    letter-spacing: -2.4px;
    line-height: 0.92;
    margin: 14px 0 14px;
    color: var(--ab-cact-headline-c);
  }
  .ab-cact__headline em { font-style: italic; color: var(--ab-cact-headline-italic-c); font-weight: 800; }
  .ab-cact__toplink {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13.5px; color: var(--ab-cact-lead-c); font-weight: 600;
    cursor: pointer; white-space: nowrap;
    text-decoration: none;
  }
  .ab-cact__toplink:hover { color: var(--ab-cact-accent); }

  .ab-cact__section { margin-top: 56px; }
  .ab-cact__sec-label { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; font-weight: 800; color: var(--ab-cact-headline-c); margin: 0 0 18px; }

  /* Orders table */
  .ab-cact__otable { width: 100%; border: 1px solid var(--ab-cact-line); border-collapse: separate; border-spacing: 0; background: var(--ab-cact-field-bg); }
  .ab-cact__otable th { text-align: left; font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 700; color: var(--ab-cact-ink-muted); padding: 18px 22px; border-bottom: 1px solid var(--ab-cact-line); }
  .ab-cact__r { text-align: right !important; }
  .ab-cact__otable td { padding: 20px 22px; font-size: 15px; color: var(--ab-cact-lead-c); border-bottom: 1px solid var(--ab-cact-line); }
  .ab-cact__otable tr:last-child td { border-bottom: none; }
  .ab-cact__otable tbody tr { cursor: pointer; transition: background 120ms ease; }
  .ab-cact__otable tbody tr:hover { background: var(--ab-cact-soft-bg); }
  .ab-cact__ordno {
    display: inline-flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--ab-cact-line);
    background: var(--ab-cact-field-bg);
    padding: 9px 16px;
    font-weight: 800; font-size: 14px;
    color: var(--ab-cact-headline-c);
    letter-spacing: 0.3px;
  }
  .ab-cact__otable tbody tr:hover .ab-cact__ordno { border-color: var(--ab-cact-accent); color: var(--ab-cact-accent); }
  .ab-cact__total-strong { font-weight: 800; color: var(--ab-cact-headline-c); }

  /* Badges */
  .ab-cact__badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; letter-spacing: 0.6px; font-weight: 700;
    padding: 5px 11px;
    border: 1px solid transparent;
    border-radius: 2px;
  }
  .ab-cact__badge--paid  { background: var(--ab-cact-paid-bg);  color: var(--ab-cact-paid-c);  border-color: var(--ab-cact-paid-line); }
  .ab-cact__badge--unful { background: var(--ab-cact-unful-bg); color: var(--ab-cact-unful-c); border-color: var(--ab-cact-unful-line); }
  .ab-cact__badge--dot::before {
    content: ""; width: 7px; height: 7px; border-radius: 999px; background: currentColor; display: inline-block;
  }

  /* Notice */
  .ab-cact__notice {
    display: flex; align-items: center; gap: 14px;
    background: var(--ab-cact-soft-bg);
    border: 1px solid var(--ab-cact-soft-line);
    padding: 22px 26px;
    color: var(--ab-cact-soft-ink);
    font-size: 15px; font-weight: 600;
  }
  .ab-cact__notice-icon {
    width: 34px; height: 34px; flex-shrink: 0;
    border-radius: 999px;
    background: var(--ab-cact-field-bg);
    border: 1px solid var(--ab-cact-soft-line);
    color: var(--ab-cact-accent);
    display: flex; align-items: center; justify-content: center;
  }

  /* Detail cards */
  .ab-cact__dcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 360px)); gap: 18px; }
  .ab-cact__dcard {
    border: 1px solid var(--ab-cact-line);
    background: var(--ab-cact-field-bg);
    padding: 24px 26px;
  }
  .ab-cact__dcard--default { border-color: var(--ab-cact-accent); }
  .ab-cact__dcard-nm { display: flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: 0.8px; text-transform: uppercase; font-weight: 800; color: var(--ab-cact-headline-c); }
  .ab-cact__dcard-def {
    font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 800;
    color: var(--ab-cact-accent);
    background: var(--ab-cact-soft-bg);
    border: 1px solid var(--ab-cact-soft-line);
    padding: 3px 8px;
  }
  .ab-cact__dcard-addr { font-size: 14.5px; color: var(--ab-cact-lead-c); line-height: 1.7; margin-top: 14px; }

  /* Button */
  .ab-cact__btn {
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-weight: 800; letter-spacing: 2px; text-transform: uppercase; font-size: 13px;
    white-space: nowrap;
    display: inline-flex; align-items: center; gap: 12px;
    text-decoration: none;
    margin-top: 26px;
  }
  .ab-cact__btn--deep { background: var(--ab-cact-deep-bg); color: var(--ab-cact-deep-text); padding: 18px 30px; }
  .ab-cact__btn--deep:hover { filter: brightness(1.12); }
  .ab-cact__pill {
    background: var(--ab-cact-field-bg);
    color: var(--ab-cact-headline-c);
    width: 26px; height: 26px;
    border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800;
  }

  /* Pagination */
  .ab-cact__pagination { display: flex; gap: 16px; margin-top: 24px; font-size: 13px; font-weight: 700; letter-spacing: 1px; }
  .ab-cact__pagination a { color: var(--ab-cact-lead-c); text-decoration: none; border-bottom: 1.5px solid var(--ab-cact-line); padding-bottom: 2px; }
  .ab-cact__pagination a:hover { color: var(--ab-cact-accent); border-color: var(--ab-cact-accent); }

  @media screen and (max-width: 900px) {
    .ab-cact__cap { padding-inline: 22px; }
    .ab-cact__headline { font-size: 44px; }
    .ab-cact__otable th:nth-child(3), .ab-cact__otable td:nth-child(3) { display: none; }
  }
/* END_SECTION:ab-customer-account */

/* START_SECTION:ab-customer-addresses (INDEX:20) */
.ab-addr { font-family: var(--font-body--family); background: var(--color-background); }
  .ab-addr__cap { max-width: 1280px; margin-inline: auto; padding-inline: var(--ab-addr-pad-inline, 48px); }

  /* Intro */
  .ab-addr__intro { margin-bottom: 44px; }
  .ab-addr__eyebrow { font-size: 11px; letter-spacing: 2.5px; color: var(--ab-addr-eyebrow-c); font-weight: 700; text-transform: uppercase; margin: 0; }
  .ab-addr__headline {
    font-size: var(--ab-addr-headline-size, 60px);
    font-weight: 800;
    letter-spacing: -2.2px;
    line-height: 0.92;
    margin: 14px 0 14px;
    color: var(--ab-addr-headline-c);
  }
  .ab-addr__headline em { font-style: italic; color: var(--ab-addr-headline-italic-c); font-weight: 800; }
  .ab-addr__backlink {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13px; color: var(--ab-addr-lead-c); font-weight: 600;
    border-bottom: 1.5px solid var(--ab-addr-line); padding-bottom: 2px;
    text-decoration: none; cursor: pointer;
  }
  .ab-addr__backlink:hover { color: var(--ab-addr-accent); border-color: var(--ab-addr-accent); }

  /* Grid */
  .ab-addr__grid {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 56px;
    align-items: start;
  }
  .ab-addr__col-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 20px; gap: 16px; }
  .ab-addr__col-title { font-size: 26px; font-weight: 800; letter-spacing: -0.6px; margin: 0; color: var(--ab-addr-headline-c); white-space: nowrap; }
  .ab-addr__count { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; color: var(--ab-addr-ink-muted); }

  /* Cards */
  .ab-addr__cards { display: flex; flex-direction: column; gap: 16px; }
  .ab-addr__card { border: 1px solid var(--ab-addr-line); background: var(--ab-addr-field-bg); padding: 22px 24px; position: relative; }
  .ab-addr__card.is-default { border-color: var(--ab-addr-accent); }
  .ab-addr__badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 800;
    color: var(--ab-addr-accent);
    background: var(--ab-addr-soft-bg);
    border: 1px solid var(--ab-addr-soft-line);
    padding: 5px 9px;
    margin-bottom: 14px;
  }
  .ab-addr__name { font-size: 17px; font-weight: 800; color: var(--ab-addr-headline-c); letter-spacing: -0.3px; }
  .ab-addr__lines { font-size: 14px; color: var(--ab-addr-lead-c); line-height: 1.6; margin-top: 6px; }
  .ab-addr__acts { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
  .ab-addr__lnk {
    font-family: inherit;
    font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 700;
    cursor: pointer;
    padding: 8px 14px;
    border: 1px solid var(--ab-addr-line);
    background: var(--ab-addr-field-bg);
    color: var(--ab-addr-headline-c);
  }
  .ab-addr__lnk:hover { border-color: var(--ab-addr-headline-c); }
  .ab-addr__lnk--danger { color: var(--ab-addr-danger); border-color: var(--ab-addr-danger-line); }
  .ab-addr__lnk--danger:hover { border-color: var(--ab-addr-danger); }

  /* Add tile */
  .ab-addr__add-tile {
    width: 100%;
    border: 1.5px dashed var(--ab-addr-line);
    background: var(--ab-addr-field-bg);
    padding: 22px 24px;
    display: flex; align-items: center; gap: 12px;
    cursor: pointer;
    color: var(--ab-addr-lead-c);
    font-family: inherit; font-weight: 700; font-size: 14px;
    margin-top: 16px;
  }
  .ab-addr__add-tile:hover { border-color: var(--ab-addr-accent); color: var(--ab-addr-accent); }
  .ab-addr__plus { width: 34px; height: 34px; border: 1.5px solid currentColor; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

  /* Empty state */
  .ab-addr__empty {
    border: 1.5px dashed var(--ab-addr-line);
    background: var(--ab-addr-soft-bg);
    padding: 48px 36px;
    text-align: center;
  }
  .ab-addr__empty-ico {
    width: 64px; height: 64px;
    border-radius: 999px;
    background: var(--ab-addr-field-bg);
    border: 1px solid var(--ab-addr-soft-line);
    color: var(--ab-addr-accent);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 22px;
  }
  .ab-addr__empty-title { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; color: var(--ab-addr-headline-c); margin: 0 0 8px; }
  .ab-addr__empty-lead { font-size: 14.5px; color: var(--ab-addr-lead-c); line-height: 1.6; margin: 0 auto 24px; max-width: 320px; }

  /* Form panel */
  .ab-addr__panel {
    background: var(--ab-addr-soft-bg);
    border: 1px solid var(--ab-addr-soft-line);
    padding: 40px 40px 36px;
    position: relative;
    overflow: hidden;
  }
  .ab-addr__panel-kilim {
    position: absolute; top: -50px; right: -50px;
    width: 200px; height: 200px;
    opacity: 0.4;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M0 40 L40 0 L80 40 L40 80 Z' fill='none' stroke='%2367e8f9' stroke-width='1.2' opacity='0.14'/%3E%3Cpath d='M20 40 L40 20 L60 40 L40 60 Z' fill='none' stroke='%230891b2' stroke-width='1' opacity='0.12'/%3E%3C/svg%3E");
  }
  .ab-addr__panel-inner { position: relative; }
  .ab-addr__panel-title { font-size: 28px; font-weight: 800; letter-spacing: -0.7px; line-height: 1; margin: 12px 0 24px; color: var(--ab-addr-soft-ink); }

  /* Fields */
  .ab-addr__label { display: block; font-size: 10.5px; letter-spacing: 1.8px; text-transform: uppercase; font-weight: 700; color: var(--ab-addr-ink-muted); margin-bottom: 8px; }
  .ab-addr__field {
    width: 100%;
    border: 1.5px solid var(--ab-addr-line);
    background: var(--ab-addr-field-bg);
    color: var(--ab-addr-ink);
    padding: 14px 15px;
    font-size: 15px;
    font-family: inherit;
    outline: none;
    transition: border-color 150ms ease, box-shadow 150ms ease;
  }
  .ab-addr__field:focus {
    border-color: var(--ab-addr-accent);
    box-shadow: 0 0 0 3px var(--ab-addr-soft-line);
  }
  select.ab-addr__field {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230B1220' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    padding-right: 40px;
  }
  .ab-addr__fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .ab-addr__field-block { margin-bottom: 14px; }
  .ab-addr__optional { color: #94A3B8; font-weight: 600; }

  /* Checkrow + actions */
  .ab-addr__checkrow {
    display: flex; align-items: center; gap: 10px;
    margin: 6px 0 22px;
    font-size: 14px; color: var(--ab-addr-lead-c); font-weight: 600;
    cursor: pointer;
  }
  .ab-addr__checkrow input { width: 17px; height: 17px; accent-color: var(--ab-addr-accent); cursor: pointer; }

  .ab-addr__form-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
  .ab-addr__btn {
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 13px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .ab-addr__btn--deep { background: var(--ab-addr-deep-bg); color: var(--ab-addr-deep-text); padding: 16px 34px; }
  .ab-addr__btn--ghost { background: transparent; color: var(--ab-addr-headline-c); border: 1.5px solid var(--ab-addr-line); padding: 14.5px 28px; }
  .ab-addr__btn--deep:hover { filter: brightness(1.12); }
  .ab-addr__btn--ghost:hover { border-color: var(--ab-addr-headline-c); }

  /* Notice */
  .ab-addr__notice { padding: 12px 16px; font-size: 14px; border: 1px solid; margin-block-end: 14px; }
  .ab-addr__notice--err { background: #FEF2F2; border-color: #FECACA; color: #991B1B; }
  .ab-addr__notice ul { margin: 6px 0 0; padding-left: 18px; }

  @media screen and (max-width: 900px) {
    .ab-addr__cap { padding-inline: 24px; }
    .ab-addr__headline { font-size: 46px; }
    .ab-addr__grid { grid-template-columns: 1fr; gap: 40px; }
    .ab-addr__panel { padding: 32px 24px; }
  }
/* END_SECTION:ab-customer-addresses */

/* START_SECTION:ab-customer-login (INDEX:21) */
.ab-cl { font-family: var(--font-body--family); background: var(--color-background); }

  .ab-cl__cap {
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: var(--ab-cl-pad-inline, 48px);
  }

  .ab-cl__grid {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 56px;
    align-items: start;
  }

  /* Shared */
  .ab-cl__eyebrow {
    font-size: 11px;
    letter-spacing: 2.5px;
    color: var(--ab-cl-eyebrow-c);
    font-weight: 700;
    text-transform: uppercase;
    margin: 0;
  }

  .ab-cl__label {
    display: block;
    font-size: 10.5px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ab-cl-ink-muted);
    margin-bottom: 8px;
  }

  .ab-cl__field {
    width: 100%;
    border: 1.5px solid var(--ab-cl-line);
    background: var(--ab-cl-field-bg);
    color: var(--ab-cl-ink);
    padding: 15px 16px;
    font-size: 15px;
    font-family: inherit;
    outline: none;
    transition: border-color 150ms ease, box-shadow 150ms ease;
  }
  .ab-cl__field:focus {
    border-color: var(--ab-cl-accent);
    box-shadow: 0 0 0 3px var(--ab-cl-soft-line);
  }

  .ab-cl__btn {
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 13px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
  }
  .ab-cl__btn--deep   { background: var(--ab-cl-deep-bg);   color: var(--ab-cl-deep-text);   padding: 17px 40px; }
  .ab-cl__btn--accent { background: var(--ab-cl-accent);    color: var(--ab-cl-accent-text); padding: 18px;     width: 100%; justify-content: center; margin-top: 4px; }
  .ab-cl__btn:hover { filter: brightness(1.08); }

  /* Login side */
  .ab-cl__login { padding-top: 8px; }
  .ab-cl__headline {
    font-size: var(--ab-cl-headline-size, 60px);
    font-weight: 800;
    letter-spacing: -2.2px;
    line-height: 0.92;
    margin: 14px 0 16px;
    color: var(--ab-cl-headline-c);
  }
  .ab-cl__headline em { font-style: italic; color: var(--ab-cl-headline-italic-c); font-weight: 800; }
  .ab-cl__lead {
    font-size: 16px;
    color: var(--ab-cl-lead-c);
    line-height: 1.6;
    margin: 0 0 34px;
    max-width: 420px;
  }
  .ab-cl__recover-lead {
    font-size: 14.5px;
    color: var(--ab-cl-lead-c);
    line-height: 1.6;
    margin: 0 0 6px;
  }
  .ab-cl__form-col { display: flex; flex-direction: column; gap: 18px; }
  .ab-cl__actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-top: 4px; }

  .ab-cl__forgot {
    background: transparent;
    border: 0;
    border-bottom: 1.5px solid var(--ab-cl-line);
    padding: 0 0 2px;
    font-size: 13px;
    font-family: inherit;
    color: var(--ab-cl-lead-c);
    font-weight: 600;
    cursor: pointer;
  }
  .ab-cl__forgot:hover { color: var(--ab-cl-accent); border-color: var(--ab-cl-accent); }

  /* Trust strip */
  .ab-cl__trust {
    list-style: none;
    margin: 40px 0 0;
    padding-top: 28px;
    border-top: 1px solid var(--ab-cl-line);
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
  }
  .ab-cl__trust-item { display: flex; gap: 9px; align-items: center; }
  .ab-cl__trust-icon { color: var(--ab-cl-accent); flex-shrink: 0; }
  .ab-cl__trust-text { font-size: 12.5px; color: var(--ab-cl-lead-c); font-weight: 600; }

  /* Create panel */
  .ab-cl__panel {
    background: var(--ab-cl-soft-bg);
    border: 1px solid var(--ab-cl-soft-line);
    padding: 44px 44px 40px;
    position: relative;
    overflow: hidden;
  }
  .ab-cl__panel-kilim {
    position: absolute;
    top: -50px; right: -50px;
    width: 220px; height: 220px;
    opacity: 0.45;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M0 40 L40 0 L80 40 L40 80 Z' fill='none' stroke='%2367e8f9' stroke-width='1.2' opacity='0.14'/%3E%3Cpath d='M20 40 L40 20 L60 40 L40 60 Z' fill='none' stroke='%230891b2' stroke-width='1' opacity='0.12'/%3E%3Ccircle cx='40' cy='40' r='2' fill='%2367e8f9' opacity='0.28'/%3E%3C/svg%3E");
  }
  .ab-cl__panel-inner { position: relative; }
  .ab-cl__panel-title {
    font-size: 38px;
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1;
    margin: 14px 0 10px;
    color: var(--ab-cl-soft-ink);
  }
  .ab-cl__panel-lead {
    font-size: 15px;
    color: var(--ab-cl-lead-c);
    line-height: 1.6;
    margin: 0 0 28px;
    max-width: 460px;
  }
  .ab-cl__reg-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .ab-cl__span2 { grid-column: span 2; }

  /* Benefits */
  .ab-cl__benefits {
    list-style: none;
    margin: 26px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
  }
  .ab-cl__benefit { display: flex; gap: 10px; align-items: center; }
  .ab-cl__benefit-tick {
    width: 18px; height: 18px;
    border-radius: 999px;
    background: var(--ab-cl-accent);
    color: var(--ab-cl-accent-text);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px;
    font-weight: 800;
    flex-shrink: 0;
  }
  .ab-cl__benefit-text { font-size: 13.5px; color: var(--ab-cl-soft-ink); font-weight: 600; }

  .ab-cl__terms { font-size: 11.5px; color: var(--ab-cl-ink-muted); line-height: 1.6; margin: 24px 0 0; }
  .ab-cl__terms a { color: var(--ab-cl-accent); text-decoration: none; }

  /* Notices */
  .ab-cl__notice { padding: 12px 16px; font-size: 14px; border: 1px solid; margin-block-end: 4px; }
  .ab-cl__notice--ok  { background: var(--ab-cl-soft-bg); border-color: var(--ab-cl-soft-line); color: var(--ab-cl-soft-ink); }
  .ab-cl__notice--err { background: #FEF2F2; border-color: #FECACA; color: #991B1B; }
  .ab-cl__notice ul { margin: 6px 0 0; padding-left: 18px; }

  @media screen and (max-width: 900px) {
    .ab-cl__cap { padding-inline: 24px; }
    .ab-cl__grid { grid-template-columns: 1fr; gap: 40px; }
    .ab-cl__headline { font-size: 48px; }
    .ab-cl__panel { padding: 36px 28px 32px; }
  }
/* END_SECTION:ab-customer-login */

/* START_SECTION:ab-customer-order (INDEX:22) */
.ab-cord { font-family: var(--font-body--family); background: var(--color-background); }
  .ab-cord__cap { max-width: 1280px; margin-inline: auto; padding-inline: var(--ab-cord-pad-inline, 48px); }

  .ab-cord__back {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13.5px; color: var(--ab-cord-lead-c); font-weight: 600;
    cursor: pointer; white-space: nowrap;
    text-decoration: none;
    border-bottom: 1.5px solid var(--ab-cord-line);
    padding-bottom: 2px;
  }
  .ab-cord__back:hover { color: var(--ab-cord-accent); border-color: var(--ab-cord-accent); }

  .ab-cord__grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 64px;
    align-items: start;
    margin-top: 40px;
  }

  /* Eyebrow (used above order title + per address-block) */
  .ab-cord__eyebrow {
    font-size: 11px;
    letter-spacing: 2.5px;
    color: var(--ab-cord-accent);
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 4px;
  }

  /* Order title */
  .ab-cord__headline {
    font-size: var(--ab-cord-headline-size, 64px);
    font-weight: 800;
    letter-spacing: -2.4px;
    line-height: 0.9;
    margin: 10px 0 12px;
    color: var(--ab-cord-headline-c);
  }
  .ab-cord__headline em {
    font-style: italic;
    font-weight: 800;
    color: var(--ab-cord-accent);
  }
  .ab-cord__placed { font-size: 15px; color: var(--ab-cord-ink-muted); margin: 0 0 24px; }

  /* Reorder button */
  .ab-cord__btn {
    border: none; cursor: pointer; font-family: inherit;
    font-weight: 800; letter-spacing: 2px; text-transform: uppercase; font-size: 13px;
    white-space: nowrap;
    display: inline-flex; align-items: center; gap: 12px;
    text-decoration: none;
  }
  .ab-cord__btn--deep   { background: var(--ab-cord-deep-bg);   color: var(--ab-cord-deep-text);   padding: 18px 30px; }
  .ab-cord__btn--accent { background: var(--ab-cord-accent);    color: var(--ab-cord-accent-text); padding: 18px 30px; }
  .ab-cord__btn--deep:hover   { filter: brightness(1.12); }
  .ab-cord__btn--accent:hover { filter: brightness(1.08); }
  .ab-cord__btn:disabled { opacity: 0.55; cursor: progress; }
  .ab-cord__reorder { margin-bottom: 30px; }

  /* Items table */
  .ab-cord__itable {
    width: 100%;
    border: 1px solid var(--ab-cord-line);
    border-collapse: separate;
    border-spacing: 0;
    background: var(--ab-cord-field-bg);
  }
  .ab-cord__itable th {
    text-align: left;
    font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 700;
    color: var(--ab-cord-accent);
    background: var(--ab-cord-soft-bg);
    padding: 16px 20px;
    border-bottom: 2px solid var(--ab-cord-accent);
  }
  .ab-cord__r { text-align: right !important; }
  .ab-cord__itable td { padding: 20px 20px; font-size: 15px; color: var(--ab-cord-lead-c); }
  .ab-cord__prod { font-weight: 700; color: var(--ab-cord-headline-c); }
  .ab-cord__prod a { color: inherit; text-decoration: none; }
  .ab-cord__prod a:hover { color: var(--ab-cord-accent); }
  .ab-cord__total-strong { font-weight: 800; color: var(--ab-cord-headline-c); }

  /* Totals */
  .ab-cord__totals { border: 1px solid var(--ab-cord-line); border-top: none; }
  .ab-cord__trow {
    display: flex; justify-content: space-between;
    padding: 13px 20px;
    font-size: 14.5px; color: var(--ab-cord-lead-c);
  }
  .ab-cord__trow--grand {
    border-top: 2px solid var(--ab-cord-deep-bg);
    background: var(--ab-cord-soft-bg);
    padding: 20px;
    font-size: 20px;
    font-weight: 800;
    color: var(--ab-cord-headline-c);
  }
  .ab-cord__trow--grand span:last-child { color: var(--ab-cord-accent); }
  .ab-cord__disc { color: var(--ab-cord-disc-c); }

  /* Right-side address panel (soft bg + kilim pattern, mirrors form panel style) */
  .ab-cord__panel {
    background: var(--ab-cord-soft-bg);
    border: 1px solid var(--ab-cord-soft-line);
    padding: 38px 38px 30px;
    position: relative;
    overflow: hidden;
  }
  .ab-cord__panel-kilim {
    position: absolute;
    top: -50px; right: -50px;
    width: 200px; height: 200px;
    opacity: 0.4;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M0 40 L40 0 L80 40 L40 80 Z' fill='none' stroke='%2367e8f9' stroke-width='1.2' opacity='0.14'/%3E%3Cpath d='M20 40 L40 20 L60 40 L40 60 Z' fill='none' stroke='%230891b2' stroke-width='1' opacity='0.12'/%3E%3C/svg%3E");
  }
  .ab-cord__panel-inner { position: relative; }

  /* Address blocks (inside .ab-cord__panel) */
  .ab-cord__addr-block { margin-bottom: 34px; }
  .ab-cord__addr-block:last-child { margin-bottom: 0; }
  .ab-cord__addr-title {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.7px;
    line-height: 1;
    margin: 10px 0 16px;
    color: var(--ab-cord-soft-ink);
  }
  .ab-cord__status { font-size: 14px; color: var(--ab-cord-lead-c); margin-bottom: 14px; }
  .ab-cord__addr-lines { font-size: 15px; color: var(--ab-cord-lead-c); line-height: 1.7; }

  /* Badges (shared style with ab-customer-account) */
  .ab-cord__badge {
    display: inline-flex; align-items: center; gap: 6px;
    vertical-align: middle;
    font-size: 11px; letter-spacing: 0.6px; font-weight: 700;
    padding: 5px 11px;
    border: 1px solid transparent;
    border-radius: 2px;
  }
  .ab-cord__badge--paid  { background: var(--ab-cord-paid-bg);  color: var(--ab-cord-paid-c);  border-color: var(--ab-cord-paid-line); }
  .ab-cord__badge--unful { background: var(--ab-cord-unful-bg); color: var(--ab-cord-unful-c); border-color: var(--ab-cord-unful-line); }
  .ab-cord__badge--dot::before {
    content: ""; width: 7px; height: 7px; border-radius: 999px; background: currentColor; display: inline-block;
  }

  @media screen and (max-width: 900px) {
    .ab-cord__cap { padding-inline: 22px; }
    .ab-cord__grid { grid-template-columns: 1fr; gap: 40px; }
    .ab-cord__headline { font-size: 44px; }
    .ab-cord__addr-title { font-size: 28px; }
  }
/* END_SECTION:ab-customer-order */

/* START_SECTION:ab-exit-intent-popup (INDEX:23) */
.ab-eip {
    position: fixed;
    inset: 0;
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    background: transparent !important;
    transition: opacity 220ms ease, visibility 0s linear 220ms;
    font-family: var(--font-body--family);
  }
  .ab-eip.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 220ms ease, visibility 0s;
  }
  .ab-eip__backdrop {
    position: absolute;
    inset: 0;
    background: var(--ab-eip-backdrop, rgba(11, 18, 32, 0.72));
    border: 0;
    cursor: pointer;
    padding: 0;
  }
  .ab-eip__modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.96);
    width: var(--ab-eip-modal-w, 860px);
    max-width: calc(100vw - 32px);
    background: var(--ab-eip-bg, #FFFFFF);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    overflow: hidden;
    transition: transform 280ms cubic-bezier(0.4, 0.1, 0.2, 1);
  }
  .ab-eip.is-open .ab-eip__modal { transform: translate(-50%, -50%) scale(1); }
  .ab-eip__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border: 0;
    background: rgba(255, 255, 255, 0.95);
    cursor: pointer;
    font-size: 20px;
    color: var(--ab-eip-deep, #0B1220);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    font-family: inherit;
  }

  .ab-eip__visual {
    position: relative;
    color: var(--ab-eip-bg, #FFFFFF);
    overflow: hidden;
    min-height: 200px;
  }
  .ab-eip__visual-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .ab-eip__visual-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(12, 74, 108, 0) 40%, rgba(11, 18, 32, 0.65) 100%);
  }
  .ab-eip__visual-meta {
    position: absolute;
    left: 22px;
    bottom: 18px;
    right: 22px;
  }
  .ab-eip__visual-eyebrow {
    font-size: 9px;
    letter-spacing: 2px;
    color: var(--ab-eip-accent2, #06B6D4);
    font-weight: 800;
    text-transform: uppercase;
  }
  .ab-eip__visual-caption {
    font-size: 14px;
    font-weight: 600;
    margin-block-start: 4px;
    max-width: 300px;
    line-height: 1.35;
  }

  .ab-eip__offer {
    padding: 40px 38px;
    color: var(--ab-eip-ink, #0F172A);
  }
  .ab-eip__offer-eyebrow {
    font-size: 10px;
    letter-spacing: 2.5px;
    color: var(--ab-eip-accent, #0891B2);
    font-weight: 800;
    text-transform: uppercase;
    margin-block-end: 16px;
  }
  .ab-eip__offer-title {
    font-size: 44px;
    font-weight: 800;
    letter-spacing: -1.4px;
    color: var(--ab-eip-deep, #0B1220);
    line-height: 0.96;
    margin: 0 0 12px;
  }
  .ab-eip__offer-emphasis { color: var(--ab-eip-accent, #0891B2); }
  .ab-eip__offer-italic { font-style: italic; }
  .ab-eip__offer-body {
    font-size: 14px;
    color: var(--ab-eip-ink2, #334155);
    line-height: 1.55;
    margin: 0 0 20px;
  }
  .ab-eip__form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-block-end: 12px;
  }
  .ab-eip__input {
    border: 1.5px solid var(--ab-eip-line2, #CBD5E1);
    padding: 13px 14px;
    font-size: 14px;
    outline: none;
    background: var(--ab-eip-bg, #FFFFFF);
    color: var(--ab-eip-deep, #0B1220);
    font-family: inherit;
  }
  .ab-eip__submit {
    background: var(--ab-eip-accent, #0891B2);
    color: var(--ab-eip-bg, #FFFFFF);
    border: 0;
    padding: 15px;
    font-size: 12px;
    letter-spacing: 1.8px;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
    width: 100%;
    font-family: inherit;
  }
  .ab-eip__success {
    color: var(--ab-eip-accent, #0891B2);
    font-size: 13px;
    text-align: center;
    margin: 8px 0 0;
  }
  .ab-eip__bullets {
    display: flex;
    justify-content: center;
    gap: 18px;
    font-size: 10px;
    color: var(--ab-eip-ink3, #64748B);
    margin-block-start: 14px;
    letter-spacing: 0.4px;
    flex-wrap: wrap;
  }
  .ab-eip__decline {
    border: 0;
    background: transparent;
    font-size: 11px;
    color: var(--ab-eip-ink3, #64748B);
    text-align: center;
    display: block;
    margin: 14px auto 0;
    text-decoration: underline;
    cursor: pointer;
    font-family: inherit;
  }

  @media (max-width: 760px) {
    .ab-eip__modal {
      grid-template-columns: 1fr;
      max-height: 92vh;
      overflow: auto;
    }
    .ab-eip__visual { min-height: 180px; aspect-ratio: 16 / 9; }
    .ab-eip__offer { padding: 24px 22px 26px; }
    .ab-eip__offer-title { font-size: 32px; letter-spacing: -1px; }
    .ab-eip__offer-body { font-size: 13px; }
    .ab-eip__bullets { gap: 10px; }
  }
/* END_SECTION:ab-exit-intent-popup */

/* START_SECTION:ab-footer (INDEX:24) */
.ab-footer {
    font-family: var(--font-body--family);
    padding-block: var(--ab-foot-pad-top, 64px) var(--ab-foot-pad-bottom, 28px);
  }

  .ab-footer__cap {
    max-width: 1440px;
    margin-inline: auto;
    padding-inline: var(--ab-foot-pad-inline, 48px);
  }

  @media screen and (max-width: 989px) {
    .ab-footer { padding-block: var(--ab-foot-pad-top-mb, 40px) var(--ab-foot-pad-bottom-mb, 24px); }
    .ab-footer__cap { padding-inline: var(--ab-foot-pad-inline-mb, 24px); }
  }

  .ab-footer__top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 40px;
    padding-block-end: 44px;
    border-block-end: 1px solid var(--ab-foot-divider-c, #1e293b);
  }

  .ab-footer__brand-name {
    margin: 0 0 12px;
    font-size: var(--ab-foot-brand-size, 24px);
    font-weight: 800;
    letter-spacing: -0.6px;
    color: var(--ab-foot-brand-c, #FFFFFF);
  }

  .ab-footer__logo-img {
    max-width: 240px;
    height: auto;
    margin-block-end: 16px;
  }

  /* Legacy address_html fallback */
  .ab-footer__address {
    font-size: 13px;
    line-height: 1.7;
    color: var(--ab-foot-address-c, #67E8F9);
    opacity: 0.85;
  }
  .ab-footer__address a {
    color: var(--ab-foot-brand-c, #FFFFFF);
    text-decoration: none;
  }

  /* Icon-led contact list */
  .ab-footer__contact {
    list-style: none;
    padding: 0;
    margin: 16px 0 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .ab-footer__contact-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ab-foot-address-c, #67E8F9);
  }
  .ab-footer__contact-icon {
    flex: none;
    width: 18px;
    height: 18px;
    color: var(--ab-foot-address-c, #67E8F9);
    margin-block-start: 1px;
  }
  .ab-footer__contact-icon svg { width: 18px; height: 18px; display: block; }
  .ab-footer__contact-text {
    color: var(--ab-foot-brand-c, #FFFFFF);
    text-decoration: none;
  }
  a.ab-footer__contact-text:hover { opacity: 0.8; }

  .ab-footer__social {
    list-style: none;
    padding: 0;
    margin: 20px 0 0;
    display: flex;
    gap: 10px;
  }

  .ab-footer__social-link {
    display: flex;
    width: 36px;
    height: 36px;
    border: 1px solid var(--ab-foot-social-border-c, #67E8F9);
    border-radius: 6px;
    color: var(--ab-foot-social-c, #FFFFFF);
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background 150ms ease;
  }
  .ab-footer__social-link:hover {
    background: rgb(255 255 255 / 0.08);
  }
  .ab-footer__social-letter {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
  }

  /* Link columns (details/summary) */
  .ab-footer__col {
    min-width: 0;
  }
  .ab-footer__col > summary {
    list-style: none;
    cursor: default;
    margin: 0 0 18px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--ab-foot-link-heading-size, 11px);
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--ab-foot-link-heading-c, #FFFFFF);
    text-transform: uppercase;
  }
  .ab-footer__col > summary::-webkit-details-marker { display: none; }
  .ab-footer__col-chev {
    width: 16px;
    height: 16px;
    color: var(--ab-foot-link-c, #67E8F9);
    transition: transform 200ms ease;
    display: none; /* hidden on desktop */
  }

  .ab-footer__col-links {
    display: flex;
    flex-direction: column;
  }

  /* Wide column: spans 2 grid tracks, splits links into sub-columns */
  @media screen and (min-width: 990px) {
    .ab-footer__col--wide { grid-column: span 2; }
    .ab-footer__col--wide .ab-footer__col-links {
      display: grid;
      grid-template-rows: repeat(var(--ab-foot-max-per-col, 6), auto);
      grid-auto-flow: column;
      grid-auto-columns: minmax(0, 1fr);
      column-gap: 32px;
    }
  }

  .ab-footer__col-link {
    display: block;
    font-size: var(--ab-foot-link-size, 13px);
    color: var(--ab-foot-link-c, #67E8F9);
    margin-block-end: 10px;
    opacity: 0.85;
    text-decoration: none;
    transition: opacity 150ms ease, color 150ms ease;
  }
  a.ab-footer__col-link:hover {
    color: var(--ab-foot-link-c-hover, #FFFFFF);
    opacity: 1;
  }

  /* Trust badges row */
  .ab-footer__trust {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding-block: 28px;
    border-block-end: 1px solid var(--ab-foot-divider-c, #1e293b);
  }
  .ab-footer__trust-item {
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .ab-footer__trust-icon {
    flex: none;
    width: 32px;
    height: 32px;
    color: var(--ab-foot-trust-icon-c, #67E8F9);
  }
  .ab-footer__trust-icon svg { width: 32px; height: 32px; display: block; }
  .ab-footer__trust-title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--ab-foot-trust-title-c, #FFFFFF);
    letter-spacing: 0.2px;
  }
  .ab-footer__trust-subtitle {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--ab-foot-trust-sub-c, #94A3B8);
  }

  /* Bottom row: wraps legal info (left) + payment methods (right) */
  .ab-footer__bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    margin-block-start: 24px;
    flex-wrap: wrap;
  }

  /* Bottom legal block */
  .ab-footer__bottom {
    display: flex;
    align-items: center;
    font-size: var(--ab-foot-bottom-size, 11px);
    color: var(--ab-foot-bottom-c, #475569);
    letter-spacing: 0.8px;
    gap: 16px;
    flex-wrap: wrap;
  }
  .ab-footer__bottom a { color: inherit; text-decoration: none; }
  .ab-footer__bottom a:hover { opacity: 0.8; }
  .ab-footer__bottom-links { display: flex; gap: 16px; }

  /* Payment methods block */
  .ab-footer__payments {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  .ab-footer__payment {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 4px 8px;
    border: 1px solid var(--ab-foot-divider-c, #1e293b);
    border-radius: 4px;
    background: rgb(255 255 255 / 0.02);
  }
  .ab-footer__payment-svg { height: 16px; width: auto; display: block; }

  /* ===== Mobile (≤ 989px) ===== */
  @media screen and (max-width: 989px) {
    .ab-footer__top {
      grid-template-columns: 1fr;
      gap: 0;
      padding-block-end: 0;
      border-block-end: none;
    }
    .ab-footer__brand {
      padding-block-end: 24px;
      border-block-end: 1px solid var(--ab-foot-divider-c, #1e293b);
      margin-block-end: 16px;
    }

    /* Accordion behavior */
    .ab-footer__col {
      border-block-end: 1px solid var(--ab-foot-divider-c, #1e293b);
    }
    .ab-footer__col > summary {
      cursor: pointer;
      padding-block: 20px;
      margin: 0;
    }
    .ab-footer__col-chev {
      display: block;
    }
    .ab-footer__col[open] > summary .ab-footer__col-chev {
      transform: rotate(180deg);
    }
    .ab-footer__col-links {
      padding-block-end: 16px;
    }

    /* Trust badges stacked */
    .ab-footer__trust {
      grid-template-columns: 1fr;
      gap: 14px;
      padding-block: 24px;
    }

    /* Bottom row + payments stack centered on mobile */
    .ab-footer__bottom-row {
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }
    .ab-footer__bottom {
      flex-direction: column;
      text-align: center;
      gap: 8px;
    }
    .ab-footer__payments {
      justify-content: center;
    }
  }
/* END_SECTION:ab-footer */

/* START_SECTION:ab-gift-card (INDEX:25) */
.ab-gc {
    /* vw scaling: 1 at 1440px+, scales linearly down to 0.371 at 535px */
    --ab-gc-scale: clamp(0.371, 100vw / 1440px, 1);
    margin-top:    var(--ab-gc-margin-top, 40px);
    margin-bottom: var(--ab-gc-margin-bottom, 40px);
    margin-left:   var(--ab-gc-margin-left, 0px);
    margin-right:  var(--ab-gc-margin-right, 0px);
  }

  /* Background style: fullwidth → bg on section root (edge to edge).
     contained → bg on cap (max-width 1440), corners visible above 1440. */
  .ab-gc--bg-fullwidth {
    background: var(--ab-gc-cap-bg, rgba(232, 227, 216, 1));
  }

  .ab-gc--bg-contained .ab-gc__cap {
    background: var(--ab-gc-cap-bg, rgba(232, 227, 216, 1));
    border-radius: calc(var(--ab-gc-bg-radius, 16px) * var(--ab-gc-scale));
  }

  .ab-gc__cap {
    max-width: 1440px;
    margin-inline: auto;
    padding-top:    calc(var(--ab-gc-pad-top, 40px) * var(--ab-gc-scale));
    padding-bottom: calc(var(--ab-gc-pad-bottom, 40px) * var(--ab-gc-scale));
    padding-left:   calc(var(--ab-gc-pad-left, 48px) * var(--ab-gc-scale));
    padding-right:  calc(var(--ab-gc-pad-right, 48px) * var(--ab-gc-scale));
  }

  .ab-gc__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--ab-gc-grid-gap, 64px) * var(--ab-gc-scale));
    align-items: center;
  }

  .ab-gc__grid--image-right { direction: rtl; }
  .ab-gc__grid--image-right > * { direction: ltr; }

  /* --- Media --- */
  .ab-gc__media {
    position: relative;
    width: 100%;
  }
  .ab-gc__img,
  .ab-gc__img-placeholder {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border: 1px solid var(--ab-gc-line, #e2e8f0);
    background: var(--ab-gc-surf, #f1f5f9);
  }
  .ab-gc__badge {
    position: absolute;
    top: calc(18px * var(--ab-gc-scale));
    left: calc(18px * var(--ab-gc-scale));
    display: inline-flex;
    align-items: center;
    gap: max(6px, calc(7px * var(--ab-gc-scale)));
    background: var(--ab-gc-deep, #0b1220);
    color: #ffffff;
    font-family: var(--font-body--family);
    font-size: max(10px, calc(11px * var(--ab-gc-scale)));
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    padding: max(7px, calc(9px * var(--ab-gc-scale))) max(10px, calc(14px * var(--ab-gc-scale)));
    z-index: 2;
  }
  .ab-gc__badge svg {
    color: var(--ab-gc-accent, #0e9cc4);
    width: max(11px, calc(13px * var(--ab-gc-scale)));
    height: max(11px, calc(13px * var(--ab-gc-scale)));
    flex: none;
  }

  /* --- Copy --- */
  .ab-gc__eyebrow {
    margin: 0 0 calc(14px * var(--ab-gc-scale));
    font-family: var(--font-body--family);
    font-weight: 700;
    font-size: max(11px, calc(var(--ab-gc-eyebrow-size, 13px) * var(--ab-gc-scale)));
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--ab-gc-accent, #0e9cc4);
  }
  .ab-gc__title {
    margin: 0;
    font-family: var(--font-body--family);
    font-weight: 800;
    font-size: calc(var(--ab-gc-title-size, 60px) * var(--ab-gc-scale));
    letter-spacing: -2.4px;
    line-height: 0.92;
    text-transform: uppercase;
    color: var(--ab-gc-deep, #0b1220);
  }
  .ab-gc__title-accent { color: var(--ab-gc-accent, #0e9cc4); }
  .ab-gc__desc {
    margin: calc(22px * var(--ab-gc-scale)) 0 0;
    font-family: var(--font-body--family);
    font-size: max(13px, calc(var(--ab-gc-desc-size, 17px) * var(--ab-gc-scale)));
    line-height: 1.6;
    color: var(--ab-gc-ink-2, #334155);
    max-width: 480px;
    text-wrap: pretty;
  }

  /* --- Price --- */
  .ab-gc__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: max(8px, calc(12px * var(--ab-gc-scale)));
    margin: calc(30px * var(--ab-gc-scale)) 0 calc(4px * var(--ab-gc-scale));
  }
  .ab-gc__amount {
    font-family: var(--font-body--family);
    font-size: calc(var(--ab-gc-amount-size, 40px) * var(--ab-gc-scale));
    font-weight: 800;
    letter-spacing: -1.2px;
    color: var(--ab-gc-accent, #0e9cc4);
    line-height: 1;
  }
  .ab-gc__afterpay {
    font-family: var(--font-body--family);
    font-size: max(12px, calc(13px * var(--ab-gc-scale)));
    color: var(--ab-gc-ink-3, #64748b);
  }
  .ab-gc__afterpay b { color: var(--ab-gc-ink-2, #334155); font-weight: 700; }

  /* --- Chip group --- */
  .ab-gc__optlabel {
    margin: calc(28px * var(--ab-gc-scale)) 0 calc(12px * var(--ab-gc-scale));
    font-family: var(--font-body--family);
    font-size: max(11px, calc(12px * var(--ab-gc-scale)));
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--ab-gc-ink-3, #64748b);
  }
  .ab-gc__optlabel span { color: var(--ab-gc-deep, #0b1220); }

  .ab-gc__chips {
    display: flex;
    flex-wrap: wrap;
    gap: max(8px, calc(10px * var(--ab-gc-scale)));
  }
  .ab-gc__chip {
    font-family: inherit;
    min-width: max(64px, calc(var(--ab-gc-chip-min, 78px) * var(--ab-gc-scale)));
    padding: max(10px, calc(13px * var(--ab-gc-scale))) max(14px, calc(18px * var(--ab-gc-scale)));
    font-size: max(13px, calc(var(--ab-gc-chip-size, 15px) * var(--ab-gc-scale)));
    font-weight: 700;
    color: var(--ab-gc-ink, #0f172a);
    background: var(--ab-gc-bg, #ffffff);
    border: 1px solid var(--ab-gc-line-2, #cbd5e1);
    cursor: pointer;
    transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
  }
  .ab-gc__chip:hover:not([disabled]) { border-color: var(--ab-gc-deep, #0b1220); }
  .ab-gc__chip[aria-pressed="true"] {
    background: var(--ab-gc-deep, #0b1220);
    color: #ffffff;
    border-color: var(--ab-gc-deep, #0b1220);
  }
  .ab-gc__chip[disabled] { opacity: 0.4; cursor: not-allowed; }

  /* --- Qty + ATC --- */
  .ab-gc__buy {
    display: flex;
    gap: max(10px, calc(12px * var(--ab-gc-scale)));
    margin-top: calc(26px * var(--ab-gc-scale));
  }
  .ab-gc__qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--ab-gc-line-2, #cbd5e1);
    flex: none;
  }
  .ab-gc__qty-btn {
    font-family: inherit;
    width: max(40px, calc(48px * var(--ab-gc-scale)));
    height: max(48px, calc(var(--ab-gc-cta-height, 56px) * var(--ab-gc-scale)));
    background: var(--ab-gc-bg, #ffffff);
    border: none;
    cursor: pointer;
    font-size: max(16px, calc(20px * var(--ab-gc-scale)));
    color: var(--ab-gc-ink-2, #334155);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 150ms ease;
  }
  .ab-gc__qty-btn:hover { background: var(--ab-gc-surf, #f1f5f9); }
  .ab-gc__qty-input {
    width: max(40px, calc(44px * var(--ab-gc-scale)));
    height: max(48px, calc(var(--ab-gc-cta-height, 56px) * var(--ab-gc-scale)));
    border: none;
    text-align: center;
    font-family: inherit;
    font-size: max(14px, calc(16px * var(--ab-gc-scale)));
    font-weight: 700;
    color: var(--ab-gc-deep, #0b1220);
    -moz-appearance: textfield;
    background: var(--ab-gc-bg, #ffffff);
  }
  .ab-gc__qty-input::-webkit-outer-spin-button,
  .ab-gc__qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

  .ab-gc__cta {
    font-family: inherit;
    flex: 1;
    height: max(48px, calc(var(--ab-gc-cta-height, 56px) * var(--ab-gc-scale)));
    background: var(--ab-gc-accent, #0e9cc4);
    color: #ffffff;
    border: none;
    font-size: max(12px, calc(var(--ab-gc-cta-size, 14px) * var(--ab-gc-scale)));
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: max(8px, calc(10px * var(--ab-gc-scale)));
    transition: background 150ms ease, opacity 150ms ease;
  }
  .ab-gc__cta:hover { background: var(--ab-gc-accent-d, #0b7fa0); }
  .ab-gc__cta.is-loading { opacity: 0.7; cursor: progress; }
  .ab-gc__cta.is-added { background: var(--ab-gc-deep, #0b1220); }
  .ab-gc__cta svg { flex: none; }

  /* --- Trust row --- */
  .ab-gc__trust {
    display: flex;
    flex-wrap: wrap;
    gap: max(14px, calc(22px * var(--ab-gc-scale)));
    margin-top: calc(24px * var(--ab-gc-scale));
    padding-top: calc(22px * var(--ab-gc-scale));
    border-top: 1px solid var(--ab-gc-line, #e2e8f0);
  }
  .ab-gc__trust-item {
    display: inline-flex;
    align-items: center;
    gap: max(7px, calc(9px * var(--ab-gc-scale)));
    font-family: var(--font-body--family);
    font-size: max(12px, calc(13px * var(--ab-gc-scale)));
    color: var(--ab-gc-ink-2, #334155);
    font-weight: 600;
  }
  .ab-gc__trust-item svg {
    color: var(--ab-gc-accent, #0e9cc4);
    flex: none;
  }

  .ab-gc__missing {
    font-family: var(--font-body--family);
    color: var(--ab-gc-ink-3, #64748b);
    font-size: 14px;
    padding: 16px;
    border: 1px dashed var(--ab-gc-line-2, #cbd5e1);
  }

  /* Mobile spacing + sizes overrides (configurable from editor) */
  @media screen and (max-width: 749px) {
    .ab-gc {
      margin-top:    var(--ab-gc-mob-margin-top, 0px) !important;
      margin-bottom: var(--ab-gc-mob-margin-bottom, 0px) !important;
      margin-left:   var(--ab-gc-mob-margin-left, 0px) !important;
      margin-right:  var(--ab-gc-mob-margin-right, 0px) !important;
    }
    .ab-gc__cap {
      padding-top:    var(--ab-gc-mob-pad-top, 20px) !important;
      padding-bottom: var(--ab-gc-mob-pad-bottom, 20px) !important;
      padding-left:   var(--ab-gc-mob-pad-left, 24px) !important;
      padding-right:  var(--ab-gc-mob-pad-right, 24px) !important;
    }
    .ab-gc--bg-contained .ab-gc__cap {
      border-radius: var(--ab-gc-mob-bg-radius, 0px);
    }
    .ab-gc__eyebrow { font-size: var(--ab-gc-mob-eyebrow-size, 11px); }
    .ab-gc__title   { font-size: var(--ab-gc-mob-title-size, 38px); }
    .ab-gc__desc    { font-size: var(--ab-gc-mob-desc-size, 15px); }
    .ab-gc__amount  { font-size: var(--ab-gc-mob-amount-size, 32px); }
    .ab-gc__chip {
      font-size: var(--ab-gc-mob-chip-size, 13px);
      min-width: var(--ab-gc-mob-chip-min, 64px);
    }
    .ab-gc__cta {
      font-size: var(--ab-gc-mob-cta-size, 13px);
      height: var(--ab-gc-mob-cta-height, 48px);
    }
    .ab-gc__qty-btn,
    .ab-gc__qty-input { height: var(--ab-gc-mob-cta-height, 48px); }
  }

  /* Below 535px: drop vw scaling, stack layout, fine-tune badge + spacing */
  @media screen and (max-width: 534px) {
    .ab-gc { --ab-gc-scale: 1; }
    .ab-gc__cap { padding-inline: 24px; }
    .ab-gc__grid {
      grid-template-columns: 1fr;
      gap: 32px;
    }
    .ab-gc__grid--image-right { direction: ltr; }
    .ab-gc__media { max-width: 460px; margin-inline: auto; width: 100%; }
    .ab-gc__title { letter-spacing: -1.2px; }
    .ab-gc__buy { flex-wrap: wrap; }
    .ab-gc__cta { flex: 1 1 100%; }
    .ab-gc__badge {
      top: 12px;
      left: 12px;
      font-size: 10px;
      padding: 7px 11px;
    }
  }
/* END_SECTION:ab-gift-card */

/* START_SECTION:ab-gift-finder (INDEX:26) */
/* Desktop section-level margin (outside bg) */
  .ab-gf {
    margin-top: var(--ab-gf-margin-top, 40px);
    margin-bottom: var(--ab-gf-margin-bottom, 40px);
    margin-left: var(--ab-gf-margin-left, 0px);
    margin-right: var(--ab-gf-margin-right, 0px);
  }

  /* Background style: fullwidth → bg on section root (edge to edge).
     contained → bg on cap (max-width 1440), corners visible above 1440. */
  .ab-gf--bg-fullwidth {
    background: var(--ab-gf-bg, transparent);
  }

  .ab-gf--bg-contained .ab-gf__cap {
    background: var(--ab-gf-bg, transparent);
    border-radius: calc(var(--ab-gf-bg-radius, 16px) * clamp(0.371, 100vw / 1440px, 1));
  }

  .ab-gf__cap {
    max-width: 1440px;
    margin-inline: auto;
    padding-top: var(--ab-gf-pad-top, 40px);
    padding-bottom: var(--ab-gf-pad-bottom, 40px);
    padding-left: var(--ab-gf-pad-left, 48px);
    padding-right: var(--ab-gf-pad-right, 48px);
  }

  .ab-gf__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ab-gf-grid-gap, 56px);
    align-items: center;
  }

  .ab-gf__inner--image-right {
    direction: rtl;
  }
  .ab-gf__inner--image-right > * {
    direction: ltr;
  }

  .ab-gf__media {
    position: relative;
    width: 100%;
    aspect-ratio: var(--ab-gf-image-aspect, 5 / 4);
    overflow: hidden;
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .ab-gf__img,
  .ab-gf__img-placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ab-gf__eyebrow {
    margin: 0 0 12px;
    font-family: var(--font-body--family);
    font-weight: 700;
    font-size: var(--ab-gf-eyebrow-size, 11px);
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--ab-gf-eyebrow-c, var(--color-primary));
  }

  .ab-gf__headline {
    margin: 0 0 20px;
    font-family: var(--font-body--family);
    font-weight: 800;
    font-size: var(--ab-gf-headline-size, 56px);
    letter-spacing: -1.8px;
    line-height: 0.95;
    color: var(--ab-gf-headline-c, var(--color-foreground));
  }

  .ab-gf__headline-accent {
    color: var(--ab-gf-headline-accent-c, var(--color-primary));
  }

  .ab-gf__body {
    margin: 0 0 28px;
    font-family: var(--font-body--family);
    font-size: var(--ab-gf-body-size, 17px);
    line-height: 1.6;
    color: var(--ab-gf-body-c, var(--color-foreground-muted));
    max-width: 480px;
  }

  .ab-gf__filters {
    display: grid;
    grid-template-columns: repeat(var(--ab-gf-filter-cols, 3), minmax(0, 1fr));
    gap: var(--ab-gf-filter-gap, 10px);
    margin-block-end: 24px;
  }

  .ab-gf__filter {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--ab-gf-filter-pad-y, 16px) var(--ab-gf-filter-pad-x, 14px);
    background: var(--ab-gf-filter-bg, var(--color-background));
    border: 1px solid var(--ab-gf-filter-border-c, var(--color-border));
    border-radius: var(--ab-gf-filter-radius, 8px);
    color: inherit;
    text-decoration: none;
    text-align: left;
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
  }

  .ab-gf__filter:hover {
    background: var(--ab-gf-filter-bg-hover, rgb(var(--color-foreground-rgb) / var(--opacity-5)));
    border-color: var(--color-primary);
  }

  .ab-gf__filter-label {
    font-family: var(--font-body--family);
    font-size: var(--ab-gf-filter-label-size, 14px);
    font-weight: 700;
    color: var(--ab-gf-filter-label-c, var(--color-foreground));
  }

  .ab-gf__filter-sub {
    font-family: var(--font-body--family);
    font-size: var(--ab-gf-filter-sub-size, 11px);
    color: var(--ab-gf-filter-sub-c, var(--color-foreground-muted));
    letter-spacing: 1px;
  }

  .ab-gf__cta {
    display: inline-block;
    background: var(--ab-gf-cta-bg, var(--color-foreground));
    color: var(--ab-gf-cta-c, var(--color-background));
    border: none;
    padding: 16px 28px;
    font-family: var(--font-body--family);
    font-size: var(--ab-gf-cta-size, 13px);
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 150ms ease;
  }

  .ab-gf__cta:hover { opacity: 0.92; }

  @media screen and (max-width: 989px) {
    .ab-gf__inner {
      grid-template-columns: 1fr;
      gap: 32px;
    }
    .ab-gf__inner--image-right {
      direction: ltr;
    }
    .ab-gf__headline {
      font-size: 40px;
      letter-spacing: -1.2px;
    }
    .ab-gf__filters {
      grid-template-columns: 1fr 1fr;
    }
  }

  /* Mobile overrides for spacing + radius (configurable from editor) */
  @media screen and (max-width: 749px) {
    .ab-gf {
      margin-top:    var(--ab-gf-mob-margin-top, 0px) !important;
      margin-bottom: var(--ab-gf-mob-margin-bottom, 0px) !important;
      margin-left:   var(--ab-gf-mob-margin-left, 0px) !important;
      margin-right:  var(--ab-gf-mob-margin-right, 0px) !important;
    }
    .ab-gf__cap {
      padding-top:    var(--ab-gf-mob-pad-top, 20px) !important;
      padding-bottom: var(--ab-gf-mob-pad-bottom, 20px) !important;
      padding-left:   var(--ab-gf-mob-pad-left, 24px) !important;
      padding-right:  var(--ab-gf-mob-pad-right, 24px) !important;
    }
    .ab-gf--bg-contained .ab-gf__cap {
      border-radius: var(--ab-gf-mob-bg-radius, 0px);
    }
    .ab-gf__filter {
      border-radius: var(--ab-gf-mob-filter-radius, 0px);
    }
  }

  @media screen and (max-width: 480px) {
    .ab-gf__filters {
      grid-template-columns: 1fr;
    }
  }
/* END_SECTION:ab-gift-finder */

/* START_SECTION:ab-header-v2 (INDEX:27) */
/* Header is in normal flow by default, promoted to position:fixed only
     when the relevant sticky toggle (desktop or mobile) is on. The
     <header> carries data-sticky-d / data-sticky-m attributes from the
     schema settings; each viewport's @media block enforces its toggle. */
  .ab-h2 {
    background: var(--color-background);
    border-block-end: 1px solid var(--ab-h2-line-c, var(--color-border));
    box-shadow: var(--ab-h2-shadow, none);
    z-index: 50;
    transition: transform 220ms ease;
    will-change: transform;
  }
  /* Slide-off-on-scroll-down applies regardless of sticky state — harmless
     on a static header, and saves duplicating the rule per breakpoint. */
  body.ab-scroll-down .ab-h2 { transform: translateY(-100%); }

  @media (min-width: 881px) {
    .ab-h2[data-sticky-d="true"] {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
    }
    body:has(.ab-h2[data-sticky-d="true"]) #MainContent {
      padding-top: var(--ab-h2-h, 111px);
    }
  }
  @media (max-width: 880px) {
    .ab-h2[data-sticky-m="true"] {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
    }
    body:has(.ab-h2[data-sticky-m="true"]) #MainContent {
      padding-top: var(--ab-h2-h, 111px);
    }
  }

  .ab-h2__announce {
    background: var(--ab-h2-announce-bg, #0B1220);
    font-family: var(--font-body--family);
    letter-spacing: 1.6px;
    text-transform: uppercase;
    padding: 10px 16px;
    text-align: center;
    font-weight: 600;
    /* font-size + color come from the theme-editor-driven {% style %}
       block at the top of the section so they can be tuned per viewport
       without editing CSS. */
  }

  .ab-h2__inner {
    padding-top:    var(--ab-h2-inner-pt, 18px);
    padding-right:  var(--ab-h2-inner-pr, 36px);
    padding-bottom: var(--ab-h2-inner-pb, 18px);
    padding-left:   var(--ab-h2-inner-pl, 36px);
    max-width: 1600px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: nowrap;
  }

  .ab-h2__logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    flex: 0 0 auto;
    cursor: pointer;
  }
  /* Image logo: display desktop by default, hide mobile.
     Mobile media query below flips these. */
  .ab-h2__logo-img { display: block; max-width: 100%; }
  .ab-h2__logo-img--m { display: none; }
  @media (max-width: 767px) {
    .ab-h2__logo-img--d { display: none; }
    .ab-h2__logo-img--m { display: block; }
  }
  .ab-h2__logo-eyebrow {
    display: block;
    font-family: var(--font-body--family);
    font-size: 9.5px;
    letter-spacing: 2.2px;
    color: var(--ab-h2-logo-eyebrow-c, #0891B2);
    font-weight: 700;
    line-height: 1;
    margin-block-end: 5px;
  }
  .ab-h2__logo-name {
    display: block;
    font-family: var(--font-body--family);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.4px;
    color: var(--ab-h2-logo-name-c, #0B1220);
    line-height: 1;
  }

  .ab-h2__nav {
    display: flex;
    gap: 18px;
    flex: 1 1 auto;
    justify-content: center;
    font-family: var(--font-body--family);
    font-size: 11.5px;
    color: var(--ab-h2-nav-c, #0B1220);
    font-weight: 600;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .ab-h2__item { position: relative; padding-block: 6px; }
  .ab-h2__item-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding-block-end: 3px;
    color: inherit;
    text-decoration: none;
    transition: color 150ms ease;
  }
  .ab-h2__item.is-accent .ab-h2__item-link {
    color: var(--ab-h2-nav-hover-c, var(--color-primary));
    font-weight: 700;
  }
  .ab-h2__item.has-mega:hover > .ab-h2__item-link,
  .ab-h2__item.is-open > .ab-h2__item-link {
    color: var(--ab-h2-nav-hover-c, var(--color-primary));
  }
  .ab-h2__caret {
    width: 9px; height: 9px;
    display: inline-block;
    position: relative;
    transition: transform 250ms cubic-bezier(0.4, 0.1, 0.2, 1);
  }
  .ab-h2__caret::before {
    content: "";
    position: absolute;
    inset: 0;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 4.5l4 4 4-4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 4.5l4 4 4-4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
  }
  .ab-h2__item.has-mega:hover .ab-h2__caret,
  .ab-h2__item.is-open .ab-h2__caret { transform: rotate(180deg); }

  .ab-h2__icons {
    display: flex;
    gap: 6px;
    align-items: center;
    flex: 0 0 auto;
  }
  .ab-h2__icon {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ab-h2-icon-c, var(--color-foreground));
    background: transparent;
    border: 0;
    padding: 0;
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-decoration: none;
    transition: background 180ms ease, color 180ms ease;
  }
  .ab-h2__icon:hover {
    background: var(--ab-h2-icon-hover-bg, #F1F5F9);
    color: var(--ab-h2-icon-hover-c, var(--color-primary));
  }
  .ab-h2__bag-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: var(--ab-h2-bag-badge-bg, var(--color-primary));
    color: var(--ab-h2-bag-badge-c, #FFFFFF);
    font-size: 9px;
    font-weight: 800;
    min-width: 16px;
    height: 16px;
    padding-inline: 4px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px var(--color-background);
  }
  .ab-h2__icon-divider {
    width: 1px;
    height: 18px;
    background: var(--ab-h2-line-c, var(--color-border));
    margin-inline: 4px;
  }
  .ab-h2__menu-btn { display: none; }

  .ab-h2__underline {
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 2px;
    width: 0;
    background: var(--ab-h2-underline-c, #06B6D4);
    transition: transform 250ms cubic-bezier(0.4, 0.1, 0.2, 1), width 250ms cubic-bezier(0.4, 0.1, 0.2, 1), opacity 150ms;
    opacity: 0;
    pointer-events: none;
    z-index: 65;
  }
  .ab-h2__underline.is-on { opacity: 1; }

  /* ===== MEGA DROPDOWN ===== */
  .ab-h2__mega {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--color-background);
    border-block: 1px solid var(--ab-h2-line-c, var(--color-border));
    box-shadow: 0 24px 40px -28px rgb(11 18 32 / 0.18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
    z-index: 60;
  }
  .ab-h2__mega.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 180ms ease, transform 180ms ease, visibility 0s;
  }

  .ab-h2__mega-inner {
    max-width: 1440px;
    margin-inline: auto;
    padding: 36px 36px 40px;
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 36px;
  }

  .ab-h2__mega-eyebrow {
    margin: 0 0 10px;
    font-family: var(--font-body--family);
    font-size: 10px;
    letter-spacing: 2.4px;
    color: var(--ab-h2-mega-eyebrow-c, var(--color-primary));
    font-weight: 700;
    text-transform: uppercase;
  }
  .ab-h2__mega-title {
    margin: 0 0 12px;
    font-family: var(--font-body--family);
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.05;
    color: var(--ab-h2-mega-title-c, var(--color-foreground));
  }
  .ab-h2__mega-title em {
    font-style: italic;
    color: var(--ab-h2-mega-title-accent-c, var(--color-primary));
  }
  .ab-h2__mega-blurb {
    margin: 0 0 16px;
    font-family: var(--font-body--family);
    font-size: 12.5px;
    color: var(--ab-h2-mega-blurb-c, var(--color-foreground-muted));
    line-height: 1.6;
  }
  .ab-h2__mega-side-links {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-block-start: 1px solid var(--ab-h2-line-c, var(--color-border));
    padding-block-start: 14px;
  }
  .ab-h2__mega-side-links a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-body--family);
    font-size: 12px;
    color: var(--ab-h2-mega-blurb-c, var(--color-foreground-muted));
    font-weight: 600;
    padding-block: 6px;
    text-decoration: none;
    transition: color 150ms ease;
  }
  .ab-h2__mega-side-links a:hover { color: var(--color-primary); }
  .ab-h2__mega-side-links .arr { font-size: 14px; opacity: 0.65; }

  .ab-h2__mega-shop {
    margin-block-start: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--ab-h2-mega-shop-bg, var(--color-foreground));
    color: var(--ab-h2-mega-shop-c, var(--color-background));
    padding: 11px 14px;
    border: 1px solid transparent;
    font-family: var(--font-body--family);
    font-size: 11px;
    letter-spacing: 1.6px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
  }
  .ab-h2__mega-shop:hover {
    background: #FFFFFF;
    color: #0B1220;
    border-color: #0B1220;
  }
  .ab-h2__mega-shop svg { transition: transform 200ms ease; }
  .ab-h2__mega-shop:hover svg { transform: translateX(3px); }

  .ab-h2__mega-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }

  .ab-h2__col-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ab-h2-mega-card-border-c, var(--color-border));
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    background: var(--color-background);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
  }
  .ab-h2__col-card:hover {
    border-color: var(--color-foreground);
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -18px rgb(11 18 32 / 0.25);
  }
  .ab-h2__col-card-img {
    aspect-ratio: 4 / 3;
    position: relative;
    overflow: hidden;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .ab-h2__col-card-img-real {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 350ms ease;
  }
  .ab-h2__col-card:hover .ab-h2__col-card-img-real { transform: scale(1.04); }
  .ab-h2__col-card-img-placeholder {
    width: 100%; height: 100%;
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.18) 50%, rgba(255, 255, 255, 0.18) 75%, transparent 75%);
    background-size: 14px 14px;
    background-color: rgb(var(--color-foreground-rgb) / 0.08);
  }

  .ab-h2__col-card-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--ab-h2-tag-bg, var(--color-background));
    color: var(--ab-h2-tag-c, var(--color-foreground));
    padding: 4px 9px;
    font-family: var(--font-body--family);
    font-size: 9.5px;
    letter-spacing: 1.4px;
    font-weight: 800;
    text-transform: uppercase;
  }
  .ab-h2__col-card-tag--new { background: var(--ab-h2-tag-new-bg, #10B981); color: #FFFFFF; }
  .ab-h2__col-card-tag--hot { background: var(--ab-h2-tag-hot-bg, #DC2626); color: #FFFFFF; }

  .ab-h2__col-card-body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-block-start: 1px solid var(--ab-h2-mega-card-border-c, var(--color-border));
  }
  .ab-h2__col-card-name {
    margin: 0;
    font-family: var(--font-body--family);
    font-size: 14px;
    font-weight: 700;
    color: var(--ab-h2-mega-card-name-c, var(--color-foreground));
    letter-spacing: -0.2px;
    line-height: 1.25;
  }
  .ab-h2__col-card-name--accent { color: var(--color-primary); }
  .ab-h2__col-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-body--family);
    font-size: 11px;
    color: var(--ab-h2-mega-card-meta-c, var(--color-foreground-muted));
    font-weight: 600;
  }
  .ab-h2__col-card-arrow {
    color: var(--ab-h2-mega-card-arrow-c, var(--color-primary));
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    font-size: 10.5px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .ab-h2__col-card-arrow svg { transition: transform 200ms ease; }
  .ab-h2__col-card:hover .ab-h2__col-card-arrow svg { transform: translateX(3px); }

  .ab-h2__col-card--viewall {
    background: var(--color-background);
    border-style: dashed;
  }
  .ab-h2__col-card-img--empty {
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }
  .ab-h2__col-card-viewall-text {
    font-family: ui-monospace, Menlo, monospace;
    font-size: 9.5px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--color-foreground-muted);
  }

  .ab-h2__mega-bottom {
    margin-block-start: 24px;
    padding-block-start: 18px;
    border-block-start: 1px solid var(--ab-h2-line-c, var(--color-border));
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-family: var(--font-body--family);
    font-size: 12px;
    color: var(--ab-h2-mega-blurb-c, var(--color-foreground-muted));
  }
  .ab-h2__mega-pills { display: flex; gap: 8px; flex-wrap: wrap; }
  .ab-h2__mega-pills span {
    border: 1px solid var(--ab-h2-line-c, var(--color-border));
    padding: 6px 10px;
    font-family: var(--font-body--family);
    font-size: 10.5px;
    letter-spacing: 1.2px;
    font-weight: 700;
    text-transform: uppercase;
  }

  /* ===== SEARCH PANEL — Search Redesign ===== */
  /* Design tokens (locally scoped to search panel) */
  .ab-h2__search-panel {
    --abs-deep: #0a1622;
    --abs-ink: #0f172a;
    --abs-ink2: #475569;
    --abs-ink3: #7c8aa0;
    --abs-line: #e6eaef;
    --abs-line2: #cdd5df;
    --abs-surf: #f4f6f8;
    --abs-surf2: #fafbfc;
    --abs-accent: #1499c9;
    --abs-accent-deep: #0d7aa3;
    --abs-accent-bright: #34bdee;
    --abs-accent-tint: #e7f5fb;
    --abs-sale: #d6263a;

    position: absolute;
    left: 0; right: 0;
    top: 100%;
    background: #fff;
    border-top: 1px solid var(--abs-line);
    z-index: 70;
  }
  .ab-h2__search-panel[hidden] { display: none; }

  /* Input row */
  .ab-h2__search-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 40px;
  }
  .ab-h2__search-field {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    border-bottom: 2px solid var(--abs-ink);
    padding: 8px 2px 12px;
    transition: border-color 180ms ease;
  }
  .ab-h2__search-field { transition: border-color 180ms ease; }
  /* AB-DEPLOY-CHECK-20260616-B focus-color */
  .ab-h2__search-field.is-focus { border-color: #0891b2; }
  .ab-h2__search-field > svg { color: var(--abs-ink3); flex: none; transition: color 180ms ease; }
  .ab-h2__search-field.is-focus > svg { color: #0891b2; }
  .ab-h2__search-input:focus,
  .ab-h2__search-input:focus-visible {
    outline: 0 !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
  }
  .ab-h2__search-input {
    flex: 1;
    border: 0;
    outline: none;
    background: transparent;
    font-family: 'Inter', var(--font-body--family);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--abs-ink);
    min-width: 0;
  }
  .ab-h2__search-input::placeholder { color: var(--abs-ink3); font-weight: 600; }

  .ab-h2__search-go {
    display: flex; align-items: center; gap: 9px;
    background: var(--abs-deep); color: #fff;
    border: 0;
    padding: 14px 22px;
    font-family: 'Inter', var(--font-body--family);
    font-size: 12px; font-weight: 700;
    letter-spacing: 1.4px; text-transform: uppercase;
    cursor: pointer;
    transition: background-color 150ms ease;
  }
  .ab-h2__search-go:hover { background: var(--abs-accent-deep); }
  .ab-h2__search-go > svg { color: var(--abs-accent-bright); }

  .ab-h2__search-close {
    width: 46px; height: 46px;
    border: 1px solid var(--abs-line2);
    background: #fff;
    color: var(--abs-ink2);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
  }
  .ab-h2__search-close:hover { background: var(--abs-ink); color: #fff; border-color: var(--abs-ink); }

  /* Results panel */
  .ab-h2__search-results {
    border-top: 1px solid var(--abs-line);
    max-height: min(72vh, 720px);
    overflow: auto;
  }
  .ab-h2__search-results:empty { display: none; }
  .ab-h2__search-results::-webkit-scrollbar { width: 10px; }
  .ab-h2__search-results::-webkit-scrollbar-thumb { background: var(--abs-line2); border: 3px solid #fff; border-radius: 999px; }

  .ab-h2__search-results .ab-h2-srb {
    padding: 24px 40px;
    border-bottom: 1px solid var(--abs-line);
  }
  .ab-h2__search-results .ab-h2-srb:last-child { border-bottom: 0; }
  .ab-h2__search-results .ab-h2-srb-h {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 16px;
  }
  .ab-h2__search-results .ab-h2-srb-h .ab-h2-srb-tick {
    width: 18px; height: 2px; background: var(--abs-accent);
  }
  .ab-h2__search-results .ab-h2-srb-h span {
    font-size: 11px; font-weight: 800;
    letter-spacing: 2px; text-transform: uppercase;
    color: var(--abs-ink3);
  }

  /* Suggestion chips */
  .ab-h2__search-results .ab-h2-chips {
    display: flex; flex-wrap: wrap; gap: 10px;
  }
  .ab-h2__search-results .ab-h2-chip {
    display: inline-flex; align-items: center; gap: 9px;
    border: 1px solid var(--abs-line2);
    background: #fff;
    padding: 9px 15px 9px 13px;
    font-size: 13.5px; font-weight: 600;
    color: var(--abs-ink2);
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease;
  }
  .ab-h2__search-results .ab-h2-chip svg { color: var(--abs-ink3); flex: none; }
  .ab-h2__search-results .ab-h2-chip:hover { border-color: var(--abs-ink); color: var(--abs-ink); background: var(--abs-surf2); }
  .ab-h2__search-results .ab-h2-chip:hover svg { color: var(--abs-accent); }
  .ab-h2__search-results .ab-h2-chip mark { background: transparent; color: var(--abs-accent-deep); font-weight: 800; }

  /* Collections list */
  .ab-h2__search-results .ab-h2-cols {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 26px;
  }
  .ab-h2__search-results .ab-h2-col {
    display: flex; align-items: center; gap: 13px;
    padding: 11px 12px;
    margin: 0 -12px;
    text-decoration: none;
    transition: background-color 140ms ease;
  }
  .ab-h2__search-results .ab-h2-col:hover { background: var(--abs-surf); }
  .ab-h2__search-results .ab-h2-col-sw {
    width: 60px; height: 60px; flex: none;
    border: 1px solid var(--abs-line2);
    background: var(--abs-surf);
    overflow: hidden;
  }
  .ab-h2__search-results .ab-h2-col-sw img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .ab-h2__search-results .ab-h2-col-ct { font-size: 14.5px; font-weight: 600; color: var(--abs-ink); }
  .ab-h2__search-results .ab-h2-col:hover .ab-h2-col-ct { color: var(--abs-accent-deep); }
  .ab-h2__search-results .ab-h2-col-ct mark { background: transparent; color: var(--abs-accent-deep); font-weight: 800; }
  .ab-h2__search-results .ab-h2-col-go {
    margin-left: auto; opacity: 0; color: var(--abs-accent);
    transition: opacity 140ms ease;
  }
  .ab-h2__search-results .ab-h2-col:hover .ab-h2-col-go { opacity: 1; }

  /* Product grid */
  .ab-h2__search-results .ab-h2-prods {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 22px;
  }
  .ab-h2__search-results .ab-h2-prod {
    display: flex; gap: 15px; align-items: center;
    padding: 13px 12px;
    margin: 0 -12px;
    text-decoration: none;
    transition: background-color 140ms ease;
  }
  .ab-h2__search-results .ab-h2-prod:hover { background: var(--abs-surf); }
  .ab-h2__search-results .ab-h2-prod-thumb {
    width: 62px; height: 62px; flex: none;
    border: 1px solid var(--abs-line2);
    background: var(--abs-surf);
    overflow: hidden;
  }
  .ab-h2__search-results .ab-h2-prod-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .ab-h2__search-results .ab-h2-prod-meta { min-width: 0; display: flex; flex-direction: column; }
  .ab-h2__search-results .ab-h2-prod-vendor { font-size: 11px; color: var(--abs-ink3); letter-spacing: 0.2px; margin-bottom: 2px; }
  .ab-h2__search-results .ab-h2-prod-title {
    font-size: 14px; font-weight: 700; color: var(--abs-ink); line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .ab-h2__search-results .ab-h2-prod:hover .ab-h2-prod-title { color: var(--abs-accent-deep); }
  .ab-h2__search-results .ab-h2-prod-title mark { background: transparent; color: var(--abs-accent-deep); font-weight: 800; }
  .ab-h2__search-results .ab-h2-prod-price { display: flex; align-items: baseline; gap: 8px; margin-top: 5px; }
  .ab-h2__search-results .ab-h2-prod-now { font-size: 14px; font-weight: 800; color: var(--abs-ink); }
  .ab-h2__search-results .ab-h2-prod-now.is-sale { color: var(--abs-sale); }
  .ab-h2__search-results .ab-h2-prod-was { font-size: 12px; color: var(--abs-ink3); text-decoration: line-through; }

  /* No results */
  .ab-h2__search-results .ab-h2-nores {
    padding: 46px 40px; text-align: center;
    color: var(--abs-ink3); font-size: 15px;
  }
  .ab-h2__search-results .ab-h2-nores b { color: var(--abs-ink); }

  /* Footer "Search for ..." bar */
  .ab-h2__search-for {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 18px 40px;
    background: var(--abs-surf);
    border-top: 1px solid var(--abs-line);
    text-decoration: none;
  }
  .ab-h2__search-for[hidden] { display: none; }
  .ab-h2__search-for-lbl { font-size: 14px; font-weight: 600; color: var(--abs-ink2); }
  .ab-h2__search-for-lbl b { color: var(--abs-ink); font-weight: 800; }
  .ab-h2__search-for-arr {
    width: 40px; height: 40px;
    background: var(--abs-deep); color: #fff;
    display: flex; align-items: center; justify-content: center;
    transition: background-color 150ms ease;
  }
  .ab-h2__search-for:hover .ab-h2-search-for-arr,
  .ab-h2__search-for:hover .ab-h2__search-for-arr { background: var(--abs-accent-deep); }

  /* Search icon "open" state — keeps the hover background while panel is open */
  .ab-h2__icon[data-ab-h2-search].is-search-open {
    background: var(--ab-h2-icon-hover-bg, #F1F5F9);
    color: var(--ab-h2-icon-hover-c, var(--color-primary));
  }

  /* Responsive */
  @media (max-width: 1180px) {
    .ab-h2__search-results .ab-h2-cols,
    .ab-h2__search-results .ab-h2-prods { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 720px) {
    .ab-h2__search-bar { padding: 16px 16px; gap: 10px; flex-wrap: wrap; }
    .ab-h2__search-field { order: 1; flex: 1 1 100%; padding: 6px 2px 10px; }
    .ab-h2__search-input { font-size: 21px; }
    .ab-h2__search-field > svg { width: 20px; height: 20px; }
    .ab-h2__search-go { order: 2; flex: 1; justify-content: center; padding: 13px 16px; }
    .ab-h2__search-close { order: 3; }
    .ab-h2__search-results .ab-h2-srb { padding: 18px 16px; }
    .ab-h2__search-results .ab-h2-srb-h { margin-bottom: 13px; }
    .ab-h2__search-results .ab-h2-chips { gap: 8px; }
    .ab-h2__search-results .ab-h2-chip { font-size: 13px; padding: 8px 12px 8px 11px; }
    .ab-h2__search-results .ab-h2-cols,
    .ab-h2__search-results .ab-h2-prods { grid-template-columns: 1fr; gap: 2px; }
    .ab-h2__search-results .ab-h2-col { padding: 11px 14px; margin: 0 -14px; }
    .ab-h2__search-results .ab-h2-prod { padding: 11px 14px; margin: 0 -14px; gap: 13px; }
    .ab-h2__search-results .ab-h2-prod-thumb { width: 56px; height: 56px; }
    .ab-h2__search-for { padding: 16px 16px; }
  }

  /* ===== RESPONSIVE ===== */
  @media (max-width: 1200px) {
    /* Mid-range nav shrink only. Inner padding is now editor-controlled
       via schema (see .ab-h2__inner base rule + @1024 mobile override). */
    .ab-h2__nav { gap: 14px; font-size: 11px; letter-spacing: 0.7px; }
  }
  @media (max-width: 1024px) {
    .ab-h2__mega-inner { grid-template-columns: 1fr; padding: 28px 24px; }
    .ab-h2__mega-grid { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 1024px) {
    .ab-h2__nav { display: none; }
    .ab-h2__menu-btn { display: inline-flex; }
    .ab-h2__inner {
      padding-top:    var(--ab-h2-mob-inner-pt, 14px);
      padding-right:  var(--ab-h2-mob-inner-pr, 18px);
      padding-bottom: var(--ab-h2-mob-inner-pb, 14px);
      padding-left:   var(--ab-h2-mob-inner-pl, 18px);
    }
    .ab-h2__mega-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 560px) {
    .ab-h2__icon-divider { display: none; }
    .ab-h2__icons .ab-h2__icon[aria-label="Account"] { display: none; }
    .ab-h2__announce { letter-spacing: 1.2px; padding: 8px 10px; }
    .ab-h2__logo-name { font-size: 15px; }
    .ab-h2__logo-eyebrow { font-size: 8.5px; }
  }
/* END_SECTION:ab-header-v2 */

/* START_SECTION:ab-hero-carousel (INDEX:28) */
/* Full-width wrapper. When enable_side_bg is on, this paints the
     per-slide color into the space beside the max-1440px carousel. */
  .ab-hc-outer {
    width: 100%;
    background: transparent;
  }
  .ab-hc-outer[data-side-bg-on="true"] {
    background: var(--ab-hc-side-bg, transparent);
    transition: background 600ms cubic-bezier(0.65, 0.01, 0.35, 1);
  }

  /* Cloned slides for infinite-loop illusion — hidden from a11y tree
     but visually identical to their originals. */
  .ab-hc__slide.is-clone { }

  .ab-hc {
    position: relative;
    width: 100%;
    max-width: var(--ab-hc-max-w, 1440px);
    /* Auto-center by default (margin-left/right = auto). If the user sets
       an explicit margin_left/right > 0 in the schema, the inline style
       above overrides these with a px value. */
    margin-top:    var(--ab-hc-margin-top, 0px);
    margin-bottom: var(--ab-hc-margin-bottom, 40px);
    margin-left:  auto;
    margin-right: auto;
    padding-top:    var(--ab-hc-pad-top, 0px);
    padding-bottom: var(--ab-hc-pad-bottom, 0px);
    padding-left:   var(--ab-hc-pad-left, 0px);
    padding-right:  var(--ab-hc-pad-right, 0px);
    background: var(--ab-hc-bg, #0b1220);
    outline: none;
  }
  .ab-hc:focus-visible { box-shadow: inset 0 0 0 2px var(--ab-hc-accent-c, #0e9cc4); }

  .ab-hc__viewport {
    position: relative;
    width: 100%;
    /* Aspect-ratio-driven height:
       - Viewport ≥ max_width: rendered width = max_width, height = height_desktop (baseline)
       - Viewport <  max_width: rendered width = 100vw, height scales via aspect
       So the hero always keeps the max_width : height_desktop ratio proportionally. */
    aspect-ratio: var(--ab-hc-desktop-aspect, 1440 / 620);
    height: auto;
    overflow: hidden;
    background: var(--ab-hc-bg, #0e1524);
  }

  .ab-hc__track {
    display: flex;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.65, 0.01, 0.35, 1);
    will-change: transform;
  }
  @media (prefers-reduced-motion: reduce) {
    .ab-hc__track { transition: none; }
  }

  .ab-hc__slide {
    position: relative;
    flex: 0 0 100%;
    height: 100%;
    background:
      radial-gradient(120% 120% at 80% 20%, rgba(14, 156, 196, 0.18), transparent 60%),
      linear-gradient(135deg, #12203a, #0b1220);
  }
  .ab-hc__slide-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
  }

  .ab-hc__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .ab-hc__img--mobile { display: none; }

  /* ---- Side arrows (desktop) ---- */
  .ab-hc__arrow {
    border: none;
    background: transparent;
    color: #ffffff;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .ab-hc__arrow svg { width: 30px; height: 30px; }

  .ab-hc__arrow--side {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 6;
    width: 48px;
    height: 48px;
    opacity: 0.82;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.55));
    transition: opacity 0.18s ease, transform 0.18s ease;
  }
  .ab-hc__arrow--side:hover { opacity: 1; }
  .ab-hc__arrow--side:active { transform: translateY(-50%) scale(0.9); }
  .ab-hc__arrow--prev { left: 16px; }
  .ab-hc__arrow--next { right: 16px; }

  .ab-hc__arrow--bar {
    display: none;
    width: 30px;
    height: 30px;
    opacity: 0.9;
    transition: opacity 0.18s ease, color 0.18s ease, transform 0.12s ease;
  }
  .ab-hc__arrow--bar:hover { opacity: 1; color: var(--ab-hc-accent-c, #0e9cc4); }
  .ab-hc__arrow--bar:active { transform: scale(0.9); }
  .ab-hc__arrow--bar svg { width: 22px; height: 22px; }

  /* ---- Bottom UI bar ---- */
  .ab-hc__ui {
    position: absolute;
    z-index: 6;
    left: 0;
    right: 0;
    bottom: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 0 24px;
  }
  .ab-hc__playpause {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex: none;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(11, 18, 32, 0.42);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s ease, border-color 0.18s ease;
  }
  .ab-hc__playpause:hover {
    background: var(--ab-hc-accent-c, #0e9cc4);
    border-color: var(--ab-hc-accent-c, #0e9cc4);
  }
  .ab-hc__playpause svg { width: 13px; height: 13px; }
  .ab-hc__playpause .ic-play { display: none; }
  .ab-hc.is-paused .ab-hc__playpause .ic-play { display: block; }
  .ab-hc.is-paused .ab-hc__playpause .ic-pause { display: none; }

  .ab-hc__dots {
    display: flex;
    align-items: center;
    gap: 9px;
  }
  .ab-hc__dot {
    position: relative;
    width: 11px;
    height: 11px;
    border-radius: 999px;
    border: none;
    padding: 0;
    cursor: pointer;
    background: var(--ab-hc-dot-inactive-c, rgba(255, 255, 255, 0.42));
    overflow: hidden;
    transition: width 0.35s cubic-bezier(0.65, 0.01, 0.35, 1), background 0.2s ease;
  }
  .ab-hc__dot:hover { background: rgba(255, 255, 255, 0.75); }
  .ab-hc__dot.is-active {
    width: 46px;
    background: var(--ab-hc-dot-active-track-c, rgba(255, 255, 255, 0.30));
  }
  .ab-hc__dot-fill {
    position: absolute;
    inset: 0;
    width: 0%;
    background: var(--ab-hc-accent-c, #0e9cc4);
    border-radius: 999px;
  }
  .ab-hc__dot.is-active .ab-hc__dot-fill {
    animation: ab-hc-fill var(--ab-hc-autoplay-duration, 3s) linear forwards;
  }
  .ab-hc.is-paused .ab-hc__dot.is-active .ab-hc__dot-fill { animation-play-state: paused; }

  @keyframes ab-hc-fill {
    from { width: 0%; }
    to   { width: 100%; }
  }
  @media (prefers-reduced-motion: reduce) {
    .ab-hc__dot.is-active .ab-hc__dot-fill { animation: none; width: 100%; }
  }

  .ab-hc__counter {
    font-family: var(--font-body--family);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--ab-hc-counter-c, rgba(255, 255, 255, 0.9));
    font-variant-numeric: tabular-nums;
    min-width: 62px;
    text-align: right;
  }
  .ab-hc__counter b { color: var(--ab-hc-accent-c, #0e9cc4); }

  /* ---- Mobile ---- */
  @media (max-width: 767px) {
    .ab-hc {
      margin-top:    var(--ab-hc-mob-margin-top, 0px) !important;
      margin-bottom: var(--ab-hc-mob-margin-bottom, 32px) !important;
      /* Mobile margin-left/right: auto if 0 (centering), explicit px otherwise. */
      margin-left:   auto !important;
      margin-right:  auto !important;
      padding-top:    var(--ab-hc-mob-pad-top, 0px) !important;
      padding-bottom: var(--ab-hc-mob-pad-bottom, 0px) !important;
      padding-left:   var(--ab-hc-mob-pad-left, 0px) !important;
      padding-right:  var(--ab-hc-mob-pad-right, 0px) !important;
    }
    .ab-hc__viewport {
      /* Mobile: aspect-ratio uses mobile_baseline_width : height_mobile.
         Section height grows proportionally with vw between the baseline
         width (default 375) and the mobile breakpoint (767). */
      aspect-ratio: var(--ab-hc-mobile-aspect, 375 / 560);
      height: auto;
    }
    .ab-hc__img--desktop { display: none; }
    .ab-hc__img--mobile  { display: block; }
    .ab-hc__arrow--side { display: none; }
    .ab-hc__arrow--bar  { display: flex; }
    .ab-hc__ui { bottom: 16px; gap: 12px; }
    .ab-hc__counter { min-width: 50px; font-size: 12px; }
  }
/* END_SECTION:ab-hero-carousel */

/* START_SECTION:ab-hero (INDEX:29) */
.ab-hero {
    position: relative;
    color: var(--color-foreground);
    background: var(--color-background);
  }

  /* layout from .page-width class on .ab-hero__inner */

  .ab-hero__box {
    padding-block-start: var(--ab-hero-pad-top-mb);
    padding-block-end: var(--ab-hero-pad-bottom-mb);
    padding-inline: var(--ab-hero-pad-inline-mb);
  }

  .ab-hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ab-hero-grid-gap);
    align-items: start;
  }

  @media screen and (min-width: 750px) {
    .ab-hero__box {
      padding-block-start: calc(var(--ab-hero-pad-top) * var(--ab-hero-scale, 1));
      padding-block-end: calc(var(--ab-hero-pad-bottom) * var(--ab-hero-scale, 1));
      padding-inline: calc(var(--ab-hero-pad-inline) * var(--ab-hero-scale, 1));
      min-height: calc(var(--ab-hero-min-height) * var(--ab-hero-scale, 1));
    }
    .ab-hero__grid {
      grid-template-columns: 1.15fr 1fr;
    }
  }

  .ab-hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  /* Kicker */
  .ab-hero__kicker {
    margin: 0 0 var(--ab-hero-kicker-margin);
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    font-family: var(--font-body--family);
    font-style: var(--ab-hero-kicker-style);
    font-weight: 700;
    font-size: calc(var(--ab-hero-kicker-size) * var(--ab-hero-scale, 1));
    letter-spacing: 0.24em;
    line-height: var(--ab-hero-kicker-lineheight);
    text-transform: uppercase;
    color: var(--ab-hero-kicker-color);
  }

  .ab-hero__kicker-line {
    display: inline-block;
    width: 2.4rem;
    height: 0.1rem;
    background: currentColor;
    flex-shrink: 0;
  }

  /* Headline — 3 stacked lines, italic span colored separately */
  .ab-hero__headline {
    margin: 0 0 var(--ab-hero-headline-margin);
    font-family: var(--font-body--family);
    font-style: var(--ab-hero-headline-style);
    font-weight: 800;
    font-size: var(--ab-hero-headline-size-mb);
    line-height: var(--ab-hero-headline-lineheight);
    letter-spacing: var(--ab-hero-headline-tracking);
    color: var(--ab-hero-headline-color);
  }

  @media screen and (min-width: 750px) {
    .ab-hero__headline {
      font-size: calc(var(--ab-hero-headline-size) * var(--ab-hero-scale, 1));
    }
  }

  .ab-hero__headline-italic {
    font-style: var(--ab-hero-headline-italic-style);
    font-weight: 500;
    color: var(--ab-hero-headline-italic-color);
  }

  /* Subheadline */
  .ab-hero__subheadline {
    margin: 0 0 var(--ab-hero-sub-margin);
    max-width: var(--ab-hero-sub-maxwidth);
    font-family: var(--font-body--family);
    font-style: var(--ab-hero-sub-style);
    font-weight: 400;
    font-size: calc(var(--ab-hero-sub-size) * var(--ab-hero-scale, 1));
    line-height: var(--ab-hero-sub-lineheight);
    color: var(--ab-hero-sub-color);
  }

  /* CTA */
  .ab-hero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-block-end: var(--ab-hero-cta-margin);
    padding: calc(var(--ab-hero-cta-pad-y) * var(--ab-hero-scale, 1)) calc(var(--ab-hero-cta-pad-x) * var(--ab-hero-scale, 1));
    font-family: var(--font-body--family);
    font-style: var(--ab-hero-cta-style);
    font-weight: 700;
    font-size: calc(var(--ab-hero-cta-size) * var(--ab-hero-scale, 1));
    letter-spacing: 0.16em;
    line-height: var(--ab-hero-cta-lineheight);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ab-hero-cta-text);
    background: var(--ab-hero-cta-bg);
    border: 1px solid var(--ab-hero-cta-bg);
    transition: opacity 150ms ease;
  }
  .ab-hero__cta:hover {
    opacity: 0.9;
  }

  /* Stats */
  .ab-hero__stats {
    margin: var(--ab-hero-stat-margin-top) 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 2.4rem var(--ab-hero-stat-gap);
    list-style: none;
  }

  .ab-hero__stat {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }

  .ab-hero__stat-value {
    margin: 0;
    font-family: var(--font-body--family);
    font-style: var(--ab-hero-stat-value-style);
    font-weight: 800;
    font-size: calc(var(--ab-hero-stat-value-size) * var(--ab-hero-scale, 1));
    letter-spacing: -0.02em;
    line-height: var(--ab-hero-stat-value-lineheight);
    color: var(--ab-hero-stat-value-color);
  }

  .ab-hero__stat-label {
    margin: 0;
    font-family: var(--font-body--family);
    font-style: var(--ab-hero-stat-label-style);
    font-weight: 600;
    font-size: calc(var(--ab-hero-stat-label-size) * var(--ab-hero-scale, 1));
    letter-spacing: 0.15em;
    line-height: var(--ab-hero-stat-label-lineheight);
    text-transform: uppercase;
    color: var(--ab-hero-stat-label-color);
  }

  /* ---------- Right column: featured card(s) ---------- */
  .ab-hero__media {
    position: relative;
    width: 100%;
    min-width: 0;
    aspect-ratio: 4 / 5;
    border: var(--ab-hero-card-border-width) solid var(--ab-hero-card-border-color);
    box-sizing: border-box;
  }

  .ab-hero__slider,
  .ab-hero__media .swiper {
    width: 100%;
    height: 100%;
  }

  .ab-hero__media .swiper-wrapper {
    width: 100%;
  }

  /* Parent overflow:visible only above the swiper — so the global badge (sibling of
     swiper, positioned at top:-40 right:-40 of .ab-hero__media) can overhang. The
     swiper itself reverts to its default overflow:hidden so slides stay neatly
     inside the bordered card. */
  .ab-hero,
  .ab-hero__inner,
  .ab-hero__box,
  .ab-hero__grid,
  .ab-hero__content,
  .ab-hero__media {
    overflow: visible;
  }

  .ab-hero__card {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background: rgb(var(--color-foreground-rgb) / var(--opacity-10));
  }

  .ab-hero__card.swiper-slide {
    width: 100%;
    flex-shrink: 0;
  }

  .ab-hero__card-link {
    display: block;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none;
  }

  .ab-hero__card-image,
  .ab-hero__card-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ab-hero__card-placeholder svg {
    width: 100%;
    height: 100%;
  }

  /* Global badge — sibling of swiper, positioned absolutely on .ab-hero__media.
     Position is hardcoded (-40 / -40 top-right). Size/font/padding/colors are
     per-section settings (size/font/padding) and per-block dynamic (bg/text colors
     update via JS on slide change). */
  .ab-hero__badge {
    position: absolute;
    top: calc(-40px * var(--ab-hero-scale, 1));
    right: calc(-40px * var(--ab-hero-scale, 1));
    width: calc(var(--ab-hero-badge-size) * var(--ab-hero-scale, 1));
    height: calc(var(--ab-hero-badge-size) * var(--ab-hero-scale, 1));
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: calc(var(--ab-hero-badge-padding) * var(--ab-hero-scale, 1));
    border-radius: 50%;
    font-family: var(--font-body--family);
    font-style: var(--ab-hero-badge-style);
    font-weight: 800;
    font-size: calc(var(--ab-hero-badge-fontsize) * var(--ab-hero-scale, 1));
    letter-spacing: 0.08em;
    line-height: var(--ab-hero-badge-lineheight);
    text-transform: uppercase;
    z-index: 3;
  }
  .ab-hero__badge[hidden] { display: none; }

  /* Full-width bottom bar */
  .ab-hero__card-bottom-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--ab-hero-bar-bottom);
    width: 100%;
    display: flex;
    align-items: center;
    padding: calc(var(--ab-hero-bar-pad-y) * var(--ab-hero-scale, 1)) calc(var(--ab-hero-bar-pad-x) * var(--ab-hero-scale, 1));
    background: var(--ab-hero-bar-bg);
    z-index: 2;
  }

  .ab-hero__card-bottom-bar__label {
    font-family: var(--font-body--family);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .ab-hero__card-bottom-bar__label--left {
    font-style: var(--ab-hero-bar-left-style);
    font-size: calc(var(--ab-hero-bar-left-size) * var(--ab-hero-scale, 1));
    line-height: var(--ab-hero-bar-left-lineheight);
    color: var(--ab-hero-bar-left-color);
  }

  .ab-hero__card-bottom-bar__label--right {
    margin-left: auto;
    font-style: var(--ab-hero-bar-right-style);
    font-size: calc(var(--ab-hero-bar-right-size) * var(--ab-hero-scale, 1));
    line-height: var(--ab-hero-bar-right-lineheight);
    color: var(--ab-hero-bar-right-color);
  }

  @media (prefers-reduced-motion: reduce) {
    .ab-hero__cta {
      transition: none;
    }
  }
/* END_SECTION:ab-hero */

/* START_SECTION:ab-image-text (INDEX:30) */
.ab-imt__cap { max-width: 1440px; margin-inline: auto; }
  .ab-imt__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ab-imt-grid-gap, 72px);
    align-items: center;
  }
  .ab-imt__grid--image-right { direction: rtl; }
  .ab-imt__grid--image-right > * { direction: ltr; }

  .ab-imt__media {
    position: relative;
    aspect-ratio: var(--ab-imt-image-aspect, 4 / 5);
    overflow: hidden;
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }
  .ab-imt__img,
  .ab-imt__img-placeholder {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  }

  .ab-imt__eyebrow {
    margin: 0 0 14px;
    font-family: var(--font-body--family);
    font-weight: 700;
    font-size: var(--ab-imt-eyebrow-size, 11px);
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--ab-imt-eyebrow-c, var(--color-primary));
  }
  .ab-imt__headline {
    margin: 0 0 20px;
    font-family: var(--font-body--family);
    font-weight: 800;
    font-size: var(--ab-imt-headline-size, 44px);
    letter-spacing: -1.2px;
    line-height: 1;
    color: var(--ab-imt-headline-c, var(--color-foreground));
  }
  .ab-imt__body {
    font-family: var(--font-body--family);
    font-size: var(--ab-imt-body-size, 16px);
    line-height: 1.7;
    color: var(--ab-imt-body-c, var(--color-foreground-muted));
  }
  .ab-imt__body p:first-child { margin-block-start: 0; }
  .ab-imt__body p:last-child { margin-block-end: 0; }

  .ab-imt__cta {
    display: inline-block;
    margin-block-start: 22px;
    padding: 16px 28px;
    font-family: var(--font-body--family);
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
  }

  @media screen and (max-width: 989px) {
    .ab-imt__grid { grid-template-columns: 1fr; gap: 32px; }
    .ab-imt__grid--image-right { direction: ltr; }
    .ab-imt__headline { font-size: 32px; }
  }
/* END_SECTION:ab-image-text */

/* START_SECTION:ab-list-collections (INDEX:31) */
.ab-lc {
    background: var(--color-background);
    font-family: var(--font-body--family);
    padding-block: var(--ab-lc-pad-top, 64px) var(--ab-lc-pad-bottom, 96px);
  }
  .ab-lc__cap {
    max-width: 1440px;
    margin-inline: auto;
    padding-inline: var(--ab-lc-pad-inline, 48px);
  }
  .ab-lc__grid {
    display: grid;
    gap: var(--ab-lc-gap, 24px);
  }

  .ab-lc__card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ab-lc-card-border-c, #e2e8f0);
    border-top-left-radius: var(--ab-lc-card-radius, 16px);
    border-top-right-radius: var(--ab-lc-card-radius, 16px);
    background: var(--ab-lc-card-bg, #ffffff);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
  }
  .ab-lc__card:hover {
    border-color: var(--ab-lc-card-border-hover-c, #0b1220);
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -18px rgb(11 18 32 / 0.25);
  }
  .ab-lc__card-img {
    aspect-ratio: 4 / 3;
    position: relative;
    overflow: hidden;
    border-top-left-radius: var(--ab-lc-card-radius, 16px);
    border-top-right-radius: var(--ab-lc-card-radius, 16px);
    background: rgb(15 23 42 / 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .ab-lc__card-img-real {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 350ms ease;
  }
  .ab-lc__card:hover .ab-lc__card-img-real { transform: scale(1.04); }
  .ab-lc__card-img-placeholder {
    width: 100%; height: 100%;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.18) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0.18) 75%, transparent 75%);
    background-size: 14px 14px;
    background-color: rgb(15 23 42 / 0.08);
  }
  .ab-lc__card-body {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-block-start: 1px solid var(--ab-lc-card-border-c, #e2e8f0);
  }
  .ab-lc__card-name {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--ab-lc-name-c, #0b1220);
    letter-spacing: -0.2px;
    line-height: 1.25;
  }
  .ab-lc__card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: var(--ab-lc-meta-c, #64748b);
    font-weight: 600;
  }
  .ab-lc__card-arrow {
    color: var(--ab-lc-arrow-c, #0891b2);
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    font-size: 10.5px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .ab-lc__card-arrow svg { transition: transform 200ms ease; }
  .ab-lc__card:hover .ab-lc__card-arrow svg { transform: translateX(3px); }

  @media screen and (max-width: 989px) {
    .ab-lc__grid { grid-template-columns: repeat(3, 1fr) !important; }
  }
  @media screen and (max-width: 760px) {
    .ab-lc { padding-block: var(--ab-lc-pad-top-m, 48px) var(--ab-lc-pad-bottom-m, 64px); }
    .ab-lc__cap { padding-inline: var(--ab-lc-pad-inline-m, 24px); }
    .ab-lc__grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px; }
  }
  @media screen and (max-width: 480px) {
    .ab-lc__grid { grid-template-columns: 1fr !important; }
  }
/* END_SECTION:ab-list-collections */

/* START_SECTION:ab-locations-map (INDEX:32) */
.ab-loc {
    position: relative;
  }

  .ab-loc__cap {
    max-width: 1440px;
    margin-inline: auto;
  }

  /* ---------- Map heading ---------- */
  .ab-loc__map-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 32px;
    margin-block-end: 24px;
  }

  .ab-loc__eyebrow {
    margin: 0 0 10px;
    font-family: var(--font-body--family);
    font-weight: 700;
    font-size: var(--ab-loc-eyebrow-size, 11px);
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--ab-loc-eyebrow-c, var(--color-primary));
  }

  .ab-loc__headline {
    margin: 0;
    font-family: var(--font-body--family);
    font-weight: 800;
    font-size: var(--ab-loc-headline-size, 42px);
    letter-spacing: -1.6px;
    line-height: 1.05;
    color: var(--ab-loc-headline-c, var(--color-foreground));
  }

  .ab-loc__desc {
    margin: 0;
    max-width: 380px;
    font-family: var(--font-body--family);
    font-size: var(--ab-loc-desc-size, 14px);
    line-height: 1.6;
    color: var(--ab-loc-desc-c, var(--color-foreground-muted));
  }

  /* ---------- Map ---------- */
  .ab-loc__map {
    position: relative;
    height: var(--ab-loc-map-h, 520px);
    border: 1px solid var(--ab-loc-map-border-c, var(--color-border));
    background: var(--ab-loc-map-bg, #e6efe9);
    overflow: hidden;
  }

  .ab-loc__map-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ab-loc__map-bg {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 18% 70%, #c4d6c8 0 22%, transparent 23%),
      radial-gradient(circle at 32% 40%, #cdddcf 0 28%, transparent 29%),
      radial-gradient(circle at 70% 55%, #c8d8cb 0 26%, transparent 27%),
      linear-gradient(135deg, #dde7df 0%, #d4dfd6 50%, #cad9cc 100%);
  }

  .ab-loc__map-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(to right, rgba(255, 255, 255, 0.35) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255, 255, 255, 0.35) 1px, transparent 1px);
    background-size: 60px 60px;
  }

  .ab-loc__map-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse at 100% 30%, #b5d2dc 0 18%, transparent 19%),
      radial-gradient(ellipse at 100% 80%, #b5d2dc 0 22%, transparent 23%);
  }

  .ab-loc__pin {
    position: absolute;
    transform: translate(-50%, -100%);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: 0;
    padding: 0;
    z-index: 2;
  }

  .ab-loc__pin-marker {
    width: 24px;
    height: 34px;
    background: var(--ab-loc-pin-c, var(--color-primary));
    clip-path: path('M12 0 C5 0 0 5 0 12 C0 22 12 34 12 34 C12 34 24 22 24 12 C24 5 19 0 12 0 Z');
    position: relative;
    box-shadow: 0 4px 10px rgb(8 145 178 / 0.35);
    transition: background 150ms ease, transform 150ms ease;
  }

  .ab-loc__pin-marker::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-background);
    transform: translateX(-50%);
  }

  .ab-loc__pin-lbl {
    font-family: var(--font-body--family);
    font-size: 10px;
    font-weight: 700;
    color: var(--color-foreground);
    letter-spacing: 0.4px;
    background: var(--color-background);
    padding: 2px 6px;
    border: 1px solid var(--color-border);
    white-space: nowrap;
  }

  .ab-loc__pin:hover .ab-loc__pin-marker {
    background: var(--ab-loc-pin-hover-c, #06B6D4);
  }

  .ab-loc__pin.is-highlight .ab-loc__pin-marker {
    background: var(--ab-loc-pin-highlight-c, #DC2626);
    box-shadow:
      0 0 0 6px rgb(220 38 38 / 0.2),
      0 4px 14px rgb(220 38 38 / 0.45);
    transform: scale(1.2);
    transform-origin: bottom;
  }

  .ab-loc__pin.is-highlight .ab-loc__pin-lbl {
    background: var(--ab-loc-pin-highlight-c, #DC2626);
    color: var(--color-background);
    border-color: var(--ab-loc-pin-highlight-c, #DC2626);
  }

  .ab-loc__pin.is-dim {
    opacity: 0.45;
  }

  /* "You are here" pulse */
  .ab-loc__you-pin {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: none;
    width: 16px;
    height: 16px;
    z-index: 3;
  }

  .ab-loc__you-pin::before,
  .ab-loc__you-pin::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
  }

  .ab-loc__you-pin::before {
    background: var(--ab-loc-pin-c, var(--color-primary));
    box-shadow: 0 0 0 3px var(--color-background);
  }

  .ab-loc__you-pin::after {
    background: var(--ab-loc-pin-c, var(--color-primary));
    opacity: 0.35;
    animation: ab-loc-pulse 1.6s ease-out infinite;
  }

  @keyframes ab-loc-pulse {
    0%   { transform: scale(1);   opacity: 0.5; }
    100% { transform: scale(3.2); opacity: 0;   }
  }

  .ab-loc__map-controls {
    position: absolute;
    left: 16px;
    bottom: 16px;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    z-index: 2;
  }

  .ab-loc__map-controls button {
    width: 36px;
    height: 36px;
    border: 0;
    background: var(--color-background);
    color: var(--color-foreground);
    font-size: 18px;
    font-weight: 700;
    border-block-end: 1px solid var(--color-border);
    cursor: pointer;
  }

  .ab-loc__map-controls button:last-child {
    border-block-end: 0;
  }

  .ab-loc__map-attr {
    position: absolute;
    right: 10px;
    bottom: 10px;
    font-size: 10px;
    color: var(--color-foreground-muted);
    background: rgb(255 255 255 / 0.75);
    padding: 3px 8px;
    letter-spacing: 0.4px;
    z-index: 2;
  }

  /* ---------- Leaflet (real map) ---------- */
  .ab-loc__map--leaflet {
    background: var(--color-background);
  }

  .ab-loc__leaflet {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .ab-loc__leaflet-icon {
    background: transparent !important;
    border: 0 !important;
  }

  .ab-loc__leaflet-marker {
    width: 24px;
    height: 34px;
    background: var(--ab-loc-pin-c, #0891B2);
    clip-path: path('M12 0 C5 0 0 5 0 12 C0 22 12 34 12 34 C12 34 24 22 24 12 C24 5 19 0 12 0 Z');
    box-shadow: 0 4px 10px rgb(8 145 178 / 0.4);
    position: relative;
    transition: background 150ms ease, transform 150ms ease;
  }

  .ab-loc__leaflet-marker::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-background);
    transform: translateX(-50%);
  }

  .ab-loc__leaflet-icon:hover .ab-loc__leaflet-marker {
    background: var(--ab-loc-pin-hover-c, #06B6D4);
  }

  .ab-loc__leaflet-icon.is-highlight .ab-loc__leaflet-marker {
    background: var(--ab-loc-pin-highlight-c, #DC2626);
    box-shadow:
      0 0 0 6px rgb(220 38 38 / 0.2),
      0 4px 14px rgb(220 38 38 / 0.45);
    transform: scale(1.25);
    transform-origin: 50% 100%;
  }

  .ab-loc__leaflet-icon.is-dim {
    opacity: 0.5;
  }

  .ab-loc__leaflet-you-icon {
    background: transparent !important;
    border: 0 !important;
  }

  .ab-loc__leaflet-you {
    width: 22px;
    height: 22px;
    position: relative;
  }

  .ab-loc__leaflet-you::before,
  .ab-loc__leaflet-you::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
  }

  .ab-loc__leaflet-you::before {
    background: var(--ab-loc-pin-c, #0891B2);
    box-shadow: 0 0 0 3px var(--color-background);
  }

  .ab-loc__leaflet-you::after {
    background: var(--ab-loc-pin-c, #0891B2);
    opacity: 0.4;
    animation: ab-loc-pulse 1.6s ease-out infinite;
  }

  /* Style Leaflet's popup to match brand */
  .leaflet-popup-content-wrapper {
    border-radius: 0 !important;
    background: var(--color-background) !important;
    color: var(--color-foreground) !important;
    box-shadow: 0 6px 24px rgb(0 0 0 / 0.15) !important;
    padding: 0 !important;
  }

  .leaflet-popup-content {
    margin: 14px 16px !important;
    font-family: var(--font-body--family) !important;
    font-size: 13px;
    line-height: 1.5;
  }

  .leaflet-popup-content strong {
    font-size: 14px;
    font-weight: 800;
    color: var(--color-foreground);
  }

  .ab-loc__leaflet-popup-link {
    display: inline-block;
    margin-block-start: 6px;
    color: var(--ab-loc-pin-c, var(--color-primary));
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1.2px;
    text-decoration: none;
    border-block-end: 1px solid currentColor;
  }

  .leaflet-popup-tip {
    background: var(--color-background) !important;
  }

  .leaflet-container {
    font-family: var(--font-body--family) !important;
    background: var(--color-background) !important;
  }

  .leaflet-control-attribution {
    font-size: 10px !important;
    background: rgb(255 255 255 / 0.85) !important;
  }

  /* ---------- Mapbox GL JS ---------- */
  .ab-loc__map--mapbox {
    background: var(--color-background);
  }

  .ab-loc__mapbox {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  /* Map color tuning — filter only on tile/canvas layer.
     Markers, popups, and controls remain unaffected because they're
     positioned overlays, not part of the canvas. */
  .ab-loc__mapbox .mapboxgl-canvas {
    filter:
      saturate(var(--ab-loc-map-saturate, 100%))
      contrast(var(--ab-loc-map-contrast, 100%))
      brightness(var(--ab-loc-map-brightness, 100%))
      hue-rotate(var(--ab-loc-map-hue, 0deg));
  }

  .ab-loc__leaflet .leaflet-tile-pane {
    filter:
      saturate(var(--ab-loc-map-saturate, 100%))
      contrast(var(--ab-loc-map-contrast, 100%))
      brightness(var(--ab-loc-map-brightness, 100%))
      hue-rotate(var(--ab-loc-map-hue, 0deg));
  }

  .ab-loc__map--faux .ab-loc__map-bg,
  .ab-loc__map--faux .ab-loc__map-img {
    filter:
      saturate(var(--ab-loc-map-saturate, 100%))
      contrast(var(--ab-loc-map-contrast, 100%))
      brightness(var(--ab-loc-map-brightness, 100%))
      hue-rotate(var(--ab-loc-map-hue, 0deg));
  }

  .ab-loc__mapbox-marker {
    width: 24px;
    height: 34px;
    background: var(--ab-loc-pin-c, #0891B2);
    clip-path: path('M12 0 C5 0 0 5 0 12 C0 22 12 34 12 34 C12 34 24 22 24 12 C24 5 19 0 12 0 Z');
    box-shadow: 0 4px 10px rgb(8 145 178 / 0.4);
    cursor: pointer;
    transition: background 150ms ease, transform 150ms ease;
    position: relative;
  }

  .ab-loc__mapbox-marker::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-background);
    transform: translateX(-50%);
  }

  .ab-loc__mapbox-marker:hover {
    background: var(--ab-loc-pin-hover-c, #06B6D4);
  }

  .ab-loc__mapbox-marker.is-highlight {
    background: var(--ab-loc-pin-highlight-c, #DC2626);
    box-shadow:
      0 0 0 6px rgb(220 38 38 / 0.2),
      0 4px 14px rgb(220 38 38 / 0.45);
    transform: scale(1.25);
    transform-origin: 50% 100%;
  }

  .ab-loc__mapbox-marker.is-dim {
    opacity: 0.5;
  }

  .ab-loc__mapbox-you {
    width: 22px;
    height: 22px;
    position: relative;
    pointer-events: none;
  }

  .ab-loc__mapbox-you::before,
  .ab-loc__mapbox-you::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
  }

  .ab-loc__mapbox-you::before {
    background: var(--ab-loc-pin-c, #0891B2);
    box-shadow: 0 0 0 3px var(--color-background);
  }

  .ab-loc__mapbox-you::after {
    background: var(--ab-loc-pin-c, #0891B2);
    opacity: 0.4;
    animation: ab-loc-pulse 1.6s ease-out infinite;
  }

  /* Mapbox popup styling — match brand */
  .mapboxgl-popup-content {
    border-radius: 0 !important;
    background: var(--color-background) !important;
    color: var(--color-foreground) !important;
    box-shadow: 0 6px 24px rgb(0 0 0 / 0.15) !important;
    padding: 14px 16px !important;
    font-family: var(--font-body--family) !important;
    font-size: 13px;
    line-height: 1.5;
  }

  .mapboxgl-popup-tip {
    border-top-color: var(--color-background) !important;
    border-bottom-color: var(--color-background) !important;
  }

  .mapboxgl-popup-close-button {
    font-size: 18px !important;
    padding: 4px 8px !important;
    color: var(--color-foreground-muted) !important;
  }

  .mapboxgl-ctrl-attrib {
    font-size: 10px !important;
  }

  /* ---------- Postcode search ---------- */
  .ab-loc__pcsearch {
    border: 2px solid var(--ab-loc-pcsearch-border-c, var(--color-foreground));
    background: var(--color-background);
    display: flex;
    align-items: stretch;
    margin-block-end: 18px;
  }

  .ab-loc__pcsearch-lbl {
    background: var(--ab-loc-pcsearch-lbl-bg, var(--color-foreground));
    color: var(--ab-loc-pcsearch-lbl-c, #67E8F9);
    padding: 0 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body--family);
    font-size: 11px;
    letter-spacing: 1.8px;
    font-weight: 700;
    text-transform: uppercase;
  }

  .ab-loc__pcsearch input {
    flex: 1;
    border: 0;
    outline: none;
    padding: 16px 18px;
    font-family: var(--font-body--family);
    font-size: 15px;
    color: var(--color-foreground);
    font-weight: 600;
    letter-spacing: 0.5px;
    background: transparent;
    min-width: 0;
  }

  .ab-loc__pcsearch input::placeholder {
    color: var(--color-foreground-muted);
    font-weight: 400;
    letter-spacing: 0;
  }

  .ab-loc__pcsearch-hint {
    display: flex;
    align-items: center;
    padding: 0 18px;
    font-size: 12px;
    color: var(--color-foreground-muted);
    border-inline-start: 1px solid var(--color-border);
  }

  .ab-loc__pcsearch-hint b {
    color: var(--color-primary);
    font-weight: 700;
    margin-inline-end: 6px;
  }

  .ab-loc__pcsearch-go {
    background: var(--ab-loc-pcsearch-go-bg, var(--color-primary));
    color: var(--ab-loc-pcsearch-go-c, var(--color-background));
    border: 0;
    padding: 0 26px;
    font-family: var(--font-body--family);
    font-size: 12px;
    letter-spacing: 1.6px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
  }

  .ab-loc__pcsearch-clr {
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    color: var(--color-foreground);
    border: 0;
    border-inline-start: 1px solid var(--color-border);
    padding: 0 16px;
    font-family: var(--font-body--family);
    font-size: 11px;
    letter-spacing: 1.4px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    display: none;
  }

  .ab-loc__pcsearch.is-result .ab-loc__pcsearch-clr {
    display: inline-flex;
    align-items: center;
  }

  .ab-loc__pcsearch-hint .ab-loc__err {
    color: var(--ab-loc-status-closed-c, #DC2626);
    font-weight: 700;
  }

  /* ---------- Stores head + filters ---------- */
  .ab-loc__stores-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-block-end: 18px;
    margin-block-end: 18px;
    gap: 24px;
    flex-wrap: wrap;
  }

  .ab-loc__stores-title {
    margin: 0;
    font-family: var(--font-body--family);
    font-weight: 800;
    font-size: var(--ab-loc-stores-h-size, 32px);
    letter-spacing: -1px;
    color: var(--ab-loc-stores-h-c, var(--color-foreground));
  }

  .ab-loc__stores-count {
    color: var(--ab-loc-stores-count-c, var(--color-primary));
  }

  .ab-loc__filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  .ab-loc__chip {
    background: var(--ab-loc-chip-bg, var(--color-background));
    color: var(--ab-loc-chip-c, var(--color-foreground));
    border: 1px solid var(--ab-loc-chip-border-c, var(--color-border));
    padding: 7px 12px;
    font-family: var(--font-body--family);
    font-size: 11px;
    letter-spacing: 1.2px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 150ms ease;
  }

  .ab-loc__chip.is-on {
    background: var(--ab-loc-chip-on-bg, var(--color-foreground));
    color: var(--ab-loc-chip-on-c, var(--color-background));
    border-color: var(--ab-loc-chip-on-bg, var(--color-foreground));
  }

  /* ---------- Stores grid ---------- */
  .ab-loc__stores-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .ab-loc__store {
    background: var(--ab-loc-card-bg, var(--color-background));
    border: 1px solid var(--ab-loc-card-border-c, var(--color-border));
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    transition: border-color 150ms ease, box-shadow 150ms ease, opacity 200ms ease, transform 150ms ease;
    position: relative;
    min-width: 0;
  }

  .ab-loc__store:hover {
    border-color: var(--ab-loc-pin-c, var(--color-primary));
    box-shadow: 0 4px 14px rgb(0 0 0 / 0.06);
  }

  .ab-loc__store:focus-visible {
    outline: 2px solid var(--ab-loc-pin-c, var(--color-primary));
    outline-offset: 2px;
  }

  .ab-loc__store.is-hidden {
    display: none;
  }

  .ab-loc__store.is-dim {
    opacity: 0.55;
  }

  .ab-loc__store.is-nearest {
    border-color: var(--ab-loc-nearest-c, var(--color-primary));
    box-shadow: 0 0 0 2px var(--ab-loc-nearest-c, var(--color-primary));
    grid-column: 1 / -1;
    grid-template-columns: 220px minmax(0, 1fr);
    order: -1;
  }

  /* Tone fallback gradients (when no image uploaded) */
  .ab-loc__store-img.tone-warm  { background: repeating-linear-gradient(135deg, #e0f2fe 0 14px, #bae6fd 14px 28px); }
  .ab-loc__store-img.tone-deep  { background: repeating-linear-gradient(135deg, #caa876 0 14px, #bd9a65 14px 28px); }
  .ab-loc__store-img.tone-terra { background: repeating-linear-gradient(135deg, #c7846b 0 14px, #bb7860 14px 28px); }
  .ab-loc__store-img.tone-teal  { background: repeating-linear-gradient(135deg, #7a9a92 0 14px, #6e8e86 14px 28px); }
  .ab-loc__store-img.tone-navy  { background: repeating-linear-gradient(135deg, #2e3b4c 0 14px, #34445a 14px 28px); }
  .ab-loc__store-img.tone-cream { background: repeating-linear-gradient(135deg, #f1f5f9 0 14px, #e2e8f0 14px 28px); }
  .ab-loc__store-img.tone-ink   { background: repeating-linear-gradient(135deg, #1b1613 0 14px, #221c18 14px 28px); }

  .ab-loc__store-img {
    position: relative;
    overflow: hidden;
    min-width: 0;
  }

  .ab-loc__store-img-real {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ab-loc__store-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--ab-loc-pin-c, var(--color-primary));
    color: var(--color-background);
    padding: 4px 7px;
    font-family: var(--font-body--family);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
  }

  .ab-loc__store-badge--new       { background: #10B981; }
  .ab-loc__store-badge--signature { background: #DC2626; }

  .ab-loc__store-distance {
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    background: var(--color-background);
    color: var(--color-foreground);
    padding: 5px 8px;
    font-family: var(--font-body--family);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
    display: none;
    align-items: center;
    gap: 6px;
  }

  .ab-loc__store-distance b {
    color: var(--ab-loc-pin-c, var(--color-primary));
    font-weight: 800;
  }

  .ab-loc__store.has-distance .ab-loc__store-distance {
    display: flex;
  }

  .ab-loc__store-nearest-tag {
    position: absolute;
    top: -1px;
    right: -1px;
    background: var(--ab-loc-nearest-c, var(--color-primary));
    color: var(--color-background);
    padding: 5px 10px;
    font-family: var(--font-body--family);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    display: none;
    z-index: 2;
  }

  .ab-loc__store.is-nearest .ab-loc__store-nearest-tag {
    display: block;
  }

  .ab-loc__store-body {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
  }

  .ab-loc__store.is-nearest .ab-loc__store-body {
    padding: 18px 22px;
  }

  .ab-loc__store-no {
    margin: 0;
    font-family: var(--font-body--family);
    font-size: 10px;
    letter-spacing: 1.8px;
    color: var(--ab-loc-card-no-c, var(--color-primary));
    font-weight: 700;
    text-transform: uppercase;
  }

  .ab-loc__store-name {
    margin: 0;
    font-family: var(--font-body--family);
    font-weight: 800;
    font-size: 18px;
    letter-spacing: -0.4px;
    color: var(--ab-loc-card-name-c, var(--color-foreground));
    line-height: 1.15;
  }

  .ab-loc__store.is-nearest .ab-loc__store-name {
    font-size: 22px;
  }

  .ab-loc__store-addr {
    margin: 2px 0 0;
    font-family: var(--font-body--family);
    font-size: 12px;
    color: var(--ab-loc-card-addr-c, var(--color-foreground-muted));
    line-height: 1.5;
  }

  .ab-loc__store-addr strong {
    color: var(--ab-loc-card-name-c, var(--color-foreground));
    font-weight: 600;
  }

  .ab-loc__store-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-block-start: auto;
    padding-block-start: 10px;
    border-block-start: 1px solid var(--color-border);
    flex-wrap: wrap;
  }

  .ab-loc__store-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body--family);
    font-size: 11px;
    font-weight: 700;
    color: var(--ab-loc-status-open-c, #10B981);
    letter-spacing: 0.2px;
  }

  .ab-loc__store-status.is-closed {
    color: var(--ab-loc-status-closed-c, #DC2626);
  }

  .ab-loc__store-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
  }

  .ab-loc__store-links {
    display: flex;
    gap: 14px;
    font-family: var(--font-body--family);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
  }

  .ab-loc__store-link {
    color: var(--ab-loc-card-link-c, var(--color-foreground));
    border-block-end: 1px solid currentColor;
    padding-block-end: 1px;
    text-decoration: none;
    cursor: pointer;
  }

  .ab-loc__store-link.is-accent {
    color: var(--ab-loc-card-link-accent-c, var(--color-primary));
  }

  /* ---------- Responsive ---------- */
  @media screen and (max-width: 880px) {
    .ab-loc__map-head {
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
    }
    .ab-loc__headline { font-size: 30px; }
    .ab-loc__map { height: 340px; }
    .ab-loc__pin-lbl { display: none; }

    .ab-loc__stores-head {
      flex-direction: column;
      align-items: flex-start;
      gap: 14px;
    }
    .ab-loc__stores-title { font-size: 24px; }
    .ab-loc__stores-grid { grid-template-columns: 1fr; }
    .ab-loc__store { grid-template-columns: 110px minmax(0, 1fr); }
    .ab-loc__store.is-nearest { grid-template-columns: 140px minmax(0, 1fr); }
    .ab-loc__store-body { padding: 14px; }
    .ab-loc__store-name { font-size: 16px; }
    .ab-loc__store.is-nearest .ab-loc__store-name { font-size: 18px; }

    .ab-loc__pcsearch {
      flex-wrap: wrap;
    }
    .ab-loc__pcsearch-lbl {
      padding: 12px 14px;
      width: 100%;
      justify-content: flex-start;
    }
    .ab-loc__pcsearch input {
      padding: 12px 14px;
      font-size: 14px;
      width: 100%;
    }
    .ab-loc__pcsearch-hint { display: none; }
    .ab-loc__pcsearch-go { padding: 12px 18px; flex: 1; }
  }

  @media screen and (max-width: 480px) {
    .ab-loc__headline { font-size: 24px; }
  }
/* END_SECTION:ab-locations-map */

/* START_SECTION:ab-mobile-menu (INDEX:33) */
.ab-mm {
    position: fixed;
    inset: 0;
    z-index: 200;
    pointer-events: none;
    overflow: hidden;
    background: transparent !important;
  }
  .ab-mm:not([hidden]) { pointer-events: auto; }
  .ab-mm[hidden] { display: block; visibility: hidden; }
  .ab-mm[hidden] .ab-mm__drawer { transform: translateX(100%); }
  .ab-mm[hidden] .ab-mm__backdrop { opacity: 0; }

  .ab-mm__backdrop {
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 0.4);
    border: 0;
    cursor: pointer;
    transition: opacity 250ms ease;
  }

  .ab-mm__drawer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, 100vw);
    background: var(--ab-mm-bg, var(--color-background));
    color: var(--ab-mm-text-c, var(--color-foreground));
    display: flex;
    flex-direction: column;
    transform: translateX(0);
    transition: transform 300ms cubic-bezier(0.4, 0.1, 0.2, 1);
    overflow: hidden;
  }

  .ab-mm__head {
    padding: 18px 18px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-block-end: 1px solid var(--ab-mm-line-c, var(--color-border));
    flex-shrink: 0;
  }
  .ab-mm__head-eyebrow {
    margin: 0;
    font-family: var(--font-body--family);
    font-size: 9px;
    letter-spacing: 2px;
    color: var(--ab-mm-eyebrow-c, var(--color-primary));
    font-weight: 700;
  }
  .ab-mm__head-name {
    margin: 2px 0 0;
    font-family: var(--font-body--family);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.3px;
    color: var(--ab-mm-text-c, var(--color-foreground));
  }
  .ab-mm__head-logo {
    display: block;
    max-width: 100%;
  }
  .ab-mm__close {
    width: 36px; height: 36px;
    border: 1px solid var(--color-border);
    background: var(--color-background);
    color: var(--ab-mm-text-c, var(--color-foreground));
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
  }

  .ab-mm__search {
    padding: 14px 18px;
    background: var(--ab-mm-search-bg, #F8FAFC);
    border-block-end: 1px solid var(--ab-mm-line-c, var(--color-border));
    flex-shrink: 0;
  }
  .ab-mm__search-bar {
    background: var(--color-background);
    border: 1px solid var(--color-border);
    padding: 11px 13px;
    display: flex; align-items: center; gap: 10px;
  }
  .ab-mm__search-bar svg { color: var(--color-foreground-muted); flex-shrink: 0; }
  .ab-mm__search-input {
    flex: 1; border: 0; outline: none;
    font-family: var(--font-body--family);
    font-size: 13px;
    color: var(--color-foreground);
    background: transparent;
  }
  .ab-mm__search-input:focus,
  .ab-mm__search-input:focus-visible { outline: 0; box-shadow: none; }
  .ab-mm__search-chips {
    display: flex; gap: 6px; margin-block-start: 10px; flex-wrap: wrap;
  }
  .ab-mm__search-chips span {
    font-family: var(--font-body--family);
    font-size: 9.5px;
    letter-spacing: 0.4px;
    color: var(--color-primary);
    font-weight: 700;
    padding: 4px 8px;
    background: var(--color-background);
    border: 1px solid var(--color-border);
  }

  .ab-mm__scroll { flex: 1; overflow: auto; }

  .ab-mm__section-h {
    margin: 0;
    padding: 18px 18px 8px;
    font-family: var(--font-body--family);
    font-size: 9px;
    letter-spacing: 2px;
    color: var(--ab-mm-eyebrow-c, var(--color-primary));
    font-weight: 700;
    text-transform: uppercase;
  }
  .ab-mm__section-h .count { color: var(--color-foreground-muted); font-weight: 600; letter-spacing: 1px; }

  .ab-mm__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-block-end: 1px solid var(--ab-mm-line-c, var(--color-border));
    cursor: pointer;
    background: var(--color-background);
    color: inherit;
    text-decoration: none;
  }
  .ab-mm__row-title {
    margin: 0;
    font-family: var(--font-body--family);
    font-size: 14px; font-weight: 700;
    color: var(--ab-mm-text-c, var(--color-foreground));
    letter-spacing: -0.2px;
  }
  .ab-mm__row-sub {
    margin: 2px 0 0;
    font-family: var(--font-body--family);
    font-size: 10.5px;
    color: var(--color-foreground-muted);
    line-height: 1.35;
  }
  .ab-mm__row-right { display: flex; align-items: center; gap: 10px; }
  .ab-mm__row-count {
    font-family: var(--font-body--family);
    font-size: 10px;
    color: var(--ab-mm-eyebrow-c, var(--color-primary));
    font-weight: 700;
  }
  .ab-mm__row-chev {
    width: 9px; height: 9px;
    border-right: 1.5px solid var(--color-foreground-muted);
    border-bottom: 1.5px solid var(--color-foreground-muted);
    transform: rotate(-45deg);
    transition: transform 200ms ease;
  }
  .ab-mm__row-chev--right { transform: rotate(-45deg); }
  .ab-mm__row.is-open .ab-mm__row-chev { transform: rotate(45deg); }

  .ab-mm__sub {
    background: var(--ab-mm-search-bg, #F8FAFC);
    border-block-end: 1px solid var(--ab-mm-line-c, var(--color-border));
    max-height: 0;
    overflow: hidden;
    transition: max-height 350ms ease;
  }
  .ab-mm__sub.is-open { max-height: 1200px; }
  .ab-mm__sub-inner { padding: 14px 18px 18px; }
  .ab-mm__sub-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .ab-mm__col-card {
    background: var(--color-background);
    border: 1px solid var(--ab-mm-card-border-c, var(--color-border));
    text-decoration: none;
    color: inherit;
    display: flex; flex-direction: column;
  }
  .ab-mm__col-img { aspect-ratio: 1 / 1; overflow: hidden; border-top-left-radius: 12px; border-top-right-radius: 12px; background: rgb(var(--color-foreground-rgb) / var(--opacity-5)); }
  .ab-mm__col-img-real,
  .ab-mm__col-img-placeholder { width: 100%; height: 100%; object-fit: cover; }
  .ab-mm__col-body {
    padding: 8px 10px 10px;
    display: flex; flex-direction: column; gap: 4px;
  }
  .ab-mm__col-name {
    font-family: var(--font-body--family);
    font-size: 11.5px; font-weight: 700;
    color: var(--ab-mm-text-c, var(--color-foreground));
    line-height: 1.2;
  }
  .ab-mm__col-meta {
    display: flex; justify-content: space-between; align-items: center; gap: 6px;
  }
  .ab-mm__col-count {
    font-family: var(--font-body--family);
    font-size: 9.5px;
    color: var(--color-foreground-muted);
    font-weight: 600;
  }
  .ab-mm__col-shop {
    font-family: var(--font-body--family);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #0891B2;
  }
  .ab-mm__sub-foot {
    margin-block-start: 12px;
    padding-block-start: 10px;
    border-block-start: 1px solid var(--ab-mm-line-c, var(--color-border));
  }
  .ab-mm__sub-foot a {
    font-family: var(--font-body--family);
    font-size: 11px;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: 1.2px;
    text-transform: uppercase;
    text-decoration: none;
  }

  .ab-mm__account {
    padding: 18px;
    border-block-start: 6px solid var(--ab-mm-search-bg, #F8FAFC);
  }
  .ab-mm__account-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .ab-mm__account-btn {
    padding: 12px;
    font-family: var(--font-body--family);
    font-size: 11px;
    letter-spacing: 1.4px;
    font-weight: 800;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
  }
  .ab-mm__account-btn--primary {
    background: var(--ab-mm-account-btn-bg, var(--color-foreground));
    color: var(--ab-mm-account-btn-c, var(--color-background));
    border: 0;
  }
  .ab-mm__account-btn--outline {
    background: transparent;
    color: var(--ab-mm-text-c, var(--color-foreground));
    border: 1.5px solid var(--ab-mm-text-c, var(--color-foreground));
  }
  .ab-mm__account-links {
    display: flex; justify-content: space-between;
    margin-block-start: 14px; padding-block-start: 12px;
    border-block-start: 1px solid var(--ab-mm-line-c, var(--color-border));
    font-family: var(--font-body--family);
    font-size: 11px; font-weight: 600;
    color: var(--color-foreground-muted);
  }
  .ab-mm__account-links a { color: inherit; text-decoration: none; }

  .ab-mm__trust {
    background: var(--ab-mm-trust-bg, #F0F9FF);
    padding: 12px 14px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    border-block-start: 1px solid var(--ab-mm-line-c, var(--color-border));
  }
  .ab-mm__trust-item {
    display: flex; flex-direction: column; align-items: center;
    gap: 5px; text-align: center;
    font-family: var(--font-body--family);
    font-size: 8.8px; letter-spacing: 0.2px; font-weight: 700;
    color: var(--ab-mm-trust-c, #0C4A6E);
    line-height: 1.2;
  }
  .ab-mm__trust-icon { color: var(--ab-mm-trust-icon-c, var(--color-primary)); }

  .ab-mm__foot {
    background: var(--ab-mm-foot-bg, #0B1220);
    color: var(--ab-mm-foot-c, #FFFFFF);
    padding: 18px 18px 26px;
  }
  .ab-mm__foot-row { display: flex; justify-content: space-between; align-items: center; margin-block-end: 14px; }
  .ab-mm__foot-label {
    font-family: var(--font-body--family);
    font-size: 9px; letter-spacing: 2px;
    color: var(--color-primary);
    font-weight: 700;
    text-transform: uppercase;
  }
  .ab-mm__foot-tag {
    font-family: var(--font-body--family);
    font-size: 9.5px;
    color: rgb(255 255 255 / 0.55);
    font-weight: 600;
    letter-spacing: 0.4px;
  }
  /* Center whatever number of social icons the merchant configures.
     Using flex so 2 items sit centered instead of left-aligned into a
     4-col grid; still supports adding more later without CSS changes. */
  .ab-mm__foot-socials {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
  }
  .ab-mm__foot-socials a { flex: 0 0 auto; min-width: 68px; }
  .ab-mm__foot-socials a {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 5px; padding: 11px 4px;
    border: 1px solid rgb(255 255 255 / 0.12);
    background: rgb(255 255 255 / 0.04);
    color: #FFFFFF;
    text-decoration: none;
    font-family: var(--font-body--family);
    font-weight: 700;
  }
  .ab-mm__foot-socials a > span:first-child { font-size: 14px; }
  .ab-mm__foot-socials a .lbl { font-size: 8.5px; letter-spacing: 1px; color: rgb(255 255 255 / 0.7); }
  .ab-mm__foot-addr {
    font-family: var(--font-body--family);
    font-size: 10px;
    color: rgb(255 255 255 / 0.55);
    margin-block-start: 16px;
    padding-block-start: 14px;
    border-block-start: 1px solid rgb(255 255 255 / 0.1);
    text-align: center; line-height: 1.5;
  }
/* END_SECTION:ab-mobile-menu */

/* START_SECTION:ab-mobile-tabbar (INDEX:34) */
.ab-tb {
    display: none;
  }

  /* Show on mobile only (≤ 749px breakpoint matches Ella's mobile range) */
  @media screen and (max-width: 749px) {
    .ab-tb {
      display: block;
      position: fixed;
      left: 0; right: 0; bottom: 0;
      background: var(--ab-tb-bg, var(--color-background));
      border-block-start: 1px solid var(--ab-tb-border-c, var(--color-border));
      z-index: 90;
      padding-block-end: env(safe-area-inset-bottom, 0);
      box-shadow: 0 -4px 16px rgb(0 0 0 / 0.06);
    }

    /* Push page content up so the tab bar doesn't overlap the bottom of the page.
       Use an extra-tall padding on body when the tab bar is present. */
    body { padding-block-end: var(--ab-tb-h, 64px); }
  }

  .ab-tb__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    height: var(--ab-tb-h, 64px);
  }

  .ab-tb__item {
    display: flex;
    align-items: stretch;
    min-width: 0;
  }

  .ab-tb__link {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 4px;
    color: var(--ab-tb-c, var(--color-foreground));
    background: transparent;
    border: 0;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    transition: color 150ms ease;
    font-family: var(--font-body--family);
  }

  .ab-tb__link:hover,
  .ab-tb__link.is-active {
    color: var(--ab-tb-active-c, var(--color-primary));
  }

  .ab-tb__link.is-active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 22%;
    right: 22%;
    height: 2px;
    background: currentColor;
  }

  .ab-tb__icon {
    display: inline-flex;
    line-height: 0;
    position: relative;
  }

  .ab-tb__badge {
    position: absolute;
    top: -6px;
    right: 22%;
    background: var(--ab-tb-badge-bg, var(--color-primary));
    color: var(--ab-tb-badge-c, #FFFFFF);
    font-size: 10px;
    font-weight: 800;
    min-width: 17px;
    height: 17px;
    padding-inline: 5px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }

  .ab-tb__label {
    font-size: var(--ab-tb-label-size, 10px);
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    line-height: 1;
  }
/* END_SECTION:ab-mobile-tabbar */

/* START_SECTION:ab-newsletter (INDEX:35) */
.ab-nl {
    position: relative;
    overflow: hidden;
    text-align: center;
    color: var(--ab-nl-text-c, #FFFFFF);
  }

  .ab-nl__pattern {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M0 40 L40 0 L80 40 L40 80 Z' fill='none' stroke='%23ffffff' stroke-width='1.2' opacity='0.4'/%3E%3Cpath d='M20 40 L40 20 L60 40 L40 60 Z' fill='none' stroke='%23ffffff' stroke-width='1' opacity='0.25'/%3E%3Ccircle cx='40' cy='40' r='2' fill='%23ffffff' opacity='0.5'/%3E%3C/svg%3E");
    background-size: 80px 80px;
  }

  .ab-nl__cap {
    position: relative;
    max-width: 1440px;
    margin-inline: auto;
    padding-inline: var(--ab-nl-pad-inline, 48px);
  }

  .ab-nl__eyebrow {
    margin: 0 0 14px;
    font-family: var(--font-body--family);
    font-weight: 700;
    font-size: var(--ab-nl-eyebrow-size, 11px);
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--ab-nl-eyebrow-c, #67E8F9);
  }

  .ab-nl__headline {
    margin: 0 0 14px;
    font-family: var(--font-body--family);
    font-weight: 800;
    font-size: var(--ab-nl-headline-size, 64px);
    letter-spacing: -2px;
    line-height: 0.95;
    color: var(--ab-nl-headline-c, #FFFFFF);
  }

  .ab-nl__headline-accent {
    color: var(--ab-nl-headline-accent-c, #67E8F9);
  }

  .ab-nl__body {
    max-width: 540px;
    margin: 0 auto 32px;
    font-family: var(--font-body--family);
    font-size: var(--ab-nl-body-size, 16px);
    line-height: 1.55;
    color: var(--ab-nl-body-c, #FFFFFF);
    opacity: 0.92;
  }

  .ab-nl__form {
    max-width: var(--ab-nl-form-maxw, 480px);
    margin: 0 auto;
  }

  .ab-nl__step--email,
  .ab-nl__phone-row {
    display: flex;
    background: var(--ab-nl-form-bg, #FFFFFF);
    padding: var(--ab-nl-form-pad, 5px);
    border-radius: var(--ab-nl-form-radius, 0px);
  }

  .ab-nl__input {
    flex: 1;
    border: none;
    padding: var(--ab-nl-input-pad, 14px) 18px;
    background: transparent;
    font-family: var(--font-body--family);
    font-size: var(--ab-nl-input-size, 14px);
    color: var(--ab-nl-input-c, #0B1220);
    outline: none;
    min-width: 0;
  }

  .ab-nl__btn {
    background: var(--ab-nl-btn-bg, #0B1220);
    color: var(--ab-nl-btn-c, #FFFFFF);
    border: none;
    padding: 0 26px;
    font-family: var(--font-body--family);
    font-size: var(--ab-nl-btn-size, 12px);
    letter-spacing: 1.8px;
    text-transform: uppercase;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 150ms ease;
    flex-shrink: 0;
  }

  .ab-nl__btn:hover { opacity: 0.92; }

  .ab-nl__step--phone {
    margin-block-start: 16px;
    text-align: center;
  }

  .ab-nl__step-heading {
    margin: 0 0 6px;
    font-family: var(--font-body--family);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--ab-nl-headline-c, #FFFFFF);
  }

  .ab-nl__step-body {
    margin: 0 0 14px;
    font-family: var(--font-body--family);
    font-size: 13px;
    line-height: 1.5;
    color: var(--ab-nl-body-c, #FFFFFF);
    opacity: 0.85;
  }

  .ab-nl__consent {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-block-start: 12px;
    font-family: var(--font-body--family);
    font-size: 12px;
    color: var(--ab-nl-body-c, #FFFFFF);
    opacity: 0.85;
    text-align: left;
  }

  .ab-nl__consent input {
    margin: 0;
    flex-shrink: 0;
  }

  .ab-nl__footnote {
    margin: 14px 0 0;
    font-family: var(--font-body--family);
    font-size: var(--ab-nl-footnote-size, 11px);
    color: var(--ab-nl-footnote-c, #FFFFFF);
    opacity: 0.75;
    letter-spacing: 0.5px;
  }

  .ab-nl__success {
    background: var(--ab-nl-form-bg, #FFFFFF);
    color: var(--ab-nl-success-c, #16A34A);
    padding: 18px 22px;
    border-radius: var(--ab-nl-form-radius, 0px);
    font-family: var(--font-body--family);
    font-size: 14px;
    font-weight: 600;
    max-width: var(--ab-nl-form-maxw, 480px);
    margin: 0 auto;
  }

  .ab-nl__errors {
    background: var(--ab-nl-form-bg, #FFFFFF);
    color: var(--ab-nl-error-c, #DC2626);
    padding: 12px 18px;
    border-radius: var(--ab-nl-form-radius, 0px);
    font-family: var(--font-body--family);
    font-size: 13px;
    margin: 0 auto 12px;
    max-width: var(--ab-nl-form-maxw, 480px);
    text-align: left;
  }

  @media screen and (max-width: 749px) {
    .ab-nl__headline { font-size: 40px; letter-spacing: -1.2px; }
    .ab-nl__step--email,
    .ab-nl__phone-row {
      flex-direction: column;
      gap: 8px;
    }
    .ab-nl__input { padding: 14px; }
    .ab-nl__btn { padding: 14px; }
  }
/* END_SECTION:ab-newsletter */

/* START_SECTION:ab-page-hero (INDEX:36) */
.ab-pgh {
    position: relative;
  }

  .ab-pgh__crumbs {
    background: var(--color-background);
    border-block-end: 1px solid var(--color-border);
  }

  .ab-pgh__crumbs-cap {
    max-width: 1440px;
    margin-inline: auto;
    padding: var(--ab-pgh-crumbs-pt, 16px) var(--ab-pgh-crumbs-pr, 0) var(--ab-pgh-crumbs-pb, 16px) var(--ab-pgh-crumbs-pl, 0);
    font-family: var(--font-body--family);
    font-size: var(--ab-pgh-crumbs-size, 11px);
    letter-spacing: 1.6px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ab-pgh-crumbs-c, var(--color-foreground-muted));
  }

  .ab-pgh__crumbs-cap a {
    color: inherit;
    text-decoration: none;
  }

  .ab-pgh__crumbs-cap a:hover {
    color: var(--ab-pgh-crumbs-active-c, var(--color-foreground));
  }

  .ab-pgh__crumb-active {
    color: var(--ab-pgh-crumbs-active-c, var(--color-foreground));
  }

  .ab-pgh__crumbs-sep {
    margin-inline: 10px;
    opacity: 0.5;
  }

  .ab-pgh__hero {
    position: relative;
    overflow: hidden;
    padding-inline: var(--ab-pgh-pad-inline, 48px);
  }

  .ab-pgh__pattern {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M0 40 L40 0 L80 40 L40 80 Z' fill='none' stroke='%2367e8f9' stroke-width='1.2' opacity='0.4'/%3E%3Cpath d='M20 40 L40 20 L60 40 L40 60 Z' fill='none' stroke='%23ffffff' stroke-width='1' opacity='0.25'/%3E%3Ccircle cx='40' cy='40' r='2' fill='%2367e8f9' opacity='0.5'/%3E%3C/svg%3E");
    background-size: 80px 80px;
  }

  .ab-pgh__cap {
    position: relative;
    max-width: 1440px;
    margin-inline: auto;
  }

  .ab-pgh__row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
  }

  .ab-pgh__eyebrow {
    margin: 0 0 10px;
    font-family: var(--font-body--family);
    font-weight: 700;
    font-size: var(--ab-pgh-eyebrow-size, 11px);
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--ab-pgh-eyebrow-c, #67E8F9);
  }

  .ab-pgh__headline {
    margin: 0;
    font-family: var(--font-body--family);
    font-weight: 800;
    font-size: var(--ab-pgh-headline-size, 64px);
    letter-spacing: var(--ab-pgh-headline-ls, -2px);
    line-height: 0.84;
    text-transform: uppercase;
    color: var(--ab-pgh-headline-c, #FFFFFF);
    display: flex;
    flex-direction: column;
  }

  .ab-pgh__h-line {
    display: block;
  }

  .ab-pgh__h-line--accent {
    color: var(--ab-pgh-headline-accent-c, #06B6D4);
  }

  .ab-pgh__blurb {
    margin: 0;
    padding-block-end: 14px;
    font-family: var(--font-body--family);
    font-size: var(--ab-pgh-blurb-size, 15px);
    line-height: 1.65;
    color: var(--ab-pgh-blurb-c, #cbd5e1);
    max-width: var(--ab-pgh-blurb-maxw, 380px);
  }

  @media screen and (max-width: 880px) {
    .ab-pgh__hero { padding-inline: var(--ab-pgh-pad-inline-m, 24px); }
    .ab-pgh__row {
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;
    }
    .ab-pgh__headline {
      font-size: var(--ab-pgh-headline-size-m, 46px);
      letter-spacing: var(--ab-pgh-headline-ls-m, -1.5px);
    }
    .ab-pgh__blurb {
      padding-block-end: 0;
    }
  }
/* END_SECTION:ab-page-hero */

/* START_SECTION:ab-pdp-main (INDEX:37) */
.ab-pdp {
    position: relative;
  }

  .ab-pdp__cap {
    max-width: 1440px;
    margin-inline: auto;
  }

  .ab-pdp__crumbs {
    padding: var(--ab-pdp-crumbs-pt, 16px) var(--ab-pdp-crumbs-pr, 0) var(--ab-pdp-crumbs-pb, 16px) var(--ab-pdp-crumbs-pl, 0);
    font-family: var(--font-body--family);
    font-size: var(--ab-pdp-crumbs-size, 11px);
    letter-spacing: 1.6px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--color-foreground-muted);
    border-block-end: 1px solid var(--ab-pdp-line-c, var(--color-border));
  }
  .ab-pdp__crumbs a { color: inherit; text-decoration: none; }
  .ab-pdp__crumbs a:hover { color: var(--color-foreground); }
  .ab-pdp__crumbs-sep { margin-inline: 10px; opacity: 0.5; }
  .ab-pdp__crumbs-active { color: var(--color-foreground); }

  .ab-pdp__layout {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    align-items: stretch;
  }

  /* Gallery cell — stretches the full row height so the bg + kilim pattern
     keep painting behind the empty space below the sticky inner whenever the
     info column is taller (e.g. an accordion is open). The visible gallery
     content lives inside .ab-pdp__gallery-inner which is the sticky layer. */
  .ab-pdp__gallery {
    position: relative;
    background: var(--ab-pdp-gallery-bg, #f1f5f9);
    min-width: 0;
  }
  .ab-pdp__gallery-inner {
    position: relative;
    padding: 24px;
    overflow: hidden;
    min-width: 0;
  }
  /* Sticky gallery on desktop — only the inner sticks; the parent cell
     stretches naturally inside the grid row, so its bg fills the gap below.
     max-height caps the sticky layer to viewport so tall images don't
     spill off-screen while sticking. */
  @media screen and (min-width: 761px) {
    .ab-pdp__gallery-inner {
      position: sticky;
      top: 0;
      max-height: 100vh;
    }
  }
  .ab-pdp__gallery-badge {
    position: absolute;
    top: 36px;
    left: 36px;
    z-index: 3;
    background: #DC2626;
    color: #FFFFFF;
    font-family: var(--font-body--family);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 999px;
  }
  .ab-pdp__gallery-badge[hidden] { display: none; }
  @media screen and (max-width: 760px) {
    .ab-pdp__gallery-badge { top: 12px; left: 12px; }
  }

  .ab-pdp__gallery-pattern {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: var(--ab-pdp-gallery-pattern-opacity, 0.22);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M0 40 L40 0 L80 40 L40 80 Z' fill='none' stroke='%2367e8f9' stroke-width='1.2' opacity='0.4'/%3E%3Cpath d='M20 40 L40 20 L60 40 L40 60 Z' fill='none' stroke='%23ffffff' stroke-width='1' opacity='0.25'/%3E%3Ccircle cx='40' cy='40' r='2' fill='%2367e8f9' opacity='0.5'/%3E%3C/svg%3E");
    background-size: 80px 80px;
  }
  .ab-pdp__gallery-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ab-pdp-gallery-gap, 10px);
  }
  .ab-pdp__gallery-cell {
    position: relative;
    overflow: hidden;
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }
  .ab-pdp__gallery-cell--1 { grid-column: span 2; aspect-ratio: 5 / 4; }
  .ab-pdp__gallery-cell--2,
  .ab-pdp__gallery-cell--3 { aspect-ratio: 1 / 1; }
  .ab-pdp__gallery-cell--4 { grid-column: span 2; aspect-ratio: 16 / 10; }
  .ab-pdp__gallery-cell--5,
  .ab-pdp__gallery-cell--6 { aspect-ratio: 1 / 1; }
  .ab-pdp__gallery-img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  }
  .ab-pdp__gallery-empty { aspect-ratio: 5 / 4; }

  /* ---------- Carousel layout (main image + arrows + bottom thumbs) */
  .ab-pdp__carousel {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .ab-pdp__carousel-stage {
    position: relative;
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    overflow: hidden;
    aspect-ratio: var(--ab-pdp-carousel-aspect, 1 / 1);
  }
  .ab-pdp__carousel-main {
    border: 0;
    background: transparent;
    padding: 0;
    cursor: zoom-in;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* `pan-y` tells the browser we own horizontal gestures (swipe between
       photos) but native vertical scroll still works. Without this the
       browser races us for the horizontal pan on mobile. */
    touch-action: pan-y;
    user-select: none;
    -webkit-user-drag: none;
  }
  .ab-pdp__carousel-main img { pointer-events: none; -webkit-user-drag: none; }
  .ab-pdp__carousel-img {
    width: 100%;
    height: 100%;
    object-fit: var(--ab-pdp-image-fit, cover);
    display: block;
    transition: opacity 180ms ease;
  }
  .ab-pdp__carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 0;
    background: rgb(255 255 255 / 0.9);
    color: var(--color-foreground, #0B1220);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(11, 18, 32, 0.12);
    transition: background 150ms ease;
  }
  .ab-pdp__carousel-arrow:hover { background: #FFFFFF; }
  .ab-pdp__carousel-arrow--prev { left: 14px; }
  .ab-pdp__carousel-arrow--next { right: 14px; }

  /* ---------- Side thumbs layout (vertical thumbs + main) */
  .ab-pdp__side {
    position: relative;
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 12px;
  }
  .ab-pdp__side-main {
    border: 0;
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    padding: 0;
    cursor: zoom-in;
    overflow: hidden;
    aspect-ratio: 5 / 4;
    display: block;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-drag: none;
  }
  .ab-pdp__side-main img { pointer-events: none; -webkit-user-drag: none; }
  .ab-pdp__side-img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: opacity 180ms ease;
  }

  /* ---------- Thumb strips (shared by carousel + side_thumbs) */
  .ab-pdp__thumbs--row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .ab-pdp__thumbs--col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    max-height: 100%;
  }
  .ab-pdp__thumb {
    flex-shrink: 0;
    width: var(--pdp-thumb-size, 150px);
    height: var(--pdp-thumb-size, 150px);
    border: 2px solid transparent;
    border-radius: 4px;
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    scroll-snap-align: start;
    transition: border-color 150ms ease;
  }
  .ab-pdp__thumb:hover { border-color: rgb(var(--color-foreground-rgb) / 0.3); }
  .ab-pdp__thumb.is-on { border-color: var(--color-primary, #0891B2); }
  .ab-pdp__thumb-img { width: 100%; height: 100%; object-fit: var(--ab-pdp-image-fit, cover); display: block; }

  /* Info column */
  .ab-pdp__info {
    /* Fluid scale across 760–1440px. Floor at 0.694 (≈ 1000/1440), so
       text never goes below 70% — readable. ≤760px (mobile) resets to 1
       so the hand-tuned mobile rules below own the spacing. Every visible
       px value inside .ab-pdp__info is wrapped with calc(N * var(--ab-pdp-info-scale, 1)). */
    --ab-pdp-info-scale: clamp(0.694, 100vw / 1440px, 1);
    background: var(--ab-pdp-info-bg, #f0f9ff);
    padding: calc(24px * var(--ab-pdp-info-scale, 1));
    min-width: 0;
  }
  .ab-pdp__info-sticky { position: sticky; top: 80px; }

  /* .ab-pdp__badges / .ab-pdp__badge* rules removed — the block above
     the title was deleted from the markup per the user's brief. */

  .ab-pdp__vendor {
    margin: 0 0 calc(8px * var(--ab-pdp-info-scale, 1));
    font-family: var(--font-body--family);
    font-size: calc(11px * var(--ab-pdp-info-scale, 1));
    letter-spacing: 2.5px;
    color: var(--ab-pdp-vendor-c, var(--color-foreground-muted));
    font-weight: 600;
    text-transform: uppercase;
  }

  .ab-pdp__title {
    margin: 0 0 calc(12px * var(--ab-pdp-info-scale, 1));
    font-family: var(--font-body--family);
    font-weight: 700;
    font-size: calc(var(--ab-pdp-title-size, 44px) * var(--ab-pdp-info-scale, 1));
    letter-spacing: -1.2px;
    line-height: 1.05;
    color: var(--ab-pdp-title-c, var(--color-foreground));
  }
  .ab-pdp__title-accent {
    font-style: italic;
    color: var(--ab-pdp-title-accent-c, var(--color-primary));
  }

  .ab-pdp__rte {
    margin: 0 0 calc(20px * var(--ab-pdp-info-scale, 1));
    font-family: var(--font-body--family);
    font-size: calc(14px * var(--ab-pdp-info-scale, 1));
    line-height: 1.4;
    color: var(--ab-pdp-body-c, var(--color-foreground-muted));
    max-width: 440px;
  }

  .ab-pdp__reviews-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-block-end: calc(22px * var(--ab-pdp-info-scale, 1));
    font-family: var(--font-body--family);
    font-size: calc(13px * var(--ab-pdp-info-scale, 1));
    color: var(--color-foreground-muted);
    text-decoration: none;
    cursor: pointer;
    transition: color 160ms ease;
  }
  .ab-pdp__reviews-row:hover .ab-pdp__rating-text,
  .ab-pdp__reviews-row:focus-visible .ab-pdp__rating-text {
    color: #0891B2;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .ab-pdp__reviews-row--empty .ab-pdp__stars { opacity: 0.5; }
  .ab-pdp__stars {
    display: inline-flex;
    gap: 1px;
    color: #0891B2;
  }
  .ab-pdp__rating-text {
    font-weight: 600;
    color: var(--color-foreground);
  }
  .ab-pdp__urgency-mini { color: var(--ab-pdp-urgency-c, #DC2626); font-weight: 700; letter-spacing: 1px; }

  .ab-pdp__price-block {
    background: var(--color-background);
    border: 1px solid var(--ab-pdp-line-c, var(--color-border));
    padding: calc(20px * var(--ab-pdp-info-scale, 1));
    margin-block-end: calc(22px * var(--ab-pdp-info-scale, 1));
  }
  .ab-pdp__price-block.is-sale {
    padding: 0;
    background: var(--color-background);
    border: 1px solid var(--ab-pdp-line-c, var(--color-border));
    border-radius: 12px;
    overflow: hidden;
  }
  .ab-pdp__price-block .ab-pdp__price-inner { padding: calc(20px * var(--ab-pdp-info-scale, 1)); }
  .ab-pdp__price-block.is-sale .ab-pdp__price-inner { padding: calc(20px * var(--ab-pdp-info-scale, 1)) calc(24px * var(--ab-pdp-info-scale, 1)); }
  .ab-pdp__price-block:not(.is-sale) .ab-pdp__price-inner { padding: 0; }

  .ab-pdp__limited-bar {
    display: flex;
    align-items: center;
    gap: calc(12px * var(--ab-pdp-info-scale, 1));
    background: #C60000;
    color: #FFFFFF;
    padding: calc(12px * var(--ab-pdp-info-scale, 1)) calc(18px * var(--ab-pdp-info-scale, 1));
    font-family: var(--font-body--family);
  }
  .ab-pdp__limited-bar[hidden] { display: none; }
  .ab-pdp__limited-icon { display: inline-flex; align-items: center; color: #FFFFFF; }
  .ab-pdp__limited-icon svg {
    width: calc(18px * var(--ab-pdp-info-scale, 1));
    height: calc(18px * var(--ab-pdp-info-scale, 1));
  }
  .ab-pdp__limited-title {
    font-size: calc(13px * var(--ab-pdp-info-scale, 1));
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
  }
  .ab-pdp__limited-sep {
    width: 1px;
    height: calc(18px * var(--ab-pdp-info-scale, 1));
    background: rgb(255 255 255 / 0.25);
  }
  .ab-pdp__limited-sub {
    font-size: calc(13px * var(--ab-pdp-info-scale, 1));
    font-weight: 400;
    color: rgb(255 255 255 / 0.85);
  }
  .ab-pdp__limited-sub strong { color: #FFFFFF; font-weight: 700; }
  .ab-pdp__price-row {
    display: flex;
    align-items: baseline;
    gap: calc(12px * var(--ab-pdp-info-scale, 1));
    flex-wrap: wrap;
  }
  .ab-pdp__price {
    font-family: var(--font-body--family);
    font-size: calc(var(--ab-pdp-price-size, 40px) * var(--ab-pdp-info-scale, 1));
    font-weight: 800;
    line-height: 1;
    color: var(--ab-pdp-price-c, var(--color-primary));
    letter-spacing: -1px;
  }
  .ab-pdp__was {
    font-size: calc(15px * var(--ab-pdp-info-scale, 1));
    color: var(--ab-pdp-was-c, var(--color-foreground-muted));
    text-decoration: line-through;
  }
  .ab-pdp__save {
    background: var(--ab-pdp-save-bg, #DC2626);
    color: var(--ab-pdp-save-c, #FFFFFF);
    padding: calc(3px * var(--ab-pdp-info-scale, 1)) calc(8px * var(--ab-pdp-info-scale, 1));
    font-size: calc(10px * var(--ab-pdp-info-scale, 1));
    font-weight: 700;
    letter-spacing: 1.2px;
  }
  .ab-pdp__installments {
    margin: calc(6px * var(--ab-pdp-info-scale, 1)) 0 0;
    font-family: var(--font-body--family);
    font-size: calc(12px * var(--ab-pdp-info-scale, 1));
    color: var(--color-foreground-muted);
  }

  .ab-pdp__option {
    margin-block-end: calc(20px * var(--ab-pdp-info-scale, 1));
  }
  .ab-pdp__option-label {
    margin: 0 0 calc(10px * var(--ab-pdp-info-scale, 1));
    font-family: var(--font-body--family);
    font-size: calc(11px * var(--ab-pdp-info-scale, 1));
    letter-spacing: 2px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-foreground);
  }
  .ab-pdp__option-value { color: var(--color-foreground-muted); font-weight: 500; }
  .ab-pdp__option-values { display: flex; flex-wrap: wrap; gap: calc(8px * var(--ab-pdp-info-scale, 1)); }
  .ab-pdp__option-values--swatches { gap: calc(4px * var(--ab-pdp-info-scale, 1)); }

  /* Round colour swatches (when the option is named Color / Colour).
     The colour itself lives in the inline style background (filled
     from value.swatch.color metafield or a CSS-keyword fallback);
     a faint slate fill sits underneath as a last-resort fallback so
     unknown colour names never render a bare button. The single-
     letter span inside is visually hidden but kept so a swatch with
     an invalid colour string still shows *something* to the reader. */
  .ab-pdp__swatch {
    position: relative;
    width: calc(30px * var(--ab-pdp-info-scale, 1));
    height: calc(30px * var(--ab-pdp-info-scale, 1));
    border-radius: 999px;
    border: 2px solid var(--ab-pdp-line-c, var(--color-border));
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    background-color: #cbd5e1; /* fallback when inline bg is empty */
    transition: border-color 150ms ease, transform 150ms ease;
  }
  .ab-pdp__swatch:hover { transform: scale(1.06); }
  .ab-pdp__swatch.is-selected {
    border-color: var(--color-foreground, #0B1220);
    box-shadow: 0 0 0 2px var(--color-background, #FFFFFF) inset;
  }
  .ab-pdp__swatch-fallback {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
  }
  .ab-pdp__option-pill {
    padding: calc(10px * var(--ab-pdp-info-scale, 1)) calc(16px * var(--ab-pdp-info-scale, 1));
    background: var(--color-background);
    color: var(--color-foreground);
    border: 1px solid var(--ab-pdp-line-c, var(--color-border));
    font-family: var(--font-body--family);
    font-size: calc(13px * var(--ab-pdp-info-scale, 1));
    font-weight: 600;
    cursor: pointer;
    transition: all 150ms ease;
  }
  .ab-pdp__option-pill:hover { border-color: var(--color-foreground); }
  .ab-pdp__option-pill.is-selected {
    background: var(--color-foreground);
    color: var(--color-background);
    border-color: var(--color-foreground);
  }
  /* .ab-pdp__swatch.is-selected has its own styling further up (border
     + inset box-shadow) so the underlying colour fill stays visible. */

  .ab-pdp__urgency {
    margin: 0 0 calc(14px * var(--ab-pdp-info-scale, 1));
    display: flex;
    align-items: center;
    gap: calc(8px * var(--ab-pdp-info-scale, 1));
    font-family: var(--font-body--family);
    font-size: calc(12px * var(--ab-pdp-info-scale, 1));
    color: var(--ab-pdp-urgency-c, #DC2626);
    font-weight: 700;
    letter-spacing: 0.5px;
  }
  .ab-pdp__urgency-dot {
    width: calc(8px * var(--ab-pdp-info-scale, 1));
    height: calc(8px * var(--ab-pdp-info-scale, 1));
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 0 4px rgb(220 38 38 / 0.2);
  }

  /* Low-stock indicator — sits directly above .ab-pdp__atc-row when the
     active variant has ≤ threshold units left. Red text, dot icon, no
     background per spec; pulses subtly to draw the eye without shouting. */
  .ab-pdp__lowstock {
    margin: 0 0 calc(10px * var(--ab-pdp-info-scale, 1));
    display: flex;
    align-items: center;
    gap: calc(8px * var(--ab-pdp-info-scale, 1));
    font-family: var(--font-body--family);
    font-size: calc(13px * var(--ab-pdp-info-scale, 1));
    color: #DC2626;
    font-weight: 600;
    letter-spacing: 0.2px;
    background: transparent;
  }
  .ab-pdp__lowstock[hidden] { display: none; }
  .ab-pdp__lowstock strong { font-weight: 800; }
  .ab-pdp__lowstock-dot {
    flex: 0 0 auto;
    width: calc(9px * var(--ab-pdp-info-scale, 1));
    height: calc(9px * var(--ab-pdp-info-scale, 1));
    border-radius: 999px;
    background: #DC2626;
    box-shadow: 0 0 0 4px rgb(220 38 38 / 0.18);
    animation: ab-pdp-lowstock-pulse 1.6s ease-in-out infinite;
  }
  @keyframes ab-pdp-lowstock-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgb(220 38 38 / 0.18); }
    50%      { box-shadow: 0 0 0 8px rgb(220 38 38 / 0.05); }
  }

  .ab-pdp__atc-row {
    display: flex;
    gap: calc(6px * var(--ab-pdp-info-scale, 1));
    margin-block-end: calc(10px * var(--ab-pdp-info-scale, 1));
  }
  .ab-pdp__qty {
    display: flex;
    align-items: center;
    border: 2px solid var(--color-foreground);
    background: var(--color-background);
    padding: 0 calc(4px * var(--ab-pdp-info-scale, 1));
  }
  .ab-pdp__qty-btn {
    border: 0;
    background: transparent;
    padding: calc(14px * var(--ab-pdp-info-scale, 1)) calc(10px * var(--ab-pdp-info-scale, 1));
    cursor: pointer;
    font-size: calc(16px * var(--ab-pdp-info-scale, 1));
    color: var(--color-foreground);
  }
  .ab-pdp__qty-input {
    border: 0;
    background: transparent;
    width: calc(30px * var(--ab-pdp-info-scale, 1));
    text-align: center;
    font-family: var(--font-body--family);
    font-weight: 700;
    color: var(--color-foreground);
    -moz-appearance: textfield;
  }
  .ab-pdp__qty-input::-webkit-outer-spin-button,
  .ab-pdp__qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

  .ab-pdp__atc {
    flex: 1;
    background: var(--ab-pdp-atc-bg, var(--color-primary));
    color: var(--ab-pdp-atc-c, #FFFFFF);
    border: 2px solid var(--ab-pdp-atc-bg, var(--color-primary));
    padding: calc(16px * var(--ab-pdp-info-scale, 1));
    font-family: var(--font-body--family);
    font-size: calc(15px * var(--ab-pdp-info-scale, 1));
    letter-spacing: 2px;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity 150ms ease;
  }
  .ab-pdp__atc:hover { opacity: 0.92; }
  .ab-pdp__atc:disabled { opacity: 0.5; cursor: not-allowed; }

  .ab-pdp__form .shopify-payment-button {
    margin-block-start: 8px;
  }
  .ab-pdp__form .shopify-payment-button__button {
    background: var(--ab-pdp-buynow-bg, var(--color-foreground)) !important;
    color: var(--ab-pdp-buynow-c, var(--color-background)) !important;
    border-radius: 0 !important;
    font-family: var(--font-body--family) !important;
    font-weight: 800 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    font-size: 13px !important;
    padding: 16px !important;
  }

  .ab-pdp__shipping {
    background: var(--color-background);
    border: 1px solid var(--ab-pdp-line-c, var(--color-border));
    padding: calc(18px * var(--ab-pdp-info-scale, 1));
    margin-block: calc(18px * var(--ab-pdp-info-scale, 1)) calc(14px * var(--ab-pdp-info-scale, 1));
  }
  .ab-pdp__shipping-head {
    display: flex;
    align-items: center;
    gap: calc(12px * var(--ab-pdp-info-scale, 1));
    font-family: var(--font-body--family);
    font-size: calc(13px * var(--ab-pdp-info-scale, 1));
    font-weight: 700;
    color: var(--color-foreground);
    margin-block-end: calc(8px * var(--ab-pdp-info-scale, 1));
  }
  .ab-pdp__shipping-head svg {
    color: var(--color-primary);
    width: calc(22px * var(--ab-pdp-info-scale, 1));
    height: calc(22px * var(--ab-pdp-info-scale, 1));
  }
  .ab-pdp__shipping-title {
    font-family: var(--font-body--family);
    font-size: calc(13px * var(--ab-pdp-info-scale, 1));
    font-weight: 700;
    letter-spacing: 0.4px;
    color: #0C4A6E;
  }
  .ab-pdp__shipping-body {
    margin: 0;
    font-family: var(--font-body--family);
    font-size: calc(12px * var(--ab-pdp-info-scale, 1));
    line-height: 1.5;
    color: #334155;
  }
  .ab-pdp__shipping-em {
    color: #DC2626;
    font-weight: 700;
  }
  .ab-pdp__shipping-eta {
    color: #0B1220;
    font-weight: 700;
  }

  .ab-pdp__trust {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: calc(var(--pdp-trust-gap, 12px) * var(--ab-pdp-info-scale, 1));
    margin-block-end: calc(22px * var(--ab-pdp-info-scale, 1));
  }
  .ab-pdp__trust-item {
    display: flex;
    align-items: center;
    gap: calc(var(--pdp-trust-icon-text-gap, 14px) * var(--ab-pdp-info-scale, 1));
    background: var(--pdp-trust-card-bg, #FFFFFF);
    border: var(--pdp-trust-card-border-w, 1px) solid var(--pdp-trust-card-border-c, #E2E8F0);
    border-radius: var(--pdp-trust-card-radius, 12px);
    box-shadow: var(--pdp-trust-card-shadow, none);
    padding:
      calc(var(--pdp-trust-card-pt, 18px) * var(--ab-pdp-info-scale, 1))
      calc(var(--pdp-trust-card-pr, 18px) * var(--ab-pdp-info-scale, 1))
      calc(var(--pdp-trust-card-pb, 18px) * var(--ab-pdp-info-scale, 1))
      calc(var(--pdp-trust-card-pl, 18px) * var(--ab-pdp-info-scale, 1));
  }
  .ab-pdp__trust-icon {
    flex: 0 0 auto;
    width: calc(var(--pdp-trust-icon-circle-size, 52px) * var(--ab-pdp-info-scale, 1));
    height: calc(var(--pdp-trust-icon-circle-size, 52px) * var(--ab-pdp-info-scale, 1));
    border-radius: 50%;
    background: var(--pdp-trust-icon-circle-bg, #E0F2FE);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--pdp-trust-icon-color, #0B1220);
  }
  .ab-pdp__trust-icon svg {
    width: calc(var(--pdp-trust-icon-size, 22px) * var(--ab-pdp-info-scale, 1));
    height: calc(var(--pdp-trust-icon-size, 22px) * var(--ab-pdp-info-scale, 1));
  }
  .ab-pdp__trust-textwrap {
    display: flex;
    flex-direction: column;
    gap: calc(var(--pdp-trust-text-gap, 4px) * var(--ab-pdp-info-scale, 1));
    min-width: 0;
  }
  .ab-pdp__trust-title {
    font-family: var(--font-body--family);
    font-size: calc(var(--pdp-trust-title-size, 14px) * var(--ab-pdp-info-scale, 1));
    font-weight: var(--pdp-trust-title-weight, 700);
    color: var(--pdp-trust-title-color, #0B1220);
    letter-spacing: var(--pdp-trust-title-tracking, 0.1px);
    text-transform: uppercase;
    line-height: 1.2;
  }
  .ab-pdp__trust-sub {
    font-family: var(--font-body--family);
    font-size: calc(var(--pdp-trust-sub-size, 13px) * var(--ab-pdp-info-scale, 1));
    font-weight: var(--pdp-trust-sub-weight, 400);
    color: var(--pdp-trust-sub-color, #475569);
    line-height: 1.3;
  }

  .ab-pdp__accordion { }
  .ab-pdp__acc-item {
    border-block-end: 1px solid var(--ab-pdp-line-c, var(--color-border));
    padding-block: calc(14px * var(--ab-pdp-info-scale, 1));
  }
  .ab-pdp__acc-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-body--family);
    font-size: calc(14px * var(--ab-pdp-info-scale, 1));
    font-weight: 600;
    color: var(--color-foreground);
  }
  .ab-pdp__acc-head::-webkit-details-marker { display: none; }
  .ab-pdp__acc-icon {
    width: calc(14px * var(--ab-pdp-info-scale, 1));
    height: calc(14px * var(--ab-pdp-info-scale, 1));
    position: relative;
  }
  .ab-pdp__acc-icon::before,
  .ab-pdp__acc-icon::after {
    content: "";
    position: absolute;
    background: currentColor;
    transition: transform 200ms ease;
  }
  .ab-pdp__acc-icon::before {
    top: calc(6px * var(--ab-pdp-info-scale, 1));
    left: 0; right: 0;
    height: calc(2px * var(--ab-pdp-info-scale, 1));
  }
  .ab-pdp__acc-icon::after {
    left: calc(6px * var(--ab-pdp-info-scale, 1));
    top: 0; bottom: 0;
    width: calc(2px * var(--ab-pdp-info-scale, 1));
  }
  .ab-pdp__acc-item[open] .ab-pdp__acc-icon::after { transform: scaleY(0); }
  .ab-pdp__acc-body {
    margin-block-start: calc(10px * var(--ab-pdp-info-scale, 1));
    font-family: var(--font-body--family);
    font-size: calc(13px * var(--ab-pdp-info-scale, 1));
    line-height: 1.6;
    color: var(--color-foreground-muted);
  }
  .ab-pdp__acc-body p:first-child { margin-block-start: 0; }
  .ab-pdp__acc-body p:last-child { margin-block-end: 0; }
  /* Inline H2 inside accordion bodies (e.g. AI-generated description
     subheadings) — override the global theme h2 (50px) so it reads as a
     subheading, not a hero. Scales with info-column like other PDP text. */
  .ab-pdp__acc-body h2 {
    font-family: var(--font-body--family);
    font-size: calc(16px * var(--ab-pdp-info-scale, 1));
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-foreground);
    margin: calc(16px * var(--ab-pdp-info-scale, 1)) 0 calc(8px * var(--ab-pdp-info-scale, 1));
  }
  /* Tighter list indent inside accordion bodies (Description, Materials &
     Dimensions, Shipping/Return) — browser default padding-inline-start: 40px
     reads too indented in this narrow info column. */
  .ab-pdp__acc-body ul,
  .ab-pdp__acc-body ol {
    padding-inline-start: 24px;
  }

  /* Tablet (761–989px): keep the 2-col gallery + info layout — the
     price + ATC stay in the user's eye-line while they scan the
     gallery. Single-col stacking happens only at the true mobile
     breakpoint (≤760px). This keeps the buy-decision and the visual
     side-by-side as long as the viewport allows it, which is a
     direct conversion win over an earlier stack. Info stays sticky. */
  @media screen and (max-width: 989px) and (min-width: 761px) {
    .ab-pdp__layout { grid-template-columns: 1.2fr 1fr; }
    .ab-pdp__gallery-inner { padding: 16px; }

    /* Side-thumbs gallery: trim the strip on narrower viewports. */
    .ab-pdp__side { grid-template-columns: 76px minmax(0, 1fr); }
    .ab-pdp__thumb { width: 64px; height: 64px; }
  }

  /* Sticky ATC bar — fixed to viewport bottom on mobile. Hidden by
     default; .is-visible class (added by IntersectionObserver) flips
     it in. Above 760px the whole aside is display:none so it never
     enters the layout on tablet / desktop. */
  .ab-pdp__sticky { display: none; }
  @media screen and (max-width: 760px) {
    .ab-pdp__sticky {
      display: flex;
      position: fixed;
      left: 0; right: 0; bottom: 0;
      z-index: 50;
      align-items: center;
      gap: 10px;
      padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
      background: #FFFFFF;
      border-top: 1px solid var(--color-border, #E2E8F0);
      box-shadow: 0 -8px 24px rgba(11, 18, 32, 0.08);
      transform: translateY(110%);
      transition: transform 240ms ease;
      visibility: hidden;
    }
    .ab-pdp__sticky[hidden] { display: none; }
    .ab-pdp__sticky.is-visible {
      transform: translateY(0);
      visibility: visible;
    }
    .ab-pdp__sticky-info { flex: 0 0 auto; }
    .ab-pdp__sticky-price-row {
      display: inline-flex;
      align-items: baseline;
      gap: 6px;
      flex-wrap: wrap;
    }
    .ab-pdp__sticky-price {
      font-family: var(--font-body--family);
      font-size: 16px;
      font-weight: 800;
      color: var(--color-primary, #0891B2);
      letter-spacing: -0.3px;
      line-height: 1;
    }
    .ab-pdp__sticky-was {
      font-family: var(--font-body--family);
      font-size: 11px;
      font-weight: 600;
      color: var(--color-foreground-muted, #64748B);
      text-decoration: line-through;
    }
    .ab-pdp__sticky-was[hidden] { display: none; }
    .ab-pdp__sticky-save {
      font-family: var(--font-body--family);
      font-size: 9px;
      font-weight: 800;
      letter-spacing: 1px;
      color: #FFFFFF;
      background: #DC2626;
      padding: 2px 5px;
      border-radius: 2px;
      line-height: 1;
    }
    .ab-pdp__sticky-save[hidden] { display: none; }
    .ab-pdp__sticky-stock {
      margin-top: 3px;
      font-family: var(--font-body--family);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 1px;
      color: #10B981;
    }
    .ab-pdp__sticky-stock.is-low { color: #B45309; }
    .ab-pdp__sticky-stock.is-out { color: var(--color-foreground-muted, #64748B); }
    .ab-pdp__sticky-btn {
      flex: 1;
      background: var(--color-primary, #0891B2);
      color: #FFFFFF;
      border: 0;
      padding: 14px;
      font-family: var(--font-body--family);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 1.8px;
      text-transform: uppercase;
      cursor: pointer;
    }
    .ab-pdp__sticky-btn:disabled {
      opacity: 0.55;
      cursor: not-allowed;
    }
    /* Add bottom padding to the page so the sticky bar doesn't cover
       the last scroll content. ~84px = bar height + buffer. */
    .ab-pdp { padding-block-end: 84px; }
  }

  /* ===== Mobile PDP (≤760px) — single column + mobile design ===== */
  @media screen and (max-width: 760px) {
    .ab-pdp__layout { grid-template-columns: 1fr; }
    /* Mobile resets the fluid scale to 1 so hand-tuned mobile values
       below (font-size, paddings, etc.) read at their literal px. */
    .ab-pdp__info { --ab-pdp-info-scale: 1; padding: 24px 18px; }
    .ab-pdp__info-sticky { position: static; }
    .ab-pdp__title { font-size: 30px; letter-spacing: -1px; }
    .ab-pdp__price { font-size: 36px; }
    .ab-pdp__cap { padding: 0; }
    .ab-pdp__crumbs { display: none; }
    .ab-pdp__thumb { width: var(--pdp-thumb-size-m, 72px); height: var(--pdp-thumb-size-m, 72px); }

    /* Gallery: 1:1 hero, full bleed, badges + favorite overlay */
    .ab-pdp__gallery {
      background: var(--ab-pdp-gallery-bg);
    }
    .ab-pdp__gallery-inner { padding: 0; }
    .ab-pdp__gallery-pattern { display: none; }
    .ab-pdp__gallery-grid {
      display: block;
      gap: 0;
    }

    /* Side-thumbs collapses to row layout on phones (thumbs under main). */
    .ab-pdp__side {
      grid-template-columns: 1fr;
      grid-template-rows: auto auto;
      gap: 8px;
    }
    .ab-pdp__side .ab-pdp__thumbs--col {
      flex-direction: row;
      overflow-x: auto;
      overflow-y: hidden;
      order: 2;
    }
    .ab-pdp__thumbs.ab-pdp__thumbs--row { padding-left: 18px; }
    .ab-pdp__limited-title,
    .ab-pdp__limited-sub { font-size: 11px; }
    .ab-pdp__atc-price { display: none; }
    .ab-pdp__side-main { order: 1; aspect-ratio: 1 / 1; }
    .ab-pdp__carousel-stage { aspect-ratio: var(--ab-pdp-carousel-aspect-m, 1 / 1); }
    .ab-pdp__carousel-arrow { width: 36px; height: 36px; }
    .ab-pdp__carousel-arrow--prev { left: 8px; }
    .ab-pdp__carousel-arrow--next { right: 8px; }
    .ab-pdp__gallery-cell {
      grid-column: auto;
      grid-row: auto;
      aspect-ratio: 1 / 1;
      display: none;
    }
    .ab-pdp__gallery-cell--1 { display: block; }
    .ab-pdp__gallery-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* Info panel: tighter padding, single column, sections stacked */
    .ab-pdp__info {
      padding: 22px 18px 0;
      background: var(--ab-pdp-info-bg);
    }
    .ab-pdp__info-sticky {
      position: static;
      max-width: 100%;
    }

    /* Eyebrow + title */
    .ab-pdp__vendor,
    .ab-pdp__eyebrow {
      font-size: 9px;
      letter-spacing: 2px;
      margin-block-end: 8px;
    }
    .ab-pdp__title {
      font-size: 30px;
      letter-spacing: -1px;
      line-height: 1;
    }

    /* Price */
    .ab-pdp__price-row {
      gap: 10px;
      align-items: baseline;
    }
    .ab-pdp__limited-bar {
      padding: 6px;
      justify-content: center;
    }
    .ab-pdp__price {
      font-size: 36px;
      letter-spacing: -1px;
    }
    .ab-pdp__was {
      font-size: 14px;
    }
    .ab-pdp__save {
      padding: 3px 7px;
      font-size: 9px;
      letter-spacing: 1.2px;
    }

    /* Stars row */
    .ab-pdp__stars-row {
      gap: 10px;
      margin-block-start: 10px;
    }
    .ab-pdp__stars-meta {
      font-size: 11px;
    }

    /* Options (color swatches, size tiles) */
    .ab-pdp__option { margin-block-start: 22px; }
    .ab-pdp__option-label {
      font-size: 10px;
      letter-spacing: 1.5px;
      margin-block-end: 10px;
    }
    .ab-pdp__option-pills {
      gap: 8px;
    }
    .ab-pdp__option-pill {
      padding: 10px 8px;
      font-size: 12px;
    }

    /* Urgency, shipping, trust blocks */
    .ab-pdp__urgency {
      padding: 12px 14px;
      font-size: 11px;
      margin-block-start: 18px;
    }
    .ab-pdp__shipping {
      padding: 12px 14px;
      margin-block-start: 14px;
    }
    .ab-pdp__shipping-eta { font-size: 11px; }
    .ab-pdp__shipping-meta { font-size: 10px; }
    .ab-pdp__trust {
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
      margin-block-start: 14px;
    }
    .ab-pdp__trust-item {
      padding: 10px 6px;
      text-align: center;
    }
    .ab-pdp__trust-label {
      font-size: 9px;
      letter-spacing: 0.4px;
    }

    /* Description + accordion */
    .ab-pdp__body {
      font-size: 14px;
      line-height: 1.65;
      padding: 26px 0 0;
    }
    .ab-pdp__acc {
      margin-block-start: 18px;
      border-block-start: 1px solid var(--ab-pdp-line-c, #E2E8F0);
    }
    .ab-pdp__acc-item { border-block-end: 1px solid var(--ab-pdp-line-c, #E2E8F0); }
    .ab-pdp__acc-trigger {
      padding: 14px 0;
      font-size: 13px;
    }
    .ab-pdp__acc-body {
      font-size: 12.5px;
      line-height: 1.65;
      padding: 0 0 16px;
    }
    .ab-pdp__acc-body h2 {
      font-size: 15px;
      margin: 14px 0 6px;
    }
    .ab-pdp__acc-body ul,
    .ab-pdp__acc-body ol { padding-inline-start: 22px; }

    /* CTAs — hide the inline desktop ATC; rely on ab-sticky-atc.liquid */
    .ab-pdp__cta-row {
      flex-direction: column;
      gap: 10px;
      margin-block-start: 18px;
    }
    .ab-pdp__qty-control { width: 100%; }
    .ab-pdp__atc,
    .ab-pdp__buynow {
      width: 100%;
      padding: 14px;
      font-size: 12px;
      letter-spacing: 1.8px;
    }
  }
  /* App blocks slot (Judge.me, Klaviyo, etc.) — light spacing */
  .ab-pdp__app-block {
    margin: calc(12px * var(--ab-pdp-info-scale, 1)) 0;
  }
  .ab-pdp__app-block:empty { margin: 0; }
  /* Hide Judge.me's auto-injected preview badge in PDP — we render our
     own review band (`.ab-pdpr`) below, and Judge.me's badge clicks to
     its own default-styled widget instead of ours. Customer can also
     remove the block in theme customizer; CSS hide is a belt-and-braces
     so the duplicate UI never shows even if it's re-added. */
  .ab-pdp__app-block:has(.jdgm-widget),
  .ab-pdp__app-block:has(.jdgm-preview-badge),
  .ab-pdp__app-block:has(.jdgm-rev-widg),
  .ab-pdp .jdgm-preview-badge,
  .ab-pdp .jdgm-prev-badge { display: none !important; }

  /* Gallery cell as button — reset native button look + zoom cursor */
  .ab-pdp__gallery-cell {
    border: 0;
    padding: 0;
    background: transparent;
    font: inherit;
    cursor: zoom-in;
    display: block;
    width: 100%;
    appearance: none;
  }
  .ab-pdp__gallery-cell:focus-visible {
    outline: 2px solid var(--color-primary, #0891B2);
    outline-offset: 2px;
  }

  /* Lightbox / fullscreen gallery */
  .ab-pdp__lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(11, 18, 32, 0.96);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms ease, visibility 0s linear 200ms;
  }
  .ab-pdp__lightbox.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 200ms ease, visibility 0s;
  }
  .ab-pdp__lb-counter {
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    color: #FFFFFF;
    font-family: var(--font-body--family);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 700;
    opacity: 0.7;
    z-index: 2;
  }
  .ab-pdp__lb-close,
  .ab-pdp__lb-prev,
  .ab-pdp__lb-next {
    position: absolute;
    border: 0;
    background: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 150ms ease, opacity 150ms ease;
    z-index: 3;
    line-height: 1;
  }
  .ab-pdp__lb-close:hover,
  .ab-pdp__lb-prev:hover,
  .ab-pdp__lb-next:hover {
    background: rgba(255, 255, 255, 0.18);
  }
  .ab-pdp__lb-close {
    top: 14px;
    right: 14px;
    width: 44px;
    height: 44px;
    font-size: 28px;
  }
  .ab-pdp__lb-prev,
  .ab-pdp__lb-next {
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    font-size: 30px;
  }
  .ab-pdp__lb-prev { left: 18px; }
  .ab-pdp__lb-next { right: 18px; }
  .ab-pdp__lb-prev[disabled],
  .ab-pdp__lb-next[disabled] {
    opacity: 0.25;
    cursor: default;
  }
  .ab-pdp__lb-stage {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    touch-action: pinch-zoom;
  }
  .ab-pdp__lb-slide {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 60px 80px 20px;
  }
  .ab-pdp__lb-slide.is-active { display: flex; }
  .ab-pdp__lb-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    cursor: zoom-in;
    transition: transform 240ms ease;
    transform-origin: center center;
    user-select: none;
    -webkit-user-drag: none;
  }
  .ab-pdp__lb-img.is-zoomed {
    cursor: grab;
    transform: scale(2.2);
    touch-action: none;
  }
  .ab-pdp__lb-thumbs {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px 18px;
    overflow-x: auto;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.18);
  }
  .ab-pdp__lb-thumb {
    flex: 0 0 60px;
    height: 60px;
    border: 2px solid transparent;
    background: transparent;
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    opacity: 0.55;
    transition: opacity 150ms ease, border-color 150ms ease;
  }
  .ab-pdp__lb-thumb:hover { opacity: 0.9; }
  .ab-pdp__lb-thumb.is-active {
    opacity: 1;
    border-color: #FFFFFF;
  }
  .ab-pdp__lb-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  @media (max-width: 760px) {
    .ab-pdp__lb-close {
      top: 8px; right: 8px;
      width: 38px; height: 38px;
      font-size: 22px;
    }
    .ab-pdp__lb-prev,
    .ab-pdp__lb-next {
      width: 40px; height: 40px;
      font-size: 22px;
    }
    .ab-pdp__lb-prev { left: 6px; }
    .ab-pdp__lb-next { right: 6px; }
    .ab-pdp__lb-slide { padding: 50px 50px 14px; }
    .ab-pdp__lb-thumb { flex-basis: 48px; height: 48px; }
  }

  /* Global scroll lock — applied while ANY full-screen modal/lightbox
     is open (PDP gallery lightbox, review write modal, review photo
     lightbox). `position: fixed` on body works around iOS Safari's
     refusal to honour `overflow: hidden` for touchmove. JS sets
     `body.style.top` to the saved scrollY so the page doesn't jump. */
  html.ab-scroll-locked { overflow: hidden; }
  body.ab-scroll-locked {
    position: fixed;
    left: 0;
    right: 0;
    overflow: hidden;
    width: 100%;
  }

  /* Modal/lightbox above the sticky header.

     We tried z-index alone (raising the modal and lowering the header),
     but Shopify section wrappers create their own stacking contexts —
     a fixed header section's z-index can beat a fixed content section's
     z-index regardless of inner element values. The bulletproof move is
     just to hide the header section entirely while a modal is open: the
     modal already covers the viewport with a dark backdrop, so the
     header would be invisible anyway. Three selectors cover Shopify's
     wrapper, our header section's own root, and any defensive fallback. */
  body.ab-scroll-locked .shopify-section-header,
  body.ab-scroll-locked .shopify-section--header,
  body.ab-scroll-locked [id^="shopify-section-"][id*="header" i],
  body.ab-scroll-locked .ab-header,
  body.ab-scroll-locked .ab-h2 {
    display: none !important;
  }
  /* Defensive: also pin the modal elements to a high z-index in case
     anything else on the page tries to sit above them. */
  .ab-pdp__lightbox.is-open,
  .ab-pdpr__overlay.is-open,
  .ab-pdpr__lightbox.is-open {
    z-index: 9999 !important;
  }
/* END_SECTION:ab-pdp-main */

/* START_SECTION:ab-pdp-reviews (INDEX:38) */
.ab-pdpr {
    --ab-pdpr-bg: #FFFFFF;
    --ab-pdpr-surf: #F8FAFC;
    --ab-pdpr-soft-bg: #F0F9FF;
    --ab-pdpr-soft-line: #E0F2FE;
    --ab-pdpr-line: #E2E8F0;
    --ab-pdpr-line2: #CBD5E1;
    --ab-pdpr-ink: #0F172A;
    --ab-pdpr-ink2: #334155;
    --ab-pdpr-ink3: #64748B;
    --ab-pdpr-deep: #0B1220;
    --ab-pdpr-accent: #0891B2;
    --ab-pdpr-accent2: #06B6D4;
    --ab-pdpr-accent3: #67E8F9;
    --ab-pdpr-soft-ink: #0C4A6E;
    --ab-pdpr-mint: #10B981;
    background: var(--ab-pdpr-bg);
    color: var(--ab-pdpr-ink);
    font-family: var(--font-body--family);
  }
  .ab-pdpr__cap { max-width: 1440px; margin-inline: auto; }

  /* Photo lightbox — single-image overlay. Brand-matched: cyan-tinted
     dark backdrop, white close, rounded glass nav arrows. */
  .ab-pdpr__lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(11, 18, 32, 0.86);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    opacity: 0;
    transition: opacity 200ms ease;
  }
  .ab-pdpr__lightbox.is-open { opacity: 1; }
  .ab-pdpr__lightbox[hidden] { display: none; }
  .ab-pdpr__lightbox-img {
    max-width: min(1200px, calc(100vw - 120px));
    max-height: calc(100vh - 80px);
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
    display: block;
  }
  .ab-pdpr__lightbox-close,
  .ab-pdpr__lightbox-nav {
    position: absolute;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #FFFFFF;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 28px;
    line-height: 1;
    padding: 0;
    transition: background 160ms ease, transform 160ms ease;
  }
  .ab-pdpr__lightbox-close { top: 24px; right: 24px; font-size: 26px; }
  .ab-pdpr__lightbox-nav--prev { left: 24px; top: 50%; transform: translateY(-50%); }
  .ab-pdpr__lightbox-nav--next { right: 24px; top: 50%; transform: translateY(-50%); }
  .ab-pdpr__lightbox-close:hover,
  .ab-pdpr__lightbox-nav:hover { background: var(--ab-pdpr-accent); border-color: var(--ab-pdpr-accent); }
  .ab-pdpr__lightbox-nav--prev:hover,
  .ab-pdpr__lightbox-nav--next:hover { transform: translateY(-50%) scale(1.05); }
  .ab-pdpr__lightbox-nav[disabled] { opacity: 0.35; cursor: not-allowed; pointer-events: none; }
  .ab-pdpr__photo,
  .ab-pdpr__thumb { cursor: zoom-in; }

  @media (max-width: 640px) {
    .ab-pdpr__lightbox { padding: 16px; }
    .ab-pdpr__lightbox-close { top: 16px; right: 16px; width: 40px; height: 40px; font-size: 22px; }
    .ab-pdpr__lightbox-nav { width: 40px; height: 40px; font-size: 24px; }
    .ab-pdpr__lightbox-nav--prev { left: 12px; }
    .ab-pdpr__lightbox-nav--next { right: 12px; }
  }

  /* Empty state — shown when product has zero Judge.me reviews yet.
     Brand-styled CTA so a new product still looks intentional, not
     half-built. */
  .ab-pdpr__empty {
    background: var(--ab-pdpr-soft-bg);
    border: 1px solid var(--ab-pdpr-soft-line);
    border-radius: 20px;
    padding: clamp(36px, 6vw, 56px) clamp(20px, 4vw, 40px);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    color: var(--ab-pdpr-ink);
  }
  .ab-pdpr__empty-icon {
    width: 56px;
    height: 56px;
    color: var(--ab-pdpr-accent);
  }
  .ab-pdpr__empty-title {
    font-family: var(--font-heading--family, var(--font-body--family));
    font-size: clamp(20px, 2.5vw, 26px);
    font-weight: 800;
    color: var(--ab-pdpr-soft-ink);
    margin: 0;
    letter-spacing: 0.2px;
  }
  .ab-pdpr__empty-copy {
    font-size: 14px;
    color: var(--ab-pdpr-ink2);
    max-width: 480px;
    line-height: 1.5;
    margin: 0 0 6px;
  }
  .ab-pdpr__empty .ab-pdpr__btn-primary { padding-inline: 26px; }

  /* DELETED-MODAL-SKIN-START
  .jdgm-write-review-modal {
    --jm-primary: #0891B2;
    --jm-primary-dark: #0C4A6E;
    --jm-primary-tint: #E0F2FE;
    --jm-wash: #F0F9FF;
    --jm-ink: #0B1220;
    --jm-muted: #475569;
    --jm-line: #E2E8F0;
    --jm-card: #FFFFFF;
    --jm-star: #F59E0B;
    --jm-star-off: #E2E8F0;
    --jm-radius: 12px;
    --jm-radius-lg: 16px;
    --jm-radius-pill: 999px;
    font-family: var(--font-body--family);
    color: var(--jm-ink);
    z-index: 9999;
  }
  .jdgm-write-review-modal[style*="display: block"],
  .jdgm-write-review-modal[style*="display:block"] {
    position: fixed;
    inset: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }
  .jdgm-write-review-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(11, 18, 32, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  .jdgm-write-review-modal__container {
    position: relative;
    background: var(--jm-card);
    border-radius: var(--jm-radius-lg);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
    border: 1px solid var(--jm-line);
    max-width: 520px;
    width: 100%;
    max-height: calc(100vh - 48px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .jdgm-write-review-modal__content {
    padding: 28px 28px 0;
    overflow-y: auto;
    flex: 1 1 auto;
  }
  .jdgm-write-review-modal__close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    background: var(--jm-wash);
    border: 1px solid var(--jm-line);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    z-index: 2;
    transition: background 160ms ease;
  }
  .jdgm-write-review-modal__close-btn:hover { background: var(--jm-primary-tint); }
  .jdgm-write-review-modal__close-btn svg path { stroke: var(--jm-ink); }
  .jdgm-write-review-modal__sections { padding-block-end: 8px; }

  .jdgm-write-review-modal__page-header { margin-block-end: 18px; }
  .jdgm-write-review-modal__title {
    font-family: var(--font-heading--family, var(--font-body--family));
    font-size: 22px;
    font-weight: 800;
    color: var(--jm-primary-dark);
    letter-spacing: 0.2px;
    line-height: 1.2;
    margin-block-end: 8px;
  }
  .jdgm-write-review-modal__intro {
    font-size: 13px;
    color: var(--jm-muted);
    line-height: 1.5;
  }
  .jdgm-write-review-modal__product-image {
    width: 92px;
    height: 92px;
    margin: 0 auto 12px;
    border-radius: var(--jm-radius);
    overflow: hidden;
    border: 1px solid var(--jm-line);
  }
  .jdgm-write-review-modal__product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .jdgm-write-review-modal__product-title {
    font-family: var(--font-heading--family, var(--font-body--family));
    font-size: 14px;
    font-weight: 700;
    color: var(--jm-ink);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-block-end: 16px;
  }
  .jdgm-write-review-modal__stars {
    display: flex !important;
    gap: 8px;
    justify-content: center;
    width: 100%;
    margin-block-end: 8px;
  }
  .jdgm-write-review-modal__stars .jdgm-star {
    font-size: 36px;
    color: var(--jm-star);
    transition: transform 120ms ease;
    text-decoration: none;
  }
  .jdgm-write-review-modal__stars .jdgm-star:hover { transform: scale(1.1); }
  .jdgm-write-review-modal__stars .jdgm-star.jdgm--off { color: var(--jm-star-off); }

  /* Form fields (review title, body, name, email) */
  .jdgm-write-review-modal__form-group,
  .jdgm-write-review-modal__form { display: flex; flex-direction: column; gap: 14px; }
  .jdgm-write-review-modal__field-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .jdgm-write-review-modal__field-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--jm-primary-dark);
  }
  .jdgm-write-review-modal__field-input,
  .jdgm-write-review-modal textarea.jdgm-write-review-modal__field-input,
  .jdgm-write-review-modal input.jdgm-write-review-modal__field-input {
    border: 1px solid var(--jm-line);
    border-radius: var(--jm-radius);
    padding: 12px 14px;
    background: var(--jm-card);
    color: var(--jm-ink);
    font-family: var(--font-body--family);
    font-size: 14px;
    transition: border-color 160ms ease, box-shadow 160ms ease;
    width: 100%;
    box-sizing: border-box;
  }
  .jdgm-write-review-modal__field-input:focus {
    outline: none;
    border-color: var(--jm-primary);
    box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.18);
  }
  .jdgm-write-review-modal textarea.jdgm-write-review-modal__field-input {
    min-height: 120px;
    resize: vertical;
    font-family: var(--font-body--family);
  }
  .jdgm-write-review-modal__field-error {
    color: #DC2626;
    font-size: 12px;
    line-height: 1.4;
  }
  .jdgm-write-review-modal__field-help {
    color: var(--jm-muted);
    font-size: 12px;
    line-height: 1.4;
  }
  .jdgm-write-review-modal__gdpr-statement {
    font-size: 11px;
    color: var(--jm-muted);
    line-height: 1.5;
    margin-block-start: 12px;
  }
  .jdgm-write-review-modal__gdpr-statement a { color: var(--jm-primary); }

  /* Anonymous checkbox */
  .jdgm-write-review-modal__checkbox-label {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--jm-ink);
    cursor: pointer;
    margin: 0;
  }
  .jdgm-write-review-modal__checkbox-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  .jdgm-write-review-modal__checkbox-custom {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--jm-line);
    border-radius: 4px;
    background: var(--jm-card);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 160ms ease, border-color 160ms ease;
  }
  .jdgm-write-review-modal__checkbox-input:checked + .jdgm-write-review-modal__checkbox-custom {
    background: var(--jm-primary);
    border-color: var(--jm-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3E%3Cpath d='M6 11.4 2.6 8l1.2-1.2L6 9l6.2-6.2L13.4 4 6 11.4z'/%3E%3C/svg%3E");
    background-size: 14px 14px;
    background-repeat: no-repeat;
    background-position: center;
  }

  /* Media upload */
  .jdgm-write-review-modal__media-upload {
    position: relative;
    border: 1.5px dashed var(--jm-line);
    border-radius: var(--jm-radius);
    background: var(--jm-wash);
    padding: 24px;
    text-align: center;
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease;
  }
  .jdgm-write-review-modal__media-upload:hover {
    border-color: var(--jm-primary);
    background: var(--jm-primary-tint);
  }
  .jdgm-write-review-modal__media-upload-icon { margin-block-end: 10px; }
  .jdgm-write-review-modal__media-upload-icon svg path { fill: var(--jm-primary-dark); }
  .jdgm-write-review-modal__media-upload-prompt {
    font-size: 13px;
    color: var(--jm-muted);
    line-height: 1.4;
  }
  .jdgm-write-review-modal__media-upload-prompt b { color: var(--jm-primary-dark); }
  .jdgm-write-review-modal__media-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
  }

  /* Nav buttons (Back / Next / Close) */
  .jdgm-write-review-modal__navigation,
  .jdgm-write-review-modal__thank-you-nav {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 18px 28px 24px;
    border-block-start: 1px solid var(--jm-line);
    background: var(--jm-card);
  }
  .jdgm-write-review-modal__nav-btn {
    appearance: none;
    border: 0;
    background: var(--jm-primary);
    color: #FFFFFF;
    font-family: var(--font-body--family);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 12px 24px;
    border-radius: var(--jm-radius);
    cursor: pointer;
    transition: background 160ms ease, transform 160ms ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .jdgm-write-review-modal__nav-btn:hover {
    background: var(--jm-primary-dark);
    transform: translateY(-1px);
  }
  .jdgm-write-review-modal__nav-btn-back {
    background: transparent;
    color: var(--jm-muted);
    border: 1px solid var(--jm-line);
  }
  .jdgm-write-review-modal__nav-btn-back:hover {
    background: var(--jm-wash);
    color: var(--jm-ink);
    transform: none;
  }
  .jdgm-write-review-modal__nav-btn svg path { stroke: currentColor; }

  /* Thank-you state */
  .jdgm-write-review-modal__form--thank-you {
    text-align: center;
    padding-block: 24px 8px;
  }
  .jdgm-write-review-modal__form--thank-you .jdgm-write-review-modal__title {
    color: var(--jm-primary-dark);
  }
  .jdgm-write-review-modal__text {
    font-size: 13px;
    color: var(--jm-muted);
    line-height: 1.5;
    margin-block-start: 12px;
  }

  /* Coupon banner (Judge.me may show one if shop has coupons enabled) */
  .jdgm-coupon-banner-container:not(:empty) {
    background: var(--jm-wash);
    border: 1px solid var(--jm-soft-line, var(--jm-line));
    border-radius: var(--jm-radius);
    padding: 12px 14px;
    margin-block-end: 14px;
    font-size: 12px;
    color: var(--jm-primary-dark);
  }

  /* Mobile */
  @media (max-width: 640px) {
    .jdgm-write-review-modal[style*="display: block"],
    .jdgm-write-review-modal[style*="display:block"] {
      padding: 12px;
      align-items: flex-end;
    }
    .jdgm-write-review-modal__container {
      max-width: 100%;
      max-height: calc(100vh - 24px);
      border-radius: var(--jm-radius-lg) var(--jm-radius-lg) 0 0;
    }
    .jdgm-write-review-modal__content { padding: 22px 20px 0; }
    .jdgm-write-review-modal__navigation,
    .jdgm-write-review-modal__thank-you-nav { padding: 14px 20px 18px; }
    .jdgm-write-review-modal__title { font-size: 19px; }
    .jdgm-write-review-modal__stars .jdgm-star { font-size: 32px; }
  }
  DELETED-MODAL-SKIN-END */

  /* HEAD */
  .ab-pdpr__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
  }
  .ab-pdpr__eb {
    font-size: 11px;
    letter-spacing: 2.5px;
    color: var(--ab-pdpr-accent);
    font-weight: 700;
    text-transform: uppercase;
  }
  .ab-pdpr__title {
    font-size: calc(48px * var(--ab-pdpr-scale, 1));
    font-weight: 800;
    letter-spacing: -1.4px;
    line-height: 1;
    margin: 8px 0 0;
    color: var(--ab-pdpr-deep);
  }
  .ab-pdpr__title em {
    font-style: italic;
    color: var(--ab-pdpr-accent);
    font-weight: 800;
  }
  .ab-pdpr__cta-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-block-start: 12px;
  }

  /* BUTTONS */
  .ab-pdpr__btn-primary {
    background: var(--ab-pdpr-accent);
    color: var(--ab-pdpr-bg);
    border: 2px solid var(--ab-pdpr-accent);
    padding: 14px 22px;
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: background 150ms ease, border-color 150ms ease;
  }
  .ab-pdpr__btn-primary:hover {
    background: var(--ab-pdpr-soft-ink);
    border-color: var(--ab-pdpr-soft-ink);
  }
  .ab-pdpr__btn-primary svg { width: 14px; height: 14px; }
  .ab-pdpr__btn-ghost {
    background: var(--ab-pdpr-bg);
    color: var(--ab-pdpr-deep);
    border: 2px solid var(--ab-pdpr-deep);
    padding: 12px 18px;
    font-size: 11px;
    letter-spacing: 1.8px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 150ms ease, color 150ms ease;
  }
  .ab-pdpr__btn-ghost:hover {
    background: var(--ab-pdpr-deep);
    color: var(--ab-pdpr-bg);
  }
  .ab-pdpr__btn-ghost svg { width: 13px; height: 13px; }

  /* SUMMARY */
  .ab-pdpr__summary {
    display: grid;
    grid-template-columns: minmax(280px, 360px) 1fr auto;
    gap: 0;
    border: 1px solid var(--ab-pdpr-line);
    background: var(--ab-pdpr-bg);
    margin-block-end: 24px;
  }
  .ab-pdpr__summary > * { padding: 32px 36px; /* overridden by #ab-pdpr-reviews scoped style from theme editor */ }
  .ab-pdpr__summary > * + * { border-inline-start: 1px solid var(--ab-pdpr-line); }

  .ab-pdpr__avg {
    background: var(--ab-pdpr-deep);
    color: var(--ab-pdpr-bg);
    position: relative;
    overflow: hidden;
  }
  .ab-pdpr__avg::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M0 40 L40 0 L80 40 L40 80 Z' fill='none' stroke='%2367e8f9' stroke-width='1.2' opacity='0.14'/%3E%3Cpath d='M20 40 L40 20 L60 40 L40 60 Z' fill='none' stroke='%23ffffff' stroke-width='1' opacity='0.08'/%3E%3Ccircle cx='40' cy='40' r='2' fill='%2367e8f9' opacity='0.28'/%3E%3C/svg%3E");
    opacity: 0.6;
    pointer-events: none;
  }
  .ab-pdpr__avg-inner { position: relative; }
  .ab-pdpr__avg-eb {
    font-size: 11px;
    letter-spacing: 2.5px;
    color: var(--ab-pdpr-accent3);
    font-weight: 700;
    text-transform: uppercase;
    margin-block-end: 14px;
  }
  .ab-pdpr__avg-num {
    font-size: calc(88px * var(--ab-pdpr-scale, 1));
    font-weight: 800;
    letter-spacing: -3px;
    line-height: 1;
    color: var(--ab-pdpr-accent2);
    display: flex;
    align-items: baseline;
    gap: 12px;
  }
  .ab-pdpr__avg-num small {
    font-size: calc(30px * var(--ab-pdpr-scale, 1));
    font-weight: 700;
    opacity: 0.5;
    color: var(--ab-pdpr-accent3);
    letter-spacing: 0;
    margin-inline-start: 4px;
  }
  .ab-pdpr__avg-stars {
    margin-block-start: 10px;
    display: flex;
    gap: 3px;
    color: var(--ab-pdpr-accent2);
  }
  .ab-pdpr__avg-stars svg { width: 22px; height: 22px; }
  .ab-pdpr__avg-meta {
    font-size: 12px;
    color: var(--ab-pdpr-accent3);
    margin-block-start: 12px;
    letter-spacing: 0.4px;
  }
  .ab-pdpr__avg-verified {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-block-start: 22px;
    font-size: 10px;
    letter-spacing: 1.6px;
    font-weight: 700;
    color: var(--ab-pdpr-deep);
    background: var(--ab-pdpr-accent2);
    padding: 6px 10px;
    text-transform: uppercase;
  }
  .ab-pdpr__avg-verified svg { width: 12px; height: 12px; }

  .ab-pdpr__breakdown { background: var(--ab-pdpr-bg); }
  .ab-pdpr__bd-eb {
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--ab-pdpr-ink3);
    font-weight: 700;
    text-transform: uppercase;
    margin-block-end: 18px;
  }
  .ab-pdpr__bd-row {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-block-end: 10px;
    cursor: pointer;
    transition: opacity 150ms ease;
  }
  .ab-pdpr__bd-row:hover { opacity: 0.78; }
  .ab-pdpr__bd-label {
    display: flex;
    gap: 2px;
    width: 88px;
    flex-shrink: 0;
    color: var(--ab-pdpr-accent);
  }
  .ab-pdpr__bd-bar {
    flex: 1;
    height: 8px;
    background: var(--ab-pdpr-surf);
    position: relative;
    overflow: hidden;
  }
  .ab-pdpr__bd-bar-fill {
    position: absolute;
    inset: 0;
    background: var(--ab-pdpr-accent);
    width: 0;
    transition: width 800ms ease;
  }
  .ab-pdpr__bd-count {
    font-size: 13px;
    font-weight: 600;
    color: var(--ab-pdpr-ink2);
    min-width: 54px;
    text-align: end;
    font-variant-numeric: tabular-nums;
  }
  .ab-pdpr__bd-pct {
    font-size: 11px;
    color: var(--ab-pdpr-ink3);
    font-weight: 500;
  }

  .ab-pdpr__cta {
    background: var(--ab-pdpr-soft-bg);
    min-width: 240px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 14px;
    border-inline-start: 1px solid var(--ab-pdpr-soft-line) !important;
  }
  .ab-pdpr__cta-eb {
    font-size: 11px;
    letter-spacing: 2px;
    font-weight: 700;
    color: var(--ab-pdpr-soft-ink);
    text-transform: uppercase;
  }
  .ab-pdpr__cta-copy {
    font-size: 13px;
    color: var(--ab-pdpr-ink2);
    line-height: 1.55;
  }

  /* PHOTOS */
  .ab-pdpr__photos {
    margin-block-end: 24px;
    border: 1px solid var(--ab-pdpr-line);
    background: var(--ab-pdpr-bg);
  }
  .ab-pdpr__photos-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    border-block-end: 1px solid var(--ab-pdpr-line);
  }
  .ab-pdpr__photos-eb {
    font-size: 11px;
    letter-spacing: 2px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ab-pdpr-soft-ink);
  }
  .ab-pdpr__photos-count {
    font-size: 12px;
    color: var(--ab-pdpr-ink3);
  }
  .ab-pdpr__photos-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 120px;
    gap: 8px;
    padding: 16px 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .ab-pdpr__photos-track::-webkit-scrollbar { height: 6px; }
  .ab-pdpr__photos-track::-webkit-scrollbar-track { background: var(--ab-pdpr-surf); }
  .ab-pdpr__photos-track::-webkit-scrollbar-thumb { background: var(--ab-pdpr-line2); }
  .ab-pdpr__photo {
    height: 120px;
    width: 120px;
    flex-shrink: 0;
    scroll-snap-align: start;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    background: var(--ab-pdpr-surf);
  }
  .ab-pdpr__photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* FILTERS */
  .ab-pdpr__filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-block-end: 24px;
    flex-wrap: wrap;
  }
  .ab-pdpr__filter-group {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
  }
  .ab-pdpr__chip {
    border: 1px solid var(--ab-pdpr-line);
    background: var(--ab-pdpr-bg);
    padding: 9px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ab-pdpr-ink2);
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 150ms ease;
    letter-spacing: 0.2px;
  }
  .ab-pdpr__chip:hover {
    border-color: var(--ab-pdpr-soft-ink);
    color: var(--ab-pdpr-soft-ink);
  }
  .ab-pdpr__chip.is-active {
    background: var(--ab-pdpr-deep);
    border-color: var(--ab-pdpr-deep);
    color: var(--ab-pdpr-bg);
  }
  .ab-pdpr__chip svg { width: 12px; height: 12px; }
  .ab-pdpr__chip-count {
    font-size: 11px;
    opacity: 0.65;
    font-weight: 500;
  }
  .ab-pdpr__sort {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--ab-pdpr-ink3);
    font-weight: 500;
  }
  .ab-pdpr__sort select {
    font-family: inherit;
    border: 1px solid var(--ab-pdpr-line);
    background: var(--ab-pdpr-bg);
    padding: 9px 32px 9px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ab-pdpr-deep);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%230b1220' stroke-width='1.5' stroke-linecap='square'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    letter-spacing: 0.4px;
  }
  .ab-pdpr__sort select:focus {
    outline: none;
    border-color: var(--ab-pdpr-accent);
  }

  /* REVIEW CARDS */
  .ab-pdpr__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-block-end: 32px;
  }
  /* Single review → take the full width instead of awkwardly hugging
     the left half. Triggered by Liquid when the source has exactly one
     review, or by JS when a filter narrows the visible set down to one. */
  .ab-pdpr__list.ab-pdpr__list--single { grid-template-columns: 1fr; }
  .ab-pdpr__card {
    border: 1px solid var(--ab-pdpr-line);
    background: var(--ab-pdpr-bg);
    padding: 26px 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: border-color 150ms ease;
  }
  .ab-pdpr__card:hover { border-color: var(--ab-pdpr-line2); }
  .ab-pdpr__card[hidden] { display: none; }
  .ab-pdpr__card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
  }
  .ab-pdpr__card-stars {
    display: flex;
    gap: 2px;
    color: var(--ab-pdpr-accent);
  }
  .ab-pdpr__card-stars svg { width: 14px; height: 14px; }
  .ab-pdpr__card-date {
    font-size: 11px;
    color: var(--ab-pdpr-ink3);
    letter-spacing: 0.4px;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
  }
  .ab-pdpr__card-author {
    display: flex;
    gap: 12px;
    align-items: center;
  }
  .ab-pdpr__avatar {
    width: 36px;
    height: 36px;
    background: var(--ab-pdpr-soft-bg);
    border: 1px solid var(--ab-pdpr-soft-line);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--ab-pdpr-soft-ink);
    letter-spacing: -0.2px;
    flex-shrink: 0;
  }
  .ab-pdpr__author-line {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
  }
  .ab-pdpr__author-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--ab-pdpr-deep);
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: -0.1px;
  }
  .ab-pdpr__verified {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    letter-spacing: 1.4px;
    font-weight: 700;
    background: var(--ab-pdpr-mint);
    color: var(--ab-pdpr-bg);
    padding: 3px 6px;
    text-transform: uppercase;
  }
  .ab-pdpr__verified svg { width: 9px; height: 9px; }
  .ab-pdpr__author-meta {
    font-size: 11px;
    color: var(--ab-pdpr-ink3);
    font-weight: 500;
    letter-spacing: 0.2px;
  }

  .ab-pdpr__card-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--ab-pdpr-deep);
    letter-spacing: -0.3px;
    margin: 0;
    line-height: 1.3;
  }
  .ab-pdpr__card-body {
    font-size: 14px;
    line-height: 1.65;
    color: var(--ab-pdpr-ink2);
    margin: 0;
  }

  .ab-pdpr__card-thumbs {
    display: flex;
    gap: 6px;
    margin-block-start: 2px;
    flex-wrap: wrap;
  }
  .ab-pdpr__thumb {
    width: 64px;
    height: 64px;
    background: var(--ab-pdpr-surf);
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
  }
  .ab-pdpr__thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .ab-pdpr__card-attrs {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    padding-block-start: 12px;
    border-block-start: 1px dashed var(--ab-pdpr-line);
  }
  .ab-pdpr__attr {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .ab-pdpr__attr-label {
    font-size: 10px;
    letter-spacing: 1.4px;
    color: var(--ab-pdpr-ink3);
    font-weight: 600;
    text-transform: uppercase;
  }
  .ab-pdpr__attr-value {
    font-size: 12px;
    color: var(--ab-pdpr-deep);
    font-weight: 600;
  }

  .ab-pdpr__card-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block-start: 8px;
    border-block-start: 1px solid var(--ab-pdpr-line);
    margin-block-start: auto;
    font-size: 11px;
  }
  .ab-pdpr__helpful {
    display: flex;
    gap: 14px;
    align-items: center;
    color: var(--ab-pdpr-ink3);
    font-weight: 600;
    letter-spacing: 0.4px;
  }
  .ab-pdpr__helpful button {
    background: transparent;
    border: 0;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--ab-pdpr-ink3);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 0;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    transition: color 150ms ease;
  }
  .ab-pdpr__helpful button:hover { color: var(--ab-pdpr-accent); }
  .ab-pdpr__helpful button.is-voted {
    color: var(--ab-pdpr-accent);
    border-color: var(--ab-pdpr-accent);
    background: var(--ab-pdpr-soft-bg);
  }
  .ab-pdpr__helpful svg { width: 13px; height: 13px; }
  .ab-pdpr__share-link {
    color: var(--ab-pdpr-ink3);
    cursor: pointer;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
  }

  /* Merchant reply */
  .ab-pdpr__reply {
    margin-block-start: 10px;
    background: var(--ab-pdpr-soft-bg);
    border-inline-start: 3px solid var(--ab-pdpr-accent);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .ab-pdpr__reply-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ab-pdpr-soft-ink);
  }
  .ab-pdpr__reply-head svg { width: 11px; height: 11px; }
  .ab-pdpr__reply-body {
    font-size: 13px;
    color: var(--ab-pdpr-ink2);
    line-height: 1.55;
    font-style: italic;
  }

  /* PAGER */
  .ab-pdpr__pager {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block-start: 24px;
    border-block-start: 1px solid var(--ab-pdpr-line);
    gap: 20px;
    flex-wrap: wrap;
  }
  .ab-pdpr__pager-info {
    font-size: 12px;
    color: var(--ab-pdpr-ink3);
    letter-spacing: 0.4px;
    font-weight: 500;
  }
  .ab-pdpr__pager-info strong {
    color: var(--ab-pdpr-deep);
    font-weight: 700;
  }
  .ab-pdpr__pager-pages {
    display: flex;
    gap: 4px;
    align-items: center;
  }
  .ab-pdpr__page {
    min-width: 36px;
    height: 36px;
    border: 1px solid var(--ab-pdpr-line);
    background: var(--ab-pdpr-bg);
    font-size: 12px;
    font-weight: 700;
    color: var(--ab-pdpr-ink2);
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 150ms ease;
    padding: 0 8px;
  }
  .ab-pdpr__page:hover {
    border-color: var(--ab-pdpr-soft-ink);
    color: var(--ab-pdpr-soft-ink);
  }
  .ab-pdpr__page.is-active {
    background: var(--ab-pdpr-deep);
    color: var(--ab-pdpr-bg);
    border-color: var(--ab-pdpr-deep);
  }
  .ab-pdpr__page.arrow {
    padding: 0 14px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    font-size: 11px;
  }
  .ab-pdpr__page[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
  }

  /* MODAL */
  .ab-pdpr__overlay {
    position: fixed;
    inset: 0;
    background: rgba(11, 18, 32, 0.78);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms ease, visibility 0s linear 200ms;
  }
  .ab-pdpr__overlay.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 200ms ease, visibility 0s;
  }
  .ab-pdpr__modal {
    background: var(--ab-pdpr-bg);
    max-width: 560px;
    width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    border-block-start: 4px solid var(--ab-pdpr-accent);
  }
  .ab-pdpr__modal-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 28px 32px 0;
    gap: 16px;
  }
  .ab-pdpr__modal-title {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -1px;
    color: var(--ab-pdpr-deep);
    margin: 0;
    line-height: 1.05;
  }
  .ab-pdpr__modal-title em {
    font-style: italic;
    color: var(--ab-pdpr-accent);
  }
  .ab-pdpr__modal-close {
    background: transparent;
    border: 0;
    font-size: 24px;
    cursor: pointer;
    color: var(--ab-pdpr-ink3);
    padding: 0;
    font-family: inherit;
    line-height: 1;
  }
  .ab-pdpr__modal-sub {
    font-size: 13px;
    color: var(--ab-pdpr-ink2);
    margin: 8px 32px 0;
    line-height: 1.55;
  }
  .ab-pdpr__modal-body {
    padding: 24px 32px 32px;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .ab-pdpr__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .ab-pdpr__field label {
    font-size: 11px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--ab-pdpr-soft-ink);
    font-weight: 700;
  }
  .ab-pdpr__field input,
  .ab-pdpr__field textarea {
    font-family: inherit;
    border: 1px solid var(--ab-pdpr-line);
    background: var(--ab-pdpr-bg);
    padding: 12px 14px;
    font-size: 14px;
    color: var(--ab-pdpr-ink);
    transition: border-color 150ms ease;
  }
  .ab-pdpr__field input:focus,
  .ab-pdpr__field textarea:focus {
    outline: none;
    border-color: var(--ab-pdpr-accent);
  }
  .ab-pdpr__field textarea {
    min-height: 110px;
    resize: vertical;
  }
  .ab-pdpr__field-error {
    color: #DC2626;
    font-size: 12px;
    margin: -6px 0 0;
  }

  /* Photo upload — dashed dropzone + thumbnail grid */
  .ab-pdpr__upload {
    position: relative;
    border: 1.5px dashed var(--ab-pdpr-line);
    border-radius: 12px;
    background: var(--ab-pdpr-soft-bg);
    padding: 18px 14px;
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease;
  }
  .ab-pdpr__upload.is-drag,
  .ab-pdpr__upload:hover {
    border-color: var(--ab-pdpr-accent);
    background: var(--ab-pdpr-soft-line);
  }
  .ab-pdpr__upload input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
  }
  .ab-pdpr__upload-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
    color: var(--ab-pdpr-ink3);
    font-size: 13px;
    pointer-events: none;
  }
  .ab-pdpr__upload-prompt svg { color: var(--ab-pdpr-soft-ink); margin-block-end: 2px; }
  .ab-pdpr__upload-prompt strong { color: var(--ab-pdpr-soft-ink); font-weight: 700; }
  .ab-pdpr__upload-prompt small { font-size: 11px; color: var(--ab-pdpr-ink3); }
  .ab-pdpr__upload-previews {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 8px;
    margin-block-start: 10px;
  }
  .ab-pdpr__upload-previews:empty { display: none; }
  .ab-pdpr__upload-thumb {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--ab-pdpr-line);
    background: var(--ab-pdpr-line);
  }
  .ab-pdpr__upload-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .ab-pdpr__upload-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 0;
    background: rgba(15, 23, 42, 0.8);
    color: #FFFFFF;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 160ms ease;
  }
  .ab-pdpr__upload-remove:hover { background: var(--ab-pdpr-accent); }
  /* Upload state overlays — thumbnail dims during upload, error border on fail */
  .ab-pdpr__upload-thumb[data-state="uploading"] img { opacity: 0.5; }
  .ab-pdpr__upload-thumb[data-state="error"] { border-color: #DC2626; }
  .ab-pdpr__upload-thumb[data-state="error"] img { opacity: 0.4; filter: grayscale(0.6); }
  .ab-pdpr__upload-state {
    position: absolute;
    inset: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }
  .ab-pdpr__upload-spinner {
    width: 22px;
    height: 22px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-block-start-color: #FFFFFF;
    border-radius: 50%;
    animation: ab-pdpr-spin 700ms linear infinite;
  }
  @keyframes ab-pdpr-spin { to { transform: rotate(360deg); } }
  .ab-pdpr__upload-error-icon {
    background: #DC2626;
    color: #FFFFFF;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .ab-pdpr__upload-error-msg {
    color: #DC2626;
    font-size: 12px;
    margin-block-start: 8px;
  }
  .ab-pdpr__upload-error-msg:empty { display: none; }
  .ab-pdpr__rate {
    display: flex;
    gap: 4px;
  }
  .ab-pdpr__rate button {
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 2px;
    color: var(--ab-pdpr-line2);
    transition: color 150ms ease;
    font-family: inherit;
  }
  .ab-pdpr__rate button svg { width: 28px; height: 28px; }
  .ab-pdpr__rate button.is-on,
  .ab-pdpr__rate:not(.is-locked) button:hover,
  .ab-pdpr__rate:not(.is-locked) button:hover ~ button {
    color: var(--ab-pdpr-accent);
  }
  .ab-pdpr__rate.is-locked button { color: var(--ab-pdpr-line2); }
  .ab-pdpr__rate.is-locked button.is-on { color: var(--ab-pdpr-accent); }

  .ab-pdpr__modal-success {
    text-align: center;
    padding: 12px 0;
  }
  .ab-pdpr__modal-success-eb {
    font-size: 11px;
    letter-spacing: 2.5px;
    color: var(--ab-pdpr-accent);
    font-weight: 700;
    text-transform: uppercase;
    margin-block-end: 6px;
  }
  .ab-pdpr__modal-success-msg {
    font-size: 16px;
    color: var(--ab-pdpr-deep);
    font-weight: 600;
  }

  /* RESPONSIVE */
  @media (max-width: 980px) {
    .ab-pdpr__title { font-size: 36px; }
    .ab-pdpr__summary { grid-template-columns: 1fr; }
    .ab-pdpr__summary > * { padding: 26px 24px; }
    .ab-pdpr__summary > * + * {
      border-inline-start: 0;
      border-block-start: 1px solid var(--ab-pdpr-line);
    }
    .ab-pdpr__cta {
      border-inline-start: 0 !important;
      border-block-start: 1px solid var(--ab-pdpr-soft-line) !important;
    }
    .ab-pdpr__avg-num { font-size: 72px; }
    .ab-pdpr__list { grid-template-columns: 1fr; }
    .ab-pdpr__head {
      flex-direction: column;
      align-items: flex-start;
      gap: 20px;
    }
    .ab-pdpr__cta-actions { width: 100%; }
  }
  @media (max-width: 560px) {
    .ab-pdpr__title { font-size: 30px; letter-spacing: -1px; }
    .ab-pdpr__avg-num { font-size: 64px; letter-spacing: -2px; }
    .ab-pdpr__avg-num small { font-size: 24px; }
    .ab-pdpr__summary > * { padding: 22px 20px; }
    .ab-pdpr__filters {
      flex-direction: column;
      align-items: flex-start;
      gap: 14px;
    }
    .ab-pdpr__sort {
      width: 100%;
      justify-content: space-between;
    }
    .ab-pdpr__sort select { flex: 1; max-width: 200px; }
    .ab-pdpr__card { padding: 22px 20px; }
    .ab-pdpr__card-top {
      flex-direction: column;
      align-items: flex-start;
      gap: 6px;
    }
    .ab-pdpr__card-attrs { gap: 12px; }
    .ab-pdpr__photos-track { padding: 14px 18px; }
    .ab-pdpr__photo { width: 96px; height: 96px; height: 96px; }
    .ab-pdpr__photos-head { padding: 16px 20px; }
    .ab-pdpr__btn-primary,
    .ab-pdpr__btn-ghost { font-size: 11px; padding: 12px 16px; }
    .ab-pdpr__modal { margin: 0; max-height: 100vh; }
    .ab-pdpr__modal-head,
    .ab-pdpr__modal-sub { padding-inline: 22px; }
    .ab-pdpr__modal-body { padding: 22px; }
    .ab-pdpr__modal-title { font-size: 24px; }
  }
/* END_SECTION:ab-pdp-reviews */

/* START_SECTION:ab-people-grid (INDEX:39) */
.ab-pg__cap { max-width: 1440px; margin-inline: auto; }
  .ab-pg__head { margin-block-end: 40px; }
  .ab-pg__eyebrow {
    margin: 0 0 14px;
    font-family: var(--font-body--family);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--ab-pg-eyebrow-c, var(--color-primary));
  }
  .ab-pg__headline {
    margin: 0;
    font-family: var(--font-body--family);
    font-weight: 800;
    font-size: var(--ab-pg-headline-size, 52px);
    letter-spacing: -1.6px;
    line-height: 1;
    color: var(--ab-pg-headline-c, var(--color-foreground));
  }
  .ab-pg__grid {
    display: grid;
    grid-template-columns: repeat(var(--ab-pg-cols, 4), minmax(0, 1fr));
    gap: var(--ab-pg-gap, 20px);
  }
  .ab-pg__card {
    background: var(--ab-pg-card-bg, var(--color-background));
    border: 1px solid var(--ab-pg-card-border-c, var(--color-border));
  }
  .ab-pg__card-img {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }
  .ab-pg__img-real { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .ab-pg__img-placeholder--warm  { background: repeating-linear-gradient(135deg, #c7846b 0 14px, #bb7860 14px 28px); }
  .ab-pg__img-placeholder--deep  { background: repeating-linear-gradient(135deg, #caa876 0 14px, #bd9a65 14px 28px); }
  .ab-pg__img-placeholder--terra { background: repeating-linear-gradient(135deg, #c7846b 0 14px, #bb7860 14px 28px); }
  .ab-pg__img-placeholder--navy  { background: repeating-linear-gradient(135deg, #2e3b4c 0 14px, #34445a 14px 28px); }
  .ab-pg__img-placeholder--teal  { background: repeating-linear-gradient(135deg, #7a9a92 0 14px, #6e8e86 14px 28px); }
  .ab-pg__img-placeholder--cream { background: repeating-linear-gradient(135deg, #f1f5f9 0 14px, #e2e8f0 14px 28px); }
  .ab-pg__img-placeholder--ink   { background: repeating-linear-gradient(135deg, #1b1613 0 14px, #221c18 14px 28px); }
  .ab-pg__card-body { padding: 16px; }
  .ab-pg__name {
    margin: 0;
    font-family: var(--font-body--family);
    font-size: 16px; font-weight: 700;
    color: var(--ab-pg-name-c, var(--color-foreground));
  }
  .ab-pg__role {
    margin: 4px 0 0;
    font-family: var(--font-body--family);
    font-size: 12px; font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--ab-pg-role-c, var(--color-primary));
  }
  .ab-pg__meta {
    margin: 6px 0 0;
    font-family: var(--font-body--family);
    font-size: 11px;
    letter-spacing: 0.5px;
    color: var(--ab-pg-meta-c, var(--color-foreground-muted));
  }

  @media screen and (max-width: 989px) {
    .ab-pg__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ab-pg__headline { font-size: 32px; }
  }
/* END_SECTION:ab-people-grid */

/* START_SECTION:ab-policy-page (INDEX:40) */
.ab-pp { font-family: var(--font-body--family); background: var(--color-background); }

  .ab-pp__cap {
    max-width: 880px;
    margin-inline: auto;
    padding-inline: var(--ab-pp-pad-inline, 48px);
  }

  /* Intro */
  .ab-pp__intro { margin-bottom: 40px; }
  .ab-pp__eyebrow {
    font-size: 11px;
    letter-spacing: 2.5px;
    color: var(--ab-pp-eyebrow-c);
    font-weight: 700;
    text-transform: uppercase;
    margin: 0;
  }
  .ab-pp__headline {
    font-size: var(--ab-pp-headline-size, 60px);
    font-weight: 800;
    letter-spacing: -2.2px;
    line-height: 0.92;
    margin: 14px 0 14px;
    color: var(--ab-pp-headline-c);
  }
  .ab-pp__headline em { font-style: italic; color: var(--ab-pp-headline-italic-c); font-weight: 800; }
  .ab-pp__lead {
    font-size: var(--ab-pp-lead-size, 17px);
    color: var(--ab-pp-lead-c);
    line-height: 1.6;
    margin: 0;
    max-width: 640px;
  }

  /* Body — prose styling for page.content (rich text from page editor) */
  .ab-pp__body {
    font-size: var(--ab-pp-body-size, 16px);
    color: var(--ab-pp-ink);
    line-height: 1.75;
  }
  .ab-pp__body > * + * { margin-top: 1.1em; }
  .ab-pp__app-blocks { margin-block-start: 32px; }
  .ab-pp__app-blocks > * + * { margin-block-start: 32px; }
  .ab-pp__body h2 {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.5px;
    line-height: 1.2;
    color: var(--ab-pp-headline-c);
    margin: 2em 0 0.6em;
  }
  .ab-pp__body h3 {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.2px;
    line-height: 1.3;
    color: var(--ab-pp-headline-c);
    margin: 1.6em 0 0.4em;
  }
  .ab-pp__body h4 {
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--ab-pp-eyebrow-c);
    margin: 1.8em 0 0.6em;
  }
  .ab-pp__body p { color: var(--ab-pp-ink); }
  .ab-pp__body a {
    color: var(--ab-pp-accent);
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
  }
  .ab-pp__body a:hover { text-decoration-thickness: 2px; }
  .ab-pp__body strong { color: var(--ab-pp-headline-c); font-weight: 700; }
  .ab-pp__body ul, .ab-pp__body ol { padding-left: 1.5em; }
  .ab-pp__body li { margin-bottom: 0.4em; }
  .ab-pp__body blockquote {
    border-left: 3px solid var(--ab-pp-accent);
    background: var(--ab-pp-soft-bg);
    padding: 18px 22px;
    color: var(--ab-pp-soft-ink);
    font-style: italic;
    margin-block: 1.4em;
  }
  .ab-pp__body code {
    background: var(--ab-pp-soft-bg);
    color: var(--ab-pp-soft-ink);
    padding: 2px 6px;
    font-size: 0.92em;
    border-radius: 2px;
  }
  .ab-pp__body hr {
    border: 0;
    border-top: 1px solid var(--ab-pp-line);
    margin-block: 2em;
  }
  .ab-pp__body img { max-width: 100%; height: auto; margin-block: 1em; }
  .ab-pp__body table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--ab-pp-line);
    font-size: 0.95em;
    margin-block: 1.4em;
  }
  .ab-pp__body th, .ab-pp__body td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--ab-pp-line);
  }
  .ab-pp__body th {
    background: var(--ab-pp-soft-bg);
    font-weight: 700;
    color: var(--ab-pp-soft-ink);
  }
  .ab-pp__body tr:last-child td { border-bottom: 0; }

  /* Bottom CTA band */
  .ab-pp__cta {
    margin-top: 72px;
    background: var(--ab-pp-cta-bg);
    color: #fff;
    padding: 48px 56px;
    position: relative;
    overflow: hidden;
  }
  .ab-pp__cta-kilim {
    position: absolute; inset: 0;
    opacity: 0.3;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M0 40 L40 0 L80 40 L40 80 Z' fill='none' stroke='%2367e8f9' stroke-width='1.2' opacity='0.14'/%3E%3Cpath d='M20 40 L40 20 L60 40 L40 60 Z' fill='none' stroke='%23ffffff' stroke-width='1' opacity='0.08'/%3E%3Ccircle cx='40' cy='40' r='2' fill='%2367e8f9' opacity='0.28'/%3E%3C/svg%3E");
  }
  .ab-pp__cta-inner { position: relative; }
  .ab-pp__eyebrow--cta { color: var(--ab-pp-cta-headline-italic-c); }
  .ab-pp__cta-headline {
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -1.2px;
    line-height: 1;
    margin: 14px 0 14px;
    color: var(--ab-pp-cta-headline-c);
  }
  .ab-pp__cta-headline em { font-style: italic; color: var(--ab-pp-cta-headline-italic-c); font-weight: 800; }
  .ab-pp__cta-lead {
    font-size: 15.5px;
    color: var(--ab-pp-cta-lead-c);
    line-height: 1.6;
    margin: 0 0 22px;
    max-width: 540px;
  }
  .ab-pp__cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--ab-pp-cta-btn-bg);
    color: var(--ab-pp-cta-btn-text);
    font-family: inherit;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 13px;
    padding: 16px 30px;
    text-decoration: none;
  }
  .ab-pp__cta-btn:hover { filter: brightness(1.08); }

  @media screen and (max-width: 989px) {
    .ab-pp { padding-block: var(--ab-pp-pad-top-mb, 40px) var(--ab-pp-pad-bottom-mb, 56px); }
    .ab-pp__cap { padding-inline: var(--ab-pp-pad-inline-mb, 24px); }
    .ab-pp__headline { font-size: 44px; }
    .ab-pp__cta { padding: 36px 28px; }
    .ab-pp__cta-headline { font-size: 28px; }
  }
/* END_SECTION:ab-policy-page */

/* START_SECTION:ab-recently-viewed (INDEX:41) */
.ab-rv {
    margin-top:    var(--ab-rv-margin-top, 40px);
    margin-bottom: var(--ab-rv-margin-bottom, 40px);
    margin-left:   var(--ab-rv-margin-left, 0px);
    margin-right:  var(--ab-rv-margin-right, 0px);
    padding-top:    var(--ab-rv-pad-top, 40px);
    padding-bottom: var(--ab-rv-pad-bottom, 40px);
  }

  .ab-rv__cap {
    max-width: 1440px;
    margin-inline: auto;
    padding-left:  calc(var(--ab-rv-pad-left, 48px) * var(--ab-rv-scale, 1));
    padding-right: calc(var(--ab-rv-pad-right, 48px) * var(--ab-rv-scale, 1));
  }

  .ab-rv__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-block-end: 40px;
  }

  .ab-rv__eyebrow {
    margin: 0 0 10px;
    font-family: var(--font-body--family);
    font-weight: 700;
    font-size: var(--ab-rv-eyebrow-size, 11px);
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--ab-rv-eyebrow-c, var(--color-primary));
  }

  .ab-rv__headline {
    margin: 0;
    font-family: var(--font-body--family);
    font-weight: 800;
    font-size: calc(var(--ab-rv-headline-size, 64px) * var(--ab-rv-scale, 1));
    letter-spacing: -2px;
    line-height: 0.95;
    color: var(--ab-rv-headline-c, var(--color-foreground));
  }

  .ab-rv__headline-accent {
    color: var(--ab-rv-headline-accent-c, var(--color-primary));
  }

  .ab-rv__body {
    margin: 0;
    font-family: var(--font-body--family);
    font-weight: 400;
    font-size: var(--ab-rv-body-size, 15px);
    line-height: 1.55;
    color: var(--ab-rv-body-c, var(--color-foreground-muted));
    max-width: 360px;
  }

  /* Viewport: wraps the carousel + holds absolute-positioned arrows */
  .ab-rv__viewport { position: relative; }

  /* Arrows: circular, vertically centered, overlay the carousel edges.
     Hidden by default (button[hidden]); JS un-hides only when the grid
     actually overflows (more cards than columns). */
  .ab-rv__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid var(--ab-rv-line, #E2E8F0);
    background: var(--ab-rv-arrow-bg, #FFFFFF);
    color: var(--ab-rv-arrow-c, #0B1220);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(11, 18, 32, 0.08);
    transition: opacity 150ms ease, background-color 150ms ease, color 150ms ease, transform 150ms ease;
    padding: 0;
  }
  .ab-rv__arrow:hover {
    background: var(--ab-rv-arrow-hover-bg, var(--ab-rv-accent, #0891B2));
    color: var(--ab-rv-arrow-hover-c, #FFFFFF);
    border-color: transparent;
  }
  .ab-rv__arrow[hidden] { display: none; }
  .ab-rv__arrow[disabled] {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
  }
  .ab-rv__arrow--prev { left: -22px; }
  .ab-rv__arrow--next { right: -22px; }

  /* Default: CSS grid (N columns, items wrap into rows) */
  .ab-rv__grid {
    display: grid;
    grid-template-columns: repeat(var(--ab-rv-cols, 4), minmax(0, 1fr));
    gap: var(--ab-rv-grid-gap, 16px);
  }

  /* Carousel mode: flex + horizontal scroll-snap. N cards visible at once;
     overflow becomes a swipe-/drag-/scroll-snap carousel. No JS dependency. */
  .ab-rv__grid--carousel {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: var(--ab-rv-grid-gap, 16px);
    padding-bottom: 14px;
    -webkit-overflow-scrolling: touch;
    /* Slim, branded scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--ab-rv-line, #E2E8F0) transparent;
  }
  .ab-rv__grid--carousel::-webkit-scrollbar { height: 6px; }
  .ab-rv__grid--carousel::-webkit-scrollbar-track { background: transparent; }
  .ab-rv__grid--carousel::-webkit-scrollbar-thumb {
    background: var(--ab-rv-line, #E2E8F0);
    border-radius: 3px;
  }
  .ab-rv__grid--carousel::-webkit-scrollbar-thumb:hover {
    background: var(--ab-rv-accent, #0891B2);
  }

  /* Each card: 1/N of the row minus gap allocation, snap to start */
  .ab-rv__grid--carousel > * {
    flex: 0 0 calc((100% - (var(--ab-rv-cols, 4) - 1) * var(--ab-rv-grid-gap, 16px)) / var(--ab-rv-cols, 4));
    min-width: 0;
    scroll-snap-align: start;
  }

  /* Card visuals are provided by snippets/ab-bestseller-card.liquid
     (`.ab-card__*` classes + its own scoped stylesheet). We only style the
     grid and carousel chrome here. */

  @media screen and (max-width: 989px) {
    .ab-rv__head {
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;
    }
    .ab-rv__headline {
      font-size: 44px;
      letter-spacing: -1.4px;
    }
    /* Grid mode mobile: 2 cols */
    .ab-rv__grid:not(.ab-rv__grid--carousel) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    /* Carousel mode mobile: 2 cards visible per swipe */
    .ab-rv__grid--carousel { --ab-rv-cols: 2; }
  }

  @media screen and (max-width: 480px) {
    /* Carousel mode small mobile: 1.4 cards visible (peek next) */
    .ab-rv__grid--carousel { --ab-rv-cols: 1.4; }
    /* Grid mode stays 2 cols on small mobile too — per the user's
       brief: 4 products = 2 above + 2 below, never collapse to 1. */
  }

  /* Mobile spacing overrides (configurable from editor) */
  @media screen and (max-width: 749px) {
    .ab-rv {
      margin-top:     var(--ab-rv-mob-margin-top, 0px) !important;
      margin-bottom:  var(--ab-rv-mob-margin-bottom, 0px) !important;
      margin-left:    var(--ab-rv-mob-margin-left, 0px) !important;
      margin-right:   var(--ab-rv-mob-margin-right, 0px) !important;
      padding-top:    var(--ab-rv-mob-pad-top, 20px) !important;
      padding-bottom: var(--ab-rv-mob-pad-bottom, 20px) !important;
    }
    .ab-rv__cap {
      padding-left:  var(--ab-rv-mob-pad-left, 24px) !important;
      padding-right: var(--ab-rv-mob-pad-right, 24px) !important;
    }
  }
/* END_SECTION:ab-recently-viewed */

/* START_SECTION:ab-reviews (INDEX:42) */
.ab-rev {
    position: relative;
  }

  .ab-rev__cap {
    max-width: 1440px;
    margin-inline: auto;
    padding-inline: var(--ab-rev-pad-inline, 48px);
  }

  .ab-rev__grid {
    display: grid;
    gap: var(--ab-rev-grid-gap, 56px);
    align-items: start;
  }

  .ab-rev__eyebrow {
    margin: 0 0 12px;
    font-family: var(--font-body--family);
    font-weight: 700;
    font-size: var(--ab-rev-eyebrow-size, 11px);
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--ab-rev-eyebrow-c, var(--color-primary));
  }

  .ab-rev__rating {
    margin: 0;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-family: var(--font-body--family);
    font-weight: 800;
    font-size: var(--ab-rev-rating-size, 96px);
    letter-spacing: -3px;
    line-height: 1;
    color: var(--ab-rev-rating-c, var(--color-primary));
  }

  .ab-rev__rating-suffix {
    font-size: var(--ab-rev-rating-suffix-size, 36px);
    font-weight: 500;
    letter-spacing: -1px;
    color: var(--ab-rev-rating-suffix-c, var(--color-foreground-muted));
  }

  .ab-rev__stars {
    margin-block-start: 8px;
    display: inline-flex;
    gap: 2px;
    color: var(--ab-rev-stars-c, var(--color-primary));
  }

  .ab-rev__stars svg {
    width: var(--ab-rev-stars-size, 20px);
    height: var(--ab-rev-stars-size, 20px);
  }

  .ab-rev__meta {
    margin: 12px 0 0;
    font-family: var(--font-body--family);
    font-size: var(--ab-rev-meta-size, 13px);
    color: var(--ab-rev-meta-c, var(--color-foreground-muted));
    line-height: 1.5;
  }

  .ab-rev__link {
    display: inline-block;
    margin-block-start: 20px;
    padding-block-end: 3px;
    font-family: var(--font-body--family);
    font-weight: 700;
    font-size: var(--ab-rev-link-size, 12px);
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--ab-rev-link-c, var(--color-foreground));
    border-block-end: 2px solid currentColor;
    text-decoration: none;
  }

  .ab-rev__cards {
    display: grid;
    grid-template-columns: repeat(var(--ab-rev-cols, 2), minmax(0, 1fr));
    gap: var(--ab-rev-col-gap, 24px);
  }

  .ab-rev__card {
    background: var(--ab-rev-card-bg, var(--color-background));
    border: 1px solid var(--ab-rev-card-border-c, var(--color-border));
    border-radius: var(--ab-rev-card-radius, 0px);
    padding: var(--ab-rev-card-pad, 24px);
  }

  .ab-rev__card-stars {
    display: inline-flex;
    gap: 1px;
    color: var(--ab-rev-stars-c, var(--color-primary));
  }

  .ab-rev__card-stars svg {
    width: 12px;
    height: 12px;
  }

  .ab-rev__quote {
    margin: 12px 0 16px;
    font-family: var(--font-body--family);
    font-weight: var(--ab-rev-quote-weight, 500);
    font-size: var(--ab-rev-quote-size, 15px);
    line-height: 1.5;
    color: var(--ab-rev-quote-c, var(--color-foreground));
  }

  .ab-rev__attr {
    margin: 0;
    font-family: var(--font-body--family);
    font-size: var(--ab-rev-attr-size, 11px);
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ab-rev-attr-c, var(--color-foreground-muted));
  }

  @media screen and (max-width: 989px) {
    .ab-rev__grid {
      grid-template-columns: 1fr !important;
      gap: 40px;
    }
    .ab-rev__rating {
      font-size: 72px;
    }
    .ab-rev__cards {
      grid-template-columns: 1fr;
    }
  }
/* END_SECTION:ab-reviews */

/* START_SECTION:ab-search-results (INDEX:43) */
/* Section padding — driven by the 8 schema settings (4 desktop + 4 mobile).
     The mobile values kick in at ≤880px. */
  .ab-sr {
    padding-top: var(--ab-sr-pad-t, 0);
    padding-right: var(--ab-sr-pad-r, 0);
    padding-bottom: var(--ab-sr-pad-b, 0);
    padding-left: var(--ab-sr-pad-l, 0);
  }
  @media screen and (max-width: 880px) {
    .ab-sr {
      padding-top: var(--ab-sr-pad-t-m, 0) !important;
      padding-right: var(--ab-sr-pad-r-m, 0) !important;
      padding-bottom: var(--ab-sr-pad-b-m, 0) !important;
      padding-left: var(--ab-sr-pad-l-m, 0) !important;
    }
  }

  .ab-sr__bar-cap, .ab-sr__suggestions-cap, .ab-sr__collections-cap, .ab-sr__products-cap { max-width: 1440px; margin-inline: auto; }

  .ab-sr__eyebrow {
    margin: 0 0 10px;
    font-family: var(--font-body--family);
    font-size: 11px;
    letter-spacing: 2.5px;
    color: var(--ab-sr-eyebrow-c, var(--color-primary));
    font-weight: 700;
    text-transform: uppercase;
  }
  .ab-sr__sub-eyebrow {
    margin: 0 0 14px;
    font-family: var(--font-body--family);
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--ab-sr-eyebrow-c, var(--color-primary));
    font-weight: 700;
    text-transform: uppercase;
  }
  .ab-sr__bar-row { display: flex; gap: 14px; align-items: center; }
  .ab-sr__bar {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 2px solid var(--ab-sr-bar-border-c, var(--color-foreground));
    background: var(--ab-sr-bar-bg, var(--color-background));
    padding: 8px 20px;
    border-radius: 10px;
    transition: border-color 180ms ease;
  }
  /* AB-DEPLOY-CHECK-20260616-C focus-color */
  .ab-sr__bar:focus-within { border-color: #0891b2; }
  .ab-sr__bar svg { color: var(--color-foreground); transition: color 180ms ease; }
  .ab-sr__bar:focus-within svg { color: #0891b2; }
  .ab-sr__input {
    flex: 1; border: 0; outline: none;
    font-family: var(--font-body--family);
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.3px;
    color: var(--ab-sr-input-c, var(--color-foreground));
    background: transparent;
    min-width: 0;
  }
  .ab-sr__input:focus,
  .ab-sr__input:focus-visible {
    outline: 0 !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
  }
  .ab-sr__count {
    font-family: var(--font-body--family);
    font-size: 14px;
    color: var(--color-foreground-muted);
    font-weight: 600;
    flex-shrink: 0;
  }

  .ab-sr__suggestions-cap {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    font-family: var(--font-body--family);
    font-size: 11px;
    letter-spacing: 1.5px;
    color: var(--color-foreground-muted);
    font-weight: 700;
    text-transform: uppercase;
  }
  .ab-sr__suggestion {
    background: var(--ab-sr-suggestion-bg, rgb(var(--color-foreground-rgb) / var(--opacity-5)));
    border: 1px solid var(--ab-sr-suggestion-border-c, var(--color-border));
    padding: 6px 12px;
    color: var(--color-foreground);
    font-weight: 700;
    text-decoration: none;
  }

  .ab-sr__collections-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
  .ab-sr__collection {
    display: flex; gap: 14px; align-items: center;
    border: 1px solid var(--ab-sr-coll-card-border-c, var(--color-border));
    padding: 12px;
    text-decoration: none;
    color: inherit;
  }
  .ab-sr__collection-img {
    width: 60px; aspect-ratio: 1 / 1;
    overflow: hidden;
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    flex-shrink: 0;
  }
  .ab-sr__collection-img-real { width: 100%; height: 100%; object-fit: cover; }
  .ab-sr__collection-title {
    margin: 0;
    font-family: var(--font-body--family);
    font-size: 14px; font-weight: 700;
    color: var(--color-foreground);
  }
  .ab-sr__collection-meta {
    margin: 3px 0 0;
    font-family: var(--font-body--family);
    font-size: 11px;
    color: var(--color-foreground-muted);
    letter-spacing: 0.5px;
  }

  .ab-sr__grid {
    display: grid;
    grid-template-columns: repeat(var(--ab-sr-cols, 3), minmax(0, 1fr));
    gap: var(--ab-sr-grid-gap, 16px);
  }
  .ab-sr__grid > * { min-width: 0; }

  .ab-sr__empty {
    text-align: center;
    padding: 60px 24px;
  }
  .ab-sr__empty-title {
    margin: 0 0 8px;
    font-family: var(--font-body--family);
    font-size: 24px;
    font-weight: 800;
    color: var(--color-foreground);
  }
  .ab-sr__empty-body {
    margin: 0 0 20px;
    font-family: var(--font-body--family);
    font-size: 14px;
    color: var(--color-foreground-muted);
  }
  .ab-sr__empty-cta {
    display: inline-block;
    background: var(--color-foreground);
    color: var(--color-background);
    padding: 14px 24px;
    font-family: var(--font-body--family);
    font-size: 12px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    font-weight: 700;
    text-decoration: none;
  }

  @media screen and (max-width: 989px) {
    .ab-sr__collections-grid { grid-template-columns: 1fr; }
    .ab-sr__input { font-size: 16px; }
  }
  /* Mirrors ab-collection responsive: 2 cols from tablet down, view-as
     hidden where the choice no longer applies. Card snippet handles its
     own ≤620px compact mode. Padding overrides use !important to win
     against the inline style="padding: ..." on each wrapper. */
  /* Per-element padding — set on section root from schema; mobile values
     override at ≤880px. All four wrappers follow the same TRBL pattern. */
  .ab-sr__bar-wrap   { padding: var(--bw-t) var(--bw-r) var(--bw-b) var(--bw-l); }
  .ab-sr__suggestions { padding: var(--su-t) var(--su-r) var(--su-b) var(--su-l); }
  .ab-sr__toolbar    { padding: var(--tb-t) var(--tb-r) var(--tb-b) var(--tb-l); }
  .ab-sr__products   { padding: var(--pr-t) var(--pr-r) var(--pr-b) var(--pr-l); }

  @media screen and (max-width: 880px) {
    .ab-sr__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .ab-sr__view-as { display: none !important; }
    .ab-sr__bar-row { flex-direction: column; align-items: flex-start; }
    .ab-sr__bar { width: 100%; }
    .ab-sr__bar-wrap   { padding: var(--bw-tm) var(--bw-rm) var(--bw-bm) var(--bw-lm); }
    .ab-sr__suggestions { padding: var(--su-tm) var(--su-rm) var(--su-bm) var(--su-lm); }
    .ab-sr__toolbar    { padding: var(--tb-tm) var(--tb-rm) var(--tb-bm) var(--tb-lm); }
    .ab-sr__products   { padding: var(--pr-tm) var(--pr-rm) var(--pr-bm) var(--pr-lm); }
  }

  /* Suggestions list — anchor pills sit inline with the label */
  .ab-sr__suggestion-list {
    display: inline-flex; gap: 8px; flex-wrap: wrap;
  }

  /* Pagination — mirrors .ab-coll__pagination so both pages share visual language */
  .ab-sr__pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-block-start: 56px;
  }
  .ab-sr__pag-link {
    min-width: 40px;
    height: 40px;
    padding-inline: 12px;
    border: 1px solid var(--color-border);
    background: var(--color-background);
    color: var(--color-foreground);
    font-family: var(--font-body--family);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .ab-sr__pag-link:hover {
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }
  .ab-sr__pag-link.is-active {
    background: var(--color-foreground);
    color: var(--color-background);
    border-color: var(--color-foreground);
  }
  .ab-sr__pag-link.is-gap {
    border: 0;
    cursor: default;
    color: var(--color-foreground-muted);
  }
  .ab-sr__pag-link--next {
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
  }

  /* ---------- Toolbar (mirrors collection toolbar visually) ---------- */
  .ab-sr__toolbar {
    background: var(--color-background);
    border-block: 1px solid var(--color-border);
    z-index: 5;
  }
  /* Toolbar is always in normal flow — no sticky/fixed behaviour. The IO
     below still toggles body.ab-toolbar-pinned because the header (in
     ab-header-v2) reads it to decide when to pin itself. */
  .ab-sr__toolbar-cap {
    max-width: 1440px;
    margin-inline: auto;
    padding-block: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
    color: var(--color-foreground);
  }
  .ab-sr__toolbar-info {
    display: flex; align-items: center; gap: 14px;
    font-family: var(--font-body--family);
    font-size: 12px;
    width: clamp(100px, 7.5vw, 110px);
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .ab-sr__toolbar-count { font-weight: 600; opacity: 0.7; }

  .ab-sr__view-as {
    display: inline-flex; align-items: center; gap: 12px;
    flex: 0 0 auto;
  }
  .ab-sr__view-as-label {
    font-family: var(--font-body--family);
    font-size: 11px;
    letter-spacing: 1.5px;
    font-weight: 700;
    text-transform: uppercase;
    opacity: 0.7;
  }
  .ab-sr__view-as-btns { display: inline-flex; gap: 6px; }
  .ab-sr__view-as-btn {
    width: 32px; height: 32px;
    padding: 0;
    border: 1.5px solid var(--color-border);
    background: var(--color-background);
    color: var(--color-foreground);
    opacity: 0.45;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: opacity 150ms ease, border-color 150ms ease;
  }
  .ab-sr__view-as-btn:hover { opacity: 0.8; }
  .ab-sr__view-as-btn[aria-pressed="true"] {
    opacity: 1; border-color: currentColor; border-width: 2px;
  }

  .ab-sr__sort {
    position: relative; display: inline-block;
    flex: 0 0 auto;
    max-width: 220px;
    margin-inline-start: auto;
  }
  .ab-sr__sort-btn {
    max-width: 100%;
    list-style: none;
    cursor: pointer;
    border: 1px solid var(--color-border);
    background: var(--color-background);
    color: inherit;
    padding: 9px 14px;
    font-family: var(--font-body--family);
    font-size: 11px;
    letter-spacing: 1.5px;
    font-weight: 700;
    text-transform: uppercase;
    display: flex; align-items: center; gap: 8px;
  }
  .ab-sr__sort-btn > span:first-child {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
  }
  .ab-sr__sort-btn::-webkit-details-marker { display: none; }
  .ab-sr__sort[open] .ab-sr__sort-chev { transform: rotate(180deg); }
  .ab-sr__sort-menu {
    position: absolute; top: calc(100% + 6px); right: 0;
    min-width: 220px;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    list-style: none; margin: 0; padding: 6px 0;
    z-index: 50;
  }
  .ab-sr__sort-option {
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 8px 14px;
    font-family: var(--font-body--family);
    font-size: 12px;
    color: inherit;
    cursor: pointer;
  }
  .ab-sr__sort-option:hover { background: rgb(var(--color-foreground-rgb) / var(--opacity-5)); }
  .ab-sr__sort-option.is-active { font-weight: 700; color: var(--color-primary); }

  /* Sticky-stuck cosmetic: hide the count info on small screens once toolbar pins */
  @media (max-width: 989px) {
    .ab-sr__toolbar.is-sticky.is-stuck .ab-sr__toolbar-info { display: none; }
  }
/* END_SECTION:ab-search-results */

/* START_SECTION:ab-stats (INDEX:44) */
.ab-stats__cap {
    max-width: 1440px;
    margin-inline: auto;
    padding-inline: var(--ab-stats-pad-inline, 48px);
  }

  .ab-stats__grid {
    display: grid;
    grid-template-columns: repeat(var(--ab-stats-cols, 4), minmax(0, 1fr));
    gap: var(--ab-stats-gap, 24px);
  }

  .ab-stats__item {
    border-block-start: var(--ab-stats-bar-w, 2px) solid var(--ab-stats-bar-c, var(--color-foreground));
    padding-block-start: 14px;
    min-width: 0;
  }

  .ab-stats__num {
    margin: 0;
    font-family: var(--font-body--family);
    font-weight: 800;
    font-size: var(--ab-stats-num-size, 46px);
    letter-spacing: -1.4px;
    line-height: 1;
    color: var(--ab-stats-num-c, var(--color-primary));
  }

  .ab-stats__label {
    margin: 6px 0 0;
    font-family: var(--font-body--family);
    font-weight: 700;
    font-size: var(--ab-stats-label-size, 14px);
    letter-spacing: -0.2px;
    color: var(--ab-stats-label-c, var(--color-foreground));
  }

  .ab-stats__sub {
    margin: 4px 0 0;
    font-family: var(--font-body--family);
    font-size: var(--ab-stats-sub-size, 12px);
    line-height: 1.5;
    color: var(--ab-stats-sub-c, var(--color-foreground-muted));
  }

  @media screen and (max-width: 880px) {
    .ab-stats__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
    }
    .ab-stats__num { font-size: 36px; }
  }

  @media screen and (max-width: 480px) {
    .ab-stats__num { font-size: 30px; }
  }
/* END_SECTION:ab-stats */

/* START_SECTION:ab-sticky-atc (INDEX:45) */
.ab-satc {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--ab-satc-bg, #FFFFFF);
    border-block-start: 1px solid var(--ab-satc-line, #E2E8F0);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.08);
    z-index: 60;
    transform: translateY(100%);
    transition: transform 250ms cubic-bezier(0.4, 0.1, 0.2, 1);
  }
  .ab-satc.is-visible {
    transform: translateY(0);
  }
  .ab-satc__inner {
    max-width: 1600px;
    margin-inline: auto;
    padding: 14px 40px;
    display: flex;
    gap: 24px;
    align-items: center;
    font-family: var(--font-body--family);
  }
  .ab-satc__media {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    display: block;
    overflow: hidden;
    background: rgb(var(--color-foreground-rgb) / 0.06);
  }
  .ab-satc__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .ab-satc__info {
    flex: 0 1 320px;
    min-width: 0;
  }
  .ab-satc__eyebrow {
    font-size: 9px;
    letter-spacing: 2px;
    color: var(--ab-satc-eyebrow-c, #0891B2);
    font-weight: 800;
    text-transform: uppercase;
    margin-block-end: 3px;
  }
  .ab-satc__title {
    font-size: 16px;
    font-weight: 800;
    color: var(--ab-satc-title-c, #0B1220);
    letter-spacing: -0.4px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ab-satc__variant,
  .ab-satc__qty {
    flex-shrink: 0;
  }
  .ab-satc__variant-label {
    font-size: 8px;
    letter-spacing: 1.4px;
    color: var(--ab-satc-meta-c, #64748B);
    font-weight: 700;
    text-transform: uppercase;
    margin-block-end: 4px;
  }
  .ab-satc__variant-buttons {
    display: flex;
    gap: 4px;
  }
  .ab-satc__variant-btn {
    background: var(--ab-satc-bg, #FFFFFF);
    color: var(--ab-satc-variant-c, #0B1220);
    border: 1px solid var(--ab-satc-variant-border, #CBD5E1);
    padding: 7px 11px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 150ms ease;
  }
  .ab-satc__variant-btn.is-active {
    border: 2px solid var(--ab-satc-variant-active, #0B1220);
    padding: 6px 10px;
  }

  .ab-satc__qty-control {
    display: flex;
    border: 1px solid var(--ab-satc-variant-border, #CBD5E1);
  }
  .ab-satc__qty-btn {
    width: 32px;
    height: 32px;
    background: var(--ab-satc-bg, #FFFFFF);
    border: 0;
    cursor: pointer;
    color: var(--ab-satc-variant-c, #0B1220);
    font-size: 14px;
    font-family: inherit;
  }
  .ab-satc__qty-val {
    width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--ab-satc-variant-c, #0B1220);
    border-inline: 1px solid var(--ab-satc-variant-border, #CBD5E1);
  }

  .ab-satc__price-stack {
    margin-inline-start: auto;
    text-align: end;
    flex-shrink: 0;
  }
  .ab-satc__price-row {
    display: flex;
    gap: 8px;
    align-items: baseline;
    justify-content: flex-end;
  }
  .ab-satc__price {
    font-size: 24px;
    font-weight: 800;
    color: var(--ab-satc-price-c, #0891B2);
    letter-spacing: -0.6px;
  }
  .ab-satc__was {
    font-size: 13px;
    color: var(--ab-satc-was-c, #64748B);
    text-decoration: line-through;
  }
  .ab-satc__urgency {
    font-size: 10px;
    color: var(--ab-satc-urgency-c, #10B981);
    font-weight: 700;
    letter-spacing: 1px;
    margin-block-start: 2px;
  }

  .ab-satc__form { flex-shrink: 0; margin: 0; }
  .ab-satc__atc {
    background: var(--ab-satc-atc-bg, #0891B2);
    color: var(--ab-satc-atc-c, #FFFFFF);
    border: 1px solid transparent;
    padding: 14px 28px;
    font-size: 12px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
  }
  .ab-satc__atc:hover {
    background: var(--ab-satc-atc-bg-hover, #FFFFFF);
    color: var(--ab-satc-atc-c-hover, #0B1220);
    border-color: var(--ab-satc-atc-c-hover, #0B1220);
  }
  .ab-satc__atc-arr {
    display: inline-block;
    transition: transform 180ms ease;
  }
  .ab-satc__atc:hover .ab-satc__atc-arr { transform: translateX(3px); }

  @media (max-width: 760px) {
    .ab-satc__inner {
      padding: 12px 16px 18px;
      gap: 10px;
    }
    .ab-satc__media { width: 48px; height: 48px; }
    .ab-satc__variant,
    .ab-satc__qty { display: none; }
    .ab-satc__title { font-size: 12px; font-weight: 700; }
    .ab-satc__eyebrow { font-size: 8px; }
    .ab-satc__price { font-size: 14px; }
    .ab-satc__was { font-size: 10px; }
    .ab-satc__urgency { font-size: 9px; }
    .ab-satc__atc {
      padding: 13px 16px;
      font-size: 11px;
      letter-spacing: 1.4px;
    }
  }
/* END_SECTION:ab-sticky-atc */

/* START_SECTION:ab-testimonials (INDEX:46) */
.ab-rev { font-family: var(--font-body--family); }
  .ab-rev__cap { max-width: 1320px; margin-inline: auto; }

  /* Header */
  .ab-rev__head { margin-block-end: 40px; }
  .ab-rev__eyebrow {
    margin: 0 0 14px;
    font-size: 13px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--ab-rev-eyebrow-c, var(--color-primary));
    font-weight: 700;
  }
  .ab-rev__title {
    margin: 0;
    font-size: var(--ab-rev-headline-size, 64px);
    font-weight: 800;
    letter-spacing: var(--ab-rev-headline-ls, -2.5px);
    line-height: 0.92;
    text-transform: uppercase;
    color: var(--ab-rev-headline-c, var(--color-foreground));
    display: flex;
    flex-direction: column;
  }
  .ab-rev__h-line { display: block; }
  .ab-rev__h-line--accent { color: var(--ab-rev-headline-accent-c, var(--color-primary)); }

  .ab-rev__summary {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-block-start: 24px;
    font-size: 15px;
    color: var(--ab-rev-summary-c, var(--color-foreground-muted));
    flex-wrap: wrap;
  }
  .ab-rev__sum-stars {
    display: inline-flex;
    gap: 2px;
    color: var(--ab-rev-star-c, var(--color-primary));
  }
  .ab-rev__sum-score { font-weight: 700; color: var(--ab-rev-summary-score-c, var(--color-foreground)); }
  .ab-rev__sum-count { color: var(--ab-rev-summary-count-c, var(--color-foreground-muted)); }
  .ab-rev__verified {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ab-rev-summary-c, var(--color-foreground-muted));
    padding-inline-start: 12px;
    border-inline-start: 1px solid var(--color-border);
  }
  .ab-rev__verified svg { color: var(--ab-rev-verify-c, #14b8a6); }

  /* Viewport + arrows */
  .ab-rev__viewport { position: relative; }
  .ab-rev__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--ab-rev-cols-d, 4) - 1) * var(--ab-rev-gap, 24px)) / var(--ab-rev-cols-d, 4));
    gap: var(--ab-rev-gap, 24px);
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding: 4px;
    margin: -4px;
    scrollbar-width: none;
  }
  .ab-rev__track::-webkit-scrollbar { display: none; }

  .ab-rev__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--ab-rev-arrow-bg, var(--color-background));
    border: 1px solid var(--ab-rev-arrow-border-c, var(--color-border));
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--ab-rev-arrow-c, var(--color-foreground));
    box-shadow: 0 6px 20px rgba(11, 18, 32, 0.08);
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease, opacity 150ms ease;
    font: inherit;
  }
  .ab-rev__arrow:hover {
    background: var(--ab-rev-arrow-hover-bg, var(--color-foreground));
    color: var(--ab-rev-arrow-hover-c, var(--color-background));
    border-color: var(--ab-rev-arrow-hover-bg, var(--color-foreground));
  }
  .ab-rev__arrow:disabled { opacity: 0.35; cursor: default; }
  .ab-rev__arrow:disabled:hover {
    background: var(--ab-rev-arrow-bg, var(--color-background));
    color: var(--ab-rev-arrow-c, var(--color-foreground));
    border-color: var(--ab-rev-arrow-border-c, var(--color-border));
  }
  .ab-rev__arrow--prev { left: -22px; }
  .ab-rev__arrow--next { right: -22px; }

  /* Card */
  .ab-rev__card {
    scroll-snap-align: start;
    background: var(--ab-rev-card-bg, #f1f5f9);
    border: 1px solid var(--ab-rev-card-border-c, var(--color-border));
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: border-color 150ms ease, transform 150ms ease;
    min-width: 0;
  }
  .ab-rev__card:hover {
    border-color: var(--ab-rev-card-border-hover-c, var(--color-foreground-muted));
    transform: translateY(-2px);
  }

  .ab-rev__photo { position: relative; aspect-ratio: 1 / 1; overflow: hidden; }
  .ab-rev__photo-img,
  .ab-rev__photo-placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .ab-rev__body {
    padding: 24px 22px 26px;
    display: flex;
    flex-direction: column;
    flex: 1;
    text-align: center;
  }
  .ab-rev__text {
    font-size: 15px;
    line-height: 1.5;
    color: var(--ab-rev-text-c, var(--color-foreground-muted));
    margin: 0 0 20px;
    font-weight: 500;
    text-wrap: pretty;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .ab-rev__stars {
    display: inline-flex;
    gap: 3px;
    justify-content: center;
    margin: 0 auto 18px;
    color: var(--ab-rev-star-c, var(--color-primary));
  }

  .ab-rev__author {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--ab-rev-author-c, var(--color-foreground));
    margin-block-end: auto;
  }
  .ab-rev__verify {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--ab-rev-author-c, var(--color-foreground));
    color: var(--color-background);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
  }
  .ab-rev__product {
    margin: 16px 0 0;
    padding-block-start: 14px;
    border-block-start: 1px solid var(--ab-rev-card-border-c, var(--color-border));
    font-size: 12.5px;
    color: var(--ab-rev-product-c, var(--color-foreground-muted));
    letter-spacing: 0.2px;
  }
  .ab-rev__card:hover .ab-rev__product { color: var(--ab-rev-eyebrow-c, var(--color-primary)); }

  /* Responsive */
  @media screen and (max-width: 1100px) {
    .ab-rev__track {
      grid-auto-columns: calc((100% - (var(--ab-rev-cols-t, 3) - 1) * var(--ab-rev-gap, 24px)) / var(--ab-rev-cols-t, 3));
    }
  }
  @media screen and (max-width: 820px) {
    .ab-rev {
      padding-inline: var(--ab-rev-pad-inline-m, 24px) !important;
      padding-block: var(--ab-rev-pad-top-m, 56px) var(--ab-rev-pad-bottom-m, 56px) !important;
    }
    .ab-rev__title {
      font-size: var(--ab-rev-headline-size-m, 46px);
      letter-spacing: var(--ab-rev-headline-ls-m, -1.6px);
    }
    .ab-rev__track {
      grid-auto-columns: calc((100% - var(--ab-rev-gap, 24px)) / var(--ab-rev-cols-m, 1));
    }
    .ab-rev__arrow--prev { left: -8px; }
    .ab-rev__arrow--next { right: -8px; }
  }
  @media screen and (max-width: 560px) {
    .ab-rev__title { font-size: calc(var(--ab-rev-headline-size-m, 46px) * 0.74); letter-spacing: -1px; }
    .ab-rev__track {
      grid-auto-columns: 80%;
    }
    .ab-rev__summary { flex-wrap: wrap; }
  }
/* END_SECTION:ab-testimonials */

/* START_SECTION:ab-trust-badges (INDEX:47) */
.ab-trust-badges {
    border-block-start: 1px solid var(--ab-tb-border-c, transparent);
    border-block-end: 1px solid var(--ab-tb-border-c, transparent);
    margin-top:    var(--ab-tb-margin-top, 40px);
    margin-bottom: var(--ab-tb-margin-bottom, 40px);
    margin-left:   var(--ab-tb-margin-left, 0px);
    margin-right:  var(--ab-tb-margin-right, 0px);
    padding-top:    var(--ab-tb-pad-top, 22px);
    padding-bottom: var(--ab-tb-pad-bottom, 22px);
  }

  .ab-trust-badges__cap {
    max-width: 1440px;
    margin-inline: auto;
    padding-left:  var(--ab-tb-pad-left, 48px);
    padding-right: var(--ab-tb-pad-right, 48px);
  }

  .ab-trust-badges__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--ab-tb-gap, 32px);
  }

  /* Below 989px: 2-column grid, kept down to the smallest viewport
     (no 1-col fallback — user wants always 2 on mobile).
     Mobile gap is configurable via mobile_column_gap setting. */
  @media screen and (max-width: 989px) {
    .ab-trust-badges__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--ab-tb-mob-gap, 20px);
    }
    .ab-trust-badges__link {
      align-items: flex-start;
    }
  }

  /* Mobile spacing overrides (configurable from editor) */
  @media screen and (max-width: 749px) {
    .ab-trust-badges {
      margin-top:     var(--ab-tb-mob-margin-top, 0px) !important;
      margin-bottom:  var(--ab-tb-mob-margin-bottom, 0px) !important;
      margin-left:    var(--ab-tb-mob-margin-left, 0px) !important;
      margin-right:   var(--ab-tb-mob-margin-right, 0px) !important;
      padding-top:    var(--ab-tb-mob-pad-top, 20px) !important;
      padding-bottom: var(--ab-tb-mob-pad-bottom, 20px) !important;
    }
    .ab-trust-badges__cap {
      padding-left:  var(--ab-tb-mob-pad-left, 24px) !important;
      padding-right: var(--ab-tb-mob-pad-right, 24px) !important;
    }

    /* Odd-count orphan: when block count is odd, the last item lands alone
       in the 2-col grid. Span both columns + center its content. */
    .ab-trust-badges__grid > .ab-trust-badges__item:nth-child(odd):last-child {
      grid-column: 1 / -1;
      justify-self: center;
    }
  }

  .ab-trust-badges__link {
    display: flex;
    gap: 14px;
    align-items: center;
    color: inherit;
    text-decoration: none;
  }

  a.ab-trust-badges__link:hover .ab-trust-badges__heading {
    color: var(--color-primary);
  }

  .ab-trust-badges__icon {
    display: inline-flex;
    flex-shrink: 0;
    line-height: 0;
    color: var(--ab-tb-icon-color, var(--color-primary));
  }

  .ab-trust-badges__icon svg {
    width: var(--ab-tb-icon-size, 24px);
    height: var(--ab-tb-icon-size, 24px);
  }

  .ab-trust-badges__text {
    min-width: 0;
  }

  .ab-trust-badges__heading {
    margin: 0;
    font-family: var(--font-body--family);
    font-weight: var(--ab-tb-heading-weight, 700);
    font-size: var(--ab-tb-heading-size, 13px);
    letter-spacing: 0.1px;
    line-height: 1.3;
    color: var(--ab-tb-heading-color, var(--color-foreground));
  }

  .ab-trust-badges__sub {
    margin: 2px 0 0;
    font-family: var(--font-body--family);
    font-weight: 400;
    font-size: var(--ab-tb-sub-size, 11px);
    letter-spacing: 0.2px;
    line-height: 1.4;
    color: var(--ab-tb-sub-color, var(--color-foreground-muted));
  }
/* END_SECTION:ab-trust-badges */

/* START_SECTION:ab-trust-strip (INDEX:48) */
/* .ab-trust-strip__inner layout handled by the .page-width class on the same element */

  .ab-trust-strip__grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.4rem 1.6rem;
  }

  @media screen and (min-width: 750px) {
    .ab-trust-strip__grid {
      grid-template-columns: repeat(4, 1fr);
      gap: 3.2rem 2.4rem;
    }
  }

  .ab-trust-strip__item {
    display: block;
  }

  .ab-trust-strip__link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
    color: inherit;
    text-decoration: none;
  }

  a.ab-trust-strip__link:hover .ab-trust-strip__heading {
    color: var(--color-primary);
  }

  .ab-trust-strip__icon {
    display: inline-flex;
    line-height: 0;
    color: var(--color-foreground);
  }

  .ab-trust-strip__icon svg {
    width: 2.4rem;
    height: 2.4rem;
  }

  .ab-trust-strip__heading {
    margin: 0;
    font-family: var(--font-body--family);
    font-weight: 500;
    font-size: var(--font-size--md);
    line-height: var(--line-height--heading-normal);
    color: var(--color-foreground);
  }

  .ab-trust-strip__subtext {
    margin: 0;
    font-family: var(--font-body--family);
    font-weight: 400;
    font-size: var(--font-size--sm);
    line-height: var(--line-height--body-normal);
    color: var(--color-foreground-muted);
  }
/* END_SECTION:ab-trust-strip */

/* START_SECTION:ab-welcome-signup-modal (INDEX:49) */
.ab-wsm {
    position: fixed;
    inset: 0;
    z-index: 190;
    opacity: 0;
    visibility: hidden;
    background: transparent !important;
    transition: opacity 220ms ease, visibility 0s linear 220ms;
    font-family: var(--font-body--family);
  }
  .ab-wsm.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 220ms ease, visibility 0s;
  }
  .ab-wsm__backdrop {
    position: absolute;
    inset: 0;
    background: var(--ab-wsm-backdrop, rgba(11, 18, 32, 0.72));
    border: 0;
    cursor: pointer;
    padding: 0;
  }
  .ab-wsm__modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.96);
    width: var(--ab-wsm-modal-w, 860px);
    max-width: calc(100vw - 32px);
    background: var(--ab-wsm-bg, #FFFFFF);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    overflow: hidden;
    transition: transform 280ms cubic-bezier(0.4, 0.1, 0.2, 1);
  }
  .ab-wsm.is-open .ab-wsm__modal { transform: translate(-50%, -50%) scale(1); }
  .ab-wsm__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border: 0;
    background: rgba(255, 255, 255, 0.95);
    cursor: pointer;
    font-size: 20px;
    color: var(--ab-wsm-deep, #0B1220);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    font-family: inherit;
  }

  .ab-wsm__visual {
    position: relative;
    color: var(--ab-wsm-bg, #FFFFFF);
    overflow: hidden;
    min-height: 200px;
  }
  .ab-wsm__visual-img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .ab-wsm__visual-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(199, 132, 107, 0) 30%, rgba(11, 18, 32, 0.7) 100%);
  }
  .ab-wsm__visual-meta {
    position: absolute;
    left: 22px;
    bottom: 18px;
    right: 22px;
  }
  .ab-wsm__visual-eyebrow {
    font-size: 9px;
    letter-spacing: 2px;
    color: var(--ab-wsm-accent2, #06B6D4);
    font-weight: 800;
    text-transform: uppercase;
  }
  .ab-wsm__visual-caption {
    font-size: 14px;
    font-weight: 600;
    margin-block-start: 4px;
    max-width: 300px;
    line-height: 1.35;
  }

  .ab-wsm__offer { padding: 40px 38px; color: var(--ab-wsm-ink, #0F172A); }
  .ab-wsm__offer-eyebrow {
    font-size: 10px;
    letter-spacing: 2.5px;
    color: var(--ab-wsm-accent, #0891B2);
    font-weight: 800;
    text-transform: uppercase;
    margin-block-end: 16px;
  }
  .ab-wsm__offer-title {
    font-size: 44px;
    font-weight: 800;
    letter-spacing: -1.4px;
    color: var(--ab-wsm-deep, #0B1220);
    line-height: 0.96;
    margin: 0 0 12px;
  }
  .ab-wsm__offer-emphasis { color: var(--ab-wsm-accent, #0891B2); }
  .ab-wsm__offer-italic { font-style: italic; }
  .ab-wsm__offer-body {
    font-size: 14px;
    color: var(--ab-wsm-ink2, #334155);
    line-height: 1.55;
    margin: 0 0 20px;
  }
  .ab-wsm__form { display: flex; flex-direction: column; gap: 10px; margin-block-end: 12px; }
  .ab-wsm__input {
    border: 1.5px solid var(--ab-wsm-line2, #CBD5E1);
    padding: 13px 14px;
    font-size: 14px;
    outline: none;
    background: var(--ab-wsm-bg, #FFFFFF);
    color: var(--ab-wsm-deep, #0B1220);
    font-family: inherit;
  }
  .ab-wsm__submit {
    background: var(--ab-wsm-accent, #0891B2);
    color: var(--ab-wsm-bg, #FFFFFF);
    border: 0;
    padding: 15px;
    font-size: 12px;
    letter-spacing: 1.8px;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
    width: 100%;
    font-family: inherit;
  }
  .ab-wsm__success {
    color: var(--ab-wsm-accent, #0891B2);
    font-size: 13px;
    text-align: center;
    margin: 8px 0 0;
  }
  .ab-wsm__bullets {
    display: flex;
    justify-content: center;
    gap: 18px;
    font-size: 10px;
    color: var(--ab-wsm-ink3, #64748B);
    margin-block-start: 14px;
    letter-spacing: 0.4px;
    flex-wrap: wrap;
  }
  .ab-wsm__decline {
    border: 0;
    background: transparent;
    font-size: 11px;
    color: var(--ab-wsm-ink3, #64748B);
    text-align: center;
    display: block;
    margin: 14px auto 0;
    text-decoration: underline;
    cursor: pointer;
    font-family: inherit;
  }
  .ab-wsm__error {
    color: #DC2626;
    font-size: 12px;
    margin: 6px 0 0;
  }

  /* Success step */
  .ab-wsm__success-eyebrow {
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--ab-wsm-accent, #0891B2);
    font-weight: 800;
    text-transform: uppercase;
    margin-block-end: 8px;
  }
  .ab-wsm__success-title {
    font-size: 36px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -1.4px;
    color: var(--ab-wsm-deep, #0B1220);
    margin: 0 0 12px;
  }
  .ab-wsm__success-title-em {
    color: var(--ab-wsm-accent, #0891B2);
    font-style: italic;
  }
  .ab-wsm__success-body {
    font-size: 14px;
    color: var(--ab-wsm-ink2, #334155);
    margin: 0 0 18px;
    line-height: 1.5;
  }
  .ab-wsm__code-wrap {
    display: flex;
    align-items: stretch;
    border: 2px dashed var(--ab-wsm-accent, #0891B2);
    background: rgba(8, 145, 178, 0.04);
    padding: 0;
    margin-block-end: 14px;
  }
  .ab-wsm__code {
    flex: 1;
    font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace;
    font-size: 20px;
    font-weight: 800;
    color: var(--ab-wsm-deep, #0B1220);
    letter-spacing: 2px;
    padding: 14px 18px;
    user-select: all;
    text-align: center;
  }
  .ab-wsm__code-copy {
    border: 0;
    border-inline-start: 2px dashed var(--ab-wsm-accent, #0891B2);
    background: transparent;
    padding: 0 18px;
    font-size: 11px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--ab-wsm-accent, #0891B2);
    cursor: pointer;
    font-family: inherit;
    min-width: 88px;
  }
  .ab-wsm__code-copy:hover { background: rgba(8, 145, 178, 0.08); }
  .ab-wsm__terms {
    font-size: 11px;
    color: var(--ab-wsm-ink3, #64748B);
    line-height: 1.5;
    margin: 0 0 18px;
  }
  .ab-wsm__cta {
    display: block;
    text-align: center;
    background: var(--ab-wsm-deep, #0B1220);
    color: var(--ab-wsm-bg, #FFFFFF);
    padding: 14px 18px;
    font-size: 11px;
    letter-spacing: 1.6px;
    font-weight: 800;
    text-transform: uppercase;
    text-decoration: none;
  }

  @media (max-width: 760px) {
    .ab-wsm__modal {
      grid-template-columns: 1fr;
      max-height: 92vh;
      overflow: auto;
    }
    .ab-wsm__visual { min-height: 180px; aspect-ratio: 16 / 9; }
    .ab-wsm__offer { padding: 24px 22px 26px; }
    .ab-wsm__offer-title { font-size: 32px; letter-spacing: -1px; }
    .ab-wsm__offer-body { font-size: 13px; }
    .ab-wsm__bullets { gap: 10px; }
  }
/* END_SECTION:ab-welcome-signup-modal */

/* START_SECTION:ab-wholesale-benefits (INDEX:50) */
.ab-wb { background: var(--color-background); }
  .ab-wb__cap { max-width: 1440px; margin-inline: auto; }
  .ab-wb__head {
    margin: 0 0 40px;
    font-family: var(--font-body--family);
    font-size: var(--ab-wb-head-size, 44px);
    font-weight: 800;
    letter-spacing: -1.2px;
    line-height: 1;
    color: var(--ab-wb-head-c, #0B1220);
  }

  /* Benefits grid */
  .ab-wb__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
  .ab-wb__cell {
    border-top: 2px solid var(--ab-wb-rule-c, #0B1220);
    padding-top: 20px;
  }
  .ab-wb__title {
    font-family: var(--font-body--family);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.4px;
    color: var(--ab-wb-title-c, #0B1220);
  }
  .ab-wb__sub {
    margin-top: 10px;
    font-family: var(--font-body--family);
    font-size: 13px;
    line-height: 1.5;
    color: var(--ab-wb-sub-c, #334155);
  }

  /* Stats strip */
  .ab-wb__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--ab-wb-line-c, #e2e8f0);
    margin-top: 56px;
  }
  .ab-wb__stat {
    padding: 28px 28px 4px;
    border-right: 1px solid var(--ab-wb-line-c, #e2e8f0);
  }
  .ab-wb__stat:first-child { padding-left: 0; }
  .ab-wb__stat:last-child  { border-right: none; padding-right: 0; }
  .ab-wb__stat-n {
    font-family: var(--font-body--family);
    font-size: 40px;
    font-weight: 800;
    letter-spacing: -1.5px;
    line-height: 1;
    color: var(--ab-wb-stat-num-c, #0891b2);
  }
  .ab-wb__stat-l {
    margin-top: 8px;
    font-family: var(--font-body--family);
    font-size: 12px;
    letter-spacing: 0.3px;
    color: var(--ab-wb-stat-lbl-c, #64748b);
  }

  @media screen and (max-width: 900px) {
    .ab-wb__grid  { grid-template-columns: repeat(2, 1fr); }
    .ab-wb__stats { grid-template-columns: repeat(2, 1fr); }
    .ab-wb__stat:nth-child(2) { border-right: none; }
    .ab-wb__stat:nth-child(3) { padding-left: 0; }
  }
  @media screen and (max-width: 560px) {
    .ab-wb__grid { grid-template-columns: 1fr; }
    .ab-wb__head { font-size: 32px; letter-spacing: -0.8px; }
  }
/* END_SECTION:ab-wholesale-benefits */

/* START_SECTION:ab-wholesale-form (INDEX:51) */
.ab-whf__cap { max-width: 1440px; margin-inline: auto; }
  .ab-whf__panel {
    background: var(--ab-whf-card-bg, #f0f9ff);
    border: 1px solid var(--ab-whf-card-border-c, #e0f2fe);
    padding: var(--ab-whf-card-pad, 56px);
    display: grid;
    grid-template-columns: 1fr 64px 1fr;
    align-items: stretch;
    gap: 0;
  }
  .ab-whf__col { display: flex; flex-direction: column; }

  .ab-whf__eyebrow {
    margin: 0 0 12px;
    font-family: var(--font-body--family);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ab-whf-eyebrow-c, #0891b2);
  }
  .ab-whf__title {
    margin: 0 0 14px;
    font-family: var(--font-body--family);
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.6px;
    line-height: 1.05;
    text-transform: uppercase;
    color: var(--ab-whf-title-c, #0c4a6e);
  }
  .ab-whf__lede {
    margin: 0 0 24px;
    font-family: var(--font-body--family);
    font-size: 15px;
    line-height: 1.6;
    color: var(--ab-whf-lede-c, #334155);
  }

  /* OR divider */
  .ab-whf__or {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .ab-whf__or span {
    position: relative;
    padding: 14px 0;
    font-family: var(--font-body--family);
    font-size: 11px;
    letter-spacing: 2px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ab-whf-divider-lbl-c, #64748b);
  }
  .ab-whf__or span::before,
  .ab-whf__or span::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    background: var(--ab-whf-divider-c, #cbd5e1);
  }
  .ab-whf__or span::before { top: -120px; height: 120px; }
  .ab-whf__or span::after  { bottom: -120px; height: 120px; }

  /* Sign in CTA button (full-width, brand teal) */
  .ab-whf__cta {
    width: 100%;
    background: var(--ab-whf-cta-bg, #0891b2);
    color: var(--ab-whf-cta-c, #ffffff);
    border: 0;
    padding: 18px;
    font-family: var(--font-body--family);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: filter .15s ease;
  }
  .ab-whf__cta:hover { filter: brightness(1.08); }
  .ab-whf__hint {
    margin: 16px 0 0;
    text-align: center;
    font-family: var(--font-body--family);
    font-size: 12px;
    letter-spacing: 0.3px;
    color: var(--ab-whf-hint-c, #64748b);
  }

  /* Perks list */
  .ab-whf__perks {
    list-style: none;
    padding: 0;
    margin: 28px 0 0;
    display: grid;
    gap: 12px;
  }
  .ab-whf__perks li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body--family);
    font-size: 14px;
    color: var(--ab-whf-perk-c, #334155);
  }
  .ab-whf__tick {
    flex: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--ab-whf-tick-bg, #0891b2);
    color: var(--ab-whf-tick-c, #ffffff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
  }

  /* Logged-in state */
  .ab-whf__loggedin { display: grid; gap: 14px; }
  .ab-whf__loggedin-line { margin: 0; font-size: 15px; color: var(--ab-whf-lede-c, #334155); }
  .ab-whf__loggedin-line strong { color: var(--ab-whf-title-c, #0c4a6e); }
  .ab-whf__loggedin-hint { margin: 0; font-size: 13px; color: var(--color-foreground-muted); line-height: 1.6; }
  .ab-whf__signout { margin: 6px 0 0; font-size: 12px; text-align: center; }
  .ab-whf__signout a { color: var(--color-foreground-muted); text-decoration: underline; }

  /* Right column extras */
  .ab-whf__help {
    margin: 0 0 22px;
    font-family: var(--font-body--family);
    font-size: 13px;
    color: var(--ab-whf-help-c, #334155);
  }
  .ab-whf__help a {
    color: var(--ab-whf-link-c, #0891b2);
    font-weight: 600;
  }
  .ab-whf__formhead {
    margin: 0 0 4px;
    font-family: var(--font-body--family);
    font-size: 22px;
    font-weight: 700;
    color: var(--ab-whf-formhead-c, #0f172a);
  }
  .ab-whf__formsub {
    margin: 0 0 18px;
    font-family: var(--font-body--family);
    font-size: 14px;
    color: var(--ab-whf-formsub-c, #334155);
  }

  .ab-whf__app-blocks > * + * { margin-block-start: 16px; }
  .ab-whf__no-block {
    padding: 22px;
    background: #FEF3C7;
    border: 1px dashed #F59E0B;
    color: #78350F;
    font-family: var(--font-body--family);
    font-size: 13px;
    line-height: 1.6;
  }

  @media screen and (max-width: 900px) {
    .ab-whf__panel {
      grid-template-columns: 1fr;
      padding: 32px;
      gap: 0;
    }
    .ab-whf__or {
      padding: 28px 0;
      flex-direction: row;
    }
    .ab-whf__or span::before { top: 50%; transform: translate(-50%, -50%); width: 24px; height: 1px; left: -28px; }
    .ab-whf__or span::after  { top: 50%; transform: translate(-50%, -50%); width: 24px; height: 1px; right: -28px; left: auto; }
    .ab-whf__title { font-size: 24px; }
  }
/* END_SECTION:ab-wholesale-form */

/* START_SECTION:ab-wholesale-hero (INDEX:52) */
.ab-wh {
    position: relative;
    overflow: hidden;
    background: var(--ab-wh-bg, #0B1220);
    color: #ffffff;
    padding-inline: var(--ab-wh-pad-inline, 48px);
  }
  .ab-wh__pattern {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M0 40 L40 0 L80 40 L40 80 Z' fill='none' stroke='%2367e8f9' stroke-width='1.2'/%3E%3Cpath d='M20 40 L40 20 L60 40 L40 60 Z' fill='none' stroke='%23ffffff' stroke-width='1' opacity='0.5'/%3E%3Ccircle cx='40' cy='40' r='2' fill='%2367e8f9'/%3E%3C/svg%3E");
    background-size: 80px 80px;
  }
  .ab-wh__inner {
    position: relative;
    max-width: 1440px;
    margin-inline: auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 48px;
    flex-wrap: wrap;
  }
  .ab-wh__text { flex: 1 1 auto; min-width: 0; }
  .ab-wh__eyebrow {
    margin: 0 0 14px;
    font-family: var(--font-body--family);
    font-size: 11px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ab-wh-eyebrow-c, #67e8f9);
  }
  .ab-wh__headline {
    margin: 0 0 0;
    font-family: var(--font-body--family);
    font-weight: 800;
    font-size: var(--ab-wh-headline-size, 104px);
    letter-spacing: -3.5px;
    line-height: 0.84;
    color: var(--ab-wh-headline-c, #ffffff);
  }
  .ab-wh__headline-accent { color: var(--ab-wh-headline-accent-c, #06b6d4); }
  .ab-wh__lede {
    margin: 0;
    padding-bottom: 14px;
    flex: 0 1 380px;
    font-family: var(--font-body--family);
    font-size: 15px;
    line-height: 1.65;
    color: var(--ab-wh-lede-c, #cbd5e1);
  }

  @media screen and (max-width: 1100px) {
    .ab-wh__headline { font-size: 76px; letter-spacing: -2.4px; }
  }
  @media screen and (max-width: 900px) {
    .ab-wh__inner { flex-direction: column; align-items: flex-start; }
    .ab-wh__lede { padding-bottom: 0; }
  }
  @media screen and (max-width: 560px) {
    .ab-wh__headline { font-size: 54px; letter-spacing: -1.6px; }
  }
/* END_SECTION:ab-wholesale-hero */

/* START_SECTION:main-activate-account (INDEX:82) */
.ab-ac { background: var(--color-background); font-family: var(--font-body--family); }
  .ab-ac__cap { max-width: 480px; margin-inline: auto; }
  .ab-ac__card {
    background: var(--color-background);
  }
  .ab-ac__head { margin-bottom: 28px; }
  .ab-ac__eyebrow {
    margin: 0 0 14px;
    font-size: 11px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ab-ac-eyebrow-c, #0891b2);
  }
  .ab-ac__title {
    margin: 0 0 14px;
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.05;
    color: var(--ab-ac-title-c, #0c4a6e);
  }
  .ab-ac__lede {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--ab-ac-lede-c, #334155);
  }

  .ab-ac__form { display: grid; gap: 14px; margin-top: 8px; }
  .ab-ac__field { display: grid; gap: 6px; }
  .ab-ac__label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: var(--ab-ac-title-c, #0c4a6e);
  }
  .ab-ac__input {
    width: 100%;
    border: 1px solid var(--ab-ac-input-border-c, #cbd5e1);
    border-radius: 6px;
    padding: 15px 16px;
    font-size: 15px;
    font-family: inherit;
    color: var(--ab-ac-input-c, #0f172a);
    background: var(--ab-ac-input-bg, #ffffff);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  .ab-ac__input::placeholder { color: #9aa5b1; }
  .ab-ac__input:focus {
    border-color: var(--ab-ac-input-focus-c, #0891b2);
    box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.12);
  }
  .ab-ac__input[aria-invalid="true"] {
    border-color: #dc2626;
  }

  .ab-ac__submit {
    width: 100%;
    background: var(--ab-ac-cta-bg, #0891b2);
    color: var(--ab-ac-cta-c, #ffffff);
    border: 0;
    border-radius: 6px;
    padding: 16px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 6px;
    transition: filter .15s ease;
    font-family: inherit;
  }
  .ab-ac__submit:hover { filter: brightness(1.08); }
  .ab-ac__cancel {
    width: 100%;
    background: transparent;
    color: var(--ab-ac-cancel-c, #64748b);
    border: 0;
    padding: 12px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: underline;
    font-family: inherit;
  }
  .ab-ac__cancel:hover { color: #0f172a; }

  .ab-ac__errors {
    background: var(--ab-ac-error-bg, #fef2f2);
    border-left: 3px solid var(--ab-ac-error-c, #dc2626);
    padding: 14px 16px;
    margin-bottom: 8px;
    border-radius: 4px;
  }
  .ab-ac__errors-head {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ab-ac-error-c, #dc2626);
  }
  .ab-ac__errors-list {
    margin: 0;
    padding-inline-start: 18px;
    font-size: 13px;
    color: var(--ab-ac-error-c, #dc2626);
    line-height: 1.5;
  }
  .ab-ac__errors-list li { margin: 2px 0; }

  @media screen and (max-width: 560px) {
    .ab-ac__title { font-size: 28px; letter-spacing: -0.6px; }
  }
/* END_SECTION:main-activate-account */

/* START_SECTION:main-login (INDEX:92) */
.ab-lo { background: var(--color-background); font-family: var(--font-body--family); }
  .ab-lo__cap { max-width: 480px; margin-inline: auto; }

  /* Two-card stack with toggle by :target. Login is the default; recover
     shows when the URL hash is #recover. */
  .ab-lo__card { display: block; }
  .ab-lo__card--recover { display: none; }
  /* When :target is the recover card, swap visibility. */
  .ab-lo:has(#recover:target) .ab-lo__card[id="login"] { display: none; }
  .ab-lo:has(#recover:target) .ab-lo__card--recover { display: block; }
  /* Fallback for browsers without :has — recover stays anchored below login. */
  @supports not selector(:has(*)) {
    .ab-lo__card--recover { display: block; margin-top: 40px; padding-top: 32px; border-top: 1px solid #e2e8f0; }
  }

  .ab-lo__head { margin-bottom: 28px; }
  .ab-lo__eyebrow { margin: 0 0 14px; font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 700; color: var(--ab-lo-eyebrow-c, #0891b2); }
  .ab-lo__title { margin: 0 0 14px; font-size: 36px; font-weight: 800; letter-spacing: -1px; line-height: 1.05; color: var(--ab-lo-title-c, #0c4a6e); }
  .ab-lo__lede { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ab-lo-lede-c, #334155); }
  .ab-lo__form { display: grid; gap: 14px; margin-top: 8px; }
  .ab-lo__field { display: grid; gap: 6px; }
  .ab-lo__label { font-size: 12px; font-weight: 600; letter-spacing: 0.2px; color: var(--ab-lo-title-c, #0c4a6e); }
  .ab-lo__input {
    width: 100%; border: 1px solid var(--ab-lo-input-border-c, #cbd5e1); border-radius: 6px;
    padding: 15px 16px; font-size: 15px; font-family: inherit;
    color: var(--ab-lo-input-c, #0f172a); background: var(--ab-lo-input-bg, #ffffff);
    outline: none; transition: border-color .15s ease, box-shadow .15s ease;
  }
  .ab-lo__input::placeholder { color: #9aa5b1; }
  .ab-lo__input:focus { border-color: var(--ab-lo-input-focus-c, #0891b2); box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.12); }
  .ab-lo__input[aria-invalid="true"] { border-color: #dc2626; }
  .ab-lo__submit {
    width: 100%; background: var(--ab-lo-cta-bg, #0891b2); color: var(--ab-lo-cta-c, #ffffff);
    border: 0; border-radius: 6px; padding: 16px; font-size: 15px; font-weight: 600;
    cursor: pointer; margin-top: 6px; transition: filter .15s ease; font-family: inherit;
  }
  .ab-lo__submit:hover { filter: brightness(1.08); }
  .ab-lo__sub {
    margin: 12px 0 0; text-align: center; font-size: 13px;
    color: var(--ab-lo-lede-c, #334155); display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;
  }
  .ab-lo__sep { color: #cbd5e1; }
  .ab-lo__link {
    color: var(--ab-lo-link-c, #0891b2); text-decoration: underline;
    text-underline-offset: 3px; font-weight: 600;
  }
  .ab-lo__link:hover { filter: brightness(0.92); }

  .ab-lo__errors {
    background: var(--ab-lo-error-bg, #fef2f2); border-left: 3px solid var(--ab-lo-error-c, #dc2626);
    padding: 14px 16px; margin-bottom: 4px; border-radius: 4px;
  }
  .ab-lo__errors-head { margin: 0 0 4px; font-size: 13px; font-weight: 700; color: var(--ab-lo-error-c, #dc2626); }
  .ab-lo__errors-list { margin: 0; padding-inline-start: 18px; font-size: 13px; color: var(--ab-lo-error-c, #dc2626); line-height: 1.5; }
  .ab-lo__errors-list li { margin: 2px 0; }
  .ab-lo__errors p { margin: 0; font-size: 13px; color: var(--ab-lo-error-c, #dc2626); }

  .ab-lo__success {
    background: var(--ab-lo-success-bg, #f0fdf4); border-left: 3px solid var(--ab-lo-success-c, #16a34a);
    padding: 14px 16px; border-radius: 4px;
    font-size: 13px; color: var(--ab-lo-success-c, #166534); line-height: 1.55;
  }

  @media screen and (max-width: 560px) {
    .ab-lo__title { font-size: 28px; letter-spacing: -0.6px; }
  }
/* END_SECTION:main-login */

/* START_SECTION:main-register (INDEX:99) */
.ab-rg { background: var(--color-background); font-family: var(--font-body--family); }
  .ab-rg__cap { max-width: 480px; margin-inline: auto; }
  .ab-rg__head { margin-bottom: 28px; }
  .ab-rg__eyebrow { margin: 0 0 14px; font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 700; color: var(--ab-rg-eyebrow-c, #0891b2); }
  .ab-rg__title { margin: 0 0 14px; font-size: 36px; font-weight: 800; letter-spacing: -1px; line-height: 1.05; color: var(--ab-rg-title-c, #0c4a6e); }
  .ab-rg__lede { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ab-rg-lede-c, #334155); }
  .ab-rg__form { display: grid; gap: 14px; margin-top: 8px; }
  .ab-rg__row { display: grid; gap: 14px; }
  .ab-rg__row--2 { grid-template-columns: 1fr 1fr; }
  .ab-rg__field { display: grid; gap: 6px; }
  .ab-rg__label { font-size: 12px; font-weight: 600; letter-spacing: 0.2px; color: var(--ab-rg-title-c, #0c4a6e); }
  .ab-rg__input {
    width: 100%; border: 1px solid var(--ab-rg-input-border-c, #cbd5e1); border-radius: 6px;
    padding: 15px 16px; font-size: 15px; font-family: inherit;
    color: var(--ab-rg-input-c, #0f172a); background: var(--ab-rg-input-bg, #ffffff);
    outline: none; transition: border-color .15s ease, box-shadow .15s ease;
  }
  .ab-rg__input::placeholder { color: #9aa5b1; }
  .ab-rg__input:focus { border-color: var(--ab-rg-input-focus-c, #0891b2); box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.12); }
  .ab-rg__input[aria-invalid="true"] { border-color: #dc2626; }
  .ab-rg__submit {
    width: 100%; background: var(--ab-rg-cta-bg, #0891b2); color: var(--ab-rg-cta-c, #ffffff);
    border: 0; border-radius: 6px; padding: 16px; font-size: 15px; font-weight: 600;
    cursor: pointer; margin-top: 6px; transition: filter .15s ease; font-family: inherit;
  }
  .ab-rg__submit:hover { filter: brightness(1.08); }
  .ab-rg__footer { margin: 16px 0 0; text-align: center; font-size: 13px; color: var(--ab-rg-lede-c, #334155); }
  .ab-rg__footer a { color: var(--ab-rg-link-c, #0891b2); text-decoration: underline; font-weight: 600; }
  .ab-rg__errors {
    background: var(--ab-rg-error-bg, #fef2f2); border-left: 3px solid var(--ab-rg-error-c, #dc2626);
    padding: 14px 16px; margin-bottom: 8px; border-radius: 4px;
  }
  .ab-rg__errors-head { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--ab-rg-error-c, #dc2626); }
  .ab-rg__errors-list { margin: 0; padding-inline-start: 18px; font-size: 13px; color: var(--ab-rg-error-c, #dc2626); line-height: 1.5; }
  .ab-rg__errors-list li { margin: 2px 0; }
  @media screen and (max-width: 560px) {
    .ab-rg__title { font-size: 28px; letter-spacing: -0.6px; }
    .ab-rg__row--2 { grid-template-columns: 1fr; }
  }
/* END_SECTION:main-register */

/* START_SECTION:main-reset-password (INDEX:100) */
.ab-rp { background: var(--color-background); font-family: var(--font-body--family); }
  .ab-rp__cap { max-width: 480px; margin-inline: auto; }
  .ab-rp__head { margin-bottom: 28px; }
  .ab-rp__eyebrow { margin: 0 0 14px; font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 700; color: var(--ab-rp-eyebrow-c, #0891b2); }
  .ab-rp__title { margin: 0 0 14px; font-size: 36px; font-weight: 800; letter-spacing: -1px; line-height: 1.05; color: var(--ab-rp-title-c, #0c4a6e); }
  .ab-rp__lede { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ab-rp-lede-c, #334155); }
  .ab-rp__form { display: grid; gap: 14px; margin-top: 8px; }
  .ab-rp__field { display: grid; gap: 6px; }
  .ab-rp__label { font-size: 12px; font-weight: 600; letter-spacing: 0.2px; color: var(--ab-rp-title-c, #0c4a6e); }
  .ab-rp__input {
    width: 100%; border: 1px solid var(--ab-rp-input-border-c, #cbd5e1); border-radius: 6px;
    padding: 15px 16px; font-size: 15px; font-family: inherit;
    color: var(--ab-rp-input-c, #0f172a); background: var(--ab-rp-input-bg, #ffffff);
    outline: none; transition: border-color .15s ease, box-shadow .15s ease;
  }
  .ab-rp__input::placeholder { color: #9aa5b1; }
  .ab-rp__input:focus { border-color: var(--ab-rp-input-focus-c, #0891b2); box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.12); }
  .ab-rp__input[aria-invalid="true"] { border-color: #dc2626; }
  .ab-rp__submit {
    width: 100%; background: var(--ab-rp-cta-bg, #0891b2); color: var(--ab-rp-cta-c, #ffffff);
    border: 0; border-radius: 6px; padding: 16px; font-size: 15px; font-weight: 600;
    cursor: pointer; margin-top: 6px; transition: filter .15s ease; font-family: inherit;
  }
  .ab-rp__submit:hover { filter: brightness(1.08); }
  .ab-rp__errors {
    background: var(--ab-rp-error-bg, #fef2f2); border-left: 3px solid var(--ab-rp-error-c, #dc2626);
    padding: 14px 16px; margin-bottom: 8px; border-radius: 4px;
  }
  .ab-rp__errors-head { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--ab-rp-error-c, #dc2626); }
  .ab-rp__errors-list { margin: 0; padding-inline-start: 18px; font-size: 13px; color: var(--ab-rp-error-c, #dc2626); line-height: 1.5; }
  .ab-rp__errors-list li { margin: 2px 0; }
  @media screen and (max-width: 560px) { .ab-rp__title { font-size: 28px; letter-spacing: -0.6px; } }
/* END_SECTION:main-reset-password */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:ab-bestseller-card (INDEX:371) */
/* Fluid scale baked into the card itself so text + button + badge +
     dots all shrink proportionally with the viewport between 1000 and
     1440px (floor 0.694 = 1000/1440). Each rule that owns a visible
     px value multiplies it by var(--ab-card-scale). Below 1000px the
     card's own @media (max-width:620px) block takes over with hand-
     tuned compact values. */
  .ab-card {
    --ab-card-scale: clamp(0.694, 100vw / 1440px, 1);
    background: var(--ab-best-card-bg, #FFFFFF);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(11, 18, 32, 0.04),
                0 10px 30px rgba(11, 18, 32, 0.06);
    transition: box-shadow 250ms ease, transform 250ms ease;
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  /* Card hover: shadow lifts subtly but the card stays put. The
     image zoom (.ab-card:hover .ab-card__img) handles the
     "interactive" feedback so layout doesn't jitter when the user
     scans down a row of cards. */
  .ab-card:hover {
    box-shadow: 0 4px 8px rgba(11, 18, 32, 0.06),
                0 18px 44px rgba(11, 18, 32, 0.12);
  }

  /* ---------- Frame (image area) ---------- */
  .ab-card__frame {
    position: relative;
  }
  .ab-card__media {
    display: block;
    width: 100%;
    aspect-ratio: var(--ab-card-aspect, 1 / 1);
    overflow: hidden;
    background: linear-gradient(160deg, #efebe3, #e3ddd1);
    position: relative;
  }
  .ab-card__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* Two-image swap on hover: primary fades out, secondary fades in.
     No zoom. Falls back to primary if no second image exists. */
  .ab-card__img--primary {
    transition: opacity 300ms ease;
  }
  .ab-card__img--secondary {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 300ms ease;
  }
  .ab-card:hover .ab-card__img--primary { opacity: 0; }
  .ab-card:hover .ab-card__img--secondary { opacity: 1; }
  .ab-card__img-placeholder {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* ---------- Heart (wishlist) ---------- */
  .ab-card__heart {
    position: absolute;
    top: calc(12px * var(--ab-card-scale, 1));
    right: calc(12px * var(--ab-card-scale, 1));
    width: calc(38px * var(--ab-card-scale, 1));
    height: calc(38px * var(--ab-card-scale, 1));
    border-radius: 999px;
    border: none;
    background: rgba(255, 255, 255, 0.94);
    color: var(--ab-best-card-title-c, #0B1220);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 9px rgba(11, 18, 32, 0.14);
    transition: transform 150ms ease, color 150ms ease;
    z-index: 2;
    cursor: pointer;
    padding: 0;
  }
  .ab-card__heart:hover { transform: scale(1.07); }
  .ab-card__heart.is-on { color: #DC2626; }

  /* ---------- Badge (sale tag / discount % / sold out) ----------
     Background hardcoded to #DC2626 so the discount tag reads the
     same across every section that renders the card (collection,
     bestsellers, recently viewed, search). Previously the bg
     resolved through --ab-best-tag-bg which sections set to their
     own brand colour (e.g. cyan), giving inconsistent discount
     badges across surfaces. Sold-out modifier keeps its own ink bg. */
  .ab-card__badge {
    position: absolute;
    top: calc(13px * var(--ab-card-scale, 1));
    left: calc(13px * var(--ab-card-scale, 1));
    background: #DC2626;
    color: #FFFFFF;
    font-size: calc(13px * var(--ab-card-scale, 1));
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: calc(5px * var(--ab-card-scale, 1)) calc(10px * var(--ab-card-scale, 1));
    border-radius: 999px;
    z-index: 2;
  }
  .ab-card__badge--soldout {
    background: var(--ab-cd-deep, #0B1220);
    color: #FFFFFF;
  }

  /* ---------- Body ---------- */
  .ab-card__body {
    padding: calc(15px * var(--ab-card-scale, 1)) calc(16px * var(--ab-card-scale, 1)) calc(16px * var(--ab-card-scale, 1));
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  .ab-card__maker {
    font-size: calc(9.5px * var(--ab-card-scale, 1));
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--color-foreground-muted, #64748B);
    margin-bottom: calc(6px * var(--ab-card-scale, 1));
  }
  .ab-card__title {
    font-size: calc(var(--ab-best-card-title-size, 15px) * var(--ab-card-scale, 1));
    font-weight: 700;
    color: var(--ab-best-card-title-c, #0B1220);
    letter-spacing: -0.2px;
    margin-bottom: calc(9px * var(--ab-card-scale, 1));
    text-decoration: none;
    line-height: 1.3;
    /* Reserve two lines of title height so 1-line + 2-line titles
       inside the same grid row finish at the same Y — otherwise the
       qadd button + stock line below would drift up/down per card. */
    min-height: calc(var(--ab-best-card-title-size, 15px) * var(--ab-card-scale, 1) * 1.3 * 2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .ab-card__title:hover { text-decoration: underline; text-underline-offset: 3px; }

  /* ---------- Price row + color dots ---------- */
  .ab-card__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 13px;
  }
  .ab-card__price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
  }
  .ab-card__price-prefix {
    font-size: calc((var(--ab-best-price-size, 16px) - 4px) * var(--ab-card-scale, 1));
    font-weight: 600;
    color: var(--color-foreground-muted, #64748B);
    letter-spacing: 0.2px;
  }
  .ab-card__now {
    font-size: calc(var(--ab-best-price-size, 16px) * var(--ab-card-scale, 1));
    font-weight: 800;
    color: var(--ab-best-price-c, #0891B2);
  }
  .ab-card__was {
    font-size: calc(12.5px * var(--ab-card-scale, 1));
    color: var(--color-foreground-muted, #64748B);
    text-decoration: line-through;
  }
  .ab-card__was[hidden] { display: none; }
  .ab-card__qadd.is-soldout { opacity: 0.55; cursor: not-allowed; }
  .ab-card__dots {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
  }
  .ab-card__dot {
    width: calc(13px * var(--ab-card-scale, 1));
    height: calc(13px * var(--ab-card-scale, 1));
    border-radius: 999px;
    border: 1px solid var(--ab-best-card-border-c, #CDC8BD);
    display: inline-block;
    cursor: pointer;
  }
  .ab-card__dot.is-on {
    box-shadow: 0 0 0 1.5px var(--ab-best-card-bg, #FFFFFF),
                0 0 0 3px var(--ab-best-price-c, #0891B2);
  }

  /* .ab-card__reviews CSS removed — block markup is gone too;
     ratings will arrive via a third-party app block when wired. */

  /* ---------- Stock + dispatch line (under Quick add) ---------- */
  .ab-card__stock-line {
    margin-block-start: calc(8px * var(--ab-card-scale, 1));
    display: flex;
    align-items: center;
    gap: calc(6px * var(--ab-card-scale, 1));
    font-family: var(--font-body--family);
    font-size: calc(10.5px * var(--ab-card-scale, 1));
    color: var(--color-foreground-muted, #64748B);
    letter-spacing: 0.2px;
    flex-wrap: wrap;
  }
  .ab-card__stock-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #10B981;
    flex-shrink: 0;
  }
  .ab-card__stock-dot.is-low { background: #B45309; }
  .ab-card__stock.is-low { color: #B45309; font-weight: 700; }
  .ab-card__stock-sep { opacity: 0.5; }

  /* ---------- Quick add button ---------- */
  .ab-card__form { margin: 0; margin-top: auto; }
  /* Default: ghost (transparent bg + ink text + ink border). Hover:
     invert to filled dark (ink bg + white text). Hardcoded so a
     stale template-saved --ab-best-cta-* var can't flip the
     direction. Restored to ghost-default per the user's preference
     after testing the dark-default variant. */
  .ab-card__qadd {
    display: block;
    width: 100%;
    background: transparent !important;
    color: #0B1220 !important;
    border: 1.5px solid #0B1220 !important;
    padding: calc(13px * var(--ab-card-scale, 1));
    border-radius: 11px;
    font-family: inherit;
    font-size: calc(11px * var(--ab-card-scale, 1));
    font-weight: 800;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    transition: background-color 180ms ease, color 180ms ease;
    cursor: pointer;
    margin-top: auto;
  }
  .ab-card__qadd:hover,
  .ab-card__qadd:hover .ab-card__qadd-full,
  .ab-card__qadd:hover .ab-card__qadd-short {
    background: #0B1220 !important;
    color: #FFFFFF !important;
  }
  .ab-card__qadd--link:hover {
    color: #FFFFFF !important;
  }
  .ab-card__qadd-short { display: none; }

  /* ---------- Notify me (only renders when product is sold out) ---------- */
  .ab-card__notify {
    margin-block-start: calc(8px * var(--ab-card-scale, 1));
  }
  .ab-card__notify-btn {
    width: 100%;
    background: transparent;
    color: var(--color-foreground-muted, #64748B);
    border: 0;
    padding: calc(6px * var(--ab-card-scale, 1)) calc(4px * var(--ab-card-scale, 1));
    font-family: inherit;
    font-size: calc(11px * var(--ab-card-scale, 1));
    font-weight: 600;
    letter-spacing: 0.4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(6px * var(--ab-card-scale, 1));
    transition: color 150ms ease;
  }
  /* SVG icon inside the notify button — keep proportional to the
     text so the bell glyph doesn't dwarf the label at narrow widths. */
  .ab-card__notify-btn svg {
    width: calc(14px * var(--ab-card-scale, 1));
    height: calc(14px * var(--ab-card-scale, 1));
    flex-shrink: 0;
  }
  .ab-card__notify-btn:hover { color: var(--color-foreground, #0B1220); }
  .ab-card__notify-btn[aria-expanded="true"] { color: var(--color-foreground, #0B1220); }
  .ab-card__notify-btn[hidden] { display: none; }
  .ab-card__notify-form {
    margin-block-start: calc(8px * var(--ab-card-scale, 1));
    display: flex;
    gap: calc(6px * var(--ab-card-scale, 1));
    align-items: center;
  }
  /* [hidden] needs an explicit override because the form's `display:
     flex` would otherwise win and leave it visible by default. */
  .ab-card__notify-form[hidden] { display: none; }
  .ab-card__notify-success {
    margin: calc(8px * var(--ab-card-scale, 1)) 0 0;
    font-family: var(--font-body--family);
    font-size: calc(11.5px * var(--ab-card-scale, 1));
    font-weight: 600;
    color: #047857;
    background: rgb(16 185 129 / 0.10);
    padding: calc(8px * var(--ab-card-scale, 1)) calc(10px * var(--ab-card-scale, 1));
    border-radius: 8px;
    text-align: center;
  }
  .ab-card__notify-success[hidden] { display: none; }
  .ab-card__notify-input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--color-border, #E2E8F0);
    background: var(--color-background, #FFFFFF);
    color: var(--color-foreground, #0B1220);
    font-family: inherit;
    font-size: calc(12px * var(--ab-card-scale, 1));
    padding: calc(8px * var(--ab-card-scale, 1)) calc(10px * var(--ab-card-scale, 1));
    border-radius: 8px;
    outline: none;
  }
  .ab-card__notify-input:focus { border-color: var(--ab-best-price-c, #0891B2); }
  .ab-card__notify-submit {
    flex-shrink: 0;
    width: calc(34px * var(--ab-card-scale, 1));
    height: calc(34px * var(--ab-card-scale, 1));
    border-radius: 8px;
    border: 0;
    background: var(--ab-best-cta-bg, #0B1220);
    color: var(--ab-best-cta-c, #FFFFFF);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .ab-card__notify-submit svg {
    width: calc(14px * var(--ab-card-scale, 1));
    height: calc(14px * var(--ab-card-scale, 1));
  }
  .ab-card__notify-submit:hover { opacity: 0.9; }

  /* Below 989px (tablet + phone), reset fluid scale to 1 — base px values
     remain readable. The ≤620px phone block below still hand-tunes specifics. */
  @media (max-width: 989px) {
    .ab-card { --ab-card-scale: 1; }
  }

  /* ---------- Phone (≤620px): compact card, dark filled CTA ---------- */
  @media (max-width: 620px) {
    /* Disable the title link on phones — fingers covering the title row
       while tapping a small colour swatch accidentally triggers PDP
       navigation. The card's image link still navigates, so the product
       page is one tap away on the image (the obvious target). DOM keeps
       the <a> so SEO / screen readers can still see it as a link. */
    .ab-card__title { pointer-events: none; cursor: default; }
    .ab-card {
      border-radius: 15px;
      box-shadow: 0 1px 2px rgba(11, 18, 32, 0.05),
                  0 6px 16px rgba(11, 18, 32, 0.07);
    }
    .ab-card__media { aspect-ratio: var(--ab-card-aspect-m, 1 / 1); }
    .ab-card__heart {
      width: 30px; height: 30px;
      top: 8px; right: 8px;
    }
    .ab-card__heart svg { width: 15px; height: 15px; }
    .ab-card__badge {
      top: 9px; left: 9px;
      font-size: 9px;
      padding: 5px 9px;
    }
    .ab-card__body { padding: 10px 11px 12px; }
    /* Maker label hidden on phone — the collection / vendor pill is
       redundant next to the price + dots on a 1/1 card, and dropping
       it gives the title two cleaner lines of breathing room. */
    .ab-card__maker { display: none; }
    .ab-card__title {
      font-size: 12.5px;
      margin-bottom: 7px;
      min-height: 31px;
    }
    /* When the card has colour dots, stack price on top + dots
       below (left-aligned) instead of opposite ends of one row.
       :has() makes this conditional — cards without dots keep the
       single-row price layout. */
    .ab-card__row { margin-bottom: 10px; }
    .ab-card__row:has(.ab-card__dots) {
      flex-direction: column-reverse;
      align-items: flex-start;
      gap: 6px;
    }
    .ab-card__price { gap: 5px; }
    .ab-card__now { font-size: 13.5px; }
    .ab-card__was { font-size: 10.5px; }
    .ab-card__dots { gap: 7px; }
    .ab-card__dot { width: 13px; height: 13px; border-radius: 999px; }
    .ab-card__dot.is-on {
      box-shadow: 0 0 0 1.5px var(--ab-best-card-bg, #FFFFFF),
                  0 0 0 2.5px var(--ab-best-price-c, #0891B2);
    }
    .ab-card__qadd {
      padding: 10px;
      border-radius: 9px;
      font-size: 10px;
      letter-spacing: 1px;
      background: var(--ab-best-cta-bg, #0B1220);
      color: var(--ab-best-cta-c, #FFFFFF);
      border-color: var(--ab-best-cta-bg, #0B1220);
    }
    .ab-card__qadd-full { display: none; }
    .ab-card__qadd-short { display: inline; }
  }

  /* Color dot click — toggle .is-on (visual only; not a real variant
     selector since the card doesn't show variant-bound imagery). */
/* END_SNIPPET:ab-bestseller-card */

/* START_SNIPPET:media-wtext-collage (INDEX:486) */
.collage-style {
    display: grid;
    grid-auto-flow: dense;
  }

  /* style__2_2_1_2 */
  .collage-style__2_2_1_2 {
    grid-template-columns: repeat(5, 1fr);
  }

  .collage-style__2_2_1_2 > *:nth-child(7n + 1) {
    grid-area: auto / 1 / span 1 / span 1;
  }
  .collage-style__2_2_1_2 > *:nth-child(7n + 2) {
    grid-area: auto / 1 / span 1 / span 1;
    grid-row: span 1;
  }
  .collage-style__2_2_1_2 > *:nth-child(7n + 3) {
    grid-column: 2;
  }
  .collage-style__2_2_1_2 > *:nth-child(7n + 4) {
    grid-column: 2;
    grid-row: span 1;
  }
  .collage-style__2_2_1_2 > *:nth-child(7n + 5) {
    grid-column: 3 / span 2;
    grid-row: span 2;
  }
  .collage-style__2_2_1_2 > *:nth-child(7n + 6) {
    grid-column: 5;
  }
  .collage-style__2_2_1_2 > *:nth-child(7n + 7) {
    grid-column: 5;
  }

  /* style__1_3  */
  .collage-style__1_3 {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr;
  }

  .collage-style__1_3 > *:nth-child(4n + 1) {
    grid-column: 1 / span 2;
    grid-row: span 2;
  }

  .collage-style__1_3 > *:nth-child(4n + 2) {
    grid-column: 3 / span 2;
    grid-row: auto / span 1;
  }

  .collage-style__1_3 > *:nth-child(4n + 3) {
    grid-column: 3;
  }

  .collage-style__1_3 > *:nth-child(4n + 4) {
    grid-column: 4;
  }

  /* style__3_3_3  */
  .collage-style__3_3_3 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 1fr;
  }

  .collage-style__3_3_3 > *:nth-child(9n + 1) {
    grid-column: 1;
    grid-row: auto / span 1;
  }

  .collage-style__3_3_3 > *:nth-child(9n + 2) {
    grid-column: 2;
  }

  .collage-style__3_3_3 > *:nth-child(9n + 3) {
    grid-column: 1 / span 2;
    grid-row: span 2;
  }

  .collage-style__3_3_3 > *:nth-child(9n + 4) {
    grid-column: 3 / span 2;
    grid-row: span 2;
  }

  .collage-style__3_3_3 > *:nth-child(9n + 5) {
    grid-column: 3;
  }

  .collage-style__3_3_3 > *:nth-child(9n + 6) {
    grid-column: 4;
  }

  .collage-style__3_3_3 > *:nth-child(9n + 7) {
    grid-column: 5;
  }

  .collage-style__3_3_3 > *:nth-child(9n + 8) {
    grid-column: 6;
  }

  .collage-style__3_3_3 > *:nth-child(9n + 9) {
    grid-column: 5 / span 2;
    grid-row: span 2;
  }

  /* style__1_2_2  */
  .collage-style__1_2_2 {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: 1fr;
  }

  .collage-style__1_2_2 > *:nth-child(5n + 1) {
    grid-column: 1 / span 3;
    grid-row: span 2;
  }

  .collage-style__1_2_2 > *:nth-child(5n + 2) {
    grid-column: 4 / span 2;
    grid-row: auto / span 1;
  }

  .collage-style__1_2_2 > *:nth-child(5n + 3) {
    grid-column: 4 / span 2;
    grid-row: auto / span 1;
  }

  .collage-style__1_2_2 > *:nth-child(5n + 4) {
    grid-column: 6 / span 2;
    grid-row: auto / span 1;
  }

  .collage-style__1_2_2 > *:nth-child(5n + 5) {
    grid-column: 6 / span 2;
    grid-row: auto / span 1;
  }

  /* collage-style__2_1 */
  .collage-style__2_1 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr;
  }

  .collage-style__2_1 > *:nth-child(3n + 1) {
    grid-column: 1;
    grid-row: auto / span 1;
  }

  .collage-style__2_1 > *:nth-child(3n + 2) {
    grid-column: 1;
    grid-row: auto / span 1;
  }

  .collage-style__2_1 > *:nth-child(3n + 3) {
    grid-column: 2;
    grid-row: span 2;
  }

  /* collage-style__1_1_2 */
  .collage-style__1_1_2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
  }

  .collage-style__1_1_2 > *:nth-child(4n + 1) {
    grid-column: 1;
    grid-row: span 2;
  }

  .collage-style__1_1_2 > *:nth-child(4n + 2) {
    grid-column: 2;
    grid-row: span 2;
  }

  .collage-style__1_1_2 > *:nth-child(4n + 3) {
    grid-column: 3;
    grid-row: auto / span 1;
  }

  .collage-style__1_1_2 > *:nth-child(4n + 4) {
    grid-column: 3;
    grid-row: auto / span 1;
  }

  @media (max-width: 749px) {
    /* style__2_2_1_2 */
    .collage-style__2_2_1_2 {
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(5, 1fr);
    }

    .collage-style__2_2_1_2 > *:nth-child(7n + 1) {
      grid-area: auto / 1 / span 1 / span 1;
    }

    .collage-style__2_2_1_2 > *:nth-child(7n + 2) {
      grid-column: 2;
    }

    .collage-style__2_2_1_2 > *:nth-child(7n + 3) {
      grid-column: 1;
    }

    .collage-style__2_2_1_2 > *:nth-child(7n + 4) {
      grid-column: 2;
    }

    .collage-style__2_2_1_2 > *:nth-child(7n + 5) {
      grid-column: 1 / span 2;
      grid-row: span 2;
    }

    .collage-style__2_2_1_2 > *:nth-child(7n + 6) {
      grid-column: 1;
    }

    .collage-style__2_2_1_2 > *:nth-child(7n + 7) {
      grid-column: 2;
    }
    /* style__1_3 */
    .collage-style__1_3 {
      grid-template-columns: repeat(2, 1fr);
      grid-auto-rows: auto;
    }

    .collage-style__1_3 > *:nth-child(4n + 1) {
      grid-column: 1 / span 2;
      grid-row: auto / span 1;
    }

    .collage-style__1_3 > *:nth-child(4n + 2) {
      grid-column: 1 / span 2;
      grid-row: span 2;
    }

    .collage-style__1_3 > *:nth-child(4n + 3) {
      grid-column: 1;
    }

    .collage-style__1_3 > *:nth-child(4n + 4) {
      grid-column: 2;
    }

    /* style__3_3_3  */
    .collage-style__3_3_3 {
      grid-template-columns: repeat(2, 1fr);
      grid-auto-rows: 1fr;
    }

    .collage-style__3_3_3 > *:nth-child(9n + 1) {
      grid-column: 1;
      grid-row: auto / span 1;
    }

    .collage-style__3_3_3 > *:nth-child(9n + 2) {
      grid-column: 2;
      grid-row: auto / span 1;
    }

    .collage-style__3_3_3 > *:nth-child(9n + 3) {
      grid-column: 1 / span 2;
      grid-row: span 2;
    }

    .collage-style__3_3_3 > *:nth-child(9n + 4) {
      grid-column: 1 / span 2;
      grid-row: span 2;
    }

    .collage-style__3_3_3 > *:nth-child(9n + 5) {
      grid-column: 1;
      grid-row: auto / span 1;
    }

    .collage-style__3_3_3 > *:nth-child(9n + 6) {
      grid-column: 2;
      grid-row: auto / span 1;
    }

    .collage-style__3_3_3 > *:nth-child(9n + 7) {
      grid-column: 1;
      grid-row: auto / span 1;
    }

    .collage-style__3_3_3 > *:nth-child(9n + 8) {
      grid-column: 2;
      grid-row: auto / span 1;
    }

    .collage-style__3_3_3 > *:nth-child(9n + 9) {
      grid-column: 1 / span 2;
      grid-row: span 2;
    }

    /* collage-style__1_2_2 */
    .collage-style__1_2_2 {
      grid-template-columns: repeat(4, 1fr);
      grid-auto-rows: 1fr;
    }

    .collage-style__1_2_2 > *:nth-child(5n + 1) {
      grid-column: 1 / span 4;
      grid-row: auto / span 1;
    }

    .collage-style__1_2_2 > *:nth-child(5n + 2) {
      grid-column: 1 / span 2;
      grid-row: auto / span 1;
    }

    .collage-style__1_2_2 > *:nth-child(5n + 3) {
      grid-column: 3 / span 2;
      grid-row: auto / span 1;
    }

    .collage-style__1_2_2 > *:nth-child(5n + 4) {
      grid-column: 1 / span 2;
      grid-row: auto / span 1;
    }

    .collage-style__1_2_2 > *:nth-child(5n + 5) {
      grid-column: 3 / span 2;
      grid-row: auto / span 1;
    }

    /* collage-style__2_1 */
    .collage-style__2_1 {
      grid-template-columns: 1fr;
      grid-auto-rows: auto;
    }

    .collage-style__2_1 > *:nth-child(3n + 1) {
      grid-column: 1/2;
      grid-row: auto / span 1;
    }

    .collage-style__2_1 > *:nth-child(3n + 2) {
      grid-column: 1/2;
      grid-row: auto / span 1;
    }

    .collage-style__2_1 > *:nth-child(3n + 3) {
      grid-column: 1 / span 2;
      grid-row: auto / span 1;
    }

    /* collage-style__1_1_2 */
    .collage-style__1_1_2 {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-auto-rows: 1fr;
    }

    .collage-style__1_1_2 > *:nth-child(4n + 1) {
      grid-column: 1;
      grid-row: auto / span 1;
    }

    .collage-style__1_1_2 > *:nth-child(4n + 2) {
      grid-column: 2;
      grid-row: auto / span 1;
    }

    .collage-style__1_1_2 > *:nth-child(4n + 3) {
      grid-column: 1;
      grid-row: auto / span 1;
    }

    .collage-style__1_1_2 > *:nth-child(4n + 4) {
      grid-column: 2;
      grid-row: auto / span 1;
    }
  }
/* END_SNIPPET:media-wtext-collage */

/* START_SNIPPET:photoswipe_lib (INDEX:494) */
/*! PhotoSwipe main CSS by Dmytro Semenov | photoswipe.com */

.pswp {
  --pswp-bg: #000;
  --pswp-placeholder-bg: #222;


  --pswp-root-z-index: 100000;

  --pswp-preloader-color: rgb(79 79 79 / var(--opacity-40));
  --pswp-preloader-color-secondary: rgb(255 255 255 / var(--opacity-90));

  /* defined via js:
  --pswp-transition-duration: 333ms; */

  --pswp-icon-color: #fff;
  --pswp-icon-color-secondary: #4f4f4f;
  --pswp-icon-stroke-color: #4f4f4f;
  --pswp-icon-stroke-width: 2px;

  --pswp-error-text-color: var(--pswp-icon-color);
}


/*
	Styles for basic PhotoSwipe (pswp) functionality (sliding area, open/close transitions)
*/

.pswp {
	position: fixed;
	z-index: var(--pswp-root-z-index);
	display: none;
	touch-action: none;
	outline: 0;
	opacity: var(--opacity-4);
	contain: layout style size;
	-webkit-tap-highlight-color: rgb(0 0 0 / var(--opacity-0));
}

/* Prevents focus outline on the root element,
  (it may be focused initially) */
.pswp:focus {
  outline: 0;
}

.pswp * {
  box-sizing: border-box;
}

.pswp img {
  max-width: none;
}

.pswp--open {
	display: block;
}

.pswp,
.pswp__bg {
	transform: translateZ(0);
	will-change: opacity;
}

.pswp__bg {
  opacity: var(--opacity-4);
	background: var(--pswp-bg);
  display: block;
}

.pswp,
.pswp__scroll-wrap {
	overflow: hidden;
}

.pswp,
.pswp__scroll-wrap,
.pswp__bg,
.pswp__container,
.pswp__item,
.pswp__content,
.pswp__img,
.pswp__zoom-wrap {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.pswp {
	position: fixed;
}

.pswp__img,
.pswp__zoom-wrap {
	width: auto;
	height: auto;
}

.pswp--click-to-zoom.pswp--zoom-allowed .pswp__img {
	cursor: -webkit-zoom-in;
	cursor: -moz-zoom-in;
	cursor: zoom-in;
}

.pswp--click-to-zoom.pswp--zoomed-in .pswp__img {
	cursor: move;
	cursor: -webkit-grab;
	cursor: -moz-grab;
	cursor: grab;
}

.pswp--click-to-zoom.pswp--zoomed-in .pswp__img:active {
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
  cursor: grabbing;
}

/* :active to override grabbing cursor */
.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img,
.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img:active,
.pswp__img {
	cursor: -webkit-zoom-out;
	cursor: -moz-zoom-out;
	cursor: zoom-out;
}


/* Prevent selection and tap highlights */
.pswp__container,
.pswp__img,
.pswp__button,
.pswp__counter {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.pswp__item {
	/* z-index for fade transition */
	z-index: 1;
	overflow: hidden;
}

.pswp__hidden {
	display: none !important;
}

/* Allow to click through pswp__content element, but not its children */
.pswp__content {
  pointer-events: none;
}
.pswp__content > * {
  pointer-events: auto;
}


/*

  PhotoSwipe UI

*/

/*
	Error message appears when image is not loaded
	(JS option errorMsg controls markup)
*/
.pswp__error-msg-container {
  display: grid;
}
.pswp__error-msg {
	margin: auto;
	font-size: 1em;
	line-height: 1;
	color: var(--pswp-error-text-color);
}

/*
class pswp__hide-on-close is applied to elements that
should hide (for example fade out) when PhotoSwipe is closed
and show (for example fade in) when PhotoSwipe is opened
 */
.pswp .pswp__hide-on-close {
	opacity: var(--opacity-4);
	will-change: opacity;
	transition: opacity var(--pswp-transition-duration) cubic-bezier(0.4, 0, 0.22, 1);
	z-index: 10; /* always overlap slide content */
	pointer-events: none; /* hidden elements should not be clickable */
}

/* class pswp--ui-visible is added when opening or closing transition starts */
.pswp--ui-visible .pswp__hide-on-close {
	opacity: var(--opacity-100);
	pointer-events: auto;
}

/* <button> styles, including css reset */
.pswp__button {
	position: relative;
	display: block;
	width: 50px;
	height: 60px;
	padding: 0;
	margin: 0;
	overflow: hidden;
	cursor: pointer;
	background: none;
	border: 0;
	box-shadow: none;
	opacity: var(--opacity-85);
	-webkit-appearance: none;
	-webkit-touch-callout: none;
}

.pswp__button:hover,
.pswp__button:active,
.pswp__button:focus {
  transition: none;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  opacity: var(--opacity-100);
}

.pswp__button:disabled {
  opacity: var(--opacity-30);
  cursor: auto;
}

.pswp__icn {
  fill: var(--pswp-icon-color);
  color: var(--pswp-icon-color-secondary);
}

.pswp__icn {
  position: absolute;
  top: 14px;
  left: 9px;
  width: 32px;
  height: 32px;
  overflow: hidden;
  pointer-events: none;
}

.pswp__icn-shadow {
  stroke: var(--pswp-icon-stroke-color);
  stroke-width: var(--pswp-icon-stroke-width);
  fill: none;
}

.pswp__icn:focus {
	outline: 0;
}

/*
	div element that matches size of large image,
	large image loads on top of it,
	used when msrc is not provided
*/
div.pswp__img--placeholder,
.pswp__img--with-bg {
	background: var(--pswp-placeholder-bg);
}

.pswp__top-bar {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 60px;
	display: flex;
  flex-direction: row;
  justify-content: flex-end;
	z-index: 10;

	/* allow events to pass through top bar itself */
	pointer-events: none !important;
}
.pswp__top-bar > * {
  pointer-events: auto;
  /* this makes transition significantly more smooth,
     even though inner elements are not animated */
  will-change: opacity;
}


/*

  Close button

*/
.pswp__button--close {
  margin-right: 6px;
}


/*

  Arrow buttons

*/
.pswp__button--arrow {
  position: absolute;
  top: 0;
  width: 75px;
  height: 100px;
  top: 50%;
  margin-top: -50px;
}

.pswp__button--arrow:disabled {
  display: none;
  cursor: default;
}

.pswp__button--arrow .pswp__icn {
  top: 50%;
  margin-top: -30px;
  width: 60px;
  height: 60px;
  background: none;
  border-radius: 0;
}

.pswp--one-slide .pswp__button--arrow {
  display: none;
}

/* hide arrows on touch screens */
.pswp--touch .pswp__button--arrow {
  visibility: hidden;
}

/* show arrows only after mouse was used */
.pswp--has_mouse .pswp__button--arrow {
  visibility: visible;
}

.pswp__button--arrow--prev {
  right: auto;
  left: 0px;
}

.pswp__button--arrow--next {
  right: 0px;
}
.pswp__button--arrow--next .pswp__icn {
  left: auto;
  right: 14px;
  /* flip horizontally */
  transform: scale(-1, 1);
}

/*

  Zoom button

*/
.pswp__button--zoom {
  display: none;
}

.pswp--zoom-allowed .pswp__button--zoom {
  display: block;
}

/* "+" => "-" */
.pswp--zoomed-in .pswp__zoom-icn-bar-v {
  display: none;
}


/*

  Loading indicator

*/
.pswp__preloader {
  position: relative;
  overflow: hidden;
  width: 50px;
  height: 60px;
  margin-right: auto;
}

.pswp__preloader .pswp__icn {
  opacity: var(--opacity-0);
  transition: opacity 0.2s linear;
  animation: pswp-clockwise 600ms linear infinite;
}

.pswp__preloader--active .pswp__icn {
  opacity: var(--opacity-85);
}

@keyframes pswp-clockwise {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/*

  "1 of 10" counter

*/
.pswp__counter {
  height: 30px;
  margin: 15px 0 0 20px;
  font-size: 14px;
  line-height: 30px;
  color: var(--pswp-icon-color);
  text-shadow: 1px 1px 3px var(--pswp-icon-color-secondary);
  opacity: var(--opacity-85);
}

.pswp--one-slide .pswp__counter {
  display: none;
}
/* END_SNIPPET:photoswipe_lib */