.accessories-page {
  --accessories-ink: var(--halo-ink);
  --accessories-muted: var(--halo-color-text-secondary);
  --accessories-line: var(--halo-color-border-subtle);
  --accessories-line-strong: var(--halo-color-border-strong);
  --accessories-paper: var(--halo-color-surface-raised);
  --accessories-cloud: var(--halo-color-surface-muted);
  --accessories-wash: var(--halo-color-surface-page);
  --accessories-product-surface: var(--halo-color-surface-product);
  --accessories-dark: var(--halo-color-surface-dark);
  --accessories-dark-raised: var(--halo-color-surface-dark-raised);
  --accessories-inverse: var(--halo-color-text-inverse);
  --accessories-inverse-muted: var(--halo-color-text-inverse-muted);
  --accessories-dark-subtle: color-mix(in srgb, var(--halo-color-text-inverse) 16%, transparent);
  --accessories-dark-line: var(--halo-color-border-dark);
  --accessories-dark-hover: color-mix(in srgb, var(--halo-color-text-inverse) 10%, transparent);
  background: var(--accessories-paper);
  color: var(--accessories-ink);
  font-family: var(--halo-font-live);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Style-guide alignment: Inter Tight medium-500 eyebrows with +0.06em tracking. */
.accessories-page .eyebrow {
  font-family: var(--halo-font-narrow);
  font-size: var(--halo-type-caption);
  font-weight: 500;
  letter-spacing: 0.06em;
}

/* Bring .badge in line with the style-guide .sg-badge pill: drop the border,
   shorter pill, 11px Inter Tight 500 with caption tracking. */
.accessories-page .badge {
  min-height: 22px;
  padding: 4px 10px;
  border: 0;
  font-family: var(--halo-font-narrow);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 0.375rem;
}
.accessories-page .badge--yellow {
  border: 0;
}
.accessories-page .badge--dark {
  border: 0;
  background: var(--halo-color-surface-dark);
  color: var(--halo-color-text-inverse);
}

.skip-link {
  position: fixed;
  left: 16px;
  top: 16px;
  z-index: 200;
  transform: translateY(-150%);
  border-radius: var(--radius-sm);
  background: var(--halo-color-action-secondary);
  color: var(--halo-color-action-secondary-text);
  padding: 10px 14px;
  font-weight: 800;
  transition: transform var(--halo-duration-fast) var(--halo-ease-out);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

.accessories-page a:focus-visible,
.accessories-page button:focus-visible {
  outline: 2px solid var(--halo-color-focus);
  outline-offset: 3px;
  box-shadow: var(--halo-shadow-focus);
}

.accessories-promo {
  align-items: center;
  flex-wrap: wrap;
}

.accessories-promo a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.accessories-page main > section > .container,
.accessories-page .site-footer > .container {
  padding-inline: 0;
}

/* Align shared chrome (nav + footer) with page section containers — the
   global v3-nav rule adds 6rem internal padding which makes them visibly
   narrower than the product grid below. */
.accessories-page [data-shared-halo-nav] > .container,
.accessories-page [data-shared-halo-footer] > .container {
  padding-inline: 0;
}

.accessories-page .nav-mobile-menu {
  max-width: 100vw;
  overflow-x: clip;
}

.accessories-page .button {
  min-height: 44px;
  transition:
    transform var(--halo-duration-fast) var(--halo-ease-out),
    background-color var(--halo-duration-fast) var(--halo-ease-out),
    border-color var(--halo-duration-fast) var(--halo-ease-out),
    box-shadow var(--halo-duration-fast) var(--halo-ease-out);
}

@media (hover: hover) {
  .accessories-page .button:hover {
    transform: translateY(-2px);
  }
}

.button--hero {
  border-color: var(--accessories-dark-subtle);
  background: transparent;
  color: var(--accessories-inverse);
}

.button--hero:hover {
  border-color: var(--accessories-inverse-muted);
  background: var(--accessories-dark-hover);
}

.button--product {
  width: 100%;
  min-height: 38px;
  margin-top: auto;
  padding: 9px 20px;
  border-color: var(--halo-color-action-secondary);
  background: var(--halo-color-action-secondary);
  color: var(--halo-color-action-secondary-text);
  font-weight: 500;
  font-size: var(--halo-type-small);
  letter-spacing: 0;
}

.button--product:hover {
  border-color: var(--halo-color-action-secondary-hover);
  background: var(--halo-color-action-secondary-hover);
  color: var(--halo-color-action-secondary-text);
}

.accessories-hero {
  overflow: hidden;
  background:
    linear-gradient(90deg, var(--accessories-dark) 0%, var(--accessories-dark-raised) 56%, var(--accessories-dark) 100%);
  color: var(--accessories-inverse);
}

/* Light hero variant — Sean (design): top-of-page heroes should default to a
   light treatment. Apply by adding .accessories-hero--light to the hero
   section. Background is the same standardized muted surface used by every
   other non-white band on this page (fit-guide, featured-accessory) —
   one flat tone, not a one-off gradient. */
.accessories-hero--light {
  background: var(--accessories-cloud);
  color: var(--halo-color-text-primary);
  border-bottom: 1px solid var(--halo-color-border-subtle);
}

/* Compound .accessories-hero.accessories-hero--light selectors below (rather
   than .accessories-hero--light alone) deliberately out-specificity the base
   dark-hero .accessories-hero h1/p/eyebrow rules further down this file —
   those share the same specificity as a lone .accessories-hero--light
   selector and win on source order otherwise, leaving light-hero text
   rendering in the dark variant's near-white color. */
.accessories-hero.accessories-hero--light .eyebrow,
.accessories-hero.accessories-hero--light .accessories-hero__copy .eyebrow {
  color: var(--halo-color-text-secondary);
}

.accessories-hero.accessories-hero--light h1 {
  color: var(--halo-color-text-primary);
}

.accessories-hero.accessories-hero--light p:not(.eyebrow) {
  color: var(--halo-color-text-secondary);
}

.accessories-hero--light .accessories-hero__media {
  border-color: var(--halo-color-border-subtle);
  background: var(--halo-color-surface-product);
  box-shadow: var(--halo-shadow-card-lg);
}

.accessories-hero--light .button--hero {
  border-color: var(--halo-color-action-secondary);
  background: var(--halo-color-action-secondary);
  color: var(--halo-color-action-secondary-text);
}

.accessories-hero--light .button--hero:hover {
  background: var(--halo-color-action-secondary-hover);
  border-color: var(--halo-color-action-secondary-hover);
}

.accessories-hero__grid {
  min-height: 650px;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
  gap: var(--halo-space-2xl);
  align-items: center;
  padding: var(--halo-section-y-sm) 0;
}

.accessories-hero__copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--halo-space-lg);
  max-width: 650px;
}

.accessories-hero .eyebrow,
.support-cta .eyebrow {
  color: var(--accessories-inverse-muted);
}

.accessories-hero h1 {
  margin: 0;
  font-size: var(--halo-type-page);
  line-height: 1.04;
  letter-spacing: var(--halo-tracking-tight);
  font-weight: 400;
}

.accessories-hero p:not(.eyebrow) {
  max-width: 59ch;
  margin: 0;
  color: var(--accessories-inverse-muted);
  font-size: 1.125rem;
  line-height: 1.6;
}

.accessories-hero__actions,
.support-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.accessories-hero__media {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 500px;
  margin: 0;
  padding: clamp(24px, 4vw, 56px);
  overflow: hidden;
  border: 1px solid var(--accessories-dark-line);
  border-radius: var(--halo-component-pdp-gallery-radius);
  background: var(--accessories-product-surface);
  box-shadow: var(--halo-shadow-raised);
}

.accessories-hero__media img {
  width: 100%;
  height: 100%;
  max-height: 420px;
  object-fit: contain;
}

/* Lifestyle photography fills the frame edge-to-edge instead of sitting
   padded/contained like a product-on-transparent-bg shot. Declared after
   the base rules above so it wins on equal specificity. The img is taken
   out of grid flow (absolute + inset) so a square source can't inflate the
   box via the height:100%-of-auto-row feedback loop the base rule relies on. */
