/* Products page built from the user's supplied product-board references. */
.products-quality-section {
  background: linear-gradient(110deg, #fffafd 0%, #fff7fc 46%, #f6efff 100%);
  padding: 0;
  border-bottom: 1px solid #f0e8f6;
}
.products-quality-shell {
  width: 100%;
  max-width: 1460px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, .98fr) minmax(0, 1.02fr);
  align-items: stretch;
}
.products-quality-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(30px, 4vw, 56px) clamp(24px, 4vw, 58px);
}
.products-quality-eyebrow {
  margin: 0 0 12px;
  color: #cc75b5;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .78rem;
  display: flex;
  align-items: center;
  gap: 12px;
}
.products-quality-eyebrow::after {
  content: "";
  width: 42px;
  height: 1px;
  background: #e1a5cd;
}
.products-quality-title {
  margin: 0;
  color: #201a70;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2.65rem, 4.2vw, 4.45rem);
  line-height: .91;
  font-weight: 600;
  letter-spacing: -.035em;
  max-width: 650px;
}
.products-quality-lead {
  max-width: 620px;
  color: #4d587a;
  font-size: clamp(.95rem, 1.1vw, 1.08rem);
  line-height: 1.5;
  margin: 18px 0 0;
}
.products-quality-highlights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(9px, 1.3vw, 20px);
  margin-top: 24px;
}
.products-quality-item {
  min-width: 0;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  column-gap: 10px;
  align-items: center;
}
.products-quality-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  grid-row: span 2;
  color: #b044a0;
  background: #fbe8f7;
  border: 1px solid #f5d9ee;
}
.products-quality-icon svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.products-quality-item strong {
  display: block;
  color: #292252;
  font: 600 .94rem/1.12 'Cormorant Garamond', Georgia, serif;
}
.products-quality-item span:last-child {
  align-self: start;
  display: block;
  margin-top: 4px;
  color: #5d6580;
  font-size: .69rem;
  line-height: 1.3;
}
.products-quality-photo {
  min-width: 0;
  overflow: hidden;
  background: #f6edfb;
  display: flex;
  align-items: stretch;
}
.products-quality-photo img {
  display: block;
  width: 100%;
  height: auto;
  align-self: stretch;
  object-fit: contain;
  object-position: center;
}

/* Keep the supplied OTC sheet whole, with its natural 2:3 proportions. */
.products-otc-reference {
  padding: clamp(20px, 3vw, 36px) 18px clamp(28px, 4vw, 48px);
  background: #fff;
  border-bottom: 1px solid #f0e8f5;
}
.products-otc-reference img {
  display: block;
  width: min(100%, 1024px);
  height: auto;
  object-fit: contain;
  margin-inline: auto;
}

