/* KCJ skin interface standard — last presentation layer.
   Shared controls use one scale. Hero artwork, product photography and badges
   keep their purpose-specific geometry. No commerce behavior lives here. */
:root {
  --ui-radius-control: 8px;
  --ui-radius-card: 12px;
  --ui-radius-pill: 999px;
  --ui-line: #d9dedb;
  --ui-line-strong: #8a9690;
  --ui-surface: #f5f7f6;
  --ui-selected: #edf3ef;
  --ui-ink: #172824;
  --ui-space: 24px;
  --ui-shadow: 0 12px 32px #17282414;
  --ui-control-height: 48px;
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23172824' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Actions: one shape and type scale, including informational and service pages. */
:is(#header,#main,#footer,#overlay-root) .button {
  min-height: var(--ui-control-height) !important;
  border-radius: var(--ui-radius-control) !important;
  padding: 12px 20px;
  font-size: 14px !important;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  gap: 10px;
  max-width: 100%;
  white-space: normal;
}
:is(#main,#footer,#overlay-root) .button.small { min-height: 44px !important; padding: 10px 16px; font-size: 13px !important; }
:is(#main,#overlay-root) :is(.product-purchase,.summary-card,.bag-content) > .button { min-height: 52px !important; }
:is(#main,#overlay-root) :is(.product-adviser-submit,.shop-price-apply) {
  min-height: 48px; padding: 12px 18px; border-radius: var(--ui-radius-control);
  font: 700 14px/1.5 var(--sans); letter-spacing: 0;
}
:is(#main,#overlay-root) :is(.text-button,.filter-clear,.shop-price-reset) {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; font-size: 13px; line-height: 1.5;
  text-underline-offset: 4px;
}
:is(#header,#main,#footer,#overlay-root) .button:disabled,
:is(#main,#overlay-root) :is(.product-adviser-submit,.shop-price-apply):disabled {
  opacity: .55; cursor: not-allowed; box-shadow: none;
}
/* Focus has the same geometry on every surface, with offset so it stays legible. */
:is(#header,#main,#footer,#overlay-root) :is(button,a,input,select,textarea,summary,[tabindex]):focus-visible {
  outline: 2px solid var(--ui-ink) !important; outline-offset: 3px !important;
}

/* Form fields, including account, delivery, checkout and advice tools. */
:is(#main,#overlay-root) :is(.form-field,.checkout-field,.customer-field) > :is(input,select,textarea):not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]) {
  min-height: 48px; border: 1px solid var(--ui-line); border-radius: var(--ui-radius-control);
  padding: 12px; background-color: #fff; line-height: 1.5; font-size: 16px;
}
:is(#main,#overlay-root) .form-field > select { padding-right: 40px !important; }
:is(#main,#overlay-root) .form-field > textarea { min-height: 132px; resize: vertical; }
:is(#main,#overlay-root) :is(.form-field,.checkout-field,.customer-field) { gap: 8px; }
:is(#main,#overlay-root) :is(.form-field label,.form-field > span,.filter-field > span) { font-size: 13px; line-height: 1.5; font-weight: 650; }
:is(#main,#overlay-root) :is(input,select,textarea):disabled { cursor: not-allowed; background-color: var(--ui-surface); }
/* State selectors match the base field specificity so validation stays visible. */
:is(#main,#overlay-root) :is(.form-field,.checkout-field,.customer-field) > :is(input,select,textarea):not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]):disabled { background-color: var(--ui-surface); }
:is(#main,#overlay-root) :is(.form-field,.checkout-field,.customer-field) > :is(input,select,textarea):not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]):user-invalid,
:is(#main,#overlay-root) .form-field > input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]):invalid:not(:placeholder-shown) { border-color: #b43c4b; }
.header-search,.header-search input,.explore-page-search,
#main .adviser-form textarea,#main .adviser-search-field,#main .care-search input,
#footer .customer-newsletter input[type=email],#footer .footer-market button { border-radius: var(--ui-radius-control); }

/* Filter, sort and selection controls belong to the same visual family. */
:is(#main,#overlay-root) .shop-filter-trigger {
  min-height: 64px; padding: 12px 14px; border-color: var(--ui-line);
  border-radius: var(--ui-radius-control); background: #fff; gap: 12px;
}
:is(#main,#overlay-root) .shop-filter-trigger > span { gap: 4px; }
:is(#main,#overlay-root) .shop-filter-trigger small { font-size: 11px; line-height: 1.4; font-weight: 650; letter-spacing: .04em; }
:is(#main,#overlay-root) .shop-filter-trigger strong { font-size: 14px; line-height: 1.4; font-weight: 600; }
:is(#main,#overlay-root) .shop-filter-control.is-open .shop-filter-trigger {
  border-color: var(--ui-ink); background: var(--ui-surface); box-shadow: 0 0 0 1px var(--ui-ink);
}
:is(#main,#overlay-root) .shop-filter-popover {
  border-color: var(--ui-line); border-radius: var(--ui-radius-card); box-shadow: var(--ui-shadow); padding: 8px;
}
:is(#main,#overlay-root) .shop-filter-search { border-color: var(--ui-line); border-radius: var(--ui-radius-control); background: var(--ui-surface); }
:is(#main,#overlay-root) .shop-filter-option {
  min-height: 48px; padding: 10px 12px; border-radius: var(--ui-radius-control); font-size: 14px; gap: 12px;
}
:is(#main,#overlay-root) .shop-filter-option > small { font-size: 12px; font-variant-numeric: tabular-nums; }
:is(#main,#overlay-root) .shop-filter-option.is-selected .shop-filter-check { border-color: var(--ui-ink); }
:is(#main,#overlay-root) :is(.shop-filter-image-note,.shop-price-explanation,.shop-price-result) { font-size: 12px; line-height: 1.6; }
:is(#main,#overlay-root) .shop-price-presets button {
  min-height: 44px; border-radius: var(--ui-radius-control); border-color: var(--ui-line); font-size: 12px; line-height: 1.4;
}
:is(#main,#overlay-root) .shop-price-presets button:hover { border-color: var(--ui-ink); background: var(--ui-surface); }
.shop-price-track::before { background: linear-gradient(to right,var(--ui-line) 0 var(--price-low),var(--ui-ink) var(--price-low) var(--price-high),var(--ui-line) var(--price-high) 100%); }
.shop-price-slider:focus-visible::-webkit-slider-thumb { outline-color: var(--ui-ink); }
.shop-price-slider:focus-visible::-moz-range-thumb { outline-color: var(--ui-ink); }
:is(#main,#overlay-root) .shop-price-inputs label > span { font-size: 12px; line-height: 1.5; }
:is(#main,#overlay-root) .shop-price-inputs label > div { border-color: var(--ui-line); border-radius: var(--ui-radius-control); }
:is(#main,#overlay-root) .shop-price-inputs input { min-height: 48px; font-size: 16px; font-variant-numeric: tabular-nums; }
:is(#main,#overlay-root) .mobile-filter-toggle {
  align-items: center; justify-content: center; gap: 9px; min-height: 56px;
  padding: 12px; border: 1px solid var(--ui-line); border-radius: var(--ui-radius-control);
  font: 650 14px/1.4 var(--sans); background: #fff; color: var(--ui-ink);
}
:is(#main,#overlay-root) .shop-filter-sort .shop-filter-trigger { min-height: 56px; }
:is(#main,#overlay-root) .active-filters { gap: 8px; }
:is(#main,#overlay-root) .active-filters button {
  min-height: 40px; padding: 8px 12px; border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-pill); font-size: 12px; font-weight: 600; gap: 8px;
}
:is(#main,#overlay-root) .active-filters > a { display: inline-flex; align-items: center; min-height: 40px; font-size: 13px; text-decoration: underline; text-underline-offset: 4px; }

#overlay-root .catalog-filter-form > .filter-apply {
  color: #fff !important; background: var(--ui-ink) !important;
  border-color: var(--ui-ink) !important; box-shadow: 0 0 0 12px #fff, 0 -12px 18px 10px #fff;
}
#overlay-root .catalog-filter-form > .filter-apply:hover { background: #29473e !important; }

/* Consistent outline icons: same stroke, optical size and square touch area. */
:is(#header,#main,#footer,#overlay-root) :is(.button,.icon-button,.icon-btn,.product-save,.product-add,.mobile-filter-toggle,.shop-filter-close) > svg {
  width: 20px; height: 20px; min-width: 20px; flex: none; stroke-width: 1.6;
}
:is(#main,#overlay-root) .shop-filter-trigger > svg { width: 16px; height: 16px; flex: 0 0 16px; stroke-linecap: round; stroke-linejoin: round; }
:is(#main,#overlay-root) :is(.product-save,.product-add,.modal-close,.drawer-close,.shop-filter-close) {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 10px;
}
:is(#main,#overlay-root) :is(.product-save,.product-add) { border-radius: 50%; }
:is(#main,#overlay-root) :is(.modal-close,.drawer-close,.shop-filter-close) { border-radius: var(--ui-radius-control); }
:is(#main,#overlay-root) .active-filters button > svg { width: 14px; height: 14px; flex: none; stroke-width: 1.6; }

/* Quiet product framing; imagery carries the visual interest. */
.product-card .product-visual { border: 1px solid var(--ui-line); border-radius: var(--ui-radius-card); box-shadow: none; }
.product-card .product-save { top: 10px; right: 10px; border: 1px solid var(--ui-line); }
.product-card .product-brand { font-size: 12px; font-weight: 700; letter-spacing: .02em; line-height: 1.5; }
.product-card .product-copy h3 { font-size: 16px; line-height: 1.5; font-weight: 550; display: block; height: auto; min-height: 0; max-height: none; overflow: visible; -webkit-line-clamp: unset; }
.product-card .product-meta { font-size: 12px; line-height: 1.6; max-height: none; overflow: visible; }
.product-card .price-amount { font-size: 17px; line-height: 1.4; font-weight: 800; font-variant-numeric: tabular-nums; }
.product-card .product-quick { border-color: var(--ui-line); font-size: 12px; font-weight: 650; }
.product-card .compare-toggle { font-size: 12px; }

@media (max-width:760px) {
  :is(#main,#overlay-root) .shop-filter-trigger strong { font-size: 13px; white-space: normal; }
  :is(#main,#overlay-root) .shop-filter-trigger small { font-size: 10px; }
  :is(#main,#overlay-root) .catalog-toolbar > .mobile-filter-toggle { display: flex; min-height: 56px; font-size: 13px; }
  :is(#main,#overlay-root) .catalog-toolbar > .shop-filter-sort .shop-filter-trigger { min-height: 56px; }
  .product-card .product-copy h3 { font-size: clamp(14px,3.8vw,16px); }
  .product-card .price-amount { font-size: 16px; }
  #overlay-root .catalog-filter-form .shop-filter-popover { position: static; width: 100%; max-width: 100%; margin-top: 8px; box-shadow: none; }
  #overlay-root .catalog-filter-form .shop-filter-options { max-height: min(260px,38vh); }
}
@media (prefers-reduced-motion:reduce) {
  :is(#header,#main,#footer,#overlay-root) :is(.button,.shop-filter-trigger svg,.product-save,.product-add) { transition: none; }
}
@media (forced-colors:active) {
  :is(#header,#main,#footer,#overlay-root) :is(button,a,input,select,textarea,summary,[tabindex]):focus-visible { outline-color: Highlight !important; }
  .shop-price-track::before { background: CanvasText; }
}
/* Shared page families: utility pages are compact; editorial story heroes keep
   their independent art direction. Component controls and disclosures live elsewhere. */
.customer-page-heading,
.page-head.care-heading,
.page-head:has(+ .utility-layout),
.adviser-heading {
  padding-top: 40px;
  padding-bottom: 28px;
}
.customer-page-heading h1,
.page-head.care-heading h1,
.page-head:has(+ .utility-layout) h1,
.adviser-heading h1 {
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.18;
  letter-spacing: -.035em;
  margin: 12px 0 16px;
}
.customer-page-heading > p,
.page-head.care-heading > p,
.page-head:has(+ .utility-layout) > p,
.adviser-heading > p {
  max-width: 68ch;
  font-size: 15px;
  line-height: 1.75;
  margin-top: 0;
}

/* Reuse the same frame for service/navigation cards without flattening heroes. */
.customer-hub-grid > a,
.customer-discovery-links > a,
.customer-contact-guidance {
  border: 1px solid var(--ui-line, #d9dedb);
  border-radius: var(--ui-radius-card, 12px);
  padding: var(--ui-space, 24px);
  background: #fff;
  min-width: 0;
}
.customer-entry > .customer-card,
.customer-availability,
.utility-card {
  border: 1px solid var(--ui-line, #d9dedb);
  border-radius: var(--ui-radius-card, 12px);
  padding: var(--ui-space, 24px);
  background: #fff;
  min-width: 0;
}
.care-preferences-form,
.care-privacy-help,
.care-receipt,
.care-review {
  border: 1px solid var(--ui-line, #d9dedb);
  border-radius: var(--ui-radius-card, 12px);
  padding: var(--ui-space, 24px);
  min-width: 0;
}
.care-privacy-help,
.care-review {
  background: var(--ui-surface, #f5f7f6);
}
.customer-hub-grid h3,
.customer-discovery-links strong,
.customer-contact-guidance > a > strong {
  font-size: 18px;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: -.02em;
}
.customer-hub-grid p,
.customer-discovery-links span,
.customer-contact-guidance > a > span,
.customer-help-steps p {
  font-size: 14px;
  line-height: 1.75;
}
.utility-card > h2,
.customer-availability > h2,
.customer-card > h2,
.customer-contact-guidance > h2 {
  font-size: clamp(22px, 2.3vw, 28px);
  line-height: 1.25;
  letter-spacing: -.025em;
  margin: 0 0 18px;
}

/* Advisor fact choices must be as legible as the shop's product information. */
.adviser-question-panel,
.adviser-answer,
.adviser-empty {
  padding: var(--ui-space, 24px);
  border-radius: var(--ui-radius-card, 12px);
  border: 1px solid var(--ui-line, #d9dedb);
  min-width: 0;
}
.adviser-empty {
  background: var(--ui-surface, #f5f7f6);
}
.adviser-selected-product small,
.adviser-selected-price,
.adviser-suggestions small,
.adviser-suggestions li > span > span {
  font-size: 12px;
  line-height: 1.55;
  letter-spacing: .015em;
}
.adviser-selected-product strong,
.adviser-suggestions strong {
  font-size: 13px;
  line-height: 1.5;
}
.adviser-price,
.adviser-card-copy p,
.adviser-card-copy dl,
.adviser-card-copy > .text-link {
  font-size: 13px;
  line-height: 1.65;
}
.adviser-price span,
.adviser-card-copy .eyebrow {
  font-size: 12px;
  line-height: 1.5;
}
.adviser-card-copy dl > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding-block: 10px;
}
.adviser-card-copy dl :is(dt, dd) {
  min-width: 0;
}
.adviser-card-copy dd {
  margin: 0;
}

/* Preserve real table semantics and intentional horizontal scrolling.
   A short pinned row label leaves a usable product column at 320px. */
.adviser-table-scroll {
  border: 1px solid var(--ui-line, #d9dedb);
  border-radius: var(--ui-radius-card, 12px);
  overflow: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.adviser-table-scroll table {
  font-size: 13px;
  line-height: 1.6;
  border-spacing: 0;
  border-collapse: separate;
}
.adviser-table-scroll :is(td, th) {
  padding: 14px 16px;
  border-bottom: 1px solid var(--ui-line, #d9dedb);
  vertical-align: top;
}
.adviser-table-scroll thead th {
  background: var(--ui-surface, #f5f7f6);
  font-weight: 650;
}
.adviser-table-scroll tbody th {
  font-weight: 650;
}
.adviser-table-scroll td {
  font-variant-numeric: tabular-nums;
}
.adviser-table-scroll tbody tr:last-child > * {
  border-bottom: 0;
}
.adviser-table-scroll :is(thead th:first-child, tbody th) {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 104px;
  width: 112px;
  max-width: 112px;
  background: var(--ui-surface, #f5f7f6);
  border-right: 1px solid var(--ui-line, #d9dedb);
}

/* Empty outcomes keep their surrounding page's alignment and next-step hierarchy. */
#main > .empty-state {
  width: calc(100% - 32px);
  max-width: 640px;
  padding: 48px 28px;
  margin: 32px auto 56px;
  border: 1px solid var(--ui-line, #d9dedb);
  border-radius: var(--ui-radius-card, 12px);
  background: var(--ui-surface, #f5f7f6);
}
#main > .empty-state h1 {
  font-size: clamp(28px, 3.2vw, 38px);
  line-height: 1.2;
  letter-spacing: -.035em;
}
.account-empty,
.care-empty,
.explore-empty {
  border: 1px solid var(--ui-line, #d9dedb);
  border-radius: var(--ui-radius-card, 12px);
  padding: var(--ui-space, 24px);
  background: var(--ui-surface, #f5f7f6);
}
#main .account-empty h2,
.care-empty h2,
.explore-empty h2,
.adviser-empty h2 {
  font-size: 26px;
  line-height: 1.25;
  letter-spacing: -.025em;
  margin: 0 0 14px;
}
#main .account-empty p,
.care-empty p,
.explore-empty p,
#main > .empty-state p,
.customer-locked > p {
  font-size: 14px;
  line-height: 1.75;
  max-width: 62ch;
}

@media (max-width: 760px) {
  .customer-page-heading,
  .page-head.care-heading,
  .page-head:has(+ .utility-layout),
  .adviser-heading {
    padding-top: 28px;
    padding-bottom: 24px;
  }
  .customer-page-heading h1,
  .page-head.care-heading h1,
  .page-head:has(+ .utility-layout) h1,
  .adviser-heading h1 {
    font-size: 30px;
    line-height: 1.2;
    margin: 10px 0 14px;
  }
  .customer-page-heading > p,
  .page-head.care-heading > p,
  .page-head:has(+ .utility-layout) > p,
  .adviser-heading > p {
    font-size: 14px;
  }
  .customer-hub-grid > a,
  .customer-discovery-links > a,
  .customer-contact-guidance,
  .customer-entry > .customer-card,
  .customer-availability,
  .utility-card {
    padding: 20px;
  }
  .care-preferences-form,
  .care-privacy-help,
  .care-receipt,
  .care-review,
  .adviser-question-panel,
  .adviser-answer,
  .adviser-empty {
    padding: 20px;
  }
  .adviser-table-scroll :is(td, th) {
    padding: 12px;
  }
  .adviser-table-scroll :is(thead th:first-child, tbody th) {
    min-width: 96px;
    width: 96px;
    max-width: 104px;
  }
  .account-discovery-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  #main > .empty-state {
    padding: 32px 20px;
    margin-block: 24px 40px;
  }
}
@media (max-width: 520px) {
  .adviser-card-copy dl > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
  }
  .adviser-card-copy dd {
    text-align: left;
  }
  #main .account-empty h2,
  .care-empty h2,
  .explore-empty h2,
  .adviser-empty h2 {
    font-size: 24px;
  }
}
/* Shared disclosures: native details semantics, one visual indicator. */
#main :is(.faq-list, .care-faq, .accordion, .editorial-faq, .standards-evidence-list, .product-details-content, .research-sources, .routine-extras, .customer-online-links, .customer-demo-links) summary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  min-width: 0;
  min-height: 56px;
  margin: 0;
  padding: 16px 36px 16px 0;
  list-style: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.5;
  letter-spacing: 0;
  text-align: start;
  white-space: normal;
}

#main :is(.faq-list, .care-faq, .accordion, .editorial-faq, .standards-evidence-list, .product-details-content, .research-sources, .routine-extras, .customer-online-links, .customer-demo-links) summary::-webkit-details-marker {
  display: none;
}

#main :is(.faq-list, .care-faq, .accordion, .editorial-faq, .standards-evidence-list, .product-details-content, .research-sources, .routine-extras, .customer-online-links, .customer-demo-links) summary::marker {
  content: '';
}

#main :is(.faq-list, .care-faq, .accordion, .editorial-faq, .standards-evidence-list, .product-details-content, .research-sources, .routine-extras, .customer-online-links, .customer-demo-links) summary::before,
#main :is(.faq-list, .care-faq, .accordion, .editorial-faq, .standards-evidence-list, .product-details-content, .research-sources, .routine-extras, .customer-online-links, .customer-demo-links) summary::after {
  content: '';
  position: absolute;
  inset-inline-end: 4px;
  top: 50%;
  width: 14px;
  height: 2px;
  margin: 0;
  border: 0;
  border-radius: 1px;
  background: currentColor;
  color: inherit;
  transform: translateY(-50%);
  transform-origin: center;
  transition: transform 160ms ease, opacity 160ms ease;
  pointer-events: none;
}

#main :is(.faq-list, .care-faq, .accordion, .editorial-faq, .standards-evidence-list, .product-details-content, .research-sources, .routine-extras, .customer-online-links, .customer-demo-links) summary::before {
  transform: translateY(-50%) rotate(90deg);
}

#main :is(.faq-list, .care-faq, .editorial-faq, .standards-evidence-list, .product-details-content, .routine-extras) details[open] > summary::before,
#main details:is(.accordion, .research-sources, .routine-extras, .customer-online-links, .customer-demo-links)[open] > summary::before {
  opacity: 0;
  transform: translateY(-50%) rotate(90deg) scaleX(0);
}

/* The account preview already contains a decorative text plus. */
#main .customer-demo-links > summary > span[aria-hidden="true"] {
  display: none;
}

#main :is(.faq-list, .care-faq, .accordion, .editorial-faq, .standards-evidence-list, .product-details-content, .research-sources, .routine-extras, .customer-online-links, .customer-demo-links) summary:focus-visible {
  outline: 2px solid var(--ink, #172824) !important;
  outline-offset: 3px !important;
  border-radius: 2px;
}

/* Keep spacing on the trigger so closed rows share the same height. */
#main :is(.faq-list, .care-faq, .editorial-faq, .standards-evidence-list, .product-details-content) details,
#main :is(.accordion, .customer-online-links, .customer-demo-links) {
  padding-block: 0;
  border-color: var(--ui-line, #d9dedb);
}

#main .product-details-content details[open] {
  padding-bottom: 20px;
}

#main :is(.faq-list, .care-faq) details > :is(p, div),
#main .accordion > :is(p, div) {
  padding-bottom: 20px;
  font-size: 14px;
  line-height: 1.75;
}

#main .editorial-faq details > p,
#main .standards-evidence-list details > p {
  margin-top: 0;
  font-size: 14px;
  line-height: 1.75;
}

#main :is(.research-sources, .customer-online-links, .customer-demo-links) > summary,
#main .product-details-content .product-ingredient-lists summary {
  font-size: 14px;
}

#main .research-sources {
  border-color: var(--ui-line, #d9dedb);
}

#main .research-sources > summary {
  padding-inline-start: 10px;
  padding-inline-end: 36px;
}

#main .research-sources-body,
#main .research-sources-body :is(p, strong, a) {
  font-size: 14px !important;
  line-height: 1.7 !important;
}

#main .customer-online-links > p,
#main .customer-demo-links > p {
  margin-top: 0;
  font-size: 14px;
  line-height: 1.7;
}

#main .customer-demo-links[open] {
  padding-bottom: 20px;
}

@media (min-width: 769px) {
  #main :is(.faq-list, .care-faq, .accordion, .editorial-faq, .standards-evidence-list, .product-details-content, .routine-extras) summary {
    font-size: 16px;
  }

  #main .product-details-content .product-ingredient-lists summary {
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #main :is(.faq-list, .care-faq, .accordion, .editorial-faq, .standards-evidence-list, .product-details-content, .research-sources, .routine-extras, .customer-online-links, .customer-demo-links) summary::before,
  #main :is(.faq-list, .care-faq, .accordion, .editorial-faq, .standards-evidence-list, .product-details-content, .research-sources, .routine-extras, .customer-online-links, .customer-demo-links) summary::after {
    transition: none;
  }
}

@media (forced-colors: active) {
  #main :is(.faq-list, .care-faq, .accordion, .editorial-faq, .standards-evidence-list, .product-details-content, .research-sources, .routine-extras, .customer-online-links, .customer-demo-links) summary::before,
  #main :is(.faq-list, .care-faq, .accordion, .editorial-faq, .standards-evidence-list, .product-details-content, .research-sources, .routine-extras, .customer-online-links, .customer-demo-links) summary::after {
    background: CanvasText;
    forced-color-adjust: none;
  }

  #main :is(.faq-list, .care-faq, .accordion, .editorial-faq, .standards-evidence-list, .product-details-content, .research-sources, .routine-extras, .customer-online-links, .customer-demo-links) summary:focus-visible {
    outline-color: Highlight !important;
  }
}
/* The advisor uses the storefront's shared outline icons and touch targets. */
#main :is(.adviser-search-icon, .adviser-action-icon),
.adviser-cta .adviser-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  line-height: 1;
}

#main :is(.adviser-search-icon, .adviser-action-icon, .adviser-search-clear) > svg,
#main [data-action="adviser-remove"] > svg,
.adviser-cta .adviser-action-icon > svg {
  width: 20px;
  height: 20px;
  min-width: 20px;
  flex: none;
  stroke-width: 1.6;
}

#main :is(.adviser-search-clear, [data-action="adviser-remove"]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 10px;
}

/* Inline research citations retain the outward direction of the former glyph. */
#main .adviser-research-sources .adviser-external-icon {
  vertical-align: middle;
}

#main .adviser-external-icon > svg {
  transform: rotate(-45deg);
}
/* Customer links use the shared stroke icons, regardless of font or locale. */
#main .customer-link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin-inline-start: 4px;
  vertical-align: -3px;
  line-height: 0;
}

#main .customer-link-icon > svg {
  display: block;
  width: 18px;
  height: 18px;
  flex: none;
}

#main :is(.customer-hub-symbol, .customer-device-icon) {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  line-height: 1;
}

#main :is(.customer-hub-symbol, .customer-device-icon) > svg {
  display: block;
  width: 24px;
  height: 24px;
  flex: none;
}

/* Dropdown audit: native choices retain their OS picker; their closed controls
   and custom suggestion surfaces share the storefront's readable scale. */
:is(#main,#overlay-root) select:not([hidden]) {
  min-height: 48px; max-width: 100%; min-width: 0; box-sizing: border-box;
  padding: 12px 40px 12px 12px !important;
  border: 1px solid var(--ui-line); border-radius: var(--ui-radius-control);
  background-color: #fff; font-family: var(--sans); font-size: 16px;
  line-height: 1.5; color: var(--ui-ink);
}
#header .language-control select {
  width: 58px; min-width: 58px; min-height: 44px; border-radius: var(--ui-radius-control);
  font-size: 16px; line-height: 1.4; padding: 8px 24px 8px 9px;
  background-position: right 8px center;
}
#header .country-button { min-height: 44px; border-radius: var(--ui-radius-control); }
:is(#main,#overlay-root) select:not([hidden]):disabled { background-color: var(--ui-surface); }
:is(#main,#overlay-root) select:not([hidden]):user-invalid { border-color: #b43c4b; }
:is(#main,#overlay-root) .shop-filter-trigger { width: 100%; text-align: left; }
:is(#main,#overlay-root) .shop-filter-trigger > span { min-width: 0; flex: 1; }
:is(#main,#overlay-root) .shop-filter-trigger strong {
  white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: normal;
}
:is(#main,#overlay-root) .shop-filter-trigger small { white-space: normal; }
:is(#main,#overlay-root) .shop-filter-search input { font-size: 16px !important; }
:is(#header,#main,#overlay-root) input[role=combobox] { font-size: 16px !important; }
#header .menu-panel a,
#overlay-root .mobile-menu a { min-height: 44px; font-size: 13px; }
#header .menu-link-group > a,
#header .menu-category-grid > a,
#overlay-root .mobile-nav-content .menu-link-group > a { border-radius: var(--ui-radius-control); }
:is(#header,#main,#overlay-root) :is(.shop-filter-popover,.search-suggestions,.visual-picker-menu,.adviser-suggestions) {
  box-sizing: border-box; border: 1px solid var(--ui-line); border-radius: var(--ui-radius-card);
  background: #fff; box-shadow: var(--ui-shadow); overscroll-behavior: contain;
  scroll-padding-block: 8px;
}
:is(#header,#main,#overlay-root) :is(.search-suggestions,.visual-picker-menu,.adviser-suggestions) [role=option] {
  min-height: 48px; font-size: 14px; line-height: 1.5;
}
:is(#header,#main,#overlay-root) :is(.search-suggestions,.visual-picker-menu,.adviser-suggestions) [role=option] strong {
  font-size: 14px; line-height: 1.5; font-weight: 650;
}
:is(#header,#main,#overlay-root) :is(.search-suggestions,.visual-picker-menu,.adviser-suggestions) [role=option] small {
  font-size: 12px; line-height: 1.5;
}
:is(#header,#main,#overlay-root) :is(.search-suggestions,.visual-picker-menu,.adviser-suggestions) [role=option][aria-selected=true] {
  background-color: var(--ui-selected); color: var(--ui-ink);
}
:is(#main,#overlay-root) .shop-filter-option.is-active { background: var(--ui-selected); outline: 2px solid var(--ui-ink); outline-offset: -2px; }
:is(#main,#overlay-root) .shop-filter-option.is-selected { background: var(--ui-surface); }
#main .visual-picker-control > span {
  display: flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  top: 50%; transform: translateY(-50%); line-height: 1;
}
#main :is(.visual-picker-control,.visual-picker-selected) svg { width: 20px; height: 20px; flex: none; stroke-width: 1.6; }
#main .visual-picker-selected .text-button { min-width: 44px; min-height: 44px; padding: 10px; }
@media (forced-colors:active) {
  :is(#main,#overlay-root) select:not([hidden]) { appearance: auto; background-image: none; padding-right: 12px !important; }
  :is(#main,#overlay-root) .shop-filter-option.is-active { outline-color: Highlight; }
}
:is(#header,#main) .explore-search-clear {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 10px;
}
:is(#header,#main) .explore-search-clear > svg { width: 20px; height: 20px; flex: none; stroke-width: 1.6; }