.accessories-hero__media--fill {
  padding: 0;
}

.accessories-hero__media--fill img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
}

.hero-product-stack {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--accessories-dark-line);
}

.hero-product-stack__item {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  min-height: 160px;
  padding: var(--halo-space-lg);
  overflow: hidden;
  background: var(--accessories-product-surface);
}

.hero-product-stack__item--large {
  grid-row: span 2;
}

.hero-product-stack__item--wide {
  grid-column: span 2;
}

.hero-product-stack__item img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
}

.hero-product-stack__item--large img {
  max-height: none;
}

.accessory-quickshop,
.catalog-section {
  padding: 72px 0;
}

.accessory-quickshop {
  background: var(--accessories-paper);
}

.accessory-quickshop__header,
.catalog-section__header,
.catalog-group-block__header {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 14px;
}

.accessory-quickshop__header {
  margin-bottom: 24px;
}

.accessory-quickshop h2,
.catalog-section h2,
.fit-guide h2,
.support-cta h2 {
  margin: 0;
  font-size: var(--halo-type-section);
  line-height: 1.06;
  letter-spacing: var(--halo-tracking-tight);
  font-weight: 400;
}

.accessory-quickshop__header p:not(.eyebrow),
.catalog-section__header p,
.fit-guide p {
  max-width: 56ch;
  margin: 0;
  color: var(--accessories-muted);
  line-height: 1.6;
}

.accessory-clusters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.accessory-clusters a {
  min-height: 180px;
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: center;
  gap: 20px;
  padding: 20px;
  border: 1px solid var(--accessories-line);
  border-radius: var(--halo-component-card-radius);
  background: var(--accessories-wash);
  box-shadow: var(--halo-shadow-card);
  transition:
    transform var(--halo-duration-fast) var(--halo-ease-out),
    border-color var(--halo-duration-fast) var(--halo-ease-out),
    background-color var(--halo-duration-fast) var(--halo-ease-out),
    box-shadow var(--halo-duration-fast) var(--halo-ease-out);
}

.accessory-clusters__thumb {
  width: 120px;
  height: 120px;
  object-fit: contain;
}

.accessory-clusters__text {
  display: grid;
  gap: 6px;
}

.accessory-clusters a:hover {
  border-color: var(--accessories-line-strong);
  background: var(--accessories-paper);
  box-shadow: var(--halo-shadow-card-lg);
}

.accessory-clusters strong {
  font-size: var(--halo-type-card-title);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
}

.accessory-clusters span {
  color: var(--accessories-muted);
  font-size: var(--halo-type-small);
  line-height: 1.5;
}

.featured-accessory {
  padding: 48px 0;
  background: var(--accessories-cloud);
}

.featured-accessory__grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.86fr) minmax(0, 1fr);
  align-items: center;
  gap: 48px;
}

.featured-accessory__media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 8 / 5;
  min-height: 260px;
  padding: clamp(20px, 3vw, 40px);
  overflow: hidden;
  border-radius: var(--halo-component-pdp-gallery-radius);
  background: var(--halo-color-surface-raised);
  border: 1px solid var(--accessories-line);
}

.featured-accessory__badge {
  position: absolute;
  top: var(--halo-space-lg);
  left: var(--halo-space-lg);
  z-index: 1;
  border-color: var(--halo-color-link);
  background: var(--halo-color-link);
  color: var(--halo-color-text-inverse);
}

.featured-accessory__media img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
}

.featured-accessory__body {
  display: grid;
  gap: 18px;
  max-width: 680px;
}

.featured-accessory__body .eyebrow {
  font-size: 0.7rem;
  margin: 0;
  padding-bottom:0;
}

.featured-accessory__body h2 {
  margin: 0;
  font-size: var(--halo-type-section);
  line-height: 1.06;
  letter-spacing: var(--halo-tracking-tight);
  font-weight: 400;
  padding-bottom:0;
}

.featured-accessory__body p {
  max-width: 64ch;
  margin: 0;
  color: var(--accessories-muted);
  font-size: 1.05rem;
  line-height: 1.62;
}

.accessory-note {
  padding: 14px 16px;
  border: 1px solid var(--accessories-line);
  border-radius: var(--radius-sm);
  background: var(--accessories-paper);
}

.featured-accessory__purchase {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  padding-top: 4px;
}

.product-price {
  color: var(--accessories-ink);
  font-size: 1.0625rem;
  font-weight: 400;
  letter-spacing: var(--halo-tracking-tight);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.featured-accessory__body .product-price {
  font-size: 1.35rem;
}

.catalog-section {
  background: var(--accessories-paper);
}

.catalog-section__header {
  margin-bottom: 44px;
}

.support-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border: 1px solid var(--accessories-line);
  border-radius: var(--radius-pill);
  color: var(--accessories-ink);
  font-weight: 800;
}

.support-link:hover {
  border-color: var(--accessories-line-strong);
}

.catalog-group-block {
  scroll-margin-top: 92px;
}

.catalog-group-block + .catalog-group-block {
  margin-top: 64px;
  padding-top: 64px;
  border-top: 1px solid var(--accessories-line);
}

.catalog-group-block__header {
  margin-bottom: 18px;
}

.catalog-group-block__header h3 {
  margin: 0;
  font-size: var(--halo-type-subsection);
  line-height: 1.12;
  font-weight: 400;
  letter-spacing: var(--halo-tracking-tight);
}

.catalog-group-block__header a,
.catalog-group-block__header span {
  color: var(--accessories-muted);
  font-size: var(--halo-type-small);
  font-weight: 500;
}

.catalog-group-block__header a {
  color: var(--halo-color-link);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.catalog-group-block__header a:hover {
  color: var(--halo-color-link-hover);
}

.accessory-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.accessory-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.accessory-product {
  display: grid;
  grid-template-rows: minmax(260px, auto) 1fr;
  overflow: hidden;
  border: 1px solid var(--accessories-line);
  border-radius: var(--halo-component-card-radius);
  background: var(--accessories-paper);
  box-shadow: var(--halo-shadow-card);
  transition:
    transform var(--halo-duration-fast) var(--halo-ease-out),
    border-color var(--halo-duration-fast) var(--halo-ease-out),
    box-shadow var(--halo-duration-fast) var(--halo-ease-out);
}

.accessory-product:hover {
  border-color: var(--accessories-line-strong);
  box-shadow: var(--halo-shadow-card-lg);
}

.accessory-product__media {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  min-height: 260px;
  padding: var(--halo-space-lg);
  overflow: hidden;
  background: var(--accessories-product-surface);
}

.accessory-product__media img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
}

.accessory-product__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
}

.accessory-product__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.accessory-product h4 {
  margin: 0;
  font-size: var(--halo-type-card-title);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
}

.accessory-product p {
  margin: 0;
  color: var(--accessories-muted);
  font-size: var(--halo-type-small);
  line-height: 1.5;
}

.accessory-product__details {
  display: grid;
  gap: 8px;
  margin: 0 0 4px;
  padding-left: 18px;
  color: var(--accessories-muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

.accessory-product__features {
  display: grid;
  gap: 10px;
  margin: 4px 0 4px;
  padding: 0;
  list-style: none;
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--accessories-ink);
}

.accessory-product__features li {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: start;
  gap: 12px;
}

.accessory-product__features li::before {
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--halo-color-action-primary);
  color: var(--halo-blue-950);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
}

.accessory-product--placeholder {
  position: relative;
}

.accessory-product--placeholder .accessory-product__media--placeholder {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  min-height: 260px;
  padding: var(--halo-space-lg);
  background: var(--halo-color-surface-product);
}

.placeholder-splash {
  display: inline-block;
  padding: 14px 22px;
  border: 2px dashed var(--halo-color-link);
  border-radius: var(--halo-component-card-radius);
  color: var(--halo-color-link);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-transform: uppercase;
  text-align: center;
}

.product-price--muted {
  color: var(--accessories-muted);
  font-weight: 600;
}

.button--product-disabled {
  pointer-events: none;
  opacity: 0.55;
  cursor: not-allowed;
}