.products-tabs-section {
  padding: 26px 0 48px;
  background: linear-gradient(180deg, #fff 0%, #fdf9ff 100%);
}
.products-tabs-rail {
  width: min(1360px, calc(100% - 44px));
  margin: 0 auto 22px;
}
.products-tab-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
}
.products-tab-button {
  appearance: none;
  flex: 0 0 auto;
  min-height: 42px;
  border: 1px solid #e6d9f1;
  border-radius: 999px;
  background: #fff;
  color: #342b78;
  padding: 10px 15px;
  font-family: 'DM Sans', Arial, sans-serif;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.15;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.products-tab-button:hover {
  border-color: #d39acb;
  background: #fff8fe;
}
.products-tab-button:focus-visible { outline: 3px solid #b880d0; outline-offset: 3px; }
.products-tab-button[aria-selected="true"] {
  color: #fff;
  border-color: #8d4bb3;
  background: linear-gradient(115deg, #352778 0%, #6d3c9c 58%, #b54eae 100%);
  box-shadow: 0 5px 14px rgba(106, 58, 151, .16);
}
.products-board-panel {
  width: min(1200px, calc(100% - 44px));
  margin-inline: auto;
  min-width: 0;
}
.products-board-panel img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  object-position: center top;
  margin-inline: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: none;
}
.products-board-panel img:focus-visible {
  outline: 3px solid #ad6fcb;
  outline-offset: 4px;
}

@media (min-width: 1500px) {
  .products-quality-shell { max-width: 1500px; }
}
@media (max-width: 980px) {
  .products-quality-shell { grid-template-columns: minmax(0, 1fr) minmax(0, .94fr); }
  .products-quality-copy { padding: 32px 24px; }
  .products-quality-title { font-size: clamp(2.45rem, 4.4vw, 3.5rem); }
  .products-quality-highlights { gap: 8px; margin-top: 20px; }
  .products-quality-item { grid-template-columns: 38px minmax(0,1fr); column-gap: 7px; }
  .products-quality-icon { width: 36px; height: 36px; }
  .products-quality-icon svg { width: 21px; height: 21px; }
  .products-quality-item strong { font-size: .83rem; }
  .products-quality-item span:last-child { font-size: .63rem; }
  .products-tabs-rail, .products-board-panel { width: calc(100% - 32px); }
}
@media (max-width: 760px) {
  .products-quality-shell { grid-template-columns: minmax(0, 1fr); }
  .products-quality-copy { padding: 31px 22px 23px; }
  .products-quality-title { font-size: clamp(2.65rem, 9vw, 3.45rem); }
  .products-quality-lead { margin-top: 14px; font-size: .96rem; }
  .products-quality-highlights { gap: 10px; margin-top: 20px; }
  .products-quality-item { grid-template-columns: 38px minmax(0,1fr); }
  .products-quality-photo { display: block; width: 100%; }
  .products-quality-photo img { width: 100%; height: auto; object-fit: contain; }
  .products-otc-reference { padding: 16px 10px 24px; }
  .products-tabs-section { padding: 18px 0 32px; }
  .products-tabs-rail {
    width: 100%;
    margin: 0 0 18px;
    padding: 0 11px 7px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #d8b1e1 transparent;
  }
  .products-tab-buttons { width: max-content; min-width: 100%; flex-wrap: nowrap; gap: 8px; }
  .products-tab-button { min-height: 40px; padding: 9px 13px; font-size: .76rem; }
  .products-board-panel { width: calc(100% - 20px); }
}
@media (max-width: 430px) {
  .products-quality-copy { padding: 27px 18px 20px; }
  .products-quality-title { font-size: 2.55rem; }
  .products-quality-highlights { grid-template-columns: 1fr; gap: 12px; }
  .products-quality-item { grid-template-columns: 42px minmax(0,1fr); }
  .products-quality-icon { width: 40px; height: 40px; }
  .products-quality-item strong { font-size: .91rem; }
  .products-quality-item span:last-child { font-size: .72rem; }
}

/* Products header search control: draw an outlined magnifier rather than the
   default filled SVG silhouette. This stylesheet is loaded only on Products. */
.site-header .search-btn svg{
  display:block;
  width:19px;
  height:19px;
  fill:none!important;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.site-header .search-btn svg circle,
.site-header .search-btn svg path{
  fill:none!important;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* v04: a unified portfolio browser with document-style tabs. */
.products-page .products-tabs-section { padding: 42px 0 56px; }
.products-browser-heading,
.products-page .products-tabs-rail,
.products-page .products-board-panel {
  box-sizing: border-box;
  width: min(1200px, calc(100% - 44px));
  margin-inline: auto;
}
.products-browser-heading { margin-bottom: 24px; }
.products-browser-heading .products-browser-eyebrow {
  margin: 0 0 8px; color: #963e82; font-size: .7rem;
  font-weight: 700; letter-spacing: .14em;
}
.products-browser-heading h2 {
  margin: 0; color: #27205f; font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 600; line-height: 1.15;
}
.products-browser-heading > p:last-child { margin: 10px 0 0; color: #626780; font-size: .88rem; }
.products-page .products-tabs-rail {
  margin-bottom: 0; padding: 12px 12px 0;
  background: #f1edf7; border: 1px solid #ddd5e9; border-bottom: 0;
  border-radius: 18px 18px 0 0;
}
.products-page .products-tab-buttons {
  width: 100%; min-width: 0; display: flex; flex-wrap: wrap;
  align-items: stretch; justify-content: flex-start; gap: 6px;
}
.products-page .products-tab-button {
  position: relative; box-sizing: border-box;
  flex: 1 1 calc((100% - 30px) / 6); min-width: 0; min-height: 66px;
  padding: 14px 12px; border: 1px solid transparent; border-bottom: 0;
  border-radius: 9px 9px 0 0; background: transparent;
  color: #59536f; font-size: .77rem; font-weight: 600; line-height: 1.4;
  white-space: normal; text-align: left; cursor: pointer;
  transition: color .18s ease, background .18s ease, box-shadow .18s ease;
}
.products-page .products-tab-button:hover { background: #e8e1f2; color: #342673; }
.products-page .products-tab-button[aria-selected="true"] {
  background: #fff; color: #342673; border-color: #ddd5e9;
  box-shadow: 0 -3px 10px rgba(43, 27, 76, .04); font-weight: 700;
}
.products-page .products-tab-button[aria-selected="true"]::before {
  content: ''; position: absolute; top: -1px; left: 12px; right: 12px;
  height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, #49307c, #c653a4);
}
.products-page .products-tab-button:focus-visible {
  outline: 2px solid #69408c; outline-offset: -5px; z-index: 1;
}
.products-page .products-board-panel {
  padding: 0 24px 28px; background: #fff;
  border: 1px solid #ddd5e9; border-top-color: #ebe5f1;
  border-radius: 0 0 18px 18px;
  box-shadow: 0 16px 40px rgba(49, 29, 83, .06);
}
.products-panel-heading { padding: 24px 4px 20px; margin-bottom: 20px; border-bottom: 1px solid #eee8f3; }
.products-panel-heading > span { color: #963e82; font-size: .65rem; font-weight: 700; letter-spacing: .14em; }
.products-panel-heading h3 { margin: 6px 0 0; color: #29215f; font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 600; line-height: 1.35; }
.products-page .products-board-panel:focus-visible { outline: 2px solid #69408c; outline-offset: 3px; }
@media (max-width: 980px) and (min-width: 761px) {
  .products-page .products-tab-button { flex-basis: calc((100% - 18px) / 4); }
}
@media (max-width: 760px) {
  .products-page .products-tabs-section { padding: 28px 0 36px; }
  .products-browser-heading, .products-page .products-tabs-rail,
  .products-page .products-board-panel { width: calc(100% - 24px); }
  .products-browser-heading { margin-bottom: 20px; }
  .products-page .products-tabs-rail {
    padding: 8px 8px 0; overflow-x: auto; overflow-y: hidden;
    scrollbar-width: thin; scrollbar-color: #b7a3cc #f1edf7;
    scroll-padding-inline: 8px; border-radius: 12px 12px 0 0;
  }
  .products-page .products-tab-buttons { width: max-content; min-width: 100%; flex-wrap: nowrap; gap: 4px; }
  .products-page .products-tab-button { flex: 0 0 auto; max-width: 200px; min-height: 60px; padding: 12px 16px; }
  .products-page .products-board-panel { padding: 0 8px 16px; border-radius: 0 0 12px 12px; }
  .products-panel-heading { padding: 20px 8px 16px; margin-bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .products-page .products-tab-button { transition: none; }
}

/* v05: familiar single-row contained tabs joined to their content surface.
   Pattern reference: IBM Carbon contained tabs; original Rolodex palette. */
.products-page .products-tabs-rail {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: end; gap: 8px; padding: 10px 10px 0;
  overflow: visible; background: #eee8f5; border-radius: 14px 14px 0 0;
}
.products-page .products-tab-buttons {
  display: flex; flex-wrap: nowrap; gap: 4px;
  width: 100%; min-width: 0; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.products-page .products-tab-buttons::-webkit-scrollbar { display: none; }
.products-page .products-tab-button {
  flex: 0 0 auto; min-width: 140px; max-width: 240px;
  min-height: 70px; padding: 18px 22px;
  border: 1px solid #d9cee7; border-bottom: 1px solid #cbbbdc;
  border-radius: 10px 10px 0 0;
  background: #e4daee; color: #625477;
  text-align: center; font-size: .83rem; line-height: 1.4;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.products-page .products-tab-button:hover { background: #f4eef9; color: #382563; }
.products-page .products-tab-button[aria-selected="true"] {
  background: #fff; color: #402477; border-color: #cbbbdc;
  border-bottom-color: #fff; box-shadow: none; font-weight: 700;
}
.products-page .products-tab-button[aria-selected="true"]::before {
  top: 0; left: 0; right: 0; height: 4px; border-radius: 10px 10px 0 0;
  background: linear-gradient(90deg, #49307c, #c653a4);
}
.products-tab-arrow {
  display: grid; place-items: center; width: 44px; height: 44px;
  margin-bottom: 13px; padding: 0; border: 1px solid #cdbddf;
  border-radius: 8px; color: #49307c; background: #fff;
  cursor: pointer; transition: background .15s ease;
}
.products-tab-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.products-tab-arrow:hover:not(:disabled) { background: #f9eafa; border-color: #b97aaa; }
.products-tab-arrow:disabled { opacity: .35; cursor: default; }
.products-tab-arrow:focus-visible { outline: 2px solid #69408c; outline-offset: 2px; }
.products-page .products-board-panel { border-top: 0; }
@media (max-width:760px) {
  .products-page .products-tabs-rail { grid-template-columns: 36px minmax(0,1fr) 36px; gap: 4px; padding: 8px 6px 0; }
  .products-page .products-tab-button { min-width: 135px; max-width: 210px; min-height: 70px; padding: 16px; }
  .products-tab-arrow { width: 36px; height: 44px; }
}

/* v07: v05 design, reduced to 75% of the original 70px tab height. */
.products-page .products-tab-button {
  height: 52.5px;
  min-height: 52.5px;
  padding: 6px 22px;
}
.products-page .products-tab-button[aria-selected="true"] {
  border-radius: 10px 10px 7px 7px;
}
.products-tab-arrow { margin-bottom: 4.25px; }
@media (max-width: 760px) {
  .products-page .products-tab-button { padding: 6px 16px; }
}

/* v08: outward lower curves connect the selected tab to the white panel. */
.products-page .products-tab-buttons {
  box-sizing: border-box;
  padding-inline: 10px;
  scroll-padding-inline: 10px;
}
.products-page .products-tab-button[aria-selected="true"] {
  border-radius: 10px 10px 0 0;
  z-index: 2;
  overflow: visible;
}
.product-tab-feet { display: none; pointer-events: none; }
.products-tab-button[aria-selected="true"] .product-tab-feet { display: block; }
.product-tab-feet::before,
.product-tab-feet::after {
  content: "";
  position: absolute;
  bottom: -1px;
  width: 10px;
  height: 10px;
  pointer-events: none;
}
.product-tab-feet::before {
  left: -10px;
  background: radial-gradient(circle at top left, transparent 9px, #cbbbdc 9px, #cbbbdc 10px, #fff 10px);
}
.product-tab-feet::after {
  right: -10px;
  background: radial-gradient(circle at top right, transparent 9px, #cbbbdc 9px, #cbbbdc 10px, #fff 10px);
}
