/* Product discovery changes layout only; every governed entry stays in HTML. */
.product-browse-controls[hidden], .product-category[hidden], .product-pdp-list > li[hidden] { display: none !important; }
.product-pdp-list > li[data-family-collapsed] { display: none !important; }
.product-browser { margin-block: 1.5rem 3rem; }
.product-browse-dock { margin-top: 1.5rem; }
.product-browse-controls { container-type: inline-size; padding: 1rem 1.25rem; border: 1px solid var(--bb-line, #c8c4bf); border-radius: .5rem; background: var(--bb-white, #fff); color: var(--bb-ink, #211f20); box-sizing: border-box; }
.product-browse-bar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1rem; align-items: end; }
.product-browse-bar label { display: block; min-width: 0; margin: 0; font-weight: 650; font-size: .9rem; line-height: 1.35; }
.product-search-field { grid-column: 1 / -1; }
.product-search-field input { display: block; width: 100%; min-width: 0; margin-top: .35rem; box-sizing: border-box; font: inherit; padding: .55rem 1rem; border: 1px solid currentColor; border-radius: .25rem; background: var(--bb-white, #fff); color: var(--bb-ink, #211f20); }
.product-browse-bar select { display: block; width: 100%; min-height: 2.75rem; margin-top: .35rem; padding: .5rem; font: inherit; font-weight: 400; color: inherit; background: var(--bb-white, #fff); border: 1px solid var(--bb-line, #c8c4bf); border-radius: .25rem; }
.product-browse-bar button { grid-column: 1 / -1; min-height: 2.75rem; font: inherit; padding: .65rem 1rem; border: 1px solid currentColor; border-radius: .25rem; color: inherit; background: transparent; cursor: pointer; }
.product-browse-bar :focus-visible, .product-category summary:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
.product-search-status { min-height: 1.5em; margin: .5rem 0 0; font-size: .9rem; }
.product-filter-note { margin: 1.25rem 0 0; font-size: .95rem; max-width: var(--bb-reading-width, 760px); }
/* Two compact rows once the column is wide enough: search and reset, then the five refinements. */
@container (min-width: 600px) {
  .product-browse-bar { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6rem .75rem; }
  .product-search-field { grid-column: 1 / 5; grid-row: 1; }
  .product-browse-bar button { grid-column: 5; grid-row: 1; padding-inline: .5rem; font-size: .9rem; line-height: 1.25; }
  .product-browse-bar label { font-size: .8rem; }
  .product-browse-bar select { min-height: 2.5rem; padding-block: .4rem; }
}
/* On larger screens the bar stays below the site header while the products scroll.
   Clip (rather than hide) horizontal overflow here: it keeps full-bleed bands
   from scrolling the page without making the reader a sticky scroll container.
   The pinned bar sits on an opaque page-ground band (its rounded corners
   included) with a short clear space below; category targets and refined
   results start below the whole band (product-browse.js). */
body.page-products main.reader { overflow-x: clip; }
@media (min-width: 900px) and (min-height: 760px) {
  .product-browse-dock { position: sticky; top: var(--product-browse-sticky-top, 0px); z-index: 20; padding-block-end: .5rem; background: var(--bb-white, #fff); }
  .product-browse-controls { padding-block: .75rem .4rem; }
}
.family-product-filter { margin-block: 0 1.25rem; }
.family-product-map li[hidden] { display: none !important; }
@media print { .family-product-filter { display: none; } .family-product-map li[hidden] { display: list-item !important; } }
.product-discovery-tags { display:flex; flex-wrap:wrap; gap:.4rem; margin-block:.75rem; font-size:.85rem; }
.product-discovery-tags > * { border:1px solid var(--bb-line,#c8c4bf); border-radius:1rem; padding:.25rem .6rem; }
/* Pills keep their own inset inside product rows, where row links otherwise lay out as full-width grids. */
.product-pdp-list .product-discovery-tags > *, .product-pdp-list .product-family-chips a { display: inline-flex; align-items: center; gap: 0; padding: .25rem .8rem; }
.product-discovery-tags > .product-technology-badge[data-technology="seneplex-plus"] { border-color: var(--bb-gold, #A69973); color: var(--bb-gold-text, #6B634A); font-weight: 650; }
.product-study-badge { font-weight:650; }
.product-family-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .25rem 0 .5rem; }
.product-family-chips a { display: inline-flex; align-items: center; padding: .25rem .8rem; border: 1px solid var(--bb-line, #c8c4bf); border-radius: 1rem; color: inherit; text-decoration: none; font-size: .9rem; }
.product-family-chips a[aria-current="true"] { background: var(--bb-ink, #211f20); border-color: var(--bb-ink, #211f20); color: var(--bb-white, #fff); }
.product-family-chips a:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.regimen-finder { container-type:inline-size; padding:clamp(1rem,3vw,2rem); margin-bottom:2rem; border:1px solid var(--bb-line,#c8c4bf); background:var(--bb-porcelain,#f6f6f3); }
.regimen-finder h2 { margin-top:0; }
.regimen-tabs { display:flex; flex-wrap:wrap; gap:.5rem; margin-block:1rem; }
.regimen-tabs[hidden], [data-routine-panel][hidden] { display:none; }
.regimen-tabs button { padding:.7rem .9rem; font:inherit; color:inherit; background:transparent; border:1px solid currentColor; border-radius:.25rem; cursor:pointer; }
.regimen-tabs button[aria-selected="true"] { background:var(--bb-ink,#211f20); color:var(--bb-white,#fff); }
.regimen-finder li { margin-block:.75rem; }
.regimen-finder :focus-visible, .product-browse-bar select:focus-visible { outline:3px solid currentColor; outline-offset:4px; }
/* Skin-type regimens carry the Beauty Book 2026 color bands (pp.12–13). */
.regimen-skin-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-top: 1rem; }
@container (min-width: 520px) { .regimen-skin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 1000px) { .regimen-skin-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.regimen-skin { --regimen-band: var(--bb-book-blue, #6D9BC8); min-width: 0; padding: 1rem 1rem 1.25rem; background: var(--bb-white, #fff); border: 1px solid var(--bb-line, #c8c4bf); border-top: 6px solid var(--regimen-band); }
.regimen-skin[data-skin-type="dry"] { --regimen-band: var(--bb-indigo, #272E64); }
.regimen-skin[data-skin-type="normal-to-dry"] { --regimen-band: #6282C1; }
.regimen-skin[data-skin-type="normal-to-oily"] { --regimen-band: var(--bb-book-blue, #6D9BC8); }
.regimen-skin[data-skin-type="oily-to-sensitive"] { --regimen-band: var(--bb-gold, #A69973); }
.regimen-finder .regimen-skin-grid .regimen-skin > h4 { margin: 0 0 .35rem; color: var(--bb-navy, #002B59); font-family: var(--bb-font-display, Georgia, serif); font-style: italic; font-weight: 400; font-size: 1.6rem; line-height: 1.15; }
.regimen-skin__promise { margin: 0 0 .75rem; font-size: .95rem; }
.regimen-skin ol, .regimen-day-color { padding-left: 0; list-style: none; }
.regimen-finder .regimen-skin li { margin-block: .65rem; }
.regimen-step-label { display: block; color: var(--bb-book-blue-text, #3E6E9F); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.regimen-skin__set { margin: 1rem 0 0; padding-top: .75rem; border-top: 1px solid var(--bb-line, #c8c4bf); font-size: .95rem; }
.regimen-step-products { display: block; margin-top: .25rem; }
.regimen-pill { display: inline-block; margin-left: .35rem; padding: .05rem .5rem; border: 1px solid var(--bb-gold, #A69973); border-radius: 1rem; color: var(--bb-gold-text, #6B634A); font-size: .75rem; font-weight: 650; line-height: 1.6; text-decoration: none; white-space: nowrap; vertical-align: .1em; }
.regimen-source { margin-bottom: 0; font-size: .85rem; }
.product-category-nav a[aria-current="true"] { color: var(--bb-white, #fff); background: var(--bb-ink, #211f20); }
.product-category-reading, .product-pdp-directory { margin-block: 1.25rem; border-block: 1px solid var(--bb-line, #c8c4bf); }
.product-category summary { cursor: pointer; padding: 1rem .25rem; font-weight: 600; line-height: 1.5; }
.product-category-reading[open] > summary, .product-pdp-directory[open] > summary { margin-bottom: 1rem; }
.product-category .product-pdp-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; padding: 0; list-style: none; }
.product-category .product-pdp-list > li { min-width: 0; padding: 1.25rem; border: 1px solid var(--bb-line, #c8c4bf); border-radius: .5rem; }
.product-category .product-pdp-list h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.25; overflow-wrap: normal; }
.product-category .product-pdp-list .product-guide-photo { float: none; width: auto; max-width: none; margin: 0 0 1.25rem; }
.product-category .product-pdp-list img { display: block; width: 100%; height: 15rem; object-fit: contain; }
.product-category .product-row-exits { line-height: 1.8; }
.product-category[id], .product-pdp-list [id], .regimen-skin[id] { scroll-margin-top: calc(var(--product-browse-sticky-top, 0px) + var(--product-browse-bar-height, 0px) + 1.5rem); }
@media (max-width: 640px) {
  .product-category .product-pdp-list { grid-template-columns: minmax(0, 1fr); }
}
@media print {
  .regimen-tabs { display:none; }
  [data-routine-panel][hidden] { display:block; }
  .product-browse-controls { display: none; }
  .product-category[hidden], .product-pdp-list > li[hidden], .product-pdp-list > li[data-family-collapsed] { display: block !important; }
  .product-category .product-pdp-list { display: block; }
  .product-category details::details-content { content-visibility: visible; display: block; }
}