.accessory-product--horizontal {
  grid-template-columns: 220px minmax(0, 1fr);
  grid-template-rows: auto;
}

.accessory-product--horizontal .accessory-product__media {
  min-height: 100%;
  aspect-ratio: auto;
}

.fit-guide {
  padding: 112px 0;
  background: var(--accessories-cloud);
}

.fit-guide__grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
  gap: 40px;
  align-items: center;
}

.fit-guide__grid > div:first-child {
  display: grid;
  gap: 20px;
}

.fit-matrix {
  overflow: hidden;
  border: 1px solid var(--accessories-line);
  border-radius: var(--halo-component-card-radius);
  background: var(--accessories-paper);
  box-shadow: var(--halo-shadow-raised);
}

.fit-matrix__row {
  display: grid;
  grid-template-columns: minmax(150px, 0.55fr) minmax(220px, 1fr) minmax(220px, 1fr);
  gap: 1px;
  background: var(--accessories-line);
}

.fit-matrix__row > span {
  display: flex;
  align-items: center;
  padding: 24px 22px;
  background: var(--accessories-paper);
  color: var(--accessories-muted);
  font-size: var(--halo-type-small);
  line-height: 1.5;
  transition: background-color var(--halo-duration-fast) var(--halo-ease-out);
}

.fit-matrix__row > span:first-child {
  background: var(--accessories-wash);
  color: var(--accessories-ink);
  font-size: var(--halo-type-body);
  font-weight: 500;
}

.fit-matrix__row:not(.fit-matrix__row--head):hover > span {
  background: var(--halo-color-status-info-surface);
}

.fit-matrix__row--head > span {
  padding: 18px 22px;
  background: var(--accessories-dark);
  color: var(--accessories-inverse);
  font-family: var(--halo-font-narrow);
  font-size: var(--halo-type-caption);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.fit-matrix__row--head > span:first-child {
  background: var(--accessories-dark);
  color: var(--accessories-inverse);
}

.support-cta {
  padding: 58px 0;
  background: var(--accessories-dark);
  color: var(--accessories-inverse);
}

.support-cta__grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.support-cta h2 {
  max-width: 760px;
}

.support-cta .button--ghost {
  border-color: var(--accessories-dark-subtle);
  color: var(--accessories-inverse);
}

.support-cta .button--ghost:hover {
  background: var(--accessories-dark-hover);
}

.accessories-page .site-footer .footer-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(160px, 0.42fr));
  gap: 32px;
  align-items: start;
}

.accessories-page .site-footer .footer-brand {
  display: inline-flex;
  width: 104px;
  padding: 8px;
  border-radius: var(--radius-sm);
  background: var(--accessories-paper);
}

.accessories-page .site-footer .footer-grid p {
  margin: 14px 0 0;
}

.accessories-page .site-footer .footer-grid nav {
  display: grid;
  gap: 8px;
}

.accessories-page .site-footer .footer-grid h2 {
  margin: 0 0 6px;
  color: var(--accessories-inverse);
  font-size: 0.82rem;
  letter-spacing: var(--halo-tracking-tight);
  text-transform: uppercase;
}

.accessories-page .site-footer .footer-grid a {
  width: fit-content;
}

.accessory-pdp-detail {
  --pdp-nav-offset: 92px;
  --pdp-page-surface: var(--halo-color-surface-raised);
  --pdp-panel-surface: var(--halo-color-surface-raised);
  --pdp-product-surface: var(--halo-color-surface-product);
  --pdp-line: var(--halo-color-border-subtle);
  --pdp-line-strong: var(--halo-color-border-strong);
  --pdp-text: var(--halo-color-text-primary);
  --pdp-text-secondary: var(--halo-color-text-secondary);
  --pdp-muted: var(--halo-color-text-muted);
  --pdp-link: var(--halo-color-link);
  --pdp-link-hover: var(--halo-color-link-hover);
  --pdp-action-primary: var(--halo-color-surface-dark);
  --pdp-action-primary-hover: var(--halo-color-surface-dark-raised);
  --pdp-action-primary-text: var(--halo-color-action-secondary-text);
  background: var(--accessories-paper);
}

.accessory-pdp-main {
  background: var(--accessories-paper);
}

.accessory-breadcrumb {
  background: var(--accessories-paper);
  border-bottom: 1px solid var(--accessories-line);
}

.accessory-breadcrumb__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 16px 0;
  color: var(--accessories-muted);
  font-size: var(--halo-type-small);
  line-height: 1.4;
}

.accessory-breadcrumb a {
  color: var(--halo-color-link);
  font-weight: 500;
}

.accessory-breadcrumb a:hover {
  color: var(--halo-color-link-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.accessory-breadcrumb [aria-current="page"] {
  color: var(--accessories-ink);
  font-weight: 500;
}

.accessory-breadcrumb__inner > span[aria-hidden="true"] {
  color: var(--halo-color-text-muted);
  font-weight: 400;
}

.accessory-pdp-shell {
  padding: 16px 0 72px;
}

.accessory-pdp-shell__grid {
  display: grid;
  /* Matches the collar configurator's buy-stack width/gap
     (shop-wireless-dog-fence.html .shop-container) for visual parity. */
  grid-template-columns: minmax(0, 1fr) minmax(380px, 480px);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.accessory-pdp-gallery {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.accessory-pdp-gallery__featured {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1.08 / 1;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--accessories-line);
  border-radius: var(--halo-radius-xl);
  background: #fff;
}

.accessory-pdp-gallery__featured img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  transition: opacity 0.18s var(--halo-ease-out);
}

.accessory-pdp-gallery__featured img.is-fading {
  opacity: 0.18;
}

/* Oura-style carousel: thumbnails hidden, subtle arrows + dots + play toggle.
   Single-image galleries get no carousel, so hide their strip too — it would
   just duplicate the featured image. */
.accessory-pdp-gallery.has-carousel .accessory-thumb-strip,
.accessory-pdp-gallery.is-single-image .accessory-thumb-strip {
  display: none;
}

/* Overlaid in the bottom-right corner of the featured image (Oura-style). */
.accessory-carousel-controls {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
}

.accessory-carousel-arrow {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.88);
  cursor: pointer;
  filter: drop-shadow(0 1px 5px rgba(0, 0, 0, 0.5));
  transition: color var(--halo-duration-fast) var(--halo-ease-out);
}

.accessory-carousel-arrow:hover {
  color: #fff;
}

.accessory-pdp-gallery.has-light-carousel-controls .accessory-carousel-arrow {
  color: rgba(255, 255, 255, 0.88);
  filter: drop-shadow(0 1px 5px rgba(0, 0, 0, 0.5));
}

.accessory-carousel-controls.is-light .accessory-carousel-arrow {
  color: rgba(255, 255, 255, 0.88);
  filter: drop-shadow(0 1px 5px rgba(0, 0, 0, 0.5));
}

.accessory-pdp-gallery__featured:has([data-gallery-featured][src*="-02.png"]) .accessory-carousel-arrow {
  color: rgba(255, 255, 255, 0.88);
  filter: drop-shadow(0 1px 5px rgba(0, 0, 0, 0.5));
}

.accessory-pdp-gallery.has-light-carousel-controls .accessory-carousel-arrow:hover,
.accessory-carousel-controls.is-light .accessory-carousel-arrow:hover,
.accessory-pdp-gallery__featured:has([data-gallery-featured][src*="-02.png"]) .accessory-carousel-arrow:hover {
  color: #fff;
}

.accessory-carousel-dots {
  display: flex;
  align-items: center;
  gap: 7px;
}

.accessory-carousel-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.42);
  cursor: pointer;
  transition:
    width 0.3s var(--halo-ease-out),
    background-color 0.3s var(--halo-ease-out);
}

.accessory-carousel-dot.is-active {
  width: 22px;
  background: #fff;
}

.accessory-pdp-gallery.has-light-carousel-controls .accessory-carousel-dot {
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.42);
}

.accessory-carousel-controls.is-light .accessory-carousel-dot {
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.42);
}

.accessory-pdp-gallery__featured:has([data-gallery-featured][src*="-02.png"]) .accessory-carousel-dot {
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.42);
}

