/* Values from design/system/tokens.json v0.1.0. */
[data-lp-size-guide-open] {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #C2255C;
  background: transparent;
  border: 0;
  padding: 8px 0;
  font: 700 14px 'Nunito', system-ui, sans-serif;
  text-decoration: underline;
  cursor: pointer;
}
[data-lp-size-guide][hidden] { display: none; }
[data-lp-size-guide] {
  position: fixed;
  inset: 0;
  /* Above TranslatePress 3.3.9 floating switchers (plugin CSS max: 9999999). */
  z-index: 2147483000;
  display: flex;
  justify-content: flex-end;
  background: rgba(43, 27, 61, .4);
  color: #2B1B3D;
  font: 400 16px/1.6 'Nunito', system-ui, sans-serif;
}
.lp-size-guide-panel {
  box-sizing: border-box;
  width: min(420px, 100%);
  height: 100%;
  padding: 24px;
  overflow-y: auto;
  background: #FFFFFF;
  animation: lp-size-guide-right 200ms cubic-bezier(.2, .7, .2, 1);
}
#lp-size-guide-title {
  color: #2B1B3D;
  font: 600 24px/1.15 'Baloo 2', system-ui, sans-serif;
}
[data-lp-size-guide] button {
  min-width: 44px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #EADFCB;
  border-radius: 8px;
  background: #FFFFFF;
  color: #2B1B3D;
  font: inherit;
  cursor: pointer;
}
[data-lp-size-guide-close] { float: right; }
.lp-size-guide-units { display: flex; gap: 8px; margin: 24px 0 16px; }
[data-lp-size-guide] [aria-pressed="true"] {
  background: #CC3366;
  color: #FFFFFF;
  border-color: #CC3366;
}
[data-lp-size-guide] :focus-visible,
[data-lp-size-guide-open]:focus-visible { outline: 2px solid #C2255C; outline-offset: 2px; }
.lp-size-guide-scroll { overflow-x: auto; }
[data-lp-size-chart] { width: 100%; min-width: 360px; border-collapse: separate; border-spacing: 0; }
[data-lp-size-guide] [data-lp-size-chart] th,
[data-lp-size-guide] [data-lp-size-chart] td {
  padding: 12px 16px;
  border: 0;
  border-bottom: 1px solid #EADFCB;
  text-align: left;
  white-space: nowrap;
  background: #FFFFFF;
}
[data-lp-size-guide] [data-lp-size-chart] thead th { background: #FFEFD3; }
[data-lp-size-guide] [data-lp-size-chart] tbody tr:nth-child(odd) > * { background: #FFFFFF; }
[data-lp-size-guide] [data-lp-size-chart] tbody tr:nth-child(even) > * { background: #FFF8EC; }
[data-lp-size-chart] th:first-child { position: sticky; left: 0; z-index: 1; }
[data-lp-size-guide] [data-lp-size-chart] th:first-child { padding-inline: 8px; }
.lp-size-guide-scroll[data-lp-scrollable] [data-lp-size-chart] tbody th:first-child { box-shadow: 2px 0 4px rgba(43, 27, 61, .12); }
@keyframes lp-size-guide-right { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes lp-size-guide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media (max-width: 767px) {
  [data-lp-size-guide] { align-items: flex-end; }
  .lp-size-guide-panel {
    width: 100%;
    height: auto;
    max-height: 85vh;
    max-height: 85dvh;
    padding: 16px;
    border-radius: 14px 14px 0 0;
    animation-name: lp-size-guide-up;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lp-size-guide-panel { animation: none; }
}

.lp-size-guide-figure { margin:16px 0; text-align:center; }
.lp-size-guide-figure svg { display:block; width:100%; max-width:240px; height:auto; margin-inline:auto; }