.accessory-pdp-gallery.has-light-carousel-controls .accessory-carousel-dot.is-active,
.accessory-carousel-controls.is-light .accessory-carousel-dot.is-active,
.accessory-pdp-gallery__featured:has([data-gallery-featured][src*="-02.png"]) .accessory-carousel-dot.is-active {
  background: #fff !important;
}

.accessory-pdp-gallery__placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border: 1px dashed var(--accessories-line-strong);
  border-radius: var(--halo-component-card-radius);
  color: var(--accessories-muted);
  font-weight: 850;
  text-align: center;
}

.accessory-thumb-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
  gap: 10px;
  max-width: 100%;
  overflow: visible;
  padding: 0;
  scrollbar-width: none;
}

.accessory-thumb {
  min-width: 0;
  width: auto;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: var(--halo-radius-md);
  background: #fff;
  color: var(--pdp-text);
  cursor: pointer;
  scroll-snap-align: start;
  transition: box-shadow 0.16s ease, transform 0.16s ease;
}

.accessory-thumb img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: inherit;
  background: #fff;
  pointer-events: none;
}

.accessory-thumb span {
  color: var(--accessories-muted);
  font-size: var(--halo-type-caption);
  font-weight: 850;
  line-height: 1.15;
  text-align: center;
}

.accessory-thumb:hover,
.accessory-thumb:focus-visible,
.accessory-thumb.is-selected,
.accessory-thumb[aria-current="true"] {
  box-shadow: inset 0 0 0 2px var(--pdp-link);
  outline: none;
}

.accessory-thumb--placeholder {
  background: var(--halo-color-surface-muted);
  color: var(--halo-color-text-muted);
  cursor: default;
  opacity: 1;
}

.accessory-thumb--placeholder:hover {
  box-shadow: none;
}

.accessory-thumb--placeholder:disabled {
  cursor: default;
}

.accessory-thumb__color {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
}

.accessory-thumb__color--blue {
  background: color-mix(in srgb, var(--halo-color-link) 16%, var(--halo-color-surface-raised));
}

.accessory-thumb__color--wash {
  background: var(--halo-color-surface-muted);
}

.accessory-thumb__color--grey {
  background: var(--halo-color-surface-muted);
}

.accessory-thumb__color--yellow {
  background: color-mix(in srgb, var(--halo-color-action-primary) 42%, var(--halo-color-surface-raised));
}

.accessory-thumb__color--graphite {
  background: color-mix(in srgb, var(--halo-color-surface-dark) 18%, var(--halo-color-surface-raised));
}

.accessory-buy-stack {
  position: sticky;
  top: calc(var(--pdp-nav-offset) + 16px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-self: start;
  /* max-height: calc(100vh - var(--pdp-nav-offset) - 32px); */
  overflow-y: auto;
  padding: 0 0 24px;
  scrollbar-width: none;
}

main.accessory-pdp-detail .config-inner {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.accessory-buy-stack::-webkit-scrollbar {
  display: none;
}

.accessory-buy-stack > .eyebrow {
  margin: 0;
}

.accessory-trust-badge {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 7px;
  color: var(--pdp-muted);
  font-size: 0.875rem;
  min-width: 0;
}

.accessory-trust-badge svg,
.accessory-trust-badge img {
  flex-shrink: 0;
}

.accessory-trust-badge .google-rating-stars {
  display: block;
  width: 110px !important;
  max-width: 110px !important;
  max-height: 20px;
  height: auto;
  object-fit: contain;
}

.accessory-trust-badge__label {
  color: var(--halo-color-text-secondary);
  font-weight: 400;
  white-space: nowrap;
}

.accessory-trust-badge__count {
  color: #424242;
  font-size: 0.625rem;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.accessory-buy-stack h1 {
  margin: 0;
  color: var(--pdp-text);
  font-size: clamp(2rem, 2.7vw, 2.45rem);
  line-height: 1.06;
  letter-spacing: 0;
  font-weight: 400;
}

main.accessory-pdp-detail .accessory-buy-stack .product-title,
main.accessory-pdp-detail .accessory-buy-stack h1 {
  font-family: var(--halo-font-live);
  font-weight: 400 !important;
  letter-spacing: 0;
  padding-bottom:0;
}

.accessory-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  /* Pull the title up against the stack's 20px flex gap. */
  margin-bottom: -6px;
  border: 0;
  color: var(--accessories-muted);
  font-size: 0.8125rem;
}

.accessory-breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.accessory-breadcrumb a:hover {
  color: var(--accessories-ink);
  text-decoration: underline;
}

.accessory-breadcrumb [aria-current="page"] {
  color: var(--accessories-ink);
}

.accessory-buy-stack__summary {
  max-width: 54ch;
  margin: 6px 0 0;
  color: var(--pdp-text-secondary);
  font-size: 0.9375rem;
  line-height: 1.55;
  padding-bottom:0;
}

.accessory-buy-stack__note {
  max-width: 54ch;
  margin: 4px 0 0;
  color: var(--accessories-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.accessory-features-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 22px;
  row-gap: 14px;
  margin: 0;
  padding: 18px 0;
  list-style: none;
  border-top: 1px solid var(--pdp-line);
  border-bottom: 1px solid var(--pdp-line);
}

.accessory-features-grid li,
.accessory-features-grid .feature-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--pdp-text-secondary);
  font-size: 0.875rem;
  line-height: 1.25;
}

.accessory-features-grid img,
.accessory-features-grid svg {
  flex: 0 0 auto;
}

main.accessory-pdp-detail .delivery-note {
  margin: 0;
  color: var(--pdp-text-secondary);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.4;
}

/* Compound [hidden] selectors below beat the plain-class `display:` rules on
   specificity regardless of source order, so the native hidden attribute
   reliably wins on every module we toggle off. */
.accessory-addon-module[hidden],
.accessory-benefit-cards[hidden],
.accessory-lifestyle[hidden] {
  display: none;
}

.accessory-addon-module {
  display: grid;
  gap: 10px;
  padding: 2px 0 24px;
  border-bottom: 1px solid var(--pdp-line);
}

.accessory-addon-module .module-label {
  margin: 0;
  color: var(--halo-color-text-secondary);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.1;
  text-transform: uppercase;
}

.accessory-addon-card {
  box-sizing: border-box;
  min-height: 68px;
  padding: 0 !important;
  border: 1px solid var(--pdp-line);
  border-radius: var(--halo-radius-lg);
  background: var(--halo-color-surface-raised);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.accessory-addon-card:hover,
.accessory-addon-card:focus-within {
  border-color: var(--halo-color-link);
  box-shadow: 0 0 0 1px var(--halo-color-link);
}

.accessory-addon-card .addon-row {
  box-sizing: border-box;
  min-height: 68px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
}

.accessory-addon-card .addon-select {
  position: relative;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  cursor: pointer;
}

.accessory-addon-card .addon-input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.accessory-addon-card .addon-check {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--accessories-line-strong);
  border-radius: 50%;
  color: var(--halo-color-text-inverse);
  background: var(--accessories-paper);
}

.accessory-addon-card .addon-check svg {
  width: 11px;
  height: 11px;
  opacity: 0;
}

.accessory-addon-card .addon-input:checked + .addon-check {
  border-color: var(--halo-color-link);
  background: var(--halo-color-link);
}

.accessory-addon-card .addon-input:checked + .addon-check svg {
  opacity: 1;
}

.accessory-addon-card .addon-summary {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.accessory-addon-card .addon-title {
  color: var(--pdp-text);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
}

.accessory-addon-card .addon-copy {
  overflow: hidden;
  color: var(--pdp-text-secondary);
  font-size: 0.8rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.accessory-addon-card .addon-price {
  color: var(--pdp-text);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.accessory-addon-card .addon-toggle {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: 1px solid var(--accessories-line-strong);
  border-radius: 50%;
  background: var(--accessories-paper);
  color: var(--accessories-muted);
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.accessory-addon-card .addon-toggle:hover,
.accessory-addon-card .addon-toggle:focus-visible {
  border-color: var(--halo-color-link);
  background: var(--halo-color-link);
  color: var(--halo-color-text-inverse);
  outline: none;
}

.accessory-addon-card .addon-toggle svg {
  width: 15px;
  height: 15px;
}

.accessory-quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.accessory-quick-link {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--halo-color-link);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 650;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.accessory-quick-link:hover {
  color: var(--halo-color-link-hover);
}

.accessory-perks-box {
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--halo-radius-lg);
  background: var(--halo-color-membership-surface);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.accessory-perks-box.is-expanded {
  border-color: var(--accessories-line-strong);
  background: var(--accessories-paper);
}

.accessory-perks-box__header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
}

.accessory-perks-box__info {
  display: grid;
  gap: 2px;
}

.accessory-perks-box__label {
  color: var(--accessories-ink);
  font-size: 0.9rem;
  font-weight: 750;
}

.accessory-perks-box__desc {
  color: var(--accessories-muted);
  font-size: 0.8125rem;
}

.accessory-perks-box__right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.accessory-perks-box__price {
  white-space: nowrap;
  color: var(--accessories-muted);
  font-size: 0.9rem;
  font-weight: 700;
}

.accessory-perks-box__toggle {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: 1.5px solid var(--accessories-line-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--accessories-muted);
  transition: transform 0.2s ease, color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.accessory-perks-box.is-expanded .accessory-perks-box__toggle {
  transform: rotate(180deg);
  border-color: var(--halo-color-link);
  background: var(--halo-color-link);
  color: var(--halo-color-text-inverse);
}

.accessory-perks-box__details {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.accessory-perks-box.is-expanded .accessory-perks-box__details {
  max-height: 360px;
}

.accessory-perks-box__details p {
  margin: 0;
  padding: 0 20px;
  color: var(--accessories-muted);
  font-size: 0.875rem;
  line-height: 1.6;
}

.accessory-perks-box__link {
  display: block;
  padding: 12px 20px 18px;
  color: var(--halo-color-link);
  font-size: 0.875rem;
  font-weight: 800;
  text-decoration: none;
}

.accessory-perks-box__link:hover {
  color: var(--halo-color-link-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.accessory-safety-warning {
  overflow: hidden;
  display: grid;
  gap: 0;
  padding: 0;
  border: 1px solid var(--halo-color-border-subtle);
  border-radius: 6px;
  background: #fff;
  color: #171717;
  max-width: 100%;
}

.accessory-safety-warning h2,
.accessory-safety-warning #zone-beacon-warning-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 5px 10px;
  background: #f58220;
  color: #111;
  font-size: 0.75rem;
  line-height: 1.1;
  letter-spacing: 0;
  font-weight: 850;
}

.accessory-safety-warning__icon {
  display: grid;
  place-items: center;
  width: 10px;
  height: 10px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-size: 0.5rem;
  line-height: 1;
  font-weight: 900;
}

.accessory-safety-warning__body {
  padding: 8px 10px 9px;
}

.accessory-safety-warning ul {
  display: grid;
  gap: 2px;
  margin: 0;
  padding-left: 13px;
}

.accessory-safety-warning li {
  color: #171717;
  font-size: 0.69rem;
  line-height: 1.25;
}

.accessory-safety-warning strong {
  font-weight: 850;
}

.accessory-purchase {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding-top: 24px;
  text-align: left;
}

.accessory-price-display {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-left: 0;
}

/* Matches the configurator's rendered price: the vendor's weight-750 is
   overridden page-level to font-live / 400 / -0.01em, so mirror that here. */
.accessory-price-display__current {
  color: var(--pdp-text);
  font-family: var(--halo-font-live);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.accessory-price-display__cents {
  font-size: 0.5em;
  bottom: unset;
  line-height: 1;
  vertical-align: super;
  letter-spacing: 0;
}

.accessory-price-display__original {
  color: var(--halo-color-text-muted);
  font-size: 1.25rem;
  text-decoration: line-through;
}

.accessory-discount-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--halo-color-status-success);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.accessory-discount-pill__icon {
  flex: 0 0 auto;
}

.accessory-affirm-note {
  margin: -2px 0 6px;
  padding-left: 0;
  color: var(--pdp-text-secondary);
  font-size: 0.875rem;
  text-align: left;
}

.accessory-savings-banner {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--halo-color-status-success) 30%, var(--halo-color-status-success-surface));
  border-radius: var(--halo-radius-md);
  background: var(--halo-color-status-success-surface);
  text-align: center;
}

.accessory-savings-banner p {
  margin: 0;
  color: var(--halo-color-status-success);
  font-size: var(--halo-type-small);
  font-weight: 750;
}

.accessory-compatibility-note,
.accessory-status-note,
.accessory-cart-status {
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--accessories-line);
  border-radius: var(--halo-radius-md);
  background: var(--accessories-wash);
  color: var(--accessories-muted);
  font-size: 0.875rem;
  line-height: 1.45;
}

.accessory-compatibility-note {
  display: grid;
  gap: 4px;
}

.accessory-compatibility-note strong,
.accessory-status-note strong {
  color: var(--accessories-ink);
}

.accessory-status-note ul {
  display: grid;
  gap: 6px;
  margin: 8px 0 0;
  padding-left: 18px;
}

/* Color/finish swatches — mirrors the collar configurator's circular swatch
   pattern (shop-wireless-dog-fence.html .color-option) on the accessory
   page's own token set, so sizing/behavior match without porting vendor CSS. */
.accessory-config-section {
  display: grid;
  gap: 10px;
}

.accessory-config-label {
  display: flex;
  gap: 4px;
  color: var(--accessories-ink);
  font-size: var(--halo-type-small);
  font-weight: 700;
}

.accessory-config-label span:last-child {
  color: var(--accessories-muted);
  font-weight: 500;
}

.accessory-color-options {
  --accessory-swatch-size: clamp(42px, 4.4vw, 56px);
  --accessory-swatch-gap: clamp(6px, 0.7vw, 8px);
  display: flex;
  flex-wrap: wrap;
  gap: var(--accessory-swatch-gap);
}

.accessory-color-option {
  position: relative;
  flex: 0 0 var(--accessory-swatch-size);
  width: var(--accessory-swatch-size);
  height: var(--accessory-swatch-size);
  padding: 0;
  /* No overflow:hidden — the "New" badge hangs outside the circle.
     The img clips itself via border-radius instead. */
  border: 3px solid transparent;
  border-radius: 50%;
  background: var(--accessories-product-surface);
  cursor: pointer;
  transition: border-color var(--halo-duration-fast) var(--halo-ease-out), transform var(--halo-duration-fast) var(--halo-ease-out);
}

.accessory-color-option:hover {
  transform: translateY(-1px);
}

.accessory-color-option img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.accessory-color-option.is-active {
  border-color: var(--pdp-link);
  box-shadow: inset 0 0 0 2px var(--accessories-paper);
}

.accessory-color-check {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: inherit;
  color: var(--halo-color-text-inverse);
  font-size: 1.125rem;
  font-weight: 800;
  opacity: 0;
}

.accessory-color-option.is-active .accessory-color-check {
  opacity: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.accessory-color-option__badge {
  position: absolute;
  top: 50%;
  right: -18px;
  z-index: 2;
  padding: 5px 7px;
  border-radius: var(--halo-radius-sm);
  background: var(--pdp-link);
  color: var(--halo-color-text-inverse);
  font-family: var(--halo-font-narrow);
  font-size: 0.625rem;
  line-height:1;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform: translateY(-50%);
  pointer-events: none;
}

/* Model / size dropdown — no configurator precedent, styled from the same
   field tokens used elsewhere (quantity control, form fields). */
.accessory-model-select {
  position: relative;
  display: grid;
  gap: 6px;
}

/* JS swaps the native select for a styled trigger + listbox. */
.accessory-model-select.is-enhanced select {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  pointer-events: none;
}

.accessory-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  padding: 0 14px 0 16px;
  border: 1px solid var(--accessories-line-strong);
  border-radius: var(--halo-radius-md);
  background: var(--accessories-paper);
  color: var(--accessories-ink);
  font-family: inherit;
  font-size: var(--halo-type-small);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--halo-duration-fast) var(--halo-ease-out);
}

.accessory-select-trigger:hover {
  border-color: var(--accessories-ink);
}

.accessory-select-trigger:focus-visible {
  outline: none;
  border-color: var(--halo-color-link);
  box-shadow: 0 0 0 3px var(--halo-color-focus-ring);
}

.accessory-select-trigger svg {
  flex: none;
  color: var(--accessories-muted);
  transition: transform var(--halo-duration-fast) var(--halo-ease-out);
}

.accessory-select-trigger[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.accessory-select-list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  z-index: 30;
  margin: 0;
  padding: 6px;
  border: 1px solid var(--accessories-line);
  border-radius: var(--halo-radius-md);
  background: var(--accessories-paper);
  box-shadow: var(--halo-shadow-card-lg);
  list-style: none;
}

.accessory-select-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--halo-radius-sm);
  color: var(--accessories-ink);
  font-size: var(--halo-type-small);
  font-weight: 500;
  cursor: pointer;
}

.accessory-select-list li:hover {
  background: var(--accessories-product-surface);
}

.accessory-select-list li svg {
  flex: none;
  color: var(--accessories-ink);
  opacity: 0;
}

.accessory-select-list li[aria-selected="true"] svg {
  opacity: 1;
}

.accessory-model-select label {
  color: var(--accessories-ink);
  font-size: var(--halo-type-small);
  font-weight: 700;
}

.accessory-model-select select {
  min-height: 44px;
  padding: 0 40px 0 16px;
  border: 1px solid var(--accessories-line-strong);
  border-radius: var(--halo-radius-md);
  background:
    var(--accessories-paper)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23526777' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
    no-repeat right 14px center;
  background-size: 16px;
  color: var(--accessories-ink);
  font-family: inherit;
  font-size: var(--halo-type-small);
  font-weight: 500;
  appearance: none;
  cursor: pointer;
  transition: border-color var(--halo-duration-fast) var(--halo-ease-out);
}

.accessory-model-select select:focus-visible {
  outline: none;
  border-color: var(--halo-color-link);
  box-shadow: 0 0 0 3px var(--halo-color-focus-ring);
}

.accessory-quantity {
  display: flex;
  align-items: center;
  margin-top: 0;
}

/* Price and quantity stepper sit together on one row;
   button/status/note span below. */
.accessory-purchase {
  display: grid !important;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px 24px;
}

.accessory-purchase > .accessory-quantity {
  justify-self: start;
}

.accessory-purchase > .accessory-add-cart,
.accessory-purchase > .accessory-cart-status,
.accessory-purchase > .accessory-guarantee-note {
  grid-column: 1 / -1;
}

.accessory-quantity > span {
  color: var(--accessories-ink);
  font-size: var(--halo-type-small);
  font-weight: 500;
}

.accessory-quantity__controls {
  display: grid;
  grid-template-columns: 40px 56px 40px;
  min-height: 44px;
  border: 1px solid var(--accessories-line-strong);
  border-radius: var(--halo-radius-pill);
  background: var(--accessories-paper);
  overflow: hidden;
  transition: border-color var(--halo-duration-fast) var(--halo-ease-out);
}

.accessory-quantity__controls:focus-within {
  border-color: var(--halo-color-link);
  box-shadow: 0 0 0 3px var(--halo-color-focus-ring);
}

.accessory-quantity__controls button,
.accessory-quantity__controls input {
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--accessories-ink);
  text-align: center;
  font-family: inherit;
}

.accessory-quantity__controls button {
  cursor: pointer;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1;
  transition: background var(--halo-duration-fast) var(--halo-ease-out);
}

.accessory-quantity__controls button:hover:not(:disabled) {
  background: var(--halo-color-surface-muted);
}

.accessory-quantity__controls button:disabled,
.accessory-quantity__controls input:disabled {
  color: var(--accessories-muted);
  cursor: not-allowed;
}

.accessory-quantity__controls input {
  border-inline: 1px solid var(--accessories-line);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  border-radius: 0;
}

.accessory-quantity__controls input::-webkit-outer-spin-button,
.accessory-quantity__controls input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.accessory-add-cart {
  width: 100%;
  min-height: 52px;
  margin-top: 8px;
  border: 0 !important;
  border-radius: var(--halo-component-button-radius);
  background: var(--halo-color-action-secondary) !important;
  color: var(--halo-color-action-secondary-text) !important;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.2s ease;
}

main.accessory-pdp-detail .accessory-add-cart,
main.accessory-pdp-detail .btn-checkout {
  min-height: 52px;
  border-radius: var(--halo-component-button-radius);
  background: var(--halo-color-action-secondary) !important;
  color: var(--halo-color-action-secondary-text) !important;
  font-size: 1rem;
  font-weight: 500 !important;
  letter-spacing: 0;
}

.accessory-add-cart:hover {
  background: var(--halo-color-action-secondary-hover) !important;
  color: var(--halo-color-action-secondary-text) !important;
  transform: translateY(-1px);
}

.accessory-guarantee-note {
  display: flex;
  align-self: center;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  color: var(--pdp-text-secondary);
  font-size: 0.875rem;
}

.accessory-confidence-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}

.accessory-confidence-row span {
  min-height: 54px;
  display: grid;
  place-items: center;
  padding: 10px;
  border: 1px solid var(--accessories-line);
  border-radius: var(--halo-radius-md);
  background: var(--accessories-wash);
  color: var(--accessories-muted);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
}

.accessory-pdp-details,
.accessory-related {
  padding: var(--halo-section-y) 0;
}

.accessory-pdp-details {
  background: var(--accessories-paper);
}

.accessory-related {
  background: var(--accessories-paper);
}

.accessory-pdp-section-header {
  display: grid;
  gap: 12px;
  max-width: 760px;
  margin-bottom: 28px;
}

.accessory-pdp-section-header h2 {
  margin: 0;
  font-size: var(--halo-type-section);
  line-height: 1.05;
  letter-spacing: 0;
  font-weight: 400;
}

.accessory-detail-grid,
.accessory-related-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.accessory-pdp-details__panel {
  display: grid;
  grid-template-columns: minmax(320px, 0.72fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}

.accessory-pdp-details__media {
  min-height: clamp(340px, 30vw, 420px);
  border-radius: var(--halo-component-card-radius);
  background: var(--halo-color-surface-product);
}

.accessory-pdp-details__content {
  display: grid;
  align-content: center;
  min-width: 0;
}

.accessory-pdp-details .accessory-pdp-section-header {
  max-width: 620px;
  margin-bottom: 24px;
}

.accessory-pdp-details .accessory-pdp-section-header h2 {
  font-size: clamp(2rem, 3vw, 2.75rem);
}

.accessory-pdp-details .accessory-detail-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.accessory-detail-grid article,
.accessory-related-card {
  border: 1px solid var(--accessories-line);
  border-radius: var(--halo-component-card-radius);
  background: var(--accessories-paper);
  box-shadow: var(--halo-shadow-card);
}

.accessory-detail-grid article {
  display: grid;
  align-content: start;
  min-height: 146px;
  gap: 10px;
  padding: 22px;
}

.accessory-detail-grid h3,
.accessory-related-card h3 {
  margin: 0;
  color: var(--accessories-ink);
  font-size: var(--halo-type-card-title);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
}

.accessory-detail-grid p,
.accessory-detail-grid ul,
.accessory-related-card p {
  margin: 0;
  color: var(--accessories-muted);
  line-height: 1.52;
}

.accessory-detail-grid ul {
  display: grid;
  gap: 8px;
  padding: 0;
  list-style: none;
}

.accessory-related-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.accessory-related-card {
  display: grid;
  grid-template-rows: minmax(220px, auto) 1fr;
  overflow: hidden;
  /* Cards never translate on hover (style guide: "must not translate on
     hover so the CTA target stays under the pointer") — shadow only. */
  transition: border-color var(--halo-duration-fast) var(--halo-ease-out), box-shadow var(--halo-duration-fast) var(--halo-ease-out);
}

.accessory-related-card:hover {
  border-color: var(--accessories-line-strong);
  box-shadow: var(--halo-shadow-card-lg);
}

.accessory-related-card__media {
  display: grid;
  place-items: center;
  min-height: 220px;
  padding: var(--halo-space-lg);
  background: var(--accessories-product-surface);
}

.accessory-related-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.accessory-related-card__placeholder {
  color: var(--accessories-muted);
  font-weight: 850;
}

.accessory-related-card__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
}

.accessory-related-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
}

.accessory-related-card__footer span {
  color: var(--accessories-ink);
  font-weight: 500;
}

.accessory-related-card__footer a {
  color: var(--halo-color-link);
  font-weight: 500;
}

.accessory-related-card__footer a:hover {
  color: var(--halo-color-link-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

main.accessory-pdp-detail .accessory-feature-spotlight h2,
main.accessory-pdp-detail .accessory-benefit-cards h2,
main.accessory-pdp-detail .accessory-pdp-section-header h2 {
  font-family: var(--halo-font-live);
  font-weight: 400;
  letter-spacing: 0;
}

main.accessory-pdp-detail .accessory-feature-spotlight h2 {
  font-size: clamp(2rem, 3.4vw, 3rem);
}

.accessory-support {
  padding: 64px 0;
  background: var(--accessories-dark);
  color: var(--accessories-inverse);
}

.accessory-support__grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1fr);
  gap: 36px;
  align-items: start;
}

.accessory-support h2 {
  margin: 0 0 12px;
  font-size: var(--halo-type-section);
  line-height: 1.05;
  letter-spacing: var(--halo-tracking-tight);
}

.accessory-support p {
  margin: 0;
  color: var(--accessories-inverse-muted);
  line-height: 1.55;
}

.accessory-support .eyebrow {
  color: var(--accessories-inverse-muted);
}

.accessory-faq {
  display: grid;
  gap: 12px;
}

.accessory-faq details {
  border: 1px solid var(--accessories-dark-line);
  border-radius: var(--halo-radius-md);
  background: var(--accessories-dark-raised);
}

.accessory-faq summary {
  cursor: pointer;
  padding: 16px;
  color: var(--accessories-inverse);
  font-weight: 850;
}

.accessory-faq details p {
  padding: 0 16px 16px;
}

.accessory-faq .button {
  width: fit-content;
}

@media (max-width: 1120px) {
  .accessories-hero__grid,
  .featured-accessory__grid,
  .fit-guide__grid,
  .accessory-pdp-shell__grid,
  .accessory-support__grid {
    grid-template-columns: 1fr;
  }

  .accessory-buy-stack {
    position: static;
    max-height: none;
    overflow-y: visible;
  }

  .accessory-pdp-shell {
    padding-top: 16px;
  }

  .accessory-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .accessory-pdp-details__panel {
    grid-template-columns: 1fr;
  }

  .accessory-pdp-details__media {
    min-height: 360px;
  }

  .accessory-feature-spotlight__grid,
  .accessory-lifestyle__panel {
    grid-template-columns: 1fr;
  }

  .accessories-hero__grid {
    min-height: auto;
  }

  .accessories-hero__media {
    min-height: 420px;
  }

  .hero-product-stack__item {
    min-height: 136px;
  }

  .accessory-clusters,
  .accessory-grid--three,
  .accessory-related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .nav-cta {
    display: none;
  }

  .accessories-page .accessories-hero__grid {
    gap: 28px;
    padding: 28px 0 36px;
  }

  .accessories-hero__copy {
    gap: 16px;
  }

  .accessories-hero__media {
    min-height: 300px;
  }

  .hero-product-stack {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }

  .hero-product-stack__item,
  .hero-product-stack__item--large,
  .hero-product-stack__item--wide {
    grid-column: auto;
    grid-row: auto;
    aspect-ratio: 1 / 1;
    min-height: 124px;
  }

  .hero-product-stack__item--wide {
    grid-column: span 2;
    aspect-ratio: 2 / 1;
  }

  .hero-product-stack__item img,
  .hero-product-stack__item--large img {
    max-height: 145px;
  }

  .accessory-quickshop,
  .featured-accessory,
  .catalog-section,
  .fit-guide {
    padding: 52px 0;
  }

  .accessory-quickshop__header,
  .catalog-section__header,
  .catalog-group-block__header,
  .support-cta__grid {
    display: grid;
    align-items: start;
  }

  .accessory-clusters,
  .accessory-grid,
  .accessory-grid--three,
  .accessories-page .site-footer .footer-grid,
  .accessory-detail-grid,
  .accessory-related-grid,
  .accessory-confidence-row {
    grid-template-columns: 1fr;
  }

  .accessory-product,
  .accessory-product--horizontal {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(220px, auto) 1fr;
  }

  .accessory-product__media {
    min-height: 220px;
  }

  .featured-accessory__media {
    min-height: auto;
  }

  .accessory-pdp-shell,
  .accessory-pdp-details,
  .accessory-related {
    padding: 52px 0;
  }

  .accessory-buy-stack {
    padding: 0 16px 8px;
  }

  .accessory-buy-stack h1 {
    font-size: var(--halo-type-section);
  }

  .accessory-quantity {
    align-items: flex-start;
    flex-direction: column;
  }

  .accessory-quantity__controls {
    width: 100%;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
  }

  .accessory-thumb {
    width: auto;
  }

  .fit-matrix {
    display: grid;
    gap: 12px;
    border: 0;
    background: transparent;
  }

  .fit-matrix__row,
  .fit-matrix__row--head {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--accessories-line);
    border-radius: var(--radius-md);
    background: var(--accessories-paper);
  }

  .fit-matrix__row--head {
    display: none;
  }

  .fit-matrix__row > span {
    padding: 14px 16px;
    border-bottom: 1px solid var(--accessories-line);
  }

  .fit-matrix__row > span:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 460px) {
  .accessories-page .button,
  .support-link {
    width: 100%;
  }

  .accessory-product__meta {
    align-items: flex-start;
    flex-direction: column;
  }

  .product-price {
    font-size: 1.18rem;
  }
}

/* --------------------------------------------------------------------------
   Below-the-fold mockup sections (accessory PDP)
   Three placeholder design blocks: feature spotlight, benefit cards, lifestyle.
   -------------------------------------------------------------------------- */

.accessory-mockup-flag {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  width: fit-content;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--halo-color-link) 12%, transparent);
  color: var(--halo-color-link);
  font-size: var(--halo-type-caption, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.accessory-feature-spotlight {
  padding: var(--halo-section-y) 0;
  background: var(--accessories-paper);
}

.accessory-feature-spotlight__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}

/* Copy left, image right (media is first in the markup, so swap via order). */
.accessory-feature-spotlight__media {
  order: 2;
}

.accessory-feature-spotlight__copy {
  order: 1;
}

.accessory-feature-spotlight__media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  padding: clamp(20px, 4vw, 56px);
  border: 1px solid var(--accessories-line);
  border-radius: var(--halo-component-card-radius);
  background: var(--halo-color-surface-muted);
  color: var(--accessories-muted);
}

.accessory-feature-spotlight__media::before {
  content: none;
}

.accessory-feature-spotlight__media--asset {
  padding: 0;
  background: #111;
}

.accessory-feature-spotlight__media--asset > img,
.accessory-feature-spotlight__media--asset > iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.accessory-feature-spotlight__media--asset:has(> img) {
  aspect-ratio: auto;
  overflow: visible;
  border: 0;
  background: transparent;
}

.accessory-feature-spotlight__media--asset > img {
  position: static;
  width: 100%;
  height: auto;
  border-radius: var(--halo-component-card-radius);
  object-fit: initial;
}

.accessory-feature-spotlight__media--video {
  aspect-ratio: 16 / 9;
}

.accessory-feature-spotlight__placeholder {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 24px 28px;
  border: 1px dashed var(--accessories-line-strong);
  border-radius: var(--halo-component-card-radius);
  background: var(--accessories-paper);
  color: var(--accessories-muted);
  text-align: center;
  z-index: 1;
}

.accessory-feature-spotlight__placeholder svg {
  width: 40px;
  height: 40px;
  opacity: 0.7;
}

.accessory-feature-spotlight__placeholder strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.accessory-feature-spotlight__placeholder span {
  display: block;
  max-width: 28ch;
  color: var(--accessories-muted);
  font-size: 0.85rem;
  line-height: 1.45;
}

.accessory-feature-spotlight__copy {
  display: grid;
  gap: 18px;
  align-content: center;
}

.accessory-feature-spotlight__copy h2 {
  margin: 0;
  font-size: clamp(2rem, 2.5vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: 0;
  font-weight: 400;
}

.accessory-feature-spotlight__copy p {
  margin: 0;
  color: var(--accessories-muted);
  font-size: 1.05rem;
  line-height: 1.6;
}

.accessory-feature-spotlight__list {
  display: grid;
  gap: 0;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--accessories-line);
}

.accessory-feature-spotlight__list li {
  display: grid;
  grid-template-columns: minmax(140px, 0.38fr) minmax(0, 1fr);
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--accessories-line);
  color: var(--accessories-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

.accessory-feature-spotlight__list li::before {
  content: none;
}

.accessory-feature-spotlight__list strong {
  color: var(--accessories-ink);
  font-weight: 500;
}

.accessory-feature-spotlight__list span {
  color: var(--accessories-muted);
}

.accessory-feature-spotlight__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

.accessory-benefit-cards {
  padding: var(--halo-section-y) 0;
  background: var(--halo-color-surface-muted);
}

.accessory-benefit-cards__header {
  display: grid;
  gap: 14px;
  max-width: 760px;
  margin-bottom: 44px;
}

.accessory-benefit-cards__header h2 {
  margin: 0;
  font-size: var(--halo-type-section);
  line-height: 1.05;
  letter-spacing: 0;
  font-weight: 400;
}

.accessory-benefit-cards__header p {
  margin: 0;
  color: var(--accessories-muted);
  font-size: 1.05rem;
  line-height: 1.6;
}

.accessory-benefit-cards__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.accessory-benefit-cards__card {
  position: relative;
  display: grid;
  grid-template-rows: minmax(230px, auto) 1fr;
  align-content: stretch;
  gap: 0;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--accessories-line);
  border-radius: var(--halo-component-card-radius);
  background: var(--accessories-paper);
  box-shadow: var(--halo-shadow-card);
  /* Cards never translate on hover (style guide: "must not translate on
     hover so the CTA target stays under the pointer") — shadow only. */
  transition: border-color var(--halo-duration-fast) var(--halo-ease-out), box-shadow var(--halo-duration-fast) var(--halo-ease-out);
}

.accessory-benefit-cards__card:hover {
  border-color: var(--accessories-line-strong);
  box-shadow: var(--halo-shadow-card-lg);
}

.accessory-benefit-cards__media {
  min-height: 230px;
  background: var(--halo-color-surface-muted);
}

.accessory-benefit-cards__media--cool {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 46%),
    var(--halo-color-surface-product);
}

.accessory-benefit-cards__media--warm {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0) 46%),
    var(--halo-color-sale-surface);
}

.accessory-benefit-cards__media--neutral {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 46%),
    var(--halo-color-surface-muted);
}

.accessory-benefit-cards__body {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 22px;
}

.accessory-benefit-cards__icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: var(--halo-radius-xl);
  background: color-mix(in srgb, var(--halo-color-link) 14%, transparent);
  color: var(--halo-color-link);
}

.accessory-benefit-cards__icon svg {
  width: 28px;
  height: 28px;
}

.accessory-benefit-cards__card h3 {
  margin: 0;
  font-size: var(--halo-type-card-title);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
}

.accessory-benefit-cards__card p {
  margin: 0;
  color: var(--accessories-muted);
  line-height: 1.55;
}

.accessory-benefit-cards__stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--accessories-wash);
  color: var(--accessories-ink);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  width: fit-content;
}

.accessory-lifestyle {
  padding: 96px 0;
  background: var(--accessories-paper);
}

.accessory-lifestyle__panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 0;
  align-items: stretch;
  overflow: hidden;
  border-radius: var(--halo-radius-xl);
  background: var(--accessories-dark);
  color: var(--accessories-inverse);
  min-height: 460px;
}

.accessory-lifestyle__media {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 360px;
  padding: clamp(24px, 4vw, 48px);
  background:
    linear-gradient(135deg, #fff7d6 0%, #ffe79a 100%);
  color: #1d2b40;
}

.accessory-lifestyle__media::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 30% 25%, rgba(29, 43, 64, 0.08) 0, transparent 55%),
    radial-gradient(circle at 75% 80%, rgba(29, 43, 64, 0.05) 0, transparent 55%),
    repeating-linear-gradient(45deg, rgba(29, 43, 64, 0.05) 0, rgba(29, 43, 64, 0.05) 1px, transparent 1px, transparent 16px);
  pointer-events: none;
}

.accessory-lifestyle__placeholder {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 28px 32px;
  border: 1px dashed rgba(29, 43, 64, 0.35);
  border-radius: var(--halo-radius-lg);
  background: rgba(255, 255, 255, 0.55);
  color: #1d2b40;
  text-align: center;
  z-index: 1;
}

.accessory-lifestyle__placeholder svg {
  width: 44px;
  height: 44px;
  opacity: 0.75;
}

.accessory-lifestyle__placeholder strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.accessory-lifestyle__placeholder span {
  display: block;
  max-width: 28ch;
  color: rgba(29, 43, 64, 0.62);
  font-size: 0.85rem;
  line-height: 1.45;
}

.accessory-lifestyle__copy {
  display: grid;
  align-content: center;
  gap: 18px;
  padding: clamp(28px, 5vw, 64px);
}

.accessory-lifestyle__copy h2 {
  margin: 0;
  font-size: clamp(2rem, 2.5vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: var(--halo-tracking-tight);
  font-weight: 400;
}

.accessory-lifestyle__copy p {
  margin: 0;
  color: var(--accessories-inverse-muted);
  font-size: 1.05rem;
  line-height: 1.6;
}

.accessory-lifestyle__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 8px;
}

.accessory-lifestyle__stat {
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--halo-radius-md);
  background: rgba(255, 255, 255, 0.06);
}

.accessory-lifestyle__stat strong {
  display: block;
  font-size: 1.5rem;
  line-height: 1.05;
  color: var(--accessories-inverse);
  font-weight: 800;
}

.accessory-lifestyle__stat span {
  display: block;
  margin-top: 4px;
  color: var(--accessories-inverse-muted);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.accessory-lifestyle__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

.accessory-lifestyle__actions .button--ghost-light {
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  color: var(--accessories-inverse);
}

.accessory-lifestyle__actions .button--ghost-light:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 1120px) {
  .accessory-benefit-cards__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .accessory-pdp-details__panel {
    grid-template-columns: 1fr;
  }

  .accessory-pdp-details__media {
    min-height: 360px;
  }
}

@media (max-width: 760px) {
  .accessory-feature-spotlight,
  .accessory-benefit-cards,
  .accessory-lifestyle {
    padding: 56px 0;
  }

  .accessory-feature-spotlight__grid,
  .accessory-lifestyle__panel {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .accessory-feature-spotlight__media,
  .accessory-feature-spotlight__copy,
  .accessory-lifestyle__media,
  .accessory-lifestyle__copy {
    width: 100%;
    min-width: 0;
  }

  .accessory-feature-spotlight__media {
    order: 1;
    min-height: 220px;
  }

  .accessory-feature-spotlight__copy {
    order: 2;
  }

  .accessory-feature-spotlight__list li {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .accessory-benefit-cards__grid {
    grid-template-columns: 1fr;
  }

  .accessory-benefit-cards__card {
    grid-template-rows: minmax(190px, auto) 1fr;
  }

  .accessory-pdp-details__media {
    min-height: 260px;
  }

  .accessory-lifestyle__media {
    min-height: 280px;
  }

  .accessory-lifestyle__stats {
    grid-template-columns: 1fr 1fr;
  }